Merge pull request #124 from Ten-Do/localization

Add the ruRU locale and refactoring a localization logic

admiral/admin/index.tsx

@@ -10,9 +10,8 @@ import { UserContextProvider } from '../auth/UserContext'
 import type { AuthProvider } from '../auth/interfaces'
 import { ConfigContextProvider } from '../config/ConfigContext'
 import { ThemePreset } from '../theme/interfaces'
-import { LocaleContextProvider } from '../crud/locale/LocaleContext'
-import { CRUDLocale } from '../crud/interfaces'
 import { OAuthProvidersEnum } from '../auth/interfaces'
+import { AdmiralLocale, LocaleContextProvider } from '../locale'
 
 export type AdminProps = {
     menu: ComponentType
@@ -23,7 +22,7 @@ export type AdminProps = {
     dataProvider: DataProvider
     authProvider?: AuthProvider
     themePresets?: { light: ThemePreset; dark: ThemePreset }
-    locale?: Partial<CRUDLocale>
+    locale?: Partial<AdmiralLocale>
     oauthProviders?: OAuthProvidersEnum[]
     baseAppUrl?: string
 }

admiral/auth/components/Login.tsx

@@ -9,15 +9,14 @@ import { useConfig } from '../../config/ConfigContext'
 import { useTheme } from '../../theme'
 import { ThemeName } from '../../theme/interfaces'
 import Icon from '../../assets/icons'
-import { useLocaleProvider } from '../../crud/locale/LocaleContext'
+import { useLocaleProvider } from '../../locale'
 import OAuthLoginComponent from './OAuthLogin'
-import { formLocale } from '../../form'
 
 export const LoginLayout: React.FC = ({ children }) => <div className={styles.wrap}>{children}</div>
 
 export const Login: React.FC = () => {
     const { themeName } = useTheme()
-    const { layout: locale } = useLocaleProvider()
+    const { auth: locale, form: formLocale } = useLocaleProvider()
     const checkAuth = useCheckAuth()
     const history = useHistory()
     const { loginLogo = LogoDefault } = useConfig()
@@ -54,8 +53,9 @@ export const Login: React.FC = () => {
                 <Form
                     submitData={submit}
                     locale={{
-                        ...formLocale.enUS,
-                        successMessage: 'You are successfully logged in',
+                        ...formLocale,
+                        successMessage: locale.notification.success,
+                        serverErrorMessage: locale.notification.error,
                     }}
                 >
                     <Form.Fields singleColumn>

admiral/auth/components/Logout.module.scss

@@ -0,0 +1,3 @@
+.logout_button {
+    width: 100%;
+}

admiral/auth/components/Logout.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useNav } from '../../navigation/NavContext'
+import { useLocaleProvider } from '../../locale'
+import { useSafeSetState } from '../../utils/hooks'
+import { Button } from '../../ui/Button'
+import useLogout from '../useLogout'
+import styles from './Logout.module.scss'
+
+export function Logout() {
+    const { toggle } = useNav()
+    const logout = useLogout()
+    const [loading, setLoading] = useSafeSetState(false)
+    const { auth: locale } = useLocaleProvider()
+
+    const onClick = () => {
+        setLoading(true)
+        return logout().finally(() => {
+            setLoading(false)
+            toggle()
+        })
+    }
+
+    return (
+        <Button
+            className={styles.logout_button}
+            type="button"
+            view="ghost"
+            loading={loading}
+            onClick={onClick}
+        >
+            {locale.logout}
+        </Button>
+    )
+}

admiral/auth/components/OAuthLogin.tsx

@@ -1,14 +1,16 @@
+import React, { useCallback } from 'react'
+import { FaGithub, FaGoogle, FaJira } from 'react-icons/fa'
 import { useAuthProvider } from '../AuthContext'
 import { useConfig } from '../../config/ConfigContext'
+import { useLocaleProvider } from '../../locale'
+import { Button } from '../../ui'
 import { OAuthProvidersEnum } from '../interfaces'
-import { FaGithub, FaGoogle, FaJira } from 'react-icons/fa'
 import styles from './Login.module.scss'
-import { Button } from '../../ui'
-import React, { useCallback } from 'react'
 
 const OAuthLoginComponent = () => {
     const authProvider = useAuthProvider()
     const oauthProviders = useConfig().oauthProviders
+    const { auth: locale } = useLocaleProvider()
 
     const OAuthProvidersIcons: Record<OAuthProvidersEnum, JSX.Element> = {
         [OAuthProvidersEnum.Google]: <FaGoogle />,
@@ -39,7 +41,7 @@ const OAuthLoginComponent = () => {
 
     return (
         <div className={styles.socialLogin}>
-            <div className={styles.socialLoginTitle}>Or continue with</div>
+            <div className={styles.socialLoginTitle}>{locale.oauth}</div>
             <div className={styles.socialLoginButtons}>
                 {oauthProviders?.map((provider) => {
                     return (

admiral/auth/interfaces.ts

@@ -35,3 +35,15 @@ export interface UserContextValue {
     user: UserContextStateValue
     setUser: React.Dispatch<React.SetStateAction<UserContextStateValue>>
 }
+
+export interface AuthLocale {
+    login: string
+    logout: string
+    oauth: string
+    password: string
+    email: string
+    notification: {
+        success: string
+        error: string
+    }
+}

admiral/auth/locale/enUS.ts

@@ -0,0 +1,13 @@
+import { AuthLocale } from '../interfaces'
+
+export const enUS: AuthLocale = {
+    login: 'Login',
+    logout: 'Exit',
+    oauth: 'Or continue with',
+    password: 'Password',
+    email: 'Email',
+    notification: {
+        success: 'You are successfully logged in',
+        error: 'Login failed',
+    },
+}

admiral/crud/locale/actions/index.ts → admiral/auth/locale/index.ts

@@ -1 +1,2 @@
 export * from './enUS'
+export * from './ruRU'

admiral/auth/locale/ruRU.ts

@@ -0,0 +1,13 @@
+import { AuthLocale } from '../interfaces'
+
+export const ruRU: AuthLocale = {
+    login: 'Войти',
+    logout: 'Выйти',
+    oauth: 'Или войти с помощью',
+    password: 'Пароль',
+    email: 'Электронная почта',
+    notification: {
+        success: 'Вы успешно вошли в систему',
+        error: 'Не удалось войти в систему',
+    },
+}

admiral/crud/index.tsx

@@ -15,7 +15,7 @@ import styles from './Crud.module.scss'
 import { PopupContainerContextProvider } from './PopupContainerContext'
 import { ColumnType } from '../ui/Table/interfaces'
 import { DeleteAction, EditAction } from '../dataTable/actions'
-import { useLocaleProvider } from './locale/LocaleContext'
+import { useLocaleProvider } from '../locale'
 import QuickFiltersWrapper from '../filters/QuickFiltersWrapper'
 
 const operationsStyle: React.CSSProperties = {

admiral/crud/interfaces.ts

@@ -1,22 +1,7 @@
 import type { ReactNode } from 'react'
-import { Locale as FormLocale } from '../form/interfaces'
-import { FiltersLocale } from '../filters/interfaces'
-import { ColumnsType, ColumnType, TableLocale } from '../ui/Table/interfaces'
-import { DrawerProps } from '../ui/Drawer/interfaces'
-import { PaginationLocale } from '../ui/Pagination/interfaces'
+import { ColumnsType, ColumnType } from '../ui/Table/interfaces'
 import { DataTableConfig } from '../dataTable'
-import { DeleteActionLocale } from '../dataTable/actions'
-import { LayoutLocale } from '../ui/Layout/interfaces'
-
-export type CRUDLocale = {
-    actions: CRUDActionsLocale
-    filters: FiltersLocale
-    form: FormLocale
-    table: TableLocale
-    pagination: PaginationLocale
-    popconfirm: DeleteActionLocale
-    layout: LayoutLocale
-}
+import { DrawerProps } from '../ui/Drawer/interfaces'
 
 export type CRUDActionsLocale = {
     submit: string

admiral/crud/locale/actions/enUS.ts → admiral/crud/locales/enUS.ts

@@ -1,4 +1,4 @@
-import { CRUDActionsLocale } from '../../interfaces'
+import { CRUDActionsLocale } from '../interfaces'
 
 export const enUS: CRUDActionsLocale = {
     submit: 'Submit',

admiral/crud/locales/index.ts

@@ -0,0 +1,2 @@
+export * from './enUS'
+export * from './ruRU'

admiral/crud/locales/ruRU.ts

@@ -0,0 +1,8 @@
+import { CRUDActionsLocale } from '../interfaces'
+
+export const ruRU: CRUDActionsLocale = {
+    submit: 'Подтвердить',
+    back: 'Назад',
+    tableColumn: 'Действия',
+    paginationTotal: (total) => `Всего ${total}`,
+}

admiral/dataTable/actions/DeleteAction.tsx

@@ -6,7 +6,7 @@ import { Button, Popconfirm, Notification } from '../../ui'
 
 import { ButtonProps } from '../../ui/Button/interfaces'
 import { PopconfirmLocale } from '../../ui/Popconfirm/interfaces'
-import { enUs } from '../locale'
+import { enUS } from '../locale'
 
 export interface DeleteActionLocale extends PopconfirmLocale {
     title: string
@@ -25,7 +25,7 @@ export const DeleteAction: React.FC<DeleteActionProps> = ({
     buttonProps,
     locale,
 }) => {
-    const { title, ...popconfirmLocale } = locale ?? enUs
+    const { title, ...popconfirmLocale } = locale ?? enUS
     const { deleteOne } = useDataProvider()
     const { refresh } = useDataTable()
 

admiral/dataTable/interfaces.ts

@@ -0,0 +1,5 @@
+import { PopconfirmLocaleType } from '../ui/Popconfirm/interfaces'
+
+export type DataTableType = {
+    title: string
+} & PopconfirmLocaleType

admiral/dataTable/locale/enUS.ts

@@ -1,11 +1,7 @@
-import { enUs as enUsPopconfirmLocale } from '../../ui/Popconfirm/locale/enUS'
-import { PopconfirmLocaleType } from '../../ui/Popconfirm/interfaces'
+import { enUS as enUsPopconfirmLocale } from '../../ui/Popconfirm/locale/enUS'
+import { DataTableType } from '../interfaces'
 
-export type DataTableType = {
-    title: string
-} & PopconfirmLocaleType
-
-export const enUs: DataTableType = {
+export const enUS: DataTableType = {
     title: 'Are you sure you want to delete?',
     ...enUsPopconfirmLocale,
 }

admiral/dataTable/locale/index.ts

@@ -1 +1,2 @@
 export * from './enUS'
+export * from './ruRU'

admiral/dataTable/locale/ruRU.ts

@@ -0,0 +1,7 @@
+import { DataTableType } from '../interfaces'
+import { ruRU as ruRuPopconfirmLocale } from '../../ui/Popconfirm/locale'
+
+export const ruRU: DataTableType = {
+    title: 'Вы уверены, что хотите удалить?',
+    ...ruRuPopconfirmLocale,
+}

admiral/filters/locale/index.ts

@@ -1 +1,2 @@
 export * from './enUS'
+export * from './ruRU'

admiral/filters/locale/ruRU.ts

@@ -0,0 +1,7 @@
+import { FiltersLocale } from '../interfaces'
+
+export const ruRU: FiltersLocale = {
+    title: 'Фильтры',
+    clear: 'Очистить все',
+    submit: 'Применить',
+}

admiral/form/fields/FilePictureInput.tsx

@@ -57,7 +57,7 @@ export const FilePictureInput: InputComponentWithName<React.FC<FilePictureInputP
                 disabled={disabled}
             >
                 <Button type="button" disabled={disabled} iconLeft={<FiUpload />}>
-                    {children || 'Upload'}
+                    {children || locale?.pictureCardUpload}
                 </Button>
             </Upload>
         </Form.Item>

admiral/form/locale/enUS.ts

@@ -1,7 +1,7 @@
 import { Locale } from '../interfaces'
-import enUsDatePickerLocale from '../../ui/DatePicker/locale/en_US'
-import { enUs as enUsSelectLocale } from '../../ui/Select/locales/enUS'
-import { enUS as enUsUploadLocale } from '../../ui/Upload/locales/enUS'
+import { enUS as enUsDatePickerLocale } from '../../ui/DatePicker/locales'
+import { enUS as enUsSelectLocale } from '../../ui/Select/locales'
+import { enUS as enUsUploadLocale } from '../../ui/Upload/locales'
 
 export const enUS: Locale = {
     fields: {

admiral/form/locale/index.ts

@@ -1 +1,2 @@
 export * from './enUS'
+export * from './ruRU'

admiral/form/locale/ruRU.ts

@@ -0,0 +1,18 @@
+import { Locale } from '../interfaces'
+import { ruRU as ruRuDatePickerLocale } from '../../ui/DatePicker/locales'
+import { ruRU as ruRuSelectLocale } from '../../ui/Select/locales'
+import { ruRU as ruRuUploadLocale } from '../../ui/Upload/locales'
+
+export const ruRU: Locale = {
+    fields: {
+        array: {
+            add: 'Добавить',
+            remove: 'Удалить',
+        },
+        datePicker: ruRuDatePickerLocale,
+        select: ruRuSelectLocale,
+        upload: ruRuUploadLocale,
+    },
+    successMessage: 'Данные успешно сохранены!',
+    serverErrorMessage: 'Произошла ошибка на сервере.',
+}

admiral/index.ts

@@ -75,6 +75,3 @@ export { createRoutesFrom } from './router'
 
 export { useTheme, useThemeVars } from './theme'
 export type { ThemeName, ThemePreset } from './theme/interfaces'
-
-export { admiralLocales } from './locales'
-export type { AdmiralLocales } from './locales'

admiral/locale/LocaleContext.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { enUS } from './locales'
+import { AdmiralLocale } from './interfaces'
+
+export const defaultLocale: AdmiralLocale = enUS
+
+export const LocaleContext = createContext<AdmiralLocale>({ ...defaultLocale })
+
+export const LocaleContextProvider: React.FC<{ value?: Partial<AdmiralLocale> }> = ({
+    value,
+    children,
+}) => {
+    const contextValue = useMemo(
+        () => (value ? { ...defaultLocale, ...value } : { ...defaultLocale }),
+        [value],
+    )
+
+    return <LocaleContext.Provider value={contextValue}>{children}</LocaleContext.Provider>
+}
+
+export function useLocaleProvider() {
+    return useContext(LocaleContext)
+}

admiral/locale/index.ts

@@ -0,0 +1,3 @@
+export * as admiralLocales from './locales'
+export * from './LocaleContext'
+export * from './interfaces'