add storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,30 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# 👇 Workflow event to trigger execution
+on:
+  push:
+    branches-ignore:
+      - 'production'
+      - 'staging'
+
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: tooling/storybook

.stylelintrc.json

@@ -7,7 +7,7 @@
     "custom-property-pattern": "^(BV|BC)-[a-z0-9A-Z\\-\\_]+$",
     "length-zero-no-unit": [true, { "ignore": ["custom-properties"] }],
     "selector-class-pattern": [
-      "^(B-core-editor|B-core-extension|B-core-theme|B-editor|B-editor-container|B-inline-backlink|B-inline-emoji|B-note-tags|B-search-notes|B-style|B-ui-components|B-ui-dhancha|BU)_[a-z0-9A-Z\\-]+$",
+      "^(B-activitybar|B-core-editor|B-core-extension|B-core-theme|B-editor|B-editor-container|B-inline-backlink|B-inline-emoji|B-note-tags|B-search-notes|B-style|B-ui-components|B-ui-dhancha|BU)_[a-z0-9A-Z\\-]+$",
       {
         "message": "Selector should start with the package name followed by an underscore and then the selector name containing only lowercase letters, numbers and hyphens."
       }

app/activitybar/Button.stories.ts

@@ -0,0 +1,59 @@
+import type { StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    primary: true,
+    label: 'Delete now',
+    backgroundColor: 'red',
+  },
+};

app/activitybar/Button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
+
+  return (
+    <button
+      type="button"
+      className="mr-24 bg-colorSecondarySolid"
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

index.html

@@ -21,7 +21,6 @@
     />
     <%- sentry %>
     <!--  -->
-
     <link rel="stylesheet" href="/core-theme.css" />
     <title>Bangle App</title>
   </head>

tooling/storybook/.storybook/main.ts

@@ -0,0 +1,60 @@
+import path from 'path';
+import Unocss from '@unocss/vite';
+import { mergeConfig } from 'vite';
+import getEnvVars from '@bangle.io/env-vars';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+import { ALL_TOP_LEVEL_DIRS } from '@bangle.io/yarn-workspace-helpers';
+
+const config: StorybookConfig = {
+  stories: [
+    ...ALL_TOP_LEVEL_DIRS.map(
+      (dir) => `../../../${dir}/**/*.stories.@(js|jsx|ts|tsx)`,
+    ),
+  ],
+  addons: [
+    path.dirname(
+      require.resolve(path.join('@storybook/addon-links', 'package.json')),
+    ),
+    path.dirname(
+      require.resolve(path.join('@storybook/addon-essentials', 'package.json')),
+    ),
+    path.dirname(
+      require.resolve(path.join('@storybook/addon-onboarding', 'package.json')),
+    ),
+    path.dirname(
+      require.resolve(
+        path.join('@storybook/addon-interactions', 'package.json'),
+      ),
+    ),
+  ],
+  framework: {
+    name: path.dirname(
+      require.resolve(path.join('@storybook/react-vite', 'package.json')),
+    ),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
+  async viteFinal(config, { configType }) {
+    const isProduction = configType === 'PRODUCTION';
+
+    const envVars = await getEnvVars({
+      isProduction: isProduction,
+      isVite: true,
+      isStorybook: true,
+    });
+    return mergeConfig(config, {
+      plugins: [Unocss()],
+      define: {
+        ...envVars.appEnvs,
+      },
+    });
+  },
+};
+export default config;