noecosystem-design 0.1.0

package/apps/storybook/stories/catalog/fab.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Fab } from '../../../../packages/ui/src/fab';
+
+const meta = {
+  title: 'Catalog/Patterns/Mobile/Floating Action Button',
+  component: Fab,
+  tags: ['autodocs'],
+  args: { label: 'New run' },
+} satisfies Meta<typeof Fab>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ position: 'relative', height: '8rem' }}>
+      <Fab className="!absolute" label="New run" onClick={() => undefined}>
+        +
+      </Fab>
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/faq-page.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FaqPage } from '../../../../packages/ui/src/faq-page';
+
+const meta = {
+  title: 'Catalog/Marketing / Pages/FAQ Page',
+  component: FaqPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FaqPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <FaqPage />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/faq-section.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FaqSection } from '../../../../packages/ui/src/faq-section';
+
+const meta = {
+  title: 'Catalog/Marketing / FAQ/FAQ Section',
+  component: FaqSection,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FaqSection>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <FaqSection />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/feature-section.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FeatureSection } from '../../../../packages/ui/src/feature-section';
+
+const meta = {
+  title: 'Catalog/Marketing / Features/Feature Section',
+  component: FeatureSection,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FeatureSection>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <FeatureSection />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/featured-icon.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ChevronIcon } from '../../../../packages/icons/src/index';
+import { FeaturedIcon } from '../../../../packages/ui/src/featured-icon';
+
+const meta = {
+  title: 'Catalog/Foundations/Featured Icon',
+  component: FeaturedIcon,
+  tags: ['autodocs'],
+  args: { icon: <ChevronIcon direction="forward" />, variant: 'brand', size: 'md' },
+} satisfies Meta<typeof FeaturedIcon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <FeaturedIcon variant="brand" size="sm" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon variant="muted" size="md" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon variant="success" size="lg" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon variant="warning" size="xl" icon={<ChevronIcon direction="forward" />} />
+    </div>
+  ),
+};
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <FeaturedIcon size="sm" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon size="md" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon size="lg" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon size="xl" icon={<ChevronIcon direction="forward" />} />
+    </div>
+  ),
+};
+export const RTL: Story = {
+  parameters: {
+    docs: { description: { story: 'LTR vs RTL — featured icon is decorative, no mirroring.' } },
+  },
+  render: () => (
+    <div className="flex gap-8" dir="rtl">
+      <FeaturedIcon variant="brand" icon={<ChevronIcon direction="forward" />} />
+      <FeaturedIcon variant="muted" icon={<ChevronIcon direction="forward" />} />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/field.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Field } from '../../../../packages/ui/src/field';
+import { Input } from '../../../../packages/ui/src/input';
+
+const meta = {
+  title: 'Catalog/Primitives/Field',
+  component: Field,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Field label="Workspace name" description="Shown to every collaborator.">
+      <Input placeholder="acme-production" />
+    </Field>
+  ),
+};
+export const Required: Story = {
+  render: () => (
+    <Field label="Approval target" required description="Must be a resolvable resource URI.">
+      <Input placeholder="workspace://leadership/daily-brief" />
+    </Field>
+  ),
+};
+export const WithError: Story = {
+  name: 'Error state',
+  render: () => (
+    <Field label="Model identifier" error="This model is not available in your plan.">
+      <Input defaultValue="gpt-5-preview" />
+    </Field>
+  ),
+};

