BeyDesign Storybook

A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our Figma Design System.

Installation

# First install the required design tokens package
npm install @beydesign/tokens

# Then install the component library
npm install @beydesign/storybook

Prerequisites

This package depends on @beydesign/tokens which provides the design tokens (colors, typography, spacing, etc.) used across the components. Make sure to install and configure it first.

After installing the tokens package, you will need to install the figtree font. Link to the font is provided in the Links section.

Usage

1. Import the components you need:

import {
  MainButton,
  ButtonHierarchy,
  ButtonShape,
  ButtonSize,
} from '@beydesign/storybook';

function App() {
  return (
    <MainButton
      size={ButtonSize.lg}
      shape={ButtonShape.Square}
      onClick={rejoin}
      disabled={buttonsDisabled}
      hierarchy={ButtonHierarchy.Primary}
      showLeadingIcon={false}
      showTrailingIcon={false}
      text="Rejoin"
    />
  );
}

Development

To run the Storybook development environment locally:

npm install
npm run storybook

Links

• Design System (Figma)
• NPM Package
• Hosted Storybook
• Design Tokens Package
• Figtree Font

Support

For issues and feature requests, please use our GitHub issues page.