@fragments-sdk/ui 0.8.1 → 0.8.3

package/src/recipes/DashboardLayout.recipe.ts

@@ -1,73 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Dashboard Layout',
-  description: 'Dashboard grid with a featured full-width card and smaller metric cards below',
-  category: 'layout',
-  components: ['Grid', 'Card', 'Badge', 'Separator'],
-  tags: ['dashboard', 'layout', 'metrics', 'widgets', 'overview'],
-  code: `
-<Grid columns={4} gap="lg">
-  <Grid.Item colSpan="full">
-    <Card>
-      <Card.Header>
-        <Card.Title>Overview</Card.Title>
-        <Card.Description>Key metrics for this period</Card.Description>
-      </Card.Header>
-      <Card.Body>{summaryContent}</Card.Body>
-    </Card>
-  </Grid.Item>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Users</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="success">{stats.users}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Revenue</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="info">{stats.revenue}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Orders</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="warning">{stats.orders}</Badge>
-    </Card.Body>
-  </Card>
-  <Card variant="outlined">
-    <Card.Header>
-      <Card.Title>Errors</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Badge variant="danger">{stats.errors}</Badge>
-    </Card.Body>
-  </Card>
-  <Grid.Item colSpan="full">
-    <Separator spacing="md" />
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Card>
-      <Card.Header>
-        <Card.Title>Recent Activity</Card.Title>
-      </Card.Header>
-      <Card.Body>{activityList}</Card.Body>
-    </Card>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Card>
-      <Card.Header>
-        <Card.Title>Notifications</Card.Title>
-      </Card.Header>
-      <Card.Body>{notificationList}</Card.Body>
-    </Card>
-  </Grid.Item>
-</Grid>
-`.trim(),
-});

package/src/recipes/DashboardNav.recipe.ts

@@ -1,183 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Dashboard Navigation',
-  description: 'Sidebar navigation pattern for dashboard applications with user profile, sections, and nested menus',
-  category: 'navigation',
-  components: ['Sidebar', 'Avatar'],
-  tags: ['navigation', 'sidebar', 'dashboard', 'admin', 'menu'],
-  code: `
-// Dashboard Navigation with User Profile
-// A complete sidebar navigation for admin/dashboard interfaces
-
-function DashboardNav({ user, currentPath }) {
-  const [collapsed, setCollapsed] = React.useState(false);
-  const [projectsExpanded, setProjectsExpanded] = React.useState(false);
-
-  return (
-    <Sidebar
-      collapsed={collapsed}
-      onCollapsedChange={setCollapsed}
-    >
-      {/* Brand header */}
-      <Sidebar.Header>
-        <svg width="32" height="32" viewBox="0 0 256 256" fill="var(--fui-color-accent)">
-          <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z" />
-        </svg>
-        {!collapsed && (
-          <span style={{ fontWeight: 600, fontSize: '16px' }}>Dashboard</span>
-        )}
-        <Sidebar.CollapseToggle />
-      </Sidebar.Header>
-
-      {/* Main navigation */}
-      <Sidebar.Nav aria-label="Dashboard navigation">
-        {/* Primary section */}
-        <Sidebar.Section>
-          <Sidebar.Item
-            icon={<HomeIcon />}
-            href="/dashboard"
-            active={currentPath === '/dashboard'}
-          >
-            Overview
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<ChartIcon />}
-            href="/analytics"
-            active={currentPath === '/analytics'}
-            badge="New"
-          >
-            Analytics
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<InboxIcon />}
-            href="/inbox"
-            active={currentPath === '/inbox'}
-            badge="5"
-          >
-            Inbox
-          </Sidebar.Item>
-        </Sidebar.Section>
-
-        {/* Projects section with nested items */}
-        <Sidebar.Section label="Workspace">
-          <Sidebar.Item
-            icon={<FolderIcon />}
-            hasSubmenu
-            expanded={projectsExpanded}
-            onExpandedChange={setProjectsExpanded}
-          >
-            Projects
-          </Sidebar.Item>
-          <Sidebar.Submenu>
-            <Sidebar.SubItem
-              href="/projects/website"
-              active={currentPath === '/projects/website'}
-            >
-              Website Redesign
-            </Sidebar.SubItem>
-            <Sidebar.SubItem
-              href="/projects/mobile"
-              active={currentPath === '/projects/mobile'}
-            >
-              Mobile App
-            </Sidebar.SubItem>
-            <Sidebar.SubItem
-              href="/projects/api"
-              active={currentPath === '/projects/api'}
-            >
-              API Integration
-            </Sidebar.SubItem>
-          </Sidebar.Submenu>
-          <Sidebar.Item
-            icon={<UsersIcon />}
-            href="/team"
-            active={currentPath === '/team'}
-          >
-            Team Members
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<CalendarIcon />}
-            href="/calendar"
-            active={currentPath === '/calendar'}
-          >
-            Calendar
-          </Sidebar.Item>
-        </Sidebar.Section>
-
-        {/* Settings section */}
-        <Sidebar.Section label="Account">
-          <Sidebar.Item
-            icon={<GearIcon />}
-            href="/settings"
-            active={currentPath === '/settings'}
-          >
-            Settings
-          </Sidebar.Item>
-          <Sidebar.Item
-            icon={<HelpIcon />}
-            href="/help"
-            active={currentPath === '/help'}
-          >
-            Help & Support
-          </Sidebar.Item>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-
-      {/* Footer with user profile */}
-      <Sidebar.Footer>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '12px',
-          padding: collapsed ? '0' : '8px',
-          borderRadius: '8px',
-          cursor: 'pointer',
-        }}>
-          <Avatar
-            src={user.avatar}
-            name={user.name}
-            size="sm"
-          />
-          {!collapsed && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{
-                fontWeight: 500,
-                fontSize: '14px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}>
-                {user.name}
-              </div>
-              <div style={{
-                fontSize: '12px',
-                color: 'var(--fui-text-secondary)',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}>
-                {user.email}
-              </div>
-            </div>
-          )}
-        </div>
-      </Sidebar.Footer>
-    </Sidebar>
-  );
-}
-
-// Usage example:
-// <DashboardNav
-//   user={{ name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.jpg' }}
-//   currentPath="/dashboard"
-// />
-
-// Icon components (use your preferred icon library)
-const HomeIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
-    <path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V160h48v56a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68Z" />
-  </svg>
-);
-`.trim(),
-});

