enwawa-ui 1.0.7

package/stories/atoms/AtTextInput/index.tsx

@@ -0,0 +1,85 @@
+import React, { ChangeEvent, ReactNode } from 'react';
+import { Input } from 'antd';
+
+export interface AtTextInputProps {
+  /**
+   * The label text displayed after (on the right side of) the input field
+   */
+  addonAfter?: ReactNode;
+  /**
+   * The label text displayed before (on the left side of) the input field
+   */
+  addonBefore?: ReactNode;
+  /**
+   * If allow to remove input content with clear icon
+   */
+  allowClear?: boolean | { clearIcon?: ReactNode };
+  /**
+   * Whether has border style
+   */
+  bordered?: boolean;
+  /**
+   * The initial input content
+   */
+  defaultValue?: string;
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * The maximum number of characters in Input
+   */
+  maxLength?: number;
+  /**
+   * Set validation status
+   */
+  status?: 'error' | 'warning' | undefined;
+  /**
+   * Whether to show character count
+   */
+  showCount?: boolean;
+  /**
+   * Placeholder text to display into the input
+   */
+  placeholder?: string;
+  /**
+   * The prefix icon for the Input
+   */
+  prefix?: ReactNode;
+  /**
+   * The size of the input box. Note: in the context of a form, the middle size is used
+   */
+  size?: 'large' | 'middle' | 'small';
+  /**
+   * The suffix icon for the Input
+   */
+  suffix?: ReactNode;
+  /**
+   * The input content value
+   */
+  value?: string;
+  /**
+   * Callback when user input
+   */
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * Primary input UI component for user interaction
+ */
+export const AtTextInput: React.FC<AtTextInputProps> = (props) => {
+  return <Input {...props} />;
+};
+
+AtTextInput.defaultProps = {
+  allowClear: false,
+  bordered: true,
+  size: 'middle',
+  status: undefined,
+  disabled: false,
+  showCount: false,
+};

package/stories/atoms/AtTitle/AtTitle.stories.ts

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtTitle } from '.';
+
+const meta: Meta = {
+  title: 'Atoms/AtTitle',
+  component: AtTitle,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      options: ['none', 'secondary', 'success', 'warning', 'danger'],
+    },
+    copyable: {
+      control: 'boolean',
+    },
+    editable: {
+      control: 'boolean',
+    },
+    ellipsis: {
+      control: 'boolean',
+    },
+    level: {
+      control: {
+        type: 'select',
+        labels: {
+          1: 'h1',
+          2: 'h2',
+          3: 'h3',
+          4: 'h4',
+          5: 'h5',
+        },
+      },
+    },
+    onClick: {
+      control: 'none',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    children: 'Title',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    type: 'danger',
+    children: 'Danger',
+  },
+};
+
+export const Code: Story = {
+  args: {
+    code: true,
+    children: 'Code',
+  },
+};
+
+export const Copyable: Story = {
+  args: {
+    copyable: true,
+    children: 'Copyable',
+  },
+};
+
+export const Editable: Story = {
+  args: {
+    editable: true,
+    children: 'Editable',
+  },
+};
+
+export const Mark: Story = {
+  args: {
+    mark: true,
+    children: 'Mark',
+  },
+};
+
+export const Italic: Story = {
+  args: {
+    italic: true,
+    children: 'Italic',
+  },
+};
+
+export const Underline: Story = {
+  args: {
+    underline: true,
+    children: 'Underline',
+  },
+};

package/stories/atoms/AtTitle/index.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import { Typography } from 'antd';
+import { BlockProps, EllipsisConfig, BaseType } from 'antd/es/typography/Base';
+
+export interface AtTitleProps {
+  /**
+   * Code style
+   */
+  code?: boolean;
+  /**
+   * Whether to be copyable, customize it via setting an object
+   */
+  copyable?: boolean | BlockProps['copyable'];
+  /**
+   * Deleted line style
+   */
+  delete?: boolean;
+  /**
+   * Disabled content
+   */
+  disabled?: boolean;
+  /**
+   * If editable. Can control edit state when is object
+   */
+  editable?: boolean | BlockProps['editable'];
+  /**
+   * Display ellipsis when text overflows, can configure rows and expandable by using object
+   */
+  ellipsis?: boolean | EllipsisConfig;
+  /**
+   * Set content importance. Match with h1, h2, h3, h4, h5
+   */
+  level?: 1 | 2 | 3 | 4 | 5;
+  /**
+   * Whether the text is mark or not
+   */
+  mark?: boolean;
+  /**
+   * Set the handler to handle click event
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /**
+   * Whether the text is italic or not
+   */
+  italic?: boolean;
+  /**
+   * Content type
+   */
+  type?: BaseType;
+  /**
+   * Whether the text is underline or not
+   */
+  underline?: boolean;
+  /**
+   * Additional content to include
+   */
+  children?: ReactNode;
+  /**
+   * Color of the title
+   */
+  color?: 'violet' | 'gold' | 'white';
+}
+
+export const AtTitle: React.FC<AtTitleProps> = (props) => {
+  return <Typography.Title {...props}>{props.children}</Typography.Title>;
+};
+
+AtTitle.defaultProps = {
+  code: false,
+  copyable: false,
+  delete: false,
+  editable: false,
+  level: 1,
+  mark: false,
+  italic: false,
+  underline: false,
+};

