feat: add a new package to deploy the storybook preview

.github/workflows/checks.yaml

@@ -1,4 +1,4 @@
-name: Conventional Commits Check
+name: Check PR
 on:
   pull_request:
     types: [opened, reopened, synchronize, labeled]
@@ -37,12 +37,15 @@ jobs:
           VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
           VERCEL_PROJECT_WIDGET_CONFIG: ${{ secrets.VERCEL_PROJECT_WIDGET_CONFIG }} # widget playground
           VERCEL_PROJECT_WIDGET_APP: ${{ secrets.VERCEL_PROJECT_WIDGET_APP }} # widget app
+          VERCEL_PROJECT_STORYBOOK: ${{ secrets.VERCEL_PROJECT_STORYBOOK }} # storybook
+
           ENABLE_PREVIEW_DEPLOY: true
 
     outputs:
       # the structure of output variable is {packageNameWithoutScope}-url like: widget-app-url
       app_url: ${{ steps.deploy.outputs.widget-app-url }}
       playground_url: ${{ steps.deploy.outputs.widget-playground-url }}
+      storybook_url: ${{ steps.deploy.outputs.storybook-url }}
 
   # add job for each project that you want has preview deployment
   app-preview:
@@ -70,3 +73,16 @@ jobs:
         run: |
           echo "url=${{ needs.check.outputs.playground_url }}">> $GITHUB_OUTPUT
           echo "Preview URL: ${{ needs.check.outputs.playground_url}}"
+
+  storybook-preview:
+    runs-on: ubuntu-latest
+    needs: check
+    environment:
+      name: storybook-preview
+      url: ${{ steps.seturl.outputs.url }}
+    steps:
+      - name: Extract Preview URL
+        id: seturl
+        run: |
+          echo "url=${{ needs.check.outputs.storybook_url }}">> $GITHUB_OUTPUT
+          echo "Preview URL: ${{ needs.check.outputs.storybook_url}}"

.github/workflows/deploy.yml

@@ -28,3 +28,4 @@ jobs:
           VERCEL_PROJECT_WALLET_ADAPTER: ${{ secrets.VERCEL_PROJECT_WALLET_ADAPTER }}
           VERCEL_PROJECT_WIDGET_CONFIG: ${{ secrets.VERCEL_PROJECT_WIDGET_CONFIG }}
           VERCEL_PROJECT_WIDGET_APP: ${{ secrets.VERCEL_PROJECT_WIDGET_APP }}
+          VERCEL_PROJECT_STORYBOOK: ${{ secrets.VERCEL_PROJECT_STORYBOOK }}

package.json

@@ -27,7 +27,7 @@
     "build:all": "nx run-many --target=build",
     "build": "nx affected --target=build --parallel=3",
     "build:non-demo": "nx affected --target=build --parallel=3 --exclude=@rango-dev/queue-manager-demo,@rango-dev/wallets-demo,@rango-dev/wallets-adapter-demo,@rango-dev/widget-app,@rango-dev/widget-playground",
-    "dev:ui": "nx run-many --target=storybook --projects=@rango-dev/ui",
+    "dev:ui": "nx run @rango-dev/storybook:dev",
     "dev:wallets": "node ./scripts/dev-watch/command.mjs --project @rango-dev/wallets-demo",
     "dev:queue-manager": "node ./scripts/dev-watch/command.mjs --project @rango-dev/queue-manager-demo",
     "dev:widget:type-checker": "node ./scripts/dev-ts-check/command.mjs --project @rango-dev/widget-app",

scripts/common/github.mjs

@@ -158,6 +158,7 @@ export function checkEnvironments() {
     VERCEL_PROJECT_WALLET_ADAPTER: !!process.env.VERCEL_PROJECT_WALLET_ADAPTER,
     VERCEL_PROJECT_WIDGET_CONFIG: !!process.env.VERCEL_PROJECT_WIDGET_CONFIG,
     VERCEL_PROJECT_WIDGET_APP: !!process.env.VERCEL_PROJECT_WIDGET_APP,
+    VERCEL_PROJECT_STORYBOOK: !!process.env.VERCEL_PROJECT_STORYBOOK,
   };
 
   const features = [

scripts/deploy/config.mjs

@@ -17,4 +17,5 @@ export const VERCEL_PACKAGES = {
     'VERCEL_PROJECT_WIDGET_CONFIG'
   ),
   [`${scope}/widget-app`]: getEnvWithFallback('VERCEL_PROJECT_WIDGET_APP'),
+  [`${scope}/storybook`]: getEnvWithFallback('VERCEL_PROJECT_STORYBOOK'),
 };

widget/storybook/.storybook/main.js

