This project was bootstrapped with Create React App.

Component Theming

Since version 0.7.0 components handling theming through styled-components ThemingProvider, making neccesary that consumer applications provide the ZRCProvider exported from this project and pass an object with structure {color100: string, color200: string, ..., color800: string} to the theme prop, components will automatically subscribe to changes in this prop.

Available Scripts

In the project directory, you can run:

yarn storybook

This command starts storybook in port 9009, useful to access the canvas and the components Docs.

yarn clean

This command deletes the dist directory that yarn compile generates.

yarn compile

This command runs yarn clean first, then it runs cross-env setting NODE_ENV=production, finally we run Babel CLI which parses all the files inside src with the extensions .ts & .tsx to commonJS into the generated folder dist.

Local Development Instructions

Here we'll cover how to yarn link zanma-react-components so we can work with the local version of the project instead of a specific commit using GitLab. Follow these instructions:

In this project

After making changes to any component, we need to make sure the dist folder is up to date with the latest changes.

1. run yarn compile

Once we finish parsing our components we need to create a link to this project, this will allow us to link zanma-react-components in another project. More info. After making any change(s), it's important to remember to parse everything again with yarn compile, and then run the following command again.

2. run yarn link

In the project that you'll be consuming this library from

After the previous step, you should go to the project where you are using this library. This will link the specific instance of the project that has been linked, it's important to note that after making any change in the component library you should parse the components again and link them. (YES EVERY TIME)

3. run yarn link "@the-ksquare-group/zanma-react-components"

3.1 remember to declare the module in modules.d.ts, simply add declare module '@the-ksquare-group/zanma-react-components'

After linking the component library to our project, we need to create a link to the specific version of react & react-router-dom that we are using in the project. This is an important step because otherwise we would have 2 instances for each dependency, the one from our component library and the one we are using in the current project, our library should use the version of the project that's consuming it. This is only necessary for local development. So we need to access node_modules and find each folder, then we are going to create the link. Remember to return to the root of the project after this step. You only need to do this step once.

4. run cd node_modules/react && yarn link -> cd .. && cd react-router-dom && yarn link

In this project

Finally, we need to return to this project and link the instance of react and react-router-dom that we created in the other project (the previous step).

5. run yarn link react -> yarn link react-router-dom

Final Steps

Nice, these are almost all the steps to move between projects when consuming a local version of this component library! However, we are missing some important details.

• When you make any changes in zanma-react-components I suggest returning to the project where you are consuming it and run yarn unlink "@the-ksquare-group/zanma-react-components", this will delete the link we created previously from the project and will leave you open to follow the instructions above once again (steps 1 through 3).

• Finally, in this project run yarn unlink react & yarn unlink react-router-dom. You should only do this when you are done running a local version of the component library, this will unlink both instances from this project. Remember to go back to the project where you created this link in node_modules/react and run yarn unlink, do the same with react-router-dom.

• Once you removed all the links, and you are ready to commit your changes remember to run yarn clean to delete de dist folder that we created.

Instructions for publishing (NPM) the project

The pipeline was made using Github Actions, the trigger event for publishing the project is creating a new release. The pipeline mainly does 3 things: modifies the package.json version according to the tag inserted in the release, uploads these changes to the Github repo and finally publish the project to NPM. The only step required for publishing is:

• Create a release with a tag and title. The tag and title need to be the version you want to publish. For example, if you are upgrading to version 0.7.17, you need to create a release with a tag and title with v0.7.17