Storybook (#328)

* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components
- Updated dependencies
- Set `retries` to a fixed value of 3 for consistent test retries across environments.
- Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete.
- Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.

apps/dev-tool/lib/i18n/i18n.resolver.ts

@@ -0,0 +1,31 @@
+import { getLogger } from '@kit/shared/logger';
+
+/**
+ * @name i18nResolver
+ * @description Resolve the translation file for the given language and namespace in the dev-tool application.
+ * @param language
+ * @param namespace
+ */
+export async function i18nResolver(language: string, namespace: string) {
+  const logger = await getLogger();
+
+  try {
+    const data = await import(
+      `../../../web/public/locales/${language}/${namespace}.json`
+    );
+
+    return data as Record<string, string>;
+  } catch (error) {
+    console.group(
+      `Error while loading translation file: ${language}/${namespace}`,
+    );
+    logger.error(error instanceof Error ? error.message : error);
+    logger.warn(
+      `Please create a translation file for this language at "public/locales/${language}/${namespace}.json"`,
+    );
+    console.groupEnd();
+
+    // return an empty object if the file could not be loaded to avoid loops
+    return {};
+  }
+}

apps/dev-tool/lib/i18n/i18n.server.ts

@@ -0,0 +1,10 @@
+import { initializeServerI18n } from '@kit/i18n/server';
+
+import { i18nResolver } from './i18n.resolver';
+import { getI18nSettings } from './i18n.settings';
+
+export function createI18nServerInstance(language?: string) {
+  const settings = getI18nSettings(language);
+
+  return initializeServerI18n(settings, i18nResolver);
+}

apps/dev-tool/lib/i18n/i18n.settings.ts

@@ -0,0 +1,52 @@
+import { createI18nSettings } from '@kit/i18n';
+
+/**
+ * The default language of the application.
+ * This is used as a fallback language when the selected language is not supported.
+ */
+const defaultLanguage = process.env.NEXT_PUBLIC_DEFAULT_LOCALE ?? 'en';
+
+/**
+ * The list of supported languages.
+ * By default, only the default language is supported.
+ * Add more languages here if needed.
+ */
+export const languages: string[] = [defaultLanguage];
+
+/**
+ * The name of the cookie that stores the selected language.
+ */
+export const I18N_COOKIE_NAME = 'lang';
+
+/**
+ * The default array of Internationalization (i18n) namespaces.
+ * These namespaces are commonly used in the application for translation purposes.
+ */
+export const defaultI18nNamespaces = ['common'];
+
+/**
+ * Get the i18n settings for the given language and namespaces.
+ * If the language is not supported, it will fall back to the default language.
+ * @param language
+ * @param ns
+ */
+export function getI18nSettings(
+  language: string | undefined,
+  ns: string | string[] = defaultI18nNamespaces,
+) {
+  let lng = language ?? defaultLanguage;
+
+  if (!languages.includes(lng)) {
+    console.warn(
+      `Language "${lng}" is not supported. Falling back to "${defaultLanguage}"`,
+    );
+
+    lng = defaultLanguage;
+  }
+
+  return createI18nSettings({
+    language: lng,
+    namespaces: ns,
+    languages,
+  });
+}

apps/dev-tool/lib/i18n/with-i18n.tsx

@@ -0,0 +1,13 @@
+import { createI18nServerInstance } from './i18n.server';
+
+type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
+
+export function withI18n<Params extends object>(
+  Component: LayoutOrPageComponent<Params>,
+) {
+  return async function I18nServerComponentWrapper(params: Params) {
+    await createI18nServerInstance();
+
+    return <Component {...params} />;
+  };
+}