enwawa-ui 1.0.7

package/stories/atoms/AtRadio/AtRadio.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtRadio } from '.';
+import { AtText } from '../AtText';
+import React, { useState } from 'react';
+
+const meta = {
+  title: 'Atoms/AtRadio',
+  component: AtRadio,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof AtRadio>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+    value: 'Basic',
+    children: <AtText>Basic</AtText>,
+  },
+  render: () => {
+    const [checked, setChecked] = useState(0)
+    return (
+      <>        
+        <AtRadio value="Basic 1" checked={checked===1} onChange={()=>setChecked(1)}><AtText>Basic 1</AtText></AtRadio>   
+        <AtRadio value="Basic 2" checked={checked===2} onChange={()=>setChecked(2)}><AtText>Basic 2</AtText></AtRadio>   
+      </>
+    );
+  },
+};

package/stories/atoms/AtRadio/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio';
+
+export interface AtRadioProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Specifies whether the radio is selected
+   */
+  checked?: boolean;
+  /**
+   * Specifies the initial state: whether or not the radio is selected
+   */
+  defaultChecked?: boolean;
+  /**
+   * Disable radio
+   */
+  disabled?: boolean;
+  /**
+   * According to value for comparison, to determine whether the selected
+   */
+  value?: any;
+  /**
+   * Children of the AtRadio
+   */
+  children?: React.ReactElement;
+  /**
+   * On select option callback
+   */
+  onChange?: ((e: RadioChangeEvent) => void) | undefined;
+}
+
+export const AtRadio: React.FC<AtRadioProps> = (props) => {
+  return <Radio {...props}>{props.children}</Radio>;
+};
+
+AtRadio.defaultProps = {
+  checked: false,
+  defaultChecked: false,
+  disabled: false,
+};

package/stories/atoms/AtSelect/AtSelect.stories.tsx

@@ -0,0 +1,132 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtSelect } from '.';
+
+const meta = {
+  title: 'Atoms/AtSelect',
+  component: AtSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    filterOption: {
+      control: 'boolean',
+    },
+    size: {
+      options: ['large', 'middle', 'small', 'none'],
+    },
+    status: {
+      options: ['error', 'warning', 'none'],
+    },
+    maxTagCount: {
+      options: ['responsive', 1, 3, 5],
+    },
+    mode: {
+      options: ['multiple', 'tags'],
+    },
+    clearIcon: {
+      control: 'none',
+    },
+    notFoundContent: {
+      control: 'none',
+    },
+    menuItemSelectedIcon: {
+      control: 'none',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    popupMatchSelectWidth: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof AtSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options: { value: string; label: string }[] = [];
+
+for (let i = 10; i < 15; i++) {
+  options.push({
+    label: i.toString(36) + i,
+    value: i.toString(36) + i,
+  });
+}
+
+export const Normal: Story = {
+  args: {
+    placeholder: 'Normal',
+    id: '1',
+    options,
+  },
+};
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled',
+    id: '1',
+    disabled: true,
+    options,
+  },
+};
+export const Loading: Story = {
+  args: {
+    placeholder: 'Loading',
+    id: '1',
+    loading: true,
+    options,
+  },
+};
+export const AllowClear: Story = {
+  args: {
+    placeholder: 'AllowClear',
+    id: '1',
+    allowClear: true,
+    options,
+  },
+};
+export const Multiple: Story = {
+  args: {
+    placeholder: 'Multiple',
+    id: '1',
+    mode: 'multiple',
+    options,
+  },
+};
+export const Large: Story = {
+  args: {
+    placeholder: 'Large',
+    id: '1',
+    size: 'large',
+    options,
+  },
+};
+export const Default: Story = {
+  args: {
+    placeholder: 'Default',
+    id: '1',
+    size: 'middle',
+    options,
+  },
+};
+export const Small: Story = {
+  args: {
+    placeholder: 'Small',
+    id: '1',
+    size: 'small',
+    options,
+  },
+};
+export const Warning: Story = {
+  args: {
+    placeholder: 'Warning',
+    id: '1',
+    status: 'warning',
+    options,
+  },
+};
+export const Error: Story = {
+  args: {
+    placeholder: 'Error',
+    id: '1',
+    status: 'error',
+    options,
+  },
+};

package/stories/atoms/AtSelect/index.tsx

