@pautena/react-design-system 0.3.0 → 0.4.1

package/dist/esm/types/components/enhanced-select/enhanced-select.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import { SelectInputProps } from "@mui/material/Select/SelectInput";
+declare 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;
+export {};

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

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

package/dist/esm/types/components/index.d.ts

@@ -16,3 +16,4 @@ export * from "./drawer-item";
 export * from "./center-container";
 export * from "./value-displays";
 export * from "./content";
+export * from "./enhanced-select";

package/dist/esm/types/generators/model-router/model-router.types.d.ts

@@ -6,3 +6,4 @@ export interface RequestState {
 }
 export declare const IdleRequest: RequestState;
 export declare const LoadingRequest: RequestState;
+export declare const SuccessRequest: RequestState;

package/dist/esm/types/generators/model-router/screens/details-screen.d.ts

@@ -17,4 +17,4 @@ export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseSc
      */
     detailsItem?: T;
 }
-export declare const DetailsScreen: <T extends BasicModelInstance>({ model, modelName, onRequestItem, itemRequest, detailsItem, }: DetailsScreenProps<T>) => JSX.Element;
+export declare const DetailsScreen: <T extends BasicModelInstance>({ model, modelName, basePath, onRequestItem, itemRequest, detailsItem, }: DetailsScreenProps<T>) => JSX.Element;

package/dist/esm/types/hooks/index.d.ts

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

package/dist/esm/types/hooks/routing/index.d.ts

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

package/dist/esm/types/hooks/routing/routing.hooks.d.ts

@@ -0,0 +1,5 @@
+export interface NavigateWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNavigateWhenValueChanges: <T>(path: string, value: T | undefined, { from, to }: NavigateWhenValueChangesOptions<T>) => void;

package/dist/esm/types/providers/notification-center/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./notification-center.provider";
 export * from "./notification-center.context";
+export * from "./notification-center.hooks";

package/dist/esm/types/providers/notification-center/notification-center.hooks.d.ts

@@ -0,0 +1,6 @@
+import { Notification } from "./notification-center.context";
+export interface NotifyWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNotifyWhenValueChanges: <T>(notification: Notification, value: T | undefined, { from, to }: NotifyWhenValueChangesOptions<T>) => void;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { LinkProps } from 'react-router-dom';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import { BasicModelInstance as BasicModelInstance$1 } from '~/generators';
+import { SelectInputProps } from '@mui/material/Select/SelectInput';
 
 declare type HeaderPreset = PropTypes.Color | "transparent";
 declare type HeaderActionVariant = "text" | "outlined" | "contained";
@@ -457,6 +458,20 @@ declare type ContentElement = ReactElement<ContentElement, ContentComponent>;
 
 declare const Content: ({ children }: ContentProps) => JSX.Element;
 
