@xyd-js/storybook 0.0.1-xyd.0

package/.storybook/main.ts

@@ -0,0 +1,59 @@
+import type {StorybookConfig} from "@storybook/react-vite";
+import remarkGfm from 'remark-gfm';
+import {visit} from 'unist-util-visit';
+
+import {join, dirname} from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, "package.json")));
+}
+
+function remarkInjectMeta() { // TODO: move to @xyd-js/content
+    return (tree) => {
+        visit(tree, 'code', (node) => {
+            if (node.meta) {
+                node.data = node.data || {};
+                node.data.hProperties = {
+                    ...(node.data.hProperties || {}),
+                    meta: node.meta,
+                };
+            }
+        });
+    };
+}
+
+const config: StorybookConfig = {
+    stories: ["../src/docs/**/*.mdx", "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        getAbsolutePath("@storybook/addon-onboarding"),
+        getAbsolutePath("@storybook/addon-links"),
+        getAbsolutePath("@storybook/addon-essentials"),
+        getAbsolutePath("@chromatic-com/storybook"),
+        getAbsolutePath("@storybook/addon-interactions"),
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [
+                            remarkGfm,
+                            remarkInjectMeta
+                        ],
+                    },
+                },
+            },
+        },
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/react-vite"),
+        options: {},
+    },
+    features: {
+        experimentalRSC: true,
+    }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type {Preview} from "@storybook/react";
+
+import "@xyd-js/atlas/index.css"
+import "@xyd-js/fable-wiki/theme.css"
+
+import './styles.css'
+
+const preview: Preview = {
+    parameters: {
+        options: {
+            storySort: {
+                order: [
+                    'Atlas',
+                    'Components', ['Writer', 'Coder'],
+                    'UI',
+                    'Layouts',
+                    'Themes', ['Default', 'Design System'],
+                ], // TODO: nested sorting
+            },
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

package/.storybook/styles.css

@@ -0,0 +1,5 @@
+:root {
+    --headingEffect-color-tertiary: rgba(23, 119, 184, 0.5);
+    --headingEffect-color-secondary: rgb(121, 85, 241);
+    --headingEffect-color-primary: rgb(255, 105, 180);
+}

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @xyd-js/storybook
+
+## 0.0.1-xyd.0
+
+### Patch Changes
+
+- initial changeset bump
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.7
+  - @xyd-js/components@0.1.0-xyd.1
+  - @xyd-js/ui@0.1.0-xyd.7
+  - @xyd-js/fable-wiki@0.1.0-xyd.4

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@xyd-js/storybook",
+  "version": "0.0.1-xyd.0",
+  "type": "module",
+  "dependencies": {
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "remark-gfm": "^4.0.0",
+    "@xyd-js/components": "0.1.0-xyd.1",
+    "@xyd-js/atlas": "0.1.0-xyd.7",
+    "@xyd-js/fable-wiki": "0.1.0-xyd.4",
+    "@xyd-js/ui": "0.1.0-xyd.7"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@eslint/js": "^9.11.1",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "^0.9.0",
+    "globals": "^15.9.0",
+    "storybook": "^8.3.5",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
+    "lint": "eslint ."
+  }
+}

package/src/content/Icons.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+export function IconSessionReplay() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M10 8L16 12L10 16V8Z"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconMetrics() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M21 7L13.2273 14.9167L9.13636 10.75L3 17"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M16 7H21V12"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}
+
+export function IconFunnels() {
+    return <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 20L12 10"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M6 20L6 4"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M18 20L18 16"
+            stroke="black"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+}

package/src/content/code-sample.mdx

@@ -0,0 +1,15 @@
+```js Track User Events
+// !mark
+import ls from " @livesession/sdk";
+
+ls.init("123456789", { keystrokes: true, rootHostname: ".mypage.com" });
+
+// !bg[11:25]
+ls.track("User Subscribed", {
+  // !mark(1:4)
+  plan: "premium",
+  seats: 1,
+  total: 255.50,
+  isPatron: true
+});
+```

package/src/content/hello-world.mdx

@@ -0,0 +1,116 @@
+import {
+    Callout,
+    Details,
+    Steps,
+    Tabs,
+    GuideCard
+} from '@xyd-js/components/writer';
+
+import {
+    IconSessionReplay,
+    IconMetrics,
+    IconFunnels
+} from "./Icons";
+
+# Product Analytics
+### Learn how to analyze user behavior to optimize your product.
+
+LiveSession provides comprehensive APIs to analyze user interactions within your product, enabling you to gain actionable insights. Whether you're optimizing user flows, identifying drop-offs, or validating feature adoption, our tools empower you to make data-driven decisions.
+
+### Quickstart
+
+To get started with product analytics, you can use the session recording and event tracking endpoints in the REST API, as shown in the examples below. You can either use the [REST API](https://livesession.com/docs/api) from your preferred HTTP client or utilize our official SDKs for popular programming languages.
+
+<Callout>
+    Start analyzing user sessions today using LiveSession's intuitive tools. Sign up to unlock a 14-day free trial and
+    see the impact of real-time insights.
+</Callout>
+
+> Leverage LiveSession's real-time analytics to enhance your product and user experience.
+
+Here are a few examples of how LiveSession can improve your product workflows:
+
+<Steps>
+    <Steps.Item>
+        **Identifying bottlenecks:** Detect areas where users struggle within your app, such as confusing UI elements or
+        lengthy onboarding steps.
+    </Steps.Item>
+    <Steps.Item>
+        **Improving feature adoption:** Analyze which features are underutilized and develop strategies to improve their
+        discoverability.
+    </Steps.Item>
+    <Steps.Item>
+        **Reducing churn:** Use behavioral data to identify churn risks and proactively address user pain points.
+    </Steps.Item>
+    <Steps.Item>
+        **Optimizing conversion rates:** Track and analyze key user journeys to increase your product's conversion
+        rates.
+    </Steps.Item>
+</Steps>
+
+#### API Features
+Our analytics tools are designed for seamless integration and powerful insights:
+
+<div>
+    <Details label="Session Replay">
+        LiveSession offers detailed session replays, allowing you to visualize user interactions in your product.
+    </Details>
+    <Details label="Custom Events">
+        Track custom events tailored to your specific business needs for deeper analytics.
+    </Details>
+</div>
+
+<div>
+    <Details kind="secondary" title="Learn More" label="Advanced Features">
+        Dive deeper into advanced analytics, including segmentation, funnel analysis, and heatmaps.
+    </Details>
+</div>
+
+#### Example Use Cases
+<Tabs items={["User Behavior", "Feature Adoption", "Churn Analysis"]}>
+    <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>
+
+```js Track User Events
+import ls from " @livesession/sdk";
+
+ls.init("123456789", { keystrokes: true, rootHostname: ".mypage.com" });
+
+ls.track("User Subscribed", {
+  plan: "premium",
+  seats: 1,
+  total: 255.50,
+  isPatron: true
+});
+```
+
+## Next Steps
+
+<GuideCard
+    icon={<IconSessionReplay/>}
+    title="Session Replay"
+    body="Visualize user interactions in your product with detailed session replays."
+/>
+
+<GuideCard
+    icon={<IconMetrics/>}
+    title="Metrics Analysis"
+    body="Analyze key metrics to understand user behavior and optimize your product workflows."
+/>
+
+<GuideCard
+    icon={<IconFunnels/>}
+    title="Funnel Analysis"
+    body="Track user journeys and identify drop-offs to optimize conversion rates."
+/>

package/src/docs/atlas/Atlas.stories.tsx

@@ -0,0 +1,47 @@
+import React, {useState, useEffect} from 'react';
+import type {Meta} from '@storybook/react';
+
+import {Reference} from '@xyd-js/uniform';
+import {Atlas} from "@xyd-js/atlas";
+
+import {uniformToReferences} from "./uniform-to-references";
+import {MDXReference} from "../../utils/mdx.ts";
+
+const HelloWorld = () => {
+    return <h1>Hello, World!</h1>;
+};
+
+export default {
+    title: 'Atlas/Atlas',
+    component: HelloWorld,
+} as Meta;
+
+// const Template = (args) => <Atlas/>;
+
+const Template = (args) => {
+    const [references, setReferences] = useState<MDXReference<Reference[]> | []>([])
+
+    async function load() {
+        const resp = await uniformToReferences()
+        if (resp && resp.length) {
+            setReferences(resp)
+        }
+    }
+
+    useEffect(() => {
+        load()
+    }, [])
+
+    return <div style={{
+        width: "1200px",
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        margin: "0 auto"
+    }}>
+        <Atlas references={references}/>
+    </div>
+}
+
+export const Default = Template.bind({});
+Default.args = {};