chore(storybook): considere storybook as an app

Dockerfile

@@ -2,14 +2,22 @@ FROM node:24.12.0-alpine
 WORKDIR /build
 
 ARG TURBO_TOKEN=token
+ENV TURBO_TOKEN=${TURBO_TOKEN}
 
-ENV TURBO_TOKEN ${TURBO_TOKEN}
-
-COPY . .
+# Copy only necessary files for installation
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc ./
 
+# Install corepack and pnpm
 RUN npm install -g corepack@0.31.0
 RUN corepack enable
+
+# Install dependencies
 RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build storybook
 RUN pnpm turbo run build:storybook
 
 EXPOSE 80/tcp

.storybook/main.ts → apps/storybook/.storybook/main.ts

@@ -3,13 +3,13 @@ import remarkGfm from 'remark-gfm'
 
 export default {
   stories: [
-    '../packages/*/src/**/__stories__/index.stories.tsx',
-    '../utils/stories/src/**/*.mdx'
+    '../../../packages/*/src/**/__stories__/index.stories.tsx',
+    // '../utils/stories/src/**/*.mdx'
   ],
 
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-a11y", 
+    "@storybook/addon-a11y",
     "@storybook/addon-themes",
     "storybook-addon-tag-badges",
     {

.storybook/preview.tsx → apps/storybook/.storybook/preview.tsx

@@ -185,9 +185,11 @@ const decorators = [
   withThemeProvider,
 ]
 
-export default {
+const defaultExport = {
   parameters,
   decorators,
   preview,
   tags: ['autodocs']
 } satisfies Preview
+
+export default defaultExport

.storybook/storybookThemes.ts → apps/storybook/.storybook/storybookThemes.ts

@@ -1,8 +1,8 @@
 import { create } from 'storybook/theming'
-import lightTheme, { darkTheme } from '../packages/ui/src/theme'
-import logoDark from './assets/logo-dark.png'
-import logoLight from './assets/logo-light.png'
-import type lightBrandImage from './assets/scaleway-text-light.png'
+import { consoleLightTheme, consoleDarkTheme } from '@ultraviolet/themes'
+// import logoDark from './assets/logo-dark.png'
+// import logoLight from './assets/logo-light.png'
+// import type lightBrandImage from './assets/scaleway-text-light.png'
 
 enum Base {
   LIGHT = 'light',
@@ -11,16 +11,16 @@ enum Base {
 
 type GenerateStorybookThemeProps = {
   base: Base
-  theme: typeof darkTheme | typeof lightTheme
+  theme: typeof consoleDarkTheme | typeof consoleLightTheme
   brandUrl: string
-  brandImage: typeof lightBrandImage
+  // brandImage: typeof lightBrandImage
 }
 
 const generateStorybookTheme = ({
   base,
   theme,
   brandUrl,
-  brandImage,
+  // brandImage,
 }: GenerateStorybookThemeProps) =>
   create({
     base,
@@ -39,7 +39,7 @@ const generateStorybookTheme = ({
     // BIZARRE
     booleanBg: theme.colors.neutral.background,
     booleanSelectedBg: theme.colors.primary.background,
-    brandImage,
+    // brandImage,
     brandTitle: 'Ultraviolet UI',
 
     brandUrl,
@@ -60,14 +60,14 @@ const generateStorybookTheme = ({
 
 export const light = generateStorybookTheme({
   base: Base.LIGHT,
-  brandImage: logoLight,
+  // brandImage: logoLight,
   brandUrl: 'https://github.com/scaleway/ultraviolet',
-  theme: lightTheme,
+  theme: consoleLightTheme,
 })
 
 export const dark = generateStorybookTheme({
   base: Base.DARK,
-  brandImage: logoDark,
+  // brandImage: logoDark,
   brandUrl: 'https://github.com/scaleway/ultraviolet',
-  theme: darkTheme,
+  theme: consoleDarkTheme,
 })

apps/storybook/.storybook/vite.config.ts

@@ -0,0 +1,26 @@
+import svgr from '@svgr/rollup'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.tsx', '.json', '.css'],
+  },
+  assetsInclude: ['**/*.md'],
+  build: {
+    outDir: 'build',
+    reportCompressedSize: true,
+  },
+  optimizeDeps: {
+    exclude: ['@ultraviolet/*'],
+  },
+  plugins: [
+    svgr({ memo: true, svgo: false }),
+    react({
+      jsxRuntime: 'automatic',
+    }),
+    vanillaExtractPlugin({})
+  ],
+})

apps/storybook/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ultraviolet/storybook",
+  "version": "0.0.0",
+  "description": "Ultraviolet Storybook",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scaleway/ultraviolet.git",
+    "directory": "utils/stories"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "start:storybook": "STORYBOOK_ENVIRONMENT=development storybook dev -p 6006",
+    "start:storybook:production": "STORYBOOK_ENVIRONMENT=production storybook dev -p 6006",
+    "build:storybook": "STORYBOOK_ENVIRONMENT=production storybook build",
+    "build:storybook:stats": "pnpm run build:storybook -- --webpack-stats-json"
+  },
+  "keywords": [
+    "fonts",
+    "ui"
+  ],
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.x",
+    "pnpm": ">=10.x"
+  },
+  "os": [
+    "darwin",
+    "linux"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@storybook/addon-a11y": "10.1.10",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-links": "10.1.10",
+    "@storybook/addon-themes": "10.1.10",
+    "@storybook/builder-vite": "10.1.10",
+    "@storybook/mdx2-csf": "1.1.0",
+    "@storybook/react-vite": "10.1.10",
+    "@types/node": "24.10.4",
+    "@ultraviolet/form": "workspace:*",
+    "@ultraviolet/icons": "workspace:*",
+    "@ultraviolet/illustrations": "workspace:*",
+    "@ultraviolet/plus": "workspace:*",
+    "@ultraviolet/themes": "workspace:*",
+    "@ultraviolet/ui": "workspace:*",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/dynamic": "2.1.5",
+    "@vanilla-extract/recipes": "0.5.7",
+    "@vanilla-extract/sprinkles": "1.6.5",
+    "react": "19.2.3",
+    "storybook": "10.1.10",
+    "storybook-addon-tag-badges": "3.0.4"
+  }
+}

apps/storybook/src/Changelog/Changelog.stories.tsx

@@ -0,0 +1,33 @@
+import { Markdown } from '@storybook/addon-docs/blocks'
+import { Stack, Tabs } from '@ultraviolet/ui'
+import { useState } from 'react'
+import ChangelogMdForm from '../../../../packages/form/CHANGELOG.md?raw'
+import ChangelogMdIcons from '../../../../packages/icons/CHANGELOG.md?raw'
+import ChangelogMdPlus from '../../../../packages/plus/CHANGELOG.md?raw'
+import ChangelogMdThemes from '../../../../packages/themes/CHANGELOG.md?raw'
+import ChangelogMdUi from '../../../../packages/ui/CHANGELOG.md?raw'
+
+export const Changelog = () => {
+  const [selected, setSelected] = useState<string | number>('components')
+  const onChangeHandler = (e: string | number) => setSelected(e)
+
+  return (
+    <Stack gap={2}>
+      <Tabs onChange={onChangeHandler} selected={selected}>
+        <Tabs.Tab value="components">Components</Tabs.Tab>
+        <Tabs.Tab value="form">Form</Tabs.Tab>
+        <Tabs.Tab value="themes">Themes</Tabs.Tab>
+        <Tabs.Tab value="icons">Icons</Tabs.Tab>
+        <Tabs.Tab value="plus">Plus</Tabs.Tab>
+      </Tabs>
+
+      {selected === 'ui' ? <Markdown>{ChangelogMdUi}</Markdown> : null}
+      {selected === 'form' ? <Markdown>{ChangelogMdForm}</Markdown> : null}
+      {selected === 'themes' ? <Markdown>{ChangelogMdThemes}</Markdown> : null}
+      {selected === 'icons' ? <Markdown>{ChangelogMdIcons}</Markdown> : null}
+      {selected === 'plus' ? <Markdown>{ChangelogMdPlus}</Markdown> : null}
+    </Stack>
+  )
+}
+
+export default Changelog

apps/storybook/src/Changelog/index.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+import ThemeWrapper from '../components/ThemeWrapper'
+import { Changelog } from './Changelog.stories'
+
+<Meta title="Changelog" />
+
+<ThemeWrapper>
+  <Changelog />
+</ThemeWrapper>