impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/stories/Modal.stories.js

@@ -1,185 +0,0 @@
-import React from "react";
-import { Modal as ModalWrapper } from "../components/Modal";
-import { Button } from "../components/Button";
-import { fn } from "@storybook/test";
-
-export default {
-  title: "Components/Modal",
-  component: ModalWrapper,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    className: {
-      description:
-        "ClassName props to over-ride filter panel width or styling.",
-      table: {
-        defaultValue: { summary: "" },
-        type: { summary: "string" },
-      },
-    },
-    title: {
-      description: "Title of the Modal",
-      table: {
-        defaultValue: { summary: "" },
-        type: { summary: "string" },
-      },
-    },
-    height: {
-      description: "You can pass your own height to the Modal",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "string" },
-      },
-    },
-    width: {
-      description: "You can pass your own width to the Modal",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "string" },
-      },
-    },
-    size: {
-      description: "Width options of the Modal",
-      options: ["small", "medium", "large"],
-      control: { type: "radio" },
-      table: {
-        defaultValue: { summary: "medium" },
-        type: { summary: "string" },
-      },
-    },
-    open: {
-      description: "If true, display Modal.",
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    children: {
-      description: "React elements which get renders in the body of the Modal.",
-      table: {
-        defaultValue: { summary: "React Node" },
-        type: { summary: "object" },
-      },
-    },
-    primaryButtonLabel: {
-      description:
-        "Label of the Primary button, If not passed does not display primary button.",
-      table: {
-        defaultValue: { summary: "" },
-        type: { summary: "string" },
-      },
-    },
-    primaryButtonProps: {
-      description: "You can pass Primary button props.",
-      table: {
-        defaultValue: { summary: "{}" },
-        type: { summary: "object" },
-      },
-    },
-    secondaryButtonLabel: {
-      description:
-        "Label of the Secondary button of the Prompt, If not passed does not display secondary button.",
-      table: {
-        defaultValue: { summary: "" },
-        type: { summary: "string" },
-      },
-    },
-    secondaryButtonProps: {
-      description: "You can pass Secondary button props.",
-      table: {
-        defaultValue: { summary: "{}" },
-        type: { summary: "object" },
-      },
-    },
-    onClose: {
-      description: "Function handles the event, when close button is clicked.",
-      table: {
-        defaultValue: { summary: "() => {}" },
-        type: { summary: "function" },
-      },
-    },
-    onPrimaryButtonClick: {
-      description:
-        "Function handles the event, when primary button is clicked.",
-      table: {
-        defaultValue: { summary: "() => {}" },
-        type: { summary: "function" },
-      },
-    },
-    onSecondaryButtonClick: {
-      description:
-        "Function handles the event, when secondary button is clicked.",
-      table: {
-        defaultValue: { summary: "() => {}" },
-        type: { summary: "function" },
-      },
-    },
-    footerOptions: {
-      description: "pass custom jsx at the bottom of the modal",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "React Node" },
-      },
-    },
-    zIndex: {
-      description: "Z-index of the Modal",
-      table: {
-        defaultValue: { summary: "1300" },
-        type: { summary: "number" },
-      },
-    },
-    maxHeight: {
-      description: "Maximum height of the modal",
-      control: { type: "text" },
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "string" },
-      },
-    },
-  },
-  args: {
-    onPrimaryButtonClick: fn(),
-    onSecondaryButtonClick: fn(),
-    onClose: fn(),
-  },
-};
-
-const Modal = (args) => {
-  const [open, setOpen] = React.useState(args.isOpen);
-  return (
-    <React.Fragment>
-      <Button onClick={() => setOpen(!open)}>Click to display Modal</Button>
-      <ModalWrapper {...args} open={open} onClose={() => setOpen(!open)} />
-    </React.Fragment>
-  );
-};
-
-export const Default = (args) => <Modal {...args} />;
-
-Default.args = {
-  className: "test-modal",
-  title: "title",
-  size: "medium",
-  open: false,
-  children: (
-    <>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      Lorem Ipsum has been the industry's standard dummy text ever since the
-      1500s, when an unknown printer took a galley of type and scrambled it to
-      make a type specimen book. It has survived not only five centuries, but
-      also the leap into electronic typesetting, remaining essentially
-      unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting
-      industry. Lorem Ipsum has been the industry's standard dummy text ever
-      since the 1500s, when an unknown printer took a galley of type and
-      scrambled it to make a type specimen book.
-    </>
-  ),
-  primaryButtonLabel: "Submit",
-  primaryButtonProps: {
-    disabled: true,
-  },
-  secondaryButtonLabel: "Cancel",
-  footerOptions: <div>Footer Options</div>,
-};

package/src/stories/MonthPicker.stories.js

