enwawa-ui 1.0.7

package/stories/organisms/OrAlert/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Alert, AlertProps } from 'antd';
+
+interface OrAlertProps {
+/**
+ * The action of Alert
+ */
+action?: AlertProps['action'];
+/**
+ * Called when close animation is finished
+ */
+afterClose?: AlertProps['afterClose'];
+/**
+ * Whether to show as banner
+ */
+banner?: boolean;
+/**
+ * Custom close icon, >=5.7.0: close button will be hidden when setting to null or false
+ */
+closeIcon?: boolean | React.ReactNode;
+/** 
+ * Closable text to show
+ */
+closable?: AlertProps['closable'];
+/**
+ * Additional content of Alert
+ */
+description?: AlertProps['description'];
+/**
+ * Custom icon, effective when showIcon is true
+ */
+icon?: AlertProps['icon'];
+/**
+ * Content of Alert
+ */
+message?: AlertProps['message'];
+/**
+ * Whether to show icon
+ */
+showIcon?: boolean;
+/**
+ * Type of Alert styles, options: success, info, warning, error
+ */
+type?: AlertProps['type'];
+/**
+ * Callback when Alert is closed
+ */
+onClose?: AlertProps['onClose'];
+/**
+ * Children of Alert
+ */
+children?: React.ReactNode;
+}
+
+export const OrAlert: React.FC<OrAlertProps>  = (props) => {
+  return (
+    <Alert {...props} >{props.children}</Alert>
+  );
+};
+
+OrAlert.defaultProps = {
+  afterClose: undefined,
+  banner: false,
+};

package/stories/organisms/OrCol/OrCol.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrCol } from '.';
+import { AtButton } from '../../atoms/AtButton';
+import React from 'react';
+import { OrRow } from '../OrRow';
+
+const meta = {
+  title: 'Organisms/OrCol',
+  component: OrCol,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OrCol>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+    span: 8,
+  },
+  render: (args) => {
+    return (
+      <OrRow>
+        {new Array(3).fill(null).map((_, index) => (
+          <OrCol {...args}>
+            <AtButton key={index} value={`AtButton-${index}`} />
+          </OrCol>
+        ))}
+      </OrRow>
+    );
+  },
+};

package/stories/organisms/OrCol/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { StyledCol } from './styles';
+
+export interface OrColProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Flex layout style
+   */
+  flex?: string | number;
+  /**
+   * The number of cells to offset Col from the left
+   */
+  offset?: number;
+  /**
+   * Raster order
+   */
+  order?: number;
+  /**
+   * The number of cells that raster is moved to the left
+   */
+  pull?: number;
+  /**
+   * The number of cells that raster is moved to the right
+   */
+  push?: number;
+  /**
+   * Raster number of cells to occupy, 0 corresponds to display: none
+   */
+  span?: number;
+  /**
+   * screen < 576px and also default setting, could be a span value or an object containing above props
+   */
+  xs?: number | object;
+  /**
+   * screen ≥ 576px, could be a span value or an object containing above props
+   */
+  sm?: number | object;
+  /**
+   * screen ≥ 768px, could be a span value or an object containing above props
+   */
+  md?: number | object;
+  /**
+   * screen ≥ 1200px, could be a span value or an object containing above props
+   */
+  xl?: number | object;
+  /**
+   * screen ≥ 1600px, could be a span value or an object containing above props
+   */
+  xxl?: number | object;
+  /**
+   * Children of Columns
+   */
+
+  children?: React.ReactElement | React.ReactElement[];
+  /**
+   * Container background source
+   */
+  $backgroundSrc?: string;
+  /**
+   * Justify content
+   */
+  $justify?:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
+  /**
+   * Container padding top in px
+   */
+  $paddingTop?: number;
+  /**
+   * Container padding Bottom in px
+   */
+  $paddingBottom?: number;
+  /**
+   * Container padding Right in px
+   */
+  $paddingRight?: number;
+  /**
+   * Container padding Left in px
+   */
+  $paddingLeft?: number;
+  /**
+   * Container padding Vertical in px
+   */
+  $paddingVertical?: number;
+  /**
+   * Container padding Horizontal in px
+   */
+  $paddingHorizontal?: number;
+}
+
+export const OrCol: React.FC<OrColProps> = (props) => {
+  return <StyledCol {...props}>{props.children}</StyledCol>;
+};
+
+OrCol.defaultProps = {
+  offset: 0,
+  order: 0,
+  pull: 0,
+  push: 0,
+  span: 0,
+};

