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

package/src/OffsettedList/OffsettedList.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-
-import { useTheme } from "..";
-import {
-  BaseList,
-  BaseListBody,
-  BaseListBodyProps,
-  BaseListFooter,
-  BaseListFooterProps,
-  BaseListHeader,
-  BaseListHeaderProps,
-  BaseListItem,
-  BaseListItemCell,
-  BaseListItemCellProps,
-  BaseListItemProps,
-  BaseListProps,
-} from "../BaseList";
-import { useStyles } from "./styles";
-
-export const OffsettedList: React.FC<BaseListProps> = BaseList;
-export const OffsettedListHeader: React.FC<BaseListHeaderProps> =
-  BaseListHeader;
-export const OffsettedListFooter: React.FC<BaseListFooterProps> =
-  BaseListFooter;
-export const OffsettedListBody: React.FC<BaseListBodyProps> = (props) => {
-  const classes = useStyles();
-
-  return <BaseListBody className={classes.body} {...props} />;
-};
-export const OffsettedListItem: React.FC<Omit<BaseListItemProps, "classes">> = (
-  props
-) => {
-  const classes = useStyles();
-
-  return <BaseListItem classes={classes} {...props} />;
-};
-export const OffsettedListItemCell: React.FC<
-  Omit<BaseListItemCellProps, "classes">
-> = (props) => {
-  const classes = useStyles();
-
-  return <BaseListItemCell classes={classes} {...props} />;
-};
-
-export const useOffsettedListWidths = () => {
-  const theme = useTheme();
-
-  return {
-    // n actions - 1 + 2.5 right padding
-    actions: (n: number = 1) =>
-      `calc( ${theme.spacing(n - 1 + 2.5)} + ${40 * n}px)`,
-    checkbox: "64px",
-  };
-};

package/src/OffsettedList/index.ts

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

package/src/OffsettedList/styles.ts

@@ -1,92 +0,0 @@
-import { makeStyles } from "..";
-import { BaseListItemCellClassKey, BaseListItemClassKey } from "../BaseList";
-
-export const useStyles = makeStyles<
-  {},
-  BaseListItemCellClassKey | BaseListItemClassKey | "body"
->(
-  (theme) => {
-    const outerPadding = {
-      "&:first-child": {
-        paddingLeft: theme.spacing(4),
-      },
-      "&:last-child": {
-        paddingRight: theme.spacing(4),
-      },
-    };
-
-    return {
-      row: {
-        alignItems: "center",
-        display: "grid",
-        minHeight: 48,
-        gap: theme.spacing(4),
-      },
-      rowBody: {
-        "&:first-child": {
-          marginTop: theme.spacing(1),
-        },
-        background: theme.palette.background.paper,
-        borderRadius: 6,
-        boxShadow: theme.shadows[0],
-        height: 90,
-        margin: theme.spacing(1.5, 0),
-        transition: `${theme.transitions.create(
-          "box-shadow"
-        )},${theme.transitions.create("background", {
-          delay: 0,
-          duration: theme.transitions.duration.shortest,
-        })}`,
-        ...theme.typography.body1,
-      },
-      rowFoot: {
-        "& $cell": outerPadding,
-      },
-      rowHead: {
-        "& $cell": outerPadding,
-      },
-      rowHover: {
-        "&$rowBody:hover": {
-          "& $cell:first-child": {
-            color: theme.palette.primary.main,
-          },
-          boxShadow: theme.shadows[16],
-        },
-      },
-      rowBodySelected: {},
-      cell: {
-        boxSizing: "content-box",
-        flex: 1,
-        transition: theme.transitions.create("color", {
-          duration: theme.transitions.duration.shorter,
-        }),
-      },
-      cellAction: {
-        "&$cell:last-child": {
-          paddingRight: theme.spacing(2.5),
-        },
-        display: "flex",
-        gap: theme.spacing(1),
-        justifyContent: "flex-end",
-      },
-      cellCheckbox: {
-        "&$cell:first-child": {
-          paddingLeft: theme.spacing(2),
-        },
-      },
-      cellBody: {
-        ...outerPadding,
-        padding: theme.spacing(1, 0),
-      },
-      cellHeader: {
-        ...theme.typography.body2,
-        color: theme.palette.text.secondary,
-      },
-      body: {
-        margin: 0,
-        padding: 0,
-      },
-    };
-  },
-  { name: "OffsettedList" }
-);

package/src/PageTabs/PageTab.stories.tsx

