From 8348aa2506151b2d6873078e9767f208f9fb8bc9 Mon Sep 17 00:00:00 2001 From: Achal Jain Date: Mon, 7 Sep 2020 17:41:18 +0530 Subject: [PATCH 1/4] fix: lerna setup --- .storybook/preview.js | 6 +- generators/component/README.md.hbs | 11 + generators/component/index.js | 59 +- generators/component/package.json.hbs | 30 + generators/component/stateless.js.hbs | 2 +- generators/component/story.mdx.hbs | 4 +- lerna.json | 10 + package.json | 7 + src/components/atoms/Button/Button2.story.js | 11 - src/components/atoms/Button/README.md | 11 + .../{tests => __tests__}/Button.test.js | 2 +- src/components/atoms/Button/package.json | 36 + .../atoms/Button/{ => src}/Button.js | 0 .../atoms/Button/{ => src}/Button.mock.js | 0 .../atoms/Button/{ => src}/Button.story.mdx | 0 .../atoms/Button/{ => src}/Button.style.js | 0 .../atoms/Button/{ => src}/index.js | 0 src/components/atoms/Heading/README.md | 11 + .../atoms/Heading/__tests__/Heading.test.js | 16 + src/components/atoms/Heading/package.json | 37 + src/components/atoms/Heading/src/Heading.js | 37 + .../atoms/Heading/src/Heading.mock.js | 3 + .../atoms/Heading/src/Heading.story.mdx | 41 + .../atoms/Heading/src/Heading.style.js | 6 + src/components/atoms/Heading/src/index.js | 2 + src/index.js | 18 - src/styles/README.md | 11 + src/styles/__tests__/styles.test.js | 7 + src/styles/package.json | 30 + src/styles/{ => src}/global.js | 0 src/styles/src/index.js | 7 + src/styles/{ => src}/modernCSSReset.js | 0 src/styles/{ => src}/theme.js | 0 yarn.lock | 4482 +++++++++++------ 34 files changed, 3267 insertions(+), 1630 deletions(-) create mode 100644 generators/component/README.md.hbs create mode 100644 generators/component/package.json.hbs create mode 100644 lerna.json delete mode 100644 src/components/atoms/Button/Button2.story.js create mode 100644 src/components/atoms/Button/README.md rename src/components/atoms/Button/{tests => __tests__}/Button.test.js (89%) create mode 100644 src/components/atoms/Button/package.json rename src/components/atoms/Button/{ => src}/Button.js (100%) rename src/components/atoms/Button/{ => src}/Button.mock.js (100%) rename src/components/atoms/Button/{ => src}/Button.story.mdx (100%) rename src/components/atoms/Button/{ => src}/Button.style.js (100%) rename src/components/atoms/Button/{ => src}/index.js (100%) create mode 100644 src/components/atoms/Heading/README.md create mode 100644 src/components/atoms/Heading/__tests__/Heading.test.js create mode 100644 src/components/atoms/Heading/package.json create mode 100644 src/components/atoms/Heading/src/Heading.js create mode 100644 src/components/atoms/Heading/src/Heading.mock.js create mode 100644 src/components/atoms/Heading/src/Heading.story.mdx create mode 100644 src/components/atoms/Heading/src/Heading.style.js create mode 100644 src/components/atoms/Heading/src/index.js delete mode 100644 src/index.js create mode 100644 src/styles/README.md create mode 100644 src/styles/__tests__/styles.test.js create mode 100644 src/styles/package.json rename src/styles/{ => src}/global.js (100%) create mode 100644 src/styles/src/index.js rename src/styles/{ => src}/modernCSSReset.js (100%) rename src/styles/{ => src}/theme.js (100%) diff --git a/.storybook/preview.js b/.storybook/preview.js index 21afa3d..4946627 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,8 +2,10 @@ import React from 'react' import { addDecorator } from '@storybook/react'; import { ThemeProvider } from 'styled-components'; -import { GlobalStyle } from '../src/styles/global'; -import themeObj from '../src/styles/theme'; +import Styles from '../src/styles/src/'; + +const GlobalStyle = Styles.GlobalStyle +const themeObj = Styles.Theme addDecorator((storyFn) => ( <> diff --git a/generators/component/README.md.hbs b/generators/component/README.md.hbs new file mode 100644 index 0000000..a1981a7 --- /dev/null +++ b/generators/component/README.md.hbs @@ -0,0 +1,11 @@ +# `@react-lib/{{ lowerCase name }}` + +> TODO: description + +## Usage + +``` +const {{ lowerCase name }} = require('@react-lib/{{ lowerCase name }}'); + +// TODO: DEMONSTRATE API +``` diff --git a/generators/component/index.js b/generators/component/index.js index c543dc4..976854d 100644 --- a/generators/component/index.js +++ b/generators/component/index.js @@ -11,13 +11,6 @@ const componentExists = require('../utils/componentExists'); module.exports = { description: 'Add an unconnected component (atoms, molecules)', prompts: [ - { - type: 'list', - name: 'type', - message: 'Select the type of component', - default: 'Stateless Function', - choices: () => ['Stateless Function', 'Stateless Function (WithHooks)', 'HOC'], - }, { type: 'input', name: 'name', @@ -43,60 +36,72 @@ module.exports = { ], actions: data => { // Generate index.js and index.test.js - let componentTemplate; + let componentTemplate = './component/stateless.js.hbs'; - switch (data.type) { - case 'Stateless Function': { - componentTemplate = './component/stateless.js.hbs'; - break; - } - case 'HOC': { - componentTemplate = './component/hoc.js.hbs'; - break; - } - default: { - componentTemplate = './component/statelessHooks.js.hbs'; - } - } + // switch (data.type) { + // case 'Stateless Function': { + // componentTemplate = './component/stateless.js.hbs'; + // break; + // } + // case 'HOC': { + // componentTemplate = './component/hoc.js.hbs'; + // break; + // } + // default: { + // componentTemplate = './component/statelessHooks.js.hbs'; + // } + // } const actions = [ { type: 'add', - path: '../src/components/{{ folder }}/{{properCase name}}/index.js', + path: '../src/components/{{ folder }}/{{properCase name}}/src/index.js', templateFile: './component/index.js.hbs', abortOnFail: true, }, { type: 'add', - path: '../src/components/{{ folder }}/{{properCase name}}/{{properCase name}}.js', + path: '../src/components/{{ folder }}/{{properCase name}}/src/{{properCase name}}.js', templateFile: componentTemplate, abortOnFail: true, }, { type: 'add', path: - '../src/components/{{ folder }}/{{properCase name}}/tests/{{properCase name}}.test.js', + '../src/components/{{ folder }}/{{properCase name}}/__tests__/{{properCase name}}.test.js', templateFile: './component/test.js.hbs', abortOnFail: true, }, { type: 'add', - path: '../src/components/{{ folder }}/{{properCase name}}/{{properCase name}}.story.mdx', + path: '../src/components/{{ folder }}/{{properCase name}}/src/{{properCase name}}.story.mdx', templateFile: './component/story.mdx.hbs', abortOnFail: true, }, { type: 'add', - path: '../src/components/{{ folder }}/{{properCase name}}/{{properCase name}}.mock.js', + path: '../src/components/{{ folder }}/{{properCase name}}/src/{{properCase name}}.mock.js', templateFile: './component/mock.js.hbs', abortOnFail: true, }, { type: 'add', - path: '../src/components/{{ folder }}/{{properCase name}}/{{properCase name}}.style.js', + path: '../src/components/{{ folder }}/{{properCase name}}/src/{{properCase name}}.style.js', templateFile: './component/style.js.hbs', abortOnFail: true, }, + { + type: 'add', + path: '../src/components/{{ folder }}/{{properCase name}}/package.json', + templateFile: './component/package.json.hbs', + abortOnFail: true, + }, + { + type: 'add', + path: '../src/components/{{ folder }}/{{properCase name}}/README.md', + templateFile: './component/README.md.hbs', + abortOnFail: true, + }, ]; return actions; diff --git a/generators/component/package.json.hbs b/generators/component/package.json.hbs new file mode 100644 index 0000000..60bd640 --- /dev/null +++ b/generators/component/package.json.hbs @@ -0,0 +1,30 @@ +{ + "name": "@react-lib/{{ lowerCase name }}", + "version": "1.0.0", + "description": "{{ lowerCase name }}", + "author": "", + "homepage": "https://github.com/vinodloha/react-lib#readme", + "license": "ISC", + "main": "lib/index.js", + "module": "src/index.js", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "lib" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vinodloha/react-lib.git" + }, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/vinodloha/react-lib/issues" + } +} diff --git a/generators/component/stateless.js.hbs b/generators/component/stateless.js.hbs index de189d6..edd54f4 100644 --- a/generators/component/stateless.js.hbs +++ b/generators/component/stateless.js.hbs @@ -17,7 +17,7 @@ const {{ properCase name }} = ({ children }) =>
className: '' }; -Button.propTypes = { +{{ properCase name }}.propTypes = { className: PropTypes.string, children: PropTypes.node.isRequired, inheritedStyles: PropTypes.string, diff --git a/generators/component/story.mdx.hbs b/generators/component/story.mdx.hbs index e292365..3cc3527 100644 --- a/generators/component/story.mdx.hbs +++ b/generators/component/story.mdx.hbs @@ -32,10 +32,8 @@ import {{ properCase name }}, { {{ properCase name }}Vanilla } from '.'; Experiment with this story with Knobs addon in Canvas mode. - - + <{{ properCase name }} {...defaultConfig} variant={select('Variant', ['primary', 'secondary'])}>Test - ### Props 🔧 diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000..47b11b5 --- /dev/null +++ b/lerna.json @@ -0,0 +1,10 @@ +{ + "packages": [ + "src/styles", + "src/atoms/*", + "src/molecules/*" + ], + "npmClient": "yarn", + "useWorkspaces": true, + "version": "independent" +} diff --git a/package.json b/package.json index 84437a3..93aba9f 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,11 @@ "name": "react-lib", "version": "0.1.0", "private": true, + "workspaces": [ + "src/styles", + "src/atoms/*", + "src/molecules/*" + ], "dependencies": { "@testing-library/dom": "^7.24.1", "@testing-library/jest-dom": "^4.2.4", @@ -15,6 +20,7 @@ "styled-components": "^5.2.0" }, "scripts": { + "bootstrap": "lerna bootstrap --use-workspaces", "build": "cross-env BABEL_ENV=production babel src -d dist", "test": "react-scripts test", "generate": "plop --plopfile generators/index.js", @@ -57,6 +63,7 @@ "@storybook/react": "^6.0.21", "babel-loader": "^8.1.0", "cross-env": "^7.0.2", + "lerna": "^3.22.1", "plop": "^2.7.4", "prettier": "^2.1.1", "react-is": "^16.13.1" diff --git a/src/components/atoms/Button/Button2.story.js b/src/components/atoms/Button/Button2.story.js deleted file mode 100644 index 919a4e9..0000000 --- a/src/components/atoms/Button/Button2.story.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { withKnobs } from '@storybook/addon-knobs'; -import Button from '.' - -export const Button2 = () => ( - -); - -Button2.story = { - decorators: [withKnobs], -}; diff --git a/src/components/atoms/Button/README.md b/src/components/atoms/Button/README.md new file mode 100644 index 0000000..4a21d46 --- /dev/null +++ b/src/components/atoms/Button/README.md @@ -0,0 +1,11 @@ +# `@react-lib/button` + +> TODO: description + +## Usage + +``` +const button = require('@react-lib/button'); + +// TODO: DEMONSTRATE API +``` diff --git a/src/components/atoms/Button/tests/Button.test.js b/src/components/atoms/Button/__tests__/Button.test.js similarity index 89% rename from src/components/atoms/Button/tests/Button.test.js rename to src/components/atoms/Button/__tests__/Button.test.js index 54f2ae6..67a7902 100644 --- a/src/components/atoms/Button/tests/Button.test.js +++ b/src/components/atoms/Button/__tests__/Button.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom' -import { ButtonVanilla } from '../index'; +import { ButtonVanilla } from '../src/index'; describe('