0
mkdir react-components-library-starter
1

2
cd react-components-library-starter
3

4
yarn init
5
# question name (react-components-library-starter):
6
# question version (1.0.0):
7
# question description:
8
# question entry point (index.js):
9
# question repository url (https://github.com/itcode-dev/react-components-library-starter):
10
# question author (RWB0104 <psj2716@gmail.com>):
11
# question license (MIT):
12
# question private: false
13

14
mkdir src

0
yarn add -D react @types/react

0
yarn add -D typescript

0
vim tsconfig.json

0
{
1
    "compilerOptions": {
2
        "target": "es5",
3
        "esModuleInterop": true,
4
        "forceConsistentCasingInFileNames": true,
5
        "strict": true,
6
        "skipLibCheck": true,
7
        "jsx": "react",
8
        "module": "ESNext",
9
        "declaration": true,
10
        "declarationDir": "./dist",
11
        "sourceMap": false,
12
        "outDir": "./dist",
13
        "moduleResolution": "node",
14
        "allowSyntheticDefaultImports": true,
15
        "emitDeclarationOnly": true,
16
        "removeComments": true
17
    },
18
    "include": [
19
        "./src"
20
    ],
21
    "exclude": [
22
        "./dist",
23
        "./node_modules",
24
        "./src/**/*.test.tsx",
25
        "./src/**/*.stories.tsx",
26
    ]
27
}

0
yarn add classnames style-inject
1
yarn add -D postcss sass

0
yarn add -D rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript rollup-plugin-peer-deps-external rollup-plugin-postcss

0
vim rollup.config.js

0
/**
1
 * Rollup 설정 모듈
2
 *
3
 * @author RWB
4
 * @since 2022.06.06 Mon 17:44:31
5
 */
6

7
import babel from '@rollup/plugin-babel';
8
import commonjs from '@rollup/plugin-commonjs';
9
import { nodeResolve } from '@rollup/plugin-node-resolve';
10
import typescript from '@rollup/plugin-typescript';
11
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
12
import postcss from 'rollup-plugin-postcss';
13

14
const extensions = [ 'js', 'jsx', 'ts', 'tsx', 'mjs' ];
15

16
const pkg = require('./package.json')
17

18
const config = [
19
    {
20
        external: [ /node_modules/ ],
21
        input: './src/index.ts',
22
        output: [
23
            {
24
                dir: './dist',
25
                format: 'cjs',
26
                preserveModules: true,
27
                preserveModulesRoot: 'src'
28
            },
29
            {
30
                file: pkg.module,
31
                format: 'es'
32
            }
33
            ,
34
            {
35
                name: pkg.name,
36
                file: pkg.browser,
37
                format: 'umd'
38
            }
39
        ],
40
        plugins: [
41
            nodeResolve({ extensions }),
42
            babel({
43
                exclude: 'node_modules/**',
44
                extensions,
45
                include: [ 'src/**/*' ]
46
            }),
47
            commonjs({ include: 'node_modules/**' }),
48
            peerDepsExternal(),
49
            typescript({ tsconfig: './tsconfig.json' }),
50
            postcss({
51
                extract: false,
52
                inject: (cssVariableName) => `import styleInject from 'style-inject';styleInject(${cssVariableName});`,
53
                modules: true,
54
                sourceMap: false,
55
                use: [ 'sass' ]
56
            })
57
        ]
58
    }
59
];
60

61
export default config;

0
npx storybook init --builder webpack5
1

2
yarn add -D @storybook/preset-scss css-loader sass-loader style-loader react-dom

0
module.exports = {
1
    "stories": [
2
        "../src/**/*.stories.mdx",
3
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
4
    ],
5
    "addons": [
6
        "@storybook/addon-links",
7
        "@storybook/addon-essentials",
8
        "@storybook/addon-interactions",
9
        // 추가
10
        "@storybook/preset-scss"
11
    ],
12
    "framework": "@storybook/react",
13
    "core": {
14
        "builder": "@storybook/builder-webpack5"
15
    }
16
}

0
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-sort-keys-fix eslint-plugin-storybook

