chore: switch to Storybook and Rollup

Author: ugogo

.gitignore

@@ -6,8 +6,7 @@ node_modules
 
 # builds
 build
-dist
-.rpt2_cache
+lib
 
 # misc
 .DS_Store

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.tsx",
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+export const parameters = {
+  actions: {
+    argTypesRegex: "^on[A-Z].*"
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -1,20 +1,34 @@
 {
   "name": "react-input-verification-code",
   "version": "1.0.2",
-  "description": "A verification code input, autocompletion friendly",
-  "author": "ugogo",
-  "license": "MIT",
+  "description": "A React Verification Code Input, Autocompletion Friendly",
   "repository": "ugogo/react-input-verification-code",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/esm/index.d.ts",
+  "files": [
+    "lib"
+  ],
   "engines": {
     "node": ">=10"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "keywords": [
+    "react",
+    "verify",
+    "verification",
+    "code",
+    "pin-code",
+    "authentication-code",
+    "input",
+    "autocompletion",
+    "otp",
+    "otp-code",
+    "one-time-password"
+  ],
   "release-it": {
     "git": {
       "commitMessage": "v${version}"
@@ -25,11 +39,10 @@
     }
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
-    "start:playground": "npm start --prefix playground",
-    "dev": "run-p start start:playground",
-    "prepare": "run-s build",
+    "prepack": "npm run build",
+    "dev": "npm run storybook",
+    "dev:watch": "rollup -cw",
+    "build": "rollup -c",
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint \"./src/**/*.+(ts|tsx)\"",
@@ -38,26 +51,40 @@
     "release": "npm run test && npm run prepare && dotenv release-it",
     "lint": "eslint . --ext .js,.ts,.tsx",
     "format": "prettier --write {src,playground}/**/*.{ts,tsx}",
-    "format:check": "prettier --check {src,playground}/**/*.{ts,tsx}"
+    "format:check": "prettier --check {src,playground}/**/*.{ts,tsx}",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
-    "styled-components": ">=5.0.0"
+    "react-dom": ">=16.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.19.1",
     "@babel/plugin-transform-react-jsx-self": "^7.16.7",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.0.4",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^29.0.3",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/styled-components": "^5.1.24",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.2.5",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^5.1.0",
     "eslint": "^8.12.0",
@@ -71,29 +98,18 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-standard": "^4.1.0",
     "gh-pages": "^3.2.3",
-    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
     "prettier": "^2.6.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-scripts": "^5.0.0",
     "release-it": "^14.14.0",
-    "typescript": "^4.6.3"
+    "rollup": "^2.79.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.34.0",
+    "typescript": "^4.8.3"
   },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "react",
-    "verify",
-    "verification",
-    "code",
-    "pin-code",
-    "authentication-code",
-    "input",
-    "autocompletion",
-    "otp",
-    "otp-code",
-    "one-time-password"
-  ]
+  "author": "Ugo Onali",
+  "license": "MIT"
 }