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;
}

Storybook

To check the latest available components, check our Storybook.

Contributing

Before contributing, please read our contributing guide to learn about our development process, our guidelines and how to propose bugfixes and improvements.

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