@@ -1,313 +0,0 @@
-import React, { useState } from "react";
-import { fn } from "@storybook/test";
-import { MonthPicker } from "../components/MonthPicker";
-
-export default {
-  title: "Components/MonthPicker",
-  component: MonthPicker,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A Month Picker is a UI component that allows users to select a specific month and year from a calendar interface. It's commonly used in scenarios where only month-level precision is needed, such as filtering data by month, setting monthly budgets, or selecting billing periods.\n\n" +
-          "Key features:\n" +
-          "- Month selection with year navigation\n" +
-          "- Custom year ranges support\n" +
-          "- Multiple display formats (MM/YYYY, YYYY/MM)\n" +
-          "- Disabled state and error state support\n" +
-          "- Custom validation through isOutsideRange\n" +
-          "- Apply/Cancel button functionality\n\n" +
-          "The MonthPicker is commonly used for:\n" +
-          "- Monthly report filtering\n" +
-          "- Billing period selection\n" +
-          "- Budget planning\n" +
-          "- Subscription management\n" +
-          "- Monthly data analysis",
-      },
-    },
-  },
-  argTypes: {
-    customYears: {
-      description: `You can pass your own custom year array. In format,
-      <code>
-          <ul class="storybook-order-list">
-            <li><strong>label</strong>: label of the year [string]</li>
-            <li><strong>value</strong>: unique value of the year [string]</li>
-          </ul>
-        </code>`,
-      table: {
-        defaultValue: {
-          summary: `[{
-    label: "2019",
-    value: "2019",
-  },
-  {
-    label: "2020",
-    value: "2020",
-  },
-  // ... more years
-  ]`,
-        },
-        type: { summary: "Array Object" },
-      },
-    },
-    locale: {
-      description:
-        "Locale string for month formatting (e.g., 'en-US', 'fr-FR')",
-      table: {
-        defaultValue: { summary: "en-US" },
-        type: { summary: "string" },
-      },
-    },
-    isMandatory: {
-      description: "If true, the month selection is mandatory",
-      table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
-      },
-    },
-    displayFormat: {
-      description: "Display format for the selected month",
-      options: ["MM/YYYY", "YYYY/MM"],
-      control: { type: "radio" },
-      table: {
-        defaultValue: { summary: "MM/YYYY" },
-        type: { summary: "string" },
-      },
-    },
-    focusedInput: {
-      description: "Which input should be focused initially",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "string" },
-      },
-    },
-    onApply: {
-      description: "Function called when Apply button is clicked",
-      table: {
-        defaultValue: { summary: "() => {}" },
-        type: { summary: "function" },
-      },
-    },
-    selectedMonth: {
-      description: "Currently selected month as a Date object",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "Date | null" },
-      },
-    },
-    isOutsideRange: {
-      description: "Function to determine if a month should be disabled",
-      table: {
-        defaultValue: { summary: "() => false" },
-        type: { summary: "function" },
-      },
-    },
-    disabled: {
-      description: "If true, disables the month picker",
-      table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
-      },
-    },
-    showYearSelect: {
-      description: "If true, shows year selection dropdown",
-      table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
-      },
-    },
-    isError: {
-      description: "If true, displays error state styling",
-      table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
-      },
-    },
-    customWidth: {
-      description: "Custom width for the month picker",
-      table: {
-        defaultValue: { summary: "282px" },
-        type: { summary: "string" },
-      },
-    },
-    withPortal: {
-      description: "If true, renders the calendar dropdown in a portal",
-      table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
-      },
-    },
-    portalContainer: {
-      description: "Container element where the portal should be rendered",
-      table: {
-        defaultValue: { summary: "document.body" },
-        type: { summary: "HTMLElement" },
-      },
-    },
-    portalClassName: {
-      description: "Additional CSS class to apply to the portal container",
-      table: {
-        defaultValue: { summary: "" },
-        type: { summary: "string" },
-      },
-    },
-    onMonthChange: {
-      description: "Callback function when month is changed",
-      table: {
-        defaultValue: { summary: "null" },
-        type: { summary: "function" },
-      },
-    },
-  },
-  args: {
-    onApply: fn(),
-    isOutsideRange: fn(),
-  },
-};
-
-const MonthPickerWrapper = (args) => {
-  const [selectedMonth, setSelectedMonth] = useState(
-    args.selectedMonth || null
-  );
-
-  const handleApply = (month) => {
-    setSelectedMonth(month);
-    args.onApply(month);
-  };
-
-  const isOutsideRange = (month) => {
-    // Example: Disable future months
-    const today = new Date();
-    const currentYear = today.getFullYear();
-    const currentMonth = today.getMonth();
-
-    // Compare year and month together
-    return (
-      month.getFullYear() > currentYear ||
-      (month.getFullYear() === currentYear && month.getMonth() > currentMonth)
-    );
-  };
-
-  return (
-    <MonthPicker
-      {...args}
-      selectedMonth={selectedMonth}
-      onApply={handleApply}
-      isOutsideRange={args.disabled ? isOutsideRange : () => false}
-    />
-  );
-};
-
-export const Default = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    locale: "en-US",
-    isMandatory: false,
-    displayFormat: "MM/YYYY",
-    focusedInput: null,
-    selectedMonth: new Date(),
-    disabled: false,
-    showYearSelect: true,
-    isError: false,
-    customWidth: "282px",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Default Month Picker allowing users to select a single month. This example shows the current month pre-selected.",
-      },
-    },
-  },
-};
-
-export const WithCustomYears = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    ...Default.args,
-    customYears: [
-      { label: "2020", value: "2020" },
-      { label: "2021", value: "2021" },
-      { label: "2022", value: "2022" },
-      { label: "2023", value: "2023" },
-      { label: "2024", value: "2024" },
-      { label: "2025", value: "2025" },
-    ],
-    showYearSelect: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Month Picker with custom year options. You can provide your own array of years to limit the available selections to specific years only.",
-      },
-    },
-  },
-};
-
-export const ErrorState = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    ...Default.args,
-    isError: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Month Picker in error state with error styling applied. This is useful for form validation scenarios.",
-      },
-    },
-  },
-};
-
-export const Disabled = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Month Picker in disabled state with restricted month selections. Future months are disabled in this example.",
-      },
-    },
-  },
-};
-
-export const YearMonthFormat = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    ...Default.args,
-    displayFormat: "YYYY/MM",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Month Picker with YYYY/MM display format instead of the default MM/YYYY format.",
-      },
-    },
-  },
-};
-
-export const EmptyState = {
-  render: (args) => <MonthPickerWrapper {...args} />,
-  args: {
-    ...Default.args,
-    selectedMonth: null,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Month Picker with no pre-selected month, allowing users to start fresh with their selection.",
-      },
-    },
-  },
-};