@xyd-js/storybook 0.0.1-xyd.1 → 0.0.1-xyd.12

package/src/docs/components/writer/Badge.stories.tsx

@@ -1,32 +1,19 @@
-import React, {} from 'react';
-import type {Meta} from '@storybook/react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '@xyd-js/components/writer';
 
-import {Badge} from "@xyd-js/components/writer";
-
-export default {
+const meta: Meta<typeof Badge> = {
     title: 'Components/Writer/Badge',
-} as Meta;
+    component: Badge,
+};
 
-export const Default = () => {
-    return <div style={{
-        padding: "100px",
-        paddingTop: "0px",
-        margin: "0 auto",
-    }}>
-        <Badge kind="">
-            Default
-        </Badge>
-    </div>
-}
+export default meta;
+type Story = StoryObj<typeof Badge>;
 
-export const Warning = () => {
-    return <div style={{
-        padding: "100px",
-        paddingTop: "0px",
-        margin: "0 auto",
-    }}>
-        <Badge kind="warning">
-            Warning
-        </Badge>
-    </div>
-}
+// Basic usage
+export const Default: Story = {
+    args: {
+        children: 'Default Badge',
+        kind: 'warning',
+    },
+};

package/src/docs/components/writer/GuideCard.stories.tsx

@@ -1,12 +1,11 @@
 import React, {} from 'react';
 import type {Meta} from '@storybook/react';
 
+import { GuideCard } from '@xyd-js/components/writer';
 import {
-    GuideCard,
-
     IconSessionReplay,
     IconMetrics
-} from '@xyd-js/components/writer';
+} from '../../../__fixtures__/Icons';
 
 export default {
     title: 'Components/Writer/GuideCard',

package/src/docs/components/writer/Table.stories.tsx

@@ -2,7 +2,7 @@ import React, {} from 'react';
 import type {Meta} from '@storybook/react';
 
 import {
-    Table,
+    Table
 } from '@xyd-js/components/writer';
 
 export default {
@@ -16,39 +16,35 @@ export const Default = () => {
         margin: "0 auto",
     }}>
         <Table>
-            <Table.Th>
-                Name
-            </Table.Th>
-            <Table.Th>
-                Default
-            </Table.Th>
-            <Table.Th>
-                Description
-            </Table.Th>
-
+        <Table.Head>
             <Table.Tr>
-                <Table.Td>
-                    disabled
-                </Table.Td>
-                <Table.Td>
-                    false
-                </Table.Td>
-                <Table.Td>
-                    Controls the disabled state of the tab
-                </Table.Td>
+                <Table.Th>Model</Table.Th>
+                <Table.Th numeric>Training</Table.Th>
+                <Table.Th numeric>Input</Table.Th>
+                <Table.Th numeric>Cached input</Table.Th>
+                <Table.Th numeric>Output</Table.Th>
             </Table.Tr>
-
+        </Table.Head>
+        <Table.Body>
             <Table.Tr>
                 <Table.Td>
-                    active
+                    <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
                 </Table.Td>
-                <Table.Td>
-                    false
+                <Table.Td numeric>
+                    <Table.Cell>$25.00</Table.Cell>
                 </Table.Td>
-                <Table.Td>
-                    Controls the active state of the tab
+                <Table.Td numeric>
+                    <Table.Cell>$3.75</Table.Cell>
+                </Table.Td>
+                <Table.Td numeric muted>
+                    <Table.Cell>$1.875</Table.Cell>
+                </Table.Td>
+                <Table.Td numeric>
+                    <Table.Cell>$15.00</Table.Cell>
                 </Table.Td>
             </Table.Tr>
-        </Table>
+        </Table.Body>
+    </Table>
     </div>
 }
+

package/src/docs/components/writer/Tabs.stories.tsx

