chore: design system colour tokens, primitives & Storybook

.github/workflows/frontend-chromatic.yml

@@ -0,0 +1,45 @@
+name: Frontend Chromatic
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - frontend/**
+      - .github/workflows/frontend-chromatic.yml
+
+permissions:
+  contents: read
+
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: frontend/.nvmrc
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v11
+        with:
+          workingDir: frontend
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true

frontend/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:@dword-design/import-alias/recommended',
+    'plugin:storybook/recommended',
   ],
   'globals': {
     '$': true,

frontend/.gitignore

@@ -33,3 +33,6 @@ common/project.js
 # Playwright
 e2e/playwright-report/
 e2e/test-results/
+
+*storybook.log
+storybook-static

frontend/.storybook/docs-theme.scss

@@ -0,0 +1,104 @@
+// =============================================================================
+// Storybook Docs Theme Overrides
+// =============================================================================
+// The Storybook docs renderer uses its own styling that doesn't respond to
+// our theme toggle. These overrides ensure documentation pages are readable
+// in both light and dark mode.
+// =============================================================================
+
+// Light mode — fix invisible inline code
+.sbdocs code {
+  color: #1a2634;
+}
+
+.dark {
+  // Docs page background
+  .sbdocs-wrapper {
+    background-color: var(--color-surface-default, #101628);
+    color: var(--color-text-default, #ffffff);
+  }
+
+  .sbdocs-content {
+    color: var(--color-text-default, #ffffff);
+  }
+
+  // Headings
+  .sbdocs h1,
+  .sbdocs h2,
+  .sbdocs h3,
+  .sbdocs h4,
+  .sbdocs h5 {
+    color: var(--color-text-default, #ffffff);
+  }
+
+  // Body text
+  .sbdocs p,
+  .sbdocs li,
+  .sbdocs td,
+  .sbdocs th {
+    color: var(--color-text-default, #ffffff);
+  }
+
+  // Code — inline and blocks
+  .sbdocs code {
+    background-color: var(--color-surface-emphasis, #202839);
+    color: var(--color-text-default, #ffffff);
+  }
+
+  .sbdocs pre {
+    background-color: var(--color-surface-emphasis, #202839);
+    color: var(--color-text-default, #ffffff);
+  }
+
+  // Storybook Source/code block container and all its children
+  .docblock-source,
+  .docblock-source > * {
+    background-color: var(--color-surface-emphasis, #202839) !important;
+    color: var(--color-text-default, #ffffff) !important;
+  }
+
+  // Copy button inside code blocks
+  .docblock-source button {
+    background-color: var(--color-surface-muted, #161d30) !important;
+    color: var(--color-text-default, #ffffff) !important;
+    border-color: var(--color-border-default, rgba(255, 255, 255, 0.16)) !important;
+  }
+
+  // Syntax highlighting tokens
+  .docblock-source .token {
+    color: var(--color-text-default, #ffffff) !important;
+  }
+
+  // Horizontal rules
+  .sbdocs hr {
+    border-color: var(--color-border-default, rgba(255, 255, 255, 0.16));
+  }
+
+  // Canvas (story preview) background
+  .docs-story {
+    background-color: var(--color-surface-default, #101628);
+  }
+
+  // Table borders
+  .sbdocs table {
+    border-color: var(--color-border-default, rgba(255, 255, 255, 0.16));
+  }
+
+  .sbdocs th,
+  .sbdocs td {
+    border-color: var(--color-border-default, rgba(255, 255, 255, 0.16));
+  }
+
+  // Table row backgrounds (override Storybook's alternating white rows)
+  .sbdocs tr {
+    background-color: var(--color-surface-default, #101628);
+  }
+
+  .sbdocs tr:nth-child(even) {
+    background-color: var(--color-surface-subtle, #15192b);
+  }
+
+  .sbdocs thead tr {
+    background-color: var(--color-surface-muted, #161d30);
+  }
+}

frontend/.storybook/main.js

@@ -0,0 +1,70 @@
+const path = require('path')
+const webpack = require('webpack')
+
+/** @type { import('storybook').StorybookConfig } */
+const config = {
+  stories: [
+    '../documentation/**/*.mdx',
+    '../documentation/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  staticDirs: ['../web'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
+      },
+    },
+  }),
+  webpackFinal: async (config) => {
+    config.resolve = config.resolve || {}
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      common: path.resolve(__dirname, '../common'),
+      components: path.resolve(__dirname, '../web/components'),
+      project: path.resolve(__dirname, '../web/project'),
+    }
+
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        { loader: 'css-loader', options: { importLoaders: 1 } },
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              silenceDeprecations: ['slash-div'],
+            },
+          },
+        },
+      ],
+    })
+
+    config.plugins = config.plugins || []
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        E2E: false,
+      }),
+    )
+
+    return config
+  },
+}
+module.exports = config

frontend/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<style>
+  .sidebar-header img {
+    max-width: 28px;
+    max-height: 28px;
+  }
+</style>

frontend/.storybook/manager.js

@@ -0,0 +1,44 @@
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+
+// Primitive palette — mirrors _primitives.scss
+// Storybook manager runs outside the app, so CSS vars aren't available.
+const slate = {
+  200: '#e0e3e9',
+  300: '#9da4ae',
+  850: '#161d30',
+  900: '#15192b',
+}
+const purple = { 600: '#6837fc' }
+
+addons.setConfig({
+  theme: create({
+    base: 'dark',
+    brandTitle: 'Flagsmith',
+    brandUrl: 'https://flagsmith.com',
+    brandImage: '/static/images/nav-logo.png',
+    brandTarget: '_blank',
+
+    // Sidebar
+    appBg: slate[900],
+    appContentBg: slate[850],
+    appBorderColor: 'rgba(255, 255, 255, 0.1)',
+
+    // Typography
+    fontBase: '"Inter", sans-serif',
+
+    // Toolbar
+    barBg: slate[900],
+    barTextColor: slate[300],
+    barSelectedColor: purple[600],
+
+    // Colours
+    colorPrimary: purple[600],
+    colorSecondary: purple[600],
+
+    // Text
+    textColor: slate[200],
+    textMutedColor: slate[300],
+    textInverseColor: slate[900],
+  }),
+})

frontend/.storybook/preview.js

@@ -0,0 +1,48 @@
+import '../web/styles/styles.scss'
+import './docs-theme.scss'
+
+/** @type { import('storybook').Preview } */
+const preview = {
+  globalTypes: {
+    theme: {
+      description: 'Dark mode toggle',
+      toolbar: {
+        title: 'Theme',
+        icon: 'moon',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme || 'light'
+      const isDark = theme === 'dark'
+
+      document.documentElement.setAttribute(
+        'data-bs-theme',
+        isDark ? 'dark' : 'light',
+      )
+      document.body.classList.toggle('dark', isDark)
+
+      return Story()
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: { disable: true },
+  },
+}
+
+export default preview

frontend/common/types/requests.ts

@@ -38,6 +38,7 @@ export type UpdateProjectBody = {
   stale_flags_limit_days?: number | null
   only_allow_lower_case_feature_names?: boolean
   feature_name_regex?: string | null
+  require_feature_owners?: boolean
 }
 
 export type UpdateOrganisationBody = {

frontend/common/types/responses.ts

@@ -226,6 +226,7 @@ export type Project = {
   total_segments?: number
   only_allow_lower_case_feature_names?: boolean
   feature_name_regex?: string | null
+  require_feature_owners?: boolean
   environments: Environment[]
 }
 export type ImportStrategy = 'SKIP' | 'OVERWRITE_DESTRUCTIVE'