@xyd-js/storybook 0.0.0-build

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

@@ -0,0 +1,384 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Play, BarChart, TrendingUp } from 'lucide-react';
+
+import { GuideCard } from '@xyd-js/components/writer';
+
+const meta: Meta<typeof GuideCard> = {
+    title: 'Components/Writer/GuideCard',
+    component: GuideCard,
+    parameters: {
+        docs: {
+            description: {
+                component: 'GuideCard component displays content with a title and optional icon. The entire card is clickable and links to the specified URL.',
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            description: 'The content to display inside the card body',
+            control: 'text',
+        },
+        href: {
+            description: 'URL the card links to',
+            control: 'text',
+        },
+        title: {
+            description: 'Title displayed at the top of the card',
+            control: 'text',
+        },
+        icon: {
+            description: 'Optional icon displayed to the left of the content',
+            control: false,
+        },
+        kind: {
+            description: 'Visual style variant of the card',
+            control: { type: 'select' },
+            options: ['secondary'],
+        },
+        size: {
+            description: 'Size variant of the card',
+            control: { type: 'select' },
+            options: ['sm', 'md'],
+        },
+        className: {
+            description: 'Additional CSS classes to apply',
+            control: 'text',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof GuideCard>;
+
+// Basic usage
+export const Default: Story = {
+    args: {
+        href: '#',
+        title: 'Getting Started',
+        children: 'Start your journey with our comprehensive quickstart guide.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// With icon
+export const WithIcon: Story = {
+    args: {
+        href: '#',
+        title: 'Session Replay',
+        icon: <Play size={24} />,
+        children: 'Visualize user interactions in your product with detailed session replays.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// Secondary variant
+export const Secondary: Story = {
+    args: {
+        href: '#',
+        title: 'Metrics Analysis',
+        icon: <BarChart size={24} />,
+        kind: 'secondary',
+        children: 'Analyze key metrics to understand user behavior and optimize your product workflows.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// Small size
+export const Small: Story = {
+    args: {
+        href: '#',
+        title: 'Quick Tips',
+        icon: <TrendingUp size={24} />,
+        size: 'sm',
+        children: 'Essential tips and best practices for getting the most out of our platform.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// Medium size (default)
+export const Medium: Story = {
+    args: {
+        href: '#',
+        title: 'Advanced Configuration',
+        icon: <Play size={24} />,
+        size: 'md',
+        kind: 'secondary',
+        children: 'Learn about advanced configuration options and customization features.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// Without icon
+export const WithoutIcon: Story = {
+    args: {
+        href: '#',
+        title: 'Documentation',
+        children: 'Comprehensive documentation covering all features, APIs, and integration options.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+};
+
+// Multiple cards in a row
+export const MultipleCards: Story = {
+    render: () => (
+        <div style={{ padding: '20px' }}>
+            <div style={{
+                display: 'flex',
+                gap: '20px',
+                flexWrap: 'wrap',
+                alignItems: 'flex-start',
+            }}>
+                <GuideCard
+                    href="#"
+                    icon={<Play size={24} />}
+                    title="Session Replay"
+                    kind="secondary"
+                >
+                    Visualize user interactions in your product with detailed session replays.
+                </GuideCard>
+
+                <GuideCard
+                    href="#"
+                    icon={<BarChart size={24} />}
+                    title="Metrics Analysis"
+                    kind="secondary"
+                >
+                    Analyze key metrics to understand user behavior and optimize your product workflows.
+                </GuideCard>
+
+                <GuideCard
+                    href="#"
+                    icon={<TrendingUp size={24} />}
+                    title="Funnel Analysis"
+                    kind="secondary"
+                >
+                    Track conversion funnels and identify drop-off points in your user journey.
+                </GuideCard>
+            </div>
+        </div>
+    ),
+};
+
+// Grid layout using GuideCard.List
+export const Grid: Story = {
+    render: () => (
+        <div style={{ padding: '20px' }}>
+            <GuideCard.List>
+                <GuideCard
+                    href="#"
+                    icon={<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1em"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                    >
+                        <path
+                            d="M22 9H2M2 7.8L2 16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27977 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3L6.8 3C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8Z"
+                            stroke="#000000"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </svg>}
+                    title="Browser API"
+                    kind="secondary"
+                >
+                    Capture user interactions like clicks, page views, and events directly from your app with minimal impact
+                    on performance.
+                </GuideCard>
+
+                <GuideCard
+                    href="#"
+                    icon={<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1em"
+                        height="1em"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                    >
+                        <path
+                            fill="#000000"
+                            fillRule="evenodd"
+                            d="M.5 2.75a2.25 2.25 0 114.28.97l1.345 1.344.284-.284a2.25 2.25 0 013.182 0l.284.284 1.344-1.344a2.25 2.25 0 111.06 1.06l-1.343 1.345.284.284a2.25 2.25 0 010 3.182l-.284.284 1.344 1.344a2.25 2.25 0 11-1.06 1.06l-1.345-1.343-.284.284a2.25 2.25 0 01-3.182 0l-.284-.284-1.344 1.344a2.25 2.25 0 11-1.06-1.06l1.343-1.345-.284-.284a2.25 2.25 0 010-3.182l.284-.284L3.72 4.781A2.25 2.25 0 01.5 2.75zM2.75 2a.75.75 0 100 1.5.75.75 0 000-1.5zm0 10.5a.75.75 0 100 1.5.75.75 0 000-1.5zm9.75.75a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM13.25 2a.75.75 0 100 1.5.75.75 0 000-1.5zM7.47 5.841a.75.75 0 011.06 0L10.16 7.47a.75.75 0 010 1.06L8.53 10.16a.75.75 0 01-1.06 0L5.84 8.53a.75.75 0 010-1.06L7.47 5.84z"
+                            clipRule="evenodd"
+                        />
+                    </svg>}
+                    title="REST API"
+                    kind="secondary"
+                >
+                    Access and manage session data, events, and user journeys programmatically. Perfect for custom
+                    dashboards and third-party integrations.
+                </GuideCard>
+
+                <GuideCard
+                    href="#"
+                    icon={
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#000"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 32 32"
+                        >
+                            <path
+                                d="M18.734 3.667l6.578 3.802c1.089-1.146 2.901-1.193 4.047-0.104 0.193 0.188 0.365 0.401 0.5 0.635 0.786 1.37 0.313 3.12-1.063 3.906-0.229 0.13-0.479 0.234-0.745 0.297v7.599c1.531 0.365 2.474 1.896 2.109 3.427-0.063 0.271-0.172 0.531-0.307 0.771-0.792 1.365-2.536 1.833-3.906 1.042-0.26-0.146-0.5-0.344-0.698-0.568l-6.542 3.776c0.495 1.495-0.318 3.109-1.813 3.604-0.292 0.099-0.594 0.146-0.896 0.146-1.573 0-2.854-1.271-2.854-2.849 0-0.271 0.042-0.547 0.12-0.813l-6.583-3.797c-1.089 1.141-2.896 1.188-4.036 0.094-1.135-1.089-1.177-2.891-0.094-4.031 0.38-0.396 0.865-0.677 1.396-0.807v-7.599c-1.531-0.365-2.479-1.906-2.109-3.443 0.063-0.266 0.167-0.521 0.302-0.755 0.786-1.365 2.536-1.833 3.901-1.042 0.234 0.135 0.453 0.302 0.641 0.5l6.583-3.797c-0.448-1.51 0.417-3.099 1.922-3.542 0.26-0.083 0.536-0.12 0.813-0.12 1.573 0 2.854 1.271 2.854 2.844 0 0.281-0.042 0.557-0.12 0.823zM18.047 4.839c-0.026 0.026-0.047 0.052-0.078 0.078l8.615 14.917c0.036-0.010 0.078-0.021 0.109-0.031v-7.609c-1.526-0.375-2.453-1.922-2.073-3.448 0.005-0.031 0.016-0.068 0.021-0.099zM14.026 4.917l-0.078-0.078-6.594 3.802c0.438 1.51-0.438 3.089-1.948 3.526-0.036 0.010-0.068 0.016-0.104 0.026v7.609l0.115 0.031 8.615-14.917zM16.797 5.594c-0.521 0.146-1.073 0.146-1.589 0l-8.615 14.917c0.391 0.375 0.667 0.859 0.802 1.391h17.214c0.13-0.531 0.406-1.016 0.802-1.396zM18.109 27.229l6.552-3.786c-0.021-0.063-0.036-0.125-0.052-0.188h-17.219l-0.031 0.109 6.589 3.802c0.516-0.536 1.245-0.87 2.052-0.87 0.839 0 1.589 0.359 2.109 0.932z" />
+                        </svg>
+                    }
+                    title="GraphQL API"
+                    kind="secondary"
+                >
+                    Query session data, user interactions, and event tracking with precision. Build custom integrations to
+                    enhance your product analytics.
+                </GuideCard>
+
+                <GuideCard
+                    href="#"
+                    icon={<svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                        width="1em"
+                        height="1em"
+                        viewBox="-10 -5 1034 1034"
+                    >
+                        <path
+                            fill="#000000"
+                            d="M482 226h-1l-10 2q-33 4 -64.5 18.5t-55.5 38.5q-41 37 -57 91q-9 30 -8 63t12 63q17 45 52 78l13 12l-83 135q-26 -1 -45 7q-30 13 -45 40q-7 15 -9 31t2 32q8 30 33 48q15 10 33 14.5t36 2t34.5 -12.5t27.5 -25q12 -17 14.5 -39t-5.5 -41q-1 -5 -7 -14l-3 -6l118 -192 q6 -9 8 -14l-10 -3q-9 -2 -13 -4q-23 -10 -41.5 -27.5t-28.5 -39.5q-17 -36 -9 -75q4 -23 17 -43t31 -34q37 -27 82 -27q27 -1 52.5 9.5t44.5 30.5q17 16 26.5 38.5t10.5 45.5q0 17 -6 42l70 19l8 1q14 -43 7 -86q-4 -33 -19.5 -63.5t-39.5 -53.5q-42 -42 -103 -56 q-6 -2 -18 -4l-14 -2h-37zM500 350q-17 0 -34 7t-30.5 20.5t-19.5 31.5q-8 20 -4 44q3 18 14 34t28 25q24 15 56 13q3 4 5 8l112 191q3 6 6 9q27 -26 58.5 -35.5t65 -3.5t58.5 26q32 25 43.5 61.5t0.5 73.5q-8 28 -28.5 50t-48.5 33q-31 13 -66.5 8.5t-63.5 -24.5 q-4 -3 -13 -10l-5 -6q-4 3 -11 10l-47 46q23 23 52 38.5t61 21.5l22 4h39l28 -5q64 -13 110 -60q22 -22 36.5 -50.5t19.5 -59.5q5 -36 -2 -71.5t-25 -64.5t-44 -51t-57 -35q-34 -14 -70.5 -16t-71.5 7l-17 5l-81 -137q13 -19 16 -37q5 -32 -13 -60q-16 -25 -44 -35 q-17 -6 -35 -6zM218 614q-58 13 -100 53q-47 44 -61 105l-4 24v37l2 11q2 13 4 20q7 31 24.5 59t42.5 49q50 41 115 49q38 4 76 -4.5t70 -28.5q53 -34 78 -91q7 -17 14 -45q6 -1 18 0l125 2q14 0 20 1q11 20 25 31t31.5 16t35.5 4q28 -3 50 -20q27 -21 32 -54 q2 -17 -1.5 -33t-13.5 -30q-16 -22 -41 -32q-17 -7 -35.5 -6.5t-35.5 7.5q-28 12 -43 37l-3 6q-14 0 -42 -1l-113 -1q-15 -1 -43 -1l-50 -1l3 17q8 43 -13 81q-14 27 -40 45t-57 22q-35 6 -70 -7.5t-57 -42.5q-28 -35 -27 -79q1 -37 23 -69q13 -19 32 -32t41 -19l9 -3z"
+                        />
+                    </svg>}
+                    title="Webhooks"
+                    kind="secondary"
+                >
+                    Trigger actions or sync apps in real-time based on user behaviors or product events. Webhooks provide a
+                    faster, more efficient alternative to API polling.
+                </GuideCard>
+            </GuideCard.List>
+        </div>
+    ),
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ padding: '20px' }}>
+            <div style={{ marginBottom: '20px' }}>
+                <h3 style={{ marginBottom: '10px' }}>Default (Primary)</h3>
+                <div style={{ maxWidth: '400px' }}>
+                    <GuideCard
+                        href="#"
+                        title="Primary Card"
+                        icon={<Play size={24} />}
+                    >
+                        This is a primary guide card with default styling.
+                    </GuideCard>
+                </div>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3 style={{ marginBottom: '10px' }}>Secondary</h3>
+                <div style={{ maxWidth: '400px' }}>
+                    <GuideCard
+                        href="#"
+                        title="Secondary Card"
+                        icon={<BarChart size={24} />}
+                        kind="secondary"
+                    >
+                        This is a secondary guide card with different styling.
+                    </GuideCard>
+                </div>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3 style={{ marginBottom: '10px' }}>Small Size</h3>
+                <div style={{ maxWidth: '400px' }}>
+                    <GuideCard
+                        href="#"
+                        title="Small Card"
+                        icon={<TrendingUp size={24} />}
+                        size="sm"
+                        kind="secondary"
+                    >
+                        This is a small guide card with compact styling.
+                    </GuideCard>
+                </div>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3 style={{ marginBottom: '10px' }}>Medium Size</h3>
+                <div style={{ maxWidth: '400px' }}>
+                    <GuideCard
+                        href="#"
+                        title="Medium Card"
+                        icon={<Play size={24} />}
+                        size="md"
+                        kind="secondary"
+                    >
+                        This is a medium guide card with standard styling.
+                    </GuideCard>
+                </div>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+                <h3 style={{ marginBottom: '10px' }}>Without Icon</h3>
+                <div style={{ maxWidth: '400px' }}>
+                    <GuideCard
+                        href="#"
+                        title="No Icon Card"
+                        kind="secondary"
+                    >
+                        This guide card doesn't have an icon.
+                    </GuideCard>
+                </div>
+            </div>
+        </div>
+    ),
+};
+
+// Interactive example
+export const Interactive: Story = {
+    args: {
+        href: '#',
+        title: 'Interactive Card',
+        icon: <Play size={24} />,
+        kind: 'secondary',
+        children: 'This card demonstrates interactive behavior. Try hovering over it to see the pointer animation.',
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', maxWidth: '400px' }}>
+            <GuideCard {...args} />
+        </div>
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'This card demonstrates the interactive hover effects. Notice how the pointer icon appears on hover.',
+            },
+        },
+    },
+};
+