package/stories/organisms/OrCol/styles.ts

@@ -0,0 +1,86 @@
+import { styled } from 'styled-components';
+import { OrColProps } from '.';
+import { Col } from 'antd';
+
+export const StyledCol = styled(Col)<OrColProps>`
+  ${({ xs }) =>
+    (xs as any)?.hidden === true || (xs as number) === 0
+      ? ''
+      : 'display: flex;'}
+  flex-direction: column;
+  ${({ $backgroundSrc }) =>
+    $backgroundSrc ? `background-image: url(${$backgroundSrc})` : ''};
+  ${({ $justify }) => ($justify ? `justify-content: ${$justify}` : '')};
+  object-fit: cover;
+  ${({ xs, $paddingTop }) =>
+    (xs as any)?.$paddingTop || $paddingTop !== undefined
+      ? `padding-top: ${(xs as any)?.$paddingTop ?? $paddingTop}px`
+      : ''};
+  ${({ xs, $paddingBottom }) =>
+    (xs as any)?.$paddingBottom || $paddingBottom !== undefined
+      ? `padding-bottom: ${(xs as any)?.$paddingBottom ?? $paddingBottom}px`
+      : ''};
+  ${({ xs, $paddingRight }) =>
+    (xs as any)?.$paddingRight || $paddingRight !== undefined
+      ? `padding-right: ${(xs as any)?.$paddingRight ?? $paddingRight}px`
+      : ''};
+  ${({ xs, $paddingLeft }) =>
+    (xs as any)?.$paddingLeft || $paddingLeft !== undefined
+      ? `padding-left: ${(xs as any)?.$paddingLeft ?? $paddingLeft}px`
+      : ''};
+  ${({ xs, $paddingVertical }) =>
+    (xs as any)?.$paddingVertical || $paddingVertical !== undefined
+      ? `padding-top: ${
+          (xs as any)?.$paddingVertical ?? $paddingVertical
+        }px; padding-bottom: ${
+          (xs as any)?.$paddingVertical ?? $paddingVertical
+        }px`
+      : ''};
+  ${({ xs, $paddingHorizontal }) =>
+    (xs as any)?.$paddingHorizontal
+      ? `padding-left: ${
+          (xs as any)?.$paddingHorizontal ?? $paddingHorizontal
+        }px; padding-right: ${
+          (xs as any)?.$paddingHorizontal ?? $paddingHorizontal
+        }px`
+      : ''};
+
+  @media (min-width: 768px) {
+    ${({ md }) =>
+      (md as any)?.hidden === true || (md as number) === 0
+        ? ''
+        : 'display: flex;'}
+    ${({ md, $paddingTop }) =>
+      (md as any)?.$paddingTop || $paddingTop !== undefined
+        ? `padding-top: ${(md as any)?.$paddingTop ?? $paddingTop}px`
+        : ''};
+    ${({ md, $paddingBottom }) =>
+      (md as any)?.$paddingBottom || $paddingBottom !== undefined
+        ? `padding-bottom: ${(md as any)?.$paddingBottom ?? $paddingBottom}px`
+        : ''};
+    ${({ md, $paddingRight }) =>
+      (md as any)?.$paddingRight || $paddingRight !== undefined
+        ? `padding-right: ${(md as any)?.$paddingRight ?? $paddingRight}px`
+        : ''};
+    ${({ md, $paddingLeft }) =>
+      (md as any)?.$paddingLeft || $paddingLeft !== undefined
+        ? `padding-left: ${(md as any)?.$paddingLeft ?? $paddingLeft}px`
+        : ''};
+    ${({ md, $paddingVertical }) =>
+      (md as any)?.$paddingVertical || $paddingVertical !== undefined
+        ? `padding-top: ${
+            (md as any)?.$paddingVertical ?? $paddingVertical
+          }px; padding-bottom: ${
+            (md as any)?.$paddingVertical ?? $paddingVertical
+          }px`
+        : ''};
+    ${({ md, $paddingHorizontal }) =>
+      (md as any)?.$paddingHorizontal
+        ? `padding-left: ${
+            (md as any)?.$paddingHorizontal ?? $paddingHorizontal
+          }px; padding-right: ${
+            (md as any)?.$paddingHorizontal ?? $paddingHorizontal
+          }px`
+        : ''};
+  }
+`;

