@saleor/macaw-ui NPM

MacawUI

Official React UI components kit for Saleor — an open-source GraphQL-first and Next.js ready e-commerce platform. You can find most of the elements used in the creation of Saleor's dashboard interface and use it to create Saleor Apps. Have a great time working on your projects and empowering your users. If you have any questions, feel free to let us know on GitHub Discussions.

Installation

npm i @saleor/macaw-ui

Usage

You need to import the styles into your app. You can do it in your main entry point, for example index.tsx`:

import "@saleor/macaw-ui/style";

Next, you need to add the ThemeProvider to your app. It will provide the theme to the components:

import { ThemeProvider } from "@saleor/macaw-ui";

const App = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

Usage with Next.js

If you need to render styles on the server we recommend that you use getCSSVariables helper to get the CSS variables that can be injected in _document.tsx:

import { getCSSVariables } from "@saleor/macaw-ui";
import Document, { Head, Html, Main, NextScript } from "next/document";

const css = getCSSVariables("defaultLight"); // or "defaultDark"

export default class AppDocument extends Document {
  render() {
    return (
      <Html style={css}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Usage with form libraries

React Hook Form

You need to wrap the MacawUI component with Controller. For example:

import { Input } from "@saleor/macaw-ui";

<Controller
  control={control}
  name="name-input"
  render={({ field }) => <Input {...field} />}
/>;

Usage with Sentry

Add following configuration to Sentry.Integrations.Breadcrumbs:

{
  dom: {
    serializeAttribute: ["macaw-ui-component"];
  }
}

Right now sentry will display MacawUI components names in breadcrumbs.

Development

To begin, you need to install dependencies:

pnpm install

Then, you can run the Storybook:

pnpm dev

You can run build in watch mode (useful for real-time development with e.g Dashboard):

pnpm watch

When you finish woking, you can add new changeset

pnpm change:add

License

Distributed under the Creative Common Attribution 4.0 International License https://creativecommons.org/licenses/by/4.0/

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

saleor macaw macaw-ui react ui components

@dessert-box/react @floating-ui/react-dom @radix-ui/react-accordion @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-portal @radix-ui/react-radio-group @radix-ui/react-toggle @radix-ui/react-tooltip @vanilla-extract/css-utils @vanilla-extract/recipes downshift

@infinitebrahmanuniverse/nolb-_sal @everything-registry/sub-chunk-802 @zalastax/nolb-_sal

0.0.0-pr-20241003125154

12 months ago

0.0.0-pr-20241002142200

12 months ago

0.0.0-pr-20241001083740

12 months ago

0.0.0-pr-20241003093858

12 months ago

1.1.14

12 months ago

0.0.0-pr-20241002141613

12 months ago

0.0.0-pr-20240919112522

1 year ago

0.0.0-pr-20240923143758

12 months ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.13

12 months ago

0.0.0-pr-20240920100349

1 year ago

0.0.0-pr-20240827110916

1 year ago

0.0.0-pr-20240827095650

1 year ago

0.0.0-pr-20240827111751

1 year ago

0.0.0-pr-20240827113943

1 year ago

1.1.9

1 year ago

1.1.10

1 year ago

0.0.0-pr-20240820081043

1 year ago

0.0.0-pr-20240705175820

1 year ago

0.0.0-pr-20240819221743

1 year ago

0.0.0-pr-20240826122954

1 year ago

0.0.0-pr-20240705180038

1 year ago

0.0.0-pr-20240702074732

1 year ago

0.0.0-pr-20240702074738

1 year ago

0.0.0-pr-20240820083913

1 year ago

0.0.0-pr-20240723073626

1 year ago

0.0.0-pr-20240820085526

1 year ago

0.0.0-pr-20240819211403

1 year ago

0.0.0-pr-20240821090821

1 year ago

0.0.0-pr-20240823072940

1 year ago

0.0.0-pr-20240819213818

1 year ago

0.0.0-pr-20240819144311

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

0.0.0-pr-20240820090120

1 year ago

1.1.6

1 year ago

0.0.0-pr-20240819220817

1 year ago

0.0.0-pr-20240819212748

1 year ago

0.0.0-pr-20240819205653

1 year ago

0.0.0-pr-20240819215256

1 year ago

0.0.0-pr-20240819131900

1 year ago

0.0.0-pr-20240702081318

1 year ago

0.0.0-pr-20240702080219

1 year ago

0.0.0-pr-20240820093542

1 year ago

1.1.5

1 year ago

0.0.0-pr-20240514115253

1 year ago

0.0.0-pr-20240514122249

1 year ago

1.1.4

1 year ago

0.0.0-pr-20240425130404

1 year ago

0.0.0-pr-20240425162717

1 year ago

0.0.0-pr-20240425160408

1 year ago

0.0.0-pr-20240425151014

1 year ago

1.1.3

1 year ago

1.1.2

2 years ago

0.0.0-pr-20240318132510

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

0.0.0-pr-20240315121849

2 years ago

0.0.0-pr-20240315092726

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago