@pautena/react-design-system 0.5.0 → 0.6.0

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement } from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
 import { withMemoryRouter } from "~/storybook";
 import { withFullHeight } from "../../storybook";
@@ -48,40 +47,40 @@ const tabs: HeaderTab[] = [
   },
 ];
 
-export default {
-  title: "Layouts/HeaderLayout",
-  component: HeaderLayout,
-  decorators: [withMemoryRouter(), withFullHeight],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof HeaderLayout>;
-
 interface HeaderLayoutStoryProps extends HeaderLayoutProps {
   headerProps: HeaderProps;
   contentChildren: ReactElement;
 }
 
-const Template = createTemplate(
-  ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
-    return (
-      <HeaderLayout {...rest}>
-        <Header {...headerProps} />
-        <Content>{contentChildren}</Content>
-      </HeaderLayout>
-    );
+const DummyHeaderLayout = ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
+  return (
+    <HeaderLayout {...rest}>
+      <Header {...headerProps} />
+      <Content>{contentChildren}</Content>
+    </HeaderLayout>
+  );
+};
+
+export default {
+  title: "Layouts/HeaderLayout",
+  component: DummyHeaderLayout,
+  decorators: [withMemoryRouter(), withFullHeight],
+  parameters: {
+    layout: "fullscreen",
   },
-);
-
-export const Skeleton = Template.bind({});
-Skeleton.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+} satisfies Meta<typeof DummyHeaderLayout>;
+type Story = StoryObj<typeof DummyHeaderLayout>;
+
+export const Skeleton: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
   },
-  contentChildren: <SkeletonGrid />,
 };
 
 const ListContent = () => {
@@ -111,44 +110,47 @@ const ListContent = () => {
   );
 };
 
-export const List = Template.bind({});
-List.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const List: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <ListContent />,
   },
-  contentChildren: <ListContent />,
 };
 
-export const Details = Template.bind({});
-Details.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Details: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
   },
-  contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
 };
 
-export const Form = Template.bind({});
-Form.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Form: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: (
+      <ModelForm
+        model={mockModel}
+        initialValues={createModelInstance(mockModel)}
+        saveButtonText="Save"
+        onSubmit={action("Save form data")}
+      />
+    ),
   },
-  contentChildren: (
-    <ModelForm
-      model={mockModel}
-      initialValues={createModelInstance(mockModel)}
-      saveButtonText="Save"
-      onSubmit={action("Save form data")}
-    />
-  ),
 };
 
 const DataTableContent = () => {
@@ -164,49 +166,52 @@ const DataTableContent = () => {
   return <DataGrid rows={rows} columns={columns as any} pagination sx={{ height: 400 }} />;
 };
 
-export const DataTable = Template.bind({});
-DataTable.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const DataTable: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <DataTableContent />,
   },
-  contentChildren: <DataTableContent />,
 };
 
-export const Tabs = Template.bind({});
-Tabs.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
-    tabs,
+export const Tabs: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+      tabs,
+    },
+    contentChildren: (
+      <Box>
+        <TabPanel index={0}>
+          <Typography>Panel 1</Typography>
+        </TabPanel>
+        <TabPanel index={[1, 2]}>
+          <Typography>Panel 2</Typography>
+        </TabPanel>
+        <TabPanel index={3}>
+          <Typography>Panel 3</Typography>
+        </TabPanel>
+      </Box>
+    ),
   },
-  contentChildren: (
-    <Box>
-      <TabPanel index={0}>
-        <Typography>Panel 1</Typography>
-      </TabPanel>
-      <TabPanel index={[1, 2]}>
-        <Typography>Panel 2</Typography>
-      </TabPanel>
-      <TabPanel index={3}>
-        <Typography>Panel 3</Typography>
-      </TabPanel>
-    </Box>
-  ),
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  loading: true,
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Loading: Story = {
+  args: {
+    loading: true,
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
   },
-  contentChildren: <SkeletonGrid />,
 };

package/src/layouts/index.ts

@@ -1,2 +1,2 @@
-export * from "./app-bar-with-drawer-layout";
+export * from "./drawer-layout";
 export * from "./header-layout";

package/src/layouts/layouts.stories.mdx

