First you have to install all the dependencies that are available in the root folder using
yarn setup
Install all the dependencies that are available inside components, schema and theme using
yarn setup
Build all the three packages(i.e component,schema,theme) using
yarn build
Start the storybook using
yarn storybook-start
Now storybook will run in local server at http://localhost:6006/ and all the components will render inside that and one can change the props to customize components and test it out.
If you want to deploy the storybook to components.bluelearn.in then run the following command
yarn storybook-deploy
- Create a new folder for that component in
packages/component/src
then add parent filecomponent.tsx
and base filecomponent.base.tsx
for that component as per requirement and add stories filecomponent.stories.tsx
and mock filecomponent.mock.tsx
inside that folder to render that component in storybook. - Create Schema for that component inside
packages/schema/src
and define schema for base as well as parent component as per requirement. - Create theme for that component inside
packages/theme/src/light-mobile
.First define attributes forlight theme
and then change the color and as per requirement fordark theme
inpackages/theme/src/dark-mobile
- Copy an icon from the figma file
- Convert it into React Native SVG using https://transform.tools/svg-to-react-native
- Create a new file with the same name as the component in the
packages/component/src/icon/icon-list
- Change the width, height and color/fill attributes with
width={props.size}
height={props.size}
fill={props.color}
- Add the name of the icon in
packages/schema/src/icon/index.ts
- Add the name and icon component in
packages/theme/src/icons/index.ts
(Make sure you don't forget to import the icon from components repo)