Welcome to Bumble Bee UI ✨

'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

🔸 Steps to create a new component

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

🔹 Steps to update an existing component

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

To add a new component to 'bumblebee-ui'

1. Create folder within src/{category}
2. Add relevant code
3. Add test within test/{category}

To add a test to 'bumblebee-ui'

1. Write a test and run npm test

//loading.test.js
import renderer from 'react-test-renderer'

it('<Loading /> renders correctly.', () => {
  const tree = renderer
    .create(<Loading main={true} />)
    .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.)

To add a story for your new component

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

<!--- Checkbox.stories.mdx -->

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

<Meta title="Components/Checkbox" component={Checkbox} />

# Checkbox

With `MDX` we can define a story for `Checkbox` right in the middle of our
Markdown documentation.

<!--- This is your Story template function, shown here in React -->

export const Template = (args) => <Checkbox {...args} />

<Canvas>
  <Story name="Unchecked" args={{ 
      label: 'Unchecked'
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Checked" args={{ 
      label: 'Unchecked', 
      checked: true 
    }}>
    {Template.bind({})}
   </Story>
  <Story name="Secondary" args={{
    label: 'Secondary', 
    checked: true, 
    appearance: 'secondary'
  }}>
    {Template.bind({})}
   </Story>
</Canvas>

## Props

<ArgsTable of={Checkbox} />