herdpay-seedlings v0.0.2

Installation:

1. yarn install

2. Install VSCode extensions: ESLint, Prettier

Usage:

1. yarn start: start running dev-server for local development

2. yarn storybook: start running storybook server for previewing demo page

3. yarn build: build index.js and index.d.ts file from src folder

4. yarn build-storybook: build index.html in demo folder for static hosting

5. chagne setting in package.json

6. use npm login and npm publish for publishing to https://www.npmjs.com/

7. yarn watch: start typescript watch mode

8. yarn lint: use ESLint for manually checking files inside src folder

Usage for third-party import:

1. npm i @herdpay/seedlings

2. import library

// TypsScript
import React, { FC } from 'react';
import { MyButton, HerdPayColors } from '@herdpay/seedlings';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        primary: {
            main: HerdPayColors.primary.main,
        },
    },
    typography: { fontFamily: 'Roboto' },
});

const MyApp: FC = () => (
    <ThemeProvider theme={theme}>
        <MyButton>My Button</MyButton>
    </ThemeProvider>
);

export default MyApp;

Folder Structure

┌── .github/workflows          # Settings for GitHub Actions
├── .storybook                 # Storybook settings
├── .vscode                    # VSCode settings for ESLint auto-fix function
├── demo                       # Storybook static file
├── dist                       # Bundled JS and TS declaration file for deployed npm package
├── src                        # All source code
│    ├── components            # React components
│    │    └── button           # Component folder
│    │          ├── MyButton.tsx           # Component for npm package
│    │          └── MyButton.stories.tsx   # Component displayed in storybook
│    ├── index.dev.tsx         # Development entry that uses ReactDOM.redner for local development
│    └── index.tsx             # Production entry that exports all components
├── .gitignore                 # Excluded files for ignoring Git version control
├── .eslintrc.js               # ESLint settings
├── index.html                 # HTML for local development
├── README.md                  # README
├── package-lock.json          # Package settings that locked the version of dependencies packages
├── package.json               # Package settings that listed dependencies packages, npm scripts, project name etc.
├── webpack.config.common.js   # Webpack settings in both development and production mode
├── webpack.config.dev.js      # Webpack settings in development mode
├── webpack.config.prod.js     # Webpack settings in production mode
└── tsconfig.json              # TypeScript settings