@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Pagination } from './Pagination';
+import { PaginationProps } from './Pagination.types';
+
+export default {
+  title: 'Components/Pagination',
+  component: Pagination,
+  args: {
+    currentPage: 1,
+    numTotalItems: 100,
+    itemsPerPageOptions: [30, 40, 50],
+    itemsPerPage: 30,
+  },
+  argTypes: {
+    currentPage: { control: 'number' },
+    maxPage: { control: 'number' },
+  },
+} as Meta<typeof Pagination>;
+
+export const Default: StoryFn<PaginationProps> = (args) => {
+  const [currentPage, setCurrentPage] = React.useState(args.currentPage ?? 0);
+  const [itemsPerPage, setItemsPerPage] = React.useState(args.itemsPerPage);
+
+  return (
+    <Pagination
+      {...args}
+      currentPage={currentPage}
+      onCurrentPageChange={setCurrentPage}
+      onBack={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+      onNext={() =>
+        setCurrentPage((prev) =>
+          Math.min(prev + 1, Math.ceil(args.numTotalItems / itemsPerPage))
+        )
+      }
+      numTotalItems={args.numTotalItems}
+      itemsPerPageOptions={args.itemsPerPageOptions}
+      itemsPerPage={itemsPerPage}
+      onItemsPerPageOptionChange={setItemsPerPage}
+    />
+  );
+};
+
+export const NoItemsPerPageOptions: StoryFn<PaginationProps> = (args) => {
+  return <Pagination {...args} />;
+};
+
+NoItemsPerPageOptions.args = {
+  itemsPerPageOptions: undefined,
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,150 @@
+import { useMemo, useState } from 'react';
+import { SingleValue } from 'react-select';
+import { Flex, useTheme } from '@chakra-ui/react';
+
+import { Icon } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { Subtext, Subtitle } from '@/components/Typography';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { Select } from '../Select';
+import { SelectOption } from '../Select/Select.types';
+import { PaginationProps } from './Pagination.types';
+
+/**
+ * A pagination component that allows users to navigate through pages.
+ * Displays the current page number and the maximum page count.
+ * Supports both controlled and uncontrolled modes.
+ *
+ * - **Controlled Mode**: Pass `currentPage` and `onBack`/`onNext` props to fully control the pagination behavior.
+ * - **Uncontrolled Mode**: If `currentPage` is not provided, the component manages its own internal state for the current page.
+ *
+ * @param {PaginationProps} props - Props for the Pagination component.
+ * @param {number} [props.currentPage] - The current page number (controlled mode).
+ * @param {number} props.maxPage - The maximum number of pages available.
+ * @param {() => void} [props.onBack] - Callback triggered when the "Back" button is clicked.
+ * @param {() => void} [props.onNext] - Callback triggered when the "Next" button is clicked.
+ */
+export const Pagination = ({
+  currentPage: controlledCurrentPage,
+  onCurrentPageChange,
+  numTotalItems,
+  onBack,
+  onNext,
+  itemsPerPageOptions,
+  itemsPerPage,
+  onItemsPerPageOptionChange,
+  ...rest
+}: PaginationProps) => {
+  const theme = useTheme();
+  const translate = useTranslate();
+  const [uncontrolledCurrentPage, setUncontrolledCurrentPage] =
+    useState<number>(1);
+  const maxPage = useMemo(
+    () => Math.ceil(numTotalItems / itemsPerPage),
+    [numTotalItems, itemsPerPage]
+  );
+
+  const currentPage = controlledCurrentPage ?? uncontrolledCurrentPage; // Use controlled or internal number state
+  const handleBack = () => {
+    setUncontrolledCurrentPage((prev) => Math.max(prev - 1, 1));
+    if (onBack && currentPage > 1) {
+      // Controlled mode: call the provided onBack
+      onBack();
+    }
+  };
+
+  const handleNext = () => {
+    setUncontrolledCurrentPage((prev) => Math.min(prev + 1, maxPage));
+    if (onNext && currentPage < maxPage) {
+      // Controlled mode: call the provided onNext
+      onNext();
+    }
+  };
+
+  const handleItemsPerPageOptionChange = (
+    newValue: SingleValue<SelectOption<number>>
+  ) => {
+    if (newValue) {
+      const newItemsPerPage = newValue.value;
+      onItemsPerPageOptionChange?.(newItemsPerPage);
+
+      const newMaxPage = Math.ceil(numTotalItems / newItemsPerPage);
+
+      // If this makes the current page out of range, set the current page to the last page
+      if (currentPage > newMaxPage) {
+        setUncontrolledCurrentPage(newMaxPage);
+        onCurrentPageChange?.(newMaxPage);
+      }
+    }
+  };
+
+  return (
+    <Flex align="center" justify="space-between" w="100%" {...rest}>
+      <Flex align="center" gap={2}>
+        {itemsPerPageOptions && (
+          <Flex align="center" gap={2}>
+            <Select
+              styles={{
+                control: (base, state) => ({
+                  ...base,
+                  fontSize: theme.fontSizes.sm,
+                  padding: 0,
+                  minHeight: '28px',
+                }),
+                dropdownIndicator: (base, props) => ({
+                  ...base,
+                  padding: `0 ${theme.space[1]}`,
+                }),
+              }}
+              options={itemsPerPageOptions.map((option) => ({
+                label: option.toString(),
+                value: option,
+              }))}
+              value={{
+                label: itemsPerPage.toString(),
+                value: itemsPerPage,
+              }}
+              onChange={handleItemsPerPageOptionChange}
+            />
+            <Subtext>{translate('pagination_items_per_page')}</Subtext>
+          </Flex>
+        )}
+      </Flex>
+      <Flex>
+        <Subtitle>
+          {translate('pagination_range_text', {
+            range_start: (currentPage - 1) * itemsPerPage + 1,
+            range_end: Math.min(numTotalItems, currentPage * itemsPerPage),
+            num_total_items: numTotalItems,
+          })}
+        </Subtitle>
+      </Flex>
+      <Flex align="center" gap={2}>
+        {maxPage > 1 && (
+          <>
+            <Subtitle>
+              {currentPage} / {maxPage}
+            </Subtitle>
+            <Flex align="center">
+              <IconButton
+                icon={<Icon icon="IoIosArrowBack" boxSize="sm" />}
+                aria-label={translate('previous') as string}
+                onClick={handleBack}
+                isDisabled={currentPage <= 1}
+                color={currentPage === 1 ? 'gray.400' : 'gray.1500'}
+              />
+              <IconButton
+                icon={<Icon icon="IoChevronForward" boxSize="sm" />}
+                aria-label={translate('go_next_page_button') as string}
+                onClick={handleNext}
+                isDisabled={currentPage >= maxPage}
+                color={currentPage === maxPage ? 'gray.400' : 'gray.1500'}
+              />
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </Flex>
+  );
+};

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,12 @@
+import { FlexProps } from '@chakra-ui/react';
+
+export interface PaginationProps extends FlexProps {
+  currentPage?: number;
+  onCurrentPageChange?: (page: number) => void;
+  onBack?: () => void;
+  onNext?: () => void;
+  numTotalItems: number;
+  itemsPerPageOptions?: Array<number>;
+  itemsPerPage: number;
+  onItemsPerPageOptionChange?: (option: number) => void;
+}

package/src/components/Pagination/index.tsx

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { PasswordInput } from './PasswordInput';
+
+export default {
+  title: 'Components/PasswordInput',
+  component: PasswordInput,
+} as Meta<typeof PasswordInput>;
+
+const Template: StoryFn<typeof PasswordInput> = (args) => (
+  <PasswordInput {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,42 @@
+import { ForwardedRef, forwardRef, useState } from 'react';
+
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Input } from '../Input';
+import { PasswordInputProps } from './PasswordInput.types';
+
+export const PasswordInput = forwardRef(
+  (
+    { wrapperProps, rightElementProps, ...rest }: PasswordInputProps,
+    ref?: ForwardedRef<HTMLInputElement>
+  ) => {
+    const [show, setShow] = useState<boolean>(false);
+    const handleClick = () => setShow(!show);
+
+    return (
+      <Input
+        ref={ref}
+        wrapperProps={{ ...wrapperProps }}
+        trimWhiteSpace
+        {...rest}
+        type={show ? 'text' : 'password'}
+        rightIcon={
+          <IconButton
+            icon={
+              <Icon
+                icon={show ? 'FaRegEye' : 'FaRegEyeSlash'}
+                fill="gray.900"
+                boxSize="sm"
+              />
+            }
+            onClick={handleClick}
+            aria-label="Toggle password visibility"
+          />
+        }
+        rightElementProps={{ ...rightElementProps }}
+      />
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';

package/src/components/PasswordInput/PasswordInput.types.ts

@@ -0,0 +1,11 @@
+import {
+  InputGroupProps,
+  InputProps as ChakraInputProps,
+  InputRightElementProps,
+} from '@chakra-ui/react';
+
+export interface PasswordInputProps
+  extends Omit<ChakraInputProps, 'rightIcon'> {
+  wrapperProps?: InputGroupProps;
+  rightElementProps?: InputRightElementProps;
+}

package/src/components/PasswordInput/index.ts

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/src/components/PinInput/PinInput.stories.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { PinInput, PinInputProps } from '.';
+
+const meta: Meta<typeof PinInput> = {
+  title: 'Components/PinInput',
+  component: PinInput,
+  args: {
+    length: 5,
+  },
+  argTypes: {
+    length: { control: 'number' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<PinInputProps> = (args: PinInputProps) => {
+  const [value, setValue] = useState('');
+
+  return <PinInput {...args} value={value} onChange={setValue} />;
+};
+
+export const Basic: StoryFn<PinInputProps> = Template.bind({});
+Basic.args = {};

package/src/components/PinInput/PinInput.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import ReactPinInput from 'react-pin-input';
+import { useTheme, useToken } from '@chakra-ui/react';
+
+import { PinInputProps } from './PinInput.types';
+
+// TODO: forwardRef
+export const PinInput = ({
+  value,
+  onChange,
+  inputStyle,
+  autoFocus = true,
+  isNumberOnly = true,
+  ...rest
+}: PinInputProps) => {
+  const pinInputRef = useRef<ReactPinInput>(null);
+  const theme = useTheme();
+
+  useEffect(() => {
+    // Automatically focus the PinInput component on mount
+    if (autoFocus) pinInputRef.current?.focus();
+  }, []);
+
+  return (
+    <ReactPinInput
+      ref={pinInputRef} // Attach the ref to the PinInput component
+      initialValue={value}
+      onChange={onChange}
+      type={isNumberOnly ? 'numeric' : 'custom'}
+      inputMode={isNumberOnly ? 'number' : 'text'}
+      inputStyle={{
+        borderColor: theme.colors.gray[200],
+        borderRadius: theme.radii.md,
+        width: theme.sizes[12],
+        height: theme.sizes[12],
+        ...inputStyle,
+      }}
+      inputFocusStyle={{
+        borderColor: useToken(
+          'colors',
+          theme.semanticTokens.colors.primary.main
+        ),
+        boxShadow: `0 0 0 1px ${useToken('colors', theme.semanticTokens.colors.primary.main)}`,
+      }}
+      onComplete={onChange}
+      autoSelect
+      regexCriteria={isNumberOnly ? /^[0-9]*$/ : undefined}
+      {...rest}
+    />
+  );
+};
+
+PinInput.displayName = 'PinInput';

package/src/components/PinInput/PinInput.types.ts

@@ -0,0 +1,27 @@
+// TODO: This interface is copied from the react-pin-input package. Find a more scalable way to import this interface if it gets updated
+interface ReactPinInputProps {
+  length: number;
+  initialValue?: number | string;
+  type?: 'numeric' | 'custom';
+  inputMode?: string;
+  secret?: boolean;
+  secretDelay?: number;
+  disabled?: boolean;
+  focus?: boolean;
+  onChange?: (value: string, index: number) => void;
+  onComplete?: (value: string, index: number) => void;
+  style?: React.CSSProperties;
+  inputStyle?: React.CSSProperties;
+  inputFocusStyle?: React.CSSProperties;
+  validate?: (value: string) => string;
+  autoSelect?: boolean;
+  regexCriteria?: any;
+  ariaLabel?: string;
+  placeholder?: string;
+}
+
+export type PinInputProps = ReactPinInputProps & {
+  value?: string;
+  autoFocus?: boolean;
+  isNumberOnly?: boolean;
+};

package/src/components/PinInput/index.tsx

@@ -0,0 +1,2 @@
+export { PinInput } from './PinInput';
+export { type PinInputProps } from './PinInput.types';

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { ProgressBar } from '.';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  args: {},
+  argTypes: {
+    value: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof ProgressBar>;
+
+export const Basic: Story = (args) => <ProgressBar {...args} />;

package/src/components/ProgressBar/ProgressBar.styles.ts

@@ -0,0 +1,4 @@
+export const baseStyles = {
+  borderRadius: 'full',
+  height: 4, // Use direct spacing value instead of theme.spacing[4]
+};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,27 @@
+import { Progress as ChakraProgress } from '@chakra-ui/react';
+
+import { baseStyles } from './ProgressBar.styles';
+import { ProgressBarProps } from './ProgressBar.types';
+
+export const ProgressBar = ({
+  filledTrackColor,
+  value,
+  ...rest
+}: ProgressBarProps) => {
+  return (
+    <ChakraProgress
+      sx={{
+        '& > div': {
+          backgroundColor: filledTrackColor ?? 'primary.main', // filledTrack
+          transition: 'width 0.3s ease-in-out',
+        },
+        bg: 'gray.200',
+      }}
+      value={value}
+      {...baseStyles}
+      {...rest}
+    />
+  );
+};
+
+ProgressBar.displayName = 'ProgressBar';

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -0,0 +1,4 @@
+import { ProgressProps as ChakraProgressProps } from '@chakra-ui/react';
+export interface ProgressBarProps extends ChakraProgressProps {
+  filledTrackColor?: string;
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';