├── .gitignore ├── LICENSE ├── README.md ├── lerna.json ├── package.json ├── packages ├── my-monorepo-cra-app │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Header-from-UI-lib.tsx │ │ │ └── Toggle-button-with-hook.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json └── my-monorepo-ui-lib │ ├── .storybook │ ├── main.js │ └── preview.js │ ├── package.json │ ├── src │ ├── Button.stories.tsx │ ├── Button.tsx │ ├── Header.stories.tsx │ ├── Header.tsx │ ├── Introduction.stories.mdx │ ├── Page.stories.tsx │ ├── Page.tsx │ ├── assets │ │ ├── code-brackets.svg │ │ ├── colors.svg │ │ ├── comments.svg │ │ ├── direction.svg │ │ ├── flow.svg │ │ ├── plugin.svg │ │ ├── repo.svg │ │ └── stackalt.svg │ ├── button.css │ ├── header.css │ ├── index.ts │ └── page.css │ ├── tsconfig.esm.json │ └── tsconfig.json ├── tsconfig.json └── typings.d.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | *.lock 64 | 65 | lib 66 | 67 | lib-esm 68 | 69 | *.tsbuildinfo 70 | 71 | # v4 version upgrade additions: 72 | storybook-static -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 shnyder 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lerna-typescript-cra-uilib-starter 2 | Starter for Monorepos: Lerna, TypeScript, CRA and Storybook 3 | 4 | - now supports react-scripts version 4 5 | - contains the storybook "sb init" scaffolding with typescript, with slight modifications 6 | - the UI library packages .css and .scss files in the library-folders now 7 | 8 | [more details in the blogpost](https://dev.to/shnydercom/monorepos-lerna-typescript-cra-and-storybook-combined-4hli) 9 | 10 | # known issues 11 | - if you get this error message: `The react-scripts package provided by Create React App requires a dependency: my-monorepo-cra-app: "babel-loader": "8.1.0"` or another version, please remove the yarn.lock file and update the "resolution" field for babel-loader in the root package.json. This conflict always happens on a fresh install when either CRA or storybook have new versions. 12 | 13 | Pull Requests welcome! -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "0.0.0", 6 | "npmClient": "yarn", 7 | "useWorkspaces": true 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lerna-typescript-cra-uilib-starter", 3 | "version": "2.0.0", 4 | "description": "Starter for Monorepos: Lerna, TypeScript, CRA and Storybook", 5 | "main": "index.js", 6 | "repository": "https://github.com/shnydercom/lerna-typescript-cra-uilib-starter.git", 7 | "author": "shnyder.com", 8 | "license": "MIT", 9 | "private": true, 10 | "workspaces": [ 11 | "packages/*" 12 | ], 13 | "devDependencies": { 14 | "lerna": "^3.22.1" 15 | }, 16 | "resolutions": { 17 | "babel-loader": "8.1.0" 18 | }, 19 | "scripts": { 20 | "story": "lerna run storybook --stream", 21 | "libbuild": "lerna run libbuild --stream", 22 | "prestart": "yarn libbuild", 23 | "start": "lerna run start --stream" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-monorepo-cra-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^17.0.0", 12 | "@types/react-dom": "^17.0.0", 13 | "react": "^17.0.1", 14 | "react-dom": "^17.0.1", 15 | "react-scripts": "4.0.2", 16 | "typescript": "^4.1.3", 17 | "web-vitals": "^1.0.1", 18 | "my-monorepo-ui-lib": "*" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shnydercom/lerna-typescript-cra-uilib-starter/39919963e1a34b0c65221c8761cbc16ba61acc58/packages/my-monorepo-cra-app/public/favicon.ico -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shnydercom/lerna-typescript-cra-uilib-starter/39919963e1a34b0c65221c8761cbc16ba61acc58/packages/my-monorepo-cra-app/public/logo192.png -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shnydercom/lerna-typescript-cra-uilib-starter/39919963e1a34b0c65221c8761cbc16ba61acc58/packages/my-monorepo-cra-app/public/logo512.png -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import { HeaderFromUILib } from "./components/Header-from-UI-lib"; 5 | import { ToggleButtonWithHook } from "./components/Toggle-button-with-hook"; 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 | logo 13 |

14 | Edit src/App.tsx and save to reload. 15 |

