npm - @saleor/macaw-ui - Versions diffs - 0.7.2 → 0.8.0-dev.104 - Mend

@saleor/macaw-ui 0.7.2 → 0.8.0-dev.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1127) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 <div align="center">
-  <a href="https://macaw-ui.vercel.app/" rel="noopener" target="_blank"><img src="/stories/assets/macaw-ui-logo.svg" alt="Material-ui-pickers logo"></a></p>
+  <a href="https://macaw-ui-next.vercel.app/" rel="noopener" target="_blank"><img src="./legacy/stories/assets/macaw-ui-logo.svg" alt="Material-ui-pickers logo"></a></p>
   [![npm package](https://img.shields.io/npm/v/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)
   [![npm download](https://img.shields.io/npm/dm/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)
@@ -7,55 +7,131 @@
 </div>
 # MacawUI
 Official React UI components kit for [Saleor](https://saleor.io/) — 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](https://github.com/mirumee/saleor/discussions).
 ## Installation
 ```sh
 npm i @saleor/macaw-ui
 ```
-Note that this package depends on the following Material-UI **v4** packages: `@material-ui/core`, `@material-ui/icons` and `@material-ui/lab`. If your project doesn't have them installed and you're not using npm v7 with [automatically installed peer dependencies](https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/) then you'll need to install them manually:
+Note that this package still bundles the old version of MacawUI so it still depends on the following Material-UI v4 packages: @material-ui/core, @material-ui/icons and @material-ui/lab. If your project doesn't have them installed and you're not using npm v7 with [automatically installed peer dependencies](https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/) then you'll need to install them manually:
 ```sh
 npm i @material-ui/core @material-ui/icons @material-ui/lab
 ```
-## Documentation
-Take a look at our [storybook docs](https://macaw-ui.vercel.app). You can find guides, component overview, and project ideas there.
+## Usage
-### Development
+You need to import the styles into your app. You can do it in your main entry point, for example `index.`tsx`:
-To begin, you need to install dependencies:
+```tsx
+import "@saleor/macaw-ui/next/style";
+```
-```sh
-npm install
+Next, you need to add the `ThemeProvider` to your app. It will provide the theme to the components:
+```tsx
+import { ThemeProvider } from "@saleor/macaw-ui/next";
+const App = () => (
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+);
 ```
-We use [husky](https://www.npmjs.com/package/husky) to provide precommit and prepush git hooks:
+### Usage with Next.js
-```sh
-npx husky install
+As mentioned above, we still bundle the old version of MacawUI so you need to add the following to your `next.config.js`:
+```js
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    esmExternals: false,
+  },
+};
+```
+It tells Next.js not to use ESM exports for external modules. This is needed because MacawUI dependencies (Material-UI v4) are still using CommonJS exports.
+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`:
+```tsx
+import { getCSSVariables } from "@saleor/macaw-ui/next";
+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>
+    );
+  }
+}
 ```
-To develop our components we utilize [Storybook](https://storybook.js.org/) which is playing very nicely with our development flow. To run storybook's developer server run:
+### Usage with form libraries
+#### React Hook Form
+You need to wrap the MacawUI component with [`Controller`](https://react-hook-form.com/api/usecontroller/controller/). For example:
+```tsx
+import { Input } from "@saleor/macaw-ui/next";
+<Controller
+  control={control}
+  name="name-input"
+  render={({ field }) => <Input {...field} />}
+/>;
+```
+### Usage with Sentry
+Add following configuration to `Sentry.Integrations.Breadcrumbs`:
+```js
+{
+  dom: {
+    serializeAttribute: ["macaw-ui-component"];
+  }
+}
+```
+Right now sentry will display MacawUI components names in breadcrumbs.
+### Development
+To begin, you need to install dependencies:
 ```sh
-npm run storybook
+pnpm install
 ```
-### Working with Material-UI
-MacawUI was created to integrate with [Material-UI](https://material-ui.com/) seamlessly. It exports a `ThemeProvider` that will override Material-UI component styles:
-```jsx
-import { ThemeProvider } from "@saleor/macaw-ui";
+Then, you can run the Storybook:
-// ...
+```sh
+pnpm dev
+```
-<ThemeProvider>
-  <App />
-</ThemeProvider>
+You can run build in watch mode (useful for real-time development with e.g Dashboard):
+```sh
+pnpm watch
 ```
 ## License
 Distributed under the Creative Common Attribution 4.0 International License
 [https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/)
@@ -64,4 +140,3 @@ Distributed under the Creative Common Attribution 4.0 International License
 <a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
 Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

package/dist/.DS_Store ADDED Viewed

Binary file

package/dist/Inter-Black.woff2 ADDED Viewed

Binary file

package/dist/Inter-BlackItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Bold.woff2 ADDED Viewed

Binary file

package/dist/Inter-BoldItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-ExtraBold.woff2 ADDED Viewed

Binary file

package/dist/Inter-ExtraBoldItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-ExtraLight.woff2 ADDED Viewed

Binary file

package/dist/Inter-ExtraLightItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Italic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Light.woff2 ADDED Viewed

Binary file

package/dist/Inter-LightItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Medium.woff2 ADDED Viewed

Binary file

package/dist/Inter-MediumItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Regular.woff2 ADDED Viewed

Binary file

package/dist/Inter-SemiBold.woff2 ADDED Viewed

Binary file

package/dist/Inter-SemiBoldItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-Thin.woff2 ADDED Viewed

Binary file

package/dist/Inter-ThinItalic.woff2 ADDED Viewed

Binary file

package/dist/Inter-italic.var.woff2 ADDED Viewed

Binary file

package/dist/Inter-roman.var.woff2 ADDED Viewed

Binary file

package/dist/Inter.var.woff2 ADDED Viewed

Binary file

package/dist/components/Accordion/Item/Content.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { PropsWithBox } from '../../../components/Box';
+export declare type AccordionContentProps = PropsWithBox<{
+    children: ReactNode;
+}>;
+export declare const Content: {
+    ({ children, ...rest }: AccordionContentProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/Accordion/Item/Item.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { PropsWithBox } from '../../../components/Box';
+export declare type AccordionItemProps = PropsWithBox<{
+    children: ReactNode;
+    value: string;
+}>;
+export declare const Item: {
+    ({ children, value, ...rest }: AccordionItemProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/Accordion/Item/Trigger.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { PropsWithBox } from "../../Box";
+export declare type AccordionTriggerProps = PropsWithBox<{
+    children: ReactNode;
+    buttonDataTestId?: string;
+}>;
+export declare const Trigger: {
+    ({ children, disabled, ...rest }: AccordionTriggerProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/Accordion/Item/TriggerButton.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export interface TriggerButtonProps {
+    disabled?: boolean;
+    dataTestId?: string;
+}
+export declare const TriggerButton: {
+    ({ dataTestId, disabled }: TriggerButtonProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/Accordion/Item/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export * from "./Item";
+export * from "./Trigger";
+export * from "./Content";
+export * from "./TriggerButton";