@delightui/components 0.1.104 → 0.1.106

package/README.md

@@ -1,3 +1,106 @@
 # @delightui/components
 
-React components for delight ui
+A comprehensive React component library built with TypeScript, providing a complete set of UI components following atomic design principles. This library offers flexible, accessible, and highly customizable components for building modern web applications.
+
+## Features
+
+- **Atomic Design Architecture**: Components organized into Atoms, Molecules, and Organisms
+- **TypeScript Support**: Full TypeScript support with comprehensive type definitions
+- **Accessible**: Built with accessibility in mind following WCAG guidelines
+- **Customizable**: Flexible theming system with SCSS modules
+- **Modern React**: Built with React 18+ and modern hooks
+- **Storybook Integration**: Interactive component documentation and testing
+- **Testing**: Comprehensive test coverage with Vitest and Testing Library
+
+## Installation
+
+```bash
+npm install @delightui/components
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Modal } from '@delightui/components';
+
+function App() {
+  return (
+    <Card>
+      <Button variant="primary">Click me</Button>
+    </Card>
+  );
+}
+```
+
+## Tools & Libraries
+
+### Core Dependencies
+- **React 18.3+** - Modern React with concurrent features
+- **TypeScript** - Type-safe development
+- **SCSS/Sass** - Styling with CSS modules
+- **classnames** - Conditional CSS class management
+
+### UI & Interaction
+- **@dnd-kit** - Drag and drop functionality
+- **react-overlays** - Positioning and overlay management
+- **react-dropzone** - File upload handling
+- **flatpickr** - Date/time picker component
+- **react-router-dom** - Navigation and routing
+
+### Development Tools
+- **Vite** - Fast build tool and development server
+- **Storybook** - Component development and documentation
+- **Vitest** - Unit testing framework
+- **Testing Library** - React component testing utilities
+- **ESLint** - Code linting with Airbnb TypeScript config
+- **Rollup** - Library bundling and packaging
+
+### Build & Deployment
+- **Rollup** - Production build bundling
+- **PostCSS** - CSS processing and optimization
+- **Bitbucket Pipelines** - CI/CD automation
+
+## Component Library
+
+[component list](./docs/README.md)
+
+## Development
+
+### Setup
+```bash
+npm install
+npm start
+```
+
+### Available Scripts
+- `npm start` - Start development server
+- `npm run build` - Build for production
+- `npm test` - Run tests
+- `npm run test:ui` - Run tests with UI
+- `npm run storybook` - Start Storybook development server
+- `npm run build-storybook` - Build Storybook for production
+- `npm run lint` - Run ESLint
+- `npm run lint:fix` - Fix ESLint issues
+
+### Testing
+```bash
+npm test
+```
+
+### Storybook
+```bash
+npm run storybook
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests for new components
+5. Update documentation
+6. Submit a pull request
+
+## License
+
+This project is licensed under the MIT License.

package/dist/cjs/components/molecules/Modal/DemoModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModalComponentProps } from './ModalContext';
+interface DemoModalProps extends ModalComponentProps {
+    title?: string;
+    message?: string;
+}
+declare const DemoModal: React.FC<DemoModalProps>;
+export default DemoModal;

package/dist/cjs/components/molecules/Modal/ModalContext/ModalContext.d.ts

@@ -0,0 +1,41 @@
+import type { ModalContextType, ModalProviderProps } from './ModalContext.types';
+/**
+ * Hook to access the modal context.
+ * Must be used within a ModalProvider component.
+ *
+ * @returns The modal context containing openModal and closeModal functions
+ * @throws Error if used outside of a ModalProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { openModal, closeModal } = useModalContext();
+ *
+ *   const handleOpenModal = () => {
+ *     openModal('my-modal', MyModalComponent, { title: 'Hello' });
+ *   };
+ *
+ *   return <button onClick={handleOpenModal}>Open Modal</button>;
+ * }
+ * ```
+ */
+export declare const useModalContext: () => ModalContextType;
+/**
+ * Provider component that manages modal state and renders modal instances.
+ * Wraps child components with modal context and renders all active modals.
+ *
+ * @param props - The provider props
+ * @param props.children - Child components that will have access to modal context
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <ModalProvider>
+ *       <MyApplication />
+ *     </ModalProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const ModalProvider: ({ children }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/molecules/Modal/ModalContext/ModalContext.types.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode, ComponentType } from 'react';
+/**
+ * Base props that all modal components must implement.
+ */
+export type ModalComponentProps = {
+    /** Controls whether the modal is visible */
+    show?: boolean;
+    /** Callback function to handle modal cancellation/dismissal */
+    onCancel?: () => void;
+};
+/**
+ * Represents a modal instance stored in the modal context state.
+ */
+export type ModalInstance = {
+    /** Unique identifier for the modal instance */
+    id: string;
+    /** The rendered React component for the modal */
+    component: ReactNode;
+};
+/**
+ * The context type that provides modal management functionality.
+ */
+export type ModalContextType = {
+    /**
+     * Opens a new modal with the specified component and props.
+     *
+     * @template T - The props type for the modal component (must extend ModalComponentProps)
+     * @param id - Unique identifier for the modal instance
+     * @param Component - React component to render as the modal
+     * @param props - Props to pass to the modal component
+     * @returns void
+     *
+     * @example
+     * ```tsx
+     * const { openModal } = useModalContext();
+     *
+     * openModal('confirmation', ConfirmationModal, {
+     *   title: 'Are you sure?',
+     *   show: true,
+     *   onCancel: () => console.log('cancelled'),
+     *   onConfirm: () => console.log('confirmed')
+     * });
+     * ```
+     */
+    openModal: <T extends ModalComponentProps>(id: string, Component: ComponentType<T>, props: T) => void;
+    /**
+     * Closes and removes a modal by its unique identifier.
+     *
+     * @param id - The unique identifier of the modal to close
+     * @returns void
+     *
+     * @example
+     * ```tsx
+     * const { closeModal } = useModalContext();
+     * closeModal('confirmation');
+     * ```
+     */
+    closeModal: (id: string) => void;
+};
+/**
+ * Props for the ModalProvider component.
+ */
+export type ModalProviderProps = {
+    /** Child components that will have access to the modal context */
+    children: ReactNode;
+};
+/**
+ * Return type for the useModal hook when a component type is provided.
+ */
+export type UseModalReturn<T extends ModalComponentProps> = {
+    /**
+     * Opens the modal with the specified props.
+     * Uses the component type provided to the hook.
+     *
+     * @param props - Props to pass to the modal component
+     * @returns void
+     */
+    openModal: (props: T) => void;
+    /**
+     * Closes the modal instance managed by this hook.
+     *
+     * @returns void
+     */
+    closeModal: () => void;
+    /** The unique identifier for this modal instance */
+    modalId: string;
+};

