docs: component-folder convention and onboarding stories

Add the folder + barrel convention (frontend/CLAUDE.md rule 8) and
Storybook stories for the onboarding components.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/CLAUDE.md

@@ -19,6 +19,7 @@
 5. **Linting**: ALWAYS run `npx eslint --fix <file>` on any files you modify
 6. **Type Enums**: Extract inline union types to named types (e.g., `type Status = 'A' | 'B'` instead of inline)
 7. **NO FETCH**: NEVER use `fetch()` directly - ALWAYS use RTK Query mutations/queries (inject endpoints into services in `common/services/`), see api-integration context
+8. **Component structure**: Each new component lives in its own folder with an `index.ts` barrel — `ComponentName/ComponentName.tsx`, co-located `ComponentName.scss`, any sub-components, and an `index.ts` that re-exports the default (and public types). Import via the folder (`components/.../ComponentName`), never the inner file. Keep files focused (~100 lines as a target); split by concern, not to hit a number. Data tables/constant maps are exempt.
 
 ## Key Files
 - Store: `common/store.ts`

frontend/documentation/pages/onboarding/CodeCard.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import CodeCard from 'components/pages/onboarding/OnboardingConnectPanel/CodeCard'
+// CodeCard's structural styles (radius, header, lang label) live in the connect
+// panel's stylesheet; import it so the card renders fully styled in isolation.
+import 'components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss'
+
+const meta: Meta<typeof CodeCard> = {
+  args: {
+    code: 'npm install flagsmith',
+    headerLeft: (
+      <span className='onboarding-connect__codecard-lang'>Shell</span>
+    ),
+    hljsClass: 'bash',
+  },
+  component: CodeCard,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A copyable, syntax-highlighted code block with a header strip. Owns its own "Copied" feedback (announced via aria-live) and is theme-adaptive via semantic tokens — a light editor in light mode, dark in dark mode.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/CodeCard',
+}
+export default meta
+
+type Story = StoryObj<typeof CodeCard>
+
+export const Install: Story = {}
+
+export const Wire: Story = {
+  args: {
+    code: "import flagsmith from 'flagsmith'\nflagsmith.init({ environmentID: 'ser.abc123EXAMPLEkey' })\nconst showDemo = flagsmith.hasFeature('show_demo_button')",
+    headerLeft: (
+      <span className='onboarding-connect__codecard-lang'>JavaScript</span>
+    ),
+    hljsClass: 'javascript',
+  },
+}

