diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml new file mode 100644 index 0000000..3996a10 --- /dev/null +++ b/.github/workflows/npm-publish.yml @@ -0,0 +1,49 @@ +name: NPM testing and publish package + +on: + push: + branches: [ master ] +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + registry-url: https://registry.npmjs.org/ + - run: npm ci --legacy-peer-deps + - run: npm test + cypress-run: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + # Install NPM dependencies, cache them correctly + # and run all Cypress tests + - name: Cypress install + run: npm install --legacy-peer-deps + - name: Cypress run + uses: cypress-io/github-action@v5 # use the explicit version number + with: + install: false + component: true + publish-npm: + needs: [ build, cypress-run ] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + registry-url: https://registry.npmjs.org/ + - run: npm ci --legacy-peer-deps + - run: npm run build + env: + LIBRARY_NAME: "@aleleba/ro-ut-ui" + EXTERNAL_CSS: "true" + - run: npm publish --access=public + env: + LIBRARY_NAME: "@aleleba/ro-ut-ui" + EXTERNAL_CSS: "true" + NODE_AUTH_TOKEN: ${{secrets.npm_token}} \ No newline at end of file diff --git a/.github/workflows/npm-test.yml b/.github/workflows/npm-test.yml new file mode 100644 index 0000000..c621841 --- /dev/null +++ b/.github/workflows/npm-test.yml @@ -0,0 +1,50 @@ +name: Testing package + +on: + pull_request: + branches: ['*'] +jobs: + test: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + steps: + - uses: actions/checkout@v3 + - name: Use Node.js 16 + uses: actions/setup-node@v3 + with: + node-version: 16 + cache: 'npm' + registry-url: https://registry.npmjs.org/ + - run: npm ci --legacy-peer-deps + - run: npm test + cypress-run: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + # Install NPM dependencies, cache them correctly + # and run all Cypress tests + - name: Cypress install + run: npm install --legacy-peer-deps + - name: Cypress run + uses: cypress-io/github-action@v5 # use the explicit version number + with: + install: false + component: true + test-build-package: + needs: [ test, cypress-run ] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + registry-url: https://registry.npmjs.org/ + - run: npm ci --legacy-peer-deps + - run: npm run build + env: + LIBRARY_NAME: "@aleleba/ro-ut-ui" + EXTERNAL_CSS: "true" \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js index b69c0cd..44d01eb 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -16,7 +16,9 @@ module.exports = { }), config.resolve.alias = { ...config.resolve.alias, - '@components': path.resolve(__dirname, "../src/components/") + '@components': path.resolve(__dirname, "../src/components/"), + '@styles': path.resolve(__dirname, "../src/styles/"), + '@utils': path.resolve(__dirname, "../src/utils/") }; config.resolve.plugins = [new TsconfigPathsPlugin()]; return config; diff --git a/README.md b/README.md index 24c2d2c..6e5dbe2 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@ # Create React Component Library -This project aims to have a starter kit for creating a new React Library with storybook. +This project is a React Library with storybook for a List App. ## Setup -To create a new project run in the terminal: +First clone the repo: ``` -npx @aleleba/create-react-component-library react-library +git clone git@github.com:aleleba/react-list-ui-library.git ``` Then run: ``` -cd react-library +cd react-list-ui-library ``` You will need to create a new .env file at the root of the project for global config. This is an exaple of config. diff --git a/package-lock.json b/package-lock.json index 5f21c74..781ab10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,22 +1,24 @@ { - "name": "@aleleba/create-react-component-library", - "version": "1.2.14", + "name": "react-list-ui-library", + "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "@aleleba/create-react-component-library", - "version": "1.2.14", + "name": "react-list-ui-library", + "version": "0.0.1", "license": "MIT", - "bin": { - "create-react-component-library": "bin/cli.js" - }, "devDependencies": { "@babel/core": "^7.23.0", "@babel/preset-env": "^7.22.20", "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.0", "@babel/register": "^7.22.15", + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-brands-svg-icons": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", "@mdx-js/react": "^2.3.0", "@storybook/addon-actions": "^7.4.6", "@storybook/addon-docs": "^7.4.6", @@ -2892,6 +2894,81 @@ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==", "dev": true }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz", + "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==", + "dev": true, + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz", + "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz", + "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz", + "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz", + "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dev": true, + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", @@ -22689,6 +22766,57 @@ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==", "dev": true }, + "@fortawesome/fontawesome-common-types": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz", + "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==", + "dev": true + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz", + "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==", + "dev": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.2" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz", + "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==", + "dev": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.2" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz", + "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==", + "dev": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.2" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz", + "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==", + "dev": true, + "requires": { + "@fortawesome/fontawesome-common-types": "6.4.2" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dev": true, + "requires": { + "prop-types": "^15.8.1" + } + }, "@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", diff --git a/package.json b/package.json index c685efd..617e3c0 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "react-list-ui-library", - "version": "0.0.1", - "description": "A starter kit for create a React component Library with storybook", - "main": "dist/index.js", + "version": "1.0.0", + "description": "A Library with storybook for a list app", + "main": "dist/index.js", "scripts": { "start": "npm run storybook", "build": "webpack", @@ -18,7 +18,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/aleleba/create-react-component-library.git" + "url": "git+https://github.com/aleleba/react-list-ui-library.git" }, "keywords": [ "create", @@ -39,6 +39,11 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.0", "@babel/register": "^7.22.15", + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-brands-svg-icons": "^6.4.2", + "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", "@mdx-js/react": "^2.3.0", "@storybook/addon-actions": "^7.4.6", "@storybook/addon-docs": "^7.4.6", diff --git a/src/components/Button/AddButton/index.tsx b/src/components/Button/AddButton/index.tsx new file mode 100644 index 0000000..d214d13 --- /dev/null +++ b/src/components/Button/AddButton/index.tsx @@ -0,0 +1,21 @@ +import React, { FC, MouseEventHandler } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faPlus } from '@fortawesome/free-solid-svg-icons'; +import "./style.scss"; + +type TAddButtonProps = { + /** + * Is this the onClick Event of the button. + */ + onClick?: MouseEventHandler | undefined +}; + +const AddButton: FC = ({ onClick }) => { + return ( + + ); +}; + +export { AddButton, TAddButtonProps } \ No newline at end of file diff --git a/src/components/Button/AddButton/style.scss b/src/components/Button/AddButton/style.scss new file mode 100644 index 0000000..66e34f3 --- /dev/null +++ b/src/components/Button/AddButton/style.scss @@ -0,0 +1,25 @@ +.addButton { + border: none; + height: 40px; + width: 40px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + // background-color: #FF6955; + background-color: #71b9f5; + border-radius: 25px; + cursor: pointer; + transition: 0.3s ease-in-out; + font-size: 18px; + + &:hover, + &:focus, + &:active { + // background-color: #bc2d1a; + background-color: #185c94; + } + + svg { + color: #ffffff; + } + +} \ No newline at end of file diff --git a/src/components/Button/Buttons.stories.tsx b/src/components/Button/Buttons.stories.tsx new file mode 100644 index 0000000..dc79477 --- /dev/null +++ b/src/components/Button/Buttons.stories.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { StoryFn, Meta } from '@storybook/react'; +import { Button, ButtonTypes } from '@components'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'List Design System/Button', + component: Button, + argTypes: { + type: { + options: [ + ButtonTypes.ADD, + ButtonTypes.REMOVE + ], + control: { + type: 'select', + labels: { + [ButtonTypes.ADD]: 'ADD', + [ButtonTypes.REMOVE]: 'REMOVE' + } + }, + } + } +} as Meta; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template: StoryFn = (args) => + ); +}; + +export { RemoveButton, TRemoveButtonProps } \ No newline at end of file diff --git a/src/components/Button/RemoveButton/style.scss b/src/components/Button/RemoveButton/style.scss new file mode 100644 index 0000000..df8d39b --- /dev/null +++ b/src/components/Button/RemoveButton/style.scss @@ -0,0 +1,19 @@ +.removeButton { + border: none; + height: 40px; + width: 40px; + background-color: transparent; + cursor: pointer; + transition: 0.3s ease-in-out; + font-size: 18px; + svg { + color: #FF6955; + transition: 0.3s ease-in-out; + &:hover, + &:focus, + &:active { + color: #bc2d1a; + } + } + +} \ No newline at end of file diff --git a/src/components/Button/__tests__/Button.test.cy.tsx b/src/components/Button/__tests__/Button.test.cy.tsx new file mode 100644 index 0000000..990ccbc --- /dev/null +++ b/src/components/Button/__tests__/Button.test.cy.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Button } from '@components'; + +describe('Testing Button Component', () => { + beforeEach(() => { + cy.mount(