├── packages
└── universal
│ ├── jest
│ └── setupTests.ts
│ ├── .prettierrc
│ ├── src
│ └── components
│ │ ├── Button
│ │ ├── lib
│ │ │ ├── Button.d.ts
│ │ │ ├── Button.js.map
│ │ │ └── Button.js
│ │ ├── tsconfig.json
│ │ ├── src
│ │ │ ├── Button.stories.tsx
│ │ │ └── Button.tsx
│ │ └── package.json
│ │ └── Welcome
│ │ ├── lib
│ │ ├── Welcome.d.ts
│ │ ├── Welcome.js.map
│ │ └── Welcome.js
│ │ ├── tsconfig.json
│ │ ├── src
│ │ ├── Welcome.tsx
│ │ └── Welcome.stories.tsx
│ │ └── package.json
│ ├── universal.ts
│ ├── README.md
│ ├── templates
│ └── component
│ │ ├── component.tsx.hbs
│ │ ├── tsconfig.json.hbs
│ │ ├── component.stories.tsx.hbs
│ │ └── package.json.hbs
│ ├── lib
│ ├── universal.js.map
│ └── universal.js
│ ├── .stylelintrc
│ ├── tsconfig.json
│ ├── jest.config.js
│ ├── babel.config.js
│ ├── .storybook
│ └── main.js
│ ├── .eslintrc
│ ├── plopfile.js
│ └── package.json
├── lerna.json
├── package.json
├── .gitignore
└── README.md
/packages/universal/jest/setupTests.ts:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/universal/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "all"
4 | }
5 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "independent",
3 | "npmClient": "yarn",
4 | "useWorkspaces": true,
5 | "packages": ["packages/**"]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/lib/Button.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | declare function Button(): JSX.Element;
3 | export default Button;
4 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/lib/Welcome.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | declare function Welcome(): JSX.Element;
3 | export default Welcome;
4 |
--------------------------------------------------------------------------------
/packages/universal/universal.ts:
--------------------------------------------------------------------------------
1 | /* INJECT_IMPORT */
2 | export { default as Button } from './src/components/Button';
3 | export { default as Welcome } from './src/components/Welcome';
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "root",
3 | "private": true,
4 | "devDependencies": {
5 | "lerna": "^3.13.4"
6 | },
7 | "workspaces": [
8 | "packages/**"
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/packages/universal/README.md:
--------------------------------------------------------------------------------
1 | # `universal`
2 |
3 | > TODO: description
4 |
5 | ## Usage
6 |
7 | ```
8 | const universal = require('universal');
9 |
10 | // TODO: DEMONSTRATE API
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/universal/templates/component/component.tsx.hbs:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function {{pascalCase name}}() {
4 | return {{pascalCase name}}
;
5 | }
6 |
7 | export default {{pascalCase name}};
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .vscode/
3 | node_modules/
4 | build
5 | .DS_Store
6 | *.tgz
7 | my-app*
8 | template/src/__tests__/__snapshots__/
9 | lerna-debug.log
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | /.changelog
14 | .npm/
15 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "rootDir": "src",
6 | "outDir": "lib",
7 | "declarationDir": "lib"
8 | },
9 | "include": ["src"]
10 | }
11 |
--------------------------------------------------------------------------------
/packages/universal/templates/component/tsconfig.json.hbs:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "rootDir": "src",
6 | "outDir": "lib",
7 | "declarationDir": "lib"
8 | },
9 | "include": ["src"]
10 | }
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "rootDir": "src",
6 | "outDir": "lib",
7 | "declarationDir": "lib"
8 | },
9 | "include": ["src"]
10 | }
11 |
--------------------------------------------------------------------------------
/packages/universal/templates/component/component.stories.tsx.hbs:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import {{pascalCase name}} from './{{pascalCase name}}';
4 |
5 | storiesOf('{{pascalCase name}}', module).add('Storybook', () => <{{pascalCase name}} />);
6 |
--------------------------------------------------------------------------------
/packages/universal/lib/universal.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../universal.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA;;AACA","sourcesContent":["/* INJECT_IMPORT */\nexport { default as Button } from './src/components/Button';\nexport { default as Welcome } from './src/components/Welcome';\n"],"file":"universal.js"}
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/src/Welcome.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components/native';
3 |
4 | const StyledText = styled.Text`
5 | color: black;
6 | `;
7 |
8 | function Welcome() {
9 | return Welcome;
10 | }
11 |
12 | export default Welcome;
13 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/src/Welcome.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Welcome from './Welcome';
3 |
4 | export default {
5 | title: 'Welcome',
6 | component: Welcome,
7 | };
8 |
9 | export const ToStorybook = () => ;
10 |
11 | ToStorybook.story = {
12 | name: 'to Storybook',
13 | };
14 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/src/Button.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { action } from '@storybook/addon-actions';
3 | import Button from './Button';
4 |
5 | export default {
6 | title: 'Button',
7 | component: Button,
8 | };
9 |
10 | export const Text = () => ;
11 |
--------------------------------------------------------------------------------
/packages/universal/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "processors": ["stylelint-processor-styled-components"],
3 | "extends": [
4 | "stylelint-config-recommended",
5 | "stylelint-config-styled-components",
6 | "stylelint-config-prettier"
7 | ],
8 | "plugins": ["stylelint-order"],
9 | "rules": {
10 | "order/properties-alphabetical-order": true
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/src/Button.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 |
3 | interface Props {
4 | onClick?: () => void;
5 | children: ReactNode;
6 | }
7 |
8 | function Button({ onClick, children }: Props) {
9 | return (
10 |
13 | );
14 | }
15 |
16 | export default Button;
17 |
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/lib/Welcome.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../src/Welcome.tsx"],"names":["StyledText","styled","Text","Welcome"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,MAAMA,UAAU,GAAGC,gBAAOC,IAAV;AAAA;AAAA;AAAA,0CAAhB;;AAKA,SAASC,OAAT,GAAmB;AACjB,SAAO,6BAAC,UAAD,kBAAP;AACD;;eAEcA,O","sourcesContent":["import React from 'react';\nimport styled from 'styled-components/native';\n\nconst StyledText = styled.Text`\n background-color: gray;\n color: black;\n`;\n\nfunction Welcome() {\n return Welcome;\n}\n\nexport default Welcome;\n"],"file":"Welcome.js"}
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@universal/button",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "main": "lib/Button.js",
6 | "types": "lib/Button.d.ts",
7 | "scripts": {
8 | "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
9 | "build:es:watch": "BABEL_ENV=build babel src --root-mode upward --watch --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
10 | "build:types": "tsc --project tsconfig.json --noEmit false --emitDeclarationOnly"
11 | },
12 | "files": [
13 | "lib"
14 | ]
15 | }
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@universal/welcome",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "main": "lib/Welcome.js",
6 | "types": "lib/Welcome.d.ts",
7 | "scripts": {
8 | "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
9 | "build:es:watch": "BABEL_ENV=build babel src --root-mode upward --watch --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
10 | "build:types": "tsc --project tsconfig.json --noEmit false --emitDeclarationOnly"
11 | },
12 | "files": [
13 | "lib"
14 | ]
15 | }
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/lib/Button.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../src/Button.tsx"],"names":["StyledText","styled","Text","Button"],"mappings":";;;;;;;AACA;;AACA;;;;AAEA,MAAMA,UAAU,GAAGC,gBAAOC,IAAV;AAAA;AAAA;AAAA,kBAAhB;;AAIA,SAASC,MAAT,GAA+B;AAC7B,SACE;AAAQ,IAAA,IAAI,EAAC;AAAb,KACE,6BAAC,UAAD,mBADF,CADF;AAKD;;eAEcA,M","sourcesContent":["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react';\nimport styled from 'styled-components/native';\n\nconst StyledText = styled.Text`\n color: red;\n`;\n\nfunction Button(): JSX.Element {\n return (\n \n );\n}\n\nexport default Button;\n"],"file":"Button.js"}
--------------------------------------------------------------------------------
/packages/universal/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "skipLibCheck": true,
6 | "jsx": "react-native",
7 | "declaration": true,
8 | "noEmit": true,
9 | "strict": true,
10 | "moduleResolution": "node",
11 | "allowSyntheticDefaultImports": true,
12 | "removeComments": true,
13 | "baseUrl": ".",
14 | "esModuleInterop": true
15 | },
16 | "include": ["src"],
17 | "exclude": [
18 | "**/*.stories.tsx",
19 | "**/*.story.tsx",
20 | "**/*.test.tsx",
21 | "**/*.d.ts"
22 | ],
23 | "awesomeTypescriptLoaderOptions": {
24 | "useBabel": true,
25 | "babelCore": "@babel/core"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/universal/templates/component/package.json.hbs:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@universal/{{dashCase name}}",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "main": "lib/{{pascalCase name}}.js",
6 | "types": "lib/{{pascalCase name}}.d.ts",
7 | "scripts": {
8 | "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
9 | "build:es:watch": "BABEL_ENV=build babel src --root-mode upward --watch --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
10 | "build:types": "tsc --project tsconfig.json --noEmit false --emitDeclarationOnly"
11 | },
12 | "files": [
13 | "lib"
14 | ]
15 | }
--------------------------------------------------------------------------------
/packages/universal/lib/universal.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | Object.defineProperty(exports, "Button", {
7 | enumerable: true,
8 | get: function () {
9 | return _Button.default;
10 | }
11 | });
12 | Object.defineProperty(exports, "Welcome", {
13 | enumerable: true,
14 | get: function () {
15 | return _Welcome.default;
16 | }
17 | });
18 |
19 | var _Button = _interopRequireDefault(require("./src/components/Button"));
20 |
21 | var _Welcome = _interopRequireDefault(require("./src/components/Welcome"));
22 |
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | //# sourceMappingURL=universal.js.map
--------------------------------------------------------------------------------
/packages/universal/src/components/Welcome/lib/Welcome.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.default = void 0;
7 |
8 | var _react = _interopRequireDefault(require("react"));
9 |
10 | var _native = _interopRequireDefault(require("styled-components/native"));
11 |
12 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13 |
14 | const StyledText = _native.default.Text.withConfig({
15 | displayName: "Welcome__StyledText",
16 | componentId: "sc-13g6phe-0"
17 | })(["background-color:gray;color:black;"]);
18 |
19 | function Welcome() {
20 | return _react.default.createElement(StyledText, null, "Welcome");
21 | }
22 |
23 | var _default = Welcome;
24 | exports.default = _default;
25 | //# sourceMappingURL=Welcome.js.map
--------------------------------------------------------------------------------
/packages/universal/src/components/Button/lib/Button.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.default = void 0;
7 |
8 | var _react = _interopRequireDefault(require("react"));
9 |
10 | var _native = _interopRequireDefault(require("styled-components/native"));
11 |
12 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13 |
14 | const StyledText = _native.default.Text.withConfig({
15 | displayName: "Button__StyledText",
16 | componentId: "jsb92n-0"
17 | })(["color:red;"]);
18 |
19 | function Button() {
20 | return _react.default.createElement("button", {
21 | type: "button"
22 | }, _react.default.createElement(StyledText, null, "Click me"));
23 | }
24 |
25 | var _default = Button;
26 | exports.default = _default;
27 | //# sourceMappingURL=Button.js.map
--------------------------------------------------------------------------------
/packages/universal/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | clearMocks: true,
3 | coverageDirectory: 'coverage',
4 | coverageReporters: ['text', 'clover'],
5 | coverageThreshold: {
6 | global: {
7 | branches: 80,
8 | functions: 80,
9 | lines: 80,
10 | statements: 80,
11 | },
12 | },
13 | globals: {
14 | 'ts-jest': {
15 | extends: './babel.config.js',
16 | },
17 | },
18 | moduleFileExtensions: ['ts', 'tsx', 'js'],
19 | modulePathIgnorePatterns: ['dist'],
20 | moduleNameMapper: {
21 | '@universal/(.+)$': 'packages/universal/src/$1/src',
22 | },
23 | notify: true,
24 | notifyMode: 'always',
25 | roots: ['packages'],
26 | testMatch: ['**/__tests__/*.+(ts|tsx|js)', '**/*.test.+(ts|tsx|js)'],
27 | transform: {
28 | '^.+\\.(ts|tsx)$': 'ts-jest',
29 | },
30 | setupFilesAfterEnv: ['jest/setupTests.ts'],
31 | };
32 |
--------------------------------------------------------------------------------
/packages/universal/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = api => {
2 | api.cache(true);
3 | return {
4 | presets: [
5 | [
6 | '@babel/env',
7 | {
8 | targets: {
9 | browsers: 'Last 2 Chrome versions, Firefox ESR',
10 | node: 'current',
11 | },
12 | },
13 | ],
14 | [
15 | '@babel/preset-react',
16 | {
17 | development: process.env.BABEL_ENV !== 'build',
18 | },
19 | ],
20 | '@babel/preset-typescript',
21 | ],
22 | plugins: [
23 | ['react-native-web', { commonjs: true }],
24 | 'babel-plugin-styled-components',
25 | ],
26 | env: {
27 | build: {
28 | ignore: [
29 | '**/*.test.tsx',
30 | '**/*.test.ts',
31 | '**/*.story.tsx',
32 | '**/*.stories.tsx',
33 | '__snapshots__',
34 | '__tests__',
35 | '__stories__',
36 | ],
37 | },
38 | },
39 | ignore: ['node_modules'],
40 | };
41 | };
42 |
--------------------------------------------------------------------------------
/packages/universal/.storybook/main.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stories: ['../src/**/*.stories.(ts|tsx)'],
3 | addons: [
4 | // '@storybook/addon-a11y/register',
5 | '@storybook/addon-actions/register',
6 | '@storybook/addon-backgrounds/register',
7 | // '@storybook/addon-jest/register',
8 | '@storybook/addon-knobs/register',
9 | '@storybook/addon-links/register',
10 | '@storybook/addon-options/register',
11 | // '@storybook/addon-storysource/register',
12 | // '@storybook/addon-viewport/register',
13 | {
14 | name: '@storybook/addon-docs/register',
15 | options: { configureJSX: true },
16 | },
17 | ],
18 | webpackFinal: async config => {
19 | config.module.rules.push({
20 | test: /\.(ts|tsx)$/,
21 | use: [
22 | {
23 | loader: require.resolve('awesome-typescript-loader'),
24 | },
25 | {
26 | loader: require.resolve('react-docgen-typescript-loader'),
27 | },
28 | ],
29 | });
30 | config.resolve.alias = {
31 | 'react-native': 'react-native-web',
32 | };
33 | config.resolve.extensions.push('.ts', '.tsx');
34 | return config;
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://lerna.js.org/)
2 |
3 | # react-native-web-design-system-starter-kit
4 |
5 | ## Work in progress.
6 |
7 | Fork this monorepo starter kit to create your own design system and use react-native primitives to build components in isolation and use them across your mobile and web apps.
8 |
9 | - lerna
10 | - storybook
11 | - react-native-web
12 | - babel
13 | - jest
14 | - eslint
15 | - styled-components
16 | - stylelint
17 | - prettier
18 |
19 | ## How?
20 |
21 | - `lerna boostrap` at the root of the repo to install dependencies
22 | - `cd packages/universal && yarn run storybook` to launch storybook.
23 | - Check the `package.json` to see all the scripts you can run. Better docs coming soon. ;-)
24 |
25 | ## TODO
26 |
27 | - [ ] Configure jest and storybook addons.
28 |
29 | - [ ] Examples for unit tests.
30 |
31 | - [ ] Structural Testing (StoryShots).
32 |
33 | - [x] Component files creation script using `plop` to create a new component without having to write any boilerplate. `yarn run generate component HelloWorld`
34 |
35 | - [ ] Real react-native components examples working on both mobile and web.
36 |
--------------------------------------------------------------------------------
/packages/universal/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "ecmaVersion": 2018,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true
8 | }
9 | },
10 | "env": {
11 | "browser": true,
12 | "node": true,
13 | "es6": true,
14 | "jest": true
15 | },
16 | "plugins": ["react", "jsx-a11y", "import", "prettier", "@typescript-eslint"],
17 | "extends": [
18 | "airbnb",
19 | "plugin:@typescript-eslint/eslint-recommended",
20 | "prettier",
21 | "prettier/react",
22 | "prettier/@typescript-eslint"
23 | ],
24 | "settings": {
25 | "import/resolver": {
26 | "node": {
27 | "paths": ["src"],
28 | "extensions": [".ts", ".tsx"]
29 | }
30 | },
31 | "react": {
32 | "pragma": "React",
33 | "version": "detect"
34 | }
35 | },
36 | "rules": {
37 | "prettier/prettier": ["error"],
38 | "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
39 | "@typescript-eslint/no-unused-vars": ["error"],
40 | "no-unused-vars": "off",
41 | "comma-dangle": "error",
42 | "import/extensions": [
43 | "error",
44 | "ignorePackages",
45 | {
46 | "js": "never",
47 | "ts": "never",
48 | "mjs": "never",
49 | "jsx": "never",
50 | "tsx": "never"
51 | }
52 | ],
53 | "import/no-extraneous-dependencies": [
54 | "warn",
55 | { "packageDir": "./packages/universal" }
56 | ]
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/packages/universal/plopfile.js:
--------------------------------------------------------------------------------
1 | module.exports = plop => {
2 | plop.setGenerator('component', {
3 | description: 'Create a component',
4 | // User input prompts provided as arguments to the template
5 | prompts: [
6 | {
7 | // Raw text input
8 | type: 'input',
9 | // Variable name for this input
10 | name: 'name',
11 | // Prompt to display on command line
12 | message: 'What is your component name?',
13 | },
14 | ],
15 | actions: [
16 | {
17 | // Add a new file
18 | type: 'add',
19 | // Path for the new file
20 | path: 'src/components/{{pascalCase name}}/src/{{pascalCase name}}.tsx',
21 | // Handlebars template used to generate content of new file
22 | templateFile: 'templates/component/component.tsx.hbs',
23 | },
24 | {
25 | // Add a new file
26 | type: 'add',
27 | // Path for the new file
28 | path:
29 | 'src/components/{{pascalCase name}}/src/{{pascalCase name}}.stories.tsx',
30 | // Handlebars template used to generate content of new file
31 | templateFile: 'templates/component/component.stories.tsx.hbs',
32 | },
33 | {
34 | // Add a new file
35 | type: 'add',
36 | // Path for the new file
37 | path: 'src/components/{{pascalCase name}}/package.json',
38 | // Handlebars template used to generate content of new file
39 | templateFile: 'templates/component/package.json.hbs',
40 | },
41 | {
42 | // Add a new file
43 | type: 'add',
44 | // Path for the new file
45 | path: 'src/components/{{pascalCase name}}/tsconfig.json',
46 | // Handlebars template used to generate content of new file
47 | templateFile: 'templates/component/tsconfig.json.hbs',
48 | },
49 | {
50 | // Action type 'append' injects a template into an existing file
51 | type: 'append',
52 | path: 'universal.ts',
53 | // Pattern tells plop where in the file to inject the template
54 | pattern: `/* INJECT_IMPORT */`,
55 | template: `export { default as {{pascalCase name}} } from './src/components/{{pascalCase name}}';`,
56 | },
57 | ],
58 | });
59 | };
60 |
--------------------------------------------------------------------------------
/packages/universal/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "universal",
3 | "version": "1.0.0",
4 | "description": "Universal components library",
5 | "keywords": [
6 | "react",
7 | "react-native",
8 | "react-native-web",
9 | "storybook",
10 | "babel",
11 | "typescript",
12 | "eslint",
13 | "styled-components"
14 | ],
15 | "author": "Gab Labelle ",
16 | "homepage": "https://github.com/gablabelle/",
17 | "license": "MIT",
18 | "main": "lib/universal.js",
19 | "directories": {
20 | "lib": "lib",
21 | "test": "__tests__"
22 | },
23 | "files": [
24 | "lib"
25 | ],
26 | "scripts": {
27 | "build": "lerna run --parallel 'build:es'",
28 | "watch": "lerna run --parallel 'build:es:watch'",
29 | "build:es": "BABEL_ENV=build babel universal.ts --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
30 | "build:es:watch": "BABEL_ENV=build babel universal.ts --root-mode upward --watch --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
31 | "postbuild": "lerna run --parallel 'build:types'",
32 | "type-check": "tsc --noEmit",
33 | "type-check:watch": "yarn run type-check -- --watch",
34 | "test": "echo \"Error: run tests from root\" && exit 1",
35 | "lint:ts": "eslint 'src/**/*.ts{,x}'",
36 | "storybook": "start-storybook -p 6006",
37 | "build-storybook": "build-storybook",
38 | "generate": "plop"
39 | },
40 | "dependencies": {
41 | "lerna": "^3.13.4",
42 | "react": "^16.10.2",
43 | "react-dom": "^16.10.2",
44 | "react-native-web": "^0.11.7",
45 | "styled-components": "^5.0.0-beta.9"
46 | },
47 | "devDependencies": {
48 | "@babel/cli": "^7.6.4",
49 | "@babel/core": "^7.6.4",
50 | "@babel/plugin-proposal-class-properties": "^7.5.5",
51 | "@babel/plugin-proposal-numeric-separator": "^7.2.0",
52 | "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
53 | "@babel/preset-env": "^7.6.3",
54 | "@babel/preset-react": "^7.6.3",
55 | "@babel/preset-typescript": "^7.6.0",
56 | "@storybook/addon-a11y": "^5.3.9",
57 | "@storybook/addon-actions": "^5.3.9",
58 | "@storybook/addon-backgrounds": "^5.3.9",
59 | "@storybook/addon-docs": "^5.3.9",
60 | "@storybook/addon-jest": "^5.3.9",
61 | "@storybook/addon-knobs": "^5.3.9",
62 | "@storybook/addon-links": "^5.3.9",
63 | "@storybook/addon-options": "^5.3.9",
64 | "@storybook/addon-storysource": "^5.3.9",
65 | "@storybook/addon-viewport": "^5.3.9",
66 | "@storybook/addons": "^5.3.9",
67 | "@storybook/react": "^5.3.9",
68 | "@testing-library/jest-dom": "^4.1.2",
69 | "@testing-library/react": "^9.3.0",
70 | "@types/enzyme": "^3.10.3",
71 | "@types/enzyme-adapter-react-16": "^1.0.5",
72 | "@types/jest": "^24.0.18",
73 | "@types/node": "^12.7.12",
74 | "@types/react": "^16.9.5",
75 | "@types/react-dom": "^16.9.1",
76 | "@types/react-native": "^0.60.19",
77 | "@types/styled-components": "^4.1.19",
78 | "@typescript-eslint/eslint-plugin": "^2.4.0",
79 | "@typescript-eslint/parser": "^2.4.0",
80 | "awesome-typescript-loader": "^5.2.1",
81 | "babel-loader": "^8.0.6",
82 | "babel-plugin-react-native-web": "^0.11.7",
83 | "babel-plugin-styled-components": "^1.10.6",
84 | "enzyme": "^3.10.0",
85 | "enzyme-adapter-react-16": "^1.15.1",
86 | "enzyme-to-json": "^3.0.0-beta6",
87 | "eslint": "^6.5.1",
88 | "eslint-config-airbnb": "^18.0.1",
89 | "eslint-config-prettier": "^6.4.0",
90 | "eslint-plugin-import": "^2.18.2",
91 | "eslint-plugin-jsx-a11y": "^6.2.3",
92 | "eslint-plugin-prettier": "^3.1.1",
93 | "eslint-plugin-react": "^7.16.0",
94 | "eslint-plugin-react-hooks": "^2.1.2",
95 | "jest": "^24.9.0",
96 | "plop": "^2.5.2",
97 | "prettier": "^1.18.2",
98 | "react-docgen-typescript-loader": "^3.3.0",
99 | "stylelint": "^11.1.1",
100 | "stylelint-config-prettier": "^6.0.0",
101 | "stylelint-config-recommended": "^3.0.0",
102 | "stylelint-config-styled-components": "^0.1.1",
103 | "stylelint-order": "^3.1.1",
104 | "stylelint-processor-styled-components": "^1.8.0",
105 | "ts-jest": "^24.1.0",
106 | "typescript": "^3.6.4"
107 | }
108 | }
--------------------------------------------------------------------------------