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.
npm i @saleor/macaw-uiYou 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>
);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>
);
}
}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} />}
/>;Add following configuration to Sentry.Integrations.Breadcrumbs:
{
dom: {
serializeAttribute: ["macaw-ui-component"];
}
}Right now sentry will display MacawUI components names in breadcrumbs.
To begin, you need to install dependencies:
pnpm installThen, you can run the Storybook:
pnpm devYou can run build in watch mode (useful for real-time development with e.g Dashboard):
pnpm watchWhen you finish woking, you can add new changeset
pnpm change:add- Chrome browser extension - Atomic CSS Devtools
Distributed under the Creative Common Attribution 4.0 International License https://creativecommons.org/licenses/by/4.0/
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.