@verifiedinc-public/shared-ui-elements 1.3.3 → 2.1.0

package/src/hooks/useQRCode.ts

@@ -1,62 +0,0 @@
-import { useMemo } from 'react';
-
-import * as QRCode from 'qrcode';
-
-type QRCodeHookOptions = {
-  size: number;
-  imageSize: number;
-  data: string;
-  fill?: string;
-};
-
-export function useQRCode(hookOptions: QRCodeHookOptions) {
-  const qrcode = useMemo(
-    () => QRCode.create(hookOptions.data),
-    [hookOptions.data],
-  );
-
-  // Data array of 1s and 0s
-  const dataArray = qrcode.modules.data;
-
-  return useMemo(() => {
-    // Size of each square in the grid
-    const squareSize = hookOptions.size / Math.sqrt(dataArray.length);
-
-    // Create an SVG element
-    let svg = `<svg viewBox="0 0 ${hookOptions.size} ${hookOptions.size}" xmlns="http://www.w3.org/2000/svg">`;
-
-    // Define the logo size and position
-    const imageSize = hookOptions.imageSize;
-    const logoX = (hookOptions.size - imageSize) / 2;
-    const logoY = (hookOptions.size - imageSize) / 2;
-
-    // Loop through the data array and draw rectangles based on the values
-    for (let i = 0; i < dataArray.length; i++) {
-      // Get position to draw the circle
-      const x = (i % Math.sqrt(dataArray.length)) * squareSize;
-      const y = Math.floor(i / Math.sqrt(dataArray.length)) * squareSize;
-      // Calculate the radius
-      const radius = squareSize / 2;
-
-      // Check if the current position should be painted black
-      const shouldPaint = dataArray[i] === 1;
-
-      // Check if the current position is within the logo area
-      const isLogoArea =
-        x + squareSize >= logoX &&
-        x < logoX + imageSize &&
-        y + squareSize >= logoY &&
-        y < logoY + imageSize;
-
-      // No need to paint white, this will improve performance a lot.
-      if (!shouldPaint || isLogoArea) continue;
-
-      // Create a rounded rectangle element and append to svg string
-      svg += `<rect x="${x}" y="${y}" width="${squareSize}" height="${squareSize}" rx="${radius}" ry="${radius}" fill='${hookOptions.fill || '#000000'}' />`;
-    }
-
-    svg += '</svg>';
-
-    return svg;
-  }, [dataArray, hookOptions]);
-}

package/src/hooks/useSearchParams.ts

@@ -1,7 +0,0 @@
-/**
- * Returns a URLSearchParams object for the current URL search params.
- * @param search
- */
-export function useSearchParams(search?: string | URLSearchParams) {
-  return new URLSearchParams(search ?? window.location.search);
-}

package/src/index.ts

