@universal-tennis/ui-shared 0.0.1 → 0.0.3

package/.eslintignore

@@ -0,0 +1 @@
+!.storybook

package/.eslintrc.js

@@ -1,80 +1,66 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-    'plugin:storybook/recommended',
-    'plugin:@typescript-eslint/recommended'
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-  ],
-  rules: {
-    'react/prop-types': 0,
-    radix: 0,
-    'no-shadow': 0,
-    'prefer-rest-params': 0,
-    'no-case-declarations': 0,
-    'import/extensions': 0,
-    'react/react-in-jsx-scope': 0,
-    'react/no-children-prop': 0,
-    'import/no-unresolved': 0,
-    'no-use-before-define': 0,
-    'import/prefer-default-export': 0,
-    'react/jsx-filename-extension': 0,
-    'react/no-array-index-key': 0,
-    '@typescript-eslint/no-empty-function': 0,
-    'import/no-named-as-default': 0,
-    'react/jsx-indent': 0,
-    'object-curly-spacing': 0,
-    'react/jsx-props-no-spreading': 0,
-    'no-nested-ternary': 0,
-    'no-plusplus': 0,
-    'consistent-return': 0,
-    'no-param-reassign': 0,
-    'no-await-in-loop': 0,
-    'no-return-await': 0,
-    'import/named': 0,
-    'no-console': 0,
-    'import/no-named-as-default-member': 0,
-    'linebreak-style': 0,
-    'no-unused-vars': 0,
-    'react/no-unstable-nested-components': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'no-extraneous-dependencies': 0,
-    'require-default-props': 0,
-    'comma-dangle': 0,
-    'no-trailing-spaces': 0,
-    'react/require-default-props': 0,
-    '@typescript-eslint/ban-ts-comment': 0,
-    quotes: 0,
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        node: {
-          extensions: [
-            ".js",
-            ".ts"
-          ],
-          moduleDirectory: [
-            "node_modules",
-            "src"
-          ]
-        }
-      }
-    }
-  }
-};
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/prop-types': 0,
+    radix: 0,
+    'no-shadow': 0,
+    'prefer-rest-params': 0,
+    'no-case-declarations': 0,
+    'import/extensions': 0,
+    'react/react-in-jsx-scope': 0,
+    'react/no-children-prop': 0,
+    'import/no-unresolved': 0,
+    'no-use-before-define': 0,
+    'import/prefer-default-export': 0,
+    'react/jsx-filename-extension': 0,
+    'react/no-array-index-key': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    'import/no-named-as-default': 0,
+    'react/jsx-indent': 0,
+    'object-curly-spacing': 0,
+    'react/jsx-props-no-spreading': 0,
+    'no-nested-ternary': 0,
+    'no-plusplus': 0,
+    'consistent-return': 0,
+    'no-param-reassign': 0,
+    'no-await-in-loop': 0,
+    'no-return-await': 0,
+    'import/named': 0,
+    'no-console': 0,
+    'import/no-named-as-default-member': 0,
+    'linebreak-style': 0,
+    'no-unused-vars': 0,
+    'react/no-unstable-nested-components': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'no-extraneous-dependencies': 0,
+    'require-default-props': 0,
+    'comma-dangle': 0,
+    'no-trailing-spaces': 0,
+    'react/require-default-props': 0,
+    '@typescript-eslint/ban-ts-comment': 0,
+    quotes: 0
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        node: {
+          extensions: [".js", ".ts"],
+          moduleDirectory: ["node_modules", "src"]
+        }
+      }
+    }
+  }
+};

package/.storybook/main.js

@@ -1,16 +1,16 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/preset-create-react-app"
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5"
   }
-}
+};

package/.storybook/preview.js

@@ -1,3 +1,5 @@
+import "./variables.css";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,4 +8,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};

package/.storybook/variables.css

@@ -0,0 +1,9 @@
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --darkest-grey: #3b4859;
+}

package/README.md

@@ -1,15 +1,102 @@
-# Getting Started with Create React App
+# UI-Shared 
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This repo was created to help organize components across the UT ecosystem; following specific design rules: 
 