package/stories/organisms/OrContent/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Layout, LayoutProps } from 'antd';
+
+export const OrContent: React.FC<LayoutProps> = (props) => (
+  <Layout.Content {...props}>{props.children}</Layout.Content>
+);

package/stories/organisms/OrCountryCard/OrCountryCard.stories.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrCountryCard } from '.';
+
+const meta = {
+  title: 'Organisms/OrCountryCard',
+  component: OrCountryCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OrCountryCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    name: 'Venezuela',
+    flagSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/0/06/Flag_of_Venezuela.svg',
+  },
+};

package/stories/organisms/OrCountryCard/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MlCard } from '../../molecules';
+import { AtText } from '../../atoms/AtText';
+import SVG from 'react-inlinesvg';
+import { OrRow, OrCol } from '../../organisms';
+export interface OrCountryCardProps {
+  /**
+   * The ID for card
+   */
+  id?: string;
+  /**
+   * Country name
+   **/
+  name: string;
+  /**
+   * Country flag url
+   **/
+  flagSrc: string;
+  /**
+   * Mark item as selected
+   */
+  selected?: boolean;
+  /**
+   * Callback when card is clicked
+   */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export const OrCountryCard: React.FC<OrCountryCardProps> = (props) => {
+  return (
+    <MlCard
+      selected={props.selected}
+      hoverable={true}
+      bodyStyle={{ padding: '12px 24px' }}
+      onClick={props.onClick}
+    >
+      <OrRow
+        align={'middle'}
+        justify={{ xs: 'center', md: 'start' }}
+        gutter={24}
+      >
+        <OrCol>
+          <SVG width={72} height={48} src={props.flagSrc} />
+        </OrCol>
+        <OrCol xs={{ offset: 1 }}>
+          <AtText>{props.name}</AtText>
+        </OrCol>
+      </OrRow>
+    </MlCard>
+  );
+};
+
+OrCountryCard.defaultProps = {
+  selected: false,
+};

package/stories/organisms/OrFlagGrid/OrFlagGrid.stories.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrFlagGrid } from '.';
+
+const meta = {
+  title: 'Organisms/OrFlagGrid',
+  component: OrFlagGrid,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OrFlagGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CountriesExampleData = [
+  {
+    name: 'Venezuela',
+    flagSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/0/06/Flag_of_Venezuela.svg',
+  },
+  {
+    name: 'Colombia',
+    flagSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg',
+  },
+  {
+    name: 'Mexico',
+    flagSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/f/fc/Flag_of_Mexico.svg',
+  },
+  {
+    name: 'Peru',
+    flagSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/c/cf/Flag_of_Peru.svg',
+  },
+];
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+    data: CountriesExampleData,
+  },
+};

