enwawa-ui 1.0.7

package/stories/atoms/AtDatePicker/AtDatePicker.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtDatePicker } from '.';
+
+const meta = {
+  title: 'Atoms/AtDatePicker',
+  component: AtDatePicker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AtDatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};
+
+export const ByMode: Story = {
+  args: {
+    picker: 'time',
+  },
+};
+
+export const Size: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Status: Story = {
+  args: {
+    status: 'error',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    bordered: false,
+  },
+};

package/stories/atoms/AtDatePicker/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { DatePicker, DatePickerProps } from 'antd';
+import { Dayjs } from 'dayjs';
+
+interface AtDatePickerPros {
+  /**
+   * If true, the date picker will be disabled
+   */
+  disabled?: boolean;
+  /**
+   *  Whether to show clear button
+   */
+  allowClear?: boolean;
+  /**
+   * If get focus when component mounted
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether has border style
+   */
+  bordered?: boolean;
+  /**
+   * Trigger change when blur. e.g. datetime picker no need click confirm button
+   */
+  changeOnBlur?: boolean;
+  /**
+   * Specify the date that cannot be selected
+   */
+  disabledDate?: (currentDate: Dayjs) => boolean;
+  /**
+   * To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to dayjs#format. for example: Custom Format
+   */
+  format?: string | string[];
+  /**
+   * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)
+   */
+  inputReadOnly?: boolean;
+  /**
+   * Localization configuration
+   */
+  locale?: DatePickerProps['locale'];
+  /**
+   * The picker panel mode（ Cannot select year or month anymore? )
+   */
+  mode?: 'time' | 'date' | 'month' | 'year' | 'decade';
+  /**
+   * The open state of picker
+   */
+  open?: boolean;
+  /**
+   * Set picker type
+   */
+  picker?: DatePickerProps['picker'];
+  /**
+   * Placeholder of the input
+   */
+  placeholder?: string;
+  /**
+   * The position where the selection box pops up
+   */
+  placement?: DatePickerProps['placement'];
+  /**
+   * The preset ranges for quick selection
+   */
+  presents?: DatePickerProps['presets'];
+  /**
+   * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px
+   */
+  size?: DatePickerProps['size'];
+  /**
+   * Set validation status
+   */
+  status?: DatePickerProps['status'];
+  /**
+   * Callback function, can be executed whether the popup calendar is popped up or closed
+   */
+  onOpenChange?: (status: boolean) => void;
+  /**
+   * Callback when picker panel mode is changed
+   */
+  onPanelChange?: (value: Dayjs | null, mode: DatePickerProps['mode']) => void;
+}
+
+export const AtDatePicker: React.FC<AtDatePickerPros> = (props) => {
+  return <DatePicker {...props} />;
+};
+
+AtDatePicker.defaultProps = {
+  autoFocus: false,
+  bordered: true,
+  changeOnBlur: false,
+  inputReadOnly: false,
+};

package/stories/atoms/AtDivider/AtDivider.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtDivider } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Atoms/AtDivider',
+  component: AtDivider,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { options: ['left', 'right', 'center'] },
+    type: { options: ['horizontal', 'vertical'] },
+  },
+} satisfies Meta<typeof AtDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+  },
+};
+export const Vertical: Story = {
+  args: {
+    id: '1',
+    type: 'vertical',
+  },
+  render: () => {
+    return (
+      <>
+        Text
+        <AtDivider type="vertical" />
+        <a href="#">Link</a>
+        <AtDivider type="vertical" />
+        <a href="#">Link</a>
+      </>
+    );
+  },
+};
+export const Dashed: Story = {
+  args: {
+    id: '1',
+    dashed: true,
+  },
+  render: (args) => {
+    return (
+      <div>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
+          merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+          tamen, quo modo.
+        </p>
+        <AtDivider {...args} />
+      </div>
+    );
+  },
+};

package/stories/atoms/AtDivider/index.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+import { Divider } from 'antd';
+
+export interface AtDividerProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * The wrapped title
+   */
+  children?: ReactNode;
+  /**
+   * Whether line is dashed
+   */
+  dashed?: boolean;
+  /**
+   * The position of title inside divider
+   */
+  orientation?: 'left' | 'right' | 'center';
+  /**
+   * The margin-left/right between the title and its closest border, while the orientation must be left or right, If a numeric value of type string is provided without a unit, it is assumed to be in pixels (px) by default.
+   */
+  orientationMargin?: string | number;
+  /**
+   * Divider text show as plain style
+   */
+  plain?: boolean;
+  /**
+   * The direction type of divider
+   */
+  type?: 'horizontal' | 'vertical';
+}
+
+export const AtDivider: React.FC<AtDividerProps> = (props) => {
+  return <Divider {...props}>{props.children}</Divider>;
+};
+
+AtDivider.defaultProps = {
+  dashed: false,
+  orientation: 'center',
+  plain: true,
+  type: 'horizontal',
+};

