Try Ladle (over Storybook) in react-ui with 2 components

.github/workflows/lostpixel-run.yml

@@ -0,0 +1,34 @@
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+          show-progress: false
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build Ladle
+        run: pnpm --filter @kadena/react-ui run ladle:build
+
+      - name: Lost Pixel
+        uses: lost-pixel/lost-pixel@v3.8.0
+

.github/workflows/update-snapshots.yml

@@ -0,0 +1,19 @@
+on:
+  pull_request:
+    types: [opened]
+  issue_comment:
+    types: [created]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: khan/pull-request-comment-trigger@v1.1.0
+        id: check
+        with:
+          trigger: '/snapshots'
+          reaction: rocket
+        env:
+          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+      - run: 'echo Found it!'
+        if: steps.check.outputs.triggered == 'true'

packages/libs/react-ui/.gitignore

@@ -1,3 +1,4 @@
 types
 theme
-storybook-static
+storybook-static
+ladle-static

packages/libs/react-ui/.ladle/config.mjs

@@ -0,0 +1,12 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: [
+    'src/components/Button/Button.stories.tsx',
+    'src/components/TrackerCard/TrackerCard.stories.tsx',
+  ],
+  addons: {
+    a11y: {
+      enabled: true,
+    },
+  },
+};

packages/libs/react-ui/lostpixel.config.ts

@@ -0,0 +1,15 @@
+import { CustomProjectConfig } from 'lost-pixel';
+
+export const config: CustomProjectConfig = {
+  ladleShots: {
+    //ip should be localhost when running locally & 172.17.0.1 when running in GitHub action
+    ladleUrl: 'http://172.17.0.1:61000',
+  },
+  // OSS mode
+  generateOnly: true,
+  failOnDifference: true,
+
+  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
+  // lostPixelProjectId: "xxxx",
+  // process.env.LOST_PIXEL_API_KEY,
+};

packages/libs/react-ui/package.json

@@ -38,7 +38,8 @@
     "lint:fmt": "prettier . --cache --check",
     "lint:pkg": "lint-package",
     "lint:src": "eslint src --ext .js,.ts,.tsx",
-    "storybook": "storybook dev -p 6006",
+    "ladle:build": "ladle build -o ladl-static",
+    "storybook": "ladle serve",
     "test": "vitest"
   },
   "dependencies": {
@@ -63,19 +64,8 @@
     "@kadena-dev/heft-rig": "workspace:*",
     "@kadena-dev/lint-package": "workspace:*",
     "@kadena-dev/markdown": "workspace:*",
+    "@ladle/react": "^3.2.2",
     "@rushstack/eslint-config": "~3.3.0",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-controls": "^7.4.0",
-    "@storybook/addon-docs": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addons": "^7.4.0",
-    "@storybook/csf": "~0.1.1",
-    "@storybook/docs-mdx": "~0.1.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@storybook/theming": "^7.4.0",
     "@testing-library/jest-dom": "~5.17.0",
     "@testing-library/react": "~14.0.0",
     "@types/lodash.mapvalues": "^4.6.7",
@@ -87,25 +77,24 @@
     "@vanilla-extract/jest-transform": "1.1.1",
     "@vanilla-extract/vite-plugin": "^3.9.0",
     "@vanilla-extract/webpack-plugin": "2.2.0",
+    "@vitejs/plugin-react": "^4.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "chromatic": "6.20.0",
     "copyfiles": "2.4.1",
     "csstype": "^3.1.2",
     "eslint": "^8.45.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "~2.27.5",
-    "eslint-plugin-storybook": "~0.6.13",
     "mini-css-extract-plugin": "2.7.6",
     "prettier": "~3.0.3",
     "prop-types": "^15.8.1",
     "rimraf": "~5.0.1",
-    "storybook": "^7.4.0",
-    "storybook-dark-mode": "^3.0.0",
     "tsc-alias": "~1.8.7",
     "typescript": "5.2.2",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.6",
     "vitest-dom": "^0.1.1",
-    "webpack": "~5.88.2"
+    "webpack": "~5.88.2",
+    "lost-pixel": "3.8.0"
   }
 }

packages/libs/react-ui/src/components/Button/Button.stories.tsx

@@ -1,18 +1,13 @@
 import { SystemIcon } from '@components/Icon';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, Story, StoryDefault } from '@ladle/react';
 import { withCenteredStory } from '@utils/withCenteredStory';
 import React from 'react';
 import type { IButtonProps } from './Button';
 import { Button } from './Button';
 import { colorVariants, typeVariants } from './Button.css';
 
-const meta: Meta<
-  {
-    text: string;
-  } & IButtonProps
-> = {
+const meta: StoryDefault = {
   title: 'Components/Button',
-  component: Button,
   decorators: [withCenteredStory],
   parameters: {
     controls: {
@@ -156,73 +151,65 @@ const meta: Meta<
         defaultValue: { summary: false },
       },
     },
-    asChild: {
-      description:
-        'Allow users to pass on styles, icons, and additional props to the child component. For example when using next/link in Next.js.',
-    },
+    // asChild: {
+    //   description:
+    //     'Allow users to pass on styles, icons, and additional props to the child component. For example when using next/link in Next.js.',
+    // },
   },
 };
 
