honeybee-ui v1.0.71

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

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} />