@pautena/react-design-system 0.3.1 → 0.4.0

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

@@ -0,0 +1,15 @@
+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;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+export declare const EnhancedSelect: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, 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/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,19 @@ 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;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+declare const EnhancedSelect: <T extends React__default.ReactNode>({ label, value, loading, fetching, size, fullWidth, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;
+
 declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
 declare const getRandomItem: <T>(items: T[]) => {
     index: number;
@@ -716,4 +730,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, 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 };
+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.1",
+  "version": "0.4.0",
   "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,70 @@
+import { MenuItem } 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",
+};

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,84 @@
+import React, { ReactNode, useId } from "react";
+import {
+  Box,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  LinearProgress,
+  Select,
+} 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;
+  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,
+  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;
+  };
+
+  return (
+    <FormControl 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>
+    </FormControl>
+  );
+};

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";