enwawa-ui 1.0.7

package/stories/molecules/MlCarousel/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Carousel } from 'antd';
+import { DotPosition } from 'antd/es/carousel';
+
+export interface MlCarouselProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Whether to scroll automatically
+   */
+  autoplay?: boolean;
+  /**
+   * Delay between each auto scroll (in milliseconds)
+   */
+  autoplaySpeed?: number;
+  /**
+   * Center elements into carousel
+   */
+  centerMode?: boolean;
+  /**
+   * The position of the dots, which can be one of top bottom left right
+   */
+  dotPosition?: DotPosition;
+  /**
+   * Whether to show the dots at the bottom of the gallery, object for dotsClass and any others
+   */
+  dots?: boolean;
+  /**
+   * Whether to wait for the animation when switching
+   */
+  waitForAnimate?: boolean;
+  /**
+   * Transition interpolation function name
+   */
+  easing?: string;
+  /**
+   * Transition effect
+   */
+  effect?: 'scrollx' | 'fade';
+  /**
+   * Callback function called after the current index changes
+   */
+  afterChange?: (current: number) => void;
+  /**
+   * Callback function called before the current index changes
+   */
+  beforeChange?: (current: number, next: number) => void;
+
+  children?: React.ReactNode;
+}
+
+export const MlCarousel: React.FC<MlCarouselProps> = ({ ...props }) => (
+  <Carousel {...props}>{props.children}</Carousel>
+);
+
+MlCarousel.defaultProps = {
+  autoplay: false,
+  autoplaySpeed: 5000,
+  dotPosition: 'bottom',
+  dots: true,
+  waitForAnimate: false,
+  easing: 'linear',
+  effect: 'scrollx',
+  centerMode: true,
+};

package/stories/molecules/MlDropdown/MlDropdown.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { DownOutlined } from '@ant-design/icons';
+import { Space, message } from 'antd';
+import { MIDropdown } from '.';
+
+const meta = {
+  title: 'Molecules/MIDropdown',
+  component: MIDropdown,
+  tags: ['autodocs'],
+  args: {
+    menu: {
+      onClick: () => message.info('Click on menu item.'),
+      items: [
+        {
+          key: 1,
+          label: 'Item 1',
+        },
+        {
+          key: 2,
+          label: 'Item 2',
+        },
+        {
+          key: 3,
+          label: 'Item 3',
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof MIDropdown>;
+
+export default meta;
+
+const defaultChildren = (
+  <a onClick={(e) => e.preventDefault()}>
+    <Space>
+      Hover me
+      <DownOutlined />
+    </Space>
+  </a>
+);
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: defaultChildren,
+    placement: 'bottomLeft',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    children: (
+      <a onClick={(e) => e.preventDefault()}>
+        <Space>Loading</Space>
+      </a>
+    ),
+  },
+};
+
+export const Button: Story = {
+  args: {
+    children: (
+      <a onClick={(e) => e.preventDefault()}>
+        <Space>Click Me</Space>
+      </a>
+    ),
+    button: true,
+    onClick: () => message.info('Click on left button.'),
+  },
+};
+
+const AllPlacements: Story = {
+  args: {
+    children: defaultChildren,
+    placement: 'bottomLeft',
+  },
+};
+
+export const PlacementTopLeft: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'topLeft',
+  },
+};
+
+export const PlacementTopCenter: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'topCenter',
+  },
+};
+
+export const PlacementTopRight: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'topRight',
+  },
+};
+
+export const PlacementBottomLeft: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'bottomLeft',
+  },
+};
+
+export const PlacementBottomCenter: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'bottomCenter',
+  },
+};
+
+export const PlacementBottomRight: Story = {
+  args: {
+    ...AllPlacements.args,
+    placement: 'bottomRight',
+  },
+};

package/stories/molecules/MlDropdown/index.tsx