+declare type EnhancedSelectSize = "small" | "medium";
+interface EnhancedSelectProps<T> {
+    label: string;
+    value: T;
+    loading?: boolean;
+    fetching?: boolean;
+    size?: EnhancedSelectSize;
+    color?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+declare const EnhancedSelect: <T extends React__default.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;
+
 declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
 declare const getRandomItem: <T>(items: T[]) => {
     index: number;
@@ -554,6 +569,7 @@ interface RequestState {
 }
 declare const IdleRequest: RequestState;
 declare const LoadingRequest: RequestState;
+declare const SuccessRequest: RequestState;
 
 interface BaseScreenProps {
     /**
@@ -700,6 +716,12 @@ interface NotificationCenterProps {
 declare const NotificationCenterContext: React__default.Context<NotificationCenterProps | undefined>;
 declare const useNotificationCenter: () => NotificationCenterProps;
 
+interface NotifyWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+declare const useNotifyWhenValueChanges: <T>(notification: Notification, value: T | undefined, { from, to }: NotifyWhenValueChangesOptions<T>) => void;
+
 declare const TabContext: React.Context<[number, Dispatch<SetStateAction<number>>]>;
 declare const TabContextProvider: React.Provider<[number, Dispatch<SetStateAction<number>>]>;
 declare const useTab: () => [number, Dispatch<SetStateAction<number>>];
@@ -709,4 +731,4 @@ declare type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, Link, LinkBehaviour, LoadingRequest, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SnackbarActionType, SnackbarContentType, TabCard, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useTab };
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedSelect, EnhancedSelectProps, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, Link, LinkBehaviour, LoadingRequest, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SnackbarActionType, SnackbarContentType, SuccessRequest, TabCard, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/enhanced-select/enhanced-select.stories.tsx

@@ -0,0 +1,99 @@
+import { Box, MenuItem, PropTypes, useTheme } from "@mui/material";
+import { ComponentMeta } from "@storybook/react";
+import React, { ReactNode } from "react";
+import { createTemplate, withContainer } from "../../storybook";
+import { EnhancedSelect, EnhancedSelectProps } from "./enhanced-select";
+import { faker } from "@faker-js/faker";
+
+const baseArgs = {
+  label: "Car model",
+  value: faker.vehicle.model(),
+  size: "medium",
+  fetching: false,
+  loading: false,
+  fullWidth: true,
+  options: faker.definitions.vehicle?.model || [],
+};
+
+export default {
+  title: "Input/EnhancedSelect",
+  component: EnhancedSelect,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof EnhancedSelect>;
+
+interface TemplateProps<T extends ReactNode> extends EnhancedSelectProps<T> {
+  options: T[];
+}
+
+const Template = createTemplate(<T extends string>({ options, ...rest }: TemplateProps<T>) => {
+  return (
+    <EnhancedSelect {...rest}>
+      {options.map((option) => (
+        <MenuItem key={option} value={option}>
+          {option}
+        </MenuItem>
+      ))}
+    </EnhancedSelect>
+  );
+});
+
+export const WithoutFullWidth = Template.bind({});
+WithoutFullWidth.args = {
+  ...baseArgs,
+  fullWidth: false,
+};
+
+export const EnhancedSelectLoaded = Template.bind({});
+EnhancedSelectLoaded.args = {
+  ...baseArgs,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...baseArgs,
+  loading: true,
+};
+
+export const Fetching = Template.bind({});
+Fetching.args = {
+  ...baseArgs,
+  fetching: true,
+};
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = {
+  ...baseArgs,
+  size: "small",
+};
+
+type WithBackgroundProps<T extends ReactNode> = TemplateProps<T> & { bgcolor: PropTypes.Color };
+
+export const WithBackground = <T extends string>({
+  options,
+  bgcolor: bgcolorProp,
+  ...rest
+}: WithBackgroundProps<T>) => {
+  const { palette } = useTheme();
+  const bgcolor = palette[bgcolorProp].main;
+  const selectColor = palette.getContrastText(bgcolor);
+
+  return (
+    <Box bgcolor={bgcolor} padding={3}>
+      <EnhancedSelect {...rest} color={selectColor}>
+        {options.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </EnhancedSelect>
+    </Box>
+  );
+};
+
+WithBackground.args = {
+  bgcolor: "secondary",
+  ...baseArgs,
+};

package/src/components/enhanced-select/enhanced-select.test.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { EnhancedSelectLoaded } from "./enhanced-select.stories";
+import { render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+
+describe("EnhancedSelect", () => {
+  const renderComponent = ({
+    label = EnhancedSelectLoaded.args.label,
+    loading = false,
+    fetching = false,
+  } = {}) => {
+    render(
+      <EnhancedSelectLoaded
+        {...EnhancedSelectLoaded.args}
+        label={label}
+        loading={loading}
+        fetching={fetching}
+      />,
+    );
+
+    return {
+      options: EnhancedSelectLoaded.args.options as string[],
+      value: EnhancedSelectLoaded.args.value as string,
+    };
+  };
+
+  it("would render a select with a label", () => {
+    renderComponent({ label: "Lorem ipsum" });
+
+    expect(screen.getByRole("button", { name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  it("would render the value", () => {
+    const { value } = renderComponent();
+
+    expect(screen.getByText(value)).toBeInTheDocument();
+  });
+
+  describe("when is loading", () => {
+    it("would render a progress indicator", () => {
+      renderComponent({ loading: true });
+
+      expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+
+    it("would render the value", () => {
+      const { value } = renderComponent({ loading: true });
+
+      expect(screen.getByText(value)).toBeInTheDocument();
+    });
+  });
+
+  describe("when is fetching", () => {
+    it("would render a progress indicator", () => {
+      renderComponent({ fetching: true });
+
+      expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+
+    it("wouldn't render the value", () => {
+      const { value } = renderComponent({ fetching: true });
+
+      expect(screen.queryByText(value)).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when is fetching and loading", () => {
+    it("would render a progress indicator", () => {
+      renderComponent({ fetching: true, loading: true });
+
+      expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+
+    it("wouldn't render the value", () => {
+      const { value } = renderComponent({ fetching: true, loading: true });
+
+      expect(screen.queryByText(value)).not.toBeInTheDocument();
+    });
+  });
+
+  it("would render a menu item for each option", async () => {
+    const { options } = renderComponent({ label: "Lorem ipsum" });
+
+    await userEvent.click(screen.getByRole("button", { name: /lorem ipsum/i }));
+
+    options.forEach((option) => {
+      expect(screen.getByRole("option", { name: option })).toBeInTheDocument();
+    });
+  });
+});

package/src/components/enhanced-select/enhanced-select.tsx

@@ -0,0 +1,110 @@
+import React, { ReactNode, useId } from "react";
+import {
+  Box,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  LinearProgress,
+  useTheme,
+  Select,
+  Typography,
+  styled,
+} from "@mui/material";
+import { CenterContainer } from "../center-container";
+import { SelectInputProps } from "@mui/material/Select/SelectInput";
+
+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"];
+}
+
+const ProgressSize: Record<EnhancedSelectSize, number> = {
+  small: 15,
+  medium: 20,
+};
+
+export const EnhancedSelect = <T extends ReactNode>({
+  label,
+  value,
+  loading = false,
+  fetching = false,
+  size = "medium",
+  fullWidth = false,
+  color,
+  children,
+  onChange,
+}: EnhancedSelectProps<T>) => {
+  const id = useId();
+
+  const renderValue = (value: T): ReactNode => {
+    if (fetching) {
+      return (
+        <CenterContainer centerVertical centerHorizontal>
+          <CircularProgress color="inherit" size={ProgressSize[size]} />
+        </CenterContainer>
+      );
+    }
+
+    if (loading) {
+      return (
+        <Box display="flex" flexDirection="column">
+          {value}
+          <LinearProgress
+            color="inherit"
+            sx={{ position: "absolute", left: 0, right: 0, bottom: 0 }}
+          />
+        </Box>
+      );
+    }
+
+    return value;
+  };
+
+  const StyledFormControl = styled(FormControl)(() => {
+    if (!color) {
+      return {};
+    }
+
+    return {
+      label: {
+        color,
+      },
+      ".MuiOutlinedInput-notchedOutline": {
+        borderColor: `${color} !important`,
+      },
+      ".MuiInputBase-root": {
+        color,
+      },
+      ".MuiSelect-icon": {
+        fill: color,
+      },
+    };
+  });
+
+  return (
+    <StyledFormControl fullWidth={fullWidth}>
+      <InputLabel id={id}>{label}</InputLabel>
+      <Select
+        labelId={id}
+        id={id}
+        value={value}
+        label={label}
+        onChange={onChange}
+        disabled={fetching}
+        size={size}
+        renderValue={renderValue}
+      >
+        {children}
+      </Select>
+    </StyledFormControl>
+  );
+};

package/src/components/enhanced-select/index.ts

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

package/src/components/index.ts

@@ -16,3 +16,4 @@ export * from "./drawer-item";
 export * from "./center-container";
 export * from "./value-displays";
 export * from "./content";
+export * from "./enhanced-select";