@@ -0,0 +1,229 @@
+import React, {
+  CSSProperties,
+  JSXElementConstructor,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { SelectProps } from 'antd';
+import { DefaultOptionType as Option, LabeledValue } from 'antd/es/select';
+import { StyledAtSelect } from './styles';
+
+export interface AtSelectProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Show clear button
+   */
+  allowClear?: boolean;
+  /**
+   * Whether the current search will be cleared on selecting an item. Only applies when mode is set to multiple or tags
+   */
+  autoClearSearchValue?: boolean;
+  /**
+   * Get focus by default
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether has border style
+   */
+  bordered?: boolean;
+  /**
+   * The custom clear icon
+   */
+  clearIcon?: ReactNode;
+  /**
+   * Whether active first option by default
+   */
+  defaultActiveFirstOption?: boolean;
+  /**
+   * Initial selected option
+   */
+  defaultValue?:
+    | string
+    | string[]
+    | number
+    | number[]
+    | LabeledValue
+    | LabeledValue[];
+  /**
+   * Whether disabled select
+   */
+  disabled?: boolean;
+  /**
+   * Determine whether the popup menu and the select input are the same width. Default set
+   *           min-width same as input. Will ignore when value less than select width. false
+   *           will disable virtual scroll
+   */
+  popupMatchSelectWidth?: boolean | number;
+  /**
+   * Customize dropdown content
+   */
+  dropdownRender?: (
+    originNode: ReactNode,
+  ) => ReactElement<any, string | JSXElementConstructor<any>>;
+  /**
+   * The style of dropdown menu
+   */
+  dropdownStyle?: CSSProperties;
+  /**
+   * Customize node label, value, options，groupLabel field name
+   */
+  fieldNames?: object;
+  /**
+   * If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded
+   */
+  filterOption?: SelectProps['filterOption'];
+  /**
+   * Sort function for search options sorting, see Array.sort's
+   * compareFunction
+   */
+  filterSort?: (optionA: Option, optionB: Option) => number;
+  /**
+   * Whether to embed label in value, turn the format of value from string to { value: string,
+   *           label: ReactNode }
+   */
+  labelInValue?: boolean;
+  /**
+   * Config popup height
+   */
+  listHeight?: number;
+  /**
+   * Indicate loading state
+   */
+  loading?: boolean;
+  /**
+   * Select height
+   */
+  $height?: string;
+  /**
+   * Max tag count to show. responsive will cost render performance
+   */
+  maxTagCount?: number | 'responsive';
+  /**
+   * The custom menuItemSelected icon with multiple options
+   */
+  menuItemSelectedIcon?: ReactNode;
+  /**
+   * Set mode of Select
+   */
+  mode?: 'multiple' | 'tags';
+  /**
+   * Specify content to show when no result matches
+   */
+  notFoundContent?: ReactNode;
+  /**
+   * Controlled open state of dropdown
+   */
+  open?: boolean;
+  /**
+   * Which prop value of option will be used for filter if filterOption is true. If options is
+              set, it should be set to label
+   */
+  optionFilterProp?: string;
+  /**
+   * Which prop value of option will render as content of select. Example
+   */
+  optionLabelProp?: string;
+  /**
+   * Select options. Will get better perf than jsx definition
+   */
+  options?: SelectProps['options'];
+  /**
+   * Placeholder of select
+   */
+  placeholder?: ReactNode;
+  /**
+   * The current input "search" text
+   */
+  searchValue?: string;
+  /**
+   * Whether to show the drop-down arrow
+   */
+  showArrow?: boolean;
+  /**
+   * Whether select is searchable
+   */
+  showSearch?: boolean;
+  /**
+   * Size of Select input
+   */
+  size?: 'large' | 'middle' | 'small';
+  /**
+   * Set validation status
+   */
+  status?: 'error' | 'warning';
+  /**
+   * Styles
+   */
+  style?: React.CSSProperties;
+  /**
+   * Current selected option (considered as a immutable array)
+   */
+  value?: string | string[] | number | number[] | LabeledValue | LabeledValue[];
+  /**
+   * Called when blur
+   */
+  onBlur?: () => any;
+  /**
+   * Called when select an option or input value change
+   */
+  onChange?: (value: any, option: Option | Array<Option>) => any;
+  /**
+   * Called when clear
+   */
+  onClear?: () => any;
+  /**
+   * Called when an option is deselected, param is the selected option's value. Only called for
+   *           multiple or tags, effective in multiple or tags mode only
+   */
+  onDeselect?: (value: string | number | LabeledValue) => any;
+  /**
+   * Called when dropdown open
+   */
+  onDropdownVisibleChange?: (open: boolean) => any;
+  /**
+   * Called when focus
+   */
+  onFocus?: () => any;
+  /**
+   * Callback function that is fired when input changed
+   */
+  onSearch?: (value: string) => any;
+  /**
+   * Called when an option is selected, the params are option's value (or key) and option instance
+   */
+  onSelect?: (value: string | number | LabeledValue, option: Option) => any;
+  /**
+   * Select width
+   */
+  $width?: string;
+  children: any;
+}
+
+export const AtSelect: React.FC<AtSelectProps> = (props) => {
+  return <StyledAtSelect notFoundContent="None" {...props} />;
+};
+
+AtSelect.defaultProps = {
+  allowClear: false,
+  autoClearSearchValue: true,
+  autoFocus: false,
+  bordered: true,
+  defaultActiveFirstOption: true,
+  fieldNames: {
+    label: 'label',
+    value: 'value',
+    options: 'options',
+    groupLabel: 'label',
+  },
+  filterOption: true,
+  labelInValue: false,
+  listHeight: 256,
+  loading: false,
+  searchValue: '',
+  size: 'middle',
+  showArrow: true,
+  popupMatchSelectWidth: true,
+};