@@ -1,13 +0,0 @@
-/**
- * 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';
-export * from './utils';
-export * from './validations';

package/src/stories/components/Alert.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { type ReactNode } from 'react';
-import { Alert } from '../../components/Alert';
-import { Button } from '@mui/material';
-
-// Define the type of props this component receives
-type PropsAndCustomArgs = React.ComponentProps<typeof Alert> & {
-  text?: string;
-  withAction?: boolean;
-};
-
-const renderActions = (withAction: boolean): ReactNode => {
-  return withAction ? <Button>Action</Button> : undefined;
-};
-
-const meta: Meta<PropsAndCustomArgs> = {
-  title: 'Components/Alert',
-  component: Alert,
-  render: ({ withAction = false, text = 'A default alert', ...args }) => {
-    return (
-      <Alert action={renderActions(withAction)} {...args}>
-        {text}
-      </Alert>
-    );
-  },
-};
-
-export default meta;
-type Story = StoryObj<PropsAndCustomArgs>;
-
-// A default alert
-export const Default: Story = {};
-
-// An alert with an action Button
-export const WithButton: Story = {
-  args: {
-    withAction: true,
-    severity: 'info',
-    text: 'An alert with an action',
-  },
-};

package/src/stories/components/Button.stories.ts

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from '../../components/Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  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'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    variant: {
-      options: ['contained', 'outlined', 'text'],
-      control: { type: 'radio' },
-    },
-    color: {
-      options: ['primary', 'secondary', 'warning', 'error', 'neutral'],
-      control: { type: 'radio' },
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    variant: 'contained',
-    color: 'primary',
-    children: 'Primary',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'contained',
-    color: 'secondary',
-    children: 'Secondary',
-  },
-};

package/src/stories/components/CredentialRequestsEditor.stories.tsx

@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Box } from '@mui/material';
-
-import { buildDataFieldValue } from '../../components/CredentialRequestsEditor/utils/buildDataFieldValue';
-import { CredentialRequestsEditor } from '../../components/CredentialRequestsEditor';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/CredentialRequestsEditor',
-  component: CredentialRequestsEditor,
-  render: (args: any, { loaded: { credentialRequests, schemas } }) => (
-    <Box width={440}>
-      <CredentialRequestsEditor
-        {...args}
-        credentialRequests={credentialRequests}
-        schemas={schemas}
-      />
-    </Box>
-  ),
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '⚠️ REQUIRES schema resolver V2 to be running locally in order to fetch schemas.',
-      },
-    },
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    credentialRequests: {
-      description: 'This props is used to populate the credential requests.',
-    },
-    schemas: {
-      description:
-        'Schemas are being used to populate the field types, also it maps its children types to the parent.',
-    },
-    addButtonText: {
-      type: 'string',
-      description:
-        'This props is used to set the text of the button that adds a new credential request.',
-    },
-    features: {
-      control: 'object',
-      description: 'This props is used to enable or disable features.',
-    },
-  },
-} satisfies Meta<typeof CredentialRequestsEditor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  loaders: [
-    async () => {
-      const schemas = await (
-        await fetch('http://localhost:6061/jsonSchema')
-      ).json();
-
-      const credentialRequests = [
-        buildDataFieldValue('FullNameCredential', schemas),
-        buildDataFieldValue('PhoneCredential', schemas),
-        buildDataFieldValue('AddressCredential', schemas),
-        buildDataFieldValue('BirthDateCredential', schemas),
-        buildDataFieldValue('SsnCredential', schemas),
-      ];
-
-      return {
-        credentialRequests,
-        schemas,
-      };
-    },
-  ],
-  args: {
-    credentialRequests: [],
-    schemas: {},
-    onChange: fn() as any,
-    features: {
-      allowUserInput: {
-        disabled: false,
-      },
-      description: {
-        disabled: false,
-      },
-      mandatory: {
-        disabled: false,
-      },
-      multi: {
-        disabled: false,
-      },
-    },
-  },
-};

package/src/stories/components/QRCodeDisplay.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box } from '@mui/material';
-
-import { QRCodeDisplay } from '../../components';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/QRCodeDisplay',
-  component: QRCodeDisplay,
-  render: (args: any) => (
-    <Box width={300} mx='auto'>
-      <QRCodeDisplay {...args} />
-    </Box>
-  ),
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Component that displays a QR code with a logo in the center.',
-      },
-    },
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    asset: {
-      type: 'string',
-      description: 'Asset url to be loaded within the logo of the QR code.',
-    },
-    data: {
-      type: 'string',
-      description: 'Data string contained within the QR code.',
-    },
-    svgSize: {
-      type: 'number',
-      description: 'Size of the SVG element.',
-    },
-    logoSize: {
-      type: 'number',
-      description: 'Size of the logo within the QR code.',
-    },
-    fill: {
-      type: 'string',
-      description: 'Fill color of the QR code squares.',
-    },
-  },
-} satisfies Meta<typeof QRCodeDisplay>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: 'Some text encoded within a QR code.',
-    asset: undefined,
-  },
-};

package/src/stories/components/TextField.stories.ts

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { TextField } from '../../components/TextField';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/TextField',
-  component: TextField,
-  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'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    variant: {
-      description: 'The variant to use.',
-      type: { name: 'enum', value: ['outlined', 'standard', 'filled'] },
-      table: {
-        defaultValue: { summary: 'standard' },
-      },
-    },
-    size: {
-      description: 'The size of the component.',
-      type: { name: 'enum', value: ['small', 'medium'] },
-      table: {
-        defaultValue: { summary: 'medium' },
-      },
-    },
-  },
-  args: {
-    size: 'medium',
-    variant: 'standard',
-  },
-} satisfies Meta<typeof TextField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Outlined: Story = {
-  args: {
-    label: 'Label',
-    variant: 'outlined',
-    placeholder: 'Placeholder',
-  },
-};
-
-export const OutlinedFixedLabel: Story = {
-  args: {
-    label: 'Label',
-    variant: 'outlined',
-    placeholder: 'Placeholder',
-    InputLabelProps: {
-      shrink: true,
-    },
-  },
-};

package/src/stories/components/Typography.stories.ts

@@ -1,140 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Typography } from '../../components/Typography';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/Typography',
-  component: Typography,
-  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'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    align: {
-      options: ['center', 'inherit', 'justify', 'left', 'right'],
-      control: { type: 'radio' },
-      description: 'Set the text-align on the component.',
-      table: {
-        defaultValue: { summary: 'left' },
-      },
-    },
-    variant: {
-      options: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'subtitle1',
-        'subtitle2',
-        'body1',
-        'body2',
-        'caption',
-        'button',
-        'overline',
-      ],
-      control: { type: 'radio' },
-      description: 'Applies the theme typography styles.',
-      table: {
-        defaultValue: { summary: 'body1' },
-      },
-    },
-    children: {
-      description: 'The content of the component.',
-      type: 'string',
-    },
-  },
-} satisfies Meta<typeof Typography>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Heading1: Story = {
-  args: {
-    variant: 'h1',
-    children: 'Heading 1',
-  },
-};
-
-export const Heading2: Story = {
-  args: {
-    variant: 'h2',
-    children: 'Heading 2',
-  },
-};
-
-export const Heading3: Story = {
-  args: {
-    variant: 'h3',
-    children: 'Heading 3',
-  },
-};
-
-export const Heading4: Story = {
-  args: {
-    variant: 'h4',
-    children: 'Heading 4',
-  },
-};
-
-export const Heading5: Story = {
-  args: {
-    variant: 'h5',
-    children: 'Heading 5',
-  },
-};
-
-export const Heading6: Story = {
-  args: {
-    variant: 'h6',
-    children: 'Heading 6',
-  },
-};
-
-export const Subtitle1: Story = {
-  args: {
-    variant: 'subtitle1',
-    children: 'Subtitle 1',
-  },
-};
-
-export const Subtitle2: Story = {
-  args: {
-    variant: 'subtitle2',
-    children: 'Subtitle 2',
-  },
-};
-
-export const Body1: Story = {
-  args: {
-    variant: 'body1',
-    children: 'Body 1',
-  },
-};
-
-export const Body2: Story = {
-  args: {
-    variant: 'body2',
-    children: 'Body 2',
-  },
-};
-
-export const Button: Story = {
-  args: {
-    variant: 'button',
-    children: 'Button',
-  },
-};
-
-export const Overline: Story = {
-  args: {
-    variant: 'overline',
-    children: 'Overline',
-  },
-};

package/src/stories/components/VerifiedImage.stories.tsx

@@ -1,32 +0,0 @@
-import { VerifiedImage } from '../../components/verified/VerifiedImage';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: 'Components/VerifiedImage',
-  component: VerifiedImage,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  argTypes: {
-    themeLight: { control: { type: 'color' } },
-    themeMain: { control: { type: 'color' } },
-    themeDark: { control: { type: 'color' } },
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-};
-
-const Template = ({ themeLight, themeMain, themeDark, ...args }: any) => (
-  <VerifiedImage
-    {...args}
-    theme={{ light: themeLight, main: themeMain, dark: themeDark }}
-  />
-);
-
-export const Default: any = Template.bind({});
-Default.args = {
-  themeLight: '#0DBC3D',
-  themeMain: '#0DBC3D',
-  themeDark: '#0DBC3D',
-};

package/src/stories/components/form/DateInput.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { DateInput } from '../../../components/form/DateInput';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/DateInput',
-  component: DateInput,
-  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'],
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium'] },
-    value: { control: 'date' },
-  },
-} satisfies Meta<typeof DateInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {
-    name: 'date',
-    label: 'Label',
-    onChange: fn(),
-    disabled: false,
-    error: false,
-    size: 'small',
-    helperText: 'Helper text',
-  },
-  argTypes: {},
-};

package/src/stories/components/form/OTPInput.stories.tsx

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Box } from '@mui/material';
-import { fn } from '@storybook/test';
-import {
-  OTPInput,
-  type OTPInputInstance,
-} from '../../../components/form/OTPInput';
-import { useRef } from 'react';
-import { Button } from '../../../components';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-
-const meta = {
-  title: 'Components/OTPInput',
-
-  component: OTPInput,
-  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,
-  },
-  argTypes: {
-    ref: {
-      description:
-        'Ref to the OTPInput instance. It can be used to control the input from outside. See the example OTPWithControls.',
-    },
-  },
-} satisfies Meta<typeof OTPInput>;
-
-export default meta;
-type Story = StoryObj<typeof OTPInput>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {};
-
-interface OTPWithControlsProps {
-  name?: string;
-  onChange?: (event: { target: { value: string } }) => void;
-  disabled?: boolean;
-}
-
-/**
- *
- * This is a wrapper component for OTPInput
- * It was needed to demonstrate the focus, blur and clear functionality of OTPInput via useRef
- * It shows the OtpInput wrapped in a Box with 3 buttons to demonstrate focus, blur and clear functionality
- */
-
-export function OTPWithControls(
-  OTPWithControlsProps: OTPWithControlsProps,
-): React.JSX.Element {
-  const oneClickSignupSubmitInputRef = useRef<OTPInputInstance | null>(null);
-
-  return (
-    <Box>
-      <OTPInput {...OTPWithControlsProps} ref={oneClickSignupSubmitInputRef} />
-      <Button
-        onClick={() => {
-          oneClickSignupSubmitInputRef.current?.focus();
-        }}
-      >
-        Focus
-      </Button>
-
-      <Button
-        color='secondary'
-        onClick={() => {
-          oneClickSignupSubmitInputRef.current?.blur();
-        }}
-      >
-        Blur
-      </Button>
-      <Button
-        color='error'
-        onClick={() => {
-          oneClickSignupSubmitInputRef.current?.clear();
-        }}
-      >
-        Clear
-      </Button>
-    </Box>
-  );
-}