Obviously Dove

Obviously library for UI components, was created with React and based on Bootstrap to adapt specific styles needs.

How to use

In the project you want to use have to install using one of the following commands:

• npm install @obv_cabaag/dove

• yarn add @obv_cabaag/dove

• pnpm add @obv_cabaag/dove

Once installed have to import the component you want to use:

1import Accordion from '@obv_cabaag/Accordion';

Current Components

• Accordion

Future Components

• Alerts

Development

Run storybook

Dove integrates Storybook to enhance DX and test components in isolation, just need to run the storybook command with the following command:

1pnpm storybook

Once Storybook is stated you can start create custom components for the library, will open a tab browser and navigate to the component you want to modify or create a new one

Create new Component

To create a new Component need to follow the structure of the actual components

1components
2├──NewComponentNameFolder
3|   ├── NewComponentName.tsx
4│   ├── NewComponentName.scss # If needed
5│   ├── NewComponentName.spec.tsx
6│   └── NewComponentName.stories.ts
7└── tsconfig.json

Once created the new Component is imperative to name the component the same was as the folder name, this to follow a standard naming convention

Test Components

To test current or new components, just need to run one of the following commands

1# Run the tests once
2pnpm test

1# Run the tests in watch mode, ideally when creating tests, will re run tests on changes
2pnpm test:watch

1# Run coverage tests to know the stats of the code
2pnpm test:coverage