wini-web-components 2.8.2 → 2.8.4

package/src/form/login/view.module.css

@@ -0,0 +1,80 @@
+.login-view-container {
+    gap: 4.8rem;
+    align-items: center;
+    min-width: 320px;
+    max-width: 460px;
+}
+
+.login-view-form-container {
+    gap: 2rem;
+    align-items: inherit;
+    width: 100%;
+}
+
+.login-view-form-container>div:last-child {
+    padding: 0.4rem 3.2rem;
+    gap: inherit;
+    align-items: inherit;
+    width: 100%;
+}
+
+.login-view-form-container>div:last-child>div {
+    width: 100%;
+}
+
+button.login-btn {
+    height: 4.8rem;
+    width: 100%;
+    justify-content: center;
+    background-color: var(--primary-main-color);
+    color: var(--neutral-text-stable-color);
+}
+
+button:disabled.login-btn {
+    background-color: var(--neutral-disable-background-color);
+    color: var(--neutral-text-disabled-color);
+    cursor: context-menu;
+}
+
+.forgot-password-btn {
+    color: var(--neutral-text-subtitle-color);
+}
+
+.forgot-password-btn:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.register-btn:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.login-social-media {
+    gap: 1.6rem;
+    flex-wrap: wrap;
+}
+
+.login-social-media>button {
+    height: 4.8rem;
+    width: calc((100% - 1.6rem) / 2);
+    gap: 1.6rem;
+    justify-content: center;
+    border: var(--neutral-bolder-border);
+    background-color: transparent;
+}
+
+.or-spacing {
+    gap: 1.2rem;
+}
+
+.or-spacing>div:nth-child(odd) {
+    height: 1px;
+    width: 100%;
+    flex: 1;
+    background-color: var(--neutral-text-body-reverse-color);
+}
+
+.or-spacing>div:nth-child(even) {
+    color: var(--neutral-text-subtitle-color);
+}

package/src/form/login/view.tsx

