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..2c04556 100644 --- a/generators/component/stateless.js.hbs +++ b/generators/component/stateless.js.hbs @@ -9,7 +9,7 @@ import styled from 'styled-components'; import styles from './{{ properCase name }}.style'; -const {{ properCase name }} = ({ children }) =>
{children}
; +const {{ properCase name }} = ({ children, className }) =>
{children}
; {{ properCase name }}.defaultProps = { inheritedStyles: '', @@ -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..89078f2 100644 --- a/generators/component/story.mdx.hbs +++ b/generators/component/story.mdx.hbs @@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions'; import defaultConfig from './{{ properCase name }}.mock'; -// Import Styled Component to showcase variations + import {{ properCase name }}, { {{ properCase name }}Vanilla } from '.'; # {{ properCase name }} @@ -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/generators/component/test.js.hbs b/generators/component/test.js.hbs index 4fcba77..1b37fde 100644 --- a/generators/component/test.js.hbs +++ b/generators/component/test.js.hbs @@ -1,6 +1,5 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom' import { {{ properCase name }}Vanilla } from '../index'; @@ -11,6 +10,6 @@ describe('<{{ properCase name }} />', () => { }); test('should render with test message', () => { - expect(screen.getByText(testMessage)).toBeInTheDocument() + expect(screen.getByText(testMessage)).toBeTruthy() }); }); 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 68% rename from src/components/atoms/Button/tests/Button.test.js rename to src/components/atoms/Button/__tests__/Button.test.js index 54f2ae6..610fef7 100644 --- a/src/components/atoms/Button/tests/Button.test.js +++ b/src/components/atoms/Button/__tests__/Button.test.js @@ -1,8 +1,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('