@@ -0,0 +1,55 @@
+import React, { } from 'react';
+import type { Meta } from '@storybook/react';
+
+import {
+    Tabs,
+} from '@xyd-js/components/writer';
+
+export default {
+    title: 'Components/Writer/Tabs',
+} as Meta;
+
+export const Default = () => {
+    return <div style={{
+        padding: "100px",
+        paddingTop: "0px",
+        margin: "0 auto",
+    }}>
+        <Tabs items={["User Behavior", "Feature Adoption", "Churn Analysis", "Churn Analysis2", "Churn Analysis3", "Churn Analysis4", "Churn Analysis5", "Churn Analysis6"]}>
+            <Tabs.Content value="User Behavior">
+                Gain insights into user behavior by replaying sessions and analyzing click patterns. This helps uncover friction
+                points in your app's user experience.
+            </Tabs.Content>
+            <Tabs.Content value="Feature Adoption">
+                Understand how users engage with new features. Track metrics like time to adoption and overall usage to measure
+                feature success.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis2">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis3">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis4">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis5">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+            <Tabs.Content value="Churn Analysis6">
+                Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted
+                retention strategies.
+            </Tabs.Content>
+        </Tabs>
+    </div>
+}
+
+

package/src/docs/components/writer/TocCard.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TocCard } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof TocCard> = {
+  title: 'Components/Writer/TocCard',
+  component: TocCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A server-side rendered card component for table of contents entries. Displays a title, description, and favicon for a linked resource without client-side fetching.',
+      },
+    },
+  },
+  tags: [],
+};
+
+export default meta;
+type Story = StoryObj<typeof TocCard>;
+
+export const Default: Story = {
+  args: {
+    title: 'Example App',
+    description: 'Explore our example app to see how the TocCard component works.',
+    href: 'https://github.com/livesession/xyd',
+  },
+};
+
+

package/src/docs/components/writer/UnderlineNav.stories.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { UnderlineNav } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof UnderlineNav> = {
+  title: 'Components/Writer/UnderlineNav',
+  component: UnderlineNav,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: [],
+};
+
+export default meta;
+type Story = StoryObj<typeof UnderlineNav>;
+
+export const Default: Story = {
+  args: {
+    value: 'tab1',
+    onChange: (value) => console.log('Selected tab:', value),
+  },
+  render: (args) => {
+    const [value, setValue] = useState('tab1');
+
+    return <div style={{ width: 600 }}>
+      <UnderlineNav value={value} onChange={setValue}>
+        <UnderlineNav.Item value="tab1" href="#tab1">
+          First Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab2" href="#tab2">
+          Second Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab3" href="#tab3">
+          Third Tab
+        </UnderlineNav.Item>
+
+        <UnderlineNav.Content value="tab1">
+          This is tab 1
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab2">
+          This is tab 2
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab3">
+          This is tab 3
+        </UnderlineNav.Content>
+      </UnderlineNav>
+    </div>
+  }
+};
+
+export const WithoutSlide: Story = {
+  args: {
+    value: 'tab1',
+    onChange: (value) => console.log('Selected tab:', value),
+    slide: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('tab1');
+
+    return <div style={{ width: 600 }}>
+      <UnderlineNav value={value} onChange={setValue} slide={false}>
+        <UnderlineNav.Item value="tab1" href="#tab1">
+          First Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab2" href="#tab2">
+          Second Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab3" href="#tab3">
+          Third Tab
+        </UnderlineNav.Item>
+
+        <UnderlineNav.Content value="tab1">
+          This is tab 1
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab2">
+          This is tab 2
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab3">
+          This is tab 3
+        </UnderlineNav.Content>
+      </UnderlineNav>
+    </div>
+  }
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return <div style={{ width: 600 }}>
+      <UnderlineNav>
+        <UnderlineNav.Item value="tab1" href="#tab1">
+          First Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab2" href="#tab2">
+          Second Tab
+        </UnderlineNav.Item>
+        <UnderlineNav.Item value="tab3" href="#tab3">
+          Third Tab
+        </UnderlineNav.Item>
+
+        <UnderlineNav.Content value="tab1">
+          This is tab 1
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab2">
+          This is tab 2
+        </UnderlineNav.Content>
+        <UnderlineNav.Content value="tab3">
+          This is tab 3
+        </UnderlineNav.Content>
+      </UnderlineNav>
+    </div>
+  }
+};
+

