@forumone/create-throughline 0.2.0 → 0.3.0

package/dist/templates/with-reference-ds/design-system/src/tokens/colors.ts

@@ -0,0 +1,54 @@
+export const colors = {
+  'color.neutral.0': '#FFFFFF',
+  'color.neutral.50': '#FAFAFA',
+  'color.neutral.100': '#F4F4F5',
+  'color.neutral.200': '#E4E4E7',
+  'color.neutral.300': '#D4D4D8',
+  'color.neutral.400': '#A1A1AA',
+  'color.neutral.500': '#71717A',
+  'color.neutral.600': '#52525B',
+  'color.neutral.700': '#3F3F46',
+  'color.neutral.800': '#27272A',
+  'color.neutral.900': '#18181B',
+  'color.neutral.1000': '#000000',
+
+  'color.brand.primary': '#2563EB',
+  'color.brand.primaryHover': '#1D4ED8',
+  'color.brand.secondary': '#0891B2',
+
+  'color.text.primary': '#18181B',
+  'color.text.secondary': '#52525B',
+  'color.text.muted': '#71717A',
+  'color.text.inverse': '#FFFFFF',
+
+  'color.bg.primary': '#FFFFFF',
+  'color.bg.secondary': '#FAFAFA',
+  'color.bg.tertiary': '#F4F4F5',
+  'color.bg.inverse': '#18181B',
+
+  'color.border.default': '#E4E4E7',
+  'color.border.strong': '#D4D4D8',
+
+  'color.state.success': '#16A34A',
+  'color.state.warning': '#CA8A04',
+  'color.state.error': '#DC2626',
+  'color.state.info': '#2563EB',
+} as const
+
+/**
+ * Tokens that swap under `prefers-color-scheme: dark`. Keys match the base
+ * palette; values replace the light defaults when the media query applies.
+ */
+export const darkOverrides = {
+  'color.text.primary': '#FAFAFA',
+  'color.text.secondary': '#A1A1AA',
+  'color.text.muted': '#71717A',
+  'color.bg.primary': '#18181B',
+  'color.bg.secondary': '#27272A',
+  'color.bg.tertiary': '#3F3F46',
+  'color.bg.inverse': '#FAFAFA',
+  'color.border.default': '#3F3F46',
+  'color.border.strong': '#52525B',
+} as const
+
+export type ColorToken = keyof typeof colors

package/dist/templates/with-reference-ds/design-system/src/tokens/index.ts

@@ -0,0 +1,32 @@
+import { colors, darkOverrides } from './colors.js'
+import { typography } from './typography.js'
+import { spacing } from './spacing.js'
+import { radii } from './radii.js'
+import { layout } from './layout.js'
+
+export { colors, darkOverrides, typography, spacing, radii, layout }
+export type { ColorToken } from './colors.js'
+export type { TypographyToken } from './typography.js'
+export type { SpacingToken } from './spacing.js'
+export type { RadiusToken } from './radii.js'
+export type { LayoutToken } from './layout.js'
+
+export const allTokens = {
+  ...colors,
+  ...typography,
+  ...spacing,
+  ...radii,
+  ...layout,
+} as const
+
+export type TokenName = keyof typeof allTokens
+
+/** Returns every token in the shape the design-contract manifest expects. */
+export function getTokenList() {
+  const categorize = (name: string) => name.split('.')[0] ?? 'other'
+  return Object.entries(allTokens).map(([name, value]) => ({
+    name,
+    value,
+    category: categorize(name),
+  }))
+}

package/dist/templates/with-reference-ds/design-system/src/tokens/layout.ts