package/stories/organisms/OrFlagGrid/index.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { OrCountryCardProps, OrCountryCard } from '../OrCountryCard';
+import { Row, Col } from 'antd';
+
+export interface OrFlagGridProps {
+  /**
+   * The ID for cards
+   */
+  id?: string;
+  /**
+   * Country data to show elements into the grid
+   */
+  data?: OrCountryCardProps[];
+  /**
+   * Number of items that can contain a row
+   */
+  itemsPerRow?: number;
+  /**
+   * Index selected Item
+   */
+  selectedItem?: number;
+  /**
+   * Callback when card is clicked
+   */
+  onSelectCard?: (index: number) => void;
+}
+
+export const OrFlagGrid: React.FC<OrFlagGridProps> = ({
+  data,
+  itemsPerRow,
+  selectedItem,
+  onSelectCard,
+}) => {
+  const span = useMemo(() => 24 / (itemsPerRow ?? 1), [itemsPerRow]);
+
+  return (
+    <Row gutter={[16, 16]} justify={'center'}>
+      {data?.map((item, i) => (
+        <Col key={i} xs={{ span: 24 }} md={{ span }}>
+          <OrCountryCard
+            selected={selectedItem === i}
+            onClick={() => onSelectCard?.(i)}
+            {...item}
+          />
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+OrFlagGrid.defaultProps = {
+  data: [],
+  itemsPerRow: 2,
+};

package/stories/organisms/OrFrom/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form, FormProps } from 'antd';
+
+export type OrFromProps = FormProps & {
+  children: React.ReactNode;
+};
+
+export const OrForm: React.FC<OrFromProps> = ({ children, ...props }) => {
+  return <Form {...props}>{children}</Form>;
+};

package/stories/organisms/OrHeader/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Layout, LayoutProps } from 'antd';
+
+export const OrHeader: React.FC<LayoutProps> = (props) => (
+  <Layout.Header {...props}>{props.children}</Layout.Header>
+);

package/stories/organisms/OrLayout/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Layout, LayoutProps } from 'antd';
+
+export const OrLayout: React.FC<LayoutProps> = (props) => (
+  <Layout {...props}>{props.children}</Layout>
+);

package/stories/organisms/OrLoginLayout/OrLoginLayout.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { OrLoginLayout } from '.';
+import defaultBackground from '../../assets/backgrounds/bg-1.png';
+import defaultCarouselImage from '../../assets/carousel/login/1st.png';
+import { OrRow } from '../OrRow';
+import { AtTitle } from '../../atoms';
+
+const meta = {
+  title: 'Organisms/OrLoginLayout',
+  component: OrLoginLayout,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OrLoginLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    carouselImages: [
+      defaultCarouselImage,
+      defaultCarouselImage,
+      defaultCarouselImage,
+    ],
+    $carouselBackgroundSrc: defaultBackground,
+  },
+  render: (args) => (
+    <OrLoginLayout {...args}>
+      <OrRow justify={'space-between'} align={'middle'}>
+        <AtTitle>Content</AtTitle>
+      </OrRow>
+    </OrLoginLayout>
+  ),
+};

package/stories/organisms/OrLoginLayout/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyledCarouselImageContainer, StyledContainer } from './styles';
+import { OrRow } from '../OrRow';
+import { OrCol } from '../OrCol';
+import { MlCarousel } from '../../molecules';
+import { AtImage } from '../../atoms';
+
+export interface OrLoginLayoutProps {
+  /**
+   * Carousel image background source
+   */
+  $carouselBackgroundSrc?: string;
+  /**
+   * Images to show into carousel
+   */
+  carouselImages: string[];
+  /**
+   * Content to render into layout
+   */
+  children?: React.ReactElement;
+}
+
+export const OrLoginLayout: React.FC<OrLoginLayoutProps> = ({
+  $carouselBackgroundSrc,
+  carouselImages,
+  children,
+}) => {
+  return (
+    <StyledContainer>
+      <OrRow align="stretch" justify="center">
+        <OrCol
+          $justify="start"
+          xs={{ span: 24, $paddingHorizontal: 20, $paddingTop: 40 }}
+          md={{ span: 14, $paddingHorizontal: 64, $paddingTop: 120 }}
+        >
+          {children}
+        </OrCol>
+
+        <OrCol
+          xs={{ hidden: true }}
+          md={{ span: 10 }}
+          $justify="center"
+          $backgroundSrc={$carouselBackgroundSrc}
+        >
+          <MlCarousel
+            dots={true}
+            autoplay={true}
+            waitForAnimate={true}
+            dotPosition="bottom"
+          >
+            {carouselImages.map((elem, key) => (
+              <div key={key}>
+                <StyledCarouselImageContainer>
+                  <AtImage src={elem} preview={false} alt="Test image" />
+                </StyledCarouselImageContainer>
+              </div>
+            ))}
+          </MlCarousel>
+        </OrCol>
+      </OrRow>
+    </StyledContainer>
+  );
+};

package/stories/organisms/OrLoginLayout/styles.tsx

@@ -0,0 +1,16 @@
+import 'react';
+import { styled } from 'styled-components';
+import { gray } from '../../../theme';
+
+export const StyledContainer = styled.div`
+  & {
+    display: flex;
+    background-color: ${gray[1]};
+    height: 100vh;
+    width: 100%;
+  }
+`;
+
+export const StyledCarouselImageContainer = styled.div`
+  text-align: center;
+`;

package/stories/organisms/OrRow/OrRow.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrRow } from '.';
+import { AtButton } from '../../atoms/AtButton';
+import React from 'react';
+
+const meta = {
+  title: 'Organisms/OrRow',
+  component: OrRow,
+  tags: ['autodocs'],
+  argTypes: {
+    align: { options: ['start', 'end', 'center', 'baseline'] },
+    justify: {
+      options: [
+        'start',
+        'end',
+        'center',
+        'space-around',
+        'space-between',
+        'space-evenly',
+      ],
+    },
+    gutter: {
+      control: 'number',
+    },
+    children: {
+      control: 'none',
+    },
+  },
+} satisfies Meta<typeof OrRow>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+  },
+  render: (args) => {
+    return (
+      <OrRow {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrRow>
+    );
+  },
+};