@@ -6,6 +6,6 @@ import LinkTo from '@storybook/addon-links/react';
 ## Layouts
 
 <ul>
-  <li><LinkTo kind="Layouts/AppBarWithDrawer">AppBarWithDrawer</LinkTo></li>
+  <li><LinkTo kind="Layouts/DrawerLayout">DrawerLayout</LinkTo></li>
   <li><LinkTo kind="Layouts/HeaderLayout">HeaderLayout</LinkTo></li>
 </ul>

package/src/providers/notification-center/notification-center.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
 import { Button, Box } from "@mui/material";
@@ -23,7 +23,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ContentPlaceholder>;
+} satisfies Meta<typeof ContentPlaceholder>;
 
 export const Default = () => {
   const { show, hide } = useNotificationCenter();

package/src/providers/notification-center/notification-center.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { AlertColor, Box, Button } from "@mui/material";
 import { render, screen, waitForElementToBeRemoved } from "~/tests/testing-library";
 import { NotificationCenterProvider } from "./notification-center.provider";
+import { vi } from "vitest";
 import {
   NotificationCenterContext,
   NotificationCenterProviderUndefinedError,
@@ -121,7 +122,7 @@ describe("useNotifyWhenValueChanges", () => {
   };
 
   const renderHook = ({ to, from }: { to: boolean; from: boolean }) => {
-    const show = jest.fn();
+    const show = vi.fn();
 
     const DummyComponent = () => {
       const [value, setValue] = useState<boolean | undefined>(false);
@@ -140,7 +141,7 @@ describe("useNotifyWhenValueChanges", () => {
       <NotificationCenterContext.Provider
         value={{
           show,
-          hide: jest.fn(),
+          hide: vi.fn(),
         }}
       >
         <DummyComponent />

package/src/stories/getting-started.stories.mdx

@@ -19,5 +19,5 @@ npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/ico
 Now you are going to be able to import the components and use it in your React project.
 
 ```javascript
-import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
+import { DrawerLayout } from "@pautena/react-design-system";
 ```

package/src/storybook.tsx

@@ -1,20 +1,12 @@
 /* eslint-disable react/display-name */
-import React, { FunctionComponent, PropsWithChildren, ReactElement, useState } from "react";
-import { ComponentStory } from "@storybook/react";
-import { JSXElementConstructor } from "react";
-import { Box, Button } from "@mui/material";
+import React, { FunctionComponent, useState } from "react";
+import { Box, Button, SxProps, Theme } from "@mui/material";
 import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
 import { NotificationCenterProvider } from "./providers";
 import { action } from "@storybook/addon-actions";
 import { LocalizationProvider } from "@mui/x-date-pickers/";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
-export function createTemplate<P extends object>(
-  C: JSXElementConstructor<P>,
-): ComponentStory<JSXElementConstructor<P>> {
-  return (args) => <C {...args} />;
-}
-
 const replaceAction = action("navigator/replace");
 const goAction = action("navigator/go");
 const pushAction = action("navigator/push");
@@ -66,9 +58,24 @@ export const withFullHeight = (Story: FunctionComponent) => {
 };
 
 export const withContainer =
-  ({ width, height, bordered }: { width?: number; height?: number; bordered?: boolean }) =>
+  ({
+    width,
+    height,
+    bordered,
+    backgroundColor,
+    padding,
+  }: {
+    width?: number;
+    height?: number;
+    bordered?: boolean;
+    backgroundColor?: string;
+    padding?: number;
+  }) =>
   (Story: FunctionComponent) => {
-    let sx = {};
+    let sx: SxProps<Theme> = {
+      backgroundColor,
+      padding,
+    };
     if (bordered) {
       sx = {
         ...sx,

package/src/tests/assertions.ts

@@ -168,3 +168,36 @@ export const expectToHaveBeenCalledOnceWithMockInstance = (
     ),
   });
 };
+
+export enum AssertCloseDateUpTo {
+  Year = 1,
+  Month = 2,
+  Day = 3,
+  Hour = 4,
+  Minute = 5,
+  Seconds = 6,
+  Milliseconds = 7,
+}
+export const assertCloseDate = (date: Date, expectedDate: Date, upTo: AssertCloseDateUpTo) => {
+  if (upTo >= AssertCloseDateUpTo.Year) {
+    expect(date.getFullYear()).toBe(expectedDate.getFullYear());
+  }
+  if (upTo >= AssertCloseDateUpTo.Month) {
+    expect(date.getMonth()).toBe(expectedDate.getMonth());
+  }
+  if (upTo >= AssertCloseDateUpTo.Day) {
+    expect(date.getDay()).toBe(expectedDate.getDay());
+  }
+  if (upTo >= AssertCloseDateUpTo.Hour) {
+    expect(date.getHours()).toBe(expectedDate.getHours());
+  }
+  if (upTo >= AssertCloseDateUpTo.Minute) {
+    expect(date.getMinutes()).toBe(expectedDate.getMinutes());
+  }
+  if (upTo >= AssertCloseDateUpTo.Seconds) {
+    expect(date.getSeconds()).toBe(expectedDate.getSeconds());
+  }
+  if (upTo >= AssertCloseDateUpTo.Milliseconds) {
+    expect(date.getMilliseconds()).toBe(expectedDate.getMilliseconds());
+  }
+};

package/src/tests/datatable-placeholder/datatable-placeholder.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { DatatablePlaceholder } from "./datatable-placeholder";
 
 export default {
@@ -8,8 +7,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof DatatablePlaceholder>;
+} satisfies Meta<typeof DatatablePlaceholder>;
+type Story = StoryObj<typeof DatatablePlaceholder>;
 
-const Template = createTemplate(DatatablePlaceholder);
-
-export const Default = Template.bind({});
+export const Default: Story = {};

package/src/tests/mocks.ts

@@ -1,3 +1,5 @@
+import { vi } from "vitest";
+
 export const mockConsoleError = () => {
   mockConsole("error");
 };
@@ -12,7 +14,7 @@ export const mockConsole = (severity: "error" | "warn") => {
 
   beforeEach(() => {
     logFn = console[severity];
-    console[severity] = jest.fn();
+    console[severity] = vi.fn();
   });
 
   afterEach(() => {

package/src/utils/forms.ts

@@ -0,0 +1,11 @@
+import { FormEvent } from "react";
+
+export const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {
+  const data = new FormData(e.currentTarget);
+  const rawData: Record<string, any> = {};
+
+  data.forEach((value, key) => {
+    rawData[key] = value;
+  });
+  return rawData as T;
+};

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [viteTsconfigPaths()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./setupTests.ts",
+  },
+});

package/dist/cjs/types/components/app-bars/app-bar/app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "./app-bar.types";
-export declare const AppBar: AppBarComponent;

package/dist/cjs/types/components/app-bars/app-bar/app-bar.types.d.ts

@@ -1,14 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { AppBarProps as MuiAppBarProps } from "@mui/material";
-export interface AppBarProfile {
-    name: string;
-}
-export interface AppBarProps extends MuiAppBarProps {
-    menu?: boolean;
-    title?: string;
-    search?: boolean;
-    profile?: AppBarProfile;
-    onClickSignOut: () => void;
-}
-export type AppBarComponent = FunctionComponent<AppBarProps>;
-export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/dist/cjs/types/components/app-bars/app-bar/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./mini-app-bar";
-export * from "./mini-app-bar";
-export * from "./app-bar.types";

package/dist/cjs/types/components/app-bars/app-bar/mini-app-bar/index.d.ts

@@ -1 +0,0 @@
-export * from "./mini-app-bar";

package/dist/cjs/types/components/app-bars/app-bar/mini-app-bar/mini-app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "../app-bar.types";
-export declare const MiniAppBar: AppBarComponent;

package/dist/cjs/types/components/app-bars/index.d.ts

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

package/dist/cjs/types/components/drawers/drawer/drawer.mock.d.ts

@@ -1,3 +0,0 @@
-import { DrawerContentComponent, Nav } from "./drawer.types";
-export declare const mockNav: Nav;
-export declare const DummyDrawerContent: DrawerContentComponent;

package/dist/cjs/types/components/drawers/drawer/drawer.provider.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from "react";
-type Props = PropsWithChildren<{
-    initialOpen?: boolean;
-}>;
-export declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
-export {};

package/dist/cjs/types/components/drawers/drawer/drawer.types.d.ts

@@ -1,51 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant, LabelVariant } from "../../data-display";
-import { DrawerProps as MuiDrawerProps } from "@mui/material";
-export interface NavItemAvatar {
-    src: string;
-    alt: string;
-}
-export interface NavItemLabel {
-    text: string;
-    variant: LabelVariant;
-}
-export interface NavItemBullet {
-    variant: BulletVariant;
-}
-export interface NavItemLink {
-    id: string;
-    text: string;
-    href: string;
-    icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
-}
-export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
-    items: NavItemLink[];
-};
-export type NavItem = NavItemLink | NavItemCollapsable;
-export interface NavSection {
-    title?: string;
-    items: NavItem[];
-}
-export interface Nav {
-    items: NavSection[];
-}
-export interface DrawerContentProps {
-    /**
-     * Item currently selected in the navigation
-     */
-    selectedItem?: string;
-    /**
-     * Object with the content that has to be rendered
-     */
-    nav: Nav;
-}
-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>;

package/dist/cjs/types/components/drawers/drawer/mini-drawer/index.d.ts

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

package/dist/cjs/types/components/drawers/drawer/mini-drawer/mini-drawer.d.ts

@@ -1 +0,0 @@
-export declare const MiniDrawer: import("@emotion/styled").StyledComponent<import("..").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/cjs/types/components/drawers/drawer-collapsable-item/drawer-collapsable-item.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement } from "react";
-import { NavItemLink } from "../drawer/drawer.types";
-export interface DrawerCollapsableItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Id of the item that has to be marked as selected;
-     */
-    selectedItem?: string;
-    /**
-     * Items that are going to be displayed inside
-     * the collapsable
-     */
-    items: NavItemLink[];
-}
-export declare const DrawerCollapsableItem: ({ text, icon, selected, selectedItem, items, }: DrawerCollapsableItemProps) => JSX.Element;

package/dist/cjs/types/components/drawers/drawer-collapsable-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./drawer-collapsable-item";

package/dist/cjs/types/components/drawers/drawer-section/drawer-section.mock.d.ts

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

package/dist/cjs/types/components/inputs/enhanced-autocomplete/enhanced-autocomplete.d.ts

@@ -1,10 +0,0 @@
-import { AutocompleteProps, ChipTypeMap } from "@mui/material";
-import React from "react";
-export interface EnhancedAutocompleteProps<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>, "renderInput" | "onChange" | "color"> {
-    label: string;
-    helperText?: string;
-    color?: string;
-    fetching?: boolean;
-    onChangeValue?: (value: T) => void;
-}
-export declare const EnhancedAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType<any> = "div">(props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-autocomplete/index.d.ts

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

package/dist/cjs/types/components/inputs/enhanced-select/enhanced-select.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-import { SelectInputProps } from "@mui/material/Select/SelectInput";
-export type EnhancedSelectSize = "small" | "medium";
-export interface EnhancedSelectProps<T> {
-    label: string;
-    value: T;
-    loading?: boolean;
-    fetching?: boolean;
-    size?: EnhancedSelectSize;
-    color?: string;
-    fullWidth?: boolean;
-    children?: ReactNode;
-    onChange?: SelectInputProps<T>["onChange"];
-}
-export declare const EnhancedSelect: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-select/index.d.ts

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

package/dist/cjs/types/components/inputs/enhanced-text-field/enhanced-text-field.d.ts

@@ -1,7 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-export type EnhancedTextFieldProps = TextFieldProps & {
-    fetching?: boolean;
-    loading?: boolean;
-    hexColor?: string;
-};
-export declare const EnhancedTextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: EnhancedTextFieldProps) => JSX.Element;

package/dist/cjs/types/components/inputs/enhanced-text-field/index.d.ts

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

package/dist/cjs/types/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-import { AppBarElement } from "../../components/app-bars/app-bar";
-import { DrawerElement } from "../../components/drawers/drawer";
-export interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
-}
-export declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;

package/dist/cjs/types/layouts/app-bar-with-drawer-layout/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar-with-drawer-layout";