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
$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
``