0
module.exports = {
1
    env: {
2
        browser: true,
3
        node: true
4
    },
5
    extends: [ 'airbnb', 'airbnb/hooks', 'eslint:recommended', 'plugin:react/recommended', 'plugin:import/recommended', 'plugin:storybook/recommended' ],
6
    ignorePatterns: [ '.storybook', '*.d.ts', 'node_modules', 'build', 'dist', '**/env/*.js' ],
7
    overrides: [
8
        {
9
            files: [ '*.ts', '*.tsx' ],
10
            rules: { 'no-undef': 'off' }
11
        }
12
    ],
13
    parser: '@typescript-eslint/parser',
14
    parserOptions: { warnOnUnsupportedTypeScriptVersion: false },
15
    plugins: [ '@typescript-eslint', 'sort-keys-fix', 'prettier' ],
16
    rules: {
17
        '@typescript-eslint/ban-ts-comment': [
18
            'error',
19
            { 'ts-ignore': 'allow-with-description' }
20
        ],
21
        '@typescript-eslint/no-explicit-any': 'warn',
22
        '@typescript-eslint/no-unused-vars': 'error',
23
        'array-bracket-spacing': [
24
            'error',
25
            'always',
26
            {
27
                arraysInArrays: false,
28
                objectsInArrays: false
29
            }
30
        ],
31
        'brace-style': [ 'error', 'allman' ],
32
        'comma-dangle': [ 'error', 'never' ],
33
        'eol-last': [ 'error', 'never' ],
34
        'import/extensions': 'off',
35
        'import/named': 'off',
36
        'import/no-anonymous-default-export': 'off',
37
        'import/no-cycle': 'off',
38
        'import/no-extraneous-dependencies': 'off',
39
        'import/no-named-as-default': 'off',
40
        'import/no-unresolved': 'off',
41
        'import/order': [
42
            'error',
43
            {
44
                alphabetize: {
45
                    caseInsensitive: true,
46
                    order: 'asc'
47
                },
48
                groups: [ 'external', 'builtin', 'internal', 'sibling', 'parent', 'index' ],
49
                'newlines-between': 'always'
50
            }
51
        ],
52
        indent: [ 'error', 'tab' ],
53
        'jsx-a11y/control-has-associated-label': 'off',
54
        'jsx-quotes': [ 'error', 'prefer-single' ],
55
        'linebreak-style': 'off',
56
        'max-len': 'off',
57
        'no-restricted-exports': 'off',
58
        'no-tabs': [ 'error', { allowIndentationTabs: true }],
59
        'no-unused-vars': 'off',
60
        'object-curly-newline': [ 'error', {
61
            ExportDeclaration: 'never',
62
            ImportDeclaration: 'never',
63
            ObjectExpression: {
64
                minProperties: 3,
65
                multiline: true
66
            },
67
            ObjectPattern: 'never'
68
        }],
69
        'react-hooks/exhaustive-deps': 'warn',
70
        'react/button-has-type': 'off',
71
        'react/destructuring-assignment': 'off',
72
        'react/function-component-definition': 'off',
73
        'react/jsx-curly-brace-presence': [
74
            'error',
75
            {
76
                children: 'never',
77
                props: 'never'
78
            }
79
        ],
80
        'react/jsx-filename-extension': 'off',
81
        'react/jsx-indent': [ 'error', 'tab' ],
82
        'react/jsx-props-no-spreading': 'off',
83
        'react/jsx-sort-props': [
84
            'error',
85
            {
86
                callbacksLast: true,
87
                ignoreCase: true,
88
                multiline: 'last',
89
                noSortAlphabetically: false,
90
                reservedFirst: false,
91
                shorthandFirst: false,
92
                shorthandLast: true
93
            }
94
        ],
95
        'react/prop-types': 'off',
96
        'react/react-in-jsx-scope': 'off',
97
        'react/require-default-props': 'off',
98
        'require-jsdoc': 'off',
99
        'sort-keys-fix/sort-keys-fix': 'error'
100
    },
101
    settings: {
102
        'import/parsers': { '@typescript-eslint/parser': [ '.ts', '.tsx', '.js' ] },
103
        react: { version: 'detect' }
104
    }
105
};

0
.storybook/
1
src/
2
rollup.config.js
3
tsconfig.json
4
yarn.lock

0
{
1
    "name": "@itcode-dev/react-components-library-starter",
2
    "version": "3.0.1",
3
    "main": "./dist/index.js",
4
    "module": "./dist/index.es.js",
5
    "browser": "./dist/index.umd.js",
6
    "types": "./dist/index.d.ts",
7
    "private": false,
8
    "script": {
9
        "build": "rollup -c"
10
    }
11
}

0
npm login
1
# username
2
# password
3
# email
4
# email otp
5

6
yarn publish --access public

0
npm i @itcode-dev/react-components-library-starter
1

2
yarn add @itcode-dev/react-components-library-starter

0
import Button from '@itcode-dev/react-components-library-starter/dist/atom/Button';
1
import Input from '@itcode-dev/react-components-library-starter/dist/atom/Input';