package/src/recipes/FormLayout.recipe.ts

@@ -1,31 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Form Layout',
-  description: 'Two-column form with full-width fields where needed, using Grid for alignment',
-  category: 'forms',
-  components: ['Grid', 'Input', 'Textarea', 'Select', 'Button'],
-  tags: ['form', 'layout', 'grid', 'inputs', 'settings'],
-  code: `
-<Grid columns={2} gap="md">
-  <Input label="First Name" placeholder="Jane" />
-  <Input label="Last Name" placeholder="Doe" />
-  <Grid.Item colSpan="full">
-    <Input label="Email" type="email" placeholder="jane@example.com" />
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Select label="Role">
-      <Select.Item value="admin">Admin</Select.Item>
-      <Select.Item value="editor">Editor</Select.Item>
-      <Select.Item value="viewer">Viewer</Select.Item>
-    </Select>
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Textarea label="Bio" placeholder="Tell us about yourself" />
-  </Grid.Item>
-  <Grid.Item colSpan="full">
-    <Button type="submit" variant="primary">Save</Button>
-  </Grid.Item>
-</Grid>
-`.trim(),
-});

package/src/recipes/LoginForm.recipe.ts

@@ -1,33 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Login Form',
-  description: 'Email/password authentication form with validation states',
-  category: 'forms',
-  components: ['Input', 'Button', 'Alert'],
-  tags: ['auth', 'login', 'form'],
-  code: `
-<Input
-  label="Email"
-  type="email"
-  placeholder="you@example.com"
-  error={Boolean(errors.email)}
-  helperText={errors.email}
-/>
-<Input
-  label="Password"
-  type="password"
-  error={Boolean(errors.password)}
-  helperText={errors.password}
-/>
-<Button type="submit" variant="primary">Sign in</Button>
-{error && (
-  <Alert severity="error">
-    <Alert.Icon />
-    <Alert.Body>
-      <Alert.Content>{error}</Alert.Content>
-    </Alert.Body>
-  </Alert>
-)}
-`.trim(),
-});

package/src/recipes/SettingsPage.recipe.ts

@@ -1,58 +0,0 @@
-import { defineRecipe } from '@fragments/core';
-
-export default defineRecipe({
-  name: 'Settings Page',
-  description: 'Settings page with labeled sections using cards, toggles, and a save action',
-  category: 'forms',
-  components: ['Grid', 'Card', 'Toggle', 'Input', 'Select', 'Separator', 'Button'],
-  tags: ['settings', 'preferences', 'form', 'toggle', 'layout'],
-  code: `
-<Grid columns={1} gap="lg">
-  <Card>
-    <Card.Header>
-      <Card.Title>Profile</Card.Title>
-      <Card.Description>Your public profile information</Card.Description>
-    </Card.Header>
-    <Card.Body>
-      <Grid columns={2} gap="md">
-        <Input label="Display Name" defaultValue={user.name} />
-        <Input label="Email" type="email" defaultValue={user.email} />
-        <Grid.Item colSpan="full">
-          <Input label="Website" type="url" defaultValue={user.website} />
-        </Grid.Item>
-      </Grid>
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Notifications</Card.Title>
-      <Card.Description>Choose what you get notified about</Card.Description>
-    </Card.Header>
-    <Card.Body>
-      <Grid columns={1} gap="sm">
-        <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
-        <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
-        <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
-      </Grid>
-    </Card.Body>
-  </Card>
-
-  <Card>
-    <Card.Header>
-      <Card.Title>Appearance</Card.Title>
-    </Card.Header>
-    <Card.Body>
-      <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
-        <Select.Item value="light">Light</Select.Item>
-        <Select.Item value="dark">Dark</Select.Item>
-        <Select.Item value="system">System</Select.Item>
-      </Select>
-    </Card.Body>
-  </Card>
-
-  <Separator />
-  <Button variant="primary" type="submit">Save Changes</Button>
-</Grid>
-`.trim(),
-});