@@ -0,0 +1,138 @@
+import React, { CSSProperties } from 'react'
+import { Button, Text, TextField, Winicon } from '../../index'
+import styles from './view.module.css'
+import { FieldValues, useForm, UseFormReturn } from 'react-hook-form'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+    logo: React.ReactNode | string,
+    formData: {
+        "username": { label: string, name: string, prefix?: React.ReactNode, onValidate?: React.FocusEventHandler<HTMLInputElement>, maxLength?: number },
+        "password": { label: string, name: string, prefix?: React.ReactNode, onValidate?: React.FocusEventHandler<HTMLInputElement>, maxLength?: number },
+    },
+    onSubmit?: (data: FieldValues, methods?: UseFormReturn<any>) => void,
+    title?: string,
+    orText?: string,
+    methods?: UseFormReturn<any>,
+    buttonLoginLabel?: string,
+    loginWithGoogle?: React.MouseEventHandler<HTMLButtonElement>,
+    loginWithFacebook?: React.MouseEventHandler<HTMLButtonElement>,
+    loginWithApple?: React.MouseEventHandler<HTMLButtonElement>,
+    loginWithMicrosoft?: React.MouseEventHandler<HTMLButtonElement>,
+    onRegister?: React.MouseEventHandler<HTMLDivElement>,
+    registerPrefixText?: string,
+    registerText?: string,
+    forgotPasswordText?: string,
+    onForgotPassword?: React.MouseEventHandler<HTMLDivElement>,
+    style?: CSSProperties,
+    className?: string,
+    id?: string
+}
+
+export function WLoginView(props: Props) {
+    const methods = useForm<any>({ shouldFocusError: false })
+    const [isShowPass, setShowPass] = useState(false)
+    const { t } = useTranslation()
+
+    const _onSubmit = (ev: FieldValues) => {
+        if (props.onSubmit) props.onSubmit(ev, methods)
+    }
+
+    return <form id={props.id} className={`col login-view-container ${styles['login-view-container']} ${props.className ?? ''}`} style={props.style}>
+        {typeof props.logo === "string" ? <img alt='logo' src={props.logo} height={"36rem"} /> : props.logo}
+        <div className={`col login-view-form-container ${styles['login-view-form-container']}`}>
+            <Text className='heading-4'>{props.title ?? `${t("loginTo")} Wini`}</Text>
+            <div className='col'>
+                <div className='col' style={{ gap: "0.8rem", overflow: "visible" }}>
+                    <Text className='label-3'>{props.formData.username.label ?? t("username")}</Text>
+                    <TextField
+                        autoComplete='username'
+                        className="placeholder-2"
+                        placeholder={props.formData.username.label}
+                        style={{ height: "4.8rem" }}
+                        prefix={props.formData.username.prefix}
+                        name={props.formData.username.name}
+                        register={(props.methods ?? methods).register(props.formData.username.name, {
+                            onChange: (ev) => { ev.target.value = ev.target.value.trim() },
+                            onBlur: props.formData.username.onValidate
+                        }) as any}
+                        onComplete={(ev: any) => { ev.target.blur() }}
+                        helperText={(props.methods ?? methods).formState.errors?.[props.formData.username.name]?.message as any}
+                    />
+                </div>
+                <div className='col' style={{ gap: "0.8rem", overflow: "visible" }}>
+                    <Text className='label-3'>{props.formData.password.label ?? t("password")}</Text>
+                    <TextField
+                        autoComplete='current-password'
+                        className="placeholder-2"
+                        placeholder={props.formData.password.label}
+                        style={{ height: "4.8rem" }}
+                        prefix={props.formData.password.prefix}
+                        suffix={<button type='button' onClick={() => { setShowPass(!isShowPass) }}><Winicon src={`outline/user interface/${isShowPass ? "view" : "hide"}`} size={"1.6rem"} /></button>}
+                        name={props.formData.password.name}
+                        type={isShowPass ? "text" : "password"}
+                        register={(props.methods ?? methods).register(props.formData.password.name, {
+                            onChange: (ev) => { ev.target.value = ev.target.value.trim() },
+                            onBlur: props.formData.password.onValidate
+                        }) as any}
+                        onComplete={(ev: any) => {
+                            if ((props.methods ?? methods).watch(props.formData.password.name)?.length) {
+                                ev.target.blur()
+                                if (!props.formData.password.onValidate && props.onSubmit) _onSubmit((props.methods ?? methods).getValues())
+                            } else ev.target.blur()
+                        }}
+                        helperText={(props.methods ?? methods).formState.errors?.[props.formData.password.name]?.message as any}
+                    />
+                </div>
+                <Text className={`button-text-3 ${styles['forgot-password-btn']}`} onClick={props.onForgotPassword}>{props.forgotPasswordText ?? t("forgotPassword")}</Text>
+                <div className='col' style={{ gap: "1.6rem" }}>
+                    <Button
+                        disabled={(props.methods ?? methods).watch(props.formData.username.name)?.length && (props.methods ?? methods).watch(props.formData.password.name)?.length ? false : true}
+                        className={`button-text-1 ${styles['login-btn']}`}
+                        onClick={props.onSubmit && (props.methods ?? methods).handleSubmit(_onSubmit)}
+                        label={props.buttonLoginLabel ?? t("login")}
+                    />
+                    <div className='row' style={{ justifyContent: "center", gap: "0.4rem" }}>
+                        <Text className='label-4'>{props.registerPrefixText ?? t("dontHaveAccount")}</Text>
+                        <Text className={`button-text-3 ${styles['register-btn']}`} onClick={props.onRegister}>{props.registerText ?? `${t("signupFor")} Wini`}</Text>
+                    </div>
+                </div>
+                {(props.loginWithGoogle || props.loginWithFacebook || props.loginWithApple || props.loginWithMicrosoft) ?
+                    <>
+                        <div className={`row ${styles['or-spacing']}`}>
+                            <div />
+                            <Text className="label-4">{props.orText ?? t("or")}</Text>
+                            <div />
+                        </div>
+                        <div className={`row ${styles['login-social-media']}`}>
+                            {props.loginWithGoogle && <Button
+                                className={`label-1`}
+                                onClick={props.loginWithGoogle}
+                                prefix={<Winicon src='color/social media/google' size={"2rem"} />}
+                                label="Google"
+                            />}
+                            {props.loginWithFacebook && <Button
+                                className={`label-1`}
+                                onClick={props.loginWithFacebook}
+                                prefix={<Winicon src='color/social media/logo-facebook' size={"2rem"} />}
+                                label="Facebook"
+                            />}
+                            {props.loginWithApple && <Button
+                                className={`label-1`}
+                                onClick={props.loginWithApple}
+                                prefix={<Winicon src='color/development/apple' size={"2rem"} />}
+                                label="Apple"
+                            />}
+                            {props.loginWithMicrosoft && <Button
+                                className={`label-1`}
+                                onClick={props.loginWithMicrosoft}
+                                prefix={<Winicon src='color/development/microsoft' size={"2rem"} />}
+                                label="Microsoft"
+                            />}
+                        </div>
+                    </> : null}
+            </div>
+        </div>
+    </form>
+}