@@ -1,59 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { makeStyles } from "../theme";
-import { Decorator, GuideDecorator } from "../utils/Decorator";
-import useGuideStyles from "../utils/guideStyles";
-import { PageTab } from "./PageTab";
-import { PageTabPanel } from "./PageTabPanel";
-import { PageTabs } from "./PageTabs";
-
-const useStyles = makeStyles((theme) => ({
-  tabContainer: {
-    background: theme.palette.background.default,
-    borderRadius: 4,
-    padding: theme.spacing(3),
-    marginBottom: theme.spacing(3),
-  },
-}));
-const InteractiveStory: React.FC = () => {
-  const [tab, setTab] = React.useState("lorem");
-  const classes = useStyles();
-  const guideClasses = useGuideStyles();
-
-  return (
-    <div>
-      <Typography className={guideClasses.headline} variant="h1">
-        Page Tabs
-      </Typography>
-      <Typography className={guideClasses.paragraph} component="p">
-        Page tabs are often used to switch between different views related to
-        the same content. They can also be used to switch between sections of a
-        form, or a table.
-      </Typography>
-
-      <div className={classes.tabContainer}>
-        <PageTabs value={tab} onChange={setTab}>
-          <PageTab value="lorem" label="Lorem" />
-          <PageTab value="ipsum" label="Ipsum" />
-          <PageTab value="dolor" label="Dolor" />
-        </PageTabs>
-      </div>
-      <PageTabPanel show={tab === "lorem"}>
-        Currently opened tab is "Lorem"
-      </PageTabPanel>
-      <PageTabPanel show={tab === "ipsum"}>
-        Currently opened tab is "Ipsum"
-      </PageTabPanel>
-      <PageTabPanel show={tab === "dolor"}>
-        Currently opened tab is "Dolor"
-      </PageTabPanel>
-    </div>
-  );
-};
-export const Default: Story = () => <InteractiveStory />;
-export default {
-  decorators: [Decorator, GuideDecorator],
-  title: "PageTab",
-} as Meta;

package/src/PageTabs/PageTab.tsx

@@ -1,19 +0,0 @@
-import Tab, { TabProps } from "@material-ui/core/Tab";
-import React from "react";
-
-import useStyles from "./styles";
-
-export const PageTab: React.FC<TabProps> = (props) => {
-  const classes = useStyles();
-
-  return (
-    <Tab
-      classes={{
-        root: classes.tabRoot,
-      }}
-      disableRipple
-      {...props}
-    />
-  );
-};
-PageTab.displayName = "PageTab";

package/src/PageTabs/PageTabPanel.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-
-export const PageTabPanel: React.FC<{ show: boolean }> = ({
-  children,
-  show,
-}) => (
-  <div
-    style={{
-      display: show ? "block" : "none",
-    }}
-  >
-    {children}
-  </div>
-);
-PageTabPanel.displayName = "PageTabPanel";

package/src/PageTabs/PageTabs.tsx

@@ -1,27 +0,0 @@
-import Tabs, { TabsProps } from "@material-ui/core/Tabs";
-import React from "react";
-
-import useStyles from "./styles";
-
-export const PageTabs: React.FC<
-  Omit<TabsProps, "onChange"> & {
-    onChange: (value: string) => void;
-  }
-> = (props) => {
-  const classes = useStyles();
-
-  return (
-    <Tabs
-      {...props}
-      classes={{
-        flexContainer: classes.containerFlex,
-        root: classes.containerRoot,
-      }}
-      TabIndicatorProps={{
-        style: { display: "none" },
-      }}
-      onChange={(_, value) => props.onChange(value)}
-    />
-  );
-};
-PageTabs.displayName = "PageTabs";

package/src/PageTabs/index.ts

@@ -1,3 +0,0 @@
-export * from "./PageTab";
-export * from "./PageTabs";
-export * from "./PageTabPanel";

package/src/PageTabs/styles.ts

@@ -1,35 +0,0 @@
-import { alpha } from "@material-ui/core/styles";
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    tabRoot: {
-      "@media (min-width: 600px)": {
-        minWidth: "unset",
-      },
-      "&.Mui-selected": {
-        background: theme.palette.saleor.generic.mid,
-        color: theme.palette.saleor.main[1],
-      },
-      "&:hover": {
-        background: alpha(theme.palette.saleor.generic.mid, 0.6),
-      },
-      color: theme.palette.saleor.main[1],
-      borderRadius: 4,
-      minHeight: 40,
-      padding: theme.spacing(1, 2),
-      textTransform: "unset",
-    },
-    containerRoot: {
-      minHeight: "unset",
-    },
-    containerFlex: {
-      columnGap: theme.spacing(2),
-    },
-  }),
-  {
-    name: "PageTab",
-  }
-);
-
-export default useStyles;