@@ -0,0 +1,26 @@
+/**
+ * Layout & container tokens: the max-widths a page constrains to, the
+ * horizontal gutter/margins, and the responsive breakpoints. These are the
+ * values the "Layout & Containers" foundation documents. Brand projects
+ * override them (e.g. Forum One uses constrain 800/1440/2200, gutter 40,
+ * breakpoints 320–1400); the reference DS ships neutral defaults.
+ */
+export const layout = {
+  /** Container max-widths the page content constrains to. */
+  'layout.container.sm': '40rem', // 640px — narrow prose
+  'layout.container.md': '64rem', // 1024px — default content width
+  'layout.container.lg': '80rem', // 1280px — wide / full-bleed sections
+
+  /** Horizontal gutter between grid columns. */
+  'layout.gutter': '1.5rem', // 24px
+  /** Page side margins (inside the viewport, outside the container). */
+  'layout.margin': '1rem', // 16px
+
+  /** Responsive breakpoints (min-width). */
+  'layout.breakpoint.sm': '40rem', // 640px
+  'layout.breakpoint.md': '48rem', // 768px
+  'layout.breakpoint.lg': '64rem', // 1024px
+  'layout.breakpoint.xl': '80rem', // 1280px
+} as const
+
+export type LayoutToken = keyof typeof layout

package/dist/templates/with-reference-ds/design-system/src/tokens/radii.ts

@@ -0,0 +1,11 @@
+export const radii = {
+  'radius.none': '0',
+  'radius.sm': '0.25rem',
+  'radius.md': '0.375rem',
+  'radius.lg': '0.5rem',
+  'radius.xl': '0.75rem',
+  'radius.2xl': '1rem',
+  'radius.full': '9999px',
+} as const
+
+export type RadiusToken = keyof typeof radii

package/dist/templates/with-reference-ds/design-system/src/tokens/spacing.ts

@@ -0,0 +1,26 @@
+export const spacing = {
+  'spacing.0': '0',
+  'spacing.px': '1px',
+  'spacing.0.5': '0.125rem',
+  'spacing.1': '0.25rem',
+  'spacing.2': '0.5rem',
+  'spacing.3': '0.75rem',
+  'spacing.4': '1rem',
+  'spacing.5': '1.25rem',
+  'spacing.6': '1.5rem',
+  'spacing.8': '2rem',
+  'spacing.10': '2.5rem',
+  'spacing.12': '3rem',
+  'spacing.16': '4rem',
+  'spacing.20': '5rem',
+  'spacing.24': '6rem',
+  'spacing.32': '8rem',
+  'spacing.40': '10rem',
+  'spacing.48': '12rem',
+  /** Semantic: default vertical padding inside a page section. */
+  'spacing.section': '5rem',
+  /** Semantic: horizontal gutter inside the page container. */
+  'spacing.container': '1.5rem',
+} as const
+
+export type SpacingToken = keyof typeof spacing

package/dist/templates/with-reference-ds/design-system/src/tokens/typography.ts

@@ -0,0 +1,32 @@
+export const typography = {
+  'font.family.sans': 'Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
+  'font.family.mono': 'ui-monospace, "SF Mono", Monaco, Consolas, monospace',
+
+  'font.size.xs': '0.75rem',
+  'font.size.sm': '0.875rem',
+  'font.size.base': '1rem',
+  'font.size.lg': '1.125rem',
+  'font.size.xl': '1.25rem',
+  'font.size.2xl': '1.5rem',
+  'font.size.3xl': '1.875rem',
+  'font.size.4xl': '2.25rem',
+  'font.size.5xl': '3rem',
+  'font.size.6xl': '3.75rem',
+
+  'font.weight.normal': '400',
+  'font.weight.medium': '500',
+  'font.weight.semibold': '600',
+  'font.weight.bold': '700',
+
+  'line.height.tight': '1.15',
+  'line.height.snug': '1.3',
+  'line.height.normal': '1.5',
+  'line.height.relaxed': '1.65',
+  'line.height.loose': '1.8',
+
+  'letter.spacing.tight': '-0.025em',
+  'letter.spacing.normal': '0',
+  'letter.spacing.wide': '0.025em',
+} as const
+
+export type TypographyToken = keyof typeof typography