16 | 22 | Learn React 23 | 24 | 25 |
26 |
27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/components/Header-from-UI-lib.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Header } from "my-monorepo-ui-lib"; 3 | 4 | export const HeaderFromUILib = () => { 5 | return ( 6 |
{}} 8 | onCreateAccount={() => {}} 9 | onLogout={() => {}} 10 | > 11 |
12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/components/Toggle-button-with-hook.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "my-monorepo-ui-lib"; 3 | import { useState } from "react"; 4 | 5 | export const ToggleButtonWithHook = () => { 6 | //this is a "useState"-hook. In react 17, that's the default way to handle 7 | //your component's life cycle. Tutorials which show this.setState(...) are older than that 8 | const [isToggled, setToggled] = useState(true); 9 | return ( 10 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /packages/my-monorepo-cra-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true 20 | }, 21 | "include": [ 22 | "src" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/.storybook/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * changes to default: 3 | * fix #1: fixing (Error: "version" is a required argument.): https://github.com/storybookjs/storybook/issues/13255#issuecomment-740713924 4 | */ 5 | module.exports = { 6 | "stories": [ 7 | "../src/**/*.stories.mdx", //fix #1, previous: "../stories/**/*.stories.mdx" 8 | "../src/**/*.stories.@(js|jsx|ts|tsx)" //fix #1, previous: "../stories/**/*.stories.@(js|jsx|ts|tsx)" 9 | ], 10 | "addons": [ 11 | "@storybook/addon-links", 12 | "@storybook/addon-essentials", 13 | // "@storybook/preset-create-react-app" //fix #1 14 | ] 15 | } -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | 2 | export const parameters = { 3 | actions: { argTypesRegex: "^on[A-Z].*" }, 4 | } -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-monorepo-ui-lib", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "./lib/index.js", 6 | "module": "./lib-esm/index.js", 7 | "types": "./lib/index.d.ts", 8 | "scripts": { 9 | "test": "test", 10 | "storybook": "start-storybook -p 6006", 11 | "build-storybook": "build-storybook", 12 | "libbuild": "tsc && tsc --build tsconfig.esm.json && yarn compcss", 13 | "compcss": "yarn sass src/:lib/ && yarn sass src/:lib-esm/" 14 | }, 15 | "author": "shnyder.com", 16 | "license": "MIT", 17 | "devDependencies": { 18 | "@storybook/addon-actions": "^6.1.17", 19 | "@storybook/addon-essentials": "^6.1.17", 20 | "@storybook/addon-links": "^6.1.17", 21 | "@storybook/node-logger": "^6.1.17", 22 | "@storybook/preset-create-react-app": "^3.1.5", 23 | "@storybook/react": "^6.1.17", 24 | "react": "^17.0.1", 25 | "react-dom": "^17.0.1", 26 | "react-scripts": "4.0.2", 27 | "typescript": "^4.1.3", 28 | "sass": "^1.32.6" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 3 | import { Story, Meta } from '@storybook/react/types-6-0'; 4 | 5 | import { Button, ButtonProps } from './Button'; 6 | 7 | export default { 8 | title: 'Example/Button', 9 | component: Button, 10 | argTypes: { 11 | backgroundColor: { control: 'color' }, 12 | }, 13 | } as Meta; 14 | 15 | const Template: Story = (args) => 47 | ); 48 | }; 49 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Header.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 3 | import { Story, Meta } from '@storybook/react/types-6-0'; 4 | 5 | import { Header, HeaderProps } from './Header'; 6 | 7 | export default { 8 | title: 'Example/Header', 9 | component: Header, 10 | } as Meta; 11 | 12 | const Template: Story = (args) =>
; 13 | 14 | export const LoggedIn = Template.bind({}); 15 | LoggedIn.args = { 16 | user: {}, 17 | }; 18 | 19 | export const LoggedOut = Template.bind({}); 20 | LoggedOut.args = {}; 21 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Button } from './Button'; 4 | import './header.css'; 5 | 6 | export interface HeaderProps { 7 | user?: {}; 8 | onLogin: () => void; 9 | onLogout: () => void; 10 | onCreateAccount: () => void; 11 | } 12 | 13 | export const Header: React.FC = ({ user, onLogin, onLogout, onCreateAccount }) => ( 14 |
15 |
16 |
17 | 18 | 19 | 23 | 27 | 31 | 32 | 33 |

Acme

34 |
35 |
36 | {user ? ( 37 |
45 |
46 |
47 | ); 48 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs/blocks'; 2 | import Code from './assets/code-brackets.svg'; 3 | import Colors from './assets/colors.svg'; 4 | import Comments from './assets/comments.svg'; 5 | import Direction from './assets/direction.svg'; 6 | import Flow from './assets/flow.svg'; 7 | import Plugin from './assets/plugin.svg'; 8 | import Repo from './assets/repo.svg'; 9 | import StackAlt from './assets/stackalt.svg'; 10 | 11 | 12 | 13 | 116 | 117 | # Welcome to Storybook 118 | 119 | Storybook helps you build UI components in isolation from your app's business logic, data, and context. 120 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. 121 | 122 | Browse example stories now by navigating to them in the sidebar. 123 | View their code in the `src/stories` directory to learn how they work. 124 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. 125 | 126 |
Configure
127 | 128 | 170 | 171 |
Learn
172 | 173 | 203 | 204 |
205 | TipEdit the Markdown in{' '} 206 | src/stories/Introduction.stories.mdx 207 |
208 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Page.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 3 | import { Story, Meta } from '@storybook/react/types-6-0'; 4 | 5 | import { Page, PageProps } from './Page'; 6 | import * as HeaderStories from './Header.stories'; 7 | 8 | export default { 9 | title: 'Example/Page', 10 | component: Page, 11 | } as Meta; 12 | 13 | const Template: Story = (args) => ; 14 | 15 | export const LoggedIn = Template.bind({}); 16 | LoggedIn.args = { 17 | ...HeaderStories.LoggedIn.args, 18 | }; 19 | 20 | export const LoggedOut = Template.bind({}); 21 | LoggedOut.args = { 22 | ...HeaderStories.LoggedOut.args, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/Page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Header } from './Header'; 4 | import './page.css'; 5 | 6 | export interface PageProps { 7 | user?: {}; 8 | onLogin: () => void; 9 | onLogout: () => void; 10 | onCreateAccount: () => void; 11 | } 12 | 13 | export const Page: React.FC = ({ user, onLogin, onLogout, onCreateAccount }) => ( 14 |
15 |
16 | 17 |
18 |

Pages in Storybook

19 |

20 | We recommend building UIs with a{' '} 21 | 22 | component-driven 23 | {' '} 24 | process starting with atomic components and ending with pages. 25 |

26 |

27 | Render pages with mock data. This makes it easy to build and review page states without 28 | needing to navigate to them in your app. Here are some handy patterns for managing page data 29 | in Storybook: 30 |

31 |
    32 |
  • 33 | Use a higher-level connected component. Storybook helps you compose such data from the 34 | "args" of child component stories 35 |
    • 36 |
  • 37 | Assemble data in the page component from your services. You can mock these services out 38 | using Storybook. 39 |
    • 40 |
41 |

42 | Get a guided tutorial on component-driven development at{' '} 43 | 44 | Learn Storybook 45 | 46 | . Read more in the{' '} 47 | 48 | docs 49 | 50 | . 51 |

52 |
53 | Tip Adjust the width of the canvas with the{' '} 54 | 55 | 56 | 61 | 62 | 63 | Viewports addon in the toolbar 64 |
65 |
66 |
67 | ); 68 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/code-brackets.svg: -------------------------------------------------------------------------------- 1 | illustration/code-brackets -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/colors.svg: -------------------------------------------------------------------------------- 1 | illustration/colors -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/comments.svg: -------------------------------------------------------------------------------- 1 | illustration/comments -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/direction.svg: -------------------------------------------------------------------------------- 1 | illustration/direction -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/flow.svg: -------------------------------------------------------------------------------- 1 | illustration/flow -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/plugin.svg: -------------------------------------------------------------------------------- 1 | illustration/plugin -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/repo.svg: -------------------------------------------------------------------------------- 1 | illustration/repo -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/assets/stackalt.svg: -------------------------------------------------------------------------------- 1 | illustration/stackalt -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/button.css: -------------------------------------------------------------------------------- 1 | .storybook-button { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-weight: 700; 4 | border: 0; 5 | border-radius: 3em; 6 | cursor: pointer; 7 | display: inline-block; 8 | line-height: 1; 9 | } 10 | .storybook-button--primary { 11 | color: white; 12 | background-color: #1ea7fd; 13 | } 14 | .storybook-button--secondary { 15 | color: #333; 16 | background-color: transparent; 17 | box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; 18 | } 19 | .storybook-button--small { 20 | font-size: 12px; 21 | padding: 10px 16px; 22 | } 23 | .storybook-button--medium { 24 | font-size: 14px; 25 | padding: 11px 20px; 26 | } 27 | .storybook-button--large { 28 | font-size: 16px; 29 | padding: 12px 24px; 30 | } 31 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/header.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 4 | padding: 15px 20px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | svg { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | 15 | h1 { 16 | font-weight: 900; 17 | font-size: 20px; 18 | line-height: 1; 19 | margin: 6px 0 6px 10px; 20 | display: inline-block; 21 | vertical-align: top; 22 | } 23 | 24 | button + button { 25 | margin-left: 10px; 26 | } 27 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Button"; 2 | export * from "./Header"; 3 | export * from "./Page"; -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/src/page.css: -------------------------------------------------------------------------------- 1 | section { 2 | font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | font-size: 14px; 4 | line-height: 24px; 5 | padding: 48px 20px; 6 | margin: 0 auto; 7 | max-width: 600px; 8 | color: #333; 9 | } 10 | 11 | h2 { 12 | font-weight: 900; 13 | font-size: 32px; 14 | line-height: 1; 15 | margin: 0 0 4px; 16 | display: inline-block; 17 | vertical-align: top; 18 | } 19 | 20 | p { 21 | margin: 1em 0; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #1ea7fd; 27 | } 28 | 29 | ul { 30 | padding-left: 30px; 31 | margin: 1em 0; 32 | } 33 | 34 | li { 35 | margin-bottom: 8px; 36 | } 37 | 38 | .tip { 39 | display: inline-block; 40 | border-radius: 1em; 41 | font-size: 11px; 42 | line-height: 12px; 43 | font-weight: 700; 44 | background: #e7fdd8; 45 | color: #66bf3c; 46 | padding: 4px 12px; 47 | margin-right: 10px; 48 | vertical-align: top; 49 | } 50 | 51 | .tip-wrapper { 52 | font-size: 13px; 53 | line-height: 20px; 54 | margin-top: 40px; 55 | margin-bottom: 40px; 56 | } 57 | 58 | .tip-wrapper svg { 59 | display: inline-block; 60 | height: 12px; 61 | width: 12px; 62 | margin-right: 4px; 63 | vertical-align: top; 64 | margin-top: 3px; 65 | } 66 | 67 | .tip-wrapper svg path { 68 | fill: #1ea7fd; 69 | } 70 | -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/tsconfig.esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src" 4 | ], 5 | "extends": "./tsconfig.json", 6 | "compilerOptions": { 7 | "outDir": "lib-esm", 8 | "module": "esnext", 9 | "target": "esnext", 10 | "moduleResolution": "node", 11 | "lib": ["dom", "esnext"], 12 | "declaration": false 13 | } 14 | } -------------------------------------------------------------------------------- /packages/my-monorepo-ui-lib/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "target": "es5", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "outDir": "lib", 20 | "declaration": true 21 | }, 22 | "exclude": [ 23 | "node_modules", 24 | "lib-esm", 25 | "lib", 26 | "**/*.story*", 27 | "**/*.spec*" 28 | ], 29 | "include": [ 30 | "src" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["node_modules"], 3 | "files": ["./typings.d.ts"], 4 | "compilerOptions": { 5 | "jsx": "react-jsx", 6 | "esModuleInterop": true, 7 | "skipLibCheck": true, 8 | "noFallthroughCasesInSwitch": true, 9 | } 10 | } -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | 2 | declare module "*.json" { 3 | const value: any; 4 | export default value; 5 | } 6 | declare module '*.scss' { 7 | const content: any; 8 | export default content; 9 | } 10 | declare module '*.css' { 11 | interface IClassNames { 12 | [className: string]: string 13 | } 14 | const classNames: IClassNames; 15 | export = classNames; 16 | } 17 | --------------------------------------------------------------------------------