Remove esbuild and craco and add vite instead

.eslintrc.cjs

@@ -0,0 +1,33 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "overrides": [
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "prettier",
+    "simple-import-sort"
+  ],
+  "rules": {
+    "camelcase": "error",
+    "no-duplicate-imports": "error",
+    "no-console": "error",
+    "no-alert": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "react/no-unknown-property":"off",
+    "react/no-unescaped-entities ":"off"
+  }
+}

.prettierrc.json

@@ -3,6 +3,7 @@
   "quoteProps": "preserve",
   "jsxSingleQuote": true,
   "bracketSpacing": true,
-  "trailingComma": "es5",
-  "embeddedLanguageFormatting": "off"
+  "trailingComma": "all",
+  "embeddedLanguageFormatting": "off",
+  "tabWidth": 2,
 }

README.md

@@ -26,7 +26,7 @@ yarn build-component type:{componentType} name:{ComponentName}
     - e.g: if current version is `0.2.8`, beta versions would be `0.2.8-beta.0`, where `.0` is the beta version
   - Build `dist` files
   ```sh
-  yarn esbuild
+  yarn build
   ```
   - Run publish command with `beta` tag
   ```sh
@@ -36,7 +36,7 @@ yarn build-component type:{componentType} name:{ComponentName}
   - Remove `-beta.{number}` if it exists in `package.json` `version`
   - Build
   ```sh
-  yarn esbuild
+  yarn build
   ```
   - Publish
   ```sh

package.json

@@ -1,60 +1,52 @@
 {
   "name": "@buttercloud/master-components",
-  "version": "0.4.0-beta-4",
+  "version": "1.0.0-beta-2",
   "homepage": "http://buttercloud.github.io/master-components",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
+  "private": false,
+  "type": "module",
+  "main": "./dist/master-components.umd.js",
+  "module": "./dist/master-components.es.js",
   "source": "src/index.js",
-  "engines": {
-    "node": ">=10"
-  },
   "publishConfig": {
     "registery": "https://registry.npmjs.org/"
   },
-  "repository": "git://github.com/buttercloud/master-components",
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "husky install",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
+    "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
     "clean": "rimraf dist",
-    "compile": "yarn clean && NODE_ENV=production babel src --out-dir dist --ignore **/*.stories.jsx,**/test,**/*.wip.jsx,**/*.test.js",
-    "esbuild": "yarn clean && NODE_ENV=publish node scripts/esbuild.js",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "deploy-storybook": "gh-pages -d storybook-static -m 'Update Storybook Docs'",
-    "start-playground": "cd playground && yarn install && yarn start",
-    "update-playground": "cd playground && yarn upgrade @buttercloud/master-components && cd ..",
-    "flow": "flow",
     "build-component": "ruby scripts/build_component.rb",
     "import-components": "ruby scripts/import_components.rb",
     "publish-beta": "npm publish --tag beta",
     "prettify": "npx prettier --write"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/master-components.es.js",
+      "require": "./dist/master-components.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "dependencies": {
-    "@craco/craco": "^6.3.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "autoprefixer": "^9.8.6",
     "dinero.js": "^1.8.1",
-    "esbuild": "^0.13.12",
-    "postcss": "^7.0.35",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-slick": "^0.28.1",
+    "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^5.2.1",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
-    "web-vitals": "^1.0.1"
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
-    "@babel/preset-flow": "^7.12.13",
-    "@babel/preset-react": "^7.12.13",
     "@storybook/addon-actions": "^6.4.1",
     "@storybook/addon-controls": "^6.4.1",
     "@storybook/addon-essentials": "^6.4.1",
@@ -65,54 +57,32 @@
     "@storybook/node-logger": "^6.4.1",
     "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.4.1",
-    "cross-env": "^7.0.3",
-    "esbuild-plugin-svgr": "^0.0.3",
-    "eslint-config-airbnb": "^18.2.1",
-    "flow-bin": "^0.144.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "gh-pages": "^3.1.0",
-    "prettier": "2.4.1",
-    "react-scripts": "4.0.2",
-    "react-test-renderer": "^17.0.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "airbnb"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "*.stories.jsx"
-        ],
-        "rules": {
-          "import/no-extraneous-dependencies": "off",
-          "react/jsx-props-no-spreading": "off"
-        }
-      },
-      {
-        "files": [
-          "*.jsx"
-        ],
-        "rules": {
-          "prefer-template": "off"
-        }
-      }
-    ]
+    "husky": "^8.0.1",
+    "postcss": "^8.4.18",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hooks": "^1.0.1",
+    "tailwindcss": "^3.2.2",
+    "vite": "^3.2.3",
+    "vite-plugin-linter": "^1.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "peerDependencies": {
+    "react": "16.8.0 || >=17.x",
+    "react-dom": "16.8.0 || >=17.x"
   },
+  "repository": "git://github.com/buttercloud/master-components",
   "files": [
     "dist"
-  ]
+  ],
+  "keywords": []
 }

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/assets/ArrowIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function ArrowIcon(props) {
   const { transform, color } = props;

src/components/assets/CartIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const CartIcon = (props) => {
   const { color, width, height } = props;

src/components/assets/ChainIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function ChainIcon(props) {
   const { color } = props;

src/components/assets/DiscordIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function DiscordIcon(props) {
   const { color } = props;

src/components/assets/DoubleQuotesIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const DoubleQuotesIcon = (props) => {
   const { color } = props;

src/components/assets/FacebookIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const FacebookIcon = (props) => {
   const { color } = props;

src/components/assets/InstagramIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const InstagramIcon = (props) => {
   const { color } = props;

src/components/assets/TwitterIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function TwitterIcon(props) {
   const { color } = props;

src/components/assets/YoutubeIcon.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 function YoutubeIcon(props) {
   const { color } = props;

src/components/atoms/AddToCartButton.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
-import CartIcon from '../assets/CartIcon';
+
 import { textType } from '../../customPropTypes/customPropTypes';
+import CartIcon from '../assets/CartIcon';
 
 const Container = styled.button`
   display: flex;

src/components/atoms/AddToCartButton.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import AddToCartButton from './AddToCartButton';
 
 export default {

src/components/atoms/CartButton.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { css } from 'styled-components';
+
 import CartIcon from '../assets/CartIcon';
 
 const Container = styled.div`

src/components/atoms/CartButton.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import CartButton from './CartButton';
 
 export default {

src/components/atoms/SocialButton.jsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
-import InstagramIcon from '../assets/InstagramIcon';
+
+import ChainIcon from '../assets/ChainIcon';
+import DiscordIcon from '../assets/DiscordIcon';
 import FacebookIcon from '../assets/FacebookIcon';
+import InstagramIcon from '../assets/InstagramIcon';
 import TwitterIcon from '../assets/TwitterIcon';
-import DiscordIcon from '../assets/DiscordIcon';
 import YoutubeIcon from '../assets/YoutubeIcon';
-import ChainIcon from '../assets/ChainIcon';
 
 const Container = styled.div`
   margin: 5px;

src/components/atoms/SocialButton.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import SocialButton from './SocialButton';
 
 export default {