@powerhousedao/document-engineering 1.38.0 → 1.40.0

package/dist/src/ui/components/data-entry/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/date-picker/date-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/date-picker/date-picker.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './date-picker.js';
+/**
+ * The `DatePicker` component provides an input field for selecting dates.
+ * It supports multiple configuration properties like:
+ * - label
+ * - description
+ * - minDate
+ * - maxDate
+ * - dateFormat
+ * - weekStart
+ * - autoClose
+ *
+ * Features include:
+ * - Customizable date format
+ * - Min/Max date restrictions
+ * - Past/Future date restrictions
+ * - Configurable week start day
+ * - Auto-close functionality
+ * - Custom placeholder support
+ *
+ * ## Calendar Customization
+ * The calendar can be customized using the `className` prop which accepts a string of Tailwind classes.
+ * Each class should follow the format `[&_.date-picker\\_\\_{element}]:{tailwind-classes}`.
+ *
+ * Base classes available for customization:
+ * - .base-picker__input: Input field container
+ * - .base-picker__popover: Popover container
+ * - .date-picker__calendar: Calendar container
+ * - .date-picker__button-next: Next month button
+ * - .date-picker__button-previous: Previous month button
+ * - .date-picker__selected: Selected dates
+ * - .date-picker__today: Today's date
+ * - .date-picker__weekday: Weekday headers
+ * - .date-picker__day-button: Day buttons
+ * - .date-picker__day: Day cells
+ * - .date-picker__outside: Days outside current month
+ * - .date-picker__month-caption: Month/year caption
+ * - .date-picker__months: Months container
+ * - .date-picker__month: Month container
+ * - .date-picker__week: Week container
+ * - .date-picker__range-start: Range start date
+ * - .date-picker__range-end: Range end date
+ * - .date-picker__range-middle: Dates in range
+ * - .date-picker__nav: Navigation container
+ * - .date-picker__month-grid: Month grid
+ * - .date-picker__caption: Caption container
+ * - .date-picker__caption-label: Caption label
+ * - .date-picker__weekdays: Weekdays container
+ * - .date-picker__hidden: Hidden elements
+ * - .date-picker__year-grid--view: Year grid view
+ * - .date-picker__month-grid--view: Month grid view
+ * - .date-picker__date-footer: This is class for button footer in month and year view
+
+**
+ * # Example Usage
+ *
+ * When using Tailwind CSS with custom class names, we need to use `String.raw` because Tailwind
+ * interprets underscores (`_`) as class separators. Without `String.raw`, the escape characters don't work
+ * properly and you would need to use four backslashes (`\\\\`) to make it work. Using `String.raw` ensures
+ * that the class names with underscores are properly escaped and interpreted by Tailwind.
+ *
+ * Here's an example of how to use the DatePicker component with custom class for styling:
+ *
+ * ```tsx
+ * import { DatePicker } from './date-picker'
+ *
+ * function MyCustomDatePicker() {
+ *   return (
+ *     <DatePicker
+ *       name="custom-date"
+ *       label="Select Date"
+ *       placeholder="YYYY/MM/DD"
+ *       className={String.raw`
+ *         [&_.date-picker\\_\\_button-next]:bg-blue-500
+ *         [&_.date-picker\\_\\_button-next]:text-white
+ *         [&_.date-picker\\_\\_button-next]:rounded-full
+ *         [&_.date-picker\\_\\_selected]:!bg-blue-500
+ *         [&_.date-picker\\_\\_selected]:!text-white
+ *         [&_.date-picker\\_\\_today]:border-2
+ *         [&_.date-picker\\_\\_today]:border-blue-500
+ *         [&_.date-picker\\_\\_weekday]:text-blue-500
+ *         [&_.date-picker\\_\\_day-button]:hover:bg-blue-100
+ *       `}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [Date Picker Field](?path=/docs/scalars-date-picker-field--readme)
+ * > component.
+ */
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Filled: Story;
+export declare const WithCustomizedCalendar: Story;
+export declare const WithDifferencesAddition: Story;
+export declare const WithDifferencesRemoval: Story;
+export declare const WithDifferencesMixed: Story;
+//# sourceMappingURL=date-picker.stories.d.ts.map

package/dist/src/ui/components/data-entry/date-picker/date-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/date-picker/date-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAQtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA8HjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAyFpC,CAAA;AACD,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAA;AACD,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA"}

package/dist/src/ui/components/data-entry/date-picker/date-picker.stories.js

