@verifiedinc-public/shared-ui-elements 0.13.0 → 0.13.2-beta.1

package/dist/stories/components/Alert.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Alert } from '../../components/Alert';
+type PropsAndCustomArgs = React.ComponentProps<typeof Alert> & {
+    text?: string;
+    withAction?: boolean;
+};
+declare const meta: Meta<PropsAndCustomArgs>;
+export default meta;
+type Story = StoryObj<PropsAndCustomArgs>;
+export declare const Default: Story;
+export declare const WithButton: Story;

package/dist/stories/components/CredentialRequestsEditor.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react';
+import { CredentialRequestsEditor } from '../../components/CredentialRequestsEditor';
+declare const meta: {
+    title: string;
+    component: typeof CredentialRequestsEditor;
+    render: (args: any, { loaded: { credentialRequests, schemas } }: import('@storybook/csf').StoryContext<import('@storybook/react').ReactRenderer, Omit<import('../../components/CredentialRequestsEditor/CredentialRequestsEditor.context').CredentialRequestsEditorProps, "children">>) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        credentialRequests: {
+            description: string;
+        };
+        schemas: {
+            description: string;
+        };
+        addButtonText: {
+            type: "string";
+            description: string;
+        };
+        features: {
+            control: "object";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/components/QRCodeDisplay.stories.d.ts

@@ -0,0 +1,41 @@
+import { StoryObj } from '@storybook/react';
+import { QRCodeDisplay } from '../../components';
+declare const meta: {
+    title: string;
+    component: typeof QRCodeDisplay;
+    render: (args: any) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        asset: {
+            type: "string";
+            description: string;
+        };
+        data: {
+            type: "string";
+            description: string;
+        };
+        svgSize: {
+            type: "number";
+            description: string;
+        };
+        logoSize: {
+            type: "number";
+            description: string;
+        };
+        fill: {
+            type: "string";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/components/TextField.stories.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+import { TextField } from '../../components/TextField';
+declare const meta: {
+    title: string;
+    component: typeof TextField;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            description: string;
+            type: {
+                name: "enum";
+                value: string[];
+            };
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            type: {
+                name: "enum";
+                value: string[];
+            };
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        size: "medium";
+        variant: "standard";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Outlined: Story;
+export declare const OutlinedFixedLabel: Story;

package/dist/stories/components/Typography.stories.d.ts

@@ -0,0 +1,54 @@
+import { StoryObj } from '@storybook/react';
+import { Typography } from '../../components/Typography';
+declare const meta: {
+    title: string;
+    component: typeof Typography;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        align: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            type: "string";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const Subtitle1: Story;
+export declare const Subtitle2: Story;
+export declare const Body1: Story;
+export declare const Body2: Story;
+export declare const Button: Story;
+export declare const Overline: Story;

package/dist/stories/components/VerifiedImage.stories.d.ts

@@ -0,0 +1,28 @@
+import { VerifiedImage } from '../../components/verified/VerifiedImage';
+declare const _default: {
+    title: string;
+    component: typeof VerifiedImage;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        themeLight: {
+            control: {
+                type: string;
+            };
+        };
+        themeMain: {
+            control: {
+                type: string;
+            };
+        };
+        themeDark: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Default: any;

package/dist/stories/components/form/PhoneInput.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+import { PhoneInput } from '../../../components/form/PhoneInput';
+declare const meta: {
+    title: string;
+    component: typeof PhoneInput;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        shouldHaveClearButton: true;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/hooks/useCopyToClipboard.stories.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { StoryObj } from '@storybook/react';
+declare function HookRender(props: any): ReactElement;
+declare const meta: {
+    title: string;
+    component: typeof HookRender;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextPlain: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "0.13.0",
+  "version": "0.13.2-beta.1",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],
@@ -89,7 +89,8 @@
     "typescript": "^5.2.2",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^1.6.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "notistack": "^3.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
@@ -107,6 +108,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "react-imask": "^7.6.1",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "notistack": "^3.0.1"
   }
 }

package/src/components/Snackbar/index.tsx

@@ -0,0 +1,145 @@
+import { Close } from '@mui/icons-material';
+import {
+  Alert,
+  type AlertColor,
+  Box,
+  IconButton,
+  type SxProps,
+} from '@mui/material';
+import { When } from '../When';
+import {
+  closeSnackbar,
+  type CustomContentProps,
+  enqueueSnackbar,
+  SnackbarContent,
+  type SnackbarKey,
+  SnackbarProvider,
+} from 'notistack';
+import { forwardRef } from 'react';
+
+declare module 'notistack' {
+  interface VariantOverrides {
+    default: false;
+    success: false;
+    info: false;
+    warning: false;
+    error: false;
+    customAlertComponent: {
+      onAction?: (id: SnackbarKey) => void;
+      icon?: JSX.Element;
+      severity?: AlertColor;
+    };
+  }
+}
+
+export type { SnackbarKey };
+export { SnackbarProvider };
+
+interface AlertAction {
+  onAction?: (id: SnackbarKey) => void;
+  icon?: JSX.Element;
+}
+
+interface CustomAlertComponentProps extends Partial<CustomContentProps> {
+  severity: AlertColor;
+  alertAction?: AlertAction;
+  showCloseIcon?: boolean;
+  sx?: SxProps;
+}
+
+/**
+ * Hook to manage snackbar messages
+ * It wraps the enqueueSnackbar and closeSnackbar functions from the notistack library
+ * @returns
+ *  - updateSnackbar: Function to enqueue a snackbar message
+ *  - closeSnackbar: Function to close one or all snackbar messages
+ *  @see https://notistack.com/api-reference
+ */
+export function useSnackbar(): {
+  updateSnackbar: (
+    message: string,
+    severity?: AlertColor,
+    options?: Omit<CustomAlertComponentProps, 'severity'>,
+  ) => void;
+  closeSnackbar: (key?: SnackbarKey) => void;
+} {
+  const updateSnackbar = (
+    message: string,
+    severity: AlertColor = 'success',
+    options?: Omit<CustomAlertComponentProps, 'severity'>,
+  ): void => {
+    console.log({
+      severity,
+      variant: 'customAlertComponent',
+      persist: true,
+      ...options,
+    });
+    enqueueSnackbar(message, {
+      severity,
+      variant: 'customAlertComponent',
+      persist: true,
+      ...options,
+    });
+  };
+
+  return { updateSnackbar, closeSnackbar };
+}
+
+/**
+ * Custom Alert component to show snackbar messages
+ * This is a wrapper around the notistack SnackbarContent component
+ *
+ * Use it in the SnackbarProvider Components prop:
+ * @see https://notistack.com/features/customization#custom-component
+ * @example
+ * <SnackbarProvider
+ *   Components={{ customAlertComponent: CustomAlertComponent }}
+ * />
+ */
+export const CustomAlertComponent = forwardRef<
+  HTMLDivElement,
+  CustomAlertComponentProps
+>(
+  (
+    { id, message, severity, alertAction, sx, showCloseIcon = true, ...props },
+    ref,
+  ) => {
+    return (
+      <SnackbarContent ref={ref} {...props}>
+        <Alert
+          severity={severity}
+          action={
+            <Box ml={1}>
+              <When value={alertAction}>
+                <IconButton
+                  size='small'
+                  onClick={() => id && alertAction?.onAction?.(id)}
+                  color='inherit'
+                >
+                  {alertAction?.icon}
+                </IconButton>
+              </When>
+              <When value={!alertAction && showCloseIcon}>
+                <IconButton
+                  size='small'
+                  onClick={() => {
+                    closeSnackbar(id);
+                  }}
+                  color='inherit'
+                >
+                  <Close />
+                </IconButton>
+              </When>
+            </Box>
+          }
+          sx={{
+            alignItems: 'center',
+            ...sx,
+          }}
+        >
+          {message}
+        </Alert>
+      </SnackbarContent>
+    );
+  },
+);

package/src/components/form/OTPInput.tsx

@@ -140,10 +140,6 @@ function OTPInputComponent(
     const valuesString = values.join('');
     const firstEmptyInput = inputsRef.current[valuesString.length];
 
-    for (const input of inputsRef.current) {
-      input?.blur();
-    }
-
     firstEmptyInput?.focus();
     firstEmptyInput?.select();
   }, [values]);
@@ -165,6 +161,7 @@ function OTPInputComponent(
 
         // Calls onChange when all OTP fields are filled.
         if (newValueString.length === 6) {
+          inputsRef.current.forEach((input) => input?.blur());
           props.onChange?.({ target: { value: newValueString } });
         }
 

package/src/components/index.ts

@@ -8,3 +8,4 @@ export * from './Image';
 export * from './form/';
 export * from './verified';
 export * from './QRCodeDisplay';
+export * from './Snackbar';

package/src/index.ts

@@ -1,3 +1,11 @@
+/**
+ * The shared-ui-elements library is a collection of reusable, customizable UI components developed for Verified Inc..
+ *
+ * @see https://github.com/VerifiedInc/shared-ui-elements
+ *
+ * @packageDocumentation
+ */
+
 export * from './components';
 export * from './hooks';
 export * from './styles';

package/src/stories/components/Snackbar.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Portal, Stack } from '@mui/material';
+import { fn } from '@storybook/test';
+import { Button } from '../../components';
+import { SnackbarProvider, useSnackbar } from '../../components/Snackbar';
+
+const Snackbar = (): React.JSX.Element => {
+  const { updateSnackbar, closeSnackbar } = useSnackbar();
+
+  const renderButton = (
+    message: string,
+    severity: string,
+  ): React.JSX.Element => (
+    <Button
+      onClick={() => {
+        updateSnackbar(message, severity as any);
+      }}
+    >
+      {message}
+    </Button>
+  );
+
+  return (
+    <Stack>
+      <Portal>
+        <SnackbarProvider />
+      </Portal>
+      {renderButton('Success', 'success')}
+      {renderButton('Error', 'error')}
+      {renderButton('Warning', 'warning')}
+      {renderButton('Info', 'info')}
+      <Button
+        onClick={() => {
+          closeSnackbar();
+        }}
+      >
+        Clear all
+      </Button>
+    </Stack>
+  );
+};
+
+const meta = {
+  title: 'Components/Snackbar',
+
+  component: Snackbar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  args: {
+    name: 'otp',
+    onChange: fn(),
+    disabled: false,
+  },
+} satisfies Meta<typeof Snackbar>;
+
+export default meta;
+type Story = StoryObj<typeof Snackbar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {};