@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-20240425130404

3 days ago

0.0.0-pr-20240425162717

3 days ago

0.0.0-pr-20240425160408

3 days ago

0.0.0-pr-20240425151014

3 days ago

1.1.3

25 days ago

1.1.2

1 month ago

0.0.0-pr-20240318132510

1 month ago

1.1.1

1 month ago

1.1.0

1 month ago

0.0.0-pr-20240315121849

1 month ago

0.0.0-pr-20240315092726

1 month ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

5 months ago

7 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year 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

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