├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── babel.config.js ├── jest.json ├── lerna.json ├── netlify.toml ├── package.json ├── packages ├── b │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── B.tsx │ │ ├── __tests__ │ │ │ └── B.test.tsx │ │ └── index.ts │ └── tsconfig.json ├── c │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── __tests__ │ │ │ └── index.test.ts │ │ └── index.ts │ └── tsconfig.json ├── d │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── __tests__ │ │ │ └── d.test.ts │ │ ├── d.ts │ │ ├── index.ts │ │ └── types.ts │ └── tsconfig.json └── stories │ ├── .storybook │ ├── addons.js │ ├── config.js │ ├── preview-head.html │ └── webpack.config.js │ ├── README.md │ ├── package.json │ ├── src │ ├── b │ │ └── 1-basic.stories.tsx │ └── c │ │ └── 1-basic.stories.tsx │ └── tsconfig.json ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log 4 | .vscode 5 | dist 6 | lib 7 | tsconfig.tsbuildinfo 8 | .idea -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | cache: yarn 5 | notifications: 6 | email: false 7 | env: 8 | matrix: 9 | - CHROMATIC: "false" 10 | JEST_MAX_WORKERS: 4 11 | - CHROMATIC: "true" 12 | 13 | script: 14 | - if [ "$CHROMATIC" == "false" ]; then yarn test ; fi 15 | # - if [ "$CHROMATIC" == "true" ]; then yarn build && yarn build-stories && yarn test-stories ; fi 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 stereobooster 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 | # Typescript monorepo for React project 2 | 3 | ## What I want to achieve? 4 | 5 | - [Monorepo](https://www.atlassian.com/git/tutorials/monorepos) project, to be able to comfortably to develop several packages, which can be used separately but as well together 6 | - Typescript 7 | - React 8 | - Testing library. I want to start with Jest, but as well we can choose something else 9 | - Storybook (or similar tool) for React components development and showcasing 10 | - (nice to have, but optional) ESlint with [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app) 11 | - (nice to have, but optional) Rollup to bundle and minify 12 | - (nice to have, but optional) pre-commit hooks with prettier 13 | 14 | ## Packages structure 15 | 16 | - [`d`](packages/d) - utility library 17 | - [`b`](packages/b) - React components library, which depends on `d` 18 | - [`c`](packages/c) - another React components library, which depends on `d` 19 | - [`stories`](packages/stories) - showcase of `b` and `c` package's compnents as well used for development (initial plan, can change later) 20 | 21 | ## Tools 22 | 23 | **⚠️⚠️⚠️ Info in this section is stale ⚠️⚠️⚠️**: 24 | - **Problem 1** is resolved in PR [#2](https://github.com/stereobooster/typescript-monorepo/pull/2) 25 | - **Problem 2** is resolved in PR [#5](https://github.com/stereobooster/typescript-monorepo/pull/5) 26 | - **Problem 4** is resolved in PR [#4](https://github.com/stereobooster/typescript-monorepo/pull/4) 27 | 28 | ### yarn 29 | 30 | `yarn` instead of `npm`, because it supports `workspaces` to link cross-dependencies. 31 | 32 | Create `package.json` in the root without version because we not going to publish it and with `workspaces`: 33 | 34 | ```json 35 | "workspaces": [ 36 | "packages/*" 37 | ] 38 | ``` 39 | 40 | ### lerna 41 | 42 | We will use `lerna` to run commands across all packages and "elevate" common dependencies. 43 | 44 | Create `lerna.json`: 45 | 46 | ```json 47 | { 48 | "packages": ["packages/*"], 49 | "npmClient": "yarn", 50 | "useWorkspaces": true, 51 | "version": "0.0.1" 52 | } 53 | ``` 54 | 55 | ### TypeScript 56 | 57 | We will use `typescript` to check types and compile TS down to desired JS files (ES5 or ES2015, CommonJS or ES modules). 58 | 59 | Create `tsconfig.base.json`. This is what you need to add to enable monorepo: 60 | 61 | ```json 62 | { 63 | "include": ["packages/*/src"], 64 | "compilerOptions": { 65 | "declaration": true, 66 | "declarationMap": true, 67 | "baseUrl": ".", 68 | "paths": { 69 | "@stereobooster/*": ["packages/*/src"] 70 | } 71 | } 72 | } 73 | ``` 74 | 75 | Create `packages/d/`, `packages/b/`, `packages/c/`, `packages/stories/`. Add `tsconfig.json` to each one: 76 | 77 | ```json 78 | { 79 | "include": ["src"], 80 | "extends": "../../tsconfig.base.json", 81 | "compilerOptions": { 82 | // to override config from tsconfig.base.json 83 | "outDir": "lib", 84 | "rootDir": "src", 85 | // for references 86 | "baseUrl": "src" 87 | }, 88 | // references required for monorepo to work 89 | "references": [{ "path": "../d" }] 90 | } 91 | ``` 92 | 93 | In `package.json` for packages `b` and `c` add: 94 | 95 | ```json 96 | "peerDependencies": { 97 | "@stereobooster/d": "0.0.1" 98 | }, 99 | "devDependencies": { 100 | "@stereobooster/d": "*" 101 | } 102 | ``` 103 | 104 | We need `peerDependencies` to make sure that when packages (`d`, `b`, `c`) installed by the end user they will use the same instance of package `d`, otherwise, TypeScript can complain about incompatible types (especially if use inheritance and private fields). In `peerDependencies` we specify a version, but in `devDependencies` we don't need to, because we need simply to instruct `yarn` to use whatever version of package we have locally. 105 | 106 | Now we can build projects. Add to root `package.json`: 107 | 108 | ```json 109 | "scripts": { 110 | "build": "lerna run build --stream --scope=@stereobooster/{d,b,c}" 111 | } 112 | ``` 113 | 114 | and to `package.json` for `d`, `b`, `c` 115 | 116 | ```json 117 | "scripts": { 118 | "build": "tsc" 119 | } 120 | ``` 121 | 122 | **Problem 1**: because of sub-dependencies (packages `b` and `c` depend on `d`, `stories` depends on `d`, `b`, `c`) we need to build packages accordingly, e.g. first `d`, second `b` and `c`, third `stories`. That is why we can't use `--parallel` flag for `lerna` for build command. 123 | 124 | ### React 125 | 126 | Install `@types/react`, `@types/react-dom`, `react`, `react-dom`. 127 | 128 | Add to `tsconfig.base.json`: 129 | 130 | ```json 131 | "compilerOptions": { 132 | "lib": ["dom", "esnext"], 133 | "jsx": "react", 134 | } 135 | ``` 136 | 137 | Add to subpackage's `package.json`: 138 | 139 | ```json 140 | "peerDependencies": { 141 | "react": "^16.8.0", 142 | "react-dom": "^16.8.0" 143 | } 144 | ``` 145 | 146 | ### Jest 147 | 148 | We will use `jest` to run tests. Install `@types/jest`, `@types/react-test-renderer`, `jest`, `react-test-renderer`. Add `jest.json`. To eanbale TypeScript: 149 | 150 | ```json 151 | { 152 | "moduleFileExtensions": ["ts", "tsx", "js"], 153 | "transform": { 154 | "\\.tsx?$": "ts-jest" 155 | }, 156 | "testMatch": ["**/__tests__/**/*.test.*"], 157 | "globals": { 158 | "ts-jest": { 159 | "tsConfig": "tsconfig.base.json" 160 | } 161 | } 162 | } 163 | ``` 164 | 165 | to enable monorepo: 166 | 167 | ```json 168 | "moduleNameMapper": { 169 | "@stereobooster/(.*)$": "/packages/$1" 170 | } 171 | ``` 172 | 173 | As well we will need to change `tsconfig.base.json`, because [Jest doesn't support ES modules](https://github.com/facebook/jest/issues/4842): 174 | 175 | ```json 176 | "compilerOptions": { 177 | "target": "es5", 178 | "module": "commonjs", 179 | } 180 | ``` 181 | 182 | Add command to `package.json` 183 | 184 | ```json 185 | "scripts": { 186 | "pretest": "yarn build", 187 | "test": "jest --config=jest.json" 188 | } 189 | ``` 190 | 191 | ~~**Problem 2**: we will publish modules as ES5 + CommonJS, which makes no sense for React package, which would require some kind of bundler to consume packages, like Parcel or Webpack.~~ 192 | 193 | **Problem 3**: there are sub-dependencies, so we need to build all packages first and only after we can run tests. That is why we need `pretest` script. 194 | 195 | ### Storybook 196 | 197 | Install storybook according to [official instruction](https://storybook.js.org/docs/configurations/typescript-config/). 198 | 199 | We will need the following things in `package.json`: 200 | 201 | ```json 202 | "scripts": { 203 | "start": "start-storybook -p 8080", 204 | "build": "build-storybook -o dist" 205 | }, 206 | "dependencies": { 207 | "@stereobooster/d": "*", 208 | "@stereobooster/b": "*", 209 | "@stereobooster/c": "*" 210 | }, 211 | "devDependencies": { 212 | "@babel/core": "7.4.3", 213 | "@storybook/addon-info": "^5.0.11", 214 | "@storybook/addons": "5.0.6", 215 | "@storybook/core": "5.0.6", 216 | "@storybook/react": "5.0.6", 217 | "@types/storybook__addon-info": "^4.1.1", 218 | "@types/storybook__react": "4.0.1", 219 | "awesome-typescript-loader": "^5.2.1", 220 | "babel-loader": "8.0.5", 221 | "react-docgen-typescript-loader": "^3.1.0" 222 | } 223 | ``` 224 | 225 | Create configurations in `.storybook` (again, based on official instruction). Now we can create stories in `/src/b` for `b` packages, in `/src/c` for `c` package. 226 | 227 | Storybook will watch for changes in `stories/src`, but not for changes in `d/src`, `b/src`, `c/src`. We will need to use TypeScript to watch for changes in other packages. 228 | 229 | Add to `package.json` of `d`, `b` and `c` packages: 230 | 231 | ```json 232 | "scripts": { 233 | "start": "tsc -w" 234 | } 235 | ``` 236 | 237 | and to the root `package.json`: 238 | 239 | ```json 240 | "scripts": { 241 | "prestart": "yarn build", 242 | "start": "lerna run start --stream --parallel" 243 | } 244 | ``` 245 | 246 | Now a developer can run `yarn start` (in one terminal) and `yarn test --watch` (in another terminal) to get development environment - scripts will watch for changes and reload. 247 | 248 | **Problem 3**: there are sub-dependencies, so we need to build all packages first and only after we can run the start script. That is why we need `prestart` script. 249 | 250 | ~~**Problem 4**: If there is type error in stories it will show up in the browser, but if there is type error in `d`, `b` or `c` packages it will only show up in terminal, which spoils all DX, because instead of switching between editor and browser you will need to switch to terminal as well to check if there is an error or not.~~ 251 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ["@babel/preset-env", { targets: { node: "current" } }], 4 | "@babel/preset-react" 5 | // "@babel/preset-typescript" 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "moduleFileExtensions": ["ts", "tsx", "js", "jsx"], 3 | "transform": { 4 | "\\.jsx?$": "babel-jest", 5 | "\\.tsx?$": "ts-jest" 6 | }, 7 | "testMatch": ["**/__tests__/**/*.test.*"], 8 | "globals": { 9 | "ts-jest": { 10 | "tsConfig": "tsconfig.json" 11 | } 12 | }, 13 | "moduleNameMapper": { 14 | "@stereobooster/(.*)$": "/packages/$1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "version": "independent" 6 | } 7 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "yarn build && yarn build-stories" 3 | publish = "packages/stories/dist/" 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-monorepo", 3 | "workspaces": [ 4 | "packages/*" 5 | ], 6 | "description": "Typescript monorepo", 7 | "repository": "https://github.com/stereobooster/typescript-monorepo", 8 | "license": "MIT", 9 | "private": true, 10 | "scripts": { 11 | "prestart": "yarn build", 12 | "start": "run-p start:*", 13 | "start:stories": "lerna run start --stream --scope=@stereobooster/stories", 14 | "start:watch": "tsc --build --watch", 15 | "pretest": "yarn build", 16 | "test": "jest --config=jest.json", 17 | "test:stories": "lerna run test --stream --scope=@stereobooster/stories", 18 | "build": "tsc --build", 19 | "build:stories": "lerna run build --stream --scope=@stereobooster/stories", 20 | "clean": "rimraf packages/*/{tsconfig.tsbuildinfo,lib,dist}" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.4.5", 24 | "@babel/preset-env": "^7.4.5", 25 | "@babel/preset-react": "^7.0.0", 26 | "@types/jest": "^24.0.13", 27 | "@types/react": "^16.8.18", 28 | "@types/react-dom": "^16.8.4", 29 | "@types/react-test-renderer": "^16.8.1", 30 | "babel-jest": "^24.8.0", 31 | "jest": "^24.8.0", 32 | "lerna": "^3.14.1", 33 | "npm-run-all": "^4.1.5", 34 | "react": "^16.8.6", 35 | "react-dom": "^16.8.6", 36 | "react-test-renderer": "^16.8.6", 37 | "rimraf": "^2.6.3", 38 | "ts-jest": "^24.0.2", 39 | "typescript": "^3.4.5" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/b/Readme.md: -------------------------------------------------------------------------------- 1 | # B -------------------------------------------------------------------------------- /packages/b/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@stereobooster/b", 3 | "version": "0.0.1", 4 | "description": "", 5 | "main": "./lib/index.js", 6 | "types": "./lib/index.d.ts", 7 | "repository": "", 8 | "author": "stereobooster ", 9 | "license": "MIT", 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "dependencies": {}, 17 | "peerDependencies": { 18 | "@stereobooster/d": "0.0.1", 19 | "react": "^16.8.0", 20 | "react-dom": "^16.8.0" 21 | }, 22 | "devDependencies": { 23 | "@stereobooster/d": "*" 24 | }, 25 | "scripts": { 26 | "start": "tsc -w --preserveWatchOutput" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/b/src/B.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { d } from "@stereobooster/d"; 3 | 4 | export type BProps = {}; 5 | 6 | export const B: React.FC = ({ children }) => { 7 | d(); 8 | return
B: {children}
; 9 | }; 10 | 11 | // B.defaultProps = {}; 12 | // B.propTypes = {}; 13 | B.displayName = "B"; 14 | -------------------------------------------------------------------------------- /packages/b/src/__tests__/B.test.tsx: -------------------------------------------------------------------------------- 1 | // Link.react.test.js 2 | import React from "react"; 3 | import renderer from "react-test-renderer"; 4 | 5 | import { B } from "../B"; 6 | 7 | describe("B", () => { 8 | test("Link changes the class when hovered", () => { 9 | const component = renderer.create(); 10 | let tree = component.toJSON(); 11 | expect(tree).toEqual({ type: 'div', props: {}, children: [ 'B: ' ] }); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /packages/b/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./B"; 2 | -------------------------------------------------------------------------------- /packages/b/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src"], 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "lib", 6 | "rootDir": "src", 7 | "baseUrl": ".", 8 | }, 9 | "references": [ 10 | { 11 | "path": "../d" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/c/Readme.md: -------------------------------------------------------------------------------- 1 | # C -------------------------------------------------------------------------------- /packages/c/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@stereobooster/c", 3 | "version": "0.0.1", 4 | "description": "c", 5 | "main": "./lib/index.js", 6 | "types": "./lib/index.d.ts", 7 | "repository": "", 8 | "author": "stereobooster ", 9 | "license": "MIT", 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "dependencies": { 17 | }, 18 | "peerDependencies": { 19 | "@stereobooster/d": "0.0.1", 20 | "react": "^16.8.0", 21 | "react-dom": "^16.8.0" 22 | }, 23 | "devDependencies": { 24 | "@stereobooster/d": "*" 25 | }, 26 | "scripts": { 27 | "start": "tsc -w --preserveWatchOutput" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/c/src/__tests__/index.test.ts: -------------------------------------------------------------------------------- 1 | describe("c", () => { 2 | xit("test", () => {}); 3 | }); 4 | -------------------------------------------------------------------------------- /packages/c/src/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stereobooster/typescript-monorepo/fb69aea4a549415668f7e9045db0ac041e8839e2/packages/c/src/index.ts -------------------------------------------------------------------------------- /packages/c/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src"], 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "lib", 6 | "rootDir": "src" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/d/Readme.md: -------------------------------------------------------------------------------- 1 | # D 2 | -------------------------------------------------------------------------------- /packages/d/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@stereobooster/d", 3 | "version": "0.0.1", 4 | "description": "d", 5 | "main": "./lib/index.js", 6 | "types": "./lib/index.d.ts", 7 | "repository": "", 8 | "author": "stereobooster ", 9 | "license": "MIT", 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "files": [ 14 | "lib" 15 | ], 16 | "scripts": { 17 | "start": "tsc -w --preserveWatchOutput" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/d/src/__tests__/d.test.ts: -------------------------------------------------------------------------------- 1 | import { d } from "../d"; 2 | 3 | describe("d", () => { 4 | it("returns d", () => { 5 | expect(d()).toEqual("d"); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/d/src/d.ts: -------------------------------------------------------------------------------- 1 | export const d = () => "d"; 2 | -------------------------------------------------------------------------------- /packages/d/src/index.ts: -------------------------------------------------------------------------------- 1 | export { d } from "./d"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /packages/d/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface A { 2 | a: string; 3 | } 4 | -------------------------------------------------------------------------------- /packages/d/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src" 4 | ], 5 | "extends": "../../tsconfig.json", 6 | "compilerOptions": { 7 | "outDir": "lib", 8 | "rootDir": "src" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/stories/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/stories/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import "storybook-chromatic"; 2 | import { addParameters, configure } from "@storybook/react"; 3 | 4 | addParameters({ 5 | options: { 6 | name: "@stereobooster/typescript-monorepo", 7 | url: "https://github.com/stereoboster/typescript-monorepo", 8 | hierarchySeparator: "/", 9 | showAddonPanel: false, 10 | }, 11 | }); 12 | 13 | // Automatically import all files ending in *.stories.tsx 14 | const req = require.context("../src", true, /.stories.tsx$/); 15 | function loadStories() { 16 | req.keys().forEach(filename => req(filename)); 17 | } 18 | 19 | configure(loadStories, module); 20 | -------------------------------------------------------------------------------- /packages/stories/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 276 | -------------------------------------------------------------------------------- /packages/stories/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ config }) => { 2 | config.module.rules.push({ 3 | test: /\.(ts|tsx)$/, 4 | use: [ 5 | { 6 | loader: require.resolve("awesome-typescript-loader"), 7 | options: { 8 | reportFiles: [ 9 | "../**/src/**/*.{ts,tsx}" 10 | ] 11 | } 12 | }, 13 | // Optional 14 | { 15 | loader: require.resolve("react-docgen-typescript-loader") 16 | } 17 | ] 18 | }); 19 | config.resolve.extensions.push(".ts", ".tsx"); 20 | return config; 21 | }; 22 | -------------------------------------------------------------------------------- /packages/stories/README.md: -------------------------------------------------------------------------------- 1 | # @stereobooster/typescipt-monorepo stories 2 | 3 | This package contains `@stereobooster/typescipt-monorepo` stories that showcase rendering libraries capabilities. 4 | 5 | They are all grouped into a single package so we can run automated visual tests, thanks to [Chromatic](https://www.chromaticqa.com/). 6 | 7 | You can run stories locally with `yarn start` (or `npm run start`). 8 | -------------------------------------------------------------------------------- /packages/stories/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@stereobooster/stories", 3 | "private": true, 4 | "version": "0.0.0", 5 | "description": "Stories for typescript monorepo", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "start-storybook -p 8080", 9 | "storybook": "start-storybook -p 8080", 10 | "test": "./node_modules/.bin/chromatic test --app-code=\"\"", 11 | "build": "build-storybook -o dist", 12 | "clean": "rimraf tsconfig.tsbuildinfo lib dist" 13 | }, 14 | "dependencies": { 15 | "@stereobooster/d": "*", 16 | "@stereobooster/b": "*", 17 | "@stereobooster/c": "*" 18 | }, 19 | "peerDependencies": { 20 | "react": "^16.8.0", 21 | "react-dom": "^16.8.0" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "7.4.5", 25 | "@storybook/addon-info": "^5.0.11", 26 | "@storybook/addons": "5.0.11", 27 | "@storybook/core": "5.0.11", 28 | "@storybook/react": "5.0.11", 29 | "@types/storybook__addon-info": "^4.1.1", 30 | "@types/storybook__react": "4.0.1", 31 | "awesome-typescript-loader": "^5.2.1", 32 | "babel-loader": "8.0.6", 33 | "react-docgen-typescript-loader": "^3.1.0", 34 | "storybook-chromatic": "1.3.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/stories/src/b/1-basic.stories.tsx: -------------------------------------------------------------------------------- 1 | import { storiesOf } from "@storybook/react"; 2 | import { withInfo } from "@storybook/addon-info"; 3 | import * as React from "react"; 4 | import { d } from "@stereobooster/d"; 5 | import { B } from "@stereobooster/b"; 6 | 7 | storiesOf("@stereobooster/b/1. Basic", module).add( 8 | "first", 9 | withInfo({ inline: false })(() => { 10 | return {d()}; 11 | }) 12 | ); 13 | -------------------------------------------------------------------------------- /packages/stories/src/c/1-basic.stories.tsx: -------------------------------------------------------------------------------- 1 | import { storiesOf } from "@storybook/react"; 2 | import * as React from "react"; 3 | 4 | storiesOf("@stereobooster/c/1. Basic", module).add("first", () => { 5 | return
Nothing here
; 6 | }); 7 | -------------------------------------------------------------------------------- /packages/stories/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["node_modules", "dist", "lib", "__tests__", "**/*.test*", "**/*.spec*"], 3 | "files": [], 4 | "compilerOptions": { 5 | "skipLibCheck": false, 6 | "target": "esnext", 7 | "module": "esnext", 8 | "lib": ["dom", "esnext"], 9 | "jsx": "react", 10 | "rootDir": ".", 11 | "outDir": "lib", 12 | "downlevelIteration": true, 13 | "strict": true, 14 | "removeComments": false, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "noImplicitReturns": true, 18 | "noFallthroughCasesInSwitch": true, 19 | "moduleResolution": "node", 20 | "allowSyntheticDefaultImports": true, 21 | "esModuleInterop": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "baseUrl": ".", 24 | "paths": { 25 | "@stereobooster/*": ["packages/*/src"] 26 | }, 27 | // https://github.com/RyanCavanaugh/learn-a/#tsconfigsettingsjson 28 | "composite": true, 29 | "declaration": true, 30 | "declarationMap": true, 31 | "sourceMap": true, 32 | }, 33 | "references": [ 34 | { "path": "packages/d" }, 35 | { "path": "packages/b" }, 36 | { "path": "packages/c" } 37 | ] 38 | } 39 | --------------------------------------------------------------------------------