Use new element-plus theme (#259)

packages/constants/.gitignore → docs/.gitignore

@@ -1,5 +1,5 @@
-/dist
 /node_modules
+/storybook-static
 yarn.lock
 tsconfig.tsbuildinfo
 

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;
+}