tharaday 0.1.1

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
+
+export interface AppLayoutProps {
+  /**
+   * Header logo element
+   */
+  headerLogo?: ReactNode;
+  /**
+   * Header title
+   */
+  headerTitle?: string;
+  /**
+   * Current user object for the Header
+   */
+  user?: { name: string };
+  /**
+   * NavBar navigation items
+   */
+  navItems: NavBarItem[];
+  /**
+   * Active NavBar item ID
+   */
+  activeNavId?: string;
+  /**
+   * NavBar actions (right side)
+   */
+  navActions?: ReactNode;
+  /**
+   * Content to display in the main area
+   */
+  children: ReactNode;
+  /**
+   * Callback for header login
+   */
+  onLogin?: () => void;
+  /**
+   * Callback for header logout
+   */
+  onLogout?: () => void;
+  /**
+   * Callback for header create account
+   */
+  onCreateAccount?: () => void;
+  /**
+   * Callback for nav item click
+   */
+  onNavItemClick?: (id: string) => void;
+}

package/src/layouts/AuthLayout/AuthLayout.module.css

@@ -0,0 +1,49 @@
+.root {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ds-surface-1);
+  font-family: var(--ds-font-family-base);
+  padding: var(--ds-space-4);
+}
+
+.card {
+  width: 100%;
+  max-width: 25rem;
+  background-color: var(--ds-surface-0);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-md);
+  padding: var(--ds-space-8);
+  border: 1px solid var(--ds-border-1);
+}
+
+.header {
+  text-align: center;
+  margin-bottom: var(--ds-space-8);
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--ds-space-4);
+}
+
+.title {
+  font-size: var(--ds-font-size-2xl);
+  font-weight: var(--ds-font-weight-bold);
+  color: var(--ds-text-1);
+  margin: 0;
+}
+
+.description {
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-2);
+  margin-top: var(--ds-space-2);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+}

package/src/layouts/AuthLayout/AuthLayout.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AuthLayout } from './AuthLayout.tsx';
+import { Box } from '../../components/Box/Box.tsx';
+import { Button } from '../../components/Button/Button.tsx';
+import { Input } from '../../components/Input/Input.tsx';
+import { Text } from '../../components/Text/Text.tsx';
+
+const meta = {
+  title: 'Layouts/Auth',
+  component: AuthLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof AuthLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+  <svg width="48" height="48" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#3b82f6"
+      />
+      <path d="M16 8l8 12H8l8-12z" fill="#FFF" />
+    </g>
+  </svg>
+);
+
+export const Login: Story = {
+  args: {
+    logo,
+    title: 'Welcome Back',
+    description: 'Please enter your details to sign in to your account.',
+    children: (
+      <Box
+        as="form"
+        display="flex"
+        flexDirection="column"
+        gap={6}
+        onSubmit={(e) => e.preventDefault()}
+      >
+        <Input label="Email Address" type="email" placeholder="name@company.com" required />
+        <Box display="flex" flexDirection="column" gap={2}>
+          <Input label="Password" type="password" placeholder="••••••••" required />
+          <Box display="flex" justifyContent="flex-end">
+            <Button variant="subtle" size="sm" className="p-0">
+              Forgot password?
+            </Button>
+          </Box>
+        </Box>
+        <Button variant="solid" intent="info" type="submit" className="w-full">
+          Sign In
+        </Button>
+        <Box textAlign="center">
+          <Text variant="body-sm" color="subtle">
+            Don't have an account?{' '}
+            <Button variant="subtle" size="sm" className="p-0">
+              Sign up
+            </Button>
+          </Text>
+        </Box>
+      </Box>
+    ),
+  },
+};
+
+export const SignUp: Story = {
+  args: {
+    logo,
+    title: 'Create an Account',
+    description: 'Join thousands of designers building better products.',
+    children: (
+      <Box
+        as="form"
+        display="flex"
+        flexDirection="column"
+        gap={6}
+        onSubmit={(e) => e.preventDefault()}
+      >
+        <Box display="grid" gridTemplateColumns="1fr 1fr" gap={4}>
+          <Input label="First Name" placeholder="Jane" required />
+          <Input label="Last Name" placeholder="Doe" required />
+        </Box>
+        <Input label="Email Address" type="email" placeholder="name@company.com" required />
+        <Input
+          label="Password"
+          type="password"
+          placeholder="Create a password"
+          required
+          helperText="Must be at least 8 characters."
+        />
+        <Button variant="solid" intent="info" type="submit" className="w-full">
+          Get Started
+        </Button>
+        <Box textAlign="center">
+          <Text variant="body-sm" color="subtle">
+            Already have an account?{' '}
+            <Button variant="subtle" size="sm" className="p-0">
+              Log in
+            </Button>
+          </Text>
+        </Box>
+      </Box>
+    ),
+  },
+};

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,27 @@
+import styles from './AuthLayout.module.css';
+import type { AuthLayoutProps } from './AuthLayout.types.tsx';
+import { Box } from '../../components/Box/Box.tsx';
+import { Text } from '../../components/Text/Text.tsx';
+
+export const AuthLayout = ({ logo, title, description, children }: AuthLayoutProps) => {
+  return (
+    <Box className={styles.root}>
+      <Box className={styles.card}>
+        <Box className={styles.header}>
+          {logo && <Box className={styles.logo}>{logo}</Box>}
+          {title && (
+            <Text variant="h3" as="h1" className={styles.title}>
+              {title}
+            </Text>
+          )}
+          {description && (
+            <Text variant="body-sm" color="subtle" className={styles.description}>
+              {description}
+            </Text>
+          )}
+        </Box>
+        <Box className={styles.content}>{children}</Box>
+      </Box>
+    </Box>
+  );
+};