frontend/documentation/pages/onboarding/EditableChip.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import EditableChip from 'components/pages/onboarding/EditableChip'
+
+const meta: Meta<typeof EditableChip> = {
+  component: EditableChip,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An onboarding-local rename chip: the shared Chip shell + a GhostInput + a pencil. Commits on blur / Enter; an empty value reverts to the last good name; an optional `transform` normalises on commit (e.g. flag-name rules). Used in the onboarding header sentence. Feature-local — not a shared inline-edit primitive.',
+      },
+    },
+    layout: 'centered',
+  },
+  title: 'Pages/Onboarding/EditableChip',
+}
+export default meta
+
+type Story = StoryObj<typeof EditableChip>
+
+// EditableChip is controlled; wrap it so the stories commit and re-render.
+const Controlled = ({
+  initial,
+  label,
+  transform,
+}: {
+  initial: string
+  label: string
+  transform?: (raw: string) => string
+}) => {
+  const [value, setValue] = useState(initial)
+  return (
+    <EditableChip
+      label={label}
+      value={value}
+      onCommit={setValue}
+      transform={transform}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <Controlled label='Organisation' initial='Acme Inc' />,
+}
+
+export const Empty: Story = {
+  render: () => <Controlled label='Project' initial='' />,
+}
+
+// Normalises on commit (spaces → underscores, lower-cased) like the flag chip.
+export const WithTransform: Story = {
+  render: () => (
+    <Controlled
+      label='Flag'
+      initial='show_demo_button'
+      transform={(raw) => raw.replace(/ /g, '_').toLowerCase()}
+    />
+  ),
+}

frontend/documentation/pages/onboarding/OnboardingConnectPanel.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingConnectPanel from 'components/pages/onboarding/OnboardingConnectPanel'
+
+const meta: Meta<typeof OnboardingConnectPanel> = {
+  args: {
+    environmentKey: 'ser.abc123EXAMPLEkey',
+    featureName: 'show_demo_button',
+  },
+  component: OnboardingConnectPanel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Two ways to connect an app to the pre-created flag: a "Connect with AI" tab (an agent-agnostic, zero-auth prompt carrying the real env key + flag) and a "Connect your code" tab (an SDK selector built on Chip, with install + wire snippets per language). Nothing is faked — the prompt and snippets carry the user\'s real env key + flag.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingConnectPanel',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingConnectPanel>
+
+export const Default: Story = {}
+
+export const CustomFlagName: Story = {
+  args: { featureName: 'enable_new_checkout' },
+}

frontend/documentation/pages/onboarding/OnboardingHeader.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingHeader from 'components/pages/onboarding/OnboardingHeader'
+
+const meta: Meta<typeof OnboardingHeader> = {
+  args: {
+    caseSensitive: true,
+    featureName: 'show_demo_button',
+    organisationName: 'Acme Inc',
+    projectName: 'Web App',
+  },
+  component: OnboardingHeader,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The top of the single-page onboarding flow: a welcome title and a sentence naming the resources we pre-created, with organisation / project / flag inline-editable in place via the shared GhostInput. Presentational — the rename handlers are owned by the page that assembles the flow.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingHeader',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingHeader>
+
+export const Default: Story = {}
+
+export const LongNames: Story = {
+  args: {
+    featureName: 'enable_the_brand_new_checkout_experience_v2',
+    organisationName: 'A Very Long Organisation Name That Wraps',
+    projectName: 'Customer-Facing Marketing Website Project',
+  },
+}
+
+export const ShortNames: Story = {
+  args: {
+    featureName: 'beta',
+    organisationName: 'Co',
+    projectName: 'App',
+  },
+}

frontend/documentation/pages/onboarding/OnboardingTabs.stories.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingTabs, {
+  OnboardingTab,
+} from 'components/pages/onboarding/OnboardingTabs'
+
+const meta: Meta<typeof OnboardingTabs> = {
+  component: OnboardingTabs,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One-off onboarding tablist following the WAI-ARIA tabs pattern: roving tabindex, Arrow/Home/End keys, aria-selected. A tab can be pushed to the trailing edge with `alignEnd` — the reason this isn't the shared navigation Tabs. Local to onboarding; pair with OnboardingTabPanel for the content side.",
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingTabs',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingTabs>
+
+const Controlled = ({ tabs }: { tabs: OnboardingTab[] }) => {
+  const [active, setActive] = useState(tabs[0].id)
+  return (
+    <OnboardingTabs
+      aria-label='Connect your app'
+      tabs={tabs}
+      activeId={active}
+      onChange={setActive}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => (
+    <Controlled
+      tabs={[
+        { id: 'manual', label: 'Connect your code' },
+        { alignEnd: true, id: 'ai', label: 'Connect with AI' },
+      ]}
+    />
+  ),
+}
+
+export const ThreeTabs: Story = {
+  render: () => (
+    <Controlled
+      tabs={[
+        { id: 'one', label: 'First' },
+        { id: 'two', label: 'Second' },
+        { alignEnd: true, id: 'three', label: 'Third' },
+      ]}
+    />
+  ),
+}

frontend/documentation/pages/onboarding/SdkPicker.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import SdkPicker from 'components/pages/onboarding/OnboardingConnectPanel/SdkPicker'
+import {
+  SDK_LANGS,
+  SdkLang,
+} from 'components/pages/onboarding/OnboardingConnectPanel/sdkLangs'
+
+const meta: Meta<typeof SdkPicker> = {
+  component: SdkPicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The SDK / framework picker: popular SDKs as quick-pick Chips, the long tail behind "More". Controlled — the selected SDK lives in the parent.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/SdkPicker',
+}
+export default meta
+
+type Story = StoryObj<typeof SdkPicker>
+
+const Controlled = () => {
+  const [selected, setSelected] = useState<SdkLang>(SDK_LANGS[0])
+  return <SdkPicker selected={selected} onSelect={setSelected} />
+}
+
+export const Default: Story = {
+  render: () => <Controlled />,
+}