fix: storybook missing assets (#1814)

README.md

@@ -58,9 +58,9 @@ const App = () => <Button>Click Me</Button>;
 If you are using the old components, you can continue to import them directly from the `@frontify/fondue` package.
 
 ```tsx
-import { FondueButton } from "@frontify/fondue";
+import { Button } from "@frontify/fondue";
 
-const App = () => <FondueButton>Click Me</FondueButton>;
+const App = () => <Button>Click Me</Button>;
 ```
 
 ## Contributing

packages/charts/.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',
+});

packages/charts/.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>

packages/charts/.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,
+});

packages/charts/package.json

@@ -73,8 +73,10 @@
         "@storybook/addon-actions": "^8.0.8",
         "@storybook/addon-essentials": "^8.0.8",
         "@storybook/addon-links": "^8.0.8",
+        "@storybook/manager-api": "^8.0.8",
         "@storybook/react": "^8.0.8",
         "@storybook/react-vite": "^8.0.8",
+        "@storybook/theming": "^8.0.8",
         "@testing-library/react": "^15.0.0",
         "@types/d3-hierarchy": "^3.1.7",
         "@types/d3-scale": "^4.0.8",

packages/charts/postcss.config.cjs

@@ -2,7 +2,7 @@
 
 module.exports = {
     plugins: {
-        tailwindcss: {},
         autoprefixer: {},
+        tailwindcss: {},
     },
 };

packages/components/.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',
+});

packages/components/.storybook/main.ts

@@ -2,6 +2,7 @@ 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',

packages/components/.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>

packages/components/.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,
+});

packages/components/.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>