Honeybee UI
npm install honeybee-ui'honeybee-ui' is a reusable component library that is designed and engineered to help developers build better product faster.
| 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 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
``
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)
`
npm install honeybee-ui or yarn add honeybee-ui
You SHOULD update package version in package.json after any change in src folder.npm version
You can use 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)minor
2. : add functionality in a backwards-compatible manner (Example version 1.1.0)patch
3. : backwards-compatible bug fixes (Example version 1.0.1)
After updating the version number, make sure npm run build & npm publish.
1. Clone this repository and run npm install npm run build
2. to generate minified bundle with Rollupnpm run build-storybook
3. to build static version of Storybooknpm run storybook
4. to run Storybook with webpack
1. Create folder within src/{category}test/{category}
2. Add relevant code
3. Add test within
1. Write a test and run npm test`javascript
//loading.test.js
import renderer from 'react-test-renderer'
it('
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.
`test/__snapshots__
2. In the folder, you can see the autogenerated snapshot by jest.npm test -- -u
3. If you want to update your snapshot, run .
(if you update the component, run npm test -- -u to update the snapshot.)
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';
With MDX we can define a story for Checkbox right in the middle of our
Markdown documentation.
export const Template = (args) =>
``