package/src/Pagination/Pagination.tsx

@@ -1,65 +0,0 @@
-import Toolbar from "@material-ui/core/Toolbar";
-import React from "react";
-
-import { PaginationActions, PaginationActionsProps } from "./PaginationActions";
-import {
-  PaginationRowNumberSelect,
-  PaginationRowNumberSelectProps,
-} from "./PaginationRowNumberSelect";
-import useStyles from "./styles";
-
-export interface PaginationProps<ActionProps = {}>
-  extends PaginationActionsProps<ActionProps>,
-    Omit<
-      PaginationRowNumberSelectProps,
-      "className" | "choices" | "onChange" | "rowNumber"
-    > {
-  choices?: number[];
-  disabled?: boolean;
-  rowNumber?: number;
-  onRowNumberUpdate?: (rowNumber: number) => void;
-}
-
-export const Pagination = <ActionProps,>({
-  choices = [10, 20, 30, 50, 100],
-  disabled,
-  hasNextPage,
-  hasPreviousPage,
-  nextIconButtonProps,
-  prevIconButtonProps,
-  labels,
-  rowNumber,
-  onNextPage,
-  onPreviousPage,
-  onRowNumberUpdate,
-  ...other
-}: PaginationProps<ActionProps>): React.ReactElement => {
-  const classes = useStyles();
-
-  return (
-    <Toolbar className={classes.toolbar} disableGutters {...other}>
-      <div className={classes.spacer}>
-        {rowNumber && (
-          <PaginationRowNumberSelect
-            choices={choices}
-            disabled={disabled}
-            labels={labels}
-            rowNumber={rowNumber}
-            onChange={onRowNumberUpdate}
-          />
-        )}
-      </div>
-      <PaginationActions
-        disabled={disabled}
-        hasNextPage={hasNextPage}
-        hasPreviousPage={hasPreviousPage}
-        nextIconButtonProps={nextIconButtonProps}
-        prevIconButtonProps={prevIconButtonProps}
-        onNextPage={onNextPage}
-        onPreviousPage={onPreviousPage}
-      />
-    </Toolbar>
-  );
-};
-
-Pagination.displayName = "Pagination";

package/src/Pagination/PaginationActions.tsx

