@xyd-js/storybook 0.0.1-xyd.6 → 0.0.1-xyd.63

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

@@ -6,7 +6,11 @@ import {
     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
@@ -19,7 +23,7 @@ import {
 } from "@xyd-js/ui"
 
 import {LiveSessionPlatformLogo} from "./logo";
-import Content from "../../content/hello-world.mdx";
+import Content from "../../__fixtures__/hello-world.mdx";
 
 export default {
     title: 'Themes/Default',

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={<></>}