package/dist/cjs/components/molecules/Modal/ModalContext/index.d.ts

@@ -0,0 +1,3 @@
+export { ModalProvider } from './ModalContext';
+export { useModal } from './useModal';
+export type { ModalProviderProps, ModalComponentProps, UseModalReturn } from './ModalContext.types';

package/dist/cjs/components/molecules/Modal/ModalContext/useModal.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentType } from 'react';
+import type { ModalComponentProps, UseModalReturn } from './ModalContext.types';
+/**
+ * Custom hook that provides an abstraction layer over the modal context.
+ * Takes a component type and returns functions to open/close that specific modal.
+ * Uses React's useId hook to generate a unique identifier for the modal instance.
+ *
+ * @template T - The props type for the modal component (must extend ModalComponentProps)
+ * @param Component - React component to use for the modal
+ * @returns An object containing openModal, closeModal functions and the modalId
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const confirmationModal = useModal(ConfirmationModal);
+ *
+ *   const handleDelete = () => {
+ *     confirmationModal.openModal({
+ *       title: 'Delete Item',
+ *       message: 'Are you sure you want to delete this item?',
+ *       show: true,
+ *       onConfirm: () => {
+ *         // perform delete
+ *         confirmationModal.closeModal();
+ *       },
+ *       onCancel: confirmationModal.closeModal
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleDelete}>Delete</button>;
+ * }
+ * ```
+ */
+export declare const useModal: <T extends ModalComponentProps>(Component: ComponentType<T>) => UseModalReturn<T>;

package/dist/cjs/components/molecules/Modal/index.d.ts

@@ -2,3 +2,5 @@ import Modal from './Modal';
 import type { ModalProps } from './Modal.types';
 export type { ModalProps };
 export default Modal;
+export { ModalProvider, useModal } from './ModalContext';
+export type { ModalProviderProps, ModalComponentProps, UseModalReturn } from './ModalContext';

