@pautena/react-design-system 0.1.1 → 0.1.2

package/src/components/table-list/table-list.tsx

@@ -1,127 +0,0 @@
-import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
-import React from "react";
-import { EnhancedTable, HeadCell, Order } from "../table/enhanced-table";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { BasicModelInstance } from "~/generators";
-
-const OptionsId = "__options";
-
-export interface TableRowOption<T extends BasicModelInstance> {
-  id: string;
-  label: string;
-  onClick: (item: T) => void;
-}
-
-export interface TableListProps<T extends BasicModelInstance> {
-  columns: HeadCell[];
-  data: T[];
-  search?: boolean;
-  defaultSort: string;
-  defaultOrder?: Order;
-  loading?: boolean;
-  options?: TableRowOption<T>[];
-  onClick?: (d: T) => void;
-}
-
-export const TableList = <T extends BasicModelInstance>({
-  columns: columnsProp,
-  options,
-  data,
-  onClick = () => null,
-  search,
-  defaultSort,
-  defaultOrder,
-  loading,
-}: TableListProps<T>) => {
-  const columns = columnsProp;
-  const [anchorMenuEl, setAnchorMenuEl] = React.useState<null | { item: T; anchor: HTMLElement }>(
-    null,
-  );
-  if (options && !columns.some((c) => c.id === OptionsId)) {
-    columns.push({
-      id: OptionsId,
-      label: "",
-      disablePadding: false,
-      numeric: false,
-      sort: false,
-    });
-  }
-
-  return (
-    <>
-      <EnhancedTable<T>
-        columns={columns}
-        data={data}
-        search={search}
-        defaultSort={defaultSort}
-        defaultOrder={defaultOrder}
-        loading={loading}
-      >
-        {(filteredData) =>
-          filteredData.map((row, i) => {
-            return (
-              <TableRow
-                key={row.id}
-                onClick={() => onClick(row)}
-                role="row"
-                aria-rowindex={i}
-                sx={{ cursor: "pointer" }}
-              >
-                {columns.map(({ id }, j) => (
-                  <TableCell role="cell" scope="row" key={id} aria-rowindex={i} aria-colindex={j}>
-                    {row[id]}
-                  </TableCell>
-                ))}
-                {options && (
-                  <TableCell>
-                    <IconButton
-                      data-testid={`options-${row.id}`}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        setAnchorMenuEl({
-                          item: row,
-                          anchor: event.currentTarget,
-                        });
-                      }}
-                    >
-                      <MoreVertIcon />
-                    </IconButton>
-                  </TableCell>
-                )}
-              </TableRow>
-            );
-          })
-        }
-      </EnhancedTable>
-      {options && (
-        <Menu
-          anchorEl={anchorMenuEl?.anchor}
-          open={!!anchorMenuEl}
-          onClose={() => setAnchorMenuEl(null)}
-          anchorOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-          }}
-        >
-          {options.map(({ id, label, onClick }) => (
-            <MenuItem
-              key={id}
-              onClick={() => {
-                if (anchorMenuEl) {
-                  onClick(anchorMenuEl?.item);
-                }
-                setAnchorMenuEl(null);
-              }}
-            >
-              {label}
-            </MenuItem>
-          ))}
-        </Menu>
-      )}
-    </>
-  );
-};

package/src/components/value-displays/group-value-card/group-value-card.mock.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { ValueBoolean } from "../value-boolean/value-boolean";
-import { ValueText } from "../value-text";
-import { GroupValueCard, GroupValueItem } from "./group-value-card";
-
-export const GroupValueCardDummy = (props) => {
-  return (
-    <GroupValueCard {...props}>
-      <GroupValueItem xs={12} sm={6} md={4}>
-        <ValueText label="Hello world" value="Lorem ipsum sit amet" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={2}>
-        <ValueBoolean label="Enabled" value />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Quantity" value="1200" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Currency" value="EUR" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={6}>
-        <ValueText
-          label="I am Batman"
-          value=" Does it come in black? It's ends here. Hero can be anyone"
-        />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Status" value="Open" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Level" value="2144" />
-      </GroupValueItem>
-    </GroupValueCard>
-  );
-};