package/src/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css' {
+    const content: { [className: string]: string };
+    export default content;
+  }
+  

package/src/index.tsx

@@ -0,0 +1,66 @@
+import { Checkbox } from './component/checkbox/checkbox'
+import { Select1, OptionsItem } from './component/select1/select1'
+import { Switch } from './component/switch/switch'
+import { showPopup, closePopup, Popup } from './component/popup/popup'
+import { showDialog, Dialog, DialogAlignment } from './component/dialog/dialog'
+import { DateTimePicker } from './component/date-time-picker/date-time-picker'
+import { SelectMultiple } from './component/input-multi-select/input-multi-select'
+import { ProgressBar } from './component/progress-bar/progress-bar'
+import { ComponentStatus, getStatusIcon } from './component/component-status'
+import { Text } from './component/text/text'
+import { Pagination } from './component/pagination/pagination'
+import { Table, TbCell, TbHeader, TbRow, TbBody, CellAlignItems } from './component/table/table'
+import { TextField } from './component/text-field/text-field'
+import { RadioButton } from './component/radio-button/radio-button'
+import { TextArea } from './component/text-area/text-area'
+import { ImportFile } from './component/import-file/import-file'
+import { ToastMessage } from './component/toast-noti/toast-noti'
+import { Calendar } from './component/calendar/calendar'
+import { InfiniteScroll } from './component/infinite-scroll/infinite-scroll'
+import { Rating } from './component/rating/rating'
+import { ProgressCircle } from './component/progress-circle/progress-circle'
+import { Carousel } from './component/carousel/carousel'
+import { ToastContainer } from 'react-toastify'
+import { Button } from './component/button/button'
+import { Tag } from './component/tag/tag'
+import { Winicon } from './component/wini-icon/winicon'
+import { NumberPicker } from './component/number-picker/number-picker'
+import { InputOtp } from './component/input-otp/input-otp'
+import { WLoginView } from './form/login/view'
+import { CustomCkEditor5 } from './component/ck-editor/ckeditor'
+
+
+export {
+  Calendar,
+  ComponentStatus,
+  getStatusIcon,
+  Checkbox,
+  Select1, Switch,
+  Popup, showPopup, closePopup,
+  Dialog, showDialog, DialogAlignment,
+  DateTimePicker,
+  SelectMultiple,
+  ProgressBar,
+  Text,
+  Pagination,
+  Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems,
+  TextField,
+  RadioButton,
+  TextArea,
+  ImportFile,
+  ToastMessage,
+  InfiniteScroll,
+  Rating,
+  ProgressCircle,
+  Carousel,
+  ToastContainer,
+  Button,
+  Tag,
+  Winicon,
+  NumberPicker,
+  InputOtp,
+  WLoginView,
+  CustomCkEditor5
+}
+export type { OptionsItem }
+export { i18n } from './language/i18n';

package/src/language/i18n.tsx

