@saleor/macaw-ui 0.2.4

package/README.md

@@ -0,0 +1,40 @@
+<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>
+  
+  [![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)
+  [![Bundle Size](https://badgen.net/bundlephobia/minzip/@saleor/macaw-ui)](https://bundlephobia.com/package/@saleor/macaw-ui@latest)
+</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:
+
+```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.
+
+### 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";
+
+// ...
+
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+```
+
+## 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/)

package/dist/ActionBar/ActionBar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConfirmButtonTransitionState } from "../ConfirmButton";
+export interface ActionBarProps {
+    disabled: boolean;
+    state: ConfirmButtonTransitionState;
+    children: React.ReactNode[] | React.ReactNode;
+}
+export declare const ActionBar: React.FC<ActionBarProps>;

package/dist/ActionBar/context.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ActionBarContextType {
+    anchor: React.RefObject<HTMLDivElement>;
+    docked: boolean;
+    setDocked: (docked: boolean) => void;
+}
+export declare const ActionBarContext: React.Context<ActionBarContextType | undefined>;
+export declare const useActionBar: () => ActionBarContextType;
+export declare const ActionBarProvider: React.FC;

package/dist/ActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ActionBar";
+export * from "./context";

package/dist/ActionBar/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"content" | "paper" | "root", string>;
+export default useStyles;

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare type AlertVariant = "error" | "warning" | "success" | "info";
+export interface AlertProps {
+    className?: string;
+    close?: boolean;
+    variant: AlertVariant;
+    title: string;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/dist/Alert/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"close" | "content" | "closeNoContent" | "container" | "root" | "titleBar" | "error" | "success" | "warning", string>;
+export default useStyles;

package/dist/Backlink/Backlink.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface AppHeaderProps {
+    children: React.ReactNode;
+    onClick: () => void;
+}
+export declare const Backlink: React.FC<AppHeaderProps>;

package/dist/Backlink/context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type BacklinkContextType = React.RefObject<HTMLDivElement>;
+export declare const BacklinkContext: React.Context<BacklinkContextType | undefined>;
+export declare const useBacklink: () => BacklinkContextType;
+export declare const BacklinkProvider: React.FC;

package/dist/Backlink/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Backlink";
+export * from "./context";

package/dist/Backlink/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"backArrow" | "menuButton" | "root" | "skeleton" | "title", string>;
+export default useStyles;

package/dist/ConfirmButton/ConfirmButton.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps } from "@material-ui/core/Button";
+import React from "react";
+export declare type ConfirmButtonTransitionState = "loading" | "success" | "error" | "default";
+export declare type ConfirmButtonLabels = Record<"confirm" | "error", string>;
+export interface ConfirmButtonProps extends Omit<ButtonProps, "classes"> {
+    labels: ConfirmButtonLabels;
+    noTransition?: boolean;
+    transitionState: ConfirmButtonTransitionState;
+    onTransitionToDefault?: () => void;
+}
+export declare const ConfirmButton: React.FC<ConfirmButtonProps>;

package/dist/ConfirmButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./ConfirmButton";

package/dist/ConfirmButton/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"error" | "progress" | "icon" | "invisible" | "label" | "success", string>;
+export default useStyles;

package/dist/Notification/Notification.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { NotificationProps } from "./types";
+export declare const Notification: React.FC<NotificationProps>;

package/dist/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Notification";
+export * from "./types";

package/dist/Notification/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"actionBtn" | "text" | "closeBtn" | "closeBtnInfo" | "error" | "success" | "warning" | "info" | "hiddenText" | "snackbar" | "snackbarContainer" | "snackbarAction" | "messageContainer" | "container" | "title", string>;
+export default useStyles;

package/dist/Notification/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export declare type NotificationType = "info" | "success" | "error" | "warning";
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationData {
+    content?: ReactNode;
+    title: string;
+    action?: NotificationAction;
+    type: NotificationType;
+}
+export interface NotificationProps extends NotificationData {
+    className?: string;
+    onClose: () => void;
+}

package/dist/ResponsiveTable/ResponsiveTable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ResponsiveTableProps {
+    children: React.ReactNode | React.ReactNodeArray;
+    className?: string;
+    key?: string;
+}
+export declare const ResponsiveTable: React.FC<ResponsiveTableProps>;
+export {};

package/dist/ResponsiveTable/index.d.ts

@@ -0,0 +1 @@
+export * from "./ResponsiveTable";

package/dist/ResponsiveTable/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"root", string>;
+export default useStyles;

package/dist/Savebar/ButtonTooltipDecorator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ButtonTooltipDecoratorProps {
+    tooltip?: string;
+}
+export declare const ButtonTooltipDecorator: React.FC<ButtonTooltipDecoratorProps>;
+export {};

package/dist/Savebar/Savebar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ConfirmButtonLabels, ConfirmButtonTransitionState } from "../ConfirmButton";
+export declare type SavebarLabels = ConfirmButtonLabels & Record<"delete" | "cancel", string>;
+export declare type SavebarTooltips = Partial<Record<"confirm" | "delete" | "cancel", string>>;
+export interface SavebarProps {
+    disabled: boolean;
+    state: ConfirmButtonTransitionState;
+    labels: SavebarLabels;
+    tooltips?: SavebarTooltips;
+    onCancel: () => void;
+    onDelete?: () => void;
+    onSubmit: () => void;
+}
+export declare const Savebar: React.FC<SavebarProps>;

package/dist/Savebar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Savebar";

package/dist/Savebar/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"button" | "cancelButton" | "deleteButton" | "spacer", string>;
+export default useStyles;

package/dist/Sidebar/ExpandButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from "@material-ui/core/Button";
+import React from "react";
+export interface ExpandButtonProps extends ButtonProps {
+    isShrunk: boolean;
+}
+export declare const ExpandButton: React.FC<ExpandButtonProps>;

package/dist/Sidebar/MenuItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { SidebarMenuItem } from "./types";
+export interface MenuItemProps {
+    active: boolean;
+    isMenuShrunk: boolean;
+    menuItem: SidebarMenuItem;
+    onClick: (url: string) => void;
+}
+export declare const menuWidth = 210;
+export declare const shrunkMenuWidth = 72;
+export declare const MenuItem: React.FC<MenuItemProps>;

package/dist/Sidebar/Sidebar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { BaseSidebarProps } from "./types";
+export interface SidebarProps extends BaseSidebarProps {
+    active: string;
+}
+export declare const Sidebar: React.FC<SidebarProps>;

package/dist/Sidebar/fixtures.d.ts

@@ -0,0 +1,2 @@
+import { SidebarMenuItem } from "./types";
+export declare const menu: SidebarMenuItem[];

package/dist/Sidebar/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Sidebar";
+export * from "./MenuItem";
+export * from "./types";
+export * from "./ExpandButton";

package/dist/Sidebar/types.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface SidebarMenuItem {
+    ariaLabel: string;
+    children?: SidebarMenuItem[];
+    iconSrc?: string;
+    label: string;
+    id: string;
+    url?: string;
+    external?: boolean;
+}
+export interface BaseSidebarProps {
+    className?: string;
+    menuItems: SidebarMenuItem[];
+    toolbar?: React.ReactNode;
+    onMenuItemClick: (url: string) => void;
+}

package/dist/SidebarDrawer/MenuItemBtn.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SidebarMenuItem } from "../Sidebar/types";
+export interface MenuItemBtnProps {
+    menuItem: SidebarMenuItem;
+    onClick: (url: string) => void;
+}
+export declare const MenuItemBtn: React.FC<MenuItemBtnProps>;