@@ -0,0 +1,97 @@
+import React, { ReactNode } from 'react';
+import { Dropdown, DropdownProps, MenuProps } from 'antd';
+
+interface AtDropdownProps extends DropdownProps {
+  /**
+   * If true, an arrow will be shown
+   */
+  arrow?: boolean;
+
+  /**
+   * Whether to adjust popup placement automatically in case of overflow
+   */
+  autoAdjustOverflow?: boolean;
+
+  /**
+   * If true, the dropdown will be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * A function used to render the dropdown menu
+   */
+  dropdownRender?: (menu: ReactNode) => ReactNode;
+
+  /**
+   * Style of the dropdown menu
+   */
+  overlayStyle?: React.CSSProperties;
+
+  /**
+   * Placement of the dropdown menu. Possible values: 'topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'
+   */
+  placement?:
+    | 'topLeft'
+    | 'topCenter'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomCenter'
+    | 'bottomRight';
+
+  /**
+   * Triggers for showing the overlay. Possible values: 'click', 'hover', 'contextMenu'
+   */
+  trigger?: ('click' | 'hover' | 'contextMenu')[];
+
+  /**
+   * If true, the dropdown is opened
+   */
+  open?: boolean;
+
+  /**
+   * A function to be called when visible changes
+   */
+  onOpenChange?: (visible: boolean) => void;
+
+  /**
+   * Child elements of the Dropdown component
+   */
+  children?: ReactNode;
+
+  /**
+   * Menu items
+   */
+  menu?: MenuProps;
+
+  /**
+   * If true, the loading icon will be shown
+   */
+  loading?: boolean;
+
+  /**
+   * If true, the dropdown will be shown as a button
+   */
+  button?: boolean;
+
+  /**
+   * when button is true, the onlick function will be called
+   */
+  onClick?: () => void;
+}
+
+export const MIDropdown: React.FC<AtDropdownProps> = (props) => {
+  if (props.loading || props.button) {
+    return <Dropdown.Button {...props}>{props.children}</Dropdown.Button>;
+  }
+  return <Dropdown {...props}>{props.children}</Dropdown>;
+};
+
+MIDropdown.defaultProps = {
+  arrow: false,
+  autoAdjustOverflow: true,
+  disabled: false,
+  overlayStyle: {},
+  placement: 'bottomLeft',
+  trigger: ['hover'],
+  loading: false,
+};

package/stories/molecules/MlFormItem/MlFormItem.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { MlFormItem } from '.';
+import { AtTextInput } from '../../atoms';
+
+const meta = {
+  title: 'Molecules/MlFormItem',
+  component: MlFormItem,
+  tags: ['autodocs'],
+  argTypes: {
+    validateStatus: {
+      control: {
+        options: ['none', 'success', 'warning', 'error', 'validating'],
+      },
+    },
+  },
+} satisfies Meta<typeof MlFormItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: 'input',
+    label: 'Name',
+    hasFeedback: true,
+  },
+  render: (args) => (
+    <MlFormItem {...args}>
+      <AtTextInput />
+    </MlFormItem>
+  ),
+};

package/stories/molecules/MlFormItem/index.tsx

@@ -0,0 +1,100 @@
+import FormItem from 'antd/es/form/FormItem';
+import React from 'react';
+import { NamePath, Store, StoreValue } from 'antd/es/form/interface';
+import { ColProps } from 'antd';
+import { Rule } from 'antd/es/form';
+import { LabelTooltipType } from 'antd/es/form/FormItemLabel';
+
+interface MlFromItemProps {
+  /**
+   * Set the dependencies field by names
+   */
+  dependencies?: string[];
+  /**
+   * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time
+   */
+  extra?: string;
+  /**
+   * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input
+   */
+  hasFeedback?: boolean;
+  /**
+   * The prompt message. If not provided, the prompt message will be generated by the validation rule.
+   */
+  help?: string;
+  /**
+   * Whether to hide Form.Item (still collect and validate value)
+   */
+  hidden?: boolean;
+  /**
+   * Config sub default value. Form initialValues get higher priority when conflict
+   */
+  initialValue?: string;
+  /**
+   * Label text
+   */
+  label?: string;
+  /**
+   * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>. You can set labelCol on Form which will not affect nest Item. If both exists, use Item first
+   */
+  labelCol?: ColProps;
+  /**
+   * The default validate field info
+   */
+  messageVariables?: Record<string, string>;
+  /**
+   * Field name, support array
+   */
+  name?: NamePath;
+  /**
+   * No style for true, used as a pure field control
+   */
+  noStyle?: boolean;
+  /**
+   * Normalize value from component value before passing to Form instance. Do not support async
+   */
+  normalize?: (
+    value: StoreValue,
+    prevValue: StoreValue,
+    allValues: Store,
+  ) => StoreValue;
+  /**
+   * Display required style. It will be generated by the validation rule
+   */
+  required?: boolean;
+  /**
+   * Rules for field validation. Click [here](https://ant.design/components/form#components-form-demo-basic) to see an example
+   */
+  rules?: Rule[];
+  /**
+   * Config tooltip info
+   */
+  tooltip?: LabelTooltipType;
+  /**
+   * The validation status. If not provided, it will be generated by validation rule. options: success warning error validating
+   */
+  validateStatus?: 'success' | 'warning' | 'error' | 'validating' | undefined;
+  /**
+   * When to validate the value of children node
+   */
+  validateTrigger?: string | string[] | false;
+  /**
+   * The layout for input controls, same as labelCol. You can set wrapperCol on Form which will not affect nest Item. If both exists, use Item first
+   */
+  wrapperCol?: ColProps;
+  children?: React.ReactElement;
+}
+
+export const MlFormItem: React.FC<MlFromItemProps> = ({
+  children,
+  ...props
+}) => {
+  return <FormItem {...props}>{children}</FormItem>;
+};
+
+MlFormItem.defaultProps = {
+  hasFeedback: false,
+  hidden: false,
+  required: false,
+  noStyle: false,
+};

package/stories/molecules/MlRadioGroup/MlRadioGroup.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MlRadioGroup } from '.';
+
+const meta = {
+  title: 'Molecules/MlRadioGroup',
+  component: MlRadioGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    buttonStyle: { options: ['outline', 'solid'] },
+    optionType: { options: ['default', 'button'] },
+    size: { options: ['large', 'middle', 'small'] },
+  },
+} satisfies Meta<typeof MlRadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    id: '1',
+    options: [
+      {
+        label: 'a',
+        value: 'a v',
+        disabled: false,
+      },
+      {
+        label: 'b',
+        value: 'b v',
+        disabled: false,
+      },
+      {
+        label: 'c',
+        value: 'c v',
+        disabled: true,
+      },
+    ],
+  },
+};

package/stories/molecules/MlRadioGroup/index.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import { RadioChangeEvent, Radio } from 'antd';
+
+export interface MlRadioGroupProps {
+
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * The style type of radio button
+   */
+  buttonStyle?: 'outline' | 'solid';
+  /**
+   * Default selected value
+   */
+  defaultValue?: any;
+  /**
+   * Disable all radio buttons
+   */
+  disabled?: boolean;
+  /**
+   * The name property of all input[type="radio"] children
+   */
+  name?: string;
+  /**
+   * Set children optional
+   */
+  options?: string[] | number[] | Array<{ label: ReactNode; value: string; disabled?: boolean; }>;
+  /**
+   * Set Radio optionType
+   */
+  optionType?: 'default' | 'button';
+  /**
+   * The size of radio button style
+   */
+  size?: 'large' | 'middle' | 'small';
+  /**
+   * Used for setting the currently selected value
+   */
+  value?: any;
+  /**
+   * The callback function that is triggered when the state changes
+   */
+  onChange?: (e: RadioChangeEvent) => void;
+}
+
+export const MlRadioGroup: React.FC<MlRadioGroupProps> = (props) => {
+  return <Radio.Group {...props} />
+};
+
+MlRadioGroup.defaultProps = {
+  buttonStyle: "outline",
+  disabled: false,
+  optionType: "default",
+  size: "middle"
+}
+
+
+

package/stories/molecules/index.ts

@@ -0,0 +1,6 @@
+export * from './MlBreadCrumb';
+export * from './MlCard';
+export * from './MlCarousel';
+export * from './MlDropdown';
+export * from './MlFormItem';
+export * from './MlRadioGroup';

package/stories/organisms/OrAlert/OrAlert.stories.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Marquee from 'react-fast-marquee';
+import { OrAlert } from '.';
+import { Button, Space } from 'antd';
+
+const meta = {
+  title: 'Organisms/OrAlert',
+  component: OrAlert,
+  tags: ['autodocs'],
+  argTypes: {
+    action: {
+      table: {
+        type: {
+          summary: 'ReactNode | ReactNode[]',
+        }
+      },
+      options: {
+        default: [],
+        withChild: [
+          <Space direction="vertical">
+          <Button size="small" type="primary">
+            Accept
+          </Button>
+          <Button size="small" danger ghost>
+            Decline
+          </Button>
+        </Space>
+        ]
+      },
+    },
+    closeIcon: {
+      options: [true, false, 
+      <Button size="small" danger ghost>
+        Close
+      </Button>
+    ],
+      control: 'select',
+    },
+    message: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+  }
+} satisfies Meta<typeof OrAlert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+  }
+}
+
+export const Banner: Story = {
+  args: {
+    banner: true,
+    message: <Marquee pauseOnHover gradient={false}>
+    I can be a React component, multiple React components, or just some text.
+  </Marquee>
+  }
+}
+
+export const ActionAlert: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    action: [
+      <Space direction="vertical">
+        <Button size="small" type="primary">
+          Accept
+        </Button>
+        <Button size="small" danger ghost>
+          Decline
+        </Button>
+      </Space>
+    ]
+  },
+
+}
+
+export const Closable: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    closeIcon: true,
+  }
+}
+
+export const Description: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    description: 'I can be a React component, multiple React components, or just some text.',
+  }
+}
+
+export const Icon: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    showIcon: true,
+  }
+}
+
+export const Success: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    type: 'success',
+    showIcon: true,
+  }
+}
+
+export const Info: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    type: 'info',
+    showIcon: true,
+  }
+}
+
+export const Warning: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    type: 'warning',
+    showIcon: true,
+  }
+}
+
+export const Error: Story = {
+  args: {
+    message: 'I can be a React component, multiple React components, or just some text.',
+    type: 'error',
+    showIcon: true,
+  }
+}