@pautena/react-design-system 0.5.1 → 0.6.1

package/src/components/drawers/drawer.mock.tsx

@@ -0,0 +1,195 @@
+import React from "react";
+import {
+  DrawerNavigation,
+  DrawerNavigationItem,
+  DrawerNavigationItemCollapsable,
+  DrawerNavigationItemLink,
+  DrawerNavigationSection,
+} from "./drawer.types";
+import DiamondIcon from "@mui/icons-material/Diamond";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import AccessAlarmIcon from "@mui/icons-material/AccessAlarm";
+import BrushIcon from "@mui/icons-material/Brush";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import FlightTakeoffIcon from "@mui/icons-material/FlightTakeoff";
+import FlightLandIcon from "@mui/icons-material/FlightLand";
+import ApiIcon from "@mui/icons-material/Api";
+import AutoFixOffIcon from "@mui/icons-material/AutoFixOff";
+import CallMissedIcon from "@mui/icons-material/CallMissed";
+import ConnectingAirportsIcon from "@mui/icons-material/ConnectingAirports";
+import DangerousIcon from "@mui/icons-material/Dangerous";
+import SpellcheckIcon from "@mui/icons-material/Spellcheck";
+import ChairIcon from "@mui/icons-material/Chair";
+
+export const mockLinkDrawerNavigationItem: DrawerNavigationItemLink = {
+  id: "item1.1",
+  text: "Item 1.1",
+  icon: <DiamondIcon />,
+  href: "/items/1-1",
+};
+
+export const mockLinkNoIconDrawerNavigationItem: DrawerNavigationItemLink = {
+  id: "item1.1",
+  text: "Item 1.1",
+  href: "/items/1-1",
+};
+
+export const mockLinkBulletDrawerNavigationItem: DrawerNavigationItem = {
+  id: "item1.3",
+  text: "Item 1.3",
+  href: "/items/1-3",
+  icon: <BrushIcon />,
+  bullet: {
+    variant: "secondary",
+  },
+};
+
+export const mockLinkLabelDrawerNavigationItem: DrawerNavigationItem = {
+  id: "item2.1",
+  text: "Item 2.1",
+  href: "/items/2-1",
+  icon: <FlightTakeoffIcon />,
+  label: {
+    text: "10",
+    variant: "error",
+  },
+};
+
+export const mockLinkAvatarDrawerNavigationItem: DrawerNavigationItem = {
+  id: "item.a.1",
+  text: "Avatar 1",
+  href: "/items/a-1",
+  avatar: {
+    src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+    alt: "Avatar 1",
+  },
+};
+
+export const mockListDrawerNavigationItems: DrawerNavigationItem[] = [
+  mockLinkDrawerNavigationItem,
+  {
+    id: "item1.2",
+    text: "Item 1.2",
+    href: "/items/1-2",
+    icon: <AccessAlarmIcon />,
+  },
+  mockLinkBulletDrawerNavigationItem,
+  {
+    id: "item1.4",
+    text: "Item 1.4",
+    href: "/items/1-4",
+    icon: <AccountBoxIcon />,
+    bullet: {
+      variant: "error",
+    },
+  },
+];
+
+export const mockMenuDrawerNavigationItem: DrawerNavigationItemCollapsable = {
+  id: "item2.3.4.2",
+  text: "Item 2.3.4.2",
+  icon: <ConnectingAirportsIcon />,
+  items: [
+    {
+      id: "item2.3.4.2.1",
+      text: "Item 2.3.4.2.1",
+      href: "/items/2-3-4-2.1",
+      icon: <DangerousIcon />,
+    },
+    {
+      id: "item2.3.4.2.2",
+      text: "Item 2.3.4.2.2",
+      href: "/items/2-3-4-2.2",
+      icon: <SpellcheckIcon />,
+    },
+  ],
+};
+
+export const mockMenuInsideMenuDrawerNavigationItem: DrawerNavigationItem = {
+  id: "item2.3.4",
+  text: "Item 2.3.4",
+  href: "/items/2-3-4",
+  icon: <AccountTreeIcon />,
+  items: [
+    {
+      id: "item2.3.4.1",
+      text: "Item 2.3.4.1",
+      href: "/items/2-3-4-1",
+      icon: <CallMissedIcon />,
+    },
+    mockMenuDrawerNavigationItem,
+  ],
+};
+
+export const mockListDrawerNavigationSection: DrawerNavigationSection = {
+  items: mockListDrawerNavigationItems,
+};
+
+export const mockMenuDrawerNavigationSection: DrawerNavigationSection = {
+  title: "Section 2",
+  items: [
+    mockLinkLabelDrawerNavigationItem,
+    {
+      id: "item2.2",
+      text: "Item 2.2",
+      href: "/items/2-2",
+      icon: <FlightLandIcon />,
+      label: {
+        text: "new",
+        variant: "info",
+      },
+    },
+    {
+      id: "item2.3",
+      text: "Item 2.3",
+      href: "/items/2-3",
+      icon: <ChairIcon />,
+      items: [
+        {
+          id: "item2.3.1",
+          text: "Item 2.3.1",
+          href: "/items/2-3-1",
+          icon: <ApiIcon />,
+        },
+        {
+          id: "item2.3.2",
+          text: "Item 2.3.2",
+          href: "/items/2-3-2",
+          icon: <MenuBookIcon />,
+        },
+        {
+          id: "item2.3.3",
+          text: "Item 2.3.3",
+          href: "/items/2-3-3",
+          icon: <AutoFixOffIcon />,
+        },
+        mockMenuInsideMenuDrawerNavigationItem,
+      ],
+    },
+  ],
+};
+
+export const mockAvatarsDrawerNavigationSection: DrawerNavigationSection = {
+  title: "Section avatar",
+  items: [
+    mockLinkAvatarDrawerNavigationItem,
+    {
+      id: "item.a.2",
+      text: "Avatar 2",
+      href: "/items/a-2",
+      avatar: {
+        src: "https://www.publicdomainpictures.net/pictures/270000/velka/avatar-people-person-business-u-15354603894rE.jpg",
+        alt: "Avatar 2",
+      },
+    },
+  ],
+};
+
+export const mockDrawerNavigation: DrawerNavigation = {
+  items: [
+    mockListDrawerNavigationSection,
+    mockMenuDrawerNavigationSection,
+    mockAvatarsDrawerNavigationSection,
+  ],
+};

