Chore/react pkg re org (#82)

* chore: re-organize react package folder structure. Keep components in components, keep stories in stories.

* fix: remove duplicate eslint package in react-components package and fix eslint config in root package.json

* chore: add typescript to the react-components package

* feat: add first pass of typescript configs and settings

* fix: remove prop-types package and run npm audit fix

* fix: npm audit for babel vulnerability

package.json

@@ -44,6 +44,9 @@
   "devDependencies": {
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.3",
     "stylelint": "^14.16.1",
@@ -56,18 +59,35 @@
       "browser": true,
       "es2021": true
     },
+    "plugins": [
+      "react",
+      "react-refresh"
+    ],
     "extends": [
       "eslint:recommended",
-      "prettier"
+      "prettier",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:react/jsx-runtime"
     ],
+    "ignorePatterns": ["dist"],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+  },
     "overrides": [],
-    "requireConfigFile": false,
-    "rules": {}
+    "rules": {
+      "semi": ["error", "always"],
+      "quotes": ["error", "single"],
+      "react-refresh/only-export-components": "warn"
+    }
   },
   "prettier": {
     "trailingComma": "es5",
     "tabWidth": 2,
-    "singleQuote": true
+    "singleQuote": true,
+    "max_line_length": 120
   },
   "stylelint": {
     "extends": [

packages/react-components/package.json

@@ -10,12 +10,17 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/main.d.ts"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6007",
@@ -39,12 +44,9 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "prop-types": "^15.8.1",
     "storybook": "^7.2.0",
-    "vite": "^4.4.5"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5",
+    "vite-plugin-dts": "^3.6.0"
   }
 }

packages/react-components/src/components/Badge.tsx

@@ -0,0 +1,5 @@
+interface BadgeProps {
+  label: string | number
+};
+
+export const Badge = ({ label }: BadgeProps) => <div className="cbp-badge">{label}</div>;

packages/react-components/src/components/Button.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  attributes?: object,
+  'aria-label'?: string,
+  children: ReactNode,
+  disabled?: boolean,
+};
+
+export const Button = ({ attributes, children, 'aria-label': ariaLabel, disabled, }: ButtonProps) => {
+  return (
+    <button
+      className="cbp-btn cbp-btn__primary"
+      aria-label={ariaLabel}
+      disabled={disabled}
+      {...attributes}
+    >
+      {children}
+    </button>
+  );
+};

packages/react-components/src/main.ts

@@ -0,0 +1,4 @@
+import '@cbpds/vanilla/dist/style.css';
+
+export { Badge } from './components/Badge';
+export { Button } from './components/Button';

packages/react-components/src/components/Badge/Badge.stories.js → packages/react-components/src/stories/Badge.stories.js

@@ -1,4 +1,4 @@
-import { default as BadgeComponent } from '.';
+import { Badge as BadgeComponent } from '../components/Badge';
 
 export default {
   title: 'Components/Badges, Chips, and Tags',

packages/react-components/src/components/Button/Button.stories.js → packages/react-components/src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import Button from ".";
+import { Button } from "../components/Button";
 
 export default {
   title: 'Components/Button',

packages/react-components/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "emitDeclarationOnly": true,
+    "outDir": "./dist/types",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["src/stories/**/*"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/react-components/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/react-components/vite.config.js → packages/react-components/vite.config.ts

@@ -1,14 +1,18 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    dts({rollupTypes: true})
+  ],
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, 'src/main.js'),
+      entry: resolve(__dirname, 'src/main.ts'),
       name: 'MyLib',
       // the proper extensions will be added
       fileName: 'index',
@@ -21,9 +25,9 @@ export default defineConfig({
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          react: 'React'
+          react: 'React',
         },
       },
     },
   },
-})
+});