impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/stories/Checkbox.stories.js

@@ -1,209 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { fn } from "@storybook/test";
-import { Checkbox as CheckboxWrapper } from "../components/Checkbox";
-
-// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-export default {
-  title: "Components/Checkbox",
-  component: CheckboxWrapper,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A Checkbox is a UI component that allows users to select one or more options from a set of choices. The component is built on top of Material-UI's Checkbox and includes custom styling and functionality.\n\n" +
-          "Key features:\n" +
-          "- Multiple variants (default and dashed)\n" +
-          "- Support for labels and required fields\n" +
-          "- Disabled state\n" +
-          "- Controlled and uncontrolled modes\n" +
-          "- Optional dropdown integration\n" +
-          "- Custom styling for checked and unchecked states\n\n" +
-          "The Checkbox is commonly used for:\n" +
-          "- Form inputs\n" +
-          "- Settings toggles\n" +
-          "- Multi-select options\n" +
-          "- Terms and conditions acceptance\n" +
-          "- Filter options",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    label: {
-      description: "The text label to display next to the checkbox.",
-      control: { type: "text" },
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    variant: {
-      description:
-        "The visual style of the checkbox. 'default' shows a checkmark when selected, while 'dashed' shows a dash.",
-      options: ["default", "dashed"],
-      control: { type: "radio" },
-      table: {
-        defaultValue: { summary: "default" },
-        type: { summary: "string" },
-      },
-    },
-    disabled: {
-      description:
-        "If true, the checkbox will be disabled and cannot be interacted with.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    required: {
-      description:
-        "If true, the checkbox will be marked as required with an asterisk.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    defaultChecked: {
-      description:
-        "The default checked state of the checkbox (uncontrolled mode).",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    checked: {
-      description: "The checked state of the checkbox (controlled mode).",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    onChange: {
-      description:
-        "Callback function fired when the checkbox state changes. Receives the event object.",
-      control: { type: "function" },
-      table: {
-        type: {
-          summary: "(event: React.ChangeEvent<HTMLInputElement>) => void",
-        },
-      },
-    },
-    withoutFormLabel: {
-      description:
-        "If true, renders the checkbox without the Material-UI FormControlLabel wrapper.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    withDropDown: {
-      description: "If true, enables dropdown functionality for the checkbox.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    dropDownData: {
-      description: `Array of options for the dropdown menu. Each option can have:
-        <br/>
-        <br/>
-        <code>
-          <ul class="storybook-order-list">
-            <li><strong>label</strong>: Text to display in the dropdown [string]</li>
-            <li><strong>value</strong>: Unique identifier for the option [string]</li>
-            <li><strong>onClick</strong>: Callback function when option is selected [function]</li>
-            <li><strong>disabled</strong>: If true, disables the option [boolean]</li>
-          </ul>
-        </code>`,
-      control: { type: "array" },
-      table: {
-        type: {
-          summary:
-            "Array<{label: string, value: string, onClick?: function, disabled?: boolean}>",
-        },
-      },
-    },
-    onDropDownCheckBoxClick: {
-      description:
-        "Callback function fired when the checkbox state changes. Receives the event object.",
-      control: { type: "function" },
-      table: {
-        type: {
-          summary: "(event: React.ChangeEvent<HTMLInputElement>) => void",
-        },
-      },
-    },
-  },
-};
-
-const Checkbox = (args) => {
-  const [isChecked, setIsChecked] = useState(args.checked);
-  return (
-    <CheckboxWrapper
-      {...args}
-      checked={isChecked}
-      onChange={() => setIsChecked(!isChecked)}
-    />
-  );
-};
-
-const WithDropDownCheckbox = (args) => {
-  const [checked, setChecked] = useState(false);
-  const [selected, setSelected] = useState(null);
-
-  useEffect(() => {
-    setChecked(Boolean(selected));
-  }, [selected]);
-
-  const modifiedDropDownData = args.dropDownData?.map((item) => ({
-    ...item,
-    onClick: () => {
-      setSelected((prev) => (prev === item.value ? null : item.value));
-      item.onClick && item.onClick();
-    },
-  }));
-
-  return (
-    <CheckboxWrapper
-      {...args}
-      checked={checked}
-      dropDownData={modifiedDropDownData}
-    />
-  );
-};
-export const Default = (args) => <Checkbox {...args} />;
-export const withDropDown = (args) => <WithDropDownCheckbox {...args} />;
-
-Default.args = {
-  label: "checked",
-  variant: "default",
-  disabled: false,
-  required: true,
-  defaultChecked: true,
-  checked: true,
-  onChange: fn(),
-  withoutFormLabel: false,
-};
-
-withDropDown.args = {
-  variant: "default",
-  disabled: false,
-  checked: false,
-  withoutFormLabel: false,
-  withDropDown: true,
-  dropDownData: [
-    {
-      label: "Select current page records",
-      value: "Select current page records",
-      onClick: () => {},
-    },
-    { label: "test1", value: "test1" },
-  ],
-};

package/src/stories/Chips.stories.js

@@ -1,106 +0,0 @@
-import React from "react";
-import { Chips as ChipsWrapper } from "../components/Chips";
-
-export default {
-  title: "Components/Chips",
-  component: ChipsWrapper,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "A Chip is a compact element that represents an input, attribute, or action. The component is built on top of Material-UI's Chip component and includes custom styling and functionality.\n\n" +
-          "Key features:\n" +
-          "- Multiple variants (default, single-select, multi-select)\n" +
-          "- Custom styling for different states\n" +
-          "- Disabled state support\n" +
-          "- Click handling\n" +
-          "- Custom icons and indicators\n" +
-          "- Responsive design\n\n" +
-          "The Chip is commonly used for:\n" +
-          "- Input chips\n" +
-          "- Choice chips\n" +
-          "- Filter chips\n" +
-          "- Action chips\n" +
-          "- Tags and labels",
-      },
-    },
-  },
-  argTypes: {
-    label: {
-      description: "The text content to display in the chip.",
-      control: { type: "text" },
-      table: {
-        defaultValue: { summary: "Chip" },
-        type: { summary: "string" },
-      },
-    },
-    onClick: {
-      description: "Callback function fired when the chip is clicked.",
-      control: { type: "function" },
-      table: {
-        defaultValue: { summary: "() => {}" },
-        type: { summary: "(event: React.MouseEvent) => void" },
-      },
-    },
-    type: {
-      description:
-        "The type of chip, which affects its visual style and behavior. 'default' is a basic chip, 'single' shows a radio button indicator, and 'multi' shows a checkbox indicator.",
-      options: ["default", "single", "multi"],
-      control: { type: "radio" },
-      table: {
-        defaultValue: { summary: "default" },
-        type: { summary: "string" },
-      },
-    },
-    disabled: {
-      description:
-        "If true, the chip will be disabled and cannot be interacted with.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-    isActive: {
-      description:
-        "If true, the chip will be shown in its active/selected state.",
-      control: { type: "boolean" },
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: "boolean" },
-      },
-    },
-  },
-};
-
-const Chips = (args) => <ChipsWrapper {...args} />;
-
-export const Default = (args) => <Chips {...args} />;
-export const SingleSelect = (args) => <Chips {...args} />;
-export const MultiSelect = (args) => <Chips {...args} />;
-
-Default.args = {
-  label: "Default Chip",
-  onClick: () => {},
-  type: "default",
-  disabled: false,
-  isActive: false,
-};
-
-SingleSelect.args = {
-  label: "Single Select",
-  onClick: () => {},
-  type: "single",
-  disabled: false,
-  isActive: true,
-};
-
-MultiSelect.args = {
-  label: "Multi Select",
-  onClick: () => {},
-  type: "multi",
-  disabled: false,
-  isActive: true,
-};

