@ekko-earth/dashboard-components v0.0.262
Ekko Components Library
Prerequisites:
- Node version 16
- Yarn or NPM
- Typescript
- 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
- 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
andchmod -x .husky/pre-push
in the project root directory
- solve this by running
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago