diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 106851f9cb..47926115c4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,8 +23,9 @@ This Storybook instance is configured and served from the `/storybook-docs` pack In the background, multiple instances of Storybook will start up, one for each component package in the monorepo. - Storybook for `@frontify/fondue-components` will be available on port 6006 -- Storybook for `@frontify/fondue-charts` will be available on port 6007 -- Storybook for `@frontify/fondue` will be available on port 6008 +- Storybook for `@frontify/fondue-icons` will be available on port 6007 +- Storybook for `@frontify/fondue-charts` will be available on port 6008 +- Storybook for `@frontify/fondue` will be available on port 6009 You can also start the Storybook instances for the individual packages by running `pnpm storybook` in the respective package directory. diff --git a/package.json b/package.json index 0acdc00d63..b87cc90877 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "ci:version": "changeset version", "lint": "pnpm --stream --filter {packages/**} lint", "storybook": "concurrently 'pnpm storybook:packages' 'pnpm storybook:main'", - "storybook:main": "wait-on http://localhost:6006 http://localhost:6007 http://localhost:6008 && pnpm --stream --filter {storybook-docs} storybook", + "storybook:main": "wait-on http://localhost:6006 http://localhost:6007 http://localhost:6008 http://localhost:6009 && pnpm --stream --filter {storybook-docs} storybook", "storybook:packages": "pnpm --parallel --filter {packages/*} storybook --no-open", "typecheck": "pnpm --stream --filter {packages/*} typecheck", "changeset": "changeset", diff --git a/packages/charts/package.json b/packages/charts/package.json index 1ed543bdbd..45938f14df 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -33,7 +33,7 @@ "build": "vite build", "build:watch": "vite build --watch", "build:storybook": "storybook build", - "storybook": "storybook dev -p 6007", + "storybook": "storybook dev -p 6008", "lint": "eslint .", "lint:fix": "eslint --fix .", "typecheck": "tsc --noEmit", diff --git a/packages/fondue/package.json b/packages/fondue/package.json index 83fff293ff..fb8b3ba704 100644 --- a/packages/fondue/package.json +++ b/packages/fondue/package.json @@ -89,7 +89,7 @@ "test:browser": "cypress open --component", "test:file": "cypress run --component --spec", "typecheck": "tsc --noEmit", - "storybook": "storybook dev -p 6008", + "storybook": "storybook dev -p 6009", "ci": "pnpm install --frozen-lockfile" }, "peerDependencies": { diff --git a/packages/icons/.eslintignore b/packages/icons/.eslintignore index d23da25d79..f59e4efcbe 100644 --- a/packages/icons/.eslintignore +++ b/packages/icons/.eslintignore @@ -1,2 +1,3 @@ icons src/icons +storybook-static diff --git a/packages/icons/.gitignore b/packages/icons/.gitignore index b0b7ca2f60..d6cdec3898 100644 --- a/packages/icons/.gitignore +++ b/packages/icons/.gitignore @@ -111,3 +111,5 @@ dist src/icons !src/icons/.gitkeep + +storybook-static diff --git a/packages/icons/.storybook/DocumentationTemplate.mdx b/packages/icons/.storybook/DocumentationTemplate.mdx new file mode 100644 index 0000000000..89bbd0275b --- /dev/null +++ b/packages/icons/.storybook/DocumentationTemplate.mdx @@ -0,0 +1,25 @@ +import { ArgTypes, Canvas, Controls, Description, Markdown, Meta, Source, Stories, Title } from '@storybook/blocks'; + +
+ + + + + + <Description /> + + ## Preview + + <Canvas sourceState="shown" /> + + ## Controls + + <Controls /> + + ## API + + <ArgTypes /> + + <Stories /> + +</div> diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff new file mode 100644 index 0000000000..868c5d6c37 Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff differ diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff2 b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff2 new file mode 100644 index 0000000000..5fef4017b6 Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Bold.woff2 differ diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff new file mode 100644 index 0000000000..6c3afe8860 Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff differ diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff2 b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff2 new file mode 100644 index 0000000000..c3b7dbadf3 Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Medium.woff2 differ diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff new file mode 100644 index 0000000000..c954d07e7f Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff differ diff --git a/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff2 b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff2 new file mode 100644 index 0000000000..cc64e27678 Binary files /dev/null and b/packages/icons/.storybook/assets/fonts/SpaceGroteskFrontify-Regular.woff2 differ diff --git a/packages/icons/.storybook/frontifyTheme.ts b/packages/icons/.storybook/frontifyTheme.ts new file mode 100644 index 0000000000..9017a706ab --- /dev/null +++ b/packages/icons/.storybook/frontifyTheme.ts @@ -0,0 +1,71 @@ +import { create } from '@storybook/theming/create'; + +export const light = create({ + base: 'light', + + colorPrimary: '#2d3232', + colorSecondary: '#825fff', + + // UI + appBg: 'white', + appBorderColor: '#EAEBEE', + appBorderRadius: 4, + + // Typography + fontBase: + "'Space Grotesk Frontify', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + fontCode: 'Menlo, Courier, monospace', + + // Text colors + textColor: '#2d3232', + + // Toolbar default and active colors + barTextColor: '#2d3232', + barSelectedColor: '#2d3232', + barBg: '#FFFFFF', + + // Form colors + inputBg: '#FFFFFF', + inputBorder: '#EAEBEE', + inputTextColor: '#2d3232', + inputBorderRadius: 4, + + brandTitle: 'Frontify Storybook', + brandUrl: 'https://frontify.com', + brandImage: '/img/logo-charcoal.svg', +}); + +export const dark = create({ + base: 'dark', + + colorPrimary: '#fafafa', + colorSecondary: '#825fff', + + // UI + appBg: '#1a1c1c', + appBorderColor: '#424747', + appBorderRadius: 4, + + // Typography + fontBase: + "'Space Grotesk Frontify', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + fontCode: 'Menlo, Courier, monospace', + + // Text colors + textColor: '#fafafa', + + // Toolbar default and active colors + barTextColor: '#fafafa', + barSelectedColor: '#fafafa', + barBg: '#1a1d1d', + + // Form colors + inputBg: '#1a1c1c', + inputBorder: '#424747', + inputTextColor: '#fafafa', + inputBorderRadius: 4, + + brandTitle: 'Frontify Storybook', + brandUrl: 'https://frontify.com', + brandImage: '/img/logo-white.svg', +}); diff --git a/packages/icons/.storybook/main.ts b/packages/icons/.storybook/main.ts new file mode 100644 index 0000000000..7cd72b6c6c --- /dev/null +++ b/packages/icons/.storybook/main.ts @@ -0,0 +1,30 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + staticDirs: ['assets'], + addons: [ + '@etchteam/storybook-addon-status', + '@storybook/addon-a11y', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-links', + 'storybook-dark-mode', + ], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + docs: { + autodocs: 'tag', + defaultName: 'Documentation', + }, + viteFinal(config) { + // @ts-expect-error untyped name property + config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts'); + + return config; + }, +}; + +export default config; diff --git a/packages/icons/.storybook/manager-head.html b/packages/icons/.storybook/manager-head.html new file mode 100644 index 0000000000..7e85a40194 --- /dev/null +++ b/packages/icons/.storybook/manager-head.html @@ -0,0 +1,13 @@ +<!-- Custom CSS for Storybook interface goes here --> +<style> + .sidebar-header { + /* Center dropdown button */ + align-items: center !important; + } + + .sidebar-header img { + /* Responsive sidebar header image */ + width: 100%; + max-width: 200px; + } +</style> diff --git a/packages/icons/.storybook/manager.ts b/packages/icons/.storybook/manager.ts new file mode 100644 index 0000000000..6b9cfa4d6e --- /dev/null +++ b/packages/icons/.storybook/manager.ts @@ -0,0 +1,8 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { addons } from '@storybook/manager-api'; +import { light } from './frontifyTheme'; + +addons.setConfig({ + theme: light, +}); diff --git a/packages/icons/.storybook/preview-head.html b/packages/icons/.storybook/preview-head.html new file mode 100644 index 0000000000..ca7bfebc40 --- /dev/null +++ b/packages/icons/.storybook/preview-head.html @@ -0,0 +1,74 @@ +<style> + @font-face { + font-display: swap; + font-family: 'Space Grotesk Frontify'; + font-style: normal; + font-weight: 300; + src: + url('/fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'), + url('/fonts/SpaceGroteskFrontify-Light.woff') format('woff'); + } + + @font-face { + font-display: swap; + font-family: 'Space Grotesk Frontify'; + font-style: normal; + font-weight: 400; + src: + url('/fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'), + url('/fonts/SpaceGroteskFrontify-Regular.woff') format('woff'); + } + + @font-face { + font-display: swap; + font-family: 'Space Grotesk Frontify'; + font-style: normal; + font-weight: 500; + src: + url('/fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'), + url('/fonts/SpaceGroteskFrontify-Medium.woff') format('woff'); + } + + @font-face { + font-display: swap; + font-family: 'Space Grotesk Frontify'; + font-style: normal; + font-weight: 600; + src: + url('/fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'), + url('/fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff'); + } + + @font-face { + font-display: swap; + font-family: 'Space Grotesk Frontify'; + font-style: normal; + font-weight: 700; + src: + url('/fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'), + url('/fonts/SpaceGroteskFrontify-Bold.woff') format('woff'); + } + + .side-by-side { + display: grid; + grid-template-columns: 1fr 1fr; + height: 100%; + min-height: 100vh; + } + + .light.theme { + background: white; + padding: 1rem; + } + + .tw-dark.theme { + background: #1a1c1c; + padding: 1rem; + height: 100%; + min-height: 100vh; + } +</style> + +<script> + const global = globalThis; +</script> diff --git a/packages/icons/.storybook/preview.ts b/packages/icons/.storybook/preview.ts new file mode 100644 index 0000000000..56e4cc300d --- /dev/null +++ b/packages/icons/.storybook/preview.ts @@ -0,0 +1,55 @@ +import '@frontify/fondue-tokens/styles'; +import 'tailwindcss/tailwind.css'; +import type { Preview } from '@storybook/react'; +import DocumentationTemplate from './DocumentationTemplate.mdx'; + +const preview: Preview = { + parameters: { + docs: { + page: DocumentationTemplate, + toc: { + title: 'Table of contents', + headingSelector: 'h2, h3', + }, + }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + layout: 'fullscreen', + status: { + type: 'legacy', + statuses: { + released: { + background: 'rgb(50, 210, 182)', + color: '#ffffff', + description: 'This component is stable and released', + }, + in_progress: { + background: 'rgb(154, 126, 254)', + color: '#ffffff', + description: 'This component is in progress', + }, + planned: { + background: 'rgb(254, 194, 50)', + color: '#ffffff', + description: 'This component is planned to be revamped', + }, + legacy: { + background: 'rgb(129, 132, 132)', + color: '#ffffff', + description: 'This is a legacy component', + }, + deprecated: { + background: 'rgb(153, 33, 54)', + color: '#ffffff', + description: 'This is a legacy component', + }, + }, + }, + }, +}; + +export default preview; diff --git a/packages/icons/package.json b/packages/icons/package.json index 1e8afdb830..aca87c168c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -38,6 +38,8 @@ "build": "pnpm build:download-new-icons && pnpm build:generate-react-icons && vite build", "build:download-new-icons": "dotenv tsx scripts/download_new_icons.ts", "build:generate-react-icons": "tsx scripts/generate_react_icons.ts", + "build:storybook": "storybook build", + "storybook": "storybook dev -p 6007", "lint": "eslint .", "lint:fix": "eslint --fix .", "typecheck": "tsc --noEmit" @@ -46,19 +48,37 @@ "react": "^18" }, "devDependencies": { + "@etchteam/storybook-addon-status": "^4.2.4", "@frontify/eslint-config-react": "^0.17.6", + "@frontify/fondue-tokens": "workspace:^", "@iconify/tools": "^4.0.4", + "@storybook/addon-a11y": "^8.0.8", + "@storybook/addon-essentials": "^8.0.8", + "@storybook/addon-interactions": "^8.0.8", + "@storybook/addon-links": "^8.0.8", + "@storybook/blocks": "^8.0.8", + "@storybook/manager-api": "^8.0.8", + "@storybook/preview-api": "^8.0.8", + "@storybook/react": "^8.0.8", + "@storybook/react-vite": "^8.0.8", + "@storybook/theming": "^8.0.8", "@types/lodash": "^4.17.0", "@types/node": "^20.12.7", "@types/react": "^18.2.77", "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.19", "dotenv-cli": "^7.4.1", "eslint": "^8.57.0", "figma-api": "^1.11.0", + "fuzzysort": "^2.0.4", "lodash": "^4.17.21", + "postcss": "^8.4.38", "prettier": "^3.2.5", "react": "^18.2.0", + "storybook": "^8.0.8", + "storybook-dark-mode": "^4.0.1", "svgson": "^5.3.1", + "tailwindcss": "^3.4.3", "tsx": "^4.7.2", "typescript": "^5.4.5", "vite": "^5.2.8", diff --git a/packages/icons/postcss.config.cjs b/packages/icons/postcss.config.cjs new file mode 100644 index 0000000000..358002ec3b --- /dev/null +++ b/packages/icons/postcss.config.cjs @@ -0,0 +1,8 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +module.exports = { + plugins: { + autoprefixer: {}, + tailwindcss: {}, + }, +}; diff --git a/packages/icons/src/Icon.stories.tsx b/packages/icons/src/Icon.stories.tsx new file mode 100644 index 0000000000..64568e98b0 --- /dev/null +++ b/packages/icons/src/Icon.stories.tsx @@ -0,0 +1,80 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { useArgs } from '@storybook/preview-api'; +import { type Meta, type StoryObj } from '@storybook/react'; +import fuzzysort from 'fuzzysort'; +import kebabCase from 'lodash/fp/kebabCase'; +import { type FormEvent } from 'react'; + +import * as FondueIcons from './icons'; + +type Story = StoryObj<{ iconName: string }>; +const meta: Meta = { + title: 'Icons', + parameters: { + status: { + type: 'released', + }, + }, + args: { + iconName: '', + }, +}; +export default meta; + +const tooltipStyle = + 'before:tw-content-[attr(data-tooltip-text)] before:tw-absolute before:tw-opacity-0 before:tw-left-2/4 before:-tw-translate-x-2/4 before:tw-top-full before:-tw-mt-1 before:tw-px-2 before:tw-py-1 before:tw-whitespace-nowrap before:tw-text-xs before:tw-rounded before:tw-text-center hover:before:tw-block focus-within:before:tw-block before:tw-bg-box-neutral-inverse before:tw-z-10 before:tw-text-white hover:before:tw-opacity-100 focus-within:before:tw-opacity-100 before:tw-transition-opacity motion-reduce:before:tw-transition-none'; + +export const Default: Story = { + name: 'Icons', + render: () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [{ iconName }, updateArgs] = useArgs<{ iconName: string }>(); + + const handleSearchInput = (event: FormEvent) => { + updateArgs({ iconName: (event.target as HTMLInputElement).value }); + }; + + const iconsListSource: string[] = + iconName !== '' + ? fuzzysort.go(iconName, Object.keys(FondueIcons)).map((elem) => elem.target) + : Object.keys(FondueIcons).toSorted(); + + return ( + <div className="tw-p-8"> + <div className="tw-flex tw-gap-6 tw-items-center"> + <h1 className="tw-text-2xl tw-font-bold">Fondue Icons</h1> + + <input + type="search" + placeholder="Search Icon" + className="tw-p-2 tw-rounded tw-border tw-border-box-neutral tw-w-96 tw-text-sm" + defaultValue={iconName} + onInput={handleSearchInput} + /> + </div> + + <div className="tw-mt-8 tw-gap-4 tw-grid tw-grid-cols-[repeat(auto-fill,minmax(56px,1fr))]"> + {iconsListSource.map((icon) => { + const FondueIconComponent = FondueIcons[icon as keyof typeof FondueIcons]; + const iconPath = kebabCase(icon).replace(/^icon-/, ''); + + return ( + <button + key={icon} + data-tooltip-text={iconPath} + onClick={() => updateArgs({ iconName: icon })} + className={[ + 'tw-relative tw-inline-flex tw-items-center tw-justify-center tw-aspect-square tw-rounded tw-bg-box-neutral hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-transition-colors motion-reduce:tw-transition-none', + tooltipStyle, + ].join(' ')} + > + <FondueIconComponent /> + </button> + ); + })} + </div> + </div> + ); + }, +}; diff --git a/packages/icons/tailwind.config.ts b/packages/icons/tailwind.config.ts new file mode 100644 index 0000000000..967c3d7038 --- /dev/null +++ b/packages/icons/tailwind.config.ts @@ -0,0 +1,17 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +// @ts-expect-error Untyped +import frontifyTailwindConfig from '@frontify/fondue-tokens/tailwind'; +import { type Config } from 'tailwindcss'; + +export default { + presets: [frontifyTailwindConfig as Config], + content: ['./src/**/*.{js,ts,jsx,tsx}', './.storybook/DocumentationTemplate.mdx'], + theme: { + extend: { + colors: { + white: '#ffffff', + }, + }, + }, +} satisfies Config; diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json index 18bb181cc2..981c203c20 100644 --- a/packages/icons/tsconfig.json +++ b/packages/icons/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "ES2021", "useDefineForClassFields": true, - "lib": ["ES2021", "DOM", "DOM.Iterable"], + "lib": ["ESNext", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "moduleResolution": "Bundler", diff --git a/packages/icons/tsconfig.node.json b/packages/icons/tsconfig.node.json index 4b2b23dd9c..4d36267eb4 100644 --- a/packages/icons/tsconfig.node.json +++ b/packages/icons/tsconfig.node.json @@ -9,5 +9,5 @@ "target": "ESNext", "baseUrl": "." }, - "include": ["scripts", ".eslintrc.cjs", "vite.config.ts"] + "include": ["scripts", ".eslintrc.cjs", "postcss.config.cjs", "tailwind.config.ts", "vite.config.ts"] } diff --git a/packages/icons/vite.config.ts b/packages/icons/vite.config.ts index 9270f53edb..9275debd7c 100644 --- a/packages/icons/vite.config.ts +++ b/packages/icons/vite.config.ts @@ -3,26 +3,19 @@ import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; -import vitePluginExternal from 'vite-plugin-external'; import tsConfigPaths from 'vite-tsconfig-paths'; import { peerDependencies as peerDependenciesMap } from './package.json'; -export const globals = { +const peerDependencies = Object.keys(peerDependenciesMap); + +const globals = { react: 'React', 'react/jsx-runtime': 'react/jsx-runtime', }; export default defineConfig({ - plugins: [ - react(), - tsConfigPaths(), - vitePluginExternal({ - nodeBuiltins: true, - externalizeDeps: Object.keys(peerDependenciesMap), - }), - dts({ insertTypesEntry: true, exclude: ['**/*.stories.tsx'] }), - ], + plugins: [react(), tsConfigPaths(), dts({ insertTypesEntry: true, exclude: ['**/*.stories.tsx'] })], build: { lib: { entry: './src/index.ts', @@ -31,5 +24,17 @@ export default defineConfig({ }, sourcemap: true, minify: true, + rollupOptions: { + external: [...peerDependencies], + output: [ + { + name: 'FondueIcons', + format: 'es', + preserveModules: true, + preserveModulesRoot: 'src', + globals, + }, + ], + }, }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e73f267e9e..094570fe35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -782,12 +782,48 @@ importers: packages/icons: devDependencies: + '@etchteam/storybook-addon-status': + specifier: ^4.2.4 + version: 4.2.4(@types/react-dom@18.2.25)(@types/react@18.2.77) '@frontify/eslint-config-react': specifier: ^0.17.6 version: 0.17.6(eslint@8.57.0)(prettier@3.2.5)(react@18.2.0)(typescript@5.4.5) + '@frontify/fondue-tokens': + specifier: workspace:^ + version: link:../tokens '@iconify/tools': specifier: ^4.0.4 version: 4.0.4 + '@storybook/addon-a11y': + specifier: ^8.0.8 + version: 8.0.8 + '@storybook/addon-essentials': + specifier: ^8.0.8 + version: 8.0.8(@types/react@18.2.77)(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-interactions': + specifier: ^8.0.8 + version: 8.0.8(vitest@1.4.0) + '@storybook/addon-links': + specifier: ^8.0.8 + version: 8.0.8(react@18.2.0) + '@storybook/blocks': + specifier: ^8.0.8 + version: 8.0.8(@types/react@18.2.77)(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': + specifier: ^8.0.8 + version: 8.0.8(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': + specifier: ^8.0.8 + version: 8.0.8 + '@storybook/react': + specifier: ^8.0.8 + version: 8.0.8(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.5) + '@storybook/react-vite': + specifier: ^8.0.8 + version: 8.0.8(react-dom@18.2.0)(react@18.2.0)(rollup@4.14.0)(typescript@5.4.5)(vite@5.2.8) + '@storybook/theming': + specifier: ^8.0.8 + version: 8.0.8(react-dom@18.2.0)(react@18.2.0) '@types/lodash': specifier: ^4.17.0 version: 4.17.0 @@ -800,6 +836,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.2.1 version: 4.2.1(vite@5.2.8) + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.38) dotenv-cli: specifier: ^7.4.1 version: 7.4.1 @@ -809,18 +848,33 @@ importers: figma-api: specifier: ^1.11.0 version: 1.11.0 + fuzzysort: + specifier: ^2.0.4 + version: 2.0.4 lodash: specifier: ^4.17.21 version: 4.17.21 + postcss: + specifier: ^8.4.38 + version: 8.4.38 prettier: specifier: ^3.2.5 version: 3.2.5 react: specifier: ^18.2.0 version: 18.2.0 + storybook: + specifier: ^8.0.8 + version: 8.0.8(@babel/preset-env@7.23.9)(react-dom@18.2.0)(react@18.2.0) + storybook-dark-mode: + specifier: ^4.0.1 + version: 4.0.1(@types/react@18.2.77)(react-dom@18.2.0)(react@18.2.0) svgson: specifier: ^5.3.1 version: 5.3.1 + tailwindcss: + specifier: ^3.4.3 + version: 3.4.3(ts-node@10.9.2) tsx: specifier: ^4.7.2 version: 4.7.2 @@ -6826,7 +6880,7 @@ packages: commander: 6.2.1 cross-spawn: 7.0.3 detect-indent: 6.1.0 - envinfo: 7.8.1 + envinfo: 7.12.0 execa: 5.1.1 find-up: 5.0.0 fs-extra: 11.1.1 @@ -11545,13 +11599,6 @@ packages: resolution: {integrity: sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==} engines: {node: '>=4'} hasBin: true - dev: false - - /envinfo@7.8.1: - resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==} - engines: {node: '>=4'} - hasBin: true - dev: true /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} @@ -12854,6 +12901,10 @@ packages: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} dev: true + /fuzzysort@2.0.4: + resolution: {integrity: sha512-Api1mJL+Ad7W7vnDZnWq5pGaXJjyencT+iKGia2PlHUcSsSzWwIQ3S1isiMpwpavjYtGd2FzhUIhnnhOULZgDw==} + dev: true + /gensync@1.0.0-beta.2: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} diff --git a/storybook-docs/.storybook/main.ts b/storybook-docs/.storybook/main.ts index f7e1b32346..0cefe180a8 100644 --- a/storybook-docs/.storybook/main.ts +++ b/storybook-docs/.storybook/main.ts @@ -38,15 +38,21 @@ const config: StorybookConfig = { type: "auto-inject", expanded: true, }, + icons: { + title: "Icons", + url: "http://localhost:6007", + type: "auto-inject", + expanded: true, + }, charts: { title: "Charts", - url: "http://localhost:6007", + url: "http://localhost:6008", type: "auto-inject", expanded: true, }, legacy: { title: "Legacy", - url: "http://localhost:6008", + url: "http://localhost:6009", type: "auto-inject", expanded: true, }, @@ -58,6 +64,11 @@ const config: StorybookConfig = { url: "/new", expanded: true, }, + icons: { + title: "Icons", + url: "/icons", + expanded: true, + }, charts: { title: "Charts", url: "/charts", diff --git a/storybook-docs/package.json b/storybook-docs/package.json index 4a0882cb2c..cf437ea967 100644 --- a/storybook-docs/package.json +++ b/storybook-docs/package.json @@ -7,8 +7,9 @@ "storybook": "storybook dev -p 6010", "copy:ui:storybook": "mkdir -p storybook-static/new && cp -r ../packages/components/storybook-static/. storybook-static/new", "copy:charts:storybook": "mkdir -p storybook-static/charts && cp -r ../packages/charts/storybook-static/. storybook-static/charts", + "copy:icons:storybook": "mkdir -p storybook-static/icons && cp -r ../packages/icons/storybook-static/. storybook-static/icons", "copy:fondue:storybook": "mkdir -p storybook-static/legacy && cp -r ../packages/fondue/storybook-static/. storybook-static/legacy", - "build:storybook": "storybook build && pnpm run copy:ui:storybook && pnpm run copy:fondue:storybook && pnpm copy:charts:storybook" + "build:storybook": "storybook build && pnpm run copy:ui:storybook && pnpm run copy:fondue:storybook && pnpm copy:charts:storybook && pnpm copy:icons:storybook" }, "devDependencies": { "@etchteam/storybook-addon-status": "^4.2.4", diff --git a/storybook-docs/stories/2 - Contributing.mdx b/storybook-docs/stories/2 - Contributing.mdx index 106851f9cb..47926115c4 100644 --- a/storybook-docs/stories/2 - Contributing.mdx +++ b/storybook-docs/stories/2 - Contributing.mdx @@ -23,8 +23,9 @@ This Storybook instance is configured and served from the `/storybook-docs` pack In the background, multiple instances of Storybook will start up, one for each component package in the monorepo. - Storybook for `@frontify/fondue-components` will be available on port 6006 -- Storybook for `@frontify/fondue-charts` will be available on port 6007 -- Storybook for `@frontify/fondue` will be available on port 6008 +- Storybook for `@frontify/fondue-icons` will be available on port 6007 +- Storybook for `@frontify/fondue-charts` will be available on port 6008 +- Storybook for `@frontify/fondue` will be available on port 6009 You can also start the Storybook instances for the individual packages by running `pnpm storybook` in the respective package directory.