mui-drawer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Virtual Internships
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# mui-drawer
+
+A reusable drawer component for React applications built with Material-UI (MUI).
+
+## Installation
+
+```bash
+# Using npm
+npm install mui-drawer
+
+# Using yarn
+yarn add mui-drawer
+```
+
+## Features
+
+- Built with Material-UI (MUI) components
+- TypeScript support
+- Multiple drawer types:
+  - Information
+  - Input
+- Customizable widths and layouts
+- Support for primary, secondary, and tertiary actions
+- Responsive design
+- Theme customization
+- Sticky header and footer
+
+## Usage
+
+```tsx
+import { MuiDrawer } from "mui-drawer";
+import { DRAWER_TYPES, INFORMATION_SUBTYPES } from "mui-drawer";
+
+// Basic Information Drawer
+const MyComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MuiDrawer
+      type={DRAWER_TYPES.INFORMATION}
+      subtype={INFORMATION_SUBTYPES.PASSIVE}
+      open={open}
+      onClose={() => setOpen(false)}
+      title="Drawer Title"
+      description="This is a drawer description"
+      actions={{
+        primaryCtaTitle: "Confirm",
+        onPrimaryCtaClick: () => {
+          // Handle primary action
+          setOpen(false);
+        },
+      }}
+    >
+      {/* Optional content */}
+    </MuiDrawer>
+  );
+};
+```
+
+## Drawer Types
+
+| Type          | Description                         | Subtypes                 | Dismissibility    |
+| ------------- | ----------------------------------- | ------------------------ | ----------------- |
+| `information` | For displaying information to users | `progress`, `passive`    | Varies by subtype |
+| `input`       | For collecting user input           | `default`, `destructive` | `partial`         |
+
+### Subtype Details
+
+#### Information Drawer Subtypes
+
+| Subtype    | Description                            | Dismissibility |
+| ---------- | -------------------------------------- | -------------- |
+| `progress` | For showing progress or status updates | `partial`      |
+| `passive`  | For passive information display        | `full`         |
+
+#### Input Drawer Subtypes
+
+| Subtype       | Description                   | Dismissibility |
+| ------------- | ----------------------------- | -------------- |
+| `default`     | Standard input                | `partial`      |
+| `destructive` | For destructive input actions | `partial`      |
+
+## Props Reference
+
+### Base Props
+
+| Prop                   | Type                        | Required | Default | Description                     |
+| ---------------------- | --------------------------- | -------- | ------- | ------------------------------- |
+| `type`                 | `"information" \| "input"`  | Yes      | -       | Type of the drawer              |
+| `subtype`              | `string`                    | Yes      | -       | Subtype of the drawer           |
+| `open`                 | `boolean`                   | Yes      | -       | Controls drawer visibility      |
+| `onClose`              | `() => void`                | Yes      | -       | Callback when drawer is closed  |
+| `title`                | `string`                    | No       | -       | Drawer title                    |
+| `subTitle`             | `string \| React.ReactNode` | No       | -       | Drawer subtitle                 |
+| `description`          | `string`                    | No       | -       | Drawer description              |
+| `children`             | `React.ReactNode`           | Yes      | -       | Drawer content                  |
+| `wrapperClassName`     | `string`                    | No       | -       | Custom class for drawer wrapper |
+| `bodyWrapperClassName` | `string`                    | No       | -       | Custom class for body wrapper   |
+| `showCloseIcon`        | `boolean`                   | No       | `true`  | Show/hide close icon            |
+| `showDivider`          | `boolean`                   | No       | `true`  | Show/hide divider               |
+| `showActions`          | `boolean`                   | No       | `true`  | Show/hide action buttons        |
+| `width`                | `string`                    | No       | -       | Custom width of the drawer      |
+| `maxWidth`             | `string`                    | No       | -       | Maximum width of the drawer     |
+
+### Action Props
+
+| Prop                      | Type              | Required | Default                                         | Description                             |
+| ------------------------- | ----------------- | -------- | ----------------------------------------------- | --------------------------------------- |
+| `primaryCtaTitle`         | `string`          | No       | -                                               | Primary button text                     |
+| `secondaryCtaTitle`       | `string`          | No       | -                                               | Secondary button text                   |
+| `tertiaryCtaTitle`        | `string`          | No       | -                                               | Tertiary button text                    |
+| `primaryCtaTooltipText`   | `string`          | No       | -                                               | Tooltip text for primary button         |
+| `secondaryCtaTooltipText` | `string`          | No       | -                                               | Tooltip text for secondary button       |
+| `tertiaryCtaTooltipText`  | `string`          | No       | -                                               | Tooltip text for tertiary button        |
+| `isPrimaryCtaLoading`     | `boolean`         | No       | `false`                                         | Show loading state for primary button   |
+| `isSecondaryCtaLoading`   | `boolean`         | No       | `false`                                         | Show loading state for secondary button |
+| `isTertiaryCtaLoading`    | `boolean`         | No       | `false`                                         | Show loading state for tertiary button  |
+| `isPrimaryCtaDisabled`    | `boolean`         | No       | `isSecondaryCtaLoading or isTertiaryCtaLoading` | Disable primary button                  |
+| `isSecondaryCtaDisabled`  | `boolean`         | No       | `isPrimaryCtaLoading or isTertiaryCtaLoading`   | Disable secondary button                |
+| `isTertiaryCtaDisabled`   | `boolean`         | No       | `isPrimaryCtaLoading or isSecondaryCtaLoading`  | Disable tertiary button                 |
+| `onPrimaryCtaClick`       | `() => void`      | No       | -                                               | Primary button click handler            |
+| `onSecondaryCtaClick`     | `() => void`      | No       | -                                               | Secondary button click handler          |
+| `onTertiaryCtaClick`      | `() => void`      | No       | -                                               | Tertiary button click handler           |
+| `tertiaryCtaStartIcon`    | `React.ReactNode` | No       | -                                               | Icon for tertiary button                |
+
+## Responsive Design

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+import { DrawerProps as DrawerProps_2 } from '@mui/material';
+import { JSX } from 'react/jsx-runtime';
+
+export declare interface BaseDrawerProps extends DrawerProps_2 {
+    wrapperClassName?: string;
+    bodyWrapperClassName?: string;
+    onClose: () => void;
+    open: boolean;
+    showCloseIcon?: boolean;
+    title?: string;
+    subTitle?: string | React.ReactNode;
+    description?: string;
+    children: React.ReactNode;
+    actions?: IActions;
+    showActions?: boolean;
+    showDivider?: boolean;
+    width?: string;
+    maxWidth?: string;
+}
+
+export declare const DRAWER_CONFIGS: Record<DrawerType, DrawerTypeConfig>;
+
+export declare const DRAWER_TYPES: {
+    readonly INFORMATION: "information";
+    readonly INPUT: "input";
+};
+
+declare type DrawerConfig = {
+    DISMISSIBLE: 'full' | 'partial';
+};
+
+declare type DrawerProps = InformationDrawerProps | InputDrawerProps;
+
+export declare type DrawerType = (typeof DRAWER_TYPES)[keyof typeof DRAWER_TYPES];
+
+declare type DrawerTypeConfig = {
+    [subtype: string]: DrawerConfig;
+};
+
+declare interface IActions {
+    primaryCtaTitle?: string;
+    secondaryCtaTitle?: string;
+    tertiaryCtaTitle?: string;
+    primaryCtaTooltipText?: string;
+    secondaryCtaTooltipText?: string;
+    tertiaryCtaTooltipText?: string;
+    isPrimaryCtaLoading?: boolean;
+    isPrimaryCtaDisabled?: boolean;
+    isSecondaryCtaLoading?: boolean;
+    isSecondaryCtaDisabled?: boolean;
+    onPrimaryCtaClick?: () => void;
+    onSecondaryCtaClick?: () => void;
+    tertiaryCtaStartIcon?: React.ReactNode;
+    isTertiaryCtaLoading?: boolean;
+    isTertiaryCtaDisabled?: boolean;
+    onTertiaryCtaClick?: () => void;
+}
+
+export declare const INFORMATION_SUBTYPES: {
+    readonly PROGRESS: "progress";
+    readonly PASSIVE: "passive";
+};
+
+export declare interface InformationDrawerProps extends BaseDrawerProps {
+    type: typeof DRAWER_TYPES.INFORMATION;
+    subtype: (typeof INFORMATION_SUBTYPES)[keyof typeof INFORMATION_SUBTYPES];
+    tertiaryCtaType?: (typeof TERTIARY_CTA_TYPES)[keyof typeof TERTIARY_CTA_TYPES];
+}
+
+export declare type InformationSubtype = (typeof INFORMATION_SUBTYPES)[keyof typeof INFORMATION_SUBTYPES];
+
+export declare const INPUT_SUBTYPES: {
+    readonly DEFAULT: "default";
+    readonly DESTRUCTIVE: "destructive";
+};
+
+export declare interface InputDrawerProps extends BaseDrawerProps {
+    type: typeof DRAWER_TYPES.INPUT;
+    subtype: (typeof INPUT_SUBTYPES)[keyof typeof INPUT_SUBTYPES];
+    tertiaryCtaType?: (typeof TERTIARY_CTA_TYPES)[keyof typeof TERTIARY_CTA_TYPES];
+}
+
+export declare type InputSubtype = (typeof INPUT_SUBTYPES)[keyof typeof INPUT_SUBTYPES];
+
+export declare const MuiDrawer: (props: DrawerProps) => JSX.Element;
+
+export declare type SubtypeForType<T extends DrawerType> = T extends typeof DRAWER_TYPES.INFORMATION ? InformationSubtype : T extends typeof DRAWER_TYPES.INPUT ? InputSubtype : never;
+
+export declare const TERTIARY_CTA_TYPES: {
+    DEFAULT: string;
+    DESTRUCTIVE: string;
+};
+
+export { }