rechta-ds 0.0.0

package/packages/ui/src/stories/atoms/Button.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../components/atoms/Button';
+import { Plus, ArrowRight, Loader2, Trash2, ExternalLink } from 'lucide-react';
+
+const meta: Meta<typeof Button> = {
+  title: 'Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default','emerald','blue','porcelain','secondary','ghost','outline','destructive','link'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs','sm','md','lg','xl','icon','icon-sm','icon-lg'],
+    },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: { children: 'Get started' },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3 items-center">
+      <Button variant="default">Brand</Button>
+      <Button variant="emerald">Emerald</Button>
+      <Button variant="blue">Blue</Button>
+      <Button variant="porcelain">Porcelain</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3 items-center">
+      <Button size="xs">Extra small</Button>
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xl">Extra large</Button>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3 items-center">
+      <Button leftIcon={<Plus />}>Create link</Button>
+      <Button rightIcon={<ArrowRight />}>Learn more</Button>
+      <Button variant="secondary" leftIcon={<ExternalLink />}>Open</Button>
+      <Button size="icon"><Plus /></Button>
+      <Button size="icon-sm" variant="ghost"><Plus /></Button>
+      <Button size="icon-lg" variant="outline"><Plus /></Button>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3 items-center">
+      <Button loading>Saving…</Button>
+      <Button loading variant="secondary" loadingText="Processing…">Submit</Button>
+      <Button loading variant="outline">Loading</Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3 items-center">
+      <Button disabled>Disabled</Button>
+      <Button disabled variant="secondary">Disabled</Button>
+      <Button disabled variant="ghost">Disabled</Button>
+    </div>
+  ),
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Delete workspace',
+    leftIcon: <Trash2 />,
+  },
+};

package/packages/ui/src/stories/atoms/Input.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input, Textarea } from '../../components/atoms/Input';
+import { Search, Mail, Eye, Lock } from 'lucide-react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Atoms/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size:  { control: 'select', options: ['sm','md','lg'] },
+    state: { control: 'select', options: ['default','error','success','warning'] },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: { placeholder: 'https://example.com/long-path' },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 w-72">
+      <Input size="sm" placeholder="Small input" />
+      <Input size="md" placeholder="Medium input" />
+      <Input size="lg" placeholder="Large input" />
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 w-72">
+      <Input leftElement={<Search />} placeholder="Search links…" />
+      <Input leftElement={<Mail />} placeholder="email@company.com" type="email" />
+      <Input leftElement={<Lock />} rightElement={<Eye />} placeholder="Password" type="password" />
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 w-72">
+      <Input state="default" placeholder="Default state" />
+      <Input state="success" placeholder="success@rechta.com" />
+      <Input state="warning" placeholder="Warning state" />
+      <Input state="error"   placeholder="Error state" />
+      <Input disabled placeholder="Disabled input" />
+      <Input readOnly defaultValue="Read only value" />
+    </div>
+  ),
+};
+
+export const TextareaStory: Story = {
+  name: 'Textarea',
+  render: () => (
+    <div className="flex flex-col gap-3 w-80">
+      <Textarea placeholder="Write something…" />
+      <Textarea state="error" placeholder="Invalid content" />
+      <Textarea resize="none" placeholder="No resize" />
+    </div>
+  ),
+};

package/packages/ui/src/stories/atoms/Toggle.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from '../../components/atoms/Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: { label: 'Enable notifications' },
+};
+
+export const Controlled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Toggle label="Link cloaking" defaultChecked />
+      <Toggle label="Password protection" />
+      <Toggle label="Link expiration" defaultChecked />
+      <Toggle label="A/B testing" />
+    </div>
+  ),
+};
+
+export const WithoutLabel: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <Toggle />
+      <Toggle defaultChecked />
+    </div>
+  ),
+};

package/packages/ui/src/stories/molecules/Accordion.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '../../components/molecules/Accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Molecules/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const faqItems = [
+  {
+    trigger: 'Which Rechta plan is right for me?',
+    content: 'If you\'re just getting started, the free plan gives you 1K events/mo. For small teams, Pro at $25/mo is perfect. Business at $75/mo includes conversion tracking and partner management.',
+  },
+  {
+    trigger: 'Do you offer a free trial?',
+    content: 'Yes — the free plan is forever-free. All paid plans include a 14-day free trial, no credit card required.',
+  },
+  {
+    trigger: 'Can I cancel my subscription at any time?',
+    content: 'Absolutely. Cancel anytime from your workspace settings. You\'ll retain access until the end of your billing period.',
+  },
+  {
+    trigger: 'What are your data privacy & security policies?',
+    content: 'We are SOC 2 Type II certified. All data is encrypted at rest and in transit. We never sell your data to third parties.',
+  },
+];
+
+export const FAQ: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <Accordion items={faqItems} />
+    </div>
+  ),
+};
+
+export const SingleOpen: Story = {
+  render: () => (
+    <div className="w-[520px]">
+      <Accordion items={faqItems.slice(0, 2)} type="single" />
+    </div>
+  ),
+};