package/src/docs/components/writer/Update.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ContentDecorator } from '@xyd-js/components/content';
+import { Heading, Image, List, Text, Update } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof Update> = {
+    title: 'Components/Writer/Update',
+    component: Update,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: '',
+            },
+        },
+    },
+    tags: [],
+};
+
+export default meta;
+type Story = StoryObj<typeof Update>;
+
+export const Default: Story = {
+    args: {
+        date: '2024-10-12',
+        version: 'v0.1.1',
+        features: [
+            'Responsive design',
+            'Sticky section for each changelog',
+        ],
+        children: <ContentDecorator>
+            <Image
+                src="https://placehold.co/600x300?text=Screenshot+or+Content"
+                alt="Screenshot placeholder"
+            />
+            <Heading size={2}>
+                Changelog
+            </Heading>
+            <Text>
+                You can add anything here, like a screenshot, a code snippet, or a list of changes.
+            </Text>
+
+            <Heading size={3}>
+                Features
+            </Heading>
+            <List>
+                <List.Item>Initial layout</List.Item>
+                <List.Item>Basic navigation</List.Item>
+            </List>
+        </ContentDecorator>,
+    },
+};
+
+export const MultipleUpdates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem', alignItems: 'stretch' }}>
+            <Update date="2024-10-12" version="v0.1.1">
+                <ContentDecorator>
+                    <Image
+                        src="https://placehold.co/600x300?text=Screenshot+or+Content+1"
+                        alt="Screenshot 1"
+                    />
+                    <Heading size={2}>Changelog</Heading>
+                    <Text>First update: new features and improvements.</Text>
+                    <Heading size={3}>Features</Heading>
+                    <List>
+                        <List.Item>Initial layout</List.Item>
+                        <List.Item>Basic navigation</List.Item>
+                    </List>
+                </ContentDecorator>
+            </Update>
+            <Update date="2024-09-01" version="v0.1.0">
+                <ContentDecorator>
+                    <Image
+                        src="https://placehold.co/600x300?text=Screenshot+or+Content+2"
+                        alt="Screenshot 2"
+                    />
+                    <Heading size={2}>Changelog</Heading>
+                    <Text>Initial release with basic functionality.</Text>
+                    <Heading size={3}>Features</Heading>
+                    <List>
+                        <List.Item>Initial layout</List.Item>
+                        <List.Item>Basic navigation</List.Item>
+                    </List>
+                </ContentDecorator>
+            </Update>
+        </div>
+    ),
+};
+
+

