Merge pull request #7 from chromaui/test-status-4

Test status 4

.github/workflows/chromatic.yml

@@ -5,30 +5,30 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: install
         run: yarn install --frozen-lockfile
       - name: run chromatic
-        run: npx chromatic --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'
+        run: CHROMATIC_INDEX_URL=https://index.staging-chromatic.com npx chromatic --project-token=chpt_8adcafffd1b8cdc --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --upload-metadata --exit-once-uploaded --auto-accept-changes 'main'
         env:
-          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          CHROMATIC_PROJECT_TOKEN: chpt_8adcafffd1b8cdc
+          CHROMATIC_INDEX_URL: https://index.staging-chromatic.com
           STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
       # - name: Run Chromatic
       #   id: run-chromatic-action
-      #   uses: chromaui/action@v1
+      #   uses: chromaui/action-next@v1
       #   with:
       #     onlyChanged: true
       #     traceChanged: true
       #     diagnostics: true
       #     exitZeroOnChanges: true
       #     exitOnceUploaded: true
       #     autoAcceptChanges: "main"
-      #     skip: "test-chromatic"
       #   env:
       #     CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
       #     STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}

.gitlab-ci.yml

@@ -20,4 +20,3 @@ chromatic_publish:
   stage: test
   script:
     - yarn chromatic
-  interruptible: true

.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const { mergeConfig } = require('vite');
+const turbosnap = require('vite-plugin-turbosnap');
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    if (configType === 'PRODUCTION') {
+      config?.plugins?.push(turbosnap({ rootDir: config.root }));
+    }
+    return mergeConfig(config, {
+      // customize the Vite config here
+      resolve: {
+        alias: { foo: 'bar' },
+      },
+    });
+  },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export default parameters;

package.json

@@ -7,31 +7,33 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic@latest --only-changed --trace-changed 'expanded' --auto-accept-changes main --exit-zero-on-changes --exit-once-uploaded --project-token=b7e18a53b1f3"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=b7e18a53b1f3 --only-changed --debug --trace-changed 'expanded' --exit-zero-on-changes --diagnostics --exit-once-uploaded --auto-accept-changes 'main'"
   },
   "dependencies": {
-    "chromatic": "9.1.1--canary.857.7006504909.0",
+    "chromatic": "10.2.2--canary.884.7480424995.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/react": "^6.5.10",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
+    "@storybook/test": "^7.6.7",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",
     "babel-loader": "^8.2.5",
-    "typescript": "^4.6.4",
+    "storybook": "^7.6.7",
+    "typescript": "^5.3.3",
     "vite": "^3.0.7",
-    "vite-plugin-turbosnap": "^1.0.1"
+    "vite-plugin-turbosnap": "^1.0.1",
+    "vitest": "^1.1.3"
   },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]"

src/stories/Button.stories.tsx

@@ -1,41 +1,44 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+type Story = StoryObj<typeof Button>;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

src/stories/Header.stories.tsx

@@ -1,25 +1,26 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Header } from './Header';
 
-export default {
+const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Header>;
+};
+
+export default meta;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+type Story = StoryObj<typeof Header>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

src/stories/Page.stories.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/test';
 import { Page } from './Page';
 
-export default {
+const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+};
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+export default meta;
 
-export const LoggedOut = Template.bind({});
+type Story = StoryObj<typeof Page>;
+export const LoggedOut: Story = {};
 
-export const LoggedIn = Template.bind({});
+export const LoggedIn: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 LoggedIn.play = async ({ canvasElement }) => {

src/stories/button.css

@@ -9,7 +9,7 @@
 }
 .storybook-button--primary {
   color: white;
-  background-color: blue;
+  background-color: greenyellow;
 }
 .storybook-button--secondary {
   color: #333;

tsconfig.json

@@ -1,21 +1,35 @@
 {
+  "exclude": ["./cypress", "./cypress.config.ts", "./tailwind.config.ts"],
+  "include": [
+    "remix.env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "app/components/Header.tsx",
+    "tailwind.config.js"
+  ],
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "types": ["vitest/globals"],
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
     "allowJs": false,
-    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "useDefineForClassFields": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+
+    "skipLibCheck": true,
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
 }