Grapes

Installation

Grapes is available as a NPM package.

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

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

Usage

Importing components

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

import React from 'react';
import ReactDOM from 'react-dom';
import { SwitchField } from '@dev-spendesk/grapes';

const MySwitchField = () => {
  return (
    <SwitchField
      id="my-switch-field"
      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';

Storybook

To check the latest available components, check our Storybook.

Contributing

Read through our contributing guidelines.

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

$ yarn              # Install dependencies
$ yarn dev          # Start Storybook and open it on `http://localhost:6006/` by default
$ yarn test         # Run the tests

Testing locally

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