package/apps/storybook/stories/catalog/file-uploader.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FileUploader } from '../../../../packages/ui/src/file-uploader';
+
+const meta = {
+  title: 'Catalog/Base / Pickers/File Uploader',
+  component: FileUploader,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileUploader>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <FileUploader />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/filter-bar.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FilterBar } from '../../../../packages/data-ui/src/filter-bar';
+import { Input } from '../../../../packages/ui/src/input';
+
+function FilterBarDemo() {
+  return (
+    <div style={{ maxWidth: '36rem' }}>
+      <FilterBar
+        label="Run filters"
+        search={<Input aria-label="Search runs" placeholder="Search runs…" />}
+        action={
+          <button
+            className="rounded-md border border-border px-3 py-1.5 text-sm leading-normal hover:bg-surface-sunken/60"
+            type="button"
+          >
+            Reset
+          </button>
+        }
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Data/Filter Bar',
+  component: FilterBarDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FilterBarDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/footer.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Footer } from '../../../../packages/ui/src/footer';
+
+const meta = {
+  title: 'Catalog/Marketing / Footer/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Footer />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/forgot-password-page.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ForgotPasswordPage } from '../../../../packages/ui/src/forgot-password-page';
+
+const meta = {
+  title: 'Catalog/Shared / Auth/Forgot Password Page',
+  component: ForgotPasswordPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ForgotPasswordPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ForgotPasswordPage />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/gradient-picker.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { GradientPicker } from '../../../../packages/ui/src/gradient-picker';
+
+const meta = {
+  title: 'Catalog/Application/Gradient Picker',
+  component: GradientPicker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof GradientPicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <GradientPicker />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/header-navigation.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NoeMark } from '../../../../packages/icons/src';
+import { Button } from '../../../../packages/ui/src/button';
+import { HeaderNavigation } from '../../../../packages/ui/src/header-navigation';
+
+const links = [
+  { href: '#system', label: 'System', current: true },
+  { href: '#runs', label: 'Runs' },
+  { href: '#tools', label: 'Tools' },
+] as const;
+
+function HeaderNavigationDemo() {
+  return (
+    <HeaderNavigation
+      actions={
+        <>
+          <Button size="sm" variant="outline">
+            Docs
+          </Button>
+          <Button size="sm" variant="primary">
+            Ask NOa
+          </Button>
+        </>
+      }
+      brand={
+        <span className="flex items-center gap-2">
+          <NoeMark className="size-6" />
+          <span className="font-heading text-sm font-semibold">NOEcosystem</span>
+        </span>
+      }
+      label="Primary"
+      links={links}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Application/Header Navigation',
+  component: HeaderNavigationDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof HeaderNavigationDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/hero-header.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../../../../packages/ui/src/button';
+import { HeroHeader } from '../../../../packages/ui/src/hero-header';
+
+export function HeroHeaderDemo() {
+  return (
+    <HeroHeader
+      eyebrow="NOE"
+      title="Shared foundations"
+      description="Connected experiences."
+      actions={
+        <>
+          <Button>Primary</Button>
+          <Button variant="outline">Secondary</Button>
+        </>
+      }
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Marketing/Hero Header',
+  component: HeroHeaderDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof HeroHeaderDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <HeroHeaderDemo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/icon-system.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  ChevronIcon,
+  iconDirectionPolicy,
+  icons8Source,
+  NoeMark,
+} from '../../../../packages/icons/src/index';
+
+function IconGallery() {
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem', maxWidth: '32rem', fontSize: '0.875rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1.25rem' }}>
+        <div style={{ display: 'grid', gap: '0.35rem', justifyItems: 'center' }}>
+          <NoeMark style={{ width: 32, height: 32 }} />
+          <span>Brand</span>
+        </div>
+        <div style={{ display: 'grid', gap: '0.35rem', justifyItems: 'center' }}>
+          <ChevronIcon direction="forward" style={{ width: 20, height: 20 }} />
+          <span>Forward</span>
+        </div>
+        <div style={{ display: 'grid', gap: '0.35rem', justifyItems: 'center' }}>
+          <ChevronIcon direction="backward" style={{ width: 20, height: 20 }} />
+          <span>Backward</span>
+        </div>
+      </div>
+      <div>
+        <strong>Mirror in RTL:</strong> {iconDirectionPolicy.mirror.join(', ')}
+      </div>
+      <div>
+        <strong>Never mirror:</strong> {iconDirectionPolicy.neverMirror.join(', ')}
+      </div>
+      <div>
+        <strong>Interface source:</strong> {icons8Source.provider} / {icons8Source.asset}
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Foundations/Icon System',
+  component: IconGallery,
+  tags: ['autodocs'],
+} satisfies Meta<typeof IconGallery>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/illustration.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Illustration } from '../../../../packages/ui/src/illustration';
+
+const meta = {
+  title: 'Catalog/Base / Media/Illustration',
+  component: Illustration,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Illustration>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Illustration />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/image-picker.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ImagePicker } from '../../../../packages/ui/src/image-picker';
+
+const meta = {
+  title: 'Catalog/Application/Image Picker',
+  component: ImagePicker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ImagePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ImagePicker />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/informational-page-01.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InformationalPage01 } from '../../../../packages/ui/src/informational-page-01';
+
+const meta = {
+  title: 'Catalog/Application Examples/Informational Page 01',
+  component: InformationalPage01,
+  tags: ['autodocs'],
+} satisfies Meta<typeof InformationalPage01>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <InformationalPage01 />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/informational-page-02.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InformationalPage02 } from '../../../../packages/ui/src/informational-page-02';
+
+const meta = {
+  title: 'Catalog/Application Examples/Informational Page 02',
+  component: InformationalPage02,
+  tags: ['autodocs'],
+} satisfies Meta<typeof InformationalPage02>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <InformationalPage02 />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/inline-cta.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InlineCta } from '../../../../packages/ui/src/inline-cta';
+
+const meta = {
+  title: 'Catalog/Application/Inline CTA',
+  component: InlineCta,
+  tags: ['autodocs'],
+} satisfies Meta<typeof InlineCta>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <InlineCta />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/input.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from '../../../../packages/ui/src/input';
+
+const meta = {
+  title: 'Catalog/Primitives/Input',
+  component: Input,
+  tags: ['autodocs'],
+  args: { placeholder: 'Search runs, tools, artifacts…' },
+} satisfies Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Small: Story = { args: { size: 'sm' } };
+export const Large: Story = { args: { size: 'lg' } };
+export const Disabled: Story = { args: { disabled: true, defaultValue: 'read-only value' } };
+export const TechnicalDirection: Story = {
+  name: 'Technical direction (email stays LTR)',
+  args: { type: 'email', defaultValue: 'ali@noecosystem.com' },
+};

package/apps/storybook/stories/catalog/landing-page.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LandingPage } from '../../../../packages/ui/src/landing-page';
+
+export function LandingPageDemo() {
+  return (
+    <div style={{ height: '30rem' }}>
+      <LandingPage />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Pages/Landing Page',
+  component: LandingPageDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LandingPageDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <LandingPageDemo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/legal-page.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LegalPage } from '../../../../packages/ui/src/legal-page';
+
+const meta = {
+  title: 'Catalog/Marketing / Pages/Legal Page',
+  component: LegalPage,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LegalPage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <LegalPage />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/login-page.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LoginPage } from '../../../../packages/ui/src/login-page';
+import { SignInForm } from '../../../../packages/ui/src/sign-in-form';
+
+export function LoginPageDemo() {
+  return (
+    <LoginPage
+      title="Sign in to NOE"
+      description="Enter your credentials."
+      form={
+        <SignInForm
+          labels={{
+            heading: 'Sign in',
+            emailLabel: 'Email',
+            passwordLabel: 'Password',
+            submitLabel: 'Continue',
+          }}
+        />
+      }
+      footer={<span>Protected by SSO.</span>}
+      brand={<span className="font-heading font-semibold">NOEcosystem</span>}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Pages/Login Page',
+  component: LoginPageDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoginPageDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <LoginPageDemo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/marketing-404-page.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Marketing404Page } from '../../../../packages/ui/src/marketing-404-page';
+
+const meta = {
+  title: 'Catalog/Marketing / Pages/Marketing 404 Page',
+  component: Marketing404Page,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Marketing404Page>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Marketing404Page />
+    </div>
+  ),
+};