feat: add main cof

maxgfr · maxgfr · commit 49811a206578 · 2022-11-08T15:48:32.000+01:00
diff --git a/.env.example b/.env.example
diff --git a/.env.test b/.env.test
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,7 +10,10 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "prettier",
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "rules": {}
 }
diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,6 @@ build/
 
 # .swc
 .swc/
+
+# storybook
+storybook-static/
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,12 @@
+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"
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/.swcrc b/.swcrc
@@ -1,12 +1,18 @@
 {
   "jsc": {
     "parser": {
-      "syntax": "typescript"
+      "syntax": "typescript",
+      "tsx": true
     },
     "target": "es2021"
   },
   "module": {
     "type": "commonjs"
   },
+  "transform": {
+    "react": {
+      "runtime": "automatic"
+    }
+  },
   "sourceMaps": true
 }
diff --git a/jest-setup.js b/jest-setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/jest.config.js b/jest.config.js
@@ -3,6 +3,6 @@ module.exports = {
   transform: {
     '^.+\\.(t|j)s$': '@swc/jest',
   },
-  setupFiles: ['dotenv/config'],
   testPathIgnorePatterns: ['/node_modules/', '/build/'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 };
diff --git a/nodemon.json b/nodemon.json
@@ -1,6 +1,6 @@
 {
   "watch": ["src"],
   "ext": "ts,json",
-  "ignore": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+  "ignore": ["src/**/*.spec.{ts,tsx}", "src/**/*.test.{tsx,ts}"],
   "exec": "yarn develop"
 }
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "typescript-swc-starter",
+  "name": "typescript-react-lib-swc",
   "version": "1.0.0",
   "author": "maxgfr",
   "license": "MIT",
-  "description": "A minimalist typescript swc starter",
+  "description": "A minimalist typescript swc starter for react",
   "main": "./build/index.js",
   "repository": {
     "type": "git",
@@ -25,31 +25,52 @@
     "start": "node build/index.js",
     "dev": "nodemon",
     "develop": "node -r @swc-node/register ./src/index.ts",
-    "test": "DOTENV_CONFIG_PATH=.env.test jest",
-    "test:watch": "DOTENV_CONFIG_PATH=.env.test jest --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "clean": "rimraf build",
     "build": "tsc -p tsconfig.build.json",
     "build:watch": "tsc -w -p tsconfig.build.json",
     "build:swc": "swc ./src -d build",
     "build:swc:watch": "swc ./src -d build -w",
     "lint": "eslint ./src --ext .ts",
-    "prettier": "prettier --write './src/**/*.{ts,js,json}'"
+    "prettier": "prettier --write './src/**/*.{ts,js,json}'",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "dotenv": "16.0.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack4": "^6.5.13",
+    "@storybook/manager-webpack4": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
     "@swc-node/register": "1.5.4",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.3.14",
     "@swc/jest": "0.2.23",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "29.2.2",
     "@types/node": "18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@typescript-eslint/eslint-plugin": "5.42.1",
     "@typescript-eslint/parser": "5.42.1",
+    "babel-loader": "^8.3.0",
     "eslint": "8.27.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-jest": "27.1.4",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-storybook": "^0.6.7",
     "jest": "29.3.0",
     "nodemon": "2.0.20",
     "prettier": "2.7.1",
diff --git a/src/HelloWorld.tsx b/src/HelloWorld.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {
+  name: string;
+};
+
+export function HelloWorld(props: Props) {
+  return <h1 data-testid="h1">Hello {props.name}</h1>;
+}
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+export function Input() {
+  const [name, setName] = useState('');
+  return (
+    <div>
+      <h1 data-testid="input-result">Input result : {name}!</h1>
+      <input
+        data-testid="input"
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+    </div>
+  );
+}
diff --git a/src/__tests__/HelloWorld.test.tsx b/src/__tests__/HelloWorld.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { HelloWorld } from '../HelloWorld';
+
+describe('<HelloWorld />', () => {
+  it('should render', () => {
+    expect(render(<HelloWorld name="world" />)).toBeTruthy();
+  });
+
+  it('should render good word', () => {
+    const { getByTestId } = render(<HelloWorld name="monde" />);
+    expect(getByTestId('h1')).toHaveTextContent('Hello monde');
+  });
+});
diff --git a/src/__tests__/Input.test.tsx b/src/__tests__/Input.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Input } from '../Input';
+
+describe('<Input />', () => {
+  it('should render', () => {
+    expect(render(<Input />)).toBeTruthy();
+  });
+
+  test('Input writing', () => {
+    render(<Input />);
+
+    userEvent.type(screen.getByTestId('input'), 'résultat');
+    expect(screen.getAllByTestId('input-result')).toBe(
+      'Input result : résultat!',
+    );
+  });
+});
diff --git a/src/__tests__/env.test.ts b/src/__tests__/env.test.ts
diff --git a/src/hello.ts b/src/hello.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,2 @@
-import 'dotenv/config'; // To use our .env
-import { sayHello } from './hello';
-
-async function main() {
-  sayHello();
-}
-
-main();
+export * from './HelloWorld';
+export * from './Input';
diff --git a/src/stories/HelloWorld.stories.tsx b/src/stories/HelloWorld.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { HelloWorld } from '../HelloWorld';
+
+export default {
+  title: 'HelloWorld',
+  component: HelloWorld,
+} as ComponentMeta<typeof HelloWorld>;
+
+const Template: ComponentStory<typeof HelloWorld> = (args) => (
+  <HelloWorld {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'World',
+};
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Input } from '../Input';
+
+export default {
+  title: 'Input',
+  component: Input,
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = () => <Input />;
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+  "exclude": ["src/**/*.spec.{ts,tsx}", "src/**/*.test.{ts,tsx}"]
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
     /* Projects */
     // "incremental": true,                              /* Enable incremental compilation */
     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
@@ -11,9 +10,13 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    "target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
@@ -24,20 +27,20 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "commonjs" /* Specify what module code is generated. */,
+    "module": "ESNext" /* Specify what module code is generated. */,
     "rootDir": "./src" /* Specify the root folder within your source files. */,
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files */
+    "resolveJsonModule": true /* Enable importing .json files */,
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 
@@ -49,7 +52,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./build" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    "noEmit": true /* Disable emitting files from a compilation. */,
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -67,8 +70,8 @@
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
     "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
@@ -87,7 +90,7 @@
     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
     // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"watch": ["src"],`
`3`	`3`	`"ext": "ts,json",`
`4`		`- "ignore": ["src/*/.spec.ts", "src/*/.test.ts"],`
	`4`	`+ "ignore": ["src/*/.spec.{ts,tsx}", "src/*/.test.{tsx,ts}"],`
`5`	`5`	`"exec": "yarn develop"`
`6`	`6`	`}`