enwawa-ui 1.0.7

package/stories/templates/TmLoginPhone/index.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  AtButton,
+  AtLogo,
+  AtNumberInput,
+  AtSelect,
+  AtTitle,
+} from '../../atoms';
+import {
+  OrSpaceCompact,
+  OrRow,
+  OrCol,
+  OrLoginLayout,
+  OrForm,
+} from '../../organisms';
+import { violet } from '../../../theme';
+import { Select, FormProps } from 'antd';
+import {
+  StyledButtonContainer,
+  StyledMainContainer,
+  StyledTitleContainer,
+} from './styles';
+import { MlFormItem } from '../../molecules';
+
+export interface IRegion {
+  id: string;
+  countryName: string;
+  region: string;
+  city: string;
+}
+
+interface IFormData {
+  region: string;
+  phone: {
+    dialCode: string;
+    phone: string;
+  };
+}
+
+export interface TmLoginPhoneProps {
+  countrySelectOptions?: IRegion[];
+  /**
+   * Images to show into carousel
+   */
+  carouselImages: string[];
+  /**
+   * Carousel image background source
+   */
+  carouselBackgroundSrc?: string;
+  /**
+   * Welcome title
+   */
+  title?: string;
+  /**
+   * Highlighted text into title
+   */
+  highlightedTitle?: string;
+  /**
+   * Submit button text
+   */
+  buttonText: string;
+  /**
+   * Form init values
+   */
+  initialValues?: IFormData;
+  /**
+   * Dial codes available
+   */
+  dialCodes: string[];
+  /**
+   * Phone regex validation
+   */
+  phoneRegex?: RegExp;
+  /**
+   * Phone validation message
+   */
+  phoneValidationMessage?: string;
+  /**
+   * On submit function
+   */
+  onFinish?: FormProps['onFinish'];
+}
+
+export const TmLoginPhone: React.FC<TmLoginPhoneProps> = ({
+  countrySelectOptions,
+  carouselImages,
+  carouselBackgroundSrc,
+  title,
+  highlightedTitle,
+  buttonText,
+  initialValues,
+  dialCodes,
+  phoneRegex,
+  phoneValidationMessage,
+  onFinish,
+}) => {
+  return (
+    <OrLoginLayout
+      carouselImages={carouselImages}
+      $carouselBackgroundSrc={carouselBackgroundSrc}
+    >
+      <OrForm
+        style={{ height: '100%' }}
+        initialValues={initialValues}
+        onFinish={onFinish}
+      >
+        <OrRow
+          gutter={[0, 20]}
+          justify={{ xs: 'center', sm: 'center', lg: 'space-between' }}
+          align={'middle'}
+        >
+          <OrCol>
+            <AtLogo color="violet" />
+          </OrCol>
+          <OrCol>
+            <MlFormItem name="region" noStyle>
+              <AtSelect size="large">
+                {countrySelectOptions?.map((elem) => (
+                  <Select.Option
+                    key={elem.id}
+                    label={elem.countryName}
+                    value={elem.region}
+                  >
+                    {elem.countryName}
+                  </Select.Option>
+                ))}
+              </AtSelect>
+            </MlFormItem>
+          </OrCol>
+        </OrRow>
+        <StyledMainContainer>
+          <OrCol $justify={'center'}>
+            <StyledTitleContainer>
+              <AtTitle>
+                {title}{' '}
+                <span style={{ color: violet[5] }}>{highlightedTitle}</span>
+              </AtTitle>
+            </StyledTitleContainer>
+            <MlFormItem>
+              <OrSpaceCompact block>
+                <MlFormItem
+                  noStyle
+                  name={['phone', 'dialCode']}
+                  rules={[{ required: true, message: 'Field is required!!' }]}
+                >
+                  <AtSelect $width="119px" size="large">
+                    {dialCodes?.map((elem) => (
+                      <Select.Option key={elem} label={elem} value={elem}>
+                        {elem}
+                      </Select.Option>
+                    ))}
+                  </AtSelect>
+                </MlFormItem>
+                <MlFormItem
+                  noStyle
+                  name={['phone', 'phone']}
+                  rules={[
+                    { required: true, message: 'Field is required' },
+                    { pattern: phoneRegex, message: phoneValidationMessage },
+                  ]}
+                >
+                  <AtNumberInput $width="100%" size="large" controls={false} />
+                </MlFormItem>
+              </OrSpaceCompact>
+            </MlFormItem>
+            <StyledButtonContainer>
+              <MlFormItem noStyle>
+                <AtButton
+                  block
+                  type="primary"
+                  size="large"
+                  value={buttonText}
+                  htmlType="submit"
+                />
+              </MlFormItem>
+            </StyledButtonContainer>
+          </OrCol>
+        </StyledMainContainer>
+      </OrForm>
+    </OrLoginLayout>
+  );
+};
+
+TmLoginPhone.defaultProps = {
+  countrySelectOptions: [],
+  carouselImages: [],
+  phoneRegex: new RegExp(
+    /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im,
+  ),
+  phoneValidationMessage: 'This field must be a phone',
+};

package/stories/templates/TmLoginPhone/styles.tsx

@@ -0,0 +1,31 @@
+import 'react';
+import { styled } from 'styled-components';
+import { gray } from '../../../theme';
+
+export const StyledContainer = styled.div`
+  & {
+    display: flex;
+    background-color: ${gray[1]};
+    height: 100vh;
+  }
+`;
+
+export const StyledMainContainer = styled.div`
+  max-width: 365px;
+  margin-right: auto;
+  margin-left: auto;
+  height: 100%;
+  display: flex;
+`;
+
+export const StyledTitleContainer = styled.div`
+  margin-bottom: 45px;
+`;
+
+export const StyledButtonContainer = styled.div`
+  margin-top: 5px;
+`;
+
+export const StyledCarouselImageContainer = styled.div`
+  text-align: center;
+`;

package/stories/templates/index.ts

@@ -0,0 +1,2 @@
+export * from './TmLoginCountry';
+export * from './TmLoginPhone';

package/theme.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { ConfigProvider } from 'antd';
+import { generate } from '@ant-design/colors';
+import { PRIMARY_COLOR } from './constants';
+import '@fontsource/ibm-plex-sans/500.css';
+import '@fontsource/ibm-plex-sans/700.css';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const violet = generate(PRIMARY_COLOR);
+export const gray = [
+  '#ffffff',
+  '#fafafa',
+  '#f5f5f5',
+  '#f0f0f0',
+  '#d9d9d9',
+  '#bfbfbf',
+  '#8c8c8c',
+  '#595959',
+  '#434343',
+  '#262626',
+  '#1f1f1f',
+  '#141414 ',
+  '#000000',
+];
+
+export const WaWaThemeProvider: React.FC<Props> = ({ children }) => {
+  const violetColor = useMemo(() => violet, [violet]);
+
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          token: {
+            fontFamily: 'IBM Plex sans',
+            colorPrimary: violetColor[5],
+            colorLink: violet[5],
+            colorLinkHover: violet[6],
+            colorLinkActive: violet[5],
+          },
+          components: {
+            Select: {
+              colorBgContainer: gray[2],
+            },
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default WaWaThemeProvider;

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "dist",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "declaration": true,
+    "declarationDir": "lib",
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react",
+  },
+  "include": [
+    "src/**/*",
+    "index.ts",
+    "rollup.config.mjs",
+    "theme.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ],
+  "files": [
+    "placeholder.ts"
+  ],
+}