package/dist/templates/with-reference-ds/design-system/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "dist",
+    "storybook-static",
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ]
+}

package/dist/templates/with-reference-ds/design-system/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
+    passWithNoTests: true,
+    css: {
+      modules: { classNameStrategy: 'non-scoped' },
+    },
+  },
+})

package/dist/templates/with-reference-ds/design-system/vitest.setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})

package/dist/templates/without-reference-ds/design-system/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/foundations/**/*.stories.@(ts|tsx)',
+    '../src/components/**/*.stories.@(ts|tsx)',
+  ],
+  addons: ['@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+
+export default config

package/dist/templates/without-reference-ds/design-system/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i },
+    },
+    a11y: {
+      config: {},
+      options: {},
+      manual: false,
+    },
+  },
+}
+
+export default preview

package/dist/templates/without-reference-ds/design-system/README.md

@@ -0,0 +1,20 @@
+# Design system
+
+An empty Storybook authoring environment for your own design system. Bring your components here.
+
+```
+src/
+  components/    One folder per component: .tsx, .module.css, .stories.tsx, .contract.ts
+  foundations/   Storybook "Foundations" pages documenting your tokens
+.storybook/      Storybook (react-vite) config
+```
+
+## Commands
+
+```bash
+pnpm --filter "./design-system" storybook         # author at http://localhost:6006
+pnpm --filter "./design-system" build-storybook   # static Storybook
+pnpm --filter "./design-system" typecheck
+```
+
+Point the Components MCP server at your manifest in `apps/web/src/payload.config.ts` (`componentsPlugin({ manifest })`) once you generate one. For a worked starting point, re-scaffold with the reference design system.

package/dist/templates/without-reference-ds/design-system/gitignore

@@ -0,0 +1,5 @@
+dist
+storybook-static
+node_modules
+*.tsbuildinfo
+.turbo

package/dist/templates/without-reference-ds/design-system/package.json.template

@@ -0,0 +1,33 @@
+{
+  "name": "{{designSystemName}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo storybook-static *.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.3.5",
+    "typescript": "^5.6.0",
+    "vite": "^8.0.9"
+  }
+}

package/dist/templates/without-reference-ds/design-system/src/foundations/Welcome.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta: Meta = {
+  title: 'Foundations/Welcome',
+}
+export default meta
+
+export const Welcome: StoryObj = {
+  render: () => (
+    <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem', maxWidth: '40rem', lineHeight: 1.6 }}>
+      <h1>Your design system</h1>
+      <p>
+        This is an empty Storybook authoring environment. Add components under{' '}
+        <code>src/components/</code> with a <code>.stories.tsx</code> story and a{' '}
+        <code>.contract.ts</code> contract, and document your tokens in{' '}
+        <code>src/foundations/</code> (Colors, Typography, Spacing, Radii, Layout &amp; Containers).
+      </p>
+      <p>
+        Tip: <code>pnpm create @forumone/throughline</code> with the reference design system gives
+        you 12 worked examples to start from.
+      </p>
+    </div>
+  ),
+}

package/dist/templates/without-reference-ds/design-system/src/index.ts

@@ -0,0 +1,9 @@
+// Your design system's public surface. Export your components from here as you
+// build them under `./components/`, then write a contract (`.contract.ts`) and
+// a Storybook story (`.stories.tsx`) for each so the Components MCP server can
+// reason about them.
+//
+// The web app's Components MCP server reads a manifest. Point it at your
+// manifest in `apps/web/src/payload.config.ts` (`componentsPlugin({ manifest })`)
+// once you generate one.
+export {}