package/stories/atoms/AtSelect/styles.tsx

@@ -0,0 +1,8 @@
+import { styled } from 'styled-components';
+import { Select } from 'antd';
+import { AtSelectProps } from '.';
+
+export const StyledAtSelect = styled(Select)<AtSelectProps>`
+  ${({ $height }) => ($height ? `height: ${$height};` : '')}
+  ${({ $width }) => ($width ? `width: ${$width} !important;` : '')}
+`;

package/stories/atoms/AtText/AtText.stories.ts

@@ -0,0 +1,104 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtText } from '.';
+
+const meta = {
+  title: 'Atoms/AtText',
+  component: AtText,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      options: ['none', 'secondary', 'success', 'warning', 'danger'],
+    },
+    editable: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof AtText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Basic',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    type: 'success',
+    children: 'Success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    type: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    type: 'danger',
+    children: 'Danger',
+  },
+};
+
+export const Code: Story = {
+  args: {
+    code: true,
+    children: 'Code',
+  },
+};
+
+export const Keyboard: Story = {
+  args: {
+    keyboard: true,
+    children: 'Keyboard',
+  },
+};
+
+export const Copyable: Story = {
+  args: {
+    copyable: true,
+    children: 'Copyable',
+  },
+};
+
+export const Editable: Story = {
+  args: {
+    editable: {
+      editing: 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/AtText/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Typography } from 'antd';
+import { BlockProps } from 'antd/es/typography/Base';
+
+export interface AtTextProps {
+  /**
+   * Content type
+   */
+  type?: 'secondary' | 'success' | 'warning' | 'danger';
+  /**
+   * Whether the text is strong or not
+   */
+  strong?: boolean;
+  /**
+   * Whether the text is italic or not
+   */
+  italic?: boolean;
+  /**
+   * Whether the text is underline or not
+   */
+  underline?: boolean;
+  /**
+   * Whether the text is mark or not
+   */
+  mark?: boolean;
+  /**
+   * If editable. Can control edit state when is object
+   */
+  editable?: boolean | BlockProps['editable'];
+  /**
+   * Whether to be copyable, customize it via setting an object
+   */
+  copyable?: boolean | BlockProps['copyable'];
+  /**
+   * Keyboard style
+   */
+  keyboard?: boolean;
+  /**
+   * Code style
+   */
+  code?: boolean;
+  /**
+   * children
+   */
+  children?: React.ReactNode;
+  /**
+   * Color of the text
+   */
+  color?: 'violet' | 'gold' | 'white';
+}
+
+export const AtText: React.FC<AtTextProps> = (props) => {
+  return <Typography.Text {...props}>{props.children}</Typography.Text>;
+};
+
+AtText.defaultProps = {
+  strong: false,
+  italic: false,
+  underline: false,
+  mark: false,
+  editable: false,
+  copyable: false,
+  keyboard: false,
+  code: false,
+};

package/stories/atoms/AtTextInput/AtTextInput.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtTextInput } from '.';
+
+const meta = {
+  title: 'Atoms/AtTextInput',
+  component: AtTextInput,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      options: ['none', 'error', 'warning'],
+    },
+  },
+} satisfies Meta<typeof AtTextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+    value: '',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    value: 'Text',
+    placeholder: 'Placeholder',
+    status: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    value: 'Text',
+    placeholder: 'Placeholder',
+    status: 'warning',
+  },
+};