wini-web-components 2.8.5 → 2.8.6

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

@@ -1,80 +0,0 @@
-.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

@@ -1,138 +0,0 @@
-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/index.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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 }