PR-188649:

Creating the first initial version of the create component library.

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        ["@babel/preset-env", {"targets": {"node": "current"}}],
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ]
+}

.env.example

@@ -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=

.eslintrc.js

@@ -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'
+      }
+    }
+};

.gitignore

@@ -0,0 +1,4 @@
+#nodemodules
+node_modules
+.env
+dist

PRNameGenerator.ts

@@ -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()); 

package.json

@@ -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"
+  ]
+}

src/@types/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}

src/components/Card/index.tsx

@@ -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 }

src/components/Card/style.css

@@ -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;
+}

src/components/Card/style.min.css

@@ -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}

src/components/Card/style.sass

@@ -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

src/components/index.tsx

@@ -0,0 +1 @@
+export * from './Card';

tsconfig.json

@@ -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",
+    ]
+}

webpack.config.ts

@@ -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(),
+		],
+	},
+}