package/dist/cjs/components/molecules/Popover/Popover.presenter.d.ts

@@ -0,0 +1,26 @@
+import { PopoverProps } from './Popover.types';
+declare const usePresenter: (props: PopoverProps) => {
+    show: boolean;
+    offset: import("react-overlays/esm/usePopper").Offset | undefined;
+    placement: import("@popperjs/core").Placement;
+    handleOnHide: () => void;
+    openPopover: () => void;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    targetRef: import("react").RefObject<HTMLDivElement>;
+    initialTransformRef: import("react").MutableRefObject<string | undefined>;
+    action: import("./Popover.types").ActionType;
+    hideOnClickAway: boolean;
+    defaultShow: boolean;
+    keepContentOnItemClick: boolean;
+    contentPosition: "fixed" | "absolute";
+    onClickListener: (() => false | void) | undefined;
+    onDoubleClickListener: (() => false | void) | undefined;
+    onMouseOutListener: (() => void) | undefined;
+    onMouseOverListener: (() => void) | undefined;
+    targetOnClickListener: () => false | void;
+    targetOnDoubleClickListener: () => false | void;
+    popoverAccessibilityProps: import("../../utils/accessibilityUtils").AccessibilityProps;
+    targetAccessibilityProps: import("../../utils/accessibilityUtils").AccessibilityProps;
+    otherProps: {};
+};
+export default usePresenter;

package/dist/cjs/components/molecules/Select/Option/Option.types.d.ts

@@ -29,4 +29,10 @@ export type OptionProps = LiHTMLAttributes<HTMLLIElement> & {
      * Children elements or text content of the option.
      */
     children?: ReactNode;
+    /**
+     * Indicates if the option is selected.
+     * For internal use, not to be set by the user.
+     * @default false
+     */
+    closeSelectOptions?: () => void;
 };

package/dist/cjs/components/molecules/Select/Select.Context.d.ts

@@ -14,4 +14,4 @@ export declare const useSelectContext: () => SelectContextType;
  * @param props - Props for configuring the SelectProvider.
  * @returns JSX element that provides context to its children.
  */
