├── .eslintrc ├── .gitignore ├── .prettierrc ├── .storybook └── main.js ├── jest.config.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── hello-world.spec.tsx ├── hello-world.stories.tsx ├── hello-world.tsx └── index.ts └── tsconfig.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "ecmaVersion": 2020, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "jsx": true 8 | } 9 | }, 10 | "settings": { 11 | "react": { 12 | "version": "detect" 13 | } 14 | }, 15 | "plugins": ["jest"], 16 | "env": { 17 | "jest/globals": true 18 | }, 19 | "extends": [ 20 | "plugin:react/recommended", 21 | "plugin:@typescript-eslint/recommended", 22 | "prettier/@typescript-eslint", 23 | "plugin:prettier/recommended" 24 | ], 25 | "rules": {} 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | storybook-static -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "printWidth": 80 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ["../src/**/*.stories.tsx"], 3 | addons: [ 4 | "@storybook/addon-actions", 5 | "@storybook/addon-links", 6 | ], 7 | typescript: { 8 | check: false, 9 | checkOptions: {}, 10 | reactDocgen: 'react-docgen-typescript', 11 | reactDocgenTypescriptOptions: { 12 | shouldExtractLiteralValuesFromEnum: true, 13 | propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), 14 | }, 15 | }, 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | roots: ["/src"], 3 | transform: { 4 | "^.+\\.tsx?$": "ts-jest", 5 | }, 6 | preset: "ts-jest", 7 | testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$", 8 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], 9 | }; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "component-library-starter", 3 | "version": "1.0.0", 4 | "main": "./build/index.js", 5 | "module": "./build/index.es.js", 6 | "author": "Dennis Schneider", 7 | "license": "MIT", 8 | "dependencies": {}, 9 | "peerDependencies": { 10 | "react": "16.13.1", 11 | "react-dom": "16.13.1" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.11.6", 15 | "@rollup/plugin-commonjs": "^15.1.0", 16 | "@rollup/plugin-node-resolve": "^9.0.0", 17 | "@storybook/addon-actions": "^6.0.22", 18 | "@storybook/addon-links": "^6.0.22", 19 | "@storybook/addons": "^6.0.22", 20 | "@storybook/react": "^6.0.22", 21 | "@testing-library/jest-dom": "^5.11.4", 22 | "@testing-library/react": "^11.0.4", 23 | "@types/jest": "^26.0.14", 24 | "@types/node": "^14.11.2", 25 | "@types/testing-library__jest-dom": "^5.9.3", 26 | "@types/testing-library__react": "^10.2.0", 27 | "@typescript-eslint/eslint-plugin": "^4.3.0", 28 | "@typescript-eslint/parser": "^4.3.0", 29 | "babel-loader": "^8.1.0", 30 | "eslint": "^7.10.0", 31 | "eslint-config-prettier": "^6.12.0", 32 | "eslint-plugin-jest": "^24.0.2", 33 | "eslint-plugin-prettier": "^3.1.4", 34 | "eslint-plugin-react": "^7.21.2", 35 | "fork-ts-checker-webpack-plugin": "^5.2.0", 36 | "jest": "^26.4.2", 37 | "prettier": "^2.1.2", 38 | "rollup": "^2.28.2", 39 | "rollup-plugin-peer-deps-external": "^2.2.3", 40 | "rollup-plugin-typescript2": "^0.27.3", 41 | "ts-jest": "^26.4.0", 42 | "ts-loader": "^8.0.4", 43 | "typescript": "^4.0.3" 44 | }, 45 | "scripts": { 46 | "storybook": "start-storybook -p 6006", 47 | "build-storybook": "build-storybook", 48 | "build": "rollup -c", 49 | "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix", 50 | "test": "jest" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from "@rollup/plugin-commonjs"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import peerDepsExternal from "rollup-plugin-peer-deps-external"; 4 | import typescript from "rollup-plugin-typescript2"; 5 | 6 | import packageJson from "./package.json"; 7 | 8 | export default { 9 | input: "./src/index.ts", 10 | output: [ 11 | { 12 | file: packageJson.main, 13 | format: "cjs", 14 | sourcemap: true, 15 | }, 16 | { 17 | file: packageJson.module, 18 | format: "esm", 19 | sourcemap: true, 20 | }, 21 | ], 22 | plugins: [peerDepsExternal(), resolve(), commonjs(), typescript()], 23 | }; 24 | -------------------------------------------------------------------------------- /src/hello-world.spec.tsx: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | 3 | import React from "react"; 4 | import { render, screen } from "@testing-library/react"; 5 | import HelloWorld from "./hello-world"; 6 | 7 | test('displays a "Hello World" message', () => { 8 | render(); 9 | expect(screen.getByText("Hello World")).toBeInTheDocument(); 10 | }); 11 | 12 | test("should return true", () => { 13 | expect(true).toBe(true); 14 | }); 15 | -------------------------------------------------------------------------------- /src/hello-world.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HelloWorld from "./hello-world"; 3 | 4 | export default { 5 | title: "Hello World", 6 | component: HelloWorld, 7 | }; 8 | 9 | export const Default = (): React.ReactNode => ; 10 | -------------------------------------------------------------------------------- /src/hello-world.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const HelloWorld: React.FC = () => { 4 | return
Hello World
; 5 | }; 6 | 7 | export default HelloWorld; 8 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as HelloWorld } from "./hello-world"; 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "build", 5 | "module": "esnext", 6 | "target": "es5", 7 | "lib": ["es6", "dom", "es2016", "es2017"], 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports": true, 12 | "esModuleInterop": true 13 | }, 14 | "include": ["src/**/*"], 15 | "exclude": ["node_modules", "build"] 16 | } 17 | --------------------------------------------------------------------------------