Grapes

The Spendesk component library for building and providing a consistent experience to anyone

Documentation

For full documentation, visit storybook.

Contributing

Please follow our contributing guidelines.

Authors

• Pauline Ménage (@pmenage)
• Thibault Patois (@drplop)

Ressources

• Zeroheight website
• Figma UI Kit
• Roadmap

Getting started

Installation

Grapes is available as a NPM package.

// with npm
npm install @dev-spendesk/grapes

// with yarn
yarn add @dev-spendesk/grapes

Importing components

Here is a quick example if you want to use Grapes components in your React app:

import { SwitchField } from '@dev-spendesk/grapes';

const MySwitchField = () => {
  return (
    <SwitchField
      label="Should I use Grapes?"
      isChecked={true}
      onChange={() => {
        console.log('Of course you need to use it, what are you doing?');
      }}
    />
  );
};

Importing the theme

Here is a quick example if you want to use Grapes theme and design tokens in your stylesheets:

@import '@dev-spendesk/grapes/dist/theme/main.scss';

.MyComponent {
  @extend %body-m;
  margin-bottom: $spacing-s;
}

Using the Grapes normalizer (optional)

Here is a quick example if you want to use Grapes normalizer for your stylesheets

@import '@dev-spendesk/grapes/dist/theme/normalize.scss';

Testing locally

To start developing locally, you can simply run the following commands:

$ yarn dev          # Start Storybook and open it on `http://localhost:6006/` by default

The playground is the place where you can:

• Test components
• Dev components
• Write stories

Playground files are in the src/playground folder and the index.html is at the root.

# To launch the playground:
yarn play