package/src/layouts/AuthLayout/AuthLayout.types.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+export interface AuthLayoutProps {
+  logo?: ReactNode;
+  title?: string;
+  description?: string;
+  children: ReactNode;
+}

package/src/layouts/DashboardLayout/DashboardLayout.module.css

@@ -0,0 +1,37 @@
+.root {
+  min-height: 100vh;
+  background-color: var(--ds-surface-1);
+  font-family: var(--ds-font-family-base);
+}
+
+.main {
+  padding: var(--ds-space-6) 0;
+}
+
+.container {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-6);
+}
+
+.topBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ds-space-4);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: var(--ds-space-4);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+}

package/src/layouts/DashboardLayout/DashboardLayout.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { DashboardLayout } from './DashboardLayout.tsx';
+import { Badge } from '../../components/Badge/Badge.tsx';
+import type { BadgeIntent } from '../../components/Badge/Badge.types.ts';
+import { Box } from '../../components/Box/Box.tsx';
+import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
+import { Button } from '../../components/Button/Button.tsx';
+import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Text } from '../../components/Text/Text.tsx';
+
+const meta = {
+  title: 'Layouts/Dashboard',
+  component: DashboardLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headerTitle: 'DS Creator',
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof DashboardLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#3b82f6"
+      />
+      <path d="M16 8l8 12H8l8-12z" fill="#FFF" />
+    </g>
+  </svg>
+);
+
+export const Overview: Story = {
+  args: {
+    headerLogo: logo,
+    user: { name: 'Design Creator' },
+    breadcrumbs: (
+      <Breadcrumbs>
+        <BreadcrumbItem href="#">Home</BreadcrumbItem>
+        <BreadcrumbItem isCurrent>Dashboard</BreadcrumbItem>
+      </Breadcrumbs>
+    ),
+    actions: (
+      <Box display="flex" gap={2}>
+        <Button size="sm" variant="outline">
+          Export
+        </Button>
+        <Button size="sm" variant="solid" intent="info">
+          New Component
+        </Button>
+      </Box>
+    ),
+    stats: (
+      <Box display="grid" gridTemplateColumns="repeat(4, 1fr)" gap={4}>
+        <Card padding="md">
+          <CardHeader title="Total Components" />
+          <CardContent>
+            <Text variant="h3">12</Text>
+            <Badge intent="success" size="sm">
+              +2 this week
+            </Badge>
+          </CardContent>
+        </Card>
+        <Card padding="md">
+          <CardHeader title="Active Tokens" />
+          <CardContent>
+            <Text variant="h3">156</Text>
+            <Badge intent="neutral" size="sm">
+              Stable
+            </Badge>
+          </CardContent>
+        </Card>
+        <Card padding="md">
+          <CardHeader title="System Health" />
+          <CardContent>
+            <Text variant="h3">98%</Text>
+            <Badge intent="info" size="sm">
+              Optimal
+            </Badge>
+          </CardContent>
+        </Card>
+        <Card padding="md">
+          <CardHeader title="Open Issues" />
+          <CardContent>
+            <Text variant="h3">3</Text>
+            <Badge intent="danger" size="sm">
+              Requires action
+            </Badge>
+          </CardContent>
+        </Card>
+      </Box>
+    ),
+    children: (
+      <Card bordered>
+        <CardHeader
+          title="Recent Activity"
+          subtitle="Updates from your team in the last 24 hours"
+        />
+        <CardContent>
+          <Box display="flex" flexDirection="column" gap={3}>
+            {[
+              { user: 'Alex', action: 'updated Button.tsx', time: '2h ago', status: 'success' },
+              { user: 'Sam', action: 'added Modal component', time: '5h ago', status: 'info' },
+              { user: 'Jo', action: 'deprecated legacy colors', time: '1d ago', status: 'warning' },
+            ].map((item, i) => (
+              <Box
+                key={i}
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                paddingY={2}
+                borderBottom={i < 2}
+              >
+                <Text variant="body-md">
+                  <Text as="span" weight="bold">
+                    {item.user}
+                  </Text>{' '}
+                  {item.action}
+                </Text>
+                <Box display="flex" alignItems="center" gap={2}>
+                  <Text variant="body-sm" color="subtle">
+                    {item.time}
+                  </Text>
+                  <Badge intent={item.status as BadgeIntent} size="sm">
+                    {item.status}
+                  </Badge>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </CardContent>
+      </Card>
+    ),
+  },
+};

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,41 @@
+import styles from './DashboardLayout.module.css';
+import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
+import { Header } from '../../components/Header/Header.tsx';
+
+export const DashboardLayout = ({
+  headerLogo,
+  headerTitle = 'Tharaday',
+  breadcrumbs,
+  actions,
+  stats,
+  children,
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: DashboardLayoutProps) => {
+  return (
+    <div className={styles.root}>
+      <Header
+        logo={headerLogo}
+        title={headerTitle}
+        user={user}
+        onLogin={onLogin}
+        onLogout={onLogout}
+        onCreateAccount={onCreateAccount}
+      />
+      <main className={styles.main}>
+        <div className={styles.container}>
+          {(breadcrumbs || actions) && (
+            <div className={styles.topBar}>
+              <div className={styles.breadcrumbs}>{breadcrumbs}</div>
+              <div className={styles.actions}>{actions}</div>
+            </div>
+          )}
+          {stats && <div className={styles.stats}>{stats}</div>}
+          <div className={styles.content}>{children}</div>
+        </div>
+      </main>
+    </div>
+  );
+};

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export interface DashboardLayoutProps {
+  headerLogo?: ReactNode;
+  headerTitle?: string;
+  breadcrumbs?: ReactNode;
+  actions?: ReactNode;
+  stats?: ReactNode;
+  children: ReactNode;
+  user?: { name: string };
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}

package/src/layouts/SettingsLayout/SettingsLayout.module.css

@@ -0,0 +1,39 @@
+.root {
+  min-height: 100vh;
+  background-color: var(--ds-surface-1);
+  font-family: var(--ds-font-family-base);
+}
+
+.main {
+  padding: var(--ds-space-6) 0;
+}
+
+.container {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+}
+
+.layoutBody {
+  display: flex;
+  gap: var(--ds-space-8);
+  align-items: flex-start;
+}
+
+.sidebar {
+  width: 15rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+}
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-6);
+}

package/src/layouts/SettingsLayout/SettingsLayout.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { SettingsLayout } from './SettingsLayout.tsx';
+import { Box } from '../../components/Box/Box.tsx';
+import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
+import { Button } from '../../components/Button/Button.tsx';
+import { Card, CardHeader, CardContent, CardFooter } from '../../components/Card/Card.tsx';
+import { Input } from '../../components/Input/Input.tsx';
+import { Notification } from '../../components/Notification/Notification.tsx';
+import { Text } from '../../components/Text/Text.tsx';
+import { Textarea } from '../../components/Textarea/Textarea.tsx';
+
+const meta = {
+  title: 'Layouts/Settings',
+  component: SettingsLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headerTitle: 'DS Creator',
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof SettingsLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ProfileSettings: Story = {
+  args: {
+    user: { name: 'Design Creator' },
+    breadcrumbs: (
+      <Breadcrumbs>
+        <BreadcrumbItem href="#">Home</BreadcrumbItem>
+        <BreadcrumbItem href="#">Settings</BreadcrumbItem>
+        <BreadcrumbItem isCurrent>Profile</BreadcrumbItem>
+      </Breadcrumbs>
+    ),
+    sidebar: (
+      <Box display="flex" flexDirection="column" gap={1} width="200px">
+        <Button variant="solid" intent="info" className="justify-start">
+          Profile
+        </Button>
+        <Button variant="subtle" className="justify-start">
+          Account
+        </Button>
+        <Button variant="subtle" className="justify-start">
+          Security
+        </Button>
+        <Button variant="subtle" className="justify-start">
+          Notifications
+        </Button>
+        <Button variant="subtle" className="justify-start">
+          Integrations
+        </Button>
+      </Box>
+    ),
+    children: (
+      <Box display="flex" flexDirection="column" gap={6}>
+        <Notification intent="info" title="Public Profile">
+          Your profile information will be visible to other members of your organization.
+        </Notification>
+
+        <Card bordered>
+          <CardHeader
+            title="General Information"
+            subtitle="Update your personal details and how others see you."
+          />
+          <CardContent>
+            <Box display="flex" flexDirection="column" gap={4}>
+              <Box display="grid" gridTemplateColumns="1fr 1fr" gap={4}>
+                <Input label="First Name" defaultValue="Design" />
+                <Input label="Last Name" defaultValue="Creator" />
+              </Box>
+              <Input label="Email Address" defaultValue="creator@designsystem.com" disabled />
+              <Textarea label="Bio" placeholder="Tell us a bit about yourself..." rows={4} />
+            </Box>
+          </CardContent>
+          <CardFooter className="justify-end gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button variant="solid" intent="info">
+              Save Changes
+            </Button>
+          </CardFooter>
+        </Card>
+
+        <Card bordered borderColor="danger">
+          <CardHeader title="Danger Zone" subtitle="Irreversible actions for your account." />
+          <CardContent>
+            <Text color="subtle" className="mb-4">
+              Once you delete your account, there is no going back. Please be certain.
+            </Text>
+            <Button variant="outline" intent="danger">
+              Delete Account
+            </Button>
+          </CardContent>
+        </Card>
+      </Box>
+    ),
+  },
+};

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -0,0 +1,37 @@
+import styles from './SettingsLayout.module.css';
+import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
+import { Header } from '../../components/Header/Header.tsx';
+
+export const SettingsLayout = ({
+  headerLogo,
+  headerTitle = 'Tharaday',
+  breadcrumbs,
+  sidebar,
+  children,
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: SettingsLayoutProps) => {
+  return (
+    <div className={styles.root}>
+      <Header
+        logo={headerLogo}
+        title={headerTitle}
+        user={user}
+        onLogin={onLogin}
+        onLogout={onLogout}
+        onCreateAccount={onCreateAccount}
+      />
+      <main className={styles.main}>
+        <div className={styles.container}>
+          {breadcrumbs && <div className={styles.breadcrumbs}>{breadcrumbs}</div>}
+          <div className={styles.layoutBody}>
+            {sidebar && <aside className={styles.sidebar}>{sidebar}</aside>}
+            <section className={styles.content}>{children}</section>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface SettingsLayoutProps {
+  headerLogo?: ReactNode;
+  headerTitle?: string;
+  breadcrumbs?: ReactNode;
+  sidebar?: ReactNode;
+  children: ReactNode;
+  user?: { name: string };
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}