To test the changes you make to your components in a more applicable scenario than storybook, you can install your local repository in any project as if it were already a published package in NPM. You can do so by following the steps below:
1) run npm run build
on the components library project
2) run npm install <path_to_local_components_library_folder>
from the project in which you want to test the library
The install command is a one-time-operation. If you make further changes to the library after running the command, all you need to do is run npm run build
again to see the changes propagated in your other project.
Start by installing the components library in your project:
npm install @code4rena/components-library
Next, to ensure that all the components have the appropriate styling, import the library's styles into your application. This can be done in one of two ways:
@import "@code4rena/components-library/styles"
import "@code4rena/components-library/styles";
All the components in this package can be accessed through named imports. For a full list of available components, take a look at our Storybook
import { Alert } from "@code4rena/components-library";
<Alert {...args} />
All components in this library have TypeScript support. Types for all complex component props are also named exports available through the /types
subdirectory (see example below):
import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/components-library/types";
<Button
label="Sample Button"
type={ButtonType.BUTTON}
variant={ButtonVariant.SECONDARY}
size={ButtonSize.NARROW}
/>
Storybook will run on http://localhost:6006
npm run storybook
OR
yarn storybook
If you want to make use of Storybook actions for a specific component, please refer to the Input.stories.tsx
file. The recommendation is to pass the event handler function directly to the Story component as opposed to passing it through ComponentName.args. Passing the event handler function through the args parameter may not log the event in the Actions
tab of the Story's dashboard.
For testing, we are using Jest and React Testing Library.
To maintain the standards, test files should be named componentName.test.tsx
and be placed inside the component folder for which the test relates to.
To run tests you can use the command below (please ensure all tests are passing before creating your PRs)
npm test
OR
yarn test
A GitHub Action has been developed to help automate package releases. All that you will need to do is:
version
field in the package.json. npm version [major | minor | patch]
will handle the versioning, commit, and tag creation for you.title
and description
outlining the changes made in the release