[devices-module][homekit-connector] Refactoring devices module UI to …

…make it extendable with connectors (#319)

docs/.gitignore

@@ -0,0 +1,20 @@
+/node_modules
+/storybook-static
+yarn.lock
+tsconfig.tsbuildinfo
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+pnpm-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

docs/.storybook/main.ts

@@ -0,0 +1,43 @@
+import remarkGfm from 'remark-gfm';
+
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+	stories: [
+		'../src/components/**/*.mdx',
+		'../src/stories/**/*.mdx',
+		'../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+		'../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+	],
+	addons: [
+		'@chromatic-com/storybook',
+		'@storybook/addon-a11y',
+		'@storybook/addon-actions',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-links',
+		'@storybook/manager-api',
+		'storybook-dark-mode',
+		{
+			name: '@storybook/addon-docs',
+			options: {
+				mdxPluginOptions: {
+					mdxCompileOptions: {
+						remarkPlugins: [remarkGfm],
+					},
+				},
+			},
+		},
+	],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {
+			/*docgen: 'vue-component-meta'*/
+		},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+
+export default config;

docs/.storybook/manager.js

@@ -0,0 +1,20 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+import logo from './../src/assets/fastybird_row.svg';
+
+const theme = create({
+	brandImage: `${logo}`,
+	brandTitle: 'FastyBird UI - Storybook',
+});
+
+addons.setConfig({
+	theme,
+	sidebar: {
+		filters: {
+			patterns: (item) => {
+				return !(item.tags ?? []).includes('hideInSidebar');
+			},
+		},
+	},
+});

docs/.storybook/preview-body.html

@@ -0,0 +1,9 @@
+<style>
+	html {
+		font-size: 10px;
+	}
+
+	* {
+		box-sizing: border-box;
+	}
+</style>

docs/.storybook/preview.js

@@ -0,0 +1,22 @@
+import "@fastybird/web-ui-theme-chalk/src/index.scss";
+
+import "./storybook-styles.css";
+
+export const parameters = {
+    viewMode: "docs",
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    backgrounds: {
+        disable: true,
+    },
+    darkMode: {
+        darkClass: "dark",
+        lightClass: "light",
+        stylePreview: true,
+        classTarget: "html",
+    },
+};

docs/.storybook/storybook-styles.css

@@ -0,0 +1,29 @@
+.brand-color {
+	fill: #d9230f;
+}
+
+.default-color {
+	fill: #474949;
+}
+
+.dark-mode .default-color {
+	fill: #ddd;
+}
+
+#storybook-docs {
+	table {
+		width: 100%;
+	}
+
+	.sbdocs.sbdocs-preview {
+		background-color: transparent;
+	}
+}
+
+.dark .docs-story {
+	background: rgba(51, 51, 51);
+}
+
+div[class*='css-'] {
+	transform: none;
+}