@@ -0,0 +1,26 @@
+import { dirname, join } from 'path';
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    '@chromatic-com/storybook'
+  ],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true, // type-check stories during Storybook build
+  },
+
+  framework: getAbsolutePath("@storybook/react-vite"),
+  docs: {
+    autodocs: true,
+    reactDocgen: false,
+  },
+};
+/**
+ * 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) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

widget/storybook/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+  rel="stylesheet"
+/>

widget/storybook/.storybook/preview.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Decorator } from '@storybook/react';
+import { globalCss } from '@stitches/react';
+import { I18nManager, darkTheme, lightTheme, styled } from '@rango-dev/ui';
+
+// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
+export const parameters = {
+  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+  actions: { argTypesRegex: '^on.*' },
+  docs: {
+    story: {
+      iframeHeight: 300,
+      inline: false,
+    },
+  },
+};
+
+const ThemeBlock = styled('div', {
+  position: 'absolute',
+  top: 0,
+  height: '100vh',
+  bottom: 0,
+  overflow: 'auto',
+  boxSizing: 'border-box',
+  padding: '1rem',
+  backgroundColor: '$background',
+  variants: {
+    position: {
+      left: {
+        left: 0,
+        right: '50vw',
+      },
+      right: {
+        left: '50vw',
+        right: 0,
+      },
+      fill: {
+        left: 0,
+        width: '100vw',
+      },
+    },
+  },
+});
+
+const globalStyles = globalCss({
+  '*': {
+    fontFamily: 'Roboto',
+  },
+});
+
+export const withTheme: Decorator = (StoryFn, context) => {
+  globalStyles();
+  const theme = context.parameters.theme || context.globals.theme;
+  const storyTheme = theme === 'dark' ? darkTheme : lightTheme;
+  switch (theme) {
+    case 'side-by-side':
+      return (
+        <I18nManager language="en">
+          <ThemeBlock position="left" className={lightTheme}>
+            <StoryFn />
+          </ThemeBlock>
+          <ThemeBlock position="right" className={darkTheme}>
+            <StoryFn />
+          </ThemeBlock>
+        </I18nManager>
+      );
+
+    default:
+      return (
+        <I18nManager language="en">
+          <ThemeBlock position="fill" className={storyTheme}>
+            <StoryFn />
+          </ThemeBlock>
+        </I18nManager>
+      );
+  }
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Theme for the components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export const decorators = [withTheme];

widget/storybook/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@rango-dev/storybook",
+  "version": "0.31.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./storybook-static/index.html",
+  "private": true,
+  "files": [
+    "storybook-static",
+    "src"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 3000",
+    "build": "storybook build && cp ./vercel.json ./storybook-static",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
+    "type-checking": "tsc --declaration --emitDeclarationOnly",
+    "clean": "rimraf storybook-static",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8"
+  },
+  "dependencies": {
+    "@rango-dev/ui": "^0.31.0",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addons": "^7.1.1",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/react-webpack5": "^8.0.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "storybook": "^8.0.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

widget/storybook/readme.md

@@ -0,0 +1,3 @@
+# @rango-dev/storybook
+
+Storybook for Rango design system

widget/storybook/src/components/Alert.stories.tsx

@@ -0,0 +1,92 @@
+import type { AlertPropTypes } from '@rango-dev/ui';
+import type { Meta } from '@storybook/react';
+
+import { Alert, Divider } from '@rango-dev/ui';
+import React from 'react';
+
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  args: {
+    type: 'success',
+    variant: 'alarm',
+    title: 'Alert title',
+    titleAlign: 'left',
+    containerStyles: {},
+    action: <></>,
+  },
+  argTypes: {
+    type: {
+      options: ['success', 'warning', 'error', 'info'],
+      control: { type: 'select' },
+      description: 'An necessary parameter designating the kind of alert.',
+    },
+    variant: {
+      name: 'variant',
+      options: ['alarm', 'regular'],
+      control: { type: 'radio' },
+      description: 'The alert UI model is specified by this parameter.',
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    titleAlign: {
+      options: ['left', 'center', 'right'],
+      control: { type: 'select' },
+      description: 'specifies the title alignment',
+    },
+
+    footer: {
+      control: { type: 'text' },
+      description:
+        'You can add a footer to the alert for more information, that it accepts a string or a React node.',
+    },
+  },
+} as Meta<typeof Alert>;
+
+export const Main = (args: AlertPropTypes) => (
+  <div style={{ width: 350 }}>
+    <Alert {...args} footer="This is the test footer." />
+  </div>
+);
+
+export const RegularAlert = (args: AlertPropTypes) => (
+  <div style={{ width: 350 }}>
+    <Alert {...args} variant="regular" />
+  </div>
+);
+
+export const Types = (args: AlertPropTypes) => (
+  <div style={{ width: 350 }}>
+    <Alert
+      {...args}
+      type="success"
+      footer="Success lorem ipsum dolor sit text link amet"
+    />
+    <Divider size={12} />
+    <Alert
+      {...args}
+      type="warning"
+      footer="Warning lorem ipsum dolor sit text link amet"
+    />
+    <Divider size={12} />
+    <Alert
+      {...args}
+      type="error"
+      footer="Error lorem ipsum dolor sit text link amet"
+    />
+    <Divider size={12} />
+    <Alert
+      {...args}
+      type="info"
+      footer="Info lorem ipsum dolor sit text link amet"
+    />
+    <Divider size={12} />
+    <Alert
+      {...args}
+      type="loading"
+      footer="Loading lorem ipsum dolor sit text link amet"
+    />
+    <Divider size={12} />
+  </div>
+);

widget/storybook/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "extends": "../../tsconfig.lib.json",
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "outDir": "storybook-static",
+    "lib": ["dom", "esnext"],
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "baseUrl": ".",
+    "rootDirs": ["./src"],
+
+    // transpile JSX to React.createElement
+    "jsx": "react"
+  }
+}

widget/storybook/vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}