chore: add lib-react example

Author: chenjiahan

examples/lib-react/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@examples/lib-react",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rs lib",
+    "dev": "rs lib -w",
+    "lint": "rs lint",
+    "test": "rs test",
+    "test:watch": "rs test -w"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "catalog:",
+    "@rstest/adapter-rslib": "catalog:",
+    "@testing-library/dom": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "happy-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "rstack": "workspace:*",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

examples/lib-react/rstack.config.ts

@@ -0,0 +1,31 @@
+import { define } from 'rstack';
+
+define.lib(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+  return {
+    source: {
+      entry: {
+        index: ['./src/**'],
+      },
+    },
+    lib: [{ bundle: false, dts: true }],
+    output: {
+      target: 'web',
+    },
+    plugins: [pluginReact()],
+  };
+});
+
+define.test({
+  setupFiles: ['./tests/rstest.setup.ts'],
+});
+
+define.lint(async () => {
+  const { js, ts, reactPlugin, reactHooksPlugin } = await import('rstack/lint');
+  return [
+    js.configs.recommended,
+    ts.configs.recommended,
+    reactPlugin.configs.recommended,
+    reactHooksPlugin.configs.recommended,
+  ];
+});

examples/lib-react/src/Button.tsx

@@ -0,0 +1,46 @@
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Whether the button is primary
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * Background color of the button
+   */
+  backgroundColor?: string;
+  /**
+   * Size of Button
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Label of the button
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['demo-button', `demo-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

examples/lib-react/src/button.css

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

examples/lib-react/src/index.tsx

@@ -0,0 +1 @@
+export { Button } from './Button';

examples/lib-react/tests/index.test.tsx

@@ -0,0 +1,11 @@
+import { expect, test } from 'rstack/test';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../src/Button';
+
+test('The button should have correct background color', async () => {
+  render(<Button backgroundColor="#ccc" label="Demo Button" />);
+  const button = screen.getByText('Demo Button');
+  expect(button).toHaveStyle({
+    backgroundColor: '#ccc',
+  });
+});

examples/lib-react/tests/rstest.setup.ts

@@ -0,0 +1,4 @@
+import { expect } from 'rstack/test';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);

examples/lib-react/tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "types": ["@testing-library/jest-dom"]
+  },
+  "include": ["./"]
+}

examples/lib-react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2022"],
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "types": ["rstack/types", "node"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}