Grapes homepage1.44.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.

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

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

    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 tailwind.config.js file:

    import GrapesPreset from "@dev-spendesk/grapes/tailwind";

export default {
  presets: [GrapesPreset], 
};

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

    Tailwind preflight

    TailwindCSS comes with an opinionated set of base styles, called preflight. If you imported Grapes into a layer called grapes, then it's likely that these base styles override many Grapes styles.

    To fix that, you need to disable preflight in order for the Grapes preset to work properly.

    import GrapesPreset from "@dev-spendesk/grapes/tailwind";

export default {
  corePlugins: {
    preflight: false, 
  },
  presets: [GrapesPreset],
};