Ekko Components Library

Prerequisites:

1. Node version 16
2. Yarn or NPM
3. Typescript
4. CSS Modules

Local Setup

Install all dependencies

yarn

Available Scripts

In the project directory, you can run:

yarn storybook

Runs StoryBook in the development mode.
Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the terminal.
See the section about running tests for more information.

Creating new components

To create a new component, there are 6 steps:

• Create {component-name}.tsx shell file | where the main definition and logic is maintained, all imports will end up in this file
• Create {component-name}.interface.ts file | where the type specification and required/optional properties are defined
• Create {component-name}.stories.tsx file | where the component is defined for Storybook documentation, rendering, and able for QA testing
• Create {component-name}.test.tsx file | where the component rendering and internal logic is tested
• Create {component-name}.styles.tsx file | where the component styles and handling of advanced property usage are defined
• Create an index.ts file | where the component is exported for React and Storybook consumption

Testing the Component build

We will need to first create the build, to do this we run:

npm pack

This will create a tarball of the dist folder e.g. ekko-earth-dashboard-components-0.X.1.tgz
Next we create our project to test with, in this case test-app

npx create-react-app test-app --template=typescript

Once we have the test app created we pull in the package using the tarball created in step 1 Wo this by editing the package.json in the test app with the following dependency

{
 ....,
 "@ekko-earth/dashboard-components": "file:./PATH/TO/COMPONENT_REPO/ekko-earth-dashboard-components-0.X.0.tgz",
 ....
}

We can now use the package in the test app as per norm e.g.

import {Button} from '@ekko-earth/dashboard-component';

Gotchas

1. When using a GUI client for source tree management you could run into a pre-commit error \

• This happens mostly because the client doesn't have permission to run the husky sh files
  • solve this by running chmod -x .husky/pre-commit and chmod -x .husky/pre-push in the project root directory