xertica-ui 2.3.0 → 2.4.0

package/components/blocks/card-patterns/index.ts

@@ -1,29 +1,29 @@
-export { ActivityCard } from './ActivityCard';
-export type { ActivityCardProps, ActivityItem } from './ActivityCard';
-export { ActivityCardSkeleton } from './ActivityCardSkeleton';
-export type { ActivityCardSkeletonProps } from './ActivityCardSkeleton';
-
-export { ProfileCard } from './ProfileCard';
-export type { ProfileCardProps } from './ProfileCard';
-export { ProfileCardSkeleton } from './ProfileCardSkeleton';
-export type { ProfileCardSkeletonProps } from './ProfileCardSkeleton';
-
-export { ProjectCard } from './ProjectCard';
-export type { ProjectCardProps, ProjectMember, ProjectStatus } from './ProjectCard';
-export { ProjectCardSkeleton } from './ProjectCardSkeleton';
-export type { ProjectCardSkeletonProps } from './ProjectCardSkeleton';
-
-export { QuickActionCard } from './QuickActionCard';
-export type { QuickActionCardProps } from './QuickActionCard';
-export { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
-export type { QuickActionCardSkeletonProps } from './QuickActionCardSkeleton';
-
-export { NotificationCard } from './NotificationCard';
-export type { NotificationCardProps, NotificationItem, NotificationType } from './NotificationCard';
-export { NotificationCardSkeleton } from './NotificationCardSkeleton';
-export type { NotificationCardSkeletonProps } from './NotificationCardSkeleton';
-
-export { FeatureCard } from './FeatureCard';
-export type { FeatureCardProps, FeatureCardColor } from './FeatureCard';
-export { FeatureCardSkeleton } from './FeatureCardSkeleton';
-export type { FeatureCardSkeletonProps } from './FeatureCardSkeleton';
+export { ActivityCard } from './ActivityCard';
+export type { ActivityCardProps, ActivityItem } from './ActivityCard';
+export { ActivityCardSkeleton } from './ActivityCardSkeleton';
+export type { ActivityCardSkeletonProps } from './ActivityCardSkeleton';
+
+export { ProfileCard } from './ProfileCard';
+export type { ProfileCardProps } from './ProfileCard';
+export { ProfileCardSkeleton } from './ProfileCardSkeleton';
+export type { ProfileCardSkeletonProps } from './ProfileCardSkeleton';
+
+export { ProjectCard } from './ProjectCard';
+export type { ProjectCardProps, ProjectMember, ProjectStatus } from './ProjectCard';
+export { ProjectCardSkeleton } from './ProjectCardSkeleton';
+export type { ProjectCardSkeletonProps } from './ProjectCardSkeleton';
+
+export { QuickActionCard } from './QuickActionCard';
+export type { QuickActionCardProps } from './QuickActionCard';
+export { QuickActionCardSkeleton } from './QuickActionCardSkeleton';
+export type { QuickActionCardSkeletonProps } from './QuickActionCardSkeleton';
+
+export { NotificationCard } from './NotificationCard';
+export type { NotificationCardProps, NotificationItem, NotificationType } from './NotificationCard';
+export { NotificationCardSkeleton } from './NotificationCardSkeleton';
+export type { NotificationCardSkeletonProps } from './NotificationCardSkeleton';
+
+export { FeatureCard } from './FeatureCard';
+export type { FeatureCardProps, FeatureCardColor } from './FeatureCard';
+export { FeatureCardSkeleton } from './FeatureCardSkeleton';
+export type { FeatureCardSkeletonProps } from './FeatureCardSkeleton';

package/components/brand/language-selector/LanguageSelector.tsx

@@ -1,102 +1,102 @@
-import React from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
-import { Globe } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { type Language, useLanguage } from '../../../contexts/LanguageContext';
-
-// Re-export the canonical Language type so consumers can import from either location.
-export type { Language };
-
-export interface LanguageSelectorProps {
-  /** Whether to show text labels alongside the globe icon */
-  showLabel?: boolean;
-  /** UI variant style */
-  variant?: 'minimal' | 'default';
-  /** Whether to show the globe icon */
-  showIcon?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /**
-   * Whether to render the selector when only one language is configured.
-   * When `false` (the default), the selector hides itself in monolingual apps.
-   */
-  showWhenMonolingual?: boolean;
-}
-
-/**
- * `LanguageSelector` — a self-contained language picker wired to `LanguageContext`.
- *
- * The list of languages displayed is read from `LanguageContext.availableLanguages`
- * (configured via the `availableLanguages` prop on `<LanguageProvider>` or
- * `<XerticaProvider>`). The component is fully data-driven: pass any number of
- * languages and they will all appear in the dropdown.
- *
- * Changing the selected language:
- * 1. Updates `LanguageContext` (persists to localStorage)
- * 2. Calls `i18n.changeLanguage()` (all `useTranslation()` consumers re-render)
- * 3. Invalidates the React Query cache (data-layer strings refresh)
- *
- * **Auto-hide:** When only one language is configured (`isMonolingual === true`),
- * the component renders `null` by default. Pass `showWhenMonolingual` to override.
- *
- * Must be rendered inside `<LanguageProvider>`.
- */
-export function LanguageSelector({
-  showLabel = false,
-  variant = 'default',
-  showIcon = true,
-  className = '',
-  showWhenMonolingual = false,
-}: LanguageSelectorProps) {
-  const { language, setLanguage, availableLanguages, isMonolingual } = useLanguage();
-  const { t } = useTranslation();
-
-  // Hide selector when only one language is configured
-  if (isMonolingual && !showWhenMonolingual) {
-    return null;
-  }
-
-  // Compute display labels with i18n fallback support.
-  // Known codes (pt-BR, en, es) get their localized label from translations;
-  // custom codes use the label provided in the LanguageDefinition.
-  const items = availableLanguages.map(lang => {
-    const knownLabelKey =
-      lang.code === 'pt-BR'
-        ? 'languageSelector.ptBR'
-        : lang.code === 'en'
-          ? 'languageSelector.en'
-          : lang.code === 'es'
-            ? 'languageSelector.es'
-            : null;
-
-    return {
-      value: lang.code,
-      label: knownLabelKey ? t(knownLabelKey, lang.label) : lang.label,
-      // Fall back to the first two characters of the code if no shortLabel given
-      minimalLabel: lang.shortLabel ?? lang.code.slice(0, 2).toUpperCase(),
-    };
-  });
-
-  const currentItem = items.find(l => l.value === language) ?? items[0];
-  const displayLabel = variant === 'minimal' ? currentItem.minimalLabel : currentItem.label;
-
-  return (
-    <Select value={language} onValueChange={val => setLanguage(val as Language)}>
-      <SelectTrigger
-        className={`h-9 gap-2 px-3 border-none shadow-none focus:ring-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
-        aria-label={t('languageSelector.label', 'Selecionar idioma')}
-      >
-        {showIcon && <Globe className="h-4 w-4 shrink-0" />}
-        {/* We do not use SelectValue here because it overrides our custom minimal rendering with the SelectItem's children. */}
-        <span className="text-sm">{displayLabel}</span>
-      </SelectTrigger>
-      <SelectContent align="end">
-        {items.map(({ value, label }) => (
-          <SelectItem key={value} value={value}>
-            {label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
+import React from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+import { Globe } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { type Language, useLanguage } from '../../../contexts/LanguageContext';
+
+// Re-export the canonical Language type so consumers can import from either location.
+export type { Language };
+
+export interface LanguageSelectorProps {
+  /** Whether to show text labels alongside the globe icon */
+  showLabel?: boolean;
+  /** UI variant style */
+  variant?: 'minimal' | 'default';
+  /** Whether to show the globe icon */
+  showIcon?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /**
+   * Whether to render the selector when only one language is configured.
+   * When `false` (the default), the selector hides itself in monolingual apps.
+   */
+  showWhenMonolingual?: boolean;
+}
+
+/**
+ * `LanguageSelector` — a self-contained language picker wired to `LanguageContext`.
+ *
+ * The list of languages displayed is read from `LanguageContext.availableLanguages`
+ * (configured via the `availableLanguages` prop on `<LanguageProvider>` or
+ * `<XerticaProvider>`). The component is fully data-driven: pass any number of
+ * languages and they will all appear in the dropdown.
+ *
+ * Changing the selected language:
+ * 1. Updates `LanguageContext` (persists to localStorage)
+ * 2. Calls `i18n.changeLanguage()` (all `useTranslation()` consumers re-render)
+ * 3. Invalidates the React Query cache (data-layer strings refresh)
+ *
+ * **Auto-hide:** When only one language is configured (`isMonolingual === true`),
+ * the component renders `null` by default. Pass `showWhenMonolingual` to override.
+ *
+ * Must be rendered inside `<LanguageProvider>`.
+ */
+export function LanguageSelector({
+  showLabel = false,
+  variant = 'default',
+  showIcon = true,
+  className = '',
+  showWhenMonolingual = false,
+}: LanguageSelectorProps) {
+  const { language, setLanguage, availableLanguages, isMonolingual } = useLanguage();
+  const { t } = useTranslation();
+
+  // Hide selector when only one language is configured
+  if (isMonolingual && !showWhenMonolingual) {
+    return null;
+  }
+
+  // Compute display labels with i18n fallback support.
+  // Known codes (pt-BR, en, es) get their localized label from translations;
+  // custom codes use the label provided in the LanguageDefinition.
+  const items = availableLanguages.map(lang => {
+    const knownLabelKey =
+      lang.code === 'pt-BR'
+        ? 'languageSelector.ptBR'
+        : lang.code === 'en'
+          ? 'languageSelector.en'
+          : lang.code === 'es'
+            ? 'languageSelector.es'
+            : null;
+
+    return {
+      value: lang.code,
+      label: knownLabelKey ? t(knownLabelKey, lang.label) : lang.label,
+      // Fall back to the first two characters of the code if no shortLabel given
+      minimalLabel: lang.shortLabel ?? lang.code.slice(0, 2).toUpperCase(),
+    };
+  });
+
+  const currentItem = items.find(l => l.value === language) ?? items[0];
+  const displayLabel = variant === 'minimal' ? currentItem.minimalLabel : currentItem.label;
+
+  return (
+    <Select value={language} onValueChange={val => setLanguage(val as Language)}>
+      <SelectTrigger
+        className={`h-9 gap-2 px-3 border-none shadow-none focus:ring-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground ${className}`}
+        aria-label={t('languageSelector.label', 'Selecionar idioma')}
+      >
+        {showIcon && <Globe className="h-4 w-4 shrink-0" />}
+        {/* We do not use SelectValue here because it overrides our custom minimal rendering with the SelectItem's children. */}
+        <span className="text-sm">{displayLabel}</span>
+      </SelectTrigger>
+      <SelectContent align="end">
+        {items.map(({ value, label }) => (
+          <SelectItem key={value} value={value}>
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/components/brand/language-selector/language-selector.stories.tsx

@@ -1,114 +1,111 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { LanguageSelector } from './LanguageSelector';
-import {
-  LanguageProvider,
-  DEFAULT_LANGUAGES,
-  type LanguageDefinition,
-} from '../../../contexts/LanguageContext';
-
-// ── Decorators ────────────────────────────────────────────────────────────────
-// The global Storybook preview decorator (.storybook/preview.tsx) already wraps
-// every story with <QueryClientProvider> and <XerticaProvider> (which includes
-// <I18nextProvider> and <LanguageProvider> with the default 3 languages).
-//
-// Stories that need to demonstrate a CUSTOM set of available languages override
-// the inner LanguageProvider — this is allowed because contexts are scoped by
-// the nearest matching Provider in the React tree.
-
-function withLanguages(availableLanguages: LanguageDefinition[]) {
-  return (Story: React.ComponentType) => (
-    <LanguageProvider availableLanguages={availableLanguages}>
-      <Story />
-    </LanguageProvider>
-  );
-}
-
-const meta: Meta<typeof LanguageSelector> = {
-  title: 'Brand/LanguageSelector',
-  component: LanguageSelector,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Language picker wired to `LanguageContext` and `i18next`. ' +
-          'Selecting a language persists to `localStorage`, calls `i18n.changeLanguage()` — ' +
-          'all `useTranslation()` consumers re-render immediately — and invalidates the ' +
-          'React Query cache so mock/API responses also refresh. ' +
-          'Auto-hides when only one language is configured.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof LanguageSelector>;
-
-// ── Basic appearance variants ────────────────────────────────────────────────
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithLabel: Story = {
-  args: {
-    showLabel: true,
-  },
-};
-
-export const NoIcon: Story = {
-  name: 'No Globe Icon',
-  args: {
-    showIcon: false,
-  },
-};
-
-export const Minimal: Story = {
-  args: {
-    variant: 'minimal',
-    showIcon: false,
-  },
-};
-
-// ── Runtime language configuration ───────────────────────────────────────────
-
-export const ExtendedWithFrench: Story = {
-  name: 'Extended (with custom language)',
-  decorators: [
-    withLanguages([
-      ...DEFAULT_LANGUAGES,
-      { code: 'fr', label: 'Français', shortLabel: 'FR' },
-    ]),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Demonstrates passing extra languages via `availableLanguages` on `<LanguageProvider>` / ' +
-          '`<XerticaProvider>`. The selector picks them up automatically.',
-      },
-    },
-  },
-};
-
-export const MonolingualAutoHidden: Story = {
-  name: 'Monolingual (auto-hidden)',
-  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'When only one language is configured, the selector renders nothing. ' +
-          'Pass `showWhenMonolingual` to force it to render.',
-      },
-    },
-  },
-};
-
-export const MonolingualForced: Story = {
-  name: 'Monolingual (showWhenMonolingual=true)',
-  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
-  args: {
-    showWhenMonolingual: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { LanguageSelector } from './LanguageSelector';
+import {
+  LanguageProvider,
+  DEFAULT_LANGUAGES,
+  type LanguageDefinition,
+} from '../../../contexts/LanguageContext';
+
+// ── Decorators ────────────────────────────────────────────────────────────────
+// The global Storybook preview decorator (.storybook/preview.tsx) already wraps
+// every story with <QueryClientProvider> and <XerticaProvider> (which includes
+// <I18nextProvider> and <LanguageProvider> with the default 3 languages).
+//
+// Stories that need to demonstrate a CUSTOM set of available languages override
+// the inner LanguageProvider — this is allowed because contexts are scoped by
+// the nearest matching Provider in the React tree.
+
+function withLanguages(availableLanguages: LanguageDefinition[]) {
+  return (Story: React.ComponentType) => (
+    <LanguageProvider availableLanguages={availableLanguages}>
+      <Story />
+    </LanguageProvider>
+  );
+}
+
+const meta: Meta<typeof LanguageSelector> = {
+  title: 'Brand/LanguageSelector',
+  component: LanguageSelector,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Language picker wired to `LanguageContext` and `i18next`. ' +
+          'Selecting a language persists to `localStorage`, calls `i18n.changeLanguage()` — ' +
+          'all `useTranslation()` consumers re-render immediately — and invalidates the ' +
+          'React Query cache so mock/API responses also refresh. ' +
+          'Auto-hides when only one language is configured.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LanguageSelector>;
+
+// ── Basic appearance variants ────────────────────────────────────────────────
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    showLabel: true,
+  },
+};
+
+export const NoIcon: Story = {
+  name: 'No Globe Icon',
+  args: {
+    showIcon: false,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    variant: 'minimal',
+    showIcon: false,
+  },
+};
+
+// ── Runtime language configuration ───────────────────────────────────────────
+
+export const ExtendedWithFrench: Story = {
+  name: 'Extended (with custom language)',
+  decorators: [
+    withLanguages([...DEFAULT_LANGUAGES, { code: 'fr', label: 'Français', shortLabel: 'FR' }]),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates passing extra languages via `availableLanguages` on `<LanguageProvider>` / ' +
+          '`<XerticaProvider>`. The selector picks them up automatically.',
+      },
+    },
+  },
+};
+
+export const MonolingualAutoHidden: Story = {
+  name: 'Monolingual (auto-hidden)',
+  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When only one language is configured, the selector renders nothing. ' +
+          'Pass `showWhenMonolingual` to force it to render.',
+      },
+    },
+  },
+};
+
+export const MonolingualForced: Story = {
+  name: 'Monolingual (showWhenMonolingual=true)',
+  decorators: [withLanguages([{ code: 'en', label: 'English' }])],
+  args: {
+    showWhenMonolingual: true,
+  },
+};