package/stories/atoms/AtTitle/styles.ts

@@ -0,0 +1,7 @@
+import { Typography } from 'antd';
+import { styled } from 'styled-components';
+import { AtTitleProps } from '.';
+
+export const StyledTitle = styled(Typography.Title) <AtTitleProps>`
+  font-weight: ${({ level }) => (level === 1 ? 700 : 500)};
+`;

package/stories/atoms/index.ts

@@ -0,0 +1,14 @@
+export * from './AtAvatar';
+export * from './AtButton';
+export * from './AtCheckBox';
+export * from './AtDatePicker';
+export * from './AtDivider';
+export * from './AtImage';
+export * from './AtLogo';
+export * from './AtNumberInput';
+export * from './AtPasswordInput';
+export * from './AtRadio';
+export * from './AtSelect';
+export * from './AtText';
+export * from './AtTextInput';
+export * from './AtTitle';

package/stories/molecules/MlBreadCrumb/MlBreadCrumb.stories.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { MlBreadcrumb } from '.';
+
+const meta = {
+  title: 'Molecules/MlBreadcrumb',
+  component: MlBreadcrumb,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof MlBreadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  {
+    title: 'Home',
+  },
+  {
+    title: <a href="">Application Center</a>,
+  },
+  {
+    title: <a href="">Application List</a>,
+  },
+  {
+    title: 'An Application',
+  },
+];
+
+const menuItems = [
+  {
+    key: '1',
+    label: (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://www.youtube.com/"
+      >
+        General
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://www.youtube.com/"
+      >
+        Layout
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://www.youtube.com/"
+      >
+        Navigation
+      </a>
+    ),
+  },
+];
+
+export const Basic: Story = {
+  args: {
+    items: items,
+  },
+};
+
+export const CustomItemRender: Story = {
+  args: {
+    items: items,
+    itemRender: (route, params, routes, paths) => {
+      const last = routes.indexOf(route) === routes.length - 1;
+      return last ? (
+        <span>{route.title}</span>
+      ) : (
+        <a href={paths.join('/')}>{route.title}</a>
+      );
+    },
+  },
+};
+
+export const WithParams: Story = {
+  args: {
+    items: items,
+    params: {
+      id: '123',
+    },
+  },
+};
+
+export const WithSeparator: Story = {
+  args: {
+    items: items,
+    separator: '>',
+  },
+};
+
+export const WithDropdown: Story = {
+  args: {
+    items: [
+      {
+        title: 'Ant Design',
+      },
+      {
+        title: <a href="">Component</a>,
+      },
+      {
+        title: <a href="">General</a>,
+        menu: { items: menuItems },
+      },
+      {
+        title: 'Button',
+      },
+    ],
+  },
+};

package/stories/molecules/MlBreadCrumb/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Breadcrumb, BreadcrumbProps } from 'antd';
+
+interface MlBreadcrumbProps {
+  /**
+   * Custom item renderer
+   */
+  itemRender?: BreadcrumbProps['itemRender'];
+  /**
+   * Routing parameters
+   */
+  params?: Record<string, string>;
+  /**
+   * The routing stack information of router
+   */
+  items: BreadcrumbProps['items'];
+  /**
+   * Separator character
+   */
+  separator?: BreadcrumbProps['separator'];
+}
+
+export const MlBreadcrumb: React.FC<MlBreadcrumbProps> = (props) => {
+  return <Breadcrumb {...props} />;
+};
+
+MlBreadcrumb.defaultProps = {
+  separator: '/',
+};

package/stories/molecules/MlCard/MlCard.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MlCard } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Molecules/MlCard',
+  component: MlCard,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+    },
+    type: {
+      options: ['inner'],
+    },
+  },
+} satisfies Meta<typeof MlCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = (
+  <>
+    <p>Card content</p> <p>Card content</p> <p>Card content</p>
+  </>
+);
+
+export const Basic: Story = {
+  args: {
+    children: items,
+    id: '1',
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    children: items,
+    id: '1',
+    bordered: false,
+  },
+};
+export const Loading: Story = {
+  args: {
+    children: items,
+    id: '1',
+    loading: true,
+  },
+};
+export const Small: Story = {
+  args: {
+    children: items,
+    id: '1',
+    size: 'small',
+  },
+};

