bumblebee-ui v0.0.33

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

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

🔸 Steps to create a new component

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

🔹 Steps to update an existing component

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

To add a new component to 'bumblebee-ui'

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

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