package/dist/SidebarDrawer/SidebarDrawer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BaseSidebarProps } from "../Sidebar/types";
+export declare type SideBarDrawerProps = BaseSidebarProps;
+export declare const SidebarDrawer: React.FC<SideBarDrawerProps>;

package/dist/SidebarDrawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MenuItemBtn";
+export * from "./SidebarDrawer";

package/dist/SidebarDrawer/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"activeMenuLabel" | "content" | "icon" | "container" | "containerSubMenu" | "innerContainer" | "label" | "logo" | "menuItemBtn" | "root" | "secondaryContentActive" | "subMenuTopBar", string>;
+export default useStyles;

package/dist/SquareButton/SquareButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonBaseProps } from "@material-ui/core/ButtonBase";
+import React from "react";
+export declare const SquareButton: React.FC<ButtonBaseProps>;

package/dist/SquareButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./SquareButton";

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import { TooltipProps as MUITooltipProps } from "@material-ui/core/Tooltip";
+import React from "react";
+export interface TooltipProps extends MUITooltipProps {
+    variant?: "info" | "success" | "warning" | "error";
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/dist/Tooltip/styles.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from "./Tooltip";
+declare const useStyles: (props: TooltipProps) => Record<"tooltip", string>;
+export default useStyles;

package/dist/UserChipMenu/UserChipMenu.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface UserChipProps {
+    avatar: string | null;
+    initials: string;
+    name: string;
+    subtext?: string;
+}
+export declare const UserChipMenu: React.FC<UserChipProps>;

package/dist/UserChipMenu/UserChipMenuItem.d.ts

@@ -0,0 +1,6 @@
+import { MenuItemProps } from "@material-ui/core/MenuItem";
+import React from "react";
+export interface UserChipMenuItemProps extends Omit<MenuItemProps, "button"> {
+    leaveOpen?: boolean;
+}
+export declare const UserChipMenuItem: React.FC<UserChipMenuItemProps>;

package/dist/UserChipMenu/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare type UserChipMenuContextType = () => void;
+export declare const UserChipMenuContext: import("react").Context<UserChipMenuContextType | undefined>;
+export declare const useUserChipMenu: () => UserChipMenuContextType;

package/dist/UserChipMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./UserChipMenu";
+export * from "./UserChipMenuItem";

package/dist/UserChipMenu/styles.d.ts

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => Record<"arrow" | "rotate" | "avatar" | "avatarInitials" | "avatarPlaceholder" | "label" | "labelContainer" | "popover" | "userChip" | "userMenuContainer", string>;
+export default useStyles;

package/dist/extensions/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./sendMessage";
+export * from "./types";
+export * from "./useExtensionMessage";

package/dist/extensions/sendMessage.d.ts

@@ -0,0 +1,3 @@
+import { BaseExtensionMessageData } from "./types";
+export declare function sendMessageToDashboard<T extends BaseExtensionMessageData>(message: T, targetOrigin: string): void;
+export declare function sendMessageToExtension<T extends BaseExtensionMessageData>(message: T, targetOrigin: string): void;

package/dist/extensions/types.d.ts

@@ -0,0 +1,22 @@
+import { ThemeType } from "../theme";
+export declare enum ExtensionMessageType {
+    BREADCRUMB_CLICK = 0,
+    BREADCRUMB_SET = 1,
+    THEME = 2
+}
+export interface BaseExtensionMessageData {
+    type: ExtensionMessageType;
+}
+export declare type Breadcrumb = Record<"label" | "value", string>;
+export interface BreadcrumbClickMessage extends BaseExtensionMessageData {
+    breadcrumb: string;
+}
+export interface BreadcrumbChangeMessage extends BaseExtensionMessageData {
+    breadcrumbs: Breadcrumb[];
+}
+export interface ThemeChangeMessage extends BaseExtensionMessageData {
+    theme: ThemeType;
+}
+export interface ExtensionMessageEvent<T extends BaseExtensionMessageData> {
+    data: T;
+}

package/dist/extensions/useExtensionMessage.d.ts

@@ -0,0 +1,2 @@
+import { BaseExtensionMessageData, ExtensionMessageEvent } from "./types";
+export declare function useExtensionMessage<T extends BaseExtensionMessageData>(handle: (message: ExtensionMessageEvent<T>) => void): void;

package/dist/icons/ArrowDropdownIcon.d.ts

@@ -0,0 +1,2 @@
+declare const ArrowDropdownIcon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
+export default ArrowDropdownIcon;

package/dist/icons/CheckboxCheckedIcon.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxCheckedIcon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;

package/dist/icons/CheckboxIcon.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxIcon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;

package/dist/icons/CheckboxIndeterminateIcon.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxIndeterminateIcon: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;

package/dist/icons/CompleteIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CompleteIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/icons/InfoIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/icons/Logo.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Logo: React.FC;

package/dist/icons/NotAllowedIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NotAllowedIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/icons/NotAllowedInvertedIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NotAllowedInvertedIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/icons/WarningIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const WarningIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/icons/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./CompleteIcon";
+export * from "./InfoIcon";
+export * from "./NotAllowedIcon";
+export * from "./NotAllowedInvertedIcon";
+export * from "./WarningIcon";
+export * from "./ArrowDropdownIcon";
+export * from "./CheckboxIcon";
+export * from "./CheckboxCheckedIcon";
+export * from "./CheckboxIndeterminateIcon";

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from "./theme";
+export * from "./extensions";
+export * from "./icons";
+export * from "./Savebar";
+export * from "./Backlink";
+export * from "./ConfirmButton";
+export * from "./Sidebar";
+export * from "./SidebarDrawer";
+export * from "./SquareButton";
+export * from "./Alert";
+export * from "./Notification";
+export * from "./UserChipMenu";
+export * from "./ResponsiveTable";
+export * from "./Tooltip";
+export * from "./ActionBar";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./macaw-ui.cjs.production.min.js')
+} else {
+  module.exports = require('./macaw-ui.cjs.development.js')
+}

package/dist/localStorageKeys.d.ts

@@ -0,0 +1,4 @@
+export declare const localStorageKeys: {
+    theme: string;
+    menuShrink: string;
+};