@@ -1,79 +0,0 @@
-import ButtonBase, { ButtonBaseTypeMap } from "@material-ui/core/ButtonBase";
-import ChevronLeft from "@material-ui/icons/ChevronLeft";
-import ChevronRight from "@material-ui/icons/ChevronRight";
-import clsx from "clsx";
-import React from "react";
-
-import { useTheme } from "../theme";
-import useStyles from "./styles";
-
-type BaseButtonProps<M = unknown> = M extends Object
-  ? ButtonBaseTypeMap<M & { component: React.ElementType }>["props"]
-  : ButtonBaseTypeMap<{ href?: string }>["props"];
-
-export interface PaginationActionsProps<BProps = unknown> {
-  className?: string;
-  disabled?: boolean;
-  hasNextPage: boolean;
-  hasPreviousPage: boolean;
-  nextIconButtonProps?: BaseButtonProps<BProps>;
-  prevIconButtonProps?: BaseButtonProps<BProps>;
-  onNextPage?: () => void;
-  onPreviousPage?: () => void;
-}
-
-export const PaginationActions = <BProps,>({
-  className,
-  disabled,
-  hasNextPage,
-  hasPreviousPage,
-  nextIconButtonProps,
-  prevIconButtonProps,
-  onNextPage = () => {},
-  onPreviousPage = () => {},
-  ...other
-}: PaginationActionsProps<BProps>) => {
-  const classes = useStyles();
-
-  const { direction, themeType } = useTheme();
-
-  const isDark = themeType === "dark";
-  const previousDisabled = !hasPreviousPage || disabled;
-  const nextDisabled = !hasNextPage || disabled;
-
-  return (
-    <div className={clsx(classes.actions, className)} {...other}>
-      <ButtonBase
-        className={clsx(classes.actionsButton, {
-          [classes.dark]: isDark,
-          [classes.actionsButtonDisabled]: previousDisabled,
-        })}
-        disableRipple
-        onClick={onPreviousPage}
-        disabled={previousDisabled}
-        data-test-id="button-pagination-back"
-        aria-label="previous page"
-        {...prevIconButtonProps}
-      >
-        {direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
-      </ButtonBase>
-
-      <ButtonBase
-        className={clsx(classes.actionsButton, {
-          [classes.dark]: isDark,
-          [classes.actionsButtonDisabled]: nextDisabled,
-        })}
-        disableRipple
-        onClick={onNextPage}
-        disabled={nextDisabled}
-        data-test-id="button-pagination-next"
-        aria-label="next page"
-        {...nextIconButtonProps}
-      >
-        {direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
-      </ButtonBase>
-    </div>
-  );
-};
-
-PaginationActions.displayName = "PaginationActions";

package/src/Pagination/PaginationRowNumberSelect.tsx

@@ -1,54 +0,0 @@
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "./styles";
-
-export type PaginationRowNumberSelectLabels = Record<"noOfRows", string>;
-export interface PaginationRowNumberSelectProps {
-  choices: number[];
-  className?: string;
-  disabled?: boolean;
-  labels: PaginationRowNumberSelectLabels;
-  rowNumber: number;
-  onChange?: (value: number) => void;
-}
-
-export const PaginationRowNumberSelect: React.FC<
-  PaginationRowNumberSelectProps
-> = ({ className, choices, disabled, labels, rowNumber, onChange }) => {
-  const classes = useStyles({});
-
-  return (
-    <div className={clsx(classes.rowNumber, className)}>
-      <span className={classes.rowNumberLabel}>{labels.noOfRows}</span>
-      {onChange ? (
-        <Select
-          data-test-id="PaginationRowNumberSelect"
-          disabled={disabled}
-          inputProps={{
-            className: classes.rowNumberSelectLabel,
-          }}
-          className={classes.rowNumberSelect}
-          value={rowNumber}
-          onChange={(event) => onChange(event.target.value as number)}
-        >
-          {choices.length > 0 &&
-            choices.map((choice) => (
-              <MenuItem
-                value={choice}
-                key={choice}
-                data-test-id="rowNumberOption"
-              >
-                {choice}
-              </MenuItem>
-            ))}
-        </Select>
-      ) : (
-        ` ${rowNumber}`
-      )}
-    </div>
-  );
-};
-PaginationRowNumberSelect.displayName = "PaginationRowNumberSelect";

package/src/Pagination/TablePagination.tsx

@@ -1,21 +0,0 @@
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import React from "react";
-
-import { Pagination, PaginationProps } from "./Pagination";
-
-export interface TablePaginationProps extends PaginationProps {
-  colSpan: number;
-}
-
-export const TablePagination: React.FC<TablePaginationProps> = ({
-  colSpan,
-  ...paginationProps
-}) => (
-  <TableRow>
-    <TableCell padding="none" colSpan={colSpan}>
-      <Pagination {...paginationProps} />
-    </TableCell>
-  </TableRow>
-);
-TablePagination.displayName = "TablePagination";

package/src/Pagination/index.ts

@@ -1,4 +0,0 @@
-export * from "./Pagination";
-export * from "./PaginationActions";
-export * from "./PaginationRowNumberSelect";
-export * from "./TablePagination";

package/src/Pagination/styles.ts

@@ -1,67 +0,0 @@
-import { alpha } from "@material-ui/core/styles/colorManipulator";
-
-import { makeStyles } from "../theme";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    actions: {},
-    actionsButton: {
-      "&:hover": {
-        color: theme.palette.primary.main,
-      },
-      "&:last-child": {
-        marginLeft: theme.spacing(1.5),
-      },
-      "& svg": {
-        color: "currentColor",
-        width: 16,
-      },
-      border: "2px solid currentColor",
-      borderRadius: 2,
-      boxSizing: "border-box",
-      color: theme.palette.text.primary,
-      height: 36,
-      width: 36,
-      transition: theme.transitions.create("color", {
-        duration: theme.transitions.duration.shorter,
-      }),
-    },
-    actionsButtonDisabled: {
-      border: `2px solid ${theme.palette.text.disabled}`,
-      color: theme.palette.text.disabled,
-    },
-    dark: {
-      "&:focus, &:hover": {
-        "& > span:first-of-type": {
-          backgroundColor: alpha(theme.palette.primary.main, 0.2),
-        },
-      },
-      "&:not($actionsButtonDisabled)": {
-        color: theme.palette.primary.main,
-      },
-    },
-    root: {},
-    toolbar: {
-      justifyContent: "space-between",
-    },
-    spacer: {},
-
-    rowNumber: {
-      fontSize: theme.typography.body2.fontSize,
-    },
-    rowNumberLabel: {},
-    rowNumberSelect: {
-      "&&:before, &&:after": {
-        content: "none",
-      },
-      marginLeft: theme.spacing(1),
-    },
-    rowNumberSelectLabel: {
-      "&&": {
-        color: theme.palette.primary.main,
-      },
-    },
-  }),
-  { name: "Pagination" }
-);
-export default useStyles;