feat: add react template support

hunterliu1003 · Jul 30, 2022 · 3a39bf4 · 3a39bf4
1 parent a9d8dbe
commit 3a39bf4
Show file tree

Hide file tree

Showing 18 changed files with 300 additions and 0 deletions.
diff --git a/template-react/.gitignore b/template-react/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+coverage
+dist
+dist-ssr
+docs
+.vite-ssg-dist
+.vite-ssg-temp
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.log
diff --git a/template-react/.npmignore b/template-react/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+.cache
+dist
+docs
diff --git a/template-react/.npmrc b/template-react/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/template-react/.release-it.json b/template-react/.release-it.json
@@ -0,0 +1,15 @@
+{
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "publish": true,
+    "skipChecks": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "infile": "CHANGELOG.md",
+      "preset": "angular"
+    }
+  }
+}
diff --git a/template-react/.storybook/main.cjs b/template-react/.storybook/main.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  "features": {
+    "storyStoreV7": true
+  }
+}
diff --git a/template-react/.storybook/preview-head.html b/template-react/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/template-react/.storybook/preview.cjs b/template-react/.storybook/preview.cjs
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/template-react/README.md b/template-react/README.md
@@ -0,0 +1,42 @@
+# vite-react-storybook-lib-starter
+
+A published-ready template for Vue 3 components and composable functions library.
+
+- react
+- vite
+- vitest
+- storybook
+
+## Install
+
+Also feel free to use pnpm
+
+```bash
+yarn
+# or
+npm i ----legacy-peer-deps 
+```
+
+## Develop
+
+```bash
+yarn dev
+# or
+npm i ----legacy-peer-deps 
+```
+
+## Build
+
+```bash
+yarn build
+# or
+npm run build
+```
+
+## Publish
+
+```bash
+yarn release
+# or
+npm run release
+```
diff --git a/template-react/index.html b/template-react/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/template-react/package.json b/template-react/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "react-storybook-demo-component",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "source": "src/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:storybook": "cross-env NODE_OPTIONS='--openssl-legacy-provider' build-storybook",
+    "coverage": "vitest run --coverage",
+    "dev": "cross-env NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
+    "preview": "vite preview",
+    "release": "release-it",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.3.0",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.0",
+    "babel-loader": "^8.2.5",
+    "cross-env": "^7.0.3",
+    "jsdom": "^20.0.0",
+    "release-it": "^15.2.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.3",
+    "vitest": "^0.19.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}
diff --git a/template-react/src/DemoComponent.jsx b/template-react/src/DemoComponent.jsx
@@ -0,0 +1,14 @@
+import './demoComponent.css';
+
+function DemoComponent(props) {
+  const { msg } = props;
+
+  return (
+    <div className="demo-component">
+      <h1>{msg}</h1>
+      <h2>DemoComponent</h2>
+    </div>
+  );
+}
+
+export default DemoComponent
diff --git a/template-react/src/DemoComponent.stories.jsx b/template-react/src/DemoComponent.stories.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import DemoComponent from './DemoComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'DemoComponent',
+  component: DemoComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <DemoComponent {...args} />;
+
+export const Basic = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Basic.args = {
+  msg: 'Basic',
+};
+
+export const Second = Template.bind({});
+Second.args = {
+  msg: 'Second'
+};
diff --git a/template-react/src/basic.test.jsx b/template-react/src/basic.test.jsx
@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '../utils/test-utils'
+import DemoComponent from './DemoComponent'
+
+describe('tests', async () => {
+  it('should works', () => {
+    const msg = 'Hello React + Vite'
+    render(<DemoComponent msg={msg} />)
+    expect(screen.getByText(msg)).toBeInTheDocument()
+  })
+})
diff --git a/template-react/src/demoComponent.css b/template-react/src/demoComponent.css
@@ -0,0 +1,4 @@
+.demo-component {
+  color: #666;
+}
+
diff --git a/template-react/src/index.js b/template-react/src/index.js
@@ -0,0 +1 @@
+export * from './DemoComponent';
diff --git a/template-react/test/setup.js b/template-react/test/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
diff --git a/template-react/utils/test-utils.js b/template-react/utils/test-utils.js
@@ -0,0 +1,19 @@
+/* eslint-disable import/export */
+import { cleanup, render } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})
+
+const customRender = (ui, options = {}) =>
+  render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  })
+
+export * from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
+// override render export
+export { customRender as render }
diff --git a/template-react/vite.config.js b/template-react/vite.config.js
@@ -0,0 +1,31 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import pkg from './package.json';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: pkg.name,
+      fileName: format => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './test/setup.js',
+    css: true,
+  },
+})