package/stories/molecules/MlCard/index.tsx

@@ -0,0 +1,100 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { CardTabListType } from 'antd/es/card';
+import { CardType } from 'antd/es/card/Card';
+import { TabsProps } from 'antd/es/tabs';
+import { StyledCard } from './styles';
+
+export interface MlCardProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * The action list, shows at the bottom of the Card
+   */
+  actions?: Array<ReactNode>;
+  /**
+   * Current TabPane's key
+   */
+  activeTabKey?: string;
+  /**
+   * Inline style to apply to the card content	CSSProperties
+   */
+  bodyStyle?: CSSProperties;
+  /**
+   * Toggles rendering of the border around the card
+   */
+  bordered?: boolean;
+  /**
+   * Card cover
+   */
+  cover?: ReactNode;
+  /**
+   * Initial active TabPane's key, if activeTabKey is not set
+   */
+  defaultActiveTabKey?: string;
+  /**
+   * Content to render in the top-right corner of the card
+   */
+  extra?: ReactNode;
+  /**
+   * Lift up when hovering card
+   */
+  hoverable?: boolean;
+  /**
+   * Shows a loading indicator while the contents of the card are being fetched
+   */
+  loading?: boolean;
+  /**
+   * Mark item as selected
+   */
+  selected?: boolean;
+  /**
+   * Size of card
+   */
+  size?: 'default' | 'small';
+  /**
+   * Extra content in tab bar
+   */
+  tabBarExtraContent?: ReactNode;
+  /**
+   * List of TabPane's head
+   */
+  tabList?: CardTabListType[];
+  /**
+   * Tabs
+   */
+  tabProps?: TabsProps;
+  /**
+   * Card title
+   */
+  title?: ReactNode;
+  /**
+   * Card style type, can be set to inner or not set
+   */
+  type?: CardType;
+  /**
+   * Callback when card is clicked
+   */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Callback when tab is switched
+   */
+  onTabChange?: (key: string) => void;
+  children?: React.ReactElement;
+}
+
+/**
+ * Primary input UI component for user interaction
+ */
+export const MlCard: React.FC<MlCardProps> = (props) => {
+  return <StyledCard {...props}>{props.children}</StyledCard>;
+};
+
+MlCard.defaultProps = {
+  bordered: true,
+  hoverable: false,
+  loading: false,
+  size: 'default',
+  selected: false,
+};

package/stories/molecules/MlCard/styles.tsx

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+import { Card } from 'antd';
+import { MlCardProps } from '.';
+import { violet } from '../../../theme';
+
+export const StyledCard = styled(Card)<MlCardProps>`
+  ${({ selected }) =>
+    selected
+      ? `
+    border-color: ${violet[5]};
+    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+  `
+      : ''}
+
+  &:hover * {
+    ${({ hoverable }) => (hoverable ? `color: ${violet[5]};` : '')}
+  }
+
+  & * {
+    ${({ selected }) => (selected ? `color: ${violet[5]};` : '')}
+  }
+`;

package/stories/molecules/MlCarousel/MlCarousel.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MlCarousel } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Molecules/MlCarousel',
+  component: MlCarousel,
+  tags: ['autodocs'],
+  argTypes: {
+    dotPosition: { options: ['top', 'bottom', 'left', 'right'] },
+    effect: { options: ['scrollx', 'fade'] },
+    dots: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof MlCarousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const contentStyle: React.CSSProperties = {
+  margin: 0,
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+const Elements = [
+  <div>
+    <h3 style={contentStyle}>1</h3>
+  </div>,
+  <div>
+    <h3 style={contentStyle}>2</h3>
+  </div>,
+  <div>
+    <h3 style={contentStyle}>3</h3>
+  </div>,
+  <div>
+    <h3 style={contentStyle}>4</h3>
+  </div>,
+];
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+    children: Elements,
+  },
+};
+
+export const Autoplay: Story = {
+  args: {
+    id: '3',
+    autoplay: true,
+    children: Elements,
+  },
+};
+
+export const Fade: Story = {
+  args: {
+    id: '4',
+    effect: 'fade',
+    children: Elements,
+  },
+};
+
+export const Top: Story = {
+  args: {
+    id: '5',
+    dotPosition: 'top',
+    children: Elements,
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    id: '6',
+    dotPosition: 'bottom',
+    children: Elements,
+  },
+};
+
+export const Left: Story = {
+  args: {
+    id: '7',
+    dotPosition: 'left',
+    children: Elements,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    id: '7',
+    dotPosition: 'right',
+    children: Elements,
+  },
+};