README

Buflib

Consumption

Go to the buflib_docs webpage to read how to get started, visually test components and read component docs.

Development

Run buflib_docs repo locally, develop and change components in this repo while testing and documenting the components in buflib_docs.

Make new component

CLI

Use buflib_cli to scaffold components and stories.

Install the CLI with npm i -g buflib_cli and then run buflib --help to see available commands.

Manually

Add a folder in the "components" folder with the name of your component in snake case.
Add a tsx file in the newly created folder with this dummy content:

import React from 'react';

import './MyComponent.scss';

type MyComponentProps = {
  /**
   * My modifier prop
   * */
  myModifier: string;
};

/**
 * This is the description of my component
 */
const MyComponent: React.FC<MyComponentProps> = ({
  myModifier = 'my-modifier-default',
}) => {
  const someFunc = () => {
    alert('MyComponent clicked');
  };

  return (
    <div className={`bl-my-component bl-my-component--${myModifier}`}>
      <p onClick={someFunc} className="bl-my-component__element">
        Lorem ipsum
      </p>
    </div>
  );
};

export default MyComponent;

Save and go to the buflib_docs repo and add a mdx file in the "stories" folder with the name of your newly created component followed by .stories.mdx and add this dummy content:

import {
  Meta,
  Story,
  Preview,
  Props,
  Description,
} from '@storybook/addon-docs';
import { withA11y } from '@storybook/addon-a11y';

<Meta title="My Component Story" component={MyComponent} />

# Custom title

<Preview>
  <Story
    name="Footer with to top button"
    parameters={{ decorators: [withA11y] }}
  >
    <MyComponent myModifier="my-modifier-override" />
  </Story>
</Preview>

<Props of={MyComponent} />

And see how you get automatic description and prop documentation in the docs area and automatic UU-testing in the canvas area.

Look at other stories to see how to add knobs.

Specific Work Flows

Read the markdown files inside the docs/ folder to read about specific work flows like how to release the buflib library to the npm registry or how to add a new icon.

Usage no npm install needed!