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

To add a new component to 'honeybee-ui'

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

To add a test to 'honeybee-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} />