package/dist/templates/without-reference-ds/design-system/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "storybook-static", "node_modules"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forumone/create-throughline",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Scaffolder for new Throughline projects (Payload CMS + MCP servers + Inngest workflows).",
   "type": "module",
   "bin": {
@@ -46,6 +46,7 @@
   "devDependencies": {
     "@types/node": "^20.17.0",
     "eslint": "^9.15.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.6.0",
     "vitest": "^2.1.0",
     "@forumone/throughline-eslint-config": "0.0.0",
@@ -58,6 +59,7 @@
     "build": "tsc -b && pnpm copy-templates && pnpm chmod-bin",
     "copy-templates": "node ./scripts/copy-templates.mjs",
     "chmod-bin": "node ./scripts/chmod-bin.mjs",
+    "sync-reference-ds": "tsx scripts/sync-reference-ds.ts",
     "dev": "tsc -b -w",
     "clean": "rm -rf dist .turbo *.tsbuildinfo",
     "typecheck": "tsc --noEmit",

package/dist/templates/with-reference-ds/packages/design-system/package.json.template

@@ -1,18 +0,0 @@
-{
-  "name": "{{#if packageScope}}@{{packageScope}}/design-system{{else}}{{projectName}}-design-system{{/if}}",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./manifest": "./src/manifest.ts"
-  },
-  "dependencies": {
-    "@forumone/throughline-reference-ds": "^0.1.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.6.0"
-  }
-}

package/dist/templates/with-reference-ds/packages/design-system/src/index.ts

@@ -1,6 +0,0 @@
-// Re-export the Throughline reference design system. Wrap or override
-// individual components here when you start building your own brand layer
-// (e.g. swap colors, replace Hero, add new components). When you have
-// enough custom work to stand alone, drop the reference DS dependency
-// and replace this file with your own component exports.
-export * from '@forumone/throughline-reference-ds'

package/dist/templates/with-reference-ds/packages/design-system/src/manifest.ts

@@ -1,6 +0,0 @@
-// Re-export the reference DS manifest so payload.config.ts can import
-// it from a single workspace path. Replace this with your own manifest
-// import when you stop using the reference DS.
-import manifest from '@forumone/throughline-reference-ds/manifest' with { type: 'json' }
-
-export default manifest

package/dist/templates/with-reference-ds/packages/design-system/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "lib": ["ES2022", "DOM"],
-    "jsx": "preserve"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
-}

package/dist/templates/without-reference-ds/packages/design-system/README.md

@@ -1,19 +0,0 @@
-# {{projectName}} design system
-
-This is a placeholder for your design system. The Components MCP server in `apps/web/src/payload.config.ts` is configured to read a manifest URL — replace the `https://your-design-system.example.com/manifest.json` value with your real DS's manifest endpoint.
-
-## What the manifest needs to contain
-
-A list of components, each with:
-
-- `name`, `description`, `categories`
-- `props` schema (Zod-compatible JSON description)
-- `slots` (named regions)
-- `tokens` (CSS variables / brand tokens consumed)
-- `examples` (sample inputs Claude can learn from)
-
-See `@forumone/throughline-design-contract` for the full schema.
-
-## Quickest path
-
-If you just want to start moving, `pnpm create @forumone/throughline` again and answer "yes" to the reference design system. You'll get a working setup you can study, swap components in, and slowly replace.

package/dist/templates/without-reference-ds/packages/design-system/package.json.template

@@ -1,14 +0,0 @@
-{
-  "name": "{{#if packageScope}}@{{packageScope}}/design-system{{else}}{{projectName}}-design-system{{/if}}",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts"
-  },
-  "devDependencies": {
-    "typescript": "^5.6.0"
-  }
-}

package/dist/templates/without-reference-ds/packages/design-system/src/index.ts

@@ -1,8 +0,0 @@
-// This file is a placeholder. Bring your own design system here:
-// - Vendor your component source under `./components/` and re-export from here
-// - Or publish the DS separately and replace this package with the consumer
-//
-// The Components MCP server reads a manifest URL from your payload.config.ts
-// (see `componentsPlugin({ manifest })`). Update that URL to point at your
-// design system's manifest endpoint once you have one.
-export {}