Merge pull request #2 from zimmerman-team/chore/remove-useless-stories

Chore/remove useless stories

.github/workflows/chromatic.yml

@@ -5,7 +5,29 @@ on: push
 
 # What the action will do
 jobs:
-  test:
+  # Run interaction tests
+  interaction-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          #👇 Sets the version of Node.js to use
+          node-version: 20
+      - name: set yarn version
+        run: yarn set version 1.22.19
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"
+  visual-tests:
     # The operating system it will run on
     runs-on: ubuntu-latest
     # The list of steps that the action will go through
@@ -25,3 +47,4 @@ jobs:
         with:
           #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/ to obtain it
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,8 @@
 
 # dependencies
 /node_modules
+dist
+.env
 /.pnp
 .pnp.js
 

.storybook/main.ts

@@ -9,6 +9,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "@storybook/addon-coverage",
   ],
   framework: {
     name: "@storybook/react-webpack5",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zimmerman-design-system",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -20,14 +20,21 @@
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "watch": "rollup --watch -c --bundleConfigAsCjs",
+    "clean": "rimraf ./dist",
+    "prebuild": "yarn clean",
+    "release": "yarn build && auto shipit",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "test-storybook": "test-storybook",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_9acad79f015c66e"
   },
+  "resolutions": {
+    "strip-ansi": "6.0.0"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -48,7 +55,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.7.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-coverage": "0.0.7",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
@@ -58,10 +72,20 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-webpack5": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
+    "auto": "^11.2.0",
     "chromatic": "^11.7.1",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
+    "rollup": "^4.21.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^8.2.9",
     "webpack": "^5.94.0"
-  }
+  },
+  "description": "A design system library that contains components share across projects in the Zimmerman organisation",
+  "main": "dist/cjs/index.js",
+  "repository": "https://github.com/zimmerman-team/zimmerman-design-system.git",
+  "author": "okorie2 <[email protected]>",
+  "license": "MIT"
 }

src/components/buttons/button.stories.ts

@@ -1,55 +1,36 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn, userEvent, within, expect } from "@storybook/test";
 import Button from "./button";
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#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/configure/story-layout
     layout: "centered",
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
 } satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Filled: Story = {
   args: {
     filled: true,
     label: "Button",
     radius: "rounded",
     backgroundColor: "#000",
     color: "white",
+    onClick: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    expect(canvas.getByRole("button")).toBeInTheDocument();
+    await user.click(canvas.getByRole("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',
-//   },
-// };

src/components/buttons/button.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-interface ButtonProps {
+type ButtonProps = {
   filled: boolean;
   backgroundColor?: string;
   size?: "small" | "medium" | "large";
@@ -15,7 +15,7 @@ interface ButtonProps {
   };
   color?: string;
   radius: "rounded" | "sharp" | "circle";
-}
+};
 
 export default function Button(props: ButtonProps) {
   const { filled, backgroundColor, size, label, onClick, icon, color, radius } =
@@ -25,6 +25,16 @@ export default function Button(props: ButtonProps) {
     sharp: "5px",
     circle: "50%",
   };
+  const buttonWidth = {
+    small: "100px",
+    medium: "200px",
+    large: "300px",
+  };
+  const buttonHeight = {
+    small: "30px",
+    medium: "40px",
+    large: "50px",
+  };
   return (
     <button
       css={css`
@@ -40,12 +50,15 @@ export default function Button(props: ButtonProps) {
         justify-content: center;
         flex-direction: ${icon?.position === "left" ? "row" : "row-reverse"};
         cursor: pointer;
-        color: ${color};
+        color: ${filled ? color : backgroundColor};
         gap: 5px;
+        width: ${buttonWidth[size!]};
+        height: ${buttonHeight[size!]};
         &:hover {
           color: ${color};
         }
       `}
+      onClick={onClick}
     >
       {icon && icon.component} {label}
     </button>

src/components/buttons/index.ts

@@ -0,0 +1 @@
+export * from "./button";

src/index.ts

@@ -0,0 +1 @@
+export * from "./components/buttons";