@pautena/react-design-system 0.4.2 → 0.4.4

package/src/components/inputs/inputs.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Inputs/Introduction" />
+
+# Inputs
+
+<ul>
+  <li><LinkTo kind="Components/Inputs/EnhancedSelect">EnhancedSelect</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/Sign In">Sign In</LinkTo></li>
+</ul>

package/src/components/{sign-in → inputs/sign-in}/sign-in.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
 import { SignIn } from "./sign-in";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 
 export default {
-  title: "Forms/Sign In",
+  title: "Components/Inputs/Sign In",
   component: SignIn,
   parameters: {
     layout: "centered",

package/src/components/{sign-in → inputs/sign-in}/sign-in.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { SignIn } from "./sign-in";
-import { expectProgressIndicator, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 async function submitSignIn(email: string | null, password: string | null) {
   email && (await userEvent.type(screen.getByRole("input", { name: /email/i }), email));

package/src/components/{sign-in → inputs/sign-in}/sign-in.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, useState } from "react";
 import { Stack, Box, TextField, Typography, Alert } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
 
-interface Props {
+export interface SignInProps {
   title: string;
   subtitle: string;
   error?: Error;
@@ -10,7 +10,7 @@ interface Props {
   onSubmitSignIn: (email: string, password: string) => void;
 }
 
-export function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Props) {
+export const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {
   const [emailError, setEmailError] = useState("");
   const [passwordError, setPasswordError] = useState("");
 
@@ -94,4 +94,4 @@ export function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Prop
       </Box>
     </>
   );
-}
+};

package/src/components/navigation/index.ts

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

package/src/components/{link → navigation/link}/link.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-d
 import { forwardRef } from "react";
 import { LinkProps, Link as MuiLink } from "@mui/material";
 
-// eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */
 export const LinkBehaviour = forwardRef<
   any,
   Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
@@ -12,6 +12,6 @@ export const LinkBehaviour = forwardRef<
   return <RouterLink ref={ref} to={href} {...other} />;
 });
 
-export const Link = forwardRef<any, LinkProps>((props, _) => {
+export const Link = forwardRef<any, LinkProps>((props, _1) => {
   return <MuiLink {...props} component={LinkBehaviour} />;
 });

package/src/components/navigation/navigation.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Navigation/Introduction" />
+
+# Navigation
+
+<ul>
+  <li><LinkTo kind="Components/Navigation/Tab card">Tab card</LinkTo></li>
+</ul>

package/src/components/{tab → navigation/tab}/tab-card/tab-card.dummy.tsx

@@ -2,16 +2,16 @@ import React from "react";
 import { TabCard } from "./tab-card";
 import { TabPanel } from "../tab-panel";
 import { Typography } from "@mui/material";
-import { TabProvider } from "../../../providers";
+import { TabProvider } from "../../../../providers";
 
 export const DummyTabs = ["tab 1", "tab 2.1", "tab 2.2", "tab 3"];
 
-interface Props {
+export interface TabCardDummyProps {
   tabs: string[];
   initialTab: number;
 }
 
-export function TabCardDummy({ tabs, initialTab }: Props) {
+export function TabCardDummy({ tabs, initialTab }: TabCardDummyProps) {
   return (
     <TabProvider initialValue={initialTab}>
       <TabCard tabs={tabs}>

package/src/components/{tab → navigation/tab}/tab-card/tab-card.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { TabCard } from "./tab-card";
-import { createTemplate } from "../../../storybook";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
+import { createTemplate } from "../../../../storybook";
+import { DummyTabs, TabCardDummy, TabCardDummyProps } from "./tab-card.dummy";
 
 export default {
-  title: "Cards/Tab card",
+  title: "Components/Navigation/Tab card",
   component: TabCard,
   parameters: {
     layout: "fullscreen",
   },
 } as ComponentMeta<typeof TabCard>;
 
-const Template = createTemplate((props) => {
+const Template = createTemplate((props: TabCardDummyProps) => {
   return <TabCardDummy {...props} />;
 });
 

package/src/components/{tab → navigation/tab}/tab-card/tab-card.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-import { screen, render } from "../../../tests";
+import { screen, render } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 
 describe("TabCard", () => {

package/src/components/{tab → navigation/tab}/tab-card/tab-card.tsx

@@ -8,11 +8,11 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   },
 }));
 
-interface Props {
+export type TabCardProps = PropsWithChildren<{
   tabs: string[];
-}
+}>;
 
-export const TabCard = ({ children, tabs }: PropsWithChildren<Props>) => {
+export const TabCard = ({ children, tabs }: TabCardProps) => {
   const [tab, setTab] = useTab();
   return (
     <Paper>

package/src/components/{tab → navigation/tab}/tab-panel/tab-panel.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { TabPanel } from "./tab-panel";
-import { TabProvider } from "../../../providers";
+import { TabProvider } from "../../../../providers";
 
 describe("TabPanel", () => {
   function renderInstance(initialValue: number) {

package/src/{tests → components/placeholders/content-placeholder}/content-placeholder.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../storybook";
-import { ContentPlaceholder } from "./components";
+import { createTemplate } from "../../../storybook";
+import { ContentPlaceholder } from "./content-placeholder";
 
 export default {
-  title: "Test/ContentPlaceholder",
+  title: "Components/Placeholders/ContentPlaceholder",
   component: ContentPlaceholder,
   parameters: {
     layout: "fullscreen",
@@ -13,4 +13,3 @@ export default {
 const Template = createTemplate(ContentPlaceholder);
 
 export const Default = Template.bind({});
-Default.args = {};

package/src/components/placeholders/content-placeholder/content-placeholder.tsx

@@ -0,0 +1,17 @@
+import { Container } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { SkeletonGrid } from "../skeleton-grid";
+
+export type ContentPlaceholderProps = PropsWithChildren<{
+  size?: number;
+  p?: number;
+}>;
+
+export const ContentPlaceholder = ({ size = 20, children, p }: ContentPlaceholderProps) => {
+  return (
+    <Container component="main" sx={{ p }} data-testid="content-placeholder-test">
+      {children}
+      <SkeletonGrid size={size} />
+    </Container>
+  );
+};

package/src/components/placeholders/content-placeholder/index.ts

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

package/src/components/placeholders/index.ts

@@ -0,0 +1,5 @@
+export * from "./placeholder";
+export * from "./skeleton-grid";
+export * from "./skeleton-card";
+export * from "./content-placeholder";
+export * from "./lorem-ipsum-placeholder";

package/src/components/placeholders/lorem-ipsum-placeholder/index.ts

@@ -0,0 +1 @@
+export * from "./lorem-ipsum-placeholder";

package/src/components/placeholders/lorem-ipsum-placeholder/lorem-ipsum-placeholder.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../../storybook";
+import { LoremIpsumPlaceholder } from "./lorem-ipsum-placeholder";
+
+export default {
+  title: "Components/Placeholders/LoremIpsumPlaceholder",
+  component: LoremIpsumPlaceholder,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof LoremIpsumPlaceholder>;
+
+const Template = createTemplate(LoremIpsumPlaceholder);
+
+export const Default = Template.bind({});

package/src/components/placeholders/lorem-ipsum-placeholder/lorem-ipsum-placeholder.tsx

@@ -0,0 +1,26 @@
+import { Typography } from "@mui/material";
+import { Variant } from "@mui/material/styles/createTypography";
+import { loremIpsum } from "lorem-ipsum";
+import { LoremUnit } from "lorem-ipsum/types/src/constants/units";
+import React from "react";
+
+export interface LoremIpsumPlaceholderProps {
+  count?: number;
+  units?: LoremUnit;
+  variant?: Variant;
+}
+
+export const LoremIpsumPlaceholder = ({
+  count = 3,
+  units = "paragraph",
+  variant = "body1",
+}: LoremIpsumPlaceholderProps) => {
+  return (
+    <Typography variant={variant}>
+      {loremIpsum({
+        count,
+        units,
+      })}
+    </Typography>
+  );
+};

package/src/components/{placeholder → placeholders/placeholder}/placeholder.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Placeholder, PlaceholderIconArgs } from "./placeholder";
 import SearchIcon from "@mui/icons-material/Search";
 import { actions } from "./placeholder.mock";
 
 export default {
-  title: "Components/Placeholder",
+  title: "Components/Placeholders/Placeholder",
   component: Placeholder,
   parameters: {
     layout: "fullscreen",

package/src/components/{placeholder → placeholders/placeholder}/placeholder.test.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { Placeholder, PlaceholderAction } from "./placeholder";
 import { actions as actionData } from "./placeholder.mock";
@@ -12,12 +12,13 @@ describe("Placeholder", () => {
     actions = undefined,
     icon = undefined,
   }: { actions?: PlaceholderAction[]; icon?: ReactElement } = {}) => {
+    const iconFn = icon ? () => icon : undefined;
     return render(
       <Placeholder
         title="Lorem ipsum"
         subtitle="Lorem ipsum sit amet"
         actions={actions}
-        icon={() => icon}
+        icon={iconFn}
       />,
     );
   };

package/src/components/placeholders/placeholders.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Placeholders/Introduction" />
+
+# Placehoders
+
+<ul>
+  <li><LinkTo kind="Components/Placeholders/Placeholder">Placeholder</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/SkeletonCard">SkeletonCard</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/SkeletonGrid">SkeletonGrid</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/ContentPlaceholder">ContentPlaceholder</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/LoremIpsumPlaceholder">LoremIpsumPlaceholder</LinkTo></li>
+</ul>

package/src/components/placeholders/skeleton-card/index.ts

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

package/src/{tests → components/placeholders/skeleton-card}/skeleton-card.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../storybook";
-import { SkeletonCard } from "./components";
+import { createTemplate } from "../../../storybook";
+import { SkeletonCard } from "./skeleton-card";
 
 export default {
-  title: "Test/SkeletonCard",
+  title: "Components/Placeholders/SkeletonCard",
   component: SkeletonCard,
   parameters: {
     layout: "fullscreen",

package/src/components/placeholders/skeleton-card/skeleton-card.tsx

@@ -0,0 +1,17 @@
+import { Box, Skeleton } from "@mui/material";
+import React from "react";
+
+export interface SkeletonCardProps {
+  width?: number | string;
+  animation?: "pulse" | "wave" | false;
+}
+
+export const SkeletonCard = ({ width = "100%", animation = false }: SkeletonCardProps) => {
+  return (
+    <Box width={width}>
+      <Skeleton animation={animation} variant="rectangular" height={118} />
+      <Skeleton animation={animation} variant="rectangular" height={16} sx={{ my: 1 }} />
+      <Skeleton animation={animation} variant="rectangular" width="80%" height={16} />
+    </Box>
+  );
+};

package/src/components/placeholders/skeleton-grid/index.ts

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

package/src/components/placeholders/skeleton-grid/skeleton-grid.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../../storybook";
+import { SkeletonGrid } from "./skeleton-grid";
+
+export default {
+  title: "Components/Placeholders/SkeletonGrid",
+  component: SkeletonGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof SkeletonGrid>;
+
+const Template = createTemplate(SkeletonGrid);
+
+export const Default = Template.bind({});

package/src/components/placeholders/skeleton-grid/skeleton-grid.tsx

@@ -0,0 +1,20 @@
+import { Grid } from "@mui/material";
+import React from "react";
+import { newArrayWithSize } from "~/utils";
+import { SkeletonCard } from "../skeleton-card";
+
+export interface SkeletonGridProps {
+  size?: number;
+}
+
+export const SkeletonGrid = ({ size = 20 }: SkeletonGridProps) => {
+  return (
+    <Grid container spacing={2}>
+      {newArrayWithSize(size, 0).map((_, i) => (
+        <Grid item key={i} xs={4}>
+          <SkeletonCard width={1} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};

package/src/components/{table → tables}/enhanced-remote-table/enhanced-remote-table.mock.tsx

@@ -2,20 +2,21 @@ import React from "react";
 import { TableCell, TableRow } from "@mui/material";
 import { EnhancedRemoteTable } from "./enhanced-remote-table";
 import { HeadCell, Order } from "../enhanced-table/enhanced-table-head";
+import { Data } from "../enhanced-table/enhanced-table.mock";
 
-interface DummyProps<T> {
-  data: T[];
+export interface EnhancedRemoteDummyTableProps {
+  data: Data[];
   loading: boolean;
-  defaultSort: string;
+  defaultSort: keyof Data;
   defaultOrder?: Order;
-  columns: HeadCell[];
+  columns: HeadCell<Data>[];
   onRequestSort: (col: string, orderBy: Order) => void;
 }
 
-export function EnhancedRemoteDummyTable<T>(props: DummyProps<T>) {
+export function EnhancedRemoteDummyTable(props: EnhancedRemoteDummyTableProps) {
   return (
     <EnhancedRemoteTable {...props}>
-      {(d: unknown) => (
+      {(d: Data) => (
         <TableRow key={d.id}>
           <TableCell>{d.name}</TableCell>
           <TableCell>{d.id}</TableCell>

package/src/components/{table → tables}/enhanced-remote-table/enhanced-remote-table.stories.tsx

@@ -5,7 +5,7 @@ import { columns, data } from "../enhanced-table/enhanced-table.mock";
 import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
 
 export default {
-  title: "Tables/Enhanced remote table",
+  title: "Components/Tables/EnhancedRemoteTable",
   component: EnhancedRemoteTable,
   parameters: {
     layout: "fullscreen",

package/src/components/{table → tables}/enhanced-remote-table/enhanced-remote-table.test.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { screen, render } from "@testing-library/react";
 import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
 import userEvent from "@testing-library/user-event";
-import { columns, data } from "../enhanced-table/enhanced-table.mock";
-import { expectProgressIndicator } from "../../../tests";
+import { columns, Data, data } from "../enhanced-table/enhanced-table.mock";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 function renderInstance({
   defaultSort = "startDate",
   loading = false,
-}: { defaultSort?: string; loading?: boolean } = {}) {
+}: { defaultSort?: keyof Data; loading?: boolean } = {}) {
   const onRequestSort = jest.fn();
   render(
     <EnhancedRemoteDummyTable

package/src/components/{table → tables}/enhanced-remote-table/enhanced-remote-table.tsx

@@ -10,14 +10,14 @@ import {
 } from "@mui/material";
 import { EnhancedTableHead, HeadCell, Order } from "../enhanced-table";
 
-interface Props<T> {
+export interface EnhancedRemoteTableProps<T> {
   data: T[];
   loading: boolean;
-  defaultSort: string;
+  defaultSort: keyof T;
   defaultOrder?: Order;
-  columns: HeadCell[];
+  columns: HeadCell<T>[];
   children: (data: T, index: number) => ReactNode;
-  onRequestSort: (col: string, orderBy: "asc" | "desc") => void;
+  onRequestSort: (col: keyof T, orderBy: "asc" | "desc") => void;
 }
 
 export const EnhancedRemoteTable = <T,>({
@@ -28,15 +28,15 @@ export const EnhancedRemoteTable = <T,>({
   defaultSort,
   defaultOrder,
   onRequestSort,
-}: Props<T>) => {
+}: EnhancedRemoteTableProps<T>) => {
   const [order, setOrder] = useState({
     orderBy: defaultSort,
     order: defaultOrder || "asc",
   });
 
-  const handleRequestSort = (property: string) => {
-    setOrder((prevState) => {
-      const newOrder = prevState.orderBy === property && prevState.order === "asc" ? "desc" : "asc";
+  const handleRequestSort = (property: keyof T) => {
+    setOrder(({ orderBy, order }) => {
+      const newOrder = orderBy === property && order === "asc" ? "desc" : "asc";
       onRequestSort(property, newOrder);
 
       return {

package/src/components/{table → tables}/enhanced-table/enhanced-table-head.tsx

@@ -3,23 +3,28 @@ import { TableSortLabel, TableRow, Box, TableCell, TableHead } from "@mui/materi
 import { visuallyHidden } from "@mui/utils";
 
 export type Order = "asc" | "desc";
-export interface HeadCell {
+export interface HeadCell<T> {
   disablePadding: boolean;
-  id: string;
+  id: keyof T;
   label: string;
   numeric: boolean;
   sort: boolean;
 }
 
-interface Props {
-  onRequestSort: (property: string) => void;
+interface EnhancedTableHeadProps<T> {
+  onRequestSort: (property: keyof T) => void;
   order: Order;
-  orderBy: string;
-  headCells: HeadCell[];
+  orderBy: keyof T;
+  headCells: HeadCell<T>[];
 }
 
-export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props) {
-  const createSortHandler = (property: string) => () => {
+export const EnhancedTableHead = <T,>({
+  order,
+  orderBy,
+  headCells,
+  onRequestSort,
+}: EnhancedTableHeadProps<T>) => {
+  const createSortHandler = (property: keyof T) => () => {
     onRequestSort(property);
   };
 
@@ -55,4 +60,4 @@ export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }:
       </TableRow>
     </TableHead>
   );
-}
+};

package/src/components/{table → tables}/enhanced-table/enhanced-table.mock.tsx

@@ -3,7 +3,7 @@ import { EnhancedTable } from ".";
 import { TableCell, TableRow } from "@mui/material";
 import { HeadCell, Order } from "./enhanced-table-head";
 
-export const columns: HeadCell[] = [
+export const columns: HeadCell<Data>[] = [
   {
     id: "name",
     numeric: false,
@@ -27,7 +27,7 @@ export const columns: HeadCell[] = [
   },
 ];
 
-interface Data {
+export interface Data {
   id: number;
   name: string;
   startDate: string;
@@ -61,15 +61,21 @@ export const data: Data[] = [
   },
 ];
 
-interface Props {
+export interface TestTableProps {
   data: Data[];
-  columns: HeadCell[];
-  defaultSort: string;
+  columns: HeadCell<Data>[];
+  defaultSort: keyof Data;
   defaultOrder: Order;
   loading: boolean;
 }
 
-export const TestTable = ({ data, columns, defaultOrder, defaultSort, loading }: Props) => {
+export const TestTable = ({
+  data,
+  columns,
+  defaultOrder,
+  defaultSort,
+  loading,
+}: TestTableProps) => {
   return (
     <EnhancedTable
       search

package/src/components/{table → tables}/enhanced-table/enhanced-table.stories.tsx

@@ -3,7 +3,7 @@ import { createTemplate } from "../../../storybook";
 import { TestTable, columns, data } from "./enhanced-table.mock";
 
 export default {
-  title: "Tables/Table",
+  title: "Components/Tables/EnhancedTable",
   component: TestTable,
   parameters: {
     layout: "fullscreen",

package/src/components/{table → tables}/enhanced-table/enhanced-table.test.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import { expectProgressIndicator, render } from "../../../tests";
+import { render } from "~/tests/testing-library";
 import { screen } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
-import { TestTable, columns, data } from "./enhanced-table.mock";
+import { TestTable, columns, data, Data } from "./enhanced-table.mock";
+import { expectProgressIndicator } from "~/tests/assertions";
 
-function renderInstance({
+const renderInstance = ({
   defaultSort = "startDate",
   loading = false,
-}: { defaultSort?: string; loading?: boolean } = {}) {
+}: { defaultSort?: keyof Data; loading?: boolean } = {}) => {
   return render(
     <TestTable
       data={data}
@@ -17,7 +18,7 @@ function renderInstance({
       loading={loading}
     />,
   );
-}
+};
 
 describe("EnhancedTable", () => {
   it("all items are rendered in the correct order", async () => {