From bf3b95bfe5a18eee1aa33e69b262cfe6e2535639 Mon Sep 17 00:00:00 2001 From: Eli Bosley Date: Wed, 16 Apr 2025 15:56:25 -0400 Subject: [PATCH] feat: fix storybook config --- pnpm-lock.yaml | 16 ++++ unraid-ui/.gitignore | 3 +- unraid-ui/.storybook/main.ts | 24 +++-- unraid-ui/.storybook/preview.ts | 12 ++- unraid-ui/package.json | 4 + unraid-ui/scripts/build-style.mjs | 30 +++++++ unraid-ui/src/components.ts | 1 + .../components/form/combobox/ComboboxList.vue | 16 ++-- .../src/components/modals/ModalTarget.vue | 5 ++ unraid-ui/src/components/modals/index.ts | 1 + unraid-ui/src/composables/useTeleport.ts | 5 +- unraid-ui/src/index.ts | 2 - unraid-ui/src/vite-env.d.ts | 6 ++ .../components/form/Combobox.stories.ts | 89 +++++++++++++++++++ .../stories/components/form/Select.stories.ts | 3 +- web/composables/useTeleport.ts | 1 - 16 files changed, 187 insertions(+), 31 deletions(-) create mode 100644 unraid-ui/scripts/build-style.mjs create mode 100644 unraid-ui/src/components/modals/ModalTarget.vue create mode 100644 unraid-ui/src/components/modals/index.ts create mode 100644 unraid-ui/src/vite-env.d.ts create mode 100644 unraid-ui/stories/components/form/Combobox.stories.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9dab3012f..f4fa3b773 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -790,6 +790,9 @@ importers: postcss: specifier: ^8.4.49 version: 8.5.3 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.5.3) prettier: specifier: 3.5.3 version: 3.5.3 @@ -9707,6 +9710,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -22577,6 +22586,13 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.10 + postcss-import@16.1.0(postcss@8.5.3): + dependencies: + postcss: 8.5.3 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.10 + postcss-js@4.0.1(postcss@8.5.3): dependencies: camelcase-css: 2.0.1 diff --git a/unraid-ui/.gitignore b/unraid-ui/.gitignore index 0755904a6..b15d1ce8a 100644 --- a/unraid-ui/.gitignore +++ b/unraid-ui/.gitignore @@ -1,2 +1,3 @@ !.env.development -dist-wc/ \ No newline at end of file +dist-wc/ +.storybook/static/* \ No newline at end of file diff --git a/unraid-ui/.storybook/main.ts b/unraid-ui/.storybook/main.ts index cc2e29893..aace76651 100644 --- a/unraid-ui/.storybook/main.ts +++ b/unraid-ui/.storybook/main.ts @@ -1,26 +1,22 @@ -import { dirname, join } from "path"; -import type { StorybookConfig } from "@storybook/vue3-vite"; - +import { dirname, join } from 'path'; +import type { StorybookConfig } from '@storybook/vue3-vite'; const config: StorybookConfig = { - stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"], - addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions" - ], + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], framework: { - name: "@storybook/vue3-vite", + name: '@storybook/vue3-vite', options: { - docgen: "vue-component-meta", + docgen: 'vue-component-meta', }, }, core: { - builder: "@storybook/builder-vite", + builder: '@storybook/builder-vite', }, docs: { - autodocs: "tag", + autodocs: 'tag', }, + staticDirs: ['./static'], async viteFinal(config) { return { ...config, @@ -49,4 +45,4 @@ const config: StorybookConfig = { }, }; -export default config; \ No newline at end of file +export default config; diff --git a/unraid-ui/.storybook/preview.ts b/unraid-ui/.storybook/preview.ts index e8d22b379..727d4538e 100644 --- a/unraid-ui/.storybook/preview.ts +++ b/unraid-ui/.storybook/preview.ts @@ -1,8 +1,10 @@ import type { Preview } from '@storybook/vue3'; -import '../src/styles/globals.css'; import { registerAllComponents } from '../src/register'; +import '@/styles/index.css'; -registerAllComponents({}); +registerAllComponents({ + pathToSharedCss: '/index.css', +}); const preview: Preview = { parameters: { @@ -18,9 +20,11 @@ const preview: Preview = { decorators: [ (story) => ({ components: { story }, + template: `
-
+ +
`, @@ -28,4 +32,4 @@ const preview: Preview = { ], }; -export default preview; +export default preview; \ No newline at end of file diff --git a/unraid-ui/package.json b/unraid-ui/package.json index 6bed9e282..042d12e61 100644 --- a/unraid-ui/package.json +++ b/unraid-ui/package.json @@ -34,7 +34,10 @@ "preunraid:deploy": "pnpm build:wc", "unraid:deploy": "just deploy", "// Storybook": "", + "prestorybook": "pnpm storybook:css", "storybook": "storybook dev -p 6006", + "storybook:css": "node scripts/build-style.mjs", + "prebuild-storybook": "pnpm storybook:css", "build-storybook": "storybook build" }, "peerDependencies": { @@ -89,6 +92,7 @@ "eslint-plugin-vue": "^10.0.0", "happy-dom": "^17.0.0", "postcss": "^8.4.49", + "postcss-import": "^16.1.0", "prettier": "3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "rimraf": "^6.0.1", diff --git a/unraid-ui/scripts/build-style.mjs b/unraid-ui/scripts/build-style.mjs new file mode 100644 index 000000000..aaadf385b --- /dev/null +++ b/unraid-ui/scripts/build-style.mjs @@ -0,0 +1,30 @@ +import fs from 'fs/promises'; +import autoprefixer from 'autoprefixer'; +import postcss from 'postcss'; +import postcssImport from 'postcss-import'; +import tailwindcss from 'tailwindcss'; + +/** + * Helper script for storybook to build the CSS file for the components. This is used to ensure that modals render using the shadow styles. + */ + +process.env.VITE_TAILWIND_BASE_FONT_SIZE = 16; + +const inputPath = './src/styles/index.css'; +const outputPath = './.storybook/static/index.css'; // served from root: /index.css + +const css = await fs.readFile(inputPath, 'utf8'); + +const result = await postcss([ + postcssImport(), + tailwindcss({ config: './tailwind.config.ts' }), + autoprefixer(), +]).process(css, { + from: inputPath, + to: outputPath, +}); + +await fs.mkdir('./.storybook/static', { recursive: true }); +await fs.writeFile(outputPath, result.css); + +console.log('✅ CSS built for Storybook:', outputPath); \ No newline at end of file diff --git a/unraid-ui/src/components.ts b/unraid-ui/src/components.ts index 5734bca13..7abff68cb 100644 --- a/unraid-ui/src/components.ts +++ b/unraid-ui/src/components.ts @@ -18,3 +18,4 @@ export * from '@/components/common/tooltip'; export * from '@/components/common/toast'; export * from '@/components/common/popover'; export * from '@/components/brand'; +export * from '@/components/modals'; \ No newline at end of file diff --git a/unraid-ui/src/components/form/combobox/ComboboxList.vue b/unraid-ui/src/components/form/combobox/ComboboxList.vue index ff78e1b7a..1570abc25 100644 --- a/unraid-ui/src/components/form/combobox/ComboboxList.vue +++ b/unraid-ui/src/components/form/combobox/ComboboxList.vue @@ -5,15 +5,19 @@ import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'; import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'; import { computed, type HTMLAttributes } from 'vue'; -const props = withDefaults(defineProps(), { - position: 'popper', - align: 'center', - sideOffset: 4, +defineOptions({ + inheritAttrs: false, }); -const emits = defineEmits(); const { teleportTarget } = useTeleport(); +const props = withDefaults(defineProps(), { + forceMount: true, + position: 'popper', + to: undefined, +}); +const emits = defineEmits(); + const delegatedProps = computed(() => { const { class: _, ...delegated } = props; @@ -26,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);