feat: setup vitest browser mode base configurations

Author: noahluftyang

.github/workflows/ci.yaml

@@ -23,6 +23,8 @@ jobs:
         node-version-file: .nvmrc
     - name: Install dependencies
       run: pnpm install
+    - name: Install Playwright Browsers
+      run: pnpx playwright install --with-deps
     - name: Lint
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" "/lint:*/"
     - name: Test

.github/workflows/coverage.yaml

@@ -22,6 +22,8 @@ jobs:
           node-version-file: .nvmrc
       - name: Install dependencies
         run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpx playwright install --with-deps
       - name: Run tests
         run: pnpm run test --coverage
       - name: Upload code coverage

.templates/component/global.d.ts

@@ -20,6 +20,9 @@
     "typecheck": "tsc",
     "prepack": "pnpm run build"
   },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
   "devDependencies": {
     "@storybook/addon-essentials": "catalog:",
     "@storybook/addon-interactions": "catalog:",
@@ -28,16 +31,16 @@
     "@storybook/react": "catalog:",
     "@storybook/react-vite": "catalog:",
     "@storybook/test": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@testing-library/react": "catalog:",
     "@types/react": "^18.3.12",
-    "happy-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
+    "playwright": "catalog:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "catalog:",
     "tsup": "catalog:",
     "typescript": "catalog:",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "catalog:"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -60,6 +63,6 @@
       "./styles.css": "./dist/index.css"
     }
   },
-  "sideEffects": false,
+  "sideEffects": ["*.css"],
   "private": true
 }

.templates/component/package.json

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  border: '1px solid black',
+});

.templates/component/src/Component.css.ts

@@ -1,15 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Component } from './Component';
 
-const meta = {
-  component: Component,
+export default {
   title: 'Components/Component',
+  component: Component,
   parameters: {
     layout: 'centered',
   },
 } satisfies Meta<typeof Component>;
-export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Component>;
 
-export const Basic: Story = {};
+export const Basic: Story = {
+  args: {
+    children: 'children',
+  },
+};

.templates/component/src/Component.stories.tsx

@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { Component } from './Component';
+
+test('should render component.', async () => {
+  const screen = render(<Component>children</Component>);
+
+  await expect.element(screen.getByText('children')).toBeInTheDocument();
+});

.templates/component/src/Component.test.tsx

@@ -1,3 +1,7 @@
-export function Component() {
-  return <div>Component</div>;
+import { clsx as cx } from 'clsx';
+import type { ComponentProps } from 'react';
+import * as styles from './Component.css';
+
+export function Component({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cx(styles.root, className)} {...props} />;
 }

.templates/component/src/Component.tsx

@@ -1,8 +1 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  clean: true,
-  dts: true,
-  format: ['esm', 'cjs'],
-});
+export { default } from '../../tsup.config';

.templates/component/tsup.config.ts

@@ -0,0 +1 @@
+export { default } from '../../vite.config';