mirror of
https://github.com/aleleba/create-react-component-library.git
synced 2025-01-09 21:26:58 -06:00
PR-188649:
Adding Readme file and npx command.
This commit is contained in:
parent
aa4ac6761b
commit
889b8917f8
58
README.md
Normal file
58
README.md
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
# Create React Component Library
|
||||||
|
|
||||||
|
This project aims to have a starter kit for creating a new React Library with storybook.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
To create a new project run in the terminal:
|
||||||
|
```
|
||||||
|
npx @aleleba/create-react-component-library react-library
|
||||||
|
```
|
||||||
|
Then run:
|
||||||
|
```
|
||||||
|
cd react-library
|
||||||
|
```
|
||||||
|
You will need to create a new .env file at the root of the project for global config.
|
||||||
|
This is an exaple of config.
|
||||||
|
```
|
||||||
|
#Library Name (Default: ui-library)
|
||||||
|
LIBRARY_NAME=ui-library
|
||||||
|
#External CSS (Default: false)
|
||||||
|
EXTERNAL_CSS=true
|
||||||
|
#External CSS NAME (Default: index.css)
|
||||||
|
EXTERNAL_CSS_NAME=other_name.css
|
||||||
|
```
|
||||||
|
|
||||||
|
### For Development
|
||||||
|
In the terminal run:
|
||||||
|
```
|
||||||
|
npm run start
|
||||||
|
```
|
||||||
|
You will find the components on:
|
||||||
|
```
|
||||||
|
scr/components
|
||||||
|
```
|
||||||
|
You will find stories of storybook on:
|
||||||
|
```
|
||||||
|
scr/stories
|
||||||
|
```
|
||||||
|
|
||||||
|
This will start the app-library in development mode, also it have Hot Reloading!
|
||||||
|
Enjoy coding!
|
||||||
|
|
||||||
|
### For Production
|
||||||
|
In the terminal run:
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
It will create a dist folder and run:
|
||||||
|
```
|
||||||
|
npm publish
|
||||||
|
```
|
||||||
|
This will publish on npm your package. (Remember to delete on package.json)
|
||||||
|
```
|
||||||
|
"bin": "./bin/cli.js",
|
||||||
|
```
|
||||||
|
and delete bin folder or modify node bash to use npx.
|
||||||
|
|
||||||
|
## Cheers
|
||||||
|
Hope you enjoy this proyect! Sincerely Alejandro Lembke Barrientos.
|
29
bin/cli.js
Normal file
29
bin/cli.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
const { execSync } = require('child_process');
|
||||||
|
|
||||||
|
const runCommand = command => {
|
||||||
|
try{
|
||||||
|
execSync(`${command}`, {stdio: 'inherit'});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Failed to execute ${command}`, e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const repoName = process.argv[2];
|
||||||
|
const gitCheckoutCommand = `git clone --depth 1 https://github.com/aleleba/create-react-component-library ${repoName}`;
|
||||||
|
const installDepsCommand = `cd ${repoName} && npm install`;
|
||||||
|
|
||||||
|
console.log(`Cloning the repository with name ${repoName}`);
|
||||||
|
const checkedOut = runCommand(gitCheckoutCommand);
|
||||||
|
if(!checkedOut) process.exit(-1);
|
||||||
|
|
||||||
|
console.log(`Installing dependencies for ${repoName}`);
|
||||||
|
const installedDeps = runCommand(installDepsCommand);
|
||||||
|
if(!installedDeps) process.exit(-1);
|
||||||
|
|
||||||
|
console.log("Congratulations! You are ready. Follow the following commands to start");
|
||||||
|
console.log(`cd ${repoName}`);
|
||||||
|
console.log('Create a .env file with LIBRARY_NAME=your_library_name(default: ui-library), External_CSS (optional)(Default: false), EXTERNAL_CSS_NAME=(optional)(Default: index.css)');
|
||||||
|
console.log(`Then you can run: npm start`);
|
@ -2,8 +2,10 @@
|
|||||||
"name": "@aleleba/create-react-component-library",
|
"name": "@aleleba/create-react-component-library",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "A starter kit for create a React component Library with storybook",
|
"description": "A starter kit for create a React component Library with storybook",
|
||||||
|
"bin": "./bin/cli.js",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"start": "npm run storybook",
|
||||||
"build": "webpack",
|
"build": "webpack",
|
||||||
"lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
|
"lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
|
||||||
"lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
|
"lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
|
||||||
|
Loading…
Reference in New Issue
Block a user