fix: lerna setup

.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) => (
   <>

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
+```

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;

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"
+  }
+}

generators/component/stateless.js.hbs

@@ -9,15 +9,15 @@ import styled from 'styled-components';
 
 import styles from './{{ properCase name }}.style';
 
-const {{ properCase name }} = ({ children }) => <div className={styles.default}>{children}</div>;
+const {{ properCase name }} = ({ children, className }) => <div className={className}>{children}</div>;
 
 {{ properCase name }}.defaultProps = {
   inheritedStyles: '',
   variant: '',
   className: ''
 };
 
-Button.propTypes = {
+{{ properCase name }}.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
   inheritedStyles: PropTypes.string,

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 Styled Component to showcase variation -->
 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.
 
-<Story name="knobs" parameters={ { decorators: [withKnobs] } }>
-  <Story name="Default {{ properCase name }} with knobs">
+<Story name="Default {{ properCase name }} with knobs" parameters={ { decorators: [withKnobs] } }>
    <{{ properCase name }} {...defaultConfig} variant={select('Variant', ['primary', 'secondary'])}>Test</{{ properCase name }}>
-  </Story>
 </Story>
 
 ### Props 🔧

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()
   });
 });

lerna.json

@@ -0,0 +1,10 @@
+{
+  "packages": [
+    "src/styles",
+    "src/atoms/*",
+    "src/molecules/*"
+  ],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "independent"
+}

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"

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
+```

src/components/atoms/Button/tests/Button.test.js → 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('<Button />', () => {
   const testMessage = 'Test Message'
@@ -11,6 +10,6 @@ describe('<Button />', () => {
   });
 
   test('should render with test message', () => {
-    expect(screen.getByText(testMessage)).toBeInTheDocument()
+    expect(screen.getByText(testMessage)).toBeTruthy()
   });
 });

src/components/atoms/Button/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-lib/button",
+  "version": "1.0.0",
+  "description": "Button",
+  "author": "Achal Jain <achal41@gmail.com>",
+  "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"
+  },
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.2.0"
+  }
+}

src/components/atoms/Button/Button.story.mdx → src/components/atoms/Button/src/Button.story.mdx

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import defaultConfig from './Button.mock';
 
+<!-- Import Styled Component to showcase variation -->
 import Button, { ButtonVanilla } from '.';
 
 # Button

src/components/atoms/Heading/README.md

@@ -0,0 +1,11 @@
+# `@react-lib/heading`
+
+> TODO: description
+
+## Usage
+
+```
+const heading = require('@react-lib/heading');
+
+// TODO: DEMONSTRATE API
+```

src/components/atoms/Heading/__tests__/Heading.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { HeadingVanilla } from '../src/index';
+
+describe('<Heading />', () => {
+  const testMessage = 'Test Message'
+  beforeEach(() => {
+    render(<HeadingVanilla>{testMessage}</HeadingVanilla>);
+  });
+
+  test('should render with test message', () => {
+    expect(screen.getByText(testMessage)).toBeTruthy()
+  });
+});