feat(storybook): initialize a unified root storybook (#2070)

* moving ...

* ditch the @web and use latest storybook

* add storybook commitlint

* delete src/stories

* Update .storybook/main.js

Co-authored-by: Sander Bruens <[email protected]>

* Update package.json

---------

Co-authored-by: Sander Bruens <[email protected]>

.gitignore

@@ -12,3 +12,5 @@ node_modules
 /server_manager/install_scripts/gcp_install_script.ts
 /output
 /build
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,23 @@
+import {join, dirname} from 'path';
+
+/**
+ * Resolves the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ['../client/**/stories.ts', '../server_manager/**/stories.ts'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="../client/src/www/style.css" rel="stylesheet" />

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

client/src/www/views/contact_view/stories.ts

@@ -22,7 +22,7 @@ import './index';
 import {localize} from '../../testing/localize';
 
 export default {
-  title: 'Contact View',
+  title: 'Client/Contact View',
   component: 'contact-view',
   argTypes: {
     onSuccess: {action: 'success'},

client/src/www/views/contact_view/support_form/stories.ts

@@ -23,7 +23,7 @@ import {FormValues} from './index';
 import {localize} from '../../../testing/localize';
 
 export default {
-  title: 'Contact View/Support Form',
+  title: 'Client/Contact View/Support Form',
   component: 'support-form',
   argTypes: {
     disabled: {

client/src/www/views/servers_view/server_connection_indicator/stories.ts

@@ -20,7 +20,7 @@ import {html} from 'lit';
 import {ServerConnectionIndicator, ServerConnectionState} from './index';
 
 export default {
-  title: 'Servers View/Server Connection Indicator',
+  title: 'Client/Servers View/Server Connection Indicator',
   component: 'server-connection-indicator',
   args: {
     connectionState: ServerConnectionState.DISCONNECTED,

client/src/www/views/servers_view/server_list/stories.ts

@@ -24,7 +24,7 @@ import {localize} from '../../../testing/localize';
 import {ServerConnectionState} from '../server_connection_indicator';
 
 export default {
-  title: 'Servers View/Server List',
+  title: 'Client/Servers View/Server List',
   component: 'server-list',
   args: {
     servers: [

client/src/www/views/servers_view/server_list_item/server_card/stories.ts

@@ -24,7 +24,7 @@ import {localize} from '../../../../testing/localize';
 import {ServerConnectionState} from '../../server_connection_indicator';
 
 export default {
-  title: 'Servers View/Server List Item',
+  title: 'Client/Servers View/Server List Item',
   args: {
     server: {
       name: 'My Server',

commitlint.config.js

@@ -25,6 +25,7 @@ module.exports = {
         'service/linux',
         'service/windows',
         'src/build',
+        'storybook',
         'www',
       ],
     ],