Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dev-spendesk/grapes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 storybook    # Start Storybook and open it on `http://localhost:6006/` by default
$ yarn test         # Run the tests