0.0.6 • Published 10 months ago
summoners-design v0.0.6
For installation
$ yarn install
$ npm install
Basic Folder Structure
├── .storybook
├── src
│ ├── components
| | ├── Example
| | | ├── __tests__
| | | | ├── Example.test.tsx
| | | ├── example.scss
| | | ├── Example.stories.tsx
| | | ├── Example.tsx
| | | ├── index.ts
| | ├── index.ts
| ├── index.ts
├── LICENSE
├── package.json
├── README.md
Add a new component
- You can automatically create a new component using the
yarn component:new
command. - Or, you can manually add the new component directory in the
src/components
directory following this folder structure
├── MyComponent
| ├── __tests__
| | ├── MyComponent.test.tsx
| ├── MyComponent.scss
| ├── MyComponent.stories.tsx
| ├── MyComponent.tsx
| ├── index.ts
Once you have created your new component make sure you have exported it in the src/components/index.ts
file. Doing so allows the component to be compiled into the final bundle using rollup.
// src/components/index.ts
export \* from './MyComponent';
export \* from './SomeOtherComponent';
You can skip all of this and use the built in component generator. The template for the component is in
_templates/component/with-prompt
. Simply run the following command to automatically create your new component. It will prompt you for the component name and then build out all the files and correct exports.yarn component:new
You can develop your new component using storybook as your playground. Once you have added the .stories.tsx
file for you new component, you can run yarn storybook
to start the service.
Storybook
$ yarn storybook
Building your library
$ yarn build
The build output will go into the dist
directory