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

Please note that react >= 16.14 and react-dom >= 16.14 are peer dependencies.

Usage

All Grapes applications start with a GrapesProvider. This provider specifies the locale to use, along with some optional settings like a mapbox token.

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

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

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

Please visit our Getting started page on Storybook for more information.

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