package/stories/atoms/AtImage/AtImage.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { AtImage } from '.';
+
+const meta = {
+  title: 'Atoms/AtImage',
+  component: AtImage,
+  tags: ['autodocs'],
+  argTypes: {
+    alt: { control: 'text' },
+    fallback: { control: 'text' },
+    height: { control: 'text' },
+    placeholder: { control: 'text' },
+    preview: { control: 'boolean' },
+    src: { control: 'text' },
+    width: { control: 'text' },
+    onError: { control: 'function' },
+  },
+} satisfies Meta<typeof AtImage>;
+
+export default meta;
+
+type Story = StoryObj<typeof AtImage>;
+
+export const Basic: Story = {
+  args: {
+    src: 'https://fastly.picsum.photos/id/1037/200/300.jpg?hmac=4eugJlD2Tm8e9ZZIDrSXnYPKNyVQ9Mm58HkQrLYBy1c',
+    alt: 'Example Image',
+  },
+};
+
+export const WithHeightAndWidth: Story = {
+  args: {
+    src: 'https://fastly.picsum.photos/id/1037/200/300.jpg?hmac=4eugJlD2Tm8e9ZZIDrSXnYPKNyVQ9Mm58HkQrLYBy1c',
+    alt: 'Example Image',
+    height: '200px',
+    width: '300px',
+  },
+};
+
+export const WithFallbackAndPlaceholder: Story = {
+  args: {
+    src: 'https://fastly.picsum.photos/id/1037/200/300.jpg?hmac=4eugJlD2Tm8e9ZZIDrSXnYPKNyVQ9Mm58HkQrLYBy1c',
+    alt: 'Example Image',
+    fallback: 'Fallback Image URL',
+    placeholder: 'Placeholder Image URL',
+  },
+};
+
+export const WithPreview: Story = {
+  args: {
+    src: 'https://fastly.picsum.photos/id/1037/200/300.jpg?hmac=4eugJlD2Tm8e9ZZIDrSXnYPKNyVQ9Mm58HkQrLYBy1c',
+    alt: 'Example Image',
+    preview: true,
+  },
+};
+
+export const WithOnErrorCallback: Story = {
+  args: {
+    src: 'https://fastly.picsum.photos/id/1037/200/300.jpg?hmac=4eugJlD2Tm8e9ZZIDrSXnYPKNyVQ9Mm58HkQrLYBy1c',
+    alt: 'Example Image',
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      console.error('Image loading failed:', e);
+    },
+  },
+};

package/stories/atoms/AtImage/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Image as AntImage, ImageProps } from 'antd';
+
+interface AtImageProps {
+  /**
+   * Image description
+   */
+  alt?: string;
+  /**
+   * Load failure fault-tolerant src
+   */
+  fallback?: string;
+  /**
+   * Image height
+   */
+  height?: string | number;
+  /**
+   * Image path
+   */
+  src?: string;
+  /**
+   * Image width
+   */
+  width?: string | number;
+  /**
+   * Load failed callback
+   */
+  onError?: ImageProps['onError'];
+  /**
+   * Load placeholder, use default placeholder when set true
+   */
+  placeholder?: ImageProps['placeholder'];
+  /**
+   * preview config, disabled when false
+   */
+  preview?: ImageProps['preview'];
+}
+
+export const AtImage: React.FC<AtImageProps> = (props) => {
+  return <AntImage {...props} />;
+};

package/stories/atoms/AtLogo/AtLogo.stories.ts

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AtLogo } from '.';
+
+const meta = {
+  title: 'Atoms/AtLogo',
+  component: AtLogo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AtLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};
+
+export const Gold: Story = {
+  args: {
+    color: 'gold',
+  },
+};
+
+export const White: Story = {
+  args: {
+    color: 'white',
+  },
+};
+
+export const Isotype: Story = {
+  args: {
+    type: 'isotype',
+  },
+};
+
+export const IsotypeGold: Story = {
+  args: {
+    type: 'isotype',
+    color: 'gold',
+  },
+};
+
+export const IsotypeWhite: Story = {
+  args: {
+    type: 'isotype',
+    color: 'white',
+  },
+};

package/stories/atoms/AtLogo/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import WaWaLogo from '../../assets/icons/wawa-logo.svg';
+import WaWaIsotype from '../../assets/icons/wawa-isotype.svg';
+import { Logo } from './styles';
+
+export interface AtLogoProps {
+  width?: number;
+  height?: number;
+  color?: 'violet' | 'gold' | 'white';
+  type?: 'logo' | 'isotype';
+}
+
+export const AtLogo: React.FC<AtLogoProps> = (props) => {
+  return (
+    <Logo {...props} src={props.type === 'logo' ? WaWaLogo : WaWaIsotype} />
+  );
+};
+
+AtLogo.defaultProps = {
+  color: 'violet',
+  type: 'logo',
+};

package/stories/atoms/AtLogo/styles.ts

