- Install node.js
- Clone the repository
- Open terminal and navigate to the project folder
cd path/to/project
- Run
yarn
to install project dependencies, if you don't have it, you can install it by runningnpm i -g yarn
- To run various scripts of the project:
yarn dev
to start localhost and run the project locally in dev mode (will run atlocalhost:8080
)yarn storybook
to start Storybook (will run atlocalhost:6006
)yarn build
to build the production version of the projectyarn lint
to check the code, if this won't pass, the code won't be able to be built
IMPORTANT! Make sure to:
- Use Prettier and have the
Editor: Format On Save
setting in VSCode turned on - Use blueprints for file generation
to keep the code consistent.
Blueprints offer the functionality of automatic file generation. They save time and ensure that the file structure will follow the project standards.
- Install the Blueprint addon for VSCode
- Go to settings in VSCode (
cmd
+,
on Mac orctrl
+,
on Win/Linux) - Search for "blueprint"
- Click
Edit in settings.json
- Add the path to the Blueprint templates folder into
settings.json
-"blueprint.templatesPath": [ "path/to/project/blueprints" ]
:- If you have only one project in your VSCode workspace, a relative path will work -
./blueprints
- If you have multiple projects in your VSCode workspace, you need to provide an absolute path -
/Users/blockunison/Documents/api-explorer/blueprints
for example
- If you have only one project in your VSCode workspace, a relative path will work -
- In VSCode, right click on a folder, in which you want to generate a new file from a Blueprint template (for example
/src/components
,/stories/ui
etc.) and selectNew File from Template
- Select one of the available templates
- Register the new component in the
index.js
file of the folder, where you created the new component. For example, if you created a new component in/src/ui
, you need to open/src/ui/index.js
and export the new component -export { default as MyNewComponent } from './MyNewComponent
. You don't need to do this with stories since every file with the.stories.js
extension, located in the/stories
folder, is autoloaded into Storybook.
component
, variables of this template:- value - name of the component, can be PascalCase or words separated by spaces (
MyNewComponent
/my new component
)
- value - name of the component, can be PascalCase or words separated by spaces (
story
, variables of this template:- value - name of the story, can be PascalCase or words separated by spaces (
MyNewComponent
/my new component
) - $category - what is the category of the component displayed by this story (
layouts
/components
/ui
)
- value - name of the story, can be PascalCase or words separated by spaces (