enwawa-ui 1.0.7

package/stories/organisms/OrRow/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Gutter } from 'antd/es/grid/row';
+import { StyledRow } from './styles';
+import { RowProps } from 'antd';
+
+export interface OrRowProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+
+  /**
+   * Vertical alignment
+   */
+  align?: RowProps['align'];
+  /**
+   * Container background source
+   */
+  $backgroundSrc?: string;
+  /**
+   * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]
+   */
+  gutter?: Gutter | object | [Gutter, Gutter];
+  /**
+   * Horizontal arrangement
+   */
+  justify?: RowProps['justify'];
+  /**
+   * Auto wrap line
+   */
+  wrap?: boolean;
+  /**
+   * Children of OrRow
+   */
+  children?: React.ReactElement | React.ReactElement[];
+  /**
+   * 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 OrRow: React.FC<OrRowProps> = (props) => {
+  return <StyledRow {...props}>{props.children}</StyledRow>;
+};
+
+OrRow.defaultProps = {
+  align: 'top',
+  gutter: 0,
+  justify: 'start',
+  wrap: true,
+};

package/stories/organisms/OrRow/styles.ts

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components';
+import { OrRowProps } from '.';
+import { Row } from 'antd';
+
+export const StyledRow = styled(Row)<OrRowProps>`
+  ${({ $backgroundSrc }) =>
+    $backgroundSrc ? `background-image: url(${$backgroundSrc})` : ''};
+  object-fit: cover;
+  ${({ $paddingTop }) => ($paddingTop ? `padding-top: ${$paddingTop}px` : '')};
+  ${({ $paddingBottom }) =>
+    $paddingBottom ? `padding-bottom: ${$paddingBottom}px` : ''};
+  ${({ $paddingRight }) =>
+    $paddingRight ? `padding-right: ${$paddingRight}px` : ''};
+  ${({ $paddingLeft }) =>
+    $paddingLeft ? `padding-left: ${$paddingLeft}px` : ''};
+  ${({ $paddingVertical }) =>
+    $paddingVertical
+      ? `padding-top: ${$paddingVertical}px; padding-bottom: ${$paddingVertical}px`
+      : ''};
+  ${({ $paddingHorizontal }) =>
+    $paddingHorizontal
+      ? `padding-left: ${$paddingHorizontal}px; padding-right: ${$paddingHorizontal}px`
+      : ''};
+`;

package/stories/organisms/OrSider/index.tsx

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

package/stories/organisms/OrSimpleBanner/OrSimpleBanner.stories.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrSimpleBanner } from '.';
+import defaultBackground from '../../assets/backgrounds/bg-1.png';
+const meta = {
+  title: 'Organisms/OrSimpleBanner',
+  component: OrSimpleBanner,
+  tags: ['autodocs'],
+} satisfies Meta<typeof OrSimpleBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: '1',
+    $backgroundSrc: defaultBackground,
+  },
+};

package/stories/organisms/OrSimpleBanner/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AtLogo } from '../../atoms';
+import { OrRow } from '../OrRow';
+import { LogoContainer, StyledHeader } from './styles';
+export interface OrSimpleBannerProps {
+  /**
+   * Id of the OrSimpleBannerProps
+   */
+  id?: string;
+  /**
+   * Background image for banner
+   */
+  $backgroundSrc?: string;
+}
+
+export const OrSimpleBanner: React.FC<OrSimpleBannerProps> = (props) => {
+  return (
+    <StyledHeader>
+      <OrRow justify={'center'} {...props}>
+        <LogoContainer>
+          <AtLogo color={props.$backgroundSrc ? 'white' : 'violet'} />
+        </LogoContainer>
+      </OrRow>
+    </StyledHeader>
+  );
+};

package/stories/organisms/OrSimpleBanner/styles.ts