package/src/components/drawers/drawer.types.ts

@@ -0,0 +1,78 @@
+import { FunctionComponent, ReactElement } from "react";
+import { BulletVariant, LabelVariant } from "../data-display";
+import { DrawerProps as MuiDrawerProps, Theme } from "@mui/material";
+import { DrawerAppBarProps } from "./drawer-app-bar";
+
+export type DrawerVariant = "temporary" | "mini" | "persistent" | "clipped";
+export type DrawerState = "open" | "collapse" | "close";
+export type DrawerSize = "small" | "medium";
+
+export interface DrawerItemAvatar {
+  src: string;
+  alt: string;
+}
+
+export interface DrawerItemLabel {
+  text: string;
+  variant: LabelVariant;
+}
+
+export interface DrawerItemBullet {
+  variant: BulletVariant;
+}
+
+export interface DrawerNavigationItemLink {
+  id: string;
+  text: string;
+  href: string;
+  icon?: ReactElement;
+  avatar?: DrawerItemAvatar;
+  label?: DrawerItemLabel;
+  bullet?: DrawerItemBullet;
+}
+
+export type DrawerNavigationItemCollapsable = Pick<
+  DrawerNavigationItemLink,
+  "id" | "text" | "icon"
+> & {
+  items: DrawerNavigationItem[];
+};
+
+export type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;
+
+export interface DrawerNavigationSection {
+  title?: string;
+  items: DrawerNavigationItem[];
+}
+
+export interface DrawerNavigation {
+  items: DrawerNavigationSection[];
+}
+
+export interface DrawerContentProps {
+  /**
+   * Object with the content that has to be rendered
+   */
+  nav: DrawerNavigation;
+  /**
+   * Item size. default to medium
+   */
+  size?: DrawerSize;
+}
+export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
+export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
+
+export interface DrawerProps extends MuiDrawerProps {
+  children: DrawerContentElement;
+}
+
+export type DrawerComponent = FunctionComponent<DrawerProps>;
+export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+
+export const getDrawerItemColors = (theme: Theme, selected: boolean | undefined) => ({
+  color: selected ? theme.palette.primary.main : undefined,
+  fontWeight: selected ? theme.typography.fontWeightBold : theme.typography.fontWeightMedium,
+});
+
+export type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
+export type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;

package/src/components/drawers/drawers.stories.mdx

@@ -10,4 +10,6 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Drawers/DrawerContent">DrawerContent</LinkTo></li>
   <li><LinkTo kind="Components/Drawers/DrawerItem">DrawerItem</LinkTo></li>
   <li><LinkTo kind="Components/Drawers/DrawerSection">DrawerSection</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/DrawerSubheader">DrawerSubheader</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/DrawerAppBar">DrawerAppBar</LinkTo></li>
 </ul>

package/src/components/drawers/index.ts

@@ -1,4 +1,8 @@
-export * from "./drawer";
+export * from "./drawer-provider";
 export * from "./drawer-content";
-export * from "./drawer-item";
 export * from "./drawer-section";
