@delightui/components 0.1.105 → 0.1.107

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/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/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%;
@@ -4601,20 +4614,20 @@ span.flatpickr-weekday {
     }
 [data-theme='dark'] [component-variant="text-bodysmall-regular"], [data-theme='light'] [component-variant="text-bodysmall-regular"] {
         --text-font-family: var(--font-family-body);
-        --text-font-size: 13px;
-        --text-font-weight: 400;
-        --text-line-height: 16px
+        --text-font-size: var(--font-size-body-small);
+        --text-font-weight: var(--font-weight-regular);
+        --text-line-height: var(--line-height-body-small)
     }
 [data-theme='dark'] [component-variant="text-bodymedium-regular"], [data-theme='light'] [component-variant="text-bodymedium-regular"] {
         --text-font-family: var(--font-family-body);
         --text-font-size: var(--font-size-body-medium);
-        --text-font-weight: 400;
-        --text-line-height: var(--font-size-body-medium)
+        --text-font-weight: var(--font-weight-regular);
+        --text-line-height: var(--line-height-body-medium)
     }
 [data-theme='dark'] [component-variant="text-bodylarge-regular"], [data-theme='light'] [component-variant="text-bodylarge-regular"] {
         --text-font-family: var(--font-family-body);
         --text-font-size: var(--font-size-body-large);
-        --text-font-weight: 400;
+        --text-font-weight: var(--font-weight-regular);
         --text-line-height: var(--line-height-body-large)
     }
 [data-theme='dark'] [component-variant="text-bodysmall-medium"], [data-theme='light'] [component-variant="text-bodysmall-medium"] {