Welcome to Honey Bee UI ✨

 

'honeybee-ui' is a reusable component library that is designed and engineered to help developers build better product faster.

Components

| Packages | Description | Required package |
|---------------------|------------------------------------------------------------------------------------------------ |------------------|
| Loading | 'Loading' can be used to show the loading state in your app. It includes spinner SVG. | |
| PageWrapper | 'PageWrapper' can be used to wrap your component with the layer of 6 div. | |
| SectionWrapper | 'SectionWrapper' can be used to wrap your component with a progress bar and title. | |
| FieldError | 'FieldError' can be used to show the error message below the form with Formik. | Formik |
| SortArrow | 'SortArrow' can be used to show a small sort arrow in a table header with Carpentr. | Carpentr |
| Pagination | 'Pagination' can be used to indicate a series of related content exists across multiple pages. | Carpentr |
| NotFoundPage | 'NotFoundPage' can be used when the page is not found. It takes 'Link' component as a child. | react-router-dom |
| Footer | 'Footer' can be used as an additional bottom navigation. | |
| NavWrapper | 'NavWrapper' is used to render the Login button as well as icons that toggle the side nav, dropdowns, sliding drawer, etc. | |
| SlidingDrawer | 'SlidingDrawer' can be used to hold content such as a help center, chat feed, etc. | |
| BreadCrumbs | 'BreadCrumbs' can be used to indicate the the page’s location within a navigational hierarchy. | |
| PasswordRequirements| 'PasswordRequirements' can be used to check whether the passwords meet a series of guidelines for a strong password or not. | Formik |
| FAQ | 'FAQ' is used to display a list of frequently asked questions (FAQs) and answers on various categories. | |
| Videos | 'Videos' is used to display Youtube videos organized by category | |
| AlertModal | 'AlertModal' is used to add a dialog box / popup window for deletion or confirmation. | reactstrap |
| ContentModal | 'ContentModal' is used to add a dialog box / popup window to inform the user. | reactstrap |
| Popover | 'Popover' is used to display a tooltip. | reactstrap |
| TableSearch | 'TableSearch' can be used to help a user to find a specific column in the table. | |
| IconBadge | 'IconBadge' can be used to show the icons about the state of rows. | react-tooltip, nanoid |
| ResultSet | 'ResultSet' can be used to allow the user to choose how many rows will be seen on the table. | Carpentr |
| ScrollToTopButton | 'ScrollToTopButton' can be used to scroll to the top of the page. | |
| PrivacyPolicyText | HOTB Privacy Policy Text (November 8, 2019) | |
| TermsOfServiceText | HOTB Terms Of Service Text (August 25, 2020) | |

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

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 honeybee-ui or yarn add honeybee-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

1. Clone this repository and run npm install
2. npm run build to generate minified bundle with Rollup
3. npm run build-storybook to build static version of Storybook
4. npm run storybook to run Storybook with webpack

$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) =>


label: 'Unchecked'
}}>
{Template.bind({})}

label: 'Unchecked',
checked: true
}}>
{Template.bind({})}

label: 'Secondary',
checked: true,
appearance: 'secondary'
}}>
{Template.bind({})}



Props


``