diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..0824c43 --- /dev/null +++ b/.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" + } +} diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index 1fed445..0000000 --- a/.flowconfig +++ /dev/null @@ -1,11 +0,0 @@ -[ignore] - -[include] - -[libs] - -[lints] - -[options] - -[strict] diff --git a/.prettierrc.json b/.prettierrc.json index 647bc24..5f172cc 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,6 +3,7 @@ "quoteProps": "preserve", "jsxSingleQuote": true, "bracketSpacing": true, - "trailingComma": "es5", - "embeddedLanguageFormatting": "off" + "trailingComma": "all", + "embeddedLanguageFormatting": "off", + "tabWidth": 2, } diff --git a/README.md b/README.md index 21a994c..fef1022 100644 --- a/README.md +++ b/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 diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 7da0587..0000000 --- a/babel.config.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = function(api) { - api.cache(true); - - const presets = ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]; - - return { - presets, - } -} \ No newline at end of file diff --git a/craco.config.js b/craco.config.js deleted file mode 100644 index 1d1894c..0000000 --- a/craco.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - style: { - postcss: { - plugins: [ - require('tailwindcss'), - require('autoprefixer'), - ], - }, - }, -} diff --git a/package.json b/package.json index 7513a3a..e2d29b9 100644 --- a/package.json +++ b/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": [] } diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 34b1c5e..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: [ - require("tailwindcss"), - require("autoprefixer"), - ], -}; \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/assets/ArrowIcon.jsx b/src/components/assets/ArrowIcon.jsx index 8988adc..fbca548 100644 --- a/src/components/assets/ArrowIcon.jsx +++ b/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; diff --git a/src/components/assets/CartIcon.jsx b/src/components/assets/CartIcon.jsx index 80e8a92..6564813 100644 --- a/src/components/assets/CartIcon.jsx +++ b/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; diff --git a/src/components/assets/ChainIcon.jsx b/src/components/assets/ChainIcon.jsx index 3ad0ce0..cf2d95c 100644 --- a/src/components/assets/ChainIcon.jsx +++ b/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; diff --git a/src/components/assets/DiscordIcon.jsx b/src/components/assets/DiscordIcon.jsx index 6beda12..b807bfe 100644 --- a/src/components/assets/DiscordIcon.jsx +++ b/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; diff --git a/src/components/assets/DoubleQuotesIcon.jsx b/src/components/assets/DoubleQuotesIcon.jsx index b31c2b4..9e1fdaa 100644 --- a/src/components/assets/DoubleQuotesIcon.jsx +++ b/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; diff --git a/src/components/assets/FacebookIcon.jsx b/src/components/assets/FacebookIcon.jsx index d77d2e4..965d7da 100644 --- a/src/components/assets/FacebookIcon.jsx +++ b/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; diff --git a/src/components/assets/InstagramIcon.jsx b/src/components/assets/InstagramIcon.jsx index 12b6033..76cf7a6 100644 --- a/src/components/assets/InstagramIcon.jsx +++ b/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; diff --git a/src/components/assets/TwitterIcon.jsx b/src/components/assets/TwitterIcon.jsx index 002f739..91171d4 100644 --- a/src/components/assets/TwitterIcon.jsx +++ b/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; diff --git a/src/components/assets/YoutubeIcon.jsx b/src/components/assets/YoutubeIcon.jsx index f4f7c10..66b0450 100644 --- a/src/components/assets/YoutubeIcon.jsx +++ b/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; diff --git a/src/components/atoms/AddToCartButton.jsx b/src/components/atoms/AddToCartButton.jsx index 5b52765..ebee3bd 100644 --- a/src/components/atoms/AddToCartButton.jsx +++ b/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; diff --git a/src/components/atoms/AddToCartButton.stories.jsx b/src/components/atoms/AddToCartButton.stories.jsx index d827999..7476e17 100644 --- a/src/components/atoms/AddToCartButton.stories.jsx +++ b/src/components/atoms/AddToCartButton.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import AddToCartButton from './AddToCartButton'; export default { diff --git a/src/components/atoms/CartButton.jsx b/src/components/atoms/CartButton.jsx index a7cd256..de966bb 100644 --- a/src/components/atoms/CartButton.jsx +++ b/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` diff --git a/src/components/atoms/CartButton.stories.jsx b/src/components/atoms/CartButton.stories.jsx index 8f776c9..e023ae2 100644 --- a/src/components/atoms/CartButton.stories.jsx +++ b/src/components/atoms/CartButton.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import CartButton from './CartButton'; export default { diff --git a/src/components/atoms/SocialButton.jsx b/src/components/atoms/SocialButton.jsx index 4ff8d9b..20c6840 100644 --- a/src/components/atoms/SocialButton.jsx +++ b/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; diff --git a/src/components/atoms/SocialButton.stories.jsx b/src/components/atoms/SocialButton.stories.jsx index ac9e9df..00b6071 100644 --- a/src/components/atoms/SocialButton.stories.jsx +++ b/src/components/atoms/SocialButton.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import SocialButton from './SocialButton'; export default { diff --git a/src/components/molecules/Carousel.jsx b/src/components/molecules/Carousel.jsx index 63fd718..a43f8dd 100644 --- a/src/components/molecules/Carousel.jsx +++ b/src/components/molecules/Carousel.jsx @@ -1,7 +1,7 @@ -import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import React from 'react'; import Slider from 'react-slick'; +import styled from 'styled-components'; // TODO: // copy css from these 2 files and paste them here. diff --git a/src/components/molecules/Carousel.stories.jsx b/src/components/molecules/Carousel.stories.jsx index 74405a5..d8d2828 100644 --- a/src/components/molecules/Carousel.stories.jsx +++ b/src/components/molecules/Carousel.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import Carousel from './Carousel'; export default { @@ -12,9 +13,9 @@ export const Primary = Template.bind({}); Primary.args = { children: [ -
, -
, -
, +
, +
, +
, ], arrows: false, autoplay: false, diff --git a/src/components/molecules/ImageGalleryWithThumbnails.jsx b/src/components/molecules/ImageGalleryWithThumbnails.jsx index 441821f..49fe70d 100644 --- a/src/components/molecules/ImageGalleryWithThumbnails.jsx +++ b/src/components/molecules/ImageGalleryWithThumbnails.jsx @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; import PropTypes from 'prop-types'; +import React, { useState } from 'react'; import styled from 'styled-components'; + import { imageType } from '../../customPropTypes/customPropTypes'; const Container = styled.div` diff --git a/src/components/molecules/ImageGalleryWithThumbnails.stories.jsx b/src/components/molecules/ImageGalleryWithThumbnails.stories.jsx index e43f1cd..425144a 100644 --- a/src/components/molecules/ImageGalleryWithThumbnails.stories.jsx +++ b/src/components/molecules/ImageGalleryWithThumbnails.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import ImageGalleryWithThumbnails from './ImageGalleryWithThumbnails'; export default { diff --git a/src/components/molecules/NumberInputWithCircleActionButtons.jsx b/src/components/molecules/NumberInputWithCircleActionButtons.jsx index e90dd93..c4cf536 100644 --- a/src/components/molecules/NumberInputWithCircleActionButtons.jsx +++ b/src/components/molecules/NumberInputWithCircleActionButtons.jsx @@ -1,5 +1,5 @@ -import React from 'react'; import PropTypes from 'prop-types'; +import React from 'react'; import styled from 'styled-components'; const Container = styled.div` diff --git a/src/components/molecules/NumberInputWithCircleActionButtons.stories.jsx b/src/components/molecules/NumberInputWithCircleActionButtons.stories.jsx index b1bf37e..da8847b 100644 --- a/src/components/molecules/NumberInputWithCircleActionButtons.stories.jsx +++ b/src/components/molecules/NumberInputWithCircleActionButtons.stories.jsx @@ -1,4 +1,5 @@ import React from 'react'; + import NumberInputWithCircleActionButtons from './NumberInputWithCircleActionButtons'; export default { diff --git a/src/components/molecules/SocialButtons.jsx b/src/components/molecules/SocialButtons.jsx index 0f05f3e..f46c94e 100644 --- a/src/components/molecules/SocialButtons.jsx +++ b/src/components/molecules/SocialButtons.jsx @@ -1,9 +1,10 @@ -import React from 'react'; import PropTypes from 'prop-types'; +import React from 'react'; import styled from 'styled-components'; -import SocialButton, { socialTypes } from '../atoms/SocialButton'; -import { StyledButton } from '../assets/customStyledComponents'; + import { textType } from '../../customPropTypes/customPropTypes'; +import { StyledButton } from '../assets/customStyledComponents'; +import SocialButton, { socialTypes } from '../atoms/SocialButton'; const Container = styled.div` display: flex; @@ -56,7 +57,7 @@ const SocialButtons = (props) => { { socialMedia?.map((social) => ( -