package/src/components/value-displays/group-value-card/group-value-card.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { GroupValueCard } from "./group-value-card";
-import { createTemplate, withPadding } from "../../../storybook";
-import { GroupValueCardDummy } from "./group-value-card.mock";
-
-export default {
-  title: "Value displays/GroupValueCard",
-  component: GroupValueCard,
-  decorators: [withPadding(2)],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof GroupValueCard>;
-
-const Template = createTemplate(GroupValueCardDummy);
-
-export const Default = Template.bind({});
-Default.args = {
-  title: "Hello world",
-  subtitle: "Lorem ipsum sit amet",
-};
-
-export const WihtoutSubtitle = Template.bind({});
-WihtoutSubtitle.args = {
-  title: "Hello world",
-};

package/src/components/value-displays/group-value-card/group-value-card.test.tsx

@@ -1,58 +0,0 @@
-import { render, screen } from "../../../tests";
-import React from "react";
-import { GroupValueCardDummy } from "./group-value-card.mock";
-
-describe("GroupValueCard", () => {
-  const renderComponent = ({
-    title = "Hello world",
-    subtitle = undefined,
-  }: { title?: string; subtitle?: string } = {}) => {
-    return render(<GroupValueCardDummy title={title} subtitle={subtitle} />);
-  };
-  it("would render a title", () => {
-    renderComponent({ title: "Hello world" });
-
-    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
-  });
-
-  describe("subtitle", () => {
-    it("would not render a subtitle if it's not provided", () => {
-      renderComponent({ subtitle: undefined });
-
-      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
-    });
-
-    it("would render a subtitle if it's provided", () => {
-      renderComponent({ subtitle: "Hi. I am batman" });
-
-      expect(
-        screen.getByRole("heading", { level: 2, name: /hi. i am batman/i }),
-      ).toBeInTheDocument();
-    });
-  });
-
-  it("would render all values", () => {
-    renderComponent();
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /enabled/i })).toBeInTheDocument();
-    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /quantity/i })).toBeInTheDocument();
-    expect(screen.getByText(/1200/i)).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /currency/i })).toBeInTheDocument();
-    expect(screen.getByText(/eur/i)).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /i am batman/i })).toBeInTheDocument();
-    expect(screen.getByText(/does it come in black/i)).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /status/i })).toBeInTheDocument();
-    expect(screen.getByText(/open/i)).toBeInTheDocument();
-
-    expect(screen.getByRole("label", { name: /level/i })).toBeInTheDocument();
-    expect(screen.getByText(/2144/i)).toBeInTheDocument();
-  });
-});

package/src/components/value-displays/group-value-card/group-value-card.tsx

@@ -1,63 +0,0 @@
-import { Grid, Paper, GridProps, Box, Typography } from "@mui/material";
-import React, { FunctionComponent, PropsWithChildren, ReactElement } from "react";
-import { useGetDefaultThemeColor } from "../../../utils/theme";
-
-export type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container">>;
-export type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
-export type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
-
-export const groupValueItemClasses = {
-  root: "RdsGroupValueItem-root",
-};
-
-export const GroupValueItem: GroupValueItemComponent = ({
-  children,
-  ...rest
-}: GroupValueItemProps) => {
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-
-  return (
-    <Grid item className={groupValueItemClasses.root} {...rest}>
-      <Box
-        px={1}
-        sx={{
-          borderLeft: `solid ${defaultColor} 1px`,
-        }}
-      >
-        {children}
-      </Box>
-    </Grid>
-  );
-};
-
-export interface GroupValueCardProps {
-  title: string;
-  subtitle?: string;
-  children: GroupValueItemElement | GroupValueItemElement[];
-}
-
-export const GroupValueCard = ({ title, subtitle, children }: GroupValueCardProps) => {
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-
-  return (
-    <Paper
-      sx={{
-        paddingBottom: 1,
-      }}
-    >
-      <Box bgcolor={defaultColor} px={2} py={1}>
-        <Typography variant="h6" role="heading" aria-level={1}>
-          {title}
-        </Typography>
-        {subtitle && (
-          <Typography variant="body2" role="heading" aria-level={2}>
-            {subtitle}
-          </Typography>
-        )}
-      </Box>
-      <Grid container margin={2} rowSpacing={2}>
-        {children}
-      </Grid>
-    </Paper>
-  );
-};

package/src/components/value-displays/group-value-card/index.ts

@@ -1 +0,0 @@
-export * from "./group-value-card";

package/src/components/value-displays/index.ts

@@ -1,4 +0,0 @@
-export * from "./value-text";
-export * from "./value-card";
-export * from "./value-boolean";
-export * from "./group-value-card";

package/src/components/value-displays/value-boolean/index.ts

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

package/src/components/value-displays/value-boolean/value-boolean.stories.tsx

@@ -1,25 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { ValueBoolean } from "./value-boolean";
-import { createTemplate } from "../../../storybook";
-
-export default {
-  title: "Value displays/ValueBoolean",
-  component: ValueBoolean,
-  parameters: {
-    layout: "centered",
-  },
-} as ComponentMeta<typeof ValueBoolean>;
-
-const Template = createTemplate(ValueBoolean);
-
-export const True = Template.bind({});
-True.args = {
-  label: "Lorem ipsum",
-  value: true,
-};
-
-export const False = Template.bind({});
-False.args = {
-  label: "Lorem ipsum",
-  value: false,
-};