package/packages/ui/src/stories/molecules/Card.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../components/molecules/Card';
+import { Button } from '../../components/atoms/Button';
+import { Badge } from '../../components/atoms/Badge';
+
+const meta: Meta<typeof Card> = {
+  title: 'Molecules/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default','raised','sunken','glass','brand','outline','ghost'],
+    },
+    padding: {
+      control: 'select',
+      options: ['none','sm','md','lg','xl'],
+    },
+    hover: { control: 'boolean' },
+    glow: { control: 'select', options: ['none','brand','accent'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Short Links</CardTitle>
+        <CardDescription>Create and manage branded short links at scale.</CardDescription>
+      </CardHeader>
+      <CardContent className="mt-4">
+        <p className="text-sm text-[--c-text-3]">Manage your links with advanced features, folders, and RBAC.</p>
+      </CardContent>
+      <CardFooter>
+        <Button size="sm">Explore links</Button>
+        <Button size="sm" variant="ghost">Learn more</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      {(['default','raised','sunken','glass','brand','outline'] as const).map((v) => (
+        <Card key={v} variant={v} className="w-56 h-28 flex items-center justify-center">
+          <span className="text-sm text-[--c-text-2] font-mono">{v}</span>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+export const WithGlow: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Card variant="default" glow="brand" className="w-56 h-28 flex items-center justify-center">
+        <Badge variant="brand" dot>Brand glow</Badge>
+      </Card>
+      <Card variant="default" glow="accent" className="w-56 h-28 flex items-center justify-center">
+        <Badge variant="blue" dot>Accent glow</Badge>
+      </Card>
+    </div>
+  ),
+};
+
+export const Hoverable: Story = {
+  render: () => (
+    <Card hover className="w-72 cursor-pointer">
+      <CardHeader>
+        <CardTitle>acme.link/homepage</CardTitle>
+        <CardDescription>acme.com/homepage</CardDescription>
+      </CardHeader>
+      <CardContent className="mt-3 flex items-center justify-between">
+        <span className="text-xs text-[--c-text-3]">15.6K clicks</span>
+        <Badge variant="success" dot>Verified</Badge>
+      </CardContent>
+    </Card>
+  ),
+};

package/packages/ui/src/stories/molecules/PricingCard.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PricingCard } from '../../components/molecules/PricingCard';
+
+const meta: Meta<typeof PricingCard> = {
+  title: 'Molecules/PricingCard',
+  component: PricingCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof PricingCard>;
+
+export const Default: Story = {
+  args: {
+    name: 'Business',
+    price: '$75',
+    period: '/mo',
+    description: 'For fast-growing startups',
+    features: [
+      '250K tracked events/mo',
+      '10K new links/mo',
+      '3-year analytics retention',
+      'Conversion tracking',
+      'A/B testing',
+      'Customer insights',
+    ],
+    popular: true,
+    cta: 'Get started',
+  },
+};
+
+export const PricingRow: Story = {
+  render: () => (
+    <div className="flex gap-4 items-start">
+      <PricingCard
+        name="Pro"
+        price="$25"
+        period="/mo"
+        description="For small teams"
+        features={['50K events/mo','1K links/mo','1-year retention','Free .link domain']}
+        cta="Get started"
+      />
+      <PricingCard
+        name="Business"
+        price="$75"
+        period="/mo"
+        description="For fast-growing startups"
+        features={['250K events/mo','10K links/mo','3-year retention','Conversion tracking']}
+        popular
+        cta="Get started"
+      />
+      <PricingCard
+        name="Enterprise"
+        price="Custom"
+        description="Tailored for large orgs"
+        features={['Unlimited events','SSO/SAML','Audit logs','Custom SLA']}
+        cta="Get a demo"
+      />
+    </div>
+  ),
+};

package/packages/ui/src/stories/molecules/TestimonialCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TestimonialCard } from '../../components/molecules/TestimonialCard';
+
+const meta: Meta<typeof TestimonialCard> = {
+  title: 'Molecules/TestimonialCard',
+  component: TestimonialCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof TestimonialCard>;
+
+export const Default: Story = {
+  args: {
+    quote: 'What you all have built is fantastic. The best link attribution platform I\'ve used — by a wide margin.',
+    name: 'Ian Mackey',
+    role: 'Vice President, Scicomm Media',
+    avatarFallback: 'IM',
+  },
+};
+
+export const Grid: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[700px]">
+      <TestimonialCard
+        quote="Dub is simply the best way to track links. Clean, fast, and just works."
+        name="Jorn van Dijk"
+        role="CEO, Framer"
+        avatarFallback="JD"
+      />
+      <TestimonialCard
+        quote="Stripe for payments, Vercel for deployments, Rechta for links."
+        name="Guillermo Rauch"
+        role="CEO, Vercel"
+        avatarFallback="GR"
+      />
+      <TestimonialCard
+        quote="Our links get tens of millions of clicks monthly — Rechta handles it flawlessly."
+        name="Johnny Ho"
+        role="Co-founder, Perplexity"
+        avatarFallback="JH"
+      />
+      <TestimonialCard
+        quote="A breath of fresh air in link management — everything we needed, no bloat."
+        name="Nick Parsons"
+        role="Director of Marketing, Clerk"
+        avatarFallback="NP"
+      />
+    </div>
+  ),
+};

package/packages/ui/src/stories/molecules/Tooltip.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../components/molecules/Tooltip';
+import { Button } from '../../components/atoms/Button';
+import { Badge } from '../../components/atoms/Badge';
+import { Copy, ExternalLink } from 'lucide-react';
+
+const meta: Meta = {
+  title: 'Molecules/Tooltip',
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  decorators: [(Story) => <TooltipProvider><Story /></TooltipProvider>],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="secondary">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>Copy short link</TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" variant="ghost"><Copy /></Button>
+        </TooltipTrigger>
+        <TooltipContent>Copy to clipboard</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" variant="ghost"><ExternalLink /></Button>
+        </TooltipTrigger>
+        <TooltipContent>Open in new tab</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Badge variant="default">12.5K clicks</Badge>
+        </TooltipTrigger>
+        <TooltipContent>View analytics →</TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const Sides: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 p-16">
+      {(['top','right','bottom','left'] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger asChild>
+            <Button variant="outline" size="sm">{side}</Button>
+          </TooltipTrigger>
+          <TooltipContent side={side}>Tooltip on {side}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};

package/packages/ui/src/stories/organisms/LogoMarquee.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogoMarquee } from '../../components/organisms/LogoMarquee';
+
+const meta: Meta<typeof LogoMarquee> = {
+  title: 'Organisms/LogoMarquee',
+  component: LogoMarquee,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof LogoMarquee>;
+
+const logos = [
+  { name: 'Framer',     src: 'https://assets.dub.co/companies/framer.svg' },
+  { name: 'Perplexity', src: 'https://assets.dub.co/companies/perplexity.svg' },
+  { name: 'Vercel',     src: 'https://assets.dub.co/companies/vercel.svg' },
+  { name: 'Twilio',     src: 'https://assets.dub.co/companies/twilio.svg' },
+  { name: 'Superhuman', src: 'https://assets.dub.co/companies/superhuman.svg' },
+  { name: 'Buffer',     src: 'https://assets.dub.co/companies/buffer.svg' },
+  { name: 'Clerk',      src: 'https://assets.dub.co/companies/clerk.svg' },
+];
+
+export const Default: Story = {
+  args: { logos },
+};
+
+export const WithTitle: Story = {
+  args: {
+    logos,
+    title: 'Trusted by 100,000+ customers',
+  },
+};

package/packages/ui/src/stories/organisms/Navbar.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Navbar } from '../../components/organisms/Navbar';
+
+const meta: Meta<typeof Navbar> = {
+  title: 'Organisms/Navbar',
+  component: Navbar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Navbar>;
+
+export const Default: Story = {
+  args: {
+    logo: 'rechta',
+    links: [
+      { label: 'Links', href: '#' },
+      { label: 'Analytics', href: '#' },
+      { label: 'Partners', href: '#' },
+      { label: 'Enterprise', href: '#' },
+      { label: 'Pricing', href: '#' },
+    ],
+    cta: { label: 'Get started', href: '#' },
+  },
+};
+
+export const WithAnnouncement: Story = {
+  args: {
+    ...Default.args,
+    announcement: {
+      label: 'New',
+      text: 'Staggered reward durations are now live',
+      href: '#',
+    },
+  },
+};