-## Available Scripts
+**Stack:**
+<br />
+-   React (18.2.0)
+<br />
+-   TypeScript 
+<br />
+-   [MUI](https://mui.com/)
+<br />
+-   Styled-Components (as part of MUI)
+
+## Design rules
+
+#### Components following material and atomic design rules; 
+
+
+1.  Standard naming components; with primary/secondary/etc variations. Keeping variations minimal and purposeful.
+<br /> 
+<br /> 
+
+**Example:** 
+```
+    <Button type="primary" /> 
+    <Button type="secondary" /> 
+```
+<br />
+**NOT** 
+```
+    <Button type="team-page-button" /> 
+    <Button type="home-page-button" /> 
+```
+<br />
+<br />
+
+Buttons should be uniform across the platforms with minimal variants, not multiple buttons created for each pages. 
+
+<br />
+2.  Components broken into their smallest parts, atoms, then built up from there.
+<br />
+<br />
+    **Example:** 
+    ```
+        <Card> // Molecule
+            <Typography> // Atom
+                Sample Header
+            </Typography>
+            <Button> // Atom
+                Sample Button
+            </Button>
+        </Card>
+    ```
+<br />
+<br />
+    A component that uses these cards in combination with other components would be considered an organism.
 
-In the project directory, you can run:
+<br />
+3.   Components should all be "dumb" components - keeping only local state or logic specific to the component, minimizing side effects. 
+<br />
+[Functional Programming - Side Effects](https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/#:~:text=A%20side%20effect%20is%20when,described%20as%20having%20side%20effects.)
 
-### `npm start`
+<br />
+4.  Common colors, BBM sizing, common functionality are standardized in the same way we write components. 
+<br />
+<br />
+     **Example:** 
+     <br />
+     -  "Primary"/ "secondary" vs "Team-card-header-blue-color" - minimzing number of color variations.
+
+<br />
+*To read more:*
+<br />
+[Material design rules](https://m2.material.io/design/color/the-color-system.html)
+<br />
+[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
+
+
+## Publishing the Repo
+
+1. First when creating a new component, make sure to add it to the `components.jsx` file.
+2. Then Run `yarn run publish:npm` to build a optimized build for all the components, this is configured for TS. 
+3. In the `package.json` file, make sure to pump to the next minor version.
+4. Finally `yarn run publish-package` to deploy this version to NPM. 
+
+It can now be accessed in another repo like this:
+<br />
+`import {Button} from "@universal-tennis/ui-shared";`
+
+
+## Available Scripts
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+### `npm start` using npm 16.14.0
 
-The page will reload when you make changes.\
+Runs the storybook app in localhost.
+<br />
+Open [http://localhost:6006](http://localhost:6006) to view storybook in your browser.
+<br />
+The page will reload when you make changes.
+<br />
 You may also see any lint errors in the console.

package/dist/App.d.ts

@@ -1,2 +1,2 @@
-export default App;
-declare function App(): JSX.Element;
+export default App;
+declare function App(): JSX.Element;

package/dist/App.js

@@ -1,11 +1,13 @@
-function App() {
-    return (React.createElement("div", { className: "App" },
-        React.createElement("header", { className: "App-header" },
-            React.createElement("p", null,
-                "Edit ",
-                React.createElement("code", null, "src/App.js"),
-                " and save to reload."),
-            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
-}
-export default App;
+function App() {
+    return (React.createElement("div", { className: "App" },
+        React.createElement("header", { className: "App-header" },
+            React.createElement("p", null,
+                "Edit",
+                ' ',
+                React.createElement("code", null, "src/App.js"),
+                ' ',
+                "and save to reload."),
+            React.createElement("a", { className: "App-link", href: "https://reactjs.org", target: "_blank", rel: "noopener noreferrer" }, "Learn React"))));
+}
+export default App;
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.js"],"names":[],"mappings":"AACA,SAAS,GAAG;IACV,OAAO,CACL,6BAAK,SAAS,EAAC,KAAK;QAClB,gCAAQ,SAAS,EAAC,YAAY;YAC5B;;gBACO,+CAAuB;uCAC1B;YACJ,2BACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACG,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.js"],"names":[],"mappings":"AAAA,SAAS,GAAG;IACV,OAAO,CACL,6BAAK,SAAS,EAAC,KAAK;QAClB,gCAAQ,SAAS,EAAC,YAAY;YAC5B;;gBAEP,GAAG;gBACJ,+CAAuB;gBACtB,GAAG;sCAEQ;YACJ,2BACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAC,qBAAqB,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,kBAGvB,CACG,CACL,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}

package/dist/components.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components.js

@@ -1,2 +1,5 @@
-// add components here
+// ATOMS
+export { default as Button } from './stories/atoms/Button';
+// MOLECULES
+// ORGANISMS 
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,sBAAsB"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,YAAY;AACZ,aAAa"}

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(App, null)));
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(App, null)));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
 //# sourceMappingURL=index.js.map

package/dist/items.d.ts

@@ -1,2 +1,2 @@
-declare const _exports: any;
-export = _exports;
+declare const _exports: typeof import("./components");
+export = _exports;

package/dist/items.js

@@ -1,2 +1,2 @@
-module.exports = require('./components');
+module.exports = require('./components');
 //# sourceMappingURL=items.js.map

package/dist/stories/atoms/Button.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+type ButtonProps = {
+    children: string | ReactElement;
+    category?: string;
+};
+export declare function Button({ children, category, ...props }: ButtonProps): JSX.Element;
+export {};

package/dist/stories/atoms/Button.js

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import MuiButton from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+const StyledButton = styled(MuiButton)({
+    borderRadius: '24px',
+    fontSize: '12px',
+    padding: '0 24px',
+    height: '40px',
+    whiteSpace: 'nowrap',
+    lineHeight: '39px',
+    border: '1px solid transparent'
+});
+const PrimaryButton = styled(StyledButton)({
+    backgroundColor: 'var(--black)',
+    color: 'var(--white)',
+    '&:hover': {
+        backgroundColor: 'var(--darkest-grey)',
+        borderColor: 'var(--darkest-grey)',
+    },
+    '&:disabled': {
+        backgroundColor: 'var(--lightest-grey)',
+        borderColor: 'var(--lightest-grey)',
+    },
+});
+const SecondaryButton = styled(StyledButton)({
+    borderColor: 'var(--black)',
+    backgroundColor: 'transparent',
+    color: 'var(--black)',
+    '&:hover': {
+        borderColor: 'var(--darkest-grey)',
+    },
+    '&:disabled': {
+        borderColor: 'var(--disabled)'
+    },
+});
+export function Button(_a) {
+    var { children, category } = _a, props = __rest(_a, ["children", "category"]);
+    switch (category) {
+        case 'primary':
+            return (React.createElement(PrimaryButton, Object.assign({}, props), children));
+        case 'secondary':
+            return (React.createElement(SecondaryButton, Object.assign({}, props), children));
+        default:
+            return (React.createElement(StyledButton, Object.assign({}, props), children));
+    }
+}
+//# sourceMappingURL=Button.js.map

package/dist/stories/atoms/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACzC,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IACnD,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}

package/dist/stories/atoms/Button.stories.d.ts

@@ -0,0 +1,14 @@
+import { Button } from './Button';
+declare const _default: {
+    title: string;
+    component: typeof Button;
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Primary: any;
+export declare const Secondary: any;
+export declare const Default: any;

package/dist/stories/atoms/Button.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from './Button';
+export default {
+    title: 'Atoms/Button',
+    component: Button,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+function Template(args) {
+    return React.createElement(Button, Object.assign({}, args));
+}
+export const Primary = Template.bind({});
+Primary.args = {
+    category: "primary",
+    children: 'Button',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+    category: "secondary",
+    children: 'Button',
+};
+export const Default = Template.bind({});
+Default.args = {
+    children: 'Button',
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/stories/atoms/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/stories/atoms/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,IAAW;IAC3B,OAAO,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,QAAQ;CACnB,CAAC"}

package/package.json

@@ -1,28 +1,26 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.15",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "typescript": "^4.9.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
+    "start": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "publish:npm": "tsc && yarn copy-files",
+    "publish-package": "npm publish --access public",
     "copy-files": "copyfiles -u 1 src/stories/assets/*.svg src/stories/assets/*.png src/stories/assets/*.gif src/stories/assets/css/*.css dist/",
     "eslint": "npx eslint --ext .jsx,.js src --fix"
   },
@@ -65,7 +63,17 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
+    "@types/babel__core": "^7.1.20",
+    "@types/react": "^18.0.25",
     "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
     "prop-types": "^15.8.1",
     "webpack": "^5.75.0"
   },

package/src/App.js

@@ -1,10 +1,13 @@
-
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit 
+{' '}
+<code>src/App.js</code>
+{' '}
+and save to reload.
         </p>
         <a
           className="App-link"

package/src/components.jsx

@@ -1 +1,5 @@
-// add components here
+// ATOMS
+export { default as Button } from './stories/atoms/Button';
+
+// MOLECULES
+// ORGANISMS 

package/src/custom.d.ts

@@ -1,13 +1,13 @@
-declare module '*.jpg';
-declare module '*.png';
-declare module '*.woff2';
-declare module '*.woff';
-declare module '*.ttf';
-
-declare module '*.svg' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
-  export default src;
-}
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.woff2';
+declare module '*.woff';
+declare module '*.ttf';
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/src/items.jsx

@@ -1 +1 @@
-module.exports = require('./components');
+module.exports = require('./components');