package/src/components/value-displays/value-boolean/value-boolean.test.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { ValueBoolean } from "./value-boolean";
-import { render, screen } from "../../../tests";
-
-describe("ValueBoolean", () => {
-  const renderComponent = ({ value }: { value: boolean }) => {
-    return render(<ValueBoolean label="Hello world" value={value} />);
-  };
-
-  it("would render the label", () => {
-    renderComponent({ value: true });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-  });
-
-  it("would render a check if value is true", () => {
-    renderComponent({ value: true });
-
-    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
-  });
-
-  it("would render a cross if value is false", () => {
-    renderComponent({ value: false });
-
-    expect(screen.getByTestId("CloseIcon")).toBeInTheDocument();
-  });
-});

package/src/components/value-displays/value-boolean/value-boolean.tsx

@@ -1,33 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material";
-import React from "react";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-
-export interface ValueBooleanProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: boolean;
-}
-
-/**
- * Displays a boolean value with a label
- */
-export const ValueBoolean = ({ label, value }: ValueBooleanProps) => {
-  const { typography } = useTheme();
-
-  const iconSx = { fontSize: typography.h5.fontSize };
-
-  return (
-    <Box>
-      <Typography variant="subtitle2" role="label">
-        {label}
-      </Typography>
-      {value ? <CheckIcon color="success" sx={iconSx} /> : <CloseIcon color="error" sx={iconSx} />}
-    </Box>
-  );
-};

package/src/components/value-displays/value-card/index.ts

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

package/src/components/value-displays/value-card/value-card.stories.tsx

@@ -1,22 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { ComponentMeta } from "@storybook/react";
-import { ValueCard } from "./value-card";
-import { createTemplate } from "../../../storybook";
-import { ValueText } from "../value-text";
-
-export default {
-  title: "Value displays/ValueCard",
-  component: ValueCard,
-  parameters: {
-    layout: "centered",
-  },
-} as ComponentMeta<typeof ValueCard>;
-
-const Template = createTemplate(({ children }: PropsWithChildren) => {
-  return <ValueCard>{children}</ValueCard>;
-});
-
-export const ValueCardText = Template.bind({});
-ValueCardText.args = {
-  children: <ValueText label="Hello world" value="Lorem ipsum sit amet" />,
-};

package/src/components/value-displays/value-card/value-card.test.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { ValueCard } from "./value-card";
-import { render, screen } from "../../../tests";
-import { ReactElement } from "react";
-import { ValueText } from "../value-text";
-
-describe("ValueCard", () => {
-  const renderComponent = ({ children }: { children: ReactElement }) => {
-    return render(<ValueCard>{children}</ValueCard>);
-  };
-
-  it("would render with a ValueText inside", () => {
-    renderComponent({ children: <ValueText label="Hello world" value="Lorem ipsum sit amet" /> });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
-  });
-});

package/src/components/value-displays/value-card/value-card.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { Paper } from "@mui/material";
-import { PropsWithChildren } from "react";
-
-export type ValueCardProps = PropsWithChildren;
-
-/**
- * Container to show a labeled value
- */
-export const ValueCard = ({ children }: ValueCardProps) => {
-  return <Paper sx={{ p: 2 }}>{children}</Paper>;
-};

package/src/components/value-displays/value-text/index.ts

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

package/src/components/value-displays/value-text/value-test.test.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { render, screen } from "../../../tests";
-import { ValueText } from "./value-text";
-
-describe("ValueText", () => {
-  const renderComponent = () => {
-    return render(<ValueText label="Hello world" value="Lorem ipsum sit amet" />);
-  };
-
-  it("would render the label", () => {
-    renderComponent();
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-  });
-
-  it("would render the value", () => {
-    renderComponent();
-
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
-  });
-});

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { ValueText } from "./value-text";
-import { createTemplate, withContainer } from "../../../storybook";
-
-export default {
-  title: "Value displays/ValueText",
-  component: ValueText,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} as ComponentMeta<typeof ValueText>;
-
-const Template = createTemplate(ValueText);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Lorem",
-  value: "ipsum sit",
-};
-
-export const TruncatedText = Template.bind({});
-TruncatedText.args = {
-  label: "Lorem",
-  value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-};

package/src/components/value-displays/value-text/value-text.tsx

@@ -1,32 +0,0 @@
-import { Box, Tooltip, Typography } from "@mui/material";
-import React from "react";
-
-export interface ValueTextProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: string;
-}
-
-/**
- * Displays a string value with a label
- */
-export const ValueText = ({ label, value }: ValueTextProps) => {
-  const id = `label-${label.replace(/ /g, "-")}`;
-  return (
-    <Box>
-      <Typography variant="subtitle2" role="label" id={id}>
-        {label}
-      </Typography>
-      <Tooltip title={value} placement="top" enterDelay={2000}>
-        <Typography variant="h5" noWrap aria-labelledby={id}>
-          {value}
-        </Typography>
-      </Tooltip>
-    </Box>
-  );
-};