From d88c2ede9db1dd68edefcdd512817fc31aec5cd8 Mon Sep 17 00:00:00 2001 From: behnamrhp Date: Sat, 23 Nov 2024 17:57:59 +0300 Subject: [PATCH] Add i18n to storyboo --- .storybook/preview.tsx | 46 +++++++++++++++++++++++----- src/app/[lang]/dashboard/page.tsx | 4 +-- src/app/[lang]/layout.tsx | 4 +-- src/app/components/button/button.tsx | 1 - src/bootstrap/i18n/i18n-provider.tsx | 13 ++++---- src/bootstrap/i18n/i18n.ts | 26 ++++++++-------- 6 files changed, 63 insertions(+), 31 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 536f2e2..dc1dbaa 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,13 +1,13 @@ -import type { Preview } from "@storybook/react"; -import React from "react"; +import React, { useRef } from "react"; import { themes } from '@storybook/theming'; import { ThemeProvider } from "../src/app/[lang]/dashboard/components/client/theme-provider/theme-provider"; import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; +import { initI18next, LANGS } from "../src/bootstrap/i18n/i18n" import { addons } from '@storybook/preview-api'; -import "../src/app/globals.css" - - +import { i18n } from "i18next"; +import { I18nextProvider } from "react-i18next"; const channel = addons.getChannel(); +import "../src/app/globals.css" /** * * This function will expand the object with nested properties @@ -46,8 +46,9 @@ const preview = { decorators: [ (Story, data) => { const [isDark, setDark] = React.useState(true); - + const [i18n, setI18n] = React.useState() const parsedProps = {} as Record; + const { locale } = data.globals const props = data.allArgs; Object.entries(props).forEach((prop) => { const [key, value] = prop; @@ -66,6 +67,15 @@ const preview = { return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); }, [channel, setDark]); + React.useEffect(() => { + (async () => { + setI18n((await initI18next({ lng: locale })).i18n); + })() + }, []) + + React.useEffect(() => { + i18n?.changeLanguage(locale); + }, [locale]); return ( - + { + i18n && ( + + + + ) + } ); }, @@ -97,6 +115,20 @@ const preview = { }, }, }, + globalTypes: { + locale: { + name: 'Locale', + description: 'Internationalization locale', + toolbar: { + icon: 'globe', + items: [ + { value: LANGS.EN, title: 'English' }, + { value: LANGS.RU, title: 'Russian' }, + ], + showName: true, + }, + }, + } }; export default preview; diff --git a/src/app/[lang]/dashboard/page.tsx b/src/app/[lang]/dashboard/page.tsx index f9f980f..ea09ada 100644 --- a/src/app/[lang]/dashboard/page.tsx +++ b/src/app/[lang]/dashboard/page.tsx @@ -6,11 +6,11 @@ import CardWrapper from "@/app/[lang]/dashboard/components/server/cards/cards"; import LatestInvoices from "@/app/[lang]/dashboard/components/server/latest-invoices/latest-invoices"; import RevenueChart from "@/app/[lang]/dashboard/components/server/revenue-chart/revenue-chart"; import { Suspense } from "react"; -import { getServerTranslation } from "@/bootstrap/i18n/i18n"; +import { getServerTranslation, LANGS } from "@/bootstrap/i18n/i18n"; import langKey from "@/bootstrap/i18n/dictionaries/lang-key"; export default async function Dashboard(props: { - params: Promise<{ lang: string }>; + params: Promise<{ lang: LANGS }>; }) { const { params } = props; const { lang } = await params; diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx index e192627..89037c1 100644 --- a/src/app/[lang]/layout.tsx +++ b/src/app/[lang]/layout.tsx @@ -1,5 +1,5 @@ import { ThemeProvider } from "@/app/[lang]/dashboard/components/client/theme-provider/theme-provider"; -import { initI18next } from "@/bootstrap/i18n/i18n"; +import { initI18next, LANGS } from "@/bootstrap/i18n/i18n"; import TranslationsProvider from "@/bootstrap/i18n/i18n-provider"; import localFont from "next/font/local"; import { PropsWithChildren } from "react"; @@ -16,7 +16,7 @@ const geistMono = localFont({ }); export default async function layout( - props: PropsWithChildren & { params: Promise<{ lang: string }> }, + props: PropsWithChildren & { params: Promise<{ lang: LANGS }> }, ) { const { params, children } = props; const { lang } = await params; diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx index 18ab831..2c72f27 100644 --- a/src/app/components/button/button.tsx +++ b/src/app/components/button/button.tsx @@ -58,7 +58,6 @@ export interface ButtonProps const ButtonUi = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button"; - console.log('is disabled', props); return ( {children}; + return {children}; } diff --git a/src/bootstrap/i18n/i18n.ts b/src/bootstrap/i18n/i18n.ts index c95d601..9e376a9 100644 --- a/src/bootstrap/i18n/i18n.ts +++ b/src/bootstrap/i18n/i18n.ts @@ -1,23 +1,26 @@ import { getOptions, languages } from "@/bootstrap/i18n/settings"; -import { createInstance, i18n, Resource } from "i18next"; +import { createInstance, Resource } from "i18next"; import resourcesToBackend from "i18next-resources-to-backend"; import { initReactI18next } from "react-i18next/initReactI18next"; -const initI18nextInstance = createInstance(); +export const i18nInstance = createInstance(); + +export enum LANGS { + EN = "en", + RU = "ru", +} export const initI18next = async (params: { - lng: string; - i18n?: i18n; + lng: LANGS; resources?: Resource; ns?: string; }) => { - const { lng, i18n, ns, resources } = params; - const i18nInstance = i18n || initI18nextInstance; + const { lng, ns, resources } = params; await i18nInstance .use(initReactI18next) .use( resourcesToBackend( - (language: string) => import(`./dictionaries/${language}.ts`), + (language: LANGS) => import(`./dictionaries/${language}.ts`), ), ) .init({ @@ -36,18 +39,17 @@ export const initI18next = async (params: { }; export async function getServerTranslation( - lng: string, + lng: LANGS, ns?: string, options: { keyPrefix?: string } = {}, ) { - const i18nextInstance = (await initI18next({ lng, ns })).i18n; - + await initI18next({ lng }); return { - t: i18nextInstance.getFixedT( + t: i18nInstance.getFixedT( lng, Array.isArray(ns) ? ns[0] : ns, options?.keyPrefix, ), - i18n: i18nextInstance, + i18n: i18nInstance, }; }