@@ -0,0 +1,12 @@
+import { styled } from 'styled-components';
+import { OrHeader } from '../OrHeader';
+
+export const LogoContainer = styled.div`
+  padding-top: 69px;
+  padding-bottom: 69px;
+`;
+
+export const StyledHeader = styled(OrHeader)`
+  height: auto;
+  padding-inline: 0;
+`;

package/stories/organisms/OrSpace/OrSpace.stories.tsx

@@ -0,0 +1,169 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OrSpace } from '.';
+import { AtButton } from '../../atoms/AtButton';
+import React, { CSSProperties } from 'react';
+
+const meta = {
+  title: 'Organisms/OrSpace',
+  component: OrSpace,
+  tags: ['autodocs'],
+  argTypes: {
+    align: { options: ['start', 'end', 'center', 'baseline'] },
+    direction: { options: ['vertical', 'horizontal'] },
+    size: { options: ['small', 'middle', 'large', 1, 2, 3, 5, 8] },
+  },
+} satisfies Meta<typeof OrSpace>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    id: '1',
+  },
+  render: (args) => {
+    return (
+      <OrSpace {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpace>
+    );
+  },
+};
+
+const alignStyles: CSSProperties = {
+  flex: 'none',
+  margin: '8px 4px',
+  padding: '4px',
+  border: '1px solid #40a9ff',
+};
+
+const mockBlock: CSSProperties = {
+  display: 'inline-block',
+  padding: '32px 8px 16px',
+  background: 'rgba(150, 150, 150, 0.2)',
+};
+
+export const AlignEnd: Story = {
+  args: {
+    id: '1',
+    align: 'end',
+  },
+  render: (args) => {
+    return (
+      <div style={alignStyles}>
+        <OrSpace {...args}>
+          <>
+            {new Array(5).fill(null).map((_, index) => (
+              <AtButton key={index} value={`AtButton-${index}`} />
+            ))}
+            <span style={mockBlock}>Block</span>
+          </>
+        </OrSpace>
+      </div>
+    );
+  },
+};
+
+export const AlignCenter: Story = {
+  args: {
+    id: '1',
+    align: 'center',
+  },
+  render: (args) => {
+    return (
+      <div style={alignStyles}>
+        <OrSpace {...args}>
+          <>
+            {new Array(5).fill(null).map((_, index) => (
+              <AtButton key={index} value={`AtButton-${index}`} />
+            ))}
+            <span style={mockBlock}>Block</span>
+          </>
+        </OrSpace>
+      </div>
+    );
+  },
+};
+export const AlignBaseLine: Story = {
+  args: {
+    id: '1',
+    align: 'baseline',
+  },
+  render: (args) => {
+    return (
+      <div style={alignStyles}>
+        <OrSpace {...args}>
+          <>
+            {new Array(5).fill(null).map((_, index) => (
+              <AtButton key={index} value={`AtButton-${index}`} />
+            ))}
+            <span style={mockBlock}>Block</span>
+          </>
+        </OrSpace>
+      </div>
+    );
+  },
+};
+export const Vertical: Story = {
+  args: {
+    id: '1',
+    direction: 'vertical',
+  },
+  render: (args) => {
+    return (
+      <OrSpace {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpace>
+    );
+  },
+};
+export const Middle: Story = {
+  args: {
+    id: '1',
+    size: 'middle',
+  },
+  render: (args) => {
+    return (
+      <OrSpace {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpace>
+    );
+  },
+};
+export const Large: Story = {
+  args: {
+    id: '1',
+    size: 'large',
+  },
+  render: (args) => {
+    return (
+      <OrSpace {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpace>
+    );
+  },
+};
+export const Wrap: Story = {
+  args: {
+    id: '1',
+    wrap: true,
+  },
+  render: (args) => {
+    return (
+      <OrSpace {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpace>
+    );
+  },
+};

package/stories/organisms/OrSpace/index.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import { Space, SpaceProps } from 'antd';
+
+export interface AtSpaceProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Align items
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline';
+  /**
+   * The space direction
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * The space size
+   */
+  size?: SpaceProps['size'];
+  /**
+   * Set split
+   */
+  split?: ReactNode;
+  /**
+   * Auto wrap line, when horizontal effective
+   */
+  wrap?: boolean;
+  /**
+   * Children of the OrSpace
+   */
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+export const OrSpace: React.FC<AtSpaceProps> = (props) => {
+  return <Space {...props}>{props.children}</Space>;
+};
+
+OrSpace.defaultProps = {
+  direction: 'horizontal',
+  size: 'small',
+  wrap: false,
+};

package/stories/organisms/OrSpaceCompact/OrSpaceCompact.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { OrSpaceCompact } from '.';
+import { AtButton } from '../../atoms/AtButton';
+
+const meta = {
+  title: 'Organisms/OrSpaceCompact',
+  component: OrSpaceCompact,
+  tags: ['autodocs'],
+  argTypes: {
+    direction: { options: ['vertical', 'horizontal'] },
+    size: { options: ['small', 'middle', 'large'] },
+  },
+} satisfies Meta<typeof OrSpaceCompact>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <OrSpaceCompact {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpaceCompact>
+    );
+  },
+  args: {
+    id: '1',
+  },
+};
+
+export const Block: Story = {
+  render: (args) => {
+    return (
+      <OrSpaceCompact {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpaceCompact>
+    );
+  },
+  args: {
+    id: '1',
+    block: true,
+  },
+};
+export const Vertical: Story = {
+  render: (args) => {
+    return (
+      <OrSpaceCompact {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpaceCompact>
+    );
+  },
+  args: {
+    id: '1',
+    direction: 'vertical',
+  },
+};
+export const Large: Story = {
+  render: (args) => {
+    return (
+      <OrSpaceCompact {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpaceCompact>
+    );
+  },
+  args: {
+    id: '1',
+    size: 'large',
+  },
+};
+export const Small: Story = {
+  render: (args) => {
+    return (
+      <OrSpaceCompact {...args}>
+        {new Array(5).fill(null).map((_, index) => (
+          <AtButton key={index} value={`AtButton-${index}`} />
+        ))}
+      </OrSpaceCompact>
+    );
+  },
+  args: {
+    id: '1',
+    size: 'small',
+  },
+};

package/stories/organisms/OrSpaceCompact/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Space } from 'antd';
+
+export interface AtSpaceCompactProps {
+  /**
+   * The ID for input
+   */
+  id?: string;
+  /**
+   * Option to fit width to its parent's width
+   */
+  block?: boolean;
+  /**
+   * Set direction of layout
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * Set child component size
+   */
+  size?: 'large' | 'middle' | 'small';
+  /**
+   * Children of the OrSpace
+   */
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+export const OrSpaceCompact: React.FC<AtSpaceCompactProps> = (props) => {
+  return <Space.Compact {...props}>{props.children}</Space.Compact>;
+};
+
+OrSpaceCompact.defaultProps = {
+  block: false,
+  direction: 'horizontal',
+  size: 'middle',
+};

package/stories/organisms/index.ts

@@ -0,0 +1,14 @@
+export * from './OrAlert';
+export * from './OrCol';
+export * from './OrContent';
+export * from './OrCountryCard';
+export * from './OrFlagGrid';
+export * from './OrFrom';
+export * from './OrHeader';
+export * from './OrLayout';
+export * from './OrLoginLayout';
+export * from './OrRow';
+export * from './OrSider';
+export * from './OrSimpleBanner';
+export * from './OrSpace';
+export * from './OrSpaceCompact';

package/stories/templates/TmLoginCountry/TmLoginCountry.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TmLoginCountry } from '.';
+import defaultBackground from '../../assets/backgrounds/bg-1.png';
+
+const meta = {
+  title: 'Templates/TmLoginCountry',
+  component: TmLoginCountry,
+  tags: ['autodocs'],
+} satisfies Meta<typeof TmLoginCountry>;
+
+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,
+    $backgroundSrc: defaultBackground,
+    title: 'Selecciona tu país o región',
+  },
+};

package/stories/templates/TmLoginCountry/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { OrFlagGrid } from '../../organisms/OrFlagGrid';
+import { AtTitle } from '../../atoms';
+import { StyledContainer } from './styles';
+import { OrCountryCardProps } from '../../organisms/OrCountryCard';
+import { OrSimpleBanner } from '../../organisms/OrSimpleBanner';
+import { OrRow, OrCol, OrContent } from '../../organisms';
+export interface TmLoginCountryProps {
+  /**
+   * The ID for cards
+   */
+  id?: string;
+  data?: OrCountryCardProps[];
+  title?: string;
+  itemsPerRow?: number;
+  $backgroundSrc?: string;
+  /**
+   * Index selected Item
+   */
+  selectedItem?: number;
+  /**
+   * Callback when card is clicked
+   */
+  onSelectCard?: (index: number) => void;
+}
+
+export const TmLoginCountry: React.FC<TmLoginCountryProps> = ({
+  data,
+  $backgroundSrc,
+  itemsPerRow,
+  id,
+  title,
+  selectedItem,
+  onSelectCard,
+}) => {
+  return (
+    <StyledContainer id={id}>
+      <OrSimpleBanner $backgroundSrc={$backgroundSrc} />
+      <OrContent>
+        <OrRow justify={'center'} gutter={[0, 16]}>
+          <OrCol span={24}>
+            <AtTitle level={2}>{title}</AtTitle>
+          </OrCol>
+          <OrCol span={16}>
+            <OrRow justify={'center'}>
+              <OrFlagGrid
+                data={data}
+                itemsPerRow={itemsPerRow}
+                selectedItem={selectedItem}
+                onSelectCard={onSelectCard}
+              />
+            </OrRow>
+          </OrCol>
+        </OrRow>
+      </OrContent>
+    </StyledContainer>
+  );
+};
+
+TmLoginCountry.defaultProps = {
+  data: [],
+  itemsPerRow: 2,
+};

package/stories/templates/TmLoginCountry/styles.tsx

@@ -0,0 +1,14 @@
+import 'react';
+import { styled } from 'styled-components';
+import { gray } from '../../../theme';
+import { OrLayout } from '../../organisms';
+
+export const StyledContainer = styled(OrLayout)`
+  & {
+    background-color: ${gray[1]};
+    min-height: 100vh;
+  }
+  & h2 {
+    text-align: center;
+  }
+`;

package/stories/templates/TmLoginPhone/TmLoginPhone.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TmLoginPhone } from '.';
+import defaultBackground from '../../assets/backgrounds/bg-1.png';
+import defaultCarouselImage from '../../assets/carousel/login/1st.png';
+
+const meta = {
+  title: 'Templates/TmLoginPhone',
+  component: TmLoginPhone,
+  tags: ['autodocs'],
+} satisfies Meta<typeof TmLoginPhone>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    countrySelectOptions: [
+      {
+        id: '1',
+        region: 've',
+        countryName: 'Venezuela',
+        city: 'Caracas',
+      },
+      {
+        id: '2',
+        region: 'co',
+        countryName: 'Colombia',
+        city: 'Barranquilla',
+      },
+    ],
+    dialCodes: ['+58', '+57'],
+    carouselImages: [
+      defaultCarouselImage,
+      defaultCarouselImage,
+      defaultCarouselImage,
+    ],
+    carouselBackgroundSrc: defaultBackground,
+    title: 'Bienvenido a nuestra',
+    highlightedTitle: 'plataforma',
+    buttonText: 'Continuar',
+    initialValues: {
+      phone: {
+        dialCode: '+58',
+        phone: '',
+      },
+      region: 've',
+    },
+  },
+};