-export declare const SelectProvider: ({ children, value, multiple, disabled, invalid, onValueChange, }: SelectProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectProvider: ({ children, value, multiple, disabled, invalid, onValueChange, closeSelectOptions, }: SelectProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/molecules/Select/Select.d.ts

@@ -1,10 +1,10 @@
-import type { SelectViewProps } from './Select.types';
+import type { SelectProps } from './Select.types';
 /**
- * Select component for displaying a dropdown with options.
- * Uses Popover for the dropdown functionality.
+ * Select component that wraps SelectComponent with SelectProvider.
+ * Provides state management and context to SelectComponent.
  *
  * @param props - Props for configuring the Select component.
- * @returns Element representing the select.
+ * @returns JSX element that renders the SelectComponent wrapped with SelectProvider.
  */
-declare const Select: (props: SelectViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: (props: SelectProps) => JSX.Element;
 export default Select;

package/dist/cjs/components/molecules/Select/Select.presenter.d.ts

@@ -23,6 +23,7 @@ declare const usePresenter: (props: SelectProps) => {
         invalid?: boolean;
         onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
         initialValue?: import("../..").FieldValue | undefined;
+        closeSelectOptions?: () => void;
         role?: import("react").AriaRole | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLElement> | undefined;

package/dist/cjs/components/molecules/Select/Select.types.d.ts

@@ -47,6 +47,11 @@ export type SelectProviderProps = ControlledFormComponentProps<FieldValue> & {
      * @default false
      */
     hasDefaultOption?: boolean;
+    /**
+     * Function to close the select options menu.
+     * @param value - The new selected value.
+     */
+    closeSelectOptions?: () => void;
 };
 /**
  * Enum representing different states of the Select component.

package/dist/cjs/components/molecules/Select/index.d.ts

@@ -1,15 +1,8 @@
+import Select from './Select';
 import { SelectProvider, useSelectContext } from './Select.Context';
 import type { SelectProps } from './Select.types';
 export type { SelectProps };
+export * from './Option';
 export { default as Option } from './Option';
 export { SelectProvider, useSelectContext };
-export * from './Option';
-/**
- * Select component that wraps SelectComponent with SelectProvider.
- * Provides state management and context to SelectComponent.
- *
- * @param props - Props for configuring the Select component.
- * @returns JSX element that renders the SelectComponent wrapped with SelectProvider.
- */
-declare const Select: (props: SelectProps) => JSX.Element;
 export default Select;

package/dist/cjs/components/molecules/index.d.ts

@@ -17,6 +17,7 @@ export { default as Pagination } from './Pagination';
 export { default as PaginationNumberField } from './PaginationNumberField';
 export { default as Popover } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
+export { default as RadioGroup } from './RadioGroup';
 export { Option, default as Select } from './Select';
 export { default as ChipInput } from './ChipInput';
 export * from './Accordion';
@@ -38,5 +39,6 @@ export * from './Pagination';
 export * from './PaginationNumberField';
 export * from './Popover';
 export * from './ProgressBar';
+export * from './RadioGroup';
 export * from './Select';
 export * from './ChipInput';

package/dist/cjs/components/utils/accessibilityUtils.d.ts

@@ -0,0 +1,41 @@
+import type { AriaRole, KeyboardEventHandler, SyntheticEvent } from 'react';
+export type ArrowDirectionEnum = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight';
+export type AccessibilityActions = {
+    onClick?: (event?: SyntheticEvent) => void;
+    onTab?: (forward: boolean) => void;
+    onEsc?: () => void;
+    onArrowNavigation?: (direction: ArrowDirectionEnum) => void;
+};
+export type AccessibilityProps = {
+    tabIndex?: number;
+    role?: AriaRole;
+    onKeyDown?: KeyboardEventHandler<unknown>;
+};
+/** Executes the provided function with setTimeout with 0 delay */
+export declare const runInNextCycle: (func: (() => void)) => void;
+/**
+ * Generates accessibility properties for clickable elements.
+ * @param {boolean} [addIndex] -
+ * @param {AriaRole} [role='button'] - ARIA role attribute to be assigned to the element.
+ * @returns {AccessibilityProps}
+ */
+export declare const getClickAccessibilityProps: (params: {
+    /** Object containing action handlers for various key events. */
+    actions: AccessibilityActions;
+    /** If true, sets the tabIndex to 0 to make the element focusable. */
+    addIndex?: boolean;
+    /** Accessibility properties including ARIA role and key event handlers. */
+    role?: AriaRole;
+}) => AccessibilityProps;
+/**
+ * Handles arrow key navigation for category elements.
+ *
+ * This function allows users to navigate through keys.
+ * It focuses on the next or previous element and optionally triggers a callback.
+ *
+ * @param {boolean} forward - Whether to move forward (true) or backward (false) in the tab order.
+ * @param {number} index - The current index of the focused element.
+ * @param {HTMLAnchorElement[]} arrayOfRefs - Array of element references to navigate through.
+ * @param {(nextIndex: number) => void} [selectFunction] - Optional callback to handle selection.
+ */
+export declare const handleKeyboardNavigation: (forward: boolean, index: number, arrayOfRefs: HTMLAnchorElement[] | HTMLButtonElement[] | HTMLElement[], selectFunction?: (nextIndex: number) => void, shouldFocusNextElement?: boolean) => void;

package/dist/cjs/components/utils/index.d.ts

@@ -1,6 +1,8 @@
 export { ConditionalView } from './ConditionalView';
 export { WrapTextNodes } from './WrapTextNodes';
 export { RenderStateView } from './RenderStateView';
+export type { AccessibilityActions, AccessibilityProps } from './accessibilityUtils';
+export { getClickAccessibilityProps } from './accessibilityUtils';
 export * from './ConditionalView';
 export * from './WrapTextNodes';
 export * from './RenderStateView';

package/dist/cjs/library.css

@@ -3555,6 +3555,19 @@ span.flatpickr-weekday {
 .ProgressBar-module_progressBar__FcALd.ProgressBar-module_Horizontal__K0u1- {
   flex-direction: row;
 }
+.RadioGroup-module_radioGroup__zODB0 {
+  display: flex;
+  gap: 4px;
+  gap: var(--radio-group-gap, 4px);
+}
+.RadioGroup-module_radioGroup__zODB0.RadioGroup-module_vertical__Y3hNS {
+  flex-direction: column;
+}
+.RadioGroup-module_radioGroup__zODB0.RadioGroup-module_horizontal__gypXB {
+  flex-direction: row;
+  width: 100%;
+  width: var(--radio-group-width, 100%);
+}
 .Option-module_option__EOKym {
   display: flex;
   width: 100%;