+export * from "./drawer.types";
+export * from "./drawer-subheader";
+export * from "./drawer-app-bar";
+export * from "./drawer";
+export * from "./drawer-main";

package/src/components/feedback/loading-area/loading-area.stories.tsx

@@ -1,5 +1,5 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate, withContainer } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
+import { withContainer } from "../../../storybook";
 import { LoadingArea } from "./loading-area";
 
 export default {
@@ -9,9 +9,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof LoadingArea>;
+} satisfies Meta<typeof LoadingArea>;
+type Story = StoryObj<typeof LoadingArea>;
 
-const Template = createTemplate(LoadingArea);
-
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {};

package/src/components/feedback/query-container/query-container.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate, withPadding } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
+import { withPadding } from "../../../storybook";
 import { QueryContainer, QueryContainerProps } from "./query-container";
 import { Typography, Box } from "@mui/material";
 
@@ -11,58 +11,64 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof QueryContainer>;
-
-const Template = createTemplate((args: QueryContainerProps) => {
-  return (
-    <Box height={300}>
-      <QueryContainer {...args}>
-        <Typography>Children content</Typography>
-      </QueryContainer>
-    </Box>
-  );
-});
+  render: (args: QueryContainerProps) => {
+    return (
+      <Box height={300}>
+        <QueryContainer {...args}>
+          <Typography>Children content</Typography>
+        </QueryContainer>
+      </Box>
+    );
+  },
+} satisfies Meta<typeof QueryContainer>;
+type Story = StoryObj<typeof QueryContainer>;
 