@@ -0,0 +1,360 @@
+import { withTimestampsAsISOStrings } from '../../../../scalars/index.js';
+import { getDefaultArgTypes, getValidationArgTypes, StorybookControlCategory, } from '../../../../scalars/lib/storybook-arg-types.js';
+import { FORMAT_MAPPING } from '../date-time-picker/utils.js';
+import { DatePicker } from './date-picker.js';
+/**
+ * The `DatePicker` component provides an input field for selecting dates.
+ * It supports multiple configuration properties like:
+ * - label
+ * - description
+ * - minDate
+ * - maxDate
+ * - dateFormat
+ * - weekStart
+ * - autoClose
+ *
+ * Features include:
+ * - Customizable date format
+ * - Min/Max date restrictions
+ * - Past/Future date restrictions
+ * - Configurable week start day
+ * - Auto-close functionality
+ * - Custom placeholder support
+ *
+ * ## Calendar Customization
+ * The calendar can be customized using the `className` prop which accepts a string of Tailwind classes.
+ * Each class should follow the format `[&_.date-picker\\_\\_{element}]:{tailwind-classes}`.
+ *
+ * Base classes available for customization:
+ * - .base-picker__input: Input field container
+ * - .base-picker__popover: Popover container
+ * - .date-picker__calendar: Calendar container
+ * - .date-picker__button-next: Next month button
+ * - .date-picker__button-previous: Previous month button
+ * - .date-picker__selected: Selected dates
+ * - .date-picker__today: Today's date
+ * - .date-picker__weekday: Weekday headers
+ * - .date-picker__day-button: Day buttons
+ * - .date-picker__day: Day cells
+ * - .date-picker__outside: Days outside current month
+ * - .date-picker__month-caption: Month/year caption
+ * - .date-picker__months: Months container
+ * - .date-picker__month: Month container
+ * - .date-picker__week: Week container
+ * - .date-picker__range-start: Range start date
+ * - .date-picker__range-end: Range end date
+ * - .date-picker__range-middle: Dates in range
+ * - .date-picker__nav: Navigation container
+ * - .date-picker__month-grid: Month grid
+ * - .date-picker__caption: Caption container
+ * - .date-picker__caption-label: Caption label
+ * - .date-picker__weekdays: Weekdays container
+ * - .date-picker__hidden: Hidden elements
+ * - .date-picker__year-grid--view: Year grid view
+ * - .date-picker__month-grid--view: Month grid view
+ * - .date-picker__date-footer: This is class for button footer in month and year view
+
+**
+ * # Example Usage
+ *
+ * When using Tailwind CSS with custom class names, we need to use `String.raw` because Tailwind
+ * interprets underscores (`_`) as class separators. Without `String.raw`, the escape characters don't work
+ * properly and you would need to use four backslashes (`\\\\`) to make it work. Using `String.raw` ensures
+ * that the class names with underscores are properly escaped and interpreted by Tailwind.
+ *
+ * Here's an example of how to use the DatePicker component with custom class for styling:
+ *
+ * ```tsx
+ * import { DatePicker } from './date-picker'
+ *
+ * function MyCustomDatePicker() {
+ *   return (
+ *     <DatePicker
+ *       name="custom-date"
+ *       label="Select Date"
+ *       placeholder="YYYY/MM/DD"
+ *       className={String.raw`
+ *         [&_.date-picker\\_\\_button-next]:bg-blue-500
+ *         [&_.date-picker\\_\\_button-next]:text-white
+ *         [&_.date-picker\\_\\_button-next]:rounded-full
+ *         [&_.date-picker\\_\\_selected]:!bg-blue-500
+ *         [&_.date-picker\\_\\_selected]:!text-white
+ *         [&_.date-picker\\_\\_today]:border-2
+ *         [&_.date-picker\\_\\_today]:border-blue-500
+ *         [&_.date-picker\\_\\_weekday]:text-blue-500
+ *         [&_.date-picker\\_\\_day-button]:hover:bg-blue-100
+ *       `}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [Date Picker Field](?path=/docs/scalars-date-picker-field--readme)
+ * > component.
+ */
+const meta = {
+    title: 'Data Entry/Date Picker',
+    component: DatePicker,
+    parameters: {
+        layout: 'centered',
+        form: {
+            resetBehavior: 'unmount',
+        },
+    },
+    decorators: [withTimestampsAsISOStrings],
+    tags: ['autodocs'],
+    argTypes: {
+        ...getDefaultArgTypes({
+            valueControlType: 'date',
+            valueType: 'date',
+        }),
+        minDate: {
+            control: 'date',
+            description: 'Minimum selectable date in the date picker',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        maxDate: {
+            control: 'date',
+            description: 'Maximum selectable date in the date picker',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        disablePastDates: {
+            control: 'boolean',
+            description: 'Disable past dates in the date picker',
+            table: {
+                type: { summary: 'boolean' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        disableFutureDates: {
+            control: 'boolean',
+            description: 'Disable future dates in the date picker',
+            table: {
+                type: { summary: 'boolean' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        dateFormat: {
+            control: {
+                type: 'select',
+            },
+            description: 'The format of the date in the date picker',
+            options: Object.keys(FORMAT_MAPPING),
+            table: {
+                defaultValue: { summary: 'YYYY-MM-DD' },
+                type: {
+                    summary: 'string',
+                },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        weekStart: {
+            control: 'select',
+            options: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+            table: {
+                defaultValue: { summary: 'Monday' },
+                type: {
+                    summary: 'string',
+                },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        autoClose: {
+            control: 'boolean',
+            description: 'Close the date picker when a date is selected',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder text for the date picker',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.DEFAULT,
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Additional className for customizing the calendar',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        viewMode: {
+            control: 'select',
+            options: ['edition', 'addition', 'removal', 'mixed'],
+            defaultValue: 'edition',
+            description: 'The mode of the date picker',
+            table: {
+                type: { summary: 'string' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        baseValue: {
+            control: 'date',
+            description: 'The base value of the date picker',
+            table: {
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        ...getValidationArgTypes({
+            enabledArgTypes: {
+                validators: false,
+                showErrorOnBlur: false,
+                showErrorOnChange: false,
+            },
+        }),
+    },
+    args: {
+        name: 'date-picker-field',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        name: 'date',
+        label: 'Pick a date',
+        placeholder: '2025/01/27',
+    },
+};
+export const Disabled = {
+    args: {
+        name: 'date',
+        label: 'Pick a date',
+        placeholder: '2025/01/27',
+        disabled: true,
+    },
+};
+export const Filled = {
+    args: {
+        name: 'date',
+        label: 'Pick a date',
+        value: '2025/01/27',
+    },
+};
+export const WithCustomizedCalendar = {
+    args: {
+        name: 'date',
+        label: 'Customized Calendar',
+        placeholder: '2025/01/27',
+        className: String.raw `
+      [&_.date-picker\\_\\_button-next]:bg-transparent
+      [&_.date-picker\\_\\_button-next]:border-2
+      [&_.date-picker\\_\\_button-next]:border-cyan-400
+      [&_.date-picker\\_\\_button-next]:text-cyan-400
+      [&_.date-picker\\_\\_button-next]:hover:bg-cyan-400/10
+      [&_.date-picker\\_\\_button-next]:hover:shadow-[0_0_15px_rgba(34,211,238,0.6)]
+      [&_.date-picker\\_\\_button-next]:rounded-full
+      [&_.date-picker\\_\\_button-next]:p-2
+      [&_.date-picker\\_\\_button-next]:transition-all
+      [&_.date-picker\\_\\_button-next]:duration-300
+
+      [&_.date-picker\\_\\_button-previous]:bg-transparent
+      [&_.date-picker\\_\\_button-previous]:border-2
+      [&_.date-picker\\_\\_button-previous]:border-cyan-400
+      [&_.date-picker\\_\\_button-previous]:text-cyan-400
+      [&_.date-picker\\_\\_button-previous]:hover:bg-cyan-400/10
+      [&_.date-picker\\_\\_button-previous]:hover:shadow-[0_0_15px_rgba(34,211,238,0.6)]
+      [&_.date-picker\\_\\_button-previous]:rounded-full
+      [&_.date-picker\\_\\_button-previous]:p-2
+      [&_.date-picker\\_\\_button-previous]:transition-all
+      [&_.date-picker\\_\\_button-previous]:duration-300
+
+      [&_.date-picker\\_\\_selected]:!bg-cyan-400
+      [&_.date-picker\\_\\_selected]:!text-black
+      [&_.date-picker\\_\\_selected]:!font-mono
+      [&_.date-picker\\_\\_selected]:!rounded-full
+      [&_.date-picker\\_\\_selected]:hover:!bg-cyan-500
+      [&_.date-picker\\_\\_selected]:transition-all
+      [&_.date-picker\\_\\_selected]:duration-300
+
+      [&_.date-picker\\_\\_today]:border-2
+      [&_.date-picker\\_\\_today]:border-pink-400
+      [&_.date-picker\\_\\_today]:rounded-full
+      [&_.date-picker\\_\\_today]:text-pink-400
+
+      [&_.date-picker\\_\\_weekday]:text-cyan-400
+      [&_.date-picker\\_\\_weekday]:font-mono
+      [&_.date-picker\\_\\_weekday]:text-sm
+
+      [&_.date-picker\\_\\_day-button]:text-cyan-400
+      [&_.date-picker\\_\\_day-button]:hover:text-cyan-300
+      [&_.date-picker\\_\\_day-button]:hover:bg-cyan-400/10
+      [&_.date-picker\\_\\_day-button]:rounded-full
+      [&_.date-picker\\_\\_day-button]:transition-all
+      [&_.date-picker\\_\\_day-button]:duration-300
+
+      [&_.date-picker\\_\\_outside]:opacity-40
+      [&_.date-picker\\_\\_outside]:!bg-gray-900
+
+      [&_.date-picker\\_\\_month-caption]:text-cyan-400
+      [&_.date-picker\\_\\_month-caption]:font-mono
+      [&_.date-picker\\_\\_month-caption]:p-2
+      [&_.date-picker\\_\\_month-caption]:text-lg
+      [&_.date-picker\\_\\_month-caption]:border-b
+      [&_.date-picker\\_\\_month-caption]:border-cyan-400/30
+      [&_.date-picker\\_\\_year-grid--view]:border-2
+      [&_.date-picker\\_\\_year-grid--view]:border-red-400
+      [&_.date-picker\\_\\_year-grid--view]:rounded-lg
+      [&_.date-picker\\_\\_year-grid--view]:p-2
+      [&_.date-picker\\_\\_year-grid--view]:bg-blue-500
+      [&_.date-picker\\_\\_year-grid--view]:text-white
+      [&_.date-picker\\_\\_year-grid--view]:font-bold
+      [&_.date-picker\\_\\_month-grid--view]:border-2
+      [&_.date-picker\\_\\_month-grid--view]:border-blue-400
+      [&_.date-picker\\_\\_month-grid--view]:rounded-lg
+      [&_.date-picker\\_\\_month-grid--view]:p-2
+      [&_.date-picker\\_\\_month-grid--view]:bg-red-500
+      [&_.date-picker\\_\\_month-grid--view]:text-white
+      [&_.date-picker\\_\\_month-grid--view]:font-bold
+      [&_.date-picker\\_\\_month-grid--view]:button:text-blue-400
+      [&_.date-picker\\_\\_date-footer]:gap-2
+      [&_.date-picker\\_\\_date-footer]:[&>button]:text-blue-400
+      [&_.date-picker\\_\\_date-footer]:[&>button]:hover:text-blue-500
+      [&_.date-picker\\_\\_date-footer]:[&>button]:hover:bg-blue-400/10
+      [&_.date-picker\\_\\_date-footer]:[&>button]:rounded-full
+      [&_.date-picker\\_\\_date-footer]:[&>button]:p-2
+      [&_.date-picker\\_\\_date-footer]:[&>button]:transition-all
+      [&_.date-picker\\_\\_date-footer]:[&>button]:duration-300
+      [&.input-field]:border-cyan-400
+      [&.input-field]:rounded-md
+  
+    `,
+    },
+};
+export const WithDifferencesAddition = {
+    args: {
+        label: 'Date difference addition',
+        value: '2025/01/27',
+        baseValue: '2024/01/27',
+        viewMode: 'addition',
+    },
+};
+export const WithDifferencesRemoval = {
+    args: {
+        label: 'Date difference removal',
+        value: '2025/01/27',
+        baseValue: '2024/01/27',
+        viewMode: 'removal',
+    },
+};
+export const WithDifferencesMixed = {
+    args: {
+        label: 'Date difference mixed',
+        value: '2025/01/27',
+        baseValue: '2024/01/27',
+        viewMode: 'mixed',
+    },
+};
+//# sourceMappingURL=date-picker.stories.js.map

package/dist/src/ui/components/data-entry/date-picker/date-picker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/date-picker/date-picker.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/date-picker/date-picker.test.d.ts

@@ -0,0 +1,2 @@
+export declare const getRelativeDate: (daysFromToday: number) => string;
+//# sourceMappingURL=date-picker.test.d.ts.map

package/dist/src/ui/components/data-entry/date-picker/date-picker.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/date-picker/date-picker.test.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,GAAI,eAAe,MAAM,WAGpD,CAAA"}