-type Story = StoryObj<
-  {
-    text: string;
-  } & IButtonProps
->;
+export const Dynamic: Story<IButtonProps & { text: string }> = ({
+  active,
+  as,
+  color = 'primary',
+  disabled,
+  href,
+  icon,
+  iconAlign = 'right',
+  loading,
+  onClick,
+  target,
+  text,
+  title,
+  variant = 'default',
+}) => {
+  if (loading) {
+    icon = 'Loading';
+  }
 
-export const Dynamic: Story = {
-  name: 'Button',
-  args: {
-    active: false,
-    as: 'button',
-    color: 'primary',
-    disabled: false,
-    href: 'https://kadena.io',
-    icon: undefined,
-    iconAlign: 'right',
-    loading: false,
-    target: '_self',
-    text: 'Click me',
-    title: 'test title',
-    variant: 'default',
-  },
-  render: ({
-    active,
-    as,
-    color = 'primary',
-    disabled,
-    href,
-    icon,
-    iconAlign = 'right',
-    loading,
-    onClick,
-    target,
-    text,
-    title,
-    variant = 'default',
-  }) => {
-    if (loading) {
-      icon = 'Loading';
-    }
+  return (
+    <Button
+      active={active}
+      as={as}
+      color={color}
+      disabled={disabled}
+      href={href}
+      icon={icon}
+      iconAlign={iconAlign}
+      loading={loading}
+      onClick={onClick}
+      target={target}
+      title={title}
+      variant={variant}
+    >
+      {text}
+    </Button>
+  );
+};
 
-    return (
-      <Button
-        active={active}
-        as={as}
-        color={color}
-        disabled={disabled}
-        href={href}
-        icon={icon}
-        iconAlign={iconAlign}
-        loading={loading}
-        onClick={onClick}
-        target={target}
-        title={title}
-        variant={variant}
-      >
-        {text}
-      </Button>
-    );
-  },
+Dynamic.args = {
+  active: false,
+  as: 'button',
+  color: 'primary',
+  disabled: false,
+  href: 'https://kadena.io',
+  icon: undefined,
+  iconAlign: 'right',
+  loading: false,
+  target: '_self',
+  text: 'Click me',
+  title: 'test title',
+  variant: 'default',
 };
 
 export default meta;

packages/libs/react-ui/src/components/TrackerCard/TrackerCard.stories.tsx

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Story, StoryDefault } from '@ladle/react';
 import React from 'react';
 import { ProductIcon } from '../Icon';
 import type { ILabelValue, ITrackerCardProps } from './TrackerCard';
 import { TrackerCard } from './TrackerCard';
 import { layoutVariant } from './TrackerCard.css';
 
-const meta: Meta<{ icon: keyof typeof ProductIcon } & ITrackerCardProps> = {
+const meta: StoryDefault = {
   title: 'Content/TrackerCard',
   parameters: {
     docs: {
@@ -22,11 +22,11 @@ const meta: Meta<{ icon: keyof typeof ProductIcon } & ITrackerCardProps> = {
         type: 'select',
       },
     },
-    labelValues: {
-      control: {
-        type: 'object',
-      },
-    },
+    // labelValues: {
+    //   control: {
+    //     type: 'object',
+    //   },
+    // },
     helperText: {
       control: {
         type: 'text',
@@ -52,8 +52,6 @@ const meta: Meta<{ icon: keyof typeof ProductIcon } & ITrackerCardProps> = {
 
 export default meta;
 
-type Story = StoryObj<{ icon: keyof typeof ProductIcon } & ITrackerCardProps>;
-
 const labelValues: ILabelValue[] = [
   {
     label: 'Account Label',
@@ -70,24 +68,22 @@ const labelValues: ILabelValue[] = [
   },
 ];
 
-export const Primary: Story = {
-  name: 'TrackerCard',
-  args: {
-    labelValues: labelValues,
-    helperText: 'This is a helper text',
-    helperTextType: 'mild',
-    icon: 'QuickStart',
-    variant: 'vertical',
-  },
-  render: ({ labelValues, helperText, helperTextType, icon, variant }) => {
-    return (
-      <TrackerCard
-        variant={variant}
-        labelValues={labelValues}
-        helperText={helperText}
-        helperTextType={helperTextType}
-        icon={icon}
-      />
-    );
-  },
+export const Primary: Story<
+  ITrackerCardProps & { icon: keyof typeof ProductIcon }
+> = ({ labelValues, helperText, helperTextType, icon, variant }) => (
+  <TrackerCard
+    variant={variant}
+    labelValues={labelValues}
+    helperText={helperText}
+    helperTextType={helperTextType}
+    icon={icon}
+  />
+);
+
+Primary.args = {
+  labelValues: labelValues,
+  helperText: 'This is a helper text',
+  helperTextType: 'mild',
+  icon: 'QuickStart',
+  variant: 'vertical',
 };

packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
-import { MaskedValue, ProductIcon } from '..';
+import { ProductIcon } from '../Icon';
+import { MaskedValue } from '../MaskedValue';
 import {
   CardContainer,
   ContentContainer,