@@ -0,0 +1,26 @@
+import { styled } from 'styled-components';
+import { AtLogoProps } from '.';
+import { violet } from '../../../theme';
+import { gold } from '@ant-design/colors';
+import SVG from 'react-inlinesvg';
+
+type LogoAttrs = AtLogoProps & {
+  width?: number;
+  height?: number;
+};
+
+const colorMap = {
+  violet: violet[5],
+  gold: gold[5],
+  white: '#FFFFFF',
+};
+
+export const Logo = styled(SVG)<LogoAttrs>`
+  & svg {
+    width: ${({ width, type }) => width ?? (type === 'logo' ? 243 : 90)};
+    height: ${({ height, type }) => height ?? (type === 'logo' ? 50 : 38)};
+  }
+  & path {
+    fill: ${({ color }) => (color ? colorMap[color] : colorMap.violet)};
+  }
+`;

package/stories/atoms/AtNumberInput/AtNumberInput.stories.ts

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

package/stories/atoms/AtNumberInput/index.tsx

@@ -0,0 +1,138 @@
+import React, { ChangeEvent, ReactNode } from 'react';
+import { ValueType } from '@rc-component/mini-decimal';
+import { StyledInputNumber } from './styles';
+
+export interface AtNumberInputProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * 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 get focus when component mounted
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether has border style
+   */
+  bordered?: boolean;
+  /**
+   * Whether to show +- controls, or set custom arrows icon
+   */
+  controls?: boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode };
+  /**
+   * Decimal separator
+   */
+  decimalSeparator?: string;
+  /**
+   * The initial value
+   */
+  defaultValue?: number;
+  /**
+   * If disable the input
+   */
+  disabled?: boolean;
+  /**
+   * Specifies the format of the value presented
+   */
+  formatter?: (
+    value: number | undefined,
+    info: { userTyping: boolean; input: string },
+  ) => string;
+  /**
+   * If enable keyboard behavior
+   */
+  keyboard?: boolean;
+  /**
+   * The max value
+   */
+  max?: number;
+  /**
+   * The min value
+   */
+  min?: number;
+  /**
+   * Specifies the value extracted from formatter
+   */
+  parser?: (displayValue: string | undefined) => number;
+  /**
+   * The precision of input value. Will use formatter when config of formatter
+   */
+  precision?: number;
+  /**
+   * If readonly the input
+   */
+  readOnly?: boolean;
+  /**
+   * Set validation status
+   */
+  status?: 'error' | 'warning';
+  /**
+   * The prefix icon for the Input
+   */
+  prefix?: ReactNode;
+  /**
+   * The height of input box
+   */
+  size?: 'large' | 'middle' | 'small';
+  /**
+   * The number to which the current value is increased or decreased. It can be an integer or decimal
+   */
+  step?: number | string;
+  /**
+   * Set value as string to support high precision decimals. Will return string value by onChange
+   */
+  stringMode?: boolean;
+  /**
+   * The current value
+   */
+  value?: number;
+  /**
+   * The callback triggered when the value is changed
+   */
+  onChange?: (value: number | string | null) => void;
+  /**
+   * The callback function that is triggered when Enter key is pressed
+   */
+  onPressEnter?: (e: ChangeEvent<EventTarget>) => void;
+  /**
+   * The callback function that is triggered when click up or down buttons
+   */
+  onStep?: (
+    value: number,
+    info: {
+      offset: ValueType;
+      type: 'up' | 'down';
+    },
+  ) => void;
+  /**
+   * Element width
+   */
+  $width?: string;
+}
+
+/**
+ * Primary input UI component for user interaction
+ */
+export const AtNumberInput: React.FC<AtNumberInputProps> = (props) => {
+  return <StyledInputNumber type="number" {...props} />;
+};
+
+AtNumberInput.defaultProps = {
+  autoFocus: false,
+  bordered: true,
+  disabled: false,
+  keyboard: true,
+  max: Number.MAX_SAFE_INTEGER,
+  min: Number.MIN_SAFE_INTEGER,
+  readOnly: false,
+  step: 1,
+  stringMode: false,
+};

package/stories/atoms/AtNumberInput/styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from 'styled-components';
+import { AtNumberInputProps } from '.';
+import { InputNumber } from 'antd';
+
+export const StyledInputNumber = styled(InputNumber)<AtNumberInputProps>`
+  ${({ $width }) => ($width ? `width: ${$width}` : '')}
+`;

package/stories/atoms/AtPasswordInput/AtPasswordInput.stories.ts

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

package/stories/atoms/AtPasswordInput/index.tsx

@@ -0,0 +1,11 @@
+import { Input } from 'antd';
+import React from 'react';
+import { AtTextInputProps } from '../AtTextInput';
+
+type AtPasswordInputProp = AtTextInputProps & {
+  iconRender?: (visible: boolean) => React.ReactNode;
+};
+
+export const AtPasswordInput: React.FC<AtPasswordInputProp> = (props) => {
+  return <Input.Password {...props} />;
+};