@zerodrop/react-component v0.0.2-9

Zerodrop React Components

A react components library using rollup, typescript, sass, tailwindcss, storybook

Requirements

• Install latest node.js
• Install latest yarn

File Structure

zerodrop-ui-components/
├─ .storybook/                           .. storybook configs
├─ build/                                .. library outputs
├─ node_modules/                         .. node.js modules installed after "yarn install"
├─ src/                                  .. source files
│  ├─ assets/                            .. global style, images, fonts, etc
│  ├─ components/                        .. custom reusable components
│  ├─ hooks/                             .. custom reuseable hooks
│  ├─ types/                             .. custom reuseable ts types
│  ├─ utils/                             .. custom reusable functions
│  ├─ index.js                           .. library entry
│  ├─ Introduction.stories.mdx           .. storybook preview index page
│  └─ *                                  .. other files
├─ *                                     .. other config files
├─ .gitignore                            .. git ignore config
├─ bitbucket-pipelines.yml               .. bitbucket pipelines CI config
├─ package.json                          .. dependencies config
├─ README.md                             .. readme file
└─ yarn.lock                             .. dependencies version lock file

Available Scripts

In the project directory, you can run:

yarn storybook

Runs the app in the storybook preview mode.\ Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.\

yarn storybook:export

To export your Storybook as static files, your library usage doc is ready to be deployed!

yarn test:watch

Launches the test runner in the interactive watch mode.\

yarn build

Builds the library for production to the build folder.\

Develop

Tailwind IntelliSense

in order to get auto-completion for the CSS classes themselves, you can use the Tailwind CSS IntelliSense plugin for VS Code.

You can then add the following line to your settings.json:

{
    ...
    "tailwindCSS.experimental.classRegex": ["tw`(.+?)`"],
    "editor.quickSuggestions": {
        "strings": true
    }
    ...
}

Then you can tagged like

const tw = String.raw;

const button = tw`px-5`;

Getting Started

First you should import the css file in you main file.

import '@zerodrop/react-component/build/index.css'

Then import the component and start.

create built branch

npx build-this-branch -b build

then you can use this Repo in your project.

"@zerodrop/react-component": "git+ssh://git@bitbucket.org/h8tchinnovations/zerodrop-ui-components.git#build",