package/src/stories/CreateItemFlow.stories.js

@@ -1,255 +0,0 @@
-import React, { useState, useMemo, useCallback } from "react";
-import { CreateItemFlow as CreateItemFlowWrapper } from "../components/CreateItemFlow";
-import { Select } from "../components/Select";
-import { TextArea } from "../components/TextArea";
-import AccountBalanceOutlinedIcon from "@mui/icons-material/AccountBalanceOutlined";
-import { Button } from "../components/Button";
-
-export default {
-  title: "Components/CreateItemFlow",
-  component: CreateItemFlowWrapper,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-  docs: {
-    description: {
-      component:
-        "A create item flow is a UI component that allows users to create an item. It is often used in forms, settings, and surveys to capture user preferences or multiple selections.",
-    },
-  },
-  argTypes: {
-    stepperVariant: {
-      options: ["mui", "classic", "progress"],
-      control: { type: "radio" },
-    },
-    totalSteps: {
-      defaultValue: 3,
-      type: "number",
-    },
-    actionsChildren: {
-      type: "Array Object",
-      defaultValue: (
-        <React.Fragment>
-          <Button variant="secondary" onClick={() => {}}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={() => {}}>
-            Submit
-          </Button>
-        </React.Fragment>
-      ),
-    },
-  },
-};
-
-const createFlowContainerStyle = {
-  backgroundColor: "lightgrey",
-  flex: 1,
-  display: "flex",
-  // marginTop: "var(--header-height)",
-  transition: "margin-left 0.3s ease, width 0.3s ease",
-  overflow: "hidden",
-  height: "100vh", // giving container height so that the children will take available space
-};
-
-const departmentOptions = [
-  { label: "Department 1", value: "dept1" },
-  { label: "Department 2", value: "dept2" },
-  { label: "Department 3", value: "dept3" },
-];
-
-const classOptions = [
-  { label: "Class 1", value: "class1" },
-  { label: "Class 2", value: "class2" },
-  { label: "Class 3", value: "class3" },
-];
-
-const channelOptions = [
-  { label: "Channel 1", value: "channel1" },
-  { label: "Channel 2", value: "channel2" },
-  { label: "Channel 3", value: "channel3" },
-  { label: "Channel 4", value: "channel4" },
-  { label: "Channel 5", value: "channel5" },
-  { label: "Channel 6", value: "channel6" },
-  { label: "Channel 7", value: "channel7" },
-  { label: "Channel 8", value: "channel8" },
-  { label: "Channel 9", value: "channel9" },
-  { label: "Channel 10", value: "channel10" },
-  { label: "Channel 11", value: "channel11" },
-];
-
-const headings = ["Alert Details", "Configuration", "Review"];
-
-const CreateItemFlow = (args) => {
-  const [step, setStep] = useState(1);
-  const [selectStates, setSelectStates] = useState({
-    department: { isOpen: false },
-    class: { isOpen: false },
-    channel: { isOpen: false },
-  });
-
-  const toggleSelect = useCallback((selectName) => {
-    setSelectStates((prev) => ({
-      ...prev,
-      [selectName]: { isOpen: !prev[selectName].isOpen },
-    }));
-  }, []);
-
-  // Function to render select components with open/close state
-  const renderSelects = (states, toggleFn) => ({
-    department: (
-      <Select
-        key="department"
-        initialOptions={departmentOptions}
-        currentOptions={departmentOptions}
-        setCurrentOptions={() => {}}
-        placeholder="Select Department"
-        isOpen={states.department.isOpen}
-        setIsOpen={() => toggleFn("department")}
-        onChange={(value) => console.log("Department selected:", value)}
-        withPortal
-        portalContainer={document.body}
-        placement="bottom-start"
-      />
-    ),
-    class: (
-      <Select
-        key="class"
-        initialOptions={classOptions}
-        currentOptions={classOptions}
-        setCurrentOptions={() => {}}
-        placeholder="Select Class"
-        isOpen={states.class.isOpen}
-        setIsOpen={() => toggleFn("class")}
-        onChange={(value) => console.log("Class selected:", value)}
-        withPortal
-        portalContainer={document.body}
-        placement="bottom-start"
-      />
-    ),
-    channel: (
-      <Select
-        key="channel"
-        initialOptions={channelOptions}
-        currentOptions={channelOptions}
-        setCurrentOptions={() => {}}
-        placeholder="Select Channel"
-        isOpen={states.channel.isOpen}
-        setIsOpen={() => toggleFn("channel")}
-        onChange={(value) => console.log("Channel selected:", value)}
-        withPortal
-        portalContainer={document.body}
-        placement="bottom-start"
-      />
-    ),
-  });
-
-  const handleCancel = () => {
-    console.log("Cancelled");
-    // Reset form or navigate back
-  };
-
-  const handleNext = () => {
-    if (step === 3) {
-      console.log("Form submitted!");
-      return;
-    }
-    setStep((prev) => Math.min(prev + 1, 3));
-  };
-
-  const handlePrev = () => {
-    setStep((prev) => Math.max(prev - 1, 1));
-  };
-
-  const handleStepClick = (stepNumber) => {
-    // Optional: Add validation before allowing step navigation
-    setStep(stepNumber);
-  };
-
-  // Get the select components with current state and handlers
-  const selects = useMemo(
-    () => renderSelects(selectStates, toggleSelect),
-    [selectStates, toggleSelect]
-  );
-
-  const children = useMemo(() => {
-    return args.children ? args.children(selects) : null;
-  }, [args.children, selects]);
-
-  return (
-    <div style={createFlowContainerStyle}>
-      <CreateItemFlowWrapper
-        {...args}
-        onCancel={handleCancel}
-        onNext={handleNext}
-        onPrev={handlePrev}
-        onStepClick={handleStepClick}
-        headings={headings}
-        step={step}
-      >
-        {children}
-      </CreateItemFlowWrapper>
-    </div>
-  );
-};
-
-export const Default = (args) => <CreateItemFlow {...args} />;
-
-Default.args = {
-  step: 1,
-  headings: headings,
-  // leftPanelWidth: 427,
-  leftPanelTitle: "Create Alert",
-  leftPanelDescription:
-    "Create and configure your alert settings. Follow the steps to set up your alert preferences.",
-  // leftPanelImage: <AccountBalanceOutlinedIcon />,
-  stepperVariant: "progress",
-  children: (selects) => [
-    // Alert Details Content
-    <div className="form-section" key="alert-details">
-      <div className="field">
-        <div className="field-label">Alert name</div>
-        <TextArea placeholder="Enter here..." width="100%" height="40px" />
-      </div>
-    </div>,
-
-    // Configuration Content
-    <div className="form-section" key="configuration">
-      <div className="field-group">
-        <div className="field">
-          <div className="field-label">Department</div>
-          {selects.department}
-        </div>
-        <div className="field">
-          <div className="field-label">Class</div>
-          {selects.class}
-        </div>
-      </div>
-      <div className="field">
-        <div className="field-label">Channel</div>
-        {selects.channel}
-      </div>
-    </div>,
-
-    // Review Content
-    <div className="form-section" key="review">
-      <div className="field">
-        <div className="field-label">Review your settings</div>
-        <div style={{ marginTop: "16px" }}>
-          <p>Please review your alert configuration before submitting.</p>
-        </div>
-      </div>
-    </div>,
-  ],
-  actionsChildren: [
-    <React.Fragment>
-      <Button variant="tertiary" onClick={() => {}}>
-        Cancel
-      </Button>
-      <Button variant="primary" onClick={() => {}}>
-        Submit
-      </Button>
-    </React.Fragment>,
-  ],
-};