-export const Fetching = Template.bind({});
-Fetching.args = {
-  isFetching: true,
+export const Fetching: Story = {
+  args: {
+    isFetching: true,
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  isFetching: false,
-  error: {
-    name: "Sign in error",
-    message: "User and password doesn't match",
+export const Error: Story = {
+  args: {
+    isFetching: false,
+    error: {
+      name: "Sign in error",
+      message: "User and password doesn't match",
+    },
   },
 };
 
-export const ErrorWithOnlyMessage = Template.bind({});
-ErrorWithOnlyMessage.args = {
-  isFetching: false,
-  error: {
-    message: "Internal error",
+export const ErrorWithOnlyMessage: Story = {
+  args: {
+    isFetching: false,
+    error: {
+      message: "Internal error",
+    },
   },
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  isFetching: false,
-  success: {
-    name: "Item added",
-    message: "The new item has been created with id 1",
+export const Success: Story = {
+  args: {
+    isFetching: false,
+    success: {
+      name: "Item added",
+      message: "The new item has been created with id 1",
+    },
   },
 };
 
-export const SuccessWithOnlyMessage = Template.bind({});
-SuccessWithOnlyMessage.args = {
-  isFetching: false,
-  success: {
-    message: "The new item has been created with id 1",
+export const SuccessWithOnlyMessage: Story = {
+  args: {
+    isFetching: false,
+    success: {
+      message: "The new item has been created with id 1",
+    },
   },
 };
 
-export const Content = Template.bind({});
-Content.args = {
-  isFetching: false,
+export const Content: Story = {
+  args: {
+    isFetching: false,
+  },
 };

package/src/components/index.ts

@@ -1,6 +1,5 @@
 export * from "./value-displays";
 export * from "./feedback";
-export * from "./app-bars";
 export * from "./data-display";
 export * from "./containers";
 export * from "./drawers";

package/src/components/inputs/autocomplete/autocomplete.stories.tsx

@@ -0,0 +1,115 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { withContainer } from "../../../storybook";
+import { Autocomplete } from "./autocomplete";
+import { faker } from "@faker-js/faker";
+import { Box, useTheme } from "@mui/material";
+import React from "react";
+
+export default {
+  title: "Components/Inputs/Autocomplete",
+  component: Autocomplete,
+  decorators: [withContainer({ width: 300 })],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Autocomplete>;
+type Story = StoryObj<typeof Autocomplete>;
+
+const options: string[] = faker.definitions.vehicle?.model || [];
+
+export const Default: Story = {
+  args: {
+    label: "Car model",
+    options,
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    ...Default.args,
+    helperText: "This is a helper text",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
+};
+
+export const LoadingWithValue: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+    value: options[0],
+  },
+};
+
+export const Fetching: Story = {
+  args: {
+    ...Default.args,
+    fetching: true,
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    ...Default.args,
+    size: "small",
+  },
+};
+
+export const SizeSmallLoading: Story = {
+  args: {
+    ...Default.args,
+    size: "small",
+    value: options[0],
+    loading: true,
+  },
+};
+
+export const SizeSmallFetching: Story = {
+  args: {
+    ...Default.args,
+    size: "small",
+    fetching: true,
+    value: options[0],
+  },
+};
+
+type WithBackgroundProps = {
+  bgcolor: "primary" | "secondary";
+  loading: boolean;
+  fetching: boolean;
+};
+
+export const WithBackground = {
+  render: ({ bgcolor: bgcolorProp, loading, fetching }: WithBackgroundProps) => {
+    const { palette } = useTheme();
+    const BackgroundColors: Record<"primary" | "secondary", string> = {
+      primary: palette.primary.main,
+      secondary: palette.secondary.main,
+    };
+    const bgcolor = BackgroundColors[bgcolorProp];
+    const selectColor = palette.getContrastText(bgcolor);
+
+    return (
+      <Box bgcolor={bgcolor} padding={3}>
+        <Autocomplete
+          label="Car model"
+          options={options}
+          color={selectColor}
+          loading={loading}
+          fetching={fetching}
+        />
+      </Box>
+    );
+  },
+
+  args: {
+    bgcolor: "secondary",
+    loading: true,
+    fetching: true,
+  },
+};

package/src/components/inputs/{enhanced-autocomplete/enhanced-autocomplete.test.tsx → autocomplete/autocomplete.test.tsx}

@@ -1,22 +1,23 @@
 import { render, screen } from "~/tests/testing-library";
-import { EnhancedAutocomplete } from "./enhanced-autocomplete";
+import { Autocomplete } from "./autocomplete";
 import { faker } from "@faker-js/faker";
 import React from "react";
 import { selectOption } from "~/tests/actions";
 import userEvents from "@testing-library/user-event";
 import { expectProgressIndicator } from "~/tests/assertions";
+import { vi } from "vitest";
 
 const options: string[] = faker.definitions.vehicle?.model || [];
 
-describe("EnhancedAutocomplete", () => {
+describe("Autocomplete", () => {
   const renderComponent = ({
     value,
     loading,
     fetching,
   }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
-    const onChangeValue = jest.fn();
+    const onChangeValue = vi.fn();
     render(
-      <EnhancedAutocomplete
+      <Autocomplete
         label="Car model"
         loading={loading}
         fetching={fetching}

package/src/components/inputs/{enhanced-autocomplete/enhanced-autocomplete.tsx → autocomplete/autocomplete.tsx}

@@ -1,15 +1,19 @@
-import { Autocomplete, AutocompleteProps, ChipTypeMap } from "@mui/material";
+import {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  ChipTypeMap,
+} from "@mui/material";
 import React from "react";
-import { EnhancedTextField } from "../enhanced-text-field";
+import { TextField } from "../text-field";
 
-export interface EnhancedAutocompleteProps<
+export interface AutocompleteProps<
   T,
   Multiple extends boolean | undefined,
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"],
 > extends Omit<
-    AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+    MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
     "renderInput" | "onChange" | "color"
   > {
   label: string;
@@ -19,14 +23,14 @@ export interface EnhancedAutocompleteProps<
   onChangeValue?: (value: T) => void;
 }
 
-export const EnhancedAutocomplete = <
+export const Autocomplete = <
   T,
   Multiple extends boolean | undefined,
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"],
 >(
-  props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+  props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
 ) => {
   const {
     label,
@@ -42,13 +46,13 @@ export const EnhancedAutocomplete = <
   const loadingOrFetching = loading || fetching;
 
   return (
-    <Autocomplete
+    <MuiAutocomplete
       loading={loadingOrFetching}
       options={fetching ? [] : options}
       onChange={(_, value) => onChangeValue(value as T)}
       {...(rest as any)}
       renderInput={(params) => (
-        <EnhancedTextField
+        <TextField
           {...params}
           label={label}
           fullWidth

package/src/components/inputs/autocomplete/index.ts

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

package/src/components/inputs/index.ts

@@ -1,3 +1,3 @@
-export * from "./enhanced-select";
+export * from "./select";
 export * from "./sign-in";
-export * from "./enhanced-autocomplete";
+export * from "./autocomplete";

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

@@ -6,9 +6,9 @@ import LinkTo from '@storybook/addon-links/react';
 # Inputs
 
 <ul>
-  <li><LinkTo kind="Components/Inputs/EnhancedSelect">EnhancedSelect</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/Select">Select</LinkTo></li>
   <li><LinkTo kind="Components/Inputs/Sign In">Sign In</LinkTo></li>
-  <li><LinkTo kind="Components/Inputs/EnhancedAutocomplete">EnhancedAutocomplete</LinkTo></li>
-  <li><LinkTo kind="Components/Inputs/EnhancedTextField">EnhancedTextField</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/Autocomplete">Autocomplete</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/TextField">TextField</LinkTo></li>
   <li><LinkTo kind="Components/Inputs/SearchInput">SearchInput</LinkTo></li>
 </ul>