Grapes

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

Documentation

For full documentation, visit our documentation website.

Contributing

Please follow our contributing guidelines.

Authors

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

Resources

• Storybook
• 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 >= 18.2.0 and react-dom >= 18.2.0 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"
      localesDefinition={{
        fallbackLocale: 'en',
        locales: {
          en: {
            cancel: 'Cancel',
            close: 'Close',
            nextMonth: 'Next month',
            previousMonth: 'Previous month',
            openCalendar: 'Open calendar',
            show: 'show',
            hide: 'hide',
          },
        },
      }}
    >
      <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 for more information.

Testing locally

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

$ npm run 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:
npm run play