mirror of
https://github.com/aleleba/create-react-component-library.git
synced 2025-01-09 05:06:53 -06:00
PR-188649:
Creating the first initial version of the create component library.
This commit is contained in:
parent
0ed870a1a6
commit
55b0b9f2c3
7
.babelrc
Normal file
7
.babelrc
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["@babel/preset-env", {"targets": {"node": "current"}}],
|
||||||
|
"@babel/preset-react",
|
||||||
|
"@babel/preset-typescript"
|
||||||
|
]
|
||||||
|
}
|
6
.env.example
Normal file
6
.env.example
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
#Library Name (Default: ui-library)
|
||||||
|
LIBRARY_NAME=
|
||||||
|
#External CSS (Default: false)
|
||||||
|
EXTERNAL_CSS=
|
||||||
|
#External CSS NAME (Default: index.css)
|
||||||
|
EXTERNAL_CSS_NAME=
|
30
.eslintrc.js
Normal file
30
.eslintrc.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
module.exports = {
|
||||||
|
'env': {
|
||||||
|
'browser': true,
|
||||||
|
'node': true,
|
||||||
|
'es2021': true
|
||||||
|
},
|
||||||
|
'extends': ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
|
||||||
|
'parser': '@typescript-eslint/parser',
|
||||||
|
'parserOptions': {
|
||||||
|
'ecmaFeatures': {
|
||||||
|
'jsx': true
|
||||||
|
},
|
||||||
|
'ecmaVersion': 'latest',
|
||||||
|
'sourceType': 'module'
|
||||||
|
},
|
||||||
|
'plugins': ['react', '@typescript-eslint'],
|
||||||
|
'rules': {
|
||||||
|
'indent': ['error', 'tab'],
|
||||||
|
'linebreak-style': ['error', 'unix'],
|
||||||
|
'quotes': ['error', 'single'],
|
||||||
|
'semi': ['error', 'always'],
|
||||||
|
'eol-last': ['error', 'always'],
|
||||||
|
'@typescript-eslint/no-var-requires': 0
|
||||||
|
},
|
||||||
|
'settings': {
|
||||||
|
'react': {
|
||||||
|
'version': 'detect'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
#nodemodules
|
||||||
|
node_modules
|
||||||
|
.env
|
||||||
|
dist
|
11
PRNameGenerator.ts
Normal file
11
PRNameGenerator.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const PRName = function () {
|
||||||
|
let ID = '';
|
||||||
|
// let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||||
|
const characters = '0123456789';
|
||||||
|
for ( let i = 0; i < 6; i++ ) {
|
||||||
|
ID += characters.charAt(Math.floor(Math.random() * 10));
|
||||||
|
}
|
||||||
|
return 'PR-'+ID;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(PRName());
|
12063
package-lock.json
generated
Normal file
12063
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
66
package.json
Normal file
66
package.json
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"name": "@aleleba/create-react-component-library",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A starter kit for create a React component Library with storybook",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/aleleba/create-react-component-library.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"create",
|
||||||
|
"react",
|
||||||
|
"component",
|
||||||
|
"library",
|
||||||
|
"typescript"
|
||||||
|
],
|
||||||
|
"author": "Alejandro Lembke Barrientos",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/aleleba/create-react-component-library/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/aleleba/create-react-component-library#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.18.2",
|
||||||
|
"@babel/preset-env": "^7.18.2",
|
||||||
|
"@babel/preset-react": "^7.17.12",
|
||||||
|
"@babel/preset-typescript": "^7.17.12",
|
||||||
|
"@babel/register": "^7.17.7",
|
||||||
|
"@types/node": "^17.0.36",
|
||||||
|
"@types/react": "^18.0.9",
|
||||||
|
"@types/react-dom": "^18.0.5",
|
||||||
|
"@types/webpack": "^5.28.0",
|
||||||
|
"babel-loader": "^8.2.5",
|
||||||
|
"clean-webpack-plugin": "^4.0.0",
|
||||||
|
"css-loader": "^6.7.1",
|
||||||
|
"css-minimizer-webpack-plugin": "^4.0.0",
|
||||||
|
"dotenv": "^16.0.1",
|
||||||
|
"eslint": "^8.16.0",
|
||||||
|
"eslint-plugin-react": "^7.30.0",
|
||||||
|
"eslint-webpack-plugin": "^3.1.1",
|
||||||
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
|
"react": "^18.1.0",
|
||||||
|
"react-dom": "^18.1.0",
|
||||||
|
"sass": "^1.52.1",
|
||||||
|
"sass-loader": "^13.0.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
|
"terser-webpack-plugin": "^5.3.1",
|
||||||
|
"ts-loader": "^9.3.0",
|
||||||
|
"typescript": "^4.7.2",
|
||||||
|
"url-loader": "^4.1.1",
|
||||||
|
"webpack": "^5.72.1",
|
||||||
|
"webpack-cli": "^4.9.2",
|
||||||
|
"webpack-node-externals": "^3.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^18.1.0",
|
||||||
|
"react-dom": "^18.1.0"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"./dist"
|
||||||
|
]
|
||||||
|
}
|
4
src/@types/custom.d.ts
vendored
Normal file
4
src/@types/custom.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.svg" {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
19
src/components/Card/index.tsx
Normal file
19
src/components/Card/index.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React, { FC } from "react";
|
||||||
|
import "./style.sass";
|
||||||
|
|
||||||
|
type TCardProps = {
|
||||||
|
title?: string,
|
||||||
|
children?: JSX.Element,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Card: FC<TCardProps> = ({ title, children}) => {
|
||||||
|
return (
|
||||||
|
<div className="Card">
|
||||||
|
<div className="Title">{title}</div>
|
||||||
|
|
||||||
|
<div className="Content">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Card, TCardProps }
|
25
src/components/Card/style.css
Normal file
25
src/components/Card/style.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.Card {
|
||||||
|
background-color: #20b0f3;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 3px solid #20b0f3;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 500px;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Card .Title {
|
||||||
|
padding: 15px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Card .Content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 30px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
}
|
1
src/components/Card/style.min.css
vendored
Normal file
1
src/components/Card/style.min.css
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.Card{background-color:#20b0f3;border-radius:10px;border:3px solid #20b0f3;color:#ffffff;font-weight:700;margin:10px;display:flex;flex-direction:column;min-width:500px;max-width:500px}.Card .Title{padding:15px 0;display:flex;justify-content:center}.Card .Content{flex:1;padding:30px;background-color:#ffffff;color:#000000}
|
22
src/components/Card/style.sass
Normal file
22
src/components/Card/style.sass
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
.Card
|
||||||
|
background-color: #20b0f3
|
||||||
|
border-radius: 10px
|
||||||
|
border: 3px solid #20b0f3
|
||||||
|
color: #ffffff
|
||||||
|
font-weight: 700
|
||||||
|
margin: 10px
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
min-width: 500px
|
||||||
|
max-width: 500px
|
||||||
|
|
||||||
|
.Title
|
||||||
|
padding: 15px 0
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
|
.Content
|
||||||
|
flex: 1
|
||||||
|
padding: 30px
|
||||||
|
background-color: #ffffff
|
||||||
|
color: #000000
|
1
src/components/index.tsx
Normal file
1
src/components/index.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './Card';
|
45
tsconfig.json
Normal file
45
tsconfig.json
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"noEmit": false,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"isolatedModules": false,
|
||||||
|
"typeRoots" : ["./src/@types", "./node_modules/@types"],
|
||||||
|
"types": [
|
||||||
|
"react/next",
|
||||||
|
"react-dom/next",
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": "src",
|
||||||
|
"outDir": "dist",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"paths": {
|
||||||
|
"@components/*": ["components/*"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"**/*"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist",
|
||||||
|
"PRNameGenerator.ts",
|
||||||
|
]
|
||||||
|
}
|
82
webpack.config.ts
Normal file
82
webpack.config.ts
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
import path from 'path';
|
||||||
|
import webpack from 'webpack';
|
||||||
|
import * as dotenv from 'dotenv';
|
||||||
|
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
||||||
|
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
|
||||||
|
import nodeExternals from 'webpack-node-externals';
|
||||||
|
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
|
||||||
|
import TerserPlugin from 'terser-webpack-plugin';
|
||||||
|
import ESLintPlugin from 'eslint-webpack-plugin';
|
||||||
|
|
||||||
|
const dotEnvToParse = dotenv.config();
|
||||||
|
const libraryName = process.env.LIBRARY_NAME ? process.env.LIBRARY_NAME : "ui-library"
|
||||||
|
const externalCss = process.env.EXTERNAL_CSS === 'true' ? true : false
|
||||||
|
const externalCssName = process.env.EXTERNAL_CSS_NAME ? process.env.EXTERNAL_CSS_NAME : 'index.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
entry: './src/components/index.tsx',
|
||||||
|
externals: [nodeExternals()],
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
|
||||||
|
alias: {
|
||||||
|
'@components': path.resolve(__dirname, 'src/components/'),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mode: 'production',
|
||||||
|
output: {
|
||||||
|
filename: 'index.js',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
library: libraryName,
|
||||||
|
libraryTarget: 'umd',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new CleanWebpackPlugin(),
|
||||||
|
...(externalCss === true ? [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: externalCssName,
|
||||||
|
}),
|
||||||
|
] : []),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': JSON.stringify(dotEnvToParse.parsed),
|
||||||
|
}),
|
||||||
|
new ESLintPlugin(),
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(tsx|ts)$/, loader: "ts-loader",
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|ts|tsx)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(css|sass|scss)$/,
|
||||||
|
use: [
|
||||||
|
externalCss === true ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(ttf|otf|eot|woff|woff2)$/,
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
name: 'assets/fonts/[name].[ext]',
|
||||||
|
esModule: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
minimize: true,
|
||||||
|
minimizer: [
|
||||||
|
new CssMinimizerPlugin(),
|
||||||
|
new TerserPlugin(),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user