package/src/docs/components/writer/VideoGuide.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VideoGuide } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof VideoGuide> = {
+    title: 'Components/Writer/VideoGuide',
+    component: VideoGuide,
+    parameters: {
+        layout: 'centered',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof VideoGuide>;
+
+export const Miniature: Story = {
+    render: () => <VideoGuide.Miniature />,
+}; 

package/src/docs/themes/TODO.md

@@ -0,0 +1 @@
+move this to "templates" and here should be showcase of "gusto" | "poetry"

package/src/docs/themes/themes-designsystem.stories.tsx

@@ -7,14 +7,15 @@ import {
     Table,
     UnderlineNav,
 } from '@xyd-js/components/writer';
-import getContentComponents from "@xyd-js/components/content";
+import {ReactContent} from "@xyd-js/components/content";
 
+const reactContent = new ReactContent()
 const {
     h1: H1,
     h3: H3,
     h4: H4,
     p: Text,
-} = getContentComponents();
+} = reactContent.components()
 
 export default {
     title: 'Themes',

package/src/docs/themes/themes.stories.tsx

@@ -3,10 +3,14 @@ import type {Meta} from '@storybook/react';
 import {MemoryRouter} from "react-router";
 
 import {
-    Layout,
+    LayoutPrimary
 } from '@xyd-js/components/layouts';
 
-import getContentComponents from "@xyd-js/components/content";
+import {ReactContent} from "@xyd-js/components/content";
+
+const reactContent = new ReactContent()
+const getContentComponents = reactContent.components
+
 import {
     Breadcrumbs,
     NavLinks
@@ -18,8 +22,8 @@ import {
     UISidebar
 } from "@xyd-js/ui"
 
-import {LiveSessionPlatformLogo} from "./logo.tsx";
-import Content from "../../content/hello-world.mdx";
+import {LiveSessionPlatformLogo} from "./logo";
+import Content from "../../__fixtures__/hello-world.mdx";
 
 export default {
     title: 'Themes/Default',
@@ -31,18 +35,19 @@ export default {
 } as Meta;
 
 export const Default = () => {
-    return <Layout
-        header={<DemoNavbar/>}
-        subheader
-        aside={<DemoSidebar/>}
-        content={<DemoContent/>}
-        contentNav={<DemoTOC/>}
+    return <LayoutPrimary
+        header={<$DemoNavbar/>}
+        subheader={<$DemoSubNav/>}
+        aside={<$DemoSidebar/>}
+        content={<$DemoContent/>}
+        contentNav={<$DemoTOC/>}
     />
 }
 
-function DemoNavbar() {
+function $DemoNavbar() {
     return <>
         <Nav
+            onChange={() => {}}
             value="api-reference"
             logo={<LiveSessionPlatformLogo/>}
             kind="middle"
@@ -57,21 +62,24 @@ function DemoNavbar() {
                 GraphQL
             </Nav.Item>
         </Nav>
-        <SubNav title="Apps" value="build">
-            <SubNav.Item value="build" href="/build">
-                Build
-            </SubNav.Item>
-            <SubNav.Item value="design" href="/design">
-                Design
-            </SubNav.Item>
-            <SubNav.Item value="launch" href="/launch">
-                Launch
-            </SubNav.Item>
-        </SubNav>
     </>
 }
 
-function DemoSidebar() {
+function $DemoSubNav() {
+    return <SubNav onChange={() => {}} title="Apps" value="build">
+        <SubNav.Item value="build" href="/build">
+            Build
+        </SubNav.Item>
+        <SubNav.Item value="design" href="/design">
+            Design
+        </SubNav.Item>
+        <SubNav.Item value="launch" href="/launch">
+            Launch
+        </SubNav.Item>
+    </SubNav>
+}
+
+function $DemoSidebar() {
     const [isOpen, setIsOpen] = useState(false)
 
     function onClick() {
@@ -83,7 +91,7 @@ function DemoSidebar() {
         </UISidebar.Item>
     )
 
-    return <UISidebar footerItems={<DemoSidebarFooter/>}>
+    return <UISidebar footerItems={<$DemoSidebarFooter/>}>
         <UISidebar.ItemHeader>
             GET STARTED
         </UISidebar.ItemHeader>
@@ -130,7 +138,7 @@ function DemoSidebar() {
     </UISidebar>
 }
 
-function DemoSidebarFooter() {
+function $DemoSidebarFooter() {
     return <>
         <UISidebar.FooterItem
             href="#"
@@ -208,7 +216,7 @@ function DemoSidebarFooter() {
 }
 
 
-function DemoContent() {
+function $DemoContent() {
     return <>
         <Breadcrumbs
             items={[
@@ -244,7 +252,7 @@ function DemoContent() {
     </>
 }
 
-function DemoTOC() {
+function $DemoTOC() {
     return <Toc defaultValue="quickstart">
         <Toc.Item value="quickstart">
             Quickstart

package/src/docs/ui/Sidebar.stories.tsx

@@ -1,11 +1,17 @@
 import React, {useState} from 'react';
 import type {Meta} from '@storybook/react';
+import {MemoryRouter} from "react-router";
 
 import {UISidebar} from '@xyd-js/ui';
-import {Layout} from "@xyd-js/components/layouts";
+import {LayoutPrimary} from "@xyd-js/components/layouts";
 
 export default {
     title: 'UI/Sidebar',
+    decorators: [
+        (Story) => <MemoryRouter>
+            <Story />
+        </MemoryRouter>,
+    ],
 } as Meta;
 
 export const Default = () => {
@@ -14,7 +20,7 @@ export const Default = () => {
         paddingTop: "0px",
         margin: "0 auto",
     }}>
-        <Layout
+        <LayoutPrimary
             header={<></>}
             aside={<DemoSidebar/>}
             content={<></>}