Welcome to Bumble Bee UI ✨

![Netlify Status](https://app.netlify.com/sites/bumbleebee-ui/deploys)
'bumblebee-ui' is a reusable component library that is designed and engineered to help developers build better product faster.

Components

| Packages | Description | Required package |
|---------------------|------------------------------------------------------------------------------------------------ |------------------|
| AlertModal | 'AlertModal' can be used to add a dialog box / popup window for confirmation. | reactstrap |
| Asterisk | 'Asterisk' can be used to add an asterisk icon. | |
| BreadCrumbs | 'BreadCrumbs' can be used to indicate the the page’s location within a navigational hierarchy. | |
| BreadCrumbsAdmin | 'BreadCrumbsAdmin' can be used to indicate the the page’s location within a navigational hierarchy for the Admin portal. | |
| Can | 'Can' can be used to render a by user permissions. | |
| CollapsibleText | 'CollapsibleText' can be used to add a collapsible text. | reactstrap |
| CollapsibleTitle | 'CollapsibleTitle' can be used to add a collapsible title. | reactstrap |
| ContentModal | 'ContentModal' can be used to add a dialog box / popup window to inform the user. | reactstrap |
| ContentWrapper | 'ContentWrapper' can be used to wrap your component with a header and description. | |
| DeleteModal | 'DeleteModal' can be used to add a dialog box / popup window for deletion. | reactstrap |
| Field | 'Field' can be used to display the view version of the form data. | |
| FieldError | 'FieldError' can be used to show the error message below the form with Formik. | Formik |
| FilterButton | 'FilterButton' can be used to display the filter on the Carpentr table. | Carpentr |
| FilterModal | 'FilterModal' can be used to display the filter on the Carpentr table. | Carpentr |
| FilterRow | 'FilterRow' can be used to display the filter on the Carpentr table. | Carpentr |
| Footer | 'Footer' can be used to display the footer contents. | |
| FooterAdmin | 'FooterAdmin' can be used to display the footer on the Admin Portal. | |
| FormError | 'FormError' can be used to show the error message below the form with Formik. | Formik |
| LandingApplicationProcess | 'LandingApplicationProcess' can be used to display a landing page with other landing components. | |
| LandingHeroCarousel | 'LandingHeroCarousel' can be used to display a landing page with other landing components. | |
| LandingHeroStatic | 'LandingHeroStatic' can be used to display a landing page with other landing components. | |
| LandingHeroVideo | 'LandingHeroVideo' can be used to display a landing page with other landing components. | |
| LandingInfoBlocks | 'LandingInfoBlocks' can be used to display a landing page with other landing components. | |
| LandingInfoWithPhoto | 'LandingInfoWithPhoto' can be used to display a landing page with other landing components. | |
| LandingOverview | 'LandingOverview' can be used to display a landing page with other landing components. | |
| LandingRequirements | 'LandingRequirements' can be used to display a landing page with other landing components. | |
| LandingScreeningCTA | 'LandingScreeningCTA' can be used to display a landing page with other landing components. | |
| LandingVideos | 'LandingVideos' can be used to display a landing page with other landing components. | |
| LandingTotallyCustom | 'LandingTotallyCustom' can be used to display a landing page with the custom props. | |
| Loading | 'Loading' can be used to show the loading state in your app. It includes spinner SVG. | |
| NotFoundPage | 'NotFoundPage' can be used when the page is not found. It takes 'Link' component as a child. | react-router-dom |
| PageWrapper | 'PageWrapper' can be used to wrap your component. | |
| Pagination | 'Pagination' can be used to indicate a series of related content exists across multiple pages. | Carpentr |
| PasswordRequirements| 'PasswordRequirements' can be used to check whether the passwords meet a series of guidelines for a strong password or not. | Formik |
| ResultSet | 'ResultSet' can be used to allow the user to choose how many rows will be seen on the table. | Carpentr |
| ReportCard | 'ReportCard' can be used to display a section in the reports dashboard. | reactstrap |
| Section | 'Section' can be used to display a collapsible section. | reactstrap |
| SectionAppConfig | 'SectionAppConfig' can be used to display a collapsible section on the Admin app config. | reactstrap |
| ScrollToTopButton | 'ScrollToTopButton' can be used to scroll to the top of the page. | |
| SortArrow | 'SortArrow' can be used to show a small sort arrow in a table header with Carpentr. | Carpentr |
| TableSearch | 'TableSearch' can be used to help a user to find a specific column in the table. | |
| TableWrapper | 'TableWrapper' can be used to wrap your table. | |
| ToolTip | 'ToolTip' can be used to display small contents on hover. | reactstrap |
| VideoThumbnail | 'VideoThumbnail' can be used to display the thumbnail photo. | |

Storybook 🎨

Click to open Demo Storybook

Storybook is used to showcase components interactively in an isolated development environment.

Storybook has a collection of stories and each story represents a single visual state of a component.

To start Storybook,
npm run storybook OR yarn run storybook

Structure



dist/ (generated bundle with rollup)

├── index.min.js

node_modules/

src/ (components folder)

├── index.js

├── my-components

|   └── index.js

├── my-other-components

|   └── index.js

|

storybook/ 

├── stories/ (stories for each component)

|   ├── 0-welcome.stories.js

|   └── 1-loading.stories.js

|

storybook-static/ (autogenerated static version of storybook)

|

test/ 

├──__snapshots__/ (autogenerated jest snapshots)

└──Loading.test.js (jest tests for each component)





Getting the components into your app

npm install bumblebee-ui or yarn add bumblebee-ui







Package Versioning



You SHOULD update package version in

package.json after any change in src

 folder.

You can use

npm version command. For example npm version patch or npm version patch -m 'Added NavBar'





Use one of the following versioning.



1.

major

 : incompatible API changes (2.0.0)

2.

minor

 : add functionality in a backwards-compatible manner (Example version 1.1.0)

3.

patch

 : backwards-compatible bug fixes (Example version 1.0.1)



After updating the version number, make sure

npm run build & npm publish

.



Contributing



$3



1. Create the component under the

src



2. Add a new Story under the storybook folder

3. Check the storybook with

yarn storybook

 and see if the component looks good in the storybook on the localhost:4000

4. Write a test and run

yarn test

 to create a new snapshot

5. Build the new module with

yarn build



6. Bump up the version in package.json

7. Create a new storybook static version with

yarn build-storybook



8. Make a PR to master



$3



1. Update the component

2. Check the storybook with

yarn storybook

 and see if the component looks good in the storybook on the localhost:4000.

(If you make an update to the props, you will need to make the same change inside of its story file.)

3. Run the test

yarn test and fix it with yarn test -- -u



4. Build the new module with

yarn build



5. Bump up the version in package.json

6. Create a new storybook static version with

yarn build-storybook



7. Make a PR to master



$3



1. Create folder within

src/{category}



2. Add relevant code 

3. Add test within

test/{category}

  



$3



1. Write a test and run

npm test

javascript

//loading.test.js

import renderer from 'react-test-renderer'



it(' renders correctly.', () => {

  const tree = renderer

    .create()

    .toJSON()

  expect(tree).toMatchSnapshot()

})



//In your terminal, you can see this message that 1 snapshot added.

1 snapshot written from 1 test suite.



2. In the

test/__snapshots__

 folder, you can see the autogenerated snapshot by jest.

3. If you want to update your snapshot, run

npm test -- -u

.



(if you update the component, run

npm test -- -u

 to update the snapshot.)



$3



1. Create

fileName.stories.mdx within storybook/stories/{category}



2. Import your new component into the story and render

3. Follow the Storybook 6.0 API to render your component with Docs, Controls.

Writing Stories with MDX

javascript





import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';

import { Checkbox } from './Checkbox';







Checkbox



With

MDX we can define a story for Checkbox

 right in the middle of our

Markdown documentation.







export const Template = (args) => 







Props

Welcome to Bumble Bee UI ✨

![Netlify Status](https://app.netlify.com/sites/bumbleebee-ui/deploys)
'bumblebee-ui' is a reusable component library that is designed and engineered to help developers build better product faster.

Components

Storybook 🎨

Structure



dist/ (generated bundle with rollup)

├── index.min.js

node_modules/

src/ (components folder)

├── index.js

├── my-components

|   └── index.js

├── my-other-components

|   └── index.js

|

storybook/ 

├── stories/ (stories for each component)

|   ├── 0-welcome.stories.js

|   └── 1-loading.stories.js

|

storybook-static/ (autogenerated static version of storybook)

|

test/ 

├──__snapshots__/ (autogenerated jest snapshots)

└──Loading.test.js (jest tests for each component)





Getting the components into your app

npm install bumblebee-ui or yarn add bumblebee-ui







Package Versioning



You SHOULD update package version in

package.json after any change in src

 folder.

You can use

npm version command. For example npm version patch or npm version patch -m 'Added NavBar'





Use one of the following versioning.



1.

major

 : incompatible API changes (2.0.0)

2.

minor

 : add functionality in a backwards-compatible manner (Example version 1.1.0)

3.

patch

 : backwards-compatible bug fixes (Example version 1.0.1)



After updating the version number, make sure

npm run build & npm publish

.



Contributing



$3



1. Create the component under the

src



2. Add a new Story under the storybook folder

3. Check the storybook with

yarn storybook

 and see if the component looks good in the storybook on the localhost:4000

4. Write a test and run

yarn test

 to create a new snapshot

5. Build the new module with

yarn build



6. Bump up the version in package.json

7. Create a new storybook static version with

yarn build-storybook



8. Make a PR to master



$3



1. Update the component

2. Check the storybook with

yarn storybook

 and see if the component looks good in the storybook on the localhost:4000.

(If you make an update to the props, you will need to make the same change inside of its story file.)

3. Run the test

yarn test and fix it with yarn test -- -u



4. Build the new module with

yarn build



5. Bump up the version in package.json

6. Create a new storybook static version with

yarn build-storybook



7. Make a PR to master



$3



1. Create folder within

src/{category}



2. Add relevant code 

3. Add test within

test/{category}

  



$3



1. Write a test and run

npm test

javascript

//loading.test.js

import renderer from 'react-test-renderer'



it(' renders correctly.', () => {

  const tree = renderer

    .create()

    .toJSON()

  expect(tree).toMatchSnapshot()

})



//In your terminal, you can see this message that 1 snapshot added.

1 snapshot written from 1 test suite.



2. In the

test/__snapshots__

 folder, you can see the autogenerated snapshot by jest.

3. If you want to update your snapshot, run

npm test -- -u

.



(if you update the component, run

npm test -- -u

 to update the snapshot.)



$3



1. Create

fileName.stories.mdx within storybook/stories/{category}



2. Import your new component into the story and render

3. Follow the Storybook 6.0 API to render your component with Docs, Controls.

Writing Stories with MDX

javascript





import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';

import { Checkbox } from './Checkbox';







Checkbox



With

MDX we can define a story for Checkbox

 right in the middle of our

Markdown documentation.







export const Template = (args) => 







Props