Grapes homepage1.57.0

Getting Started

A quick tutorial to get you up and running with Grapes.

Installation

Grapes is available as a NPM package.

npm install @dev-spendesk/grapes

Please note that react >= 18.2 and react-dom >= 18.2 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";

export const MySwitchField = () => {
  return (
    <GrapesProvider
      locale="en-US"
      localesDefinition={{
        fallbackLocale: "en-US",
        locales: {
          "en-US": {
            cancel: "Cancel",
            close: "Close",
            nextMonth: "Next month",
            previousMonth: "Previous month",
            openCalendar: "Open calendar",
            show: "show",
            hide: "hide",
            showOptions: "Show options",
            edit: "Edit",
            clearSelection: "Clear selection",
            selectCurrency: "Select a currency",
            deleteWithName: ({ name }) => `Delete ${name}`,
          },
        },
      }}
    >
      <SwitchField
        label="Should I use Grapes?"
        isChecked
        onChange={() => {
          console.log("Of course you need to use it, what are you doing?");
        }}
      />
    </GrapesProvider>
  );
};

CSS theme

You also need to import the CSS from Grapes and the design tokens.

@import "@dev-spendesk/grapes/style";
@import "@dev-spendesk/grapes/token";

To better manage the specificity of your application's styles and those from Grapes, we recommed using CSS Cascade layers.

Here is an example to import Grapes into a CSS Layer named Grapes:

@import "@dev-spendesk/grapes/style" layer(grapes);
@import "@dev-spendesk/grapes/token" layer(grapes);

TailwindCSS Preset

Grapes exposes a preset that can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed. More information about the installation can be found on Tailwind's documentation website.

Then, include the preset to your CSS file that imports TailwindCSS with the design tokens:

@import "tailwindcss";
@import "@dev-spendesk/grapes/token";
@import "@dev-spendesk/grapes/tailwind";

Please note that this preset overrides the default value of TailwindCSS.