@@ -0,0 +1,143 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Translation resources
+const resources = {
+    en: {
+        translation: {
+            su: 'Su',
+            mo: "Mo",
+            tu: "Tu",
+            we: "We",
+            th: "Th",
+            fr: "Fr",
+            sa: "Sa",
+            yesterday: "Yesterday",
+            lastWeek: "Last week",
+            lastMonth: "Last month",
+            lastYear: "Last year",
+            january: "January",
+            february: "February",
+            march: "March",
+            april: "April",
+            may: "May",
+            june: "June",
+            july: "July",
+            august: "August",
+            september: "September",
+            october: "October",
+            november: "November",
+            december: "December",
+            today: "Today",
+            apply: "Apply",
+            cancel: "Cancel",
+            submit: "Submit",
+            limitFileError: "File {{file.name}} exceeds the maximum size of {{sizeTitle}}",
+            limitFileWarning: "File size should not exceed {{sizeTitle}}.",
+            uploadFileAction: 'Click or drag and drop to upload file',
+            file: "File",
+            remove: "Remove",
+            choose: "Choose",
+            select: "Select",
+            add: "Add",
+            all: "All",
+            noResultFound: "No result found",
+            ofItems: "of {{totalItem}} items",
+            page: "Page",
+            go: "Go to",
+            or: "Or",
+            username: "Username",
+            password: "Password",
+            dontHaveAccount: "Don't have an account?",
+            forgotPassword: "Forgot your password?",
+            login: "Log in",
+            loginTo: "Log in to",
+            signup: "Sign up",
+            signupFor: "Sign up for",
+            "start-date": "Start date",
+            "end-date": "End date",
+            reset: "Reset",
+            date: "Date",
+            on: "On",
+            daily: "Daily",
+            weekly: "Weekly",
+            monthly: "Monthly",
+            last: "Last",
+        },
+    },
+    vi: {
+        translation: {
+            su: 'CN',
+            mo: "T2",
+            tu: "T3",
+            we: "T4",
+            th: "T5",
+            fr: "T6",
+            sa: "T7",
+            yesterday: "Hôm qua",
+            lastWeek: "Tuần trước",
+            lastMonth: "Tháng trước",
+            lastYear: "Năm trước",
+            january: "Tháng 1",
+            february: "Tháng 2",
+            march: "Tháng 3",
+            april: "Tháng 4",
+            may: "Tháng 5",
+            june: "Tháng 6",
+            july: "Tháng 7",
+            august: "Tháng 8",
+            september: "Tháng 9",
+            october: "Tháng 10",
+            november: "Tháng 11",
+            december: "Tháng 12",
+            today: "Hôm nay",
+            apply: "Áp dụng",
+            cancel: "Hủy",
+            submit: "Xác nhận",
+            limitFileError: "Tệp {{name}} vượt quá dung lượng tối đa {{sizeTitle}}",
+            limitFileWarning: "Tệp không được vượt quá {{sizeTitle}}.",
+            uploadFileAction: 'Nhấn hoặc kéo vào để tải tệp lên',
+            file: "Tệp",
+            remove: "Xóa",
+            choose: "Chọn",
+            select: "Chọn",
+            add: "Thêm",
+            all: "Tất cả",
+            noResultFound: "Không tìm thấy kết quả",
+            ofItems: "trên {{totalItem}} kết quả",
+            page: "Trang",
+            go: "Đi tới",
+            or: "Hoặc",
+            username: "Tên đăng nhập",
+            password: "Mật khẩu",
+            dontHaveAccount: "Chưa có tài khoản?",
+            forgotPassword: "Quên mật khẩu?",
+            login: "Đăng nhập",
+            loginTo: "Đăng nhập vào",
+            signup: "Đăng ký",
+            signupFor: "Đăng ký",
+            "start-date": "Ngày bắt đầu",
+            "end-date": "Ngày kết thúc",
+            reset: "Mặc định",
+            date: "Ngày",
+            on: "Vào",
+            daily: "Hàng ngày",
+            weekly: "Hàng tuần",
+            monthly: "Hàng tháng",
+            last: "Cuối tháng",
+        },
+    },
+}
+
+// Initialize i18n
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'en', // Default language
+    fallbackLng: 'en', // Fallback language
+    // backend: {loadPath: "somevariables"},
+    interpolation: {
+        escapeValue: false, // React already escapes values
+    },
+})
+
+export { i18n }