@simplysm/solid 13.0.71 → 13.0.74

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -8,6 +8,7 @@ import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { useNotification } from "../../feedback/notification/NotificationContext";
 import { Icon } from "../../display/Icon";
 import { textPlaceholder } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import type { ComponentSize } from "../../../styles/tokens.styles";
 import { iconButtonBase } from "../../../styles/patterns.styles";
 
@@ -116,6 +117,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   ]);
 
   const notification = useNotification();
+  const i18n = useI18n();
 
   // presetKey is an identifier set only once at mount, evaluate immediately to capture
   /* eslint-disable solid/reactivity */
@@ -147,7 +149,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     }
 
     if (presets().some((p) => p.name === name)) {
-      notification.warning("Duplicate name", "A preset with this name already exists.");
+      notification.warning(i18n.t("statePreset.duplicateName"), i18n.t("statePreset.duplicateMessage"));
       return;
     }
 
@@ -156,7 +158,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
       state: objClone(local.value),
     };
     setPresets([...presets(), newPreset]);
-    notification.info("Preset saved", `Preset "${name}" has been saved.`);
+    notification.info(i18n.t("statePreset.saved"), i18n.t("statePreset.savedMessage", { name }));
     setAdding(false);
     setInputValue("");
   }
@@ -177,11 +179,11 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     setPresets(updated);
 
     const notiId = notification.info(
-      "Preset overwritten",
-      `Preset "${presetName}" has been updated with the current state.`,
+      i18n.t("statePreset.overwritten"),
+      i18n.t("statePreset.overwrittenMessage", { name: presetName }),
       {
         action: {
-          label: "Undo",
+          label: i18n.t("statePreset.undo"),
           onClick: () => {
             setPresets(snapshot);
             notification.remove(notiId);
@@ -198,9 +200,9 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const updated = snapshot.filter((_, i) => i !== index);
     setPresets(updated);
 
-    const notiId = notification.info("Preset deleted", `Preset "${presetName}" has been deleted.`, {
+    const notiId = notification.info(i18n.t("statePreset.deleted"), i18n.t("statePreset.deletedMessage", { name: presetName }), {
       action: {
-        label: "Undo",
+        label: i18n.t("statePreset.undo"),
         onClick: () => {
           setPresets(snapshot);
           notification.remove(notiId);
@@ -242,7 +244,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
         type="button"
         class={resolvedStarBtnClass()}
         onClick={handleStartAdd}
-        title="Add preset"
+        title={i18n.t("statePreset.addPreset")}
       >
         <Icon icon={IconStar} size={iconSize} />
       </button>
@@ -255,7 +257,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={chipNameBtnClass}
               onClick={() => handleRestore(preset)}
-              title={`Apply preset "${preset.name}"`}
+              title={preset.name}
             >
               {preset.name}
             </button>
@@ -263,7 +265,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleOverwrite(index())}
-              title="Overwrite with current state"
+              title={i18n.t("statePreset.overwrite")}
             >
               <Icon icon={IconDeviceFloppy} size={iconSize} />
             </button>
@@ -271,7 +273,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleDelete(index())}
-              title="Delete preset"
+              title={i18n.t("statePreset.deletePreset")}
             >
               <Icon icon={IconX} size={iconSize} />
             </button>
@@ -288,7 +290,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           }}
           type="text"
           class={resolvedInputClass()}
-          placeholder="Name..."
+          placeholder={i18n.t("statePreset.namePlaceholder")}
           autocomplete="one-time-code"
           value={inputValue()}
           onInput={(e) => setInputValue(e.currentTarget.value)}

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -12,7 +12,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
 import { mergeStyles } from "../../../helpers/mergeStyles";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const backdropClass = clsx(
   "absolute",
@@ -62,7 +62,7 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
 export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const [toggle, setToggle] = createSignal(false);
 
   // Detect Tailwind sm: breakpoint
@@ -113,7 +113,7 @@ export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props)
             onClick={handleBackdropClick}
             onKeyDown={(e) => e.key === "Escape" && handleBackdropClick()}
             role="button"
-            aria-label={i18n?.t("sidebar.closeSidebar") ?? "Close sidebar"}
+            aria-label={i18n.t("sidebar.closeSidebar")}
             tabIndex={0}
           />
         </Show>

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -19,6 +19,7 @@ import type { AppMenu } from "../../../helpers/createAppStructure";
 import { Icon } from "../../display/Icon";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const headerClass = clsx(
   "px-4",
@@ -72,6 +73,7 @@ const MenuContext = createContext<MenuContextValue>();
  */
 export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
+  const i18n = useI18n();
 
   const location = useLocation();
 
@@ -107,7 +109,7 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   return (
     <MenuContext.Provider value={{ initialOpenItems }}>
       <div {...rest} data-sidebar-menu class={getClassName()}>
-        <div class={headerClass}>MENU</div>
+        <div class={headerClass}>{i18n.t("sidebarMenu.menu")}</div>
         <List inset>
           <For each={local.menus}>{(menu) => <MenuItem menu={menu} size="lg" />}</For>
         </List>

package/src/components/layout/topbar/Topbar.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
 import { useSidebarContextOptional } from "../sidebar/SidebarContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { TopbarActions } from "./TopbarActions";
 import { TopbarContainer } from "./TopbarContainer";
 import { TopbarMenu } from "./TopbarMenu";
@@ -71,7 +71,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
 
   // Optional use of SidebarContext (toggle button not shown if Context doesn't exist)
   const sidebarContext = useSidebarContextOptional();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const handleToggle = () => {
     sidebarContext?.setToggle((v) => !v);
@@ -82,7 +82,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
   return (
     <header {...rest} data-topbar class={getClassName()}>
       <Show when={sidebarContext}>
-        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n?.t("topbar.toggleSidebar") ?? "Toggle sidebar"}>
+        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n.t("topbar.toggleSidebar")}>
           <Icon icon={IconMenu2} size="1.5em" />
         </Button>
       </Show>

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -16,7 +16,7 @@ import { Button } from "../../form-control/Button";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
 const mobileWrapperClass = clsx("flex sm:hidden");
@@ -64,7 +64,7 @@ export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
 export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
   const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   return (
     <>
@@ -79,7 +79,7 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
           <Dropdown.Trigger>
             <Button
               variant="ghost"
-              aria-label={i18n?.t("topbarMenu.menu") ?? "Menu"}
+              aria-label={i18n.t("topbarMenu.menu")}
               aria-haspopup="menu"
               aria-expanded={mobileMenuOpen()}
             >

package/src/hooks/createSelectionGroup.tsx

@@ -10,6 +10,7 @@ import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "./createControllableSignal";
 import { Invalid } from "../components/form-control/Invalid";
 import type { CheckboxSize } from "../components/form-control/checkbox/Checkbox.styles";
+import { useI18n } from "../providers/i18n/I18nContext";
 
 interface SelectionItemComponentProps {
   value: boolean;
@@ -42,14 +43,14 @@ interface MultiGroupConfig {
   mode: "multiple";
   contextName: string;
   ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsg: string;
+  emptyErrorMsgKey: string;
 }
 
 interface SingleGroupConfig {
   mode: "single";
   contextName: string;
   ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
-  emptyErrorMsg: string;
+  emptyErrorMsgKey: string;
 }
 
 interface SelectionGroupItemProps<TValue> {
@@ -148,6 +149,9 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
   }
 
   const GroupInner: ParentComponent<MultiGroupProps<unknown>> = (props) => {
+    const i18n = useI18n();
+    const resolvedErrorMsg = () => i18n.t(config.emptyErrorMsgKey);
+
     const [local, rest] = splitProps(props, [
       "value",
       "onValueChange",
@@ -205,11 +209,11 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
     const errorMsg = createMemo(() => {
       if (config.mode === "multiple") {
         const v = local.value ?? [];
-        if (local.required && v.length === 0) return config.emptyErrorMsg;
+        if (local.required && v.length === 0) return resolvedErrorMsg();
         return (local.validate as ((v: unknown[]) => string | undefined) | undefined)?.(v);
       } else {
         const v = local.value as unknown | undefined;
-        if (local.required && (v === undefined || v === null)) return config.emptyErrorMsg;
+        if (local.required && (v === undefined || v === null)) return resolvedErrorMsg();
         return (local.validate as ((v: unknown | undefined) => string | undefined) | undefined)?.(
           v,
         );

package/src/providers/i18n/I18nContext.tsx

@@ -38,13 +38,6 @@ export function useI18n(): I18nContextValue {
   return context;
 }
 
-/**
- * Get i18n context value (optional, returns undefined if not in provider)
- */
-export function useI18nOptional(): I18nContextValue | undefined {
-  return useContext(I18nContext);
-}
-
 /**
  * I18n Provider component
  *

package/src/providers/i18n/locales/en.ts

@@ -144,6 +144,7 @@ export default {
   },
   sharedDataSelectList: {
     searchPlaceholder: "Search...",
+    unspecified: "Unspecified",
   },
   dataSelectButton: {
     deselect: "Deselect",
@@ -158,4 +159,41 @@ export default {
   topbarMenu: {
     menu: "Menu",
   },
+  notificationBell: {
+    notifications: "Notifications",
+    clearAll: "Clear All",
+    noNotifications: "No notifications",
+    unreadCount: "{{count}} notifications",
+  },
+  notificationProvider: {
+    prefix: "Notification:",
+  },
+  themeToggle: {
+    light: "Light mode",
+    system: "System settings",
+    dark: "Dark mode",
+  },
+  combobox: {
+    searching: "Searching...",
+    noResults: "No results found",
+  },
+  numpad: {
+    enter: "ENT",
+  },
+  sidebarMenu: {
+    menu: "MENU",
+  },
+  validation: {
+    required: "This is a required field",
+    requiredField: "Required field",
+    requiredSelection: "This is a required selection",
+    selectItem: "Please select an item",
+    minLength: "Enter at least {{min}} characters",
+    maxLength: "Enter up to {{max}} characters",
+    invalidFormat: "The input format is invalid",
+    minValue: "Minimum value is {{min}}",
+    maxValue: "Maximum value is {{max}}",
+    minDate: "Must be greater than or equal to {{min}}",
+    maxDate: "Must be less than or equal to {{max}}",
+  },
 };

package/src/providers/i18n/locales/ko.ts

@@ -144,6 +144,7 @@ export default {
   },
   sharedDataSelectList: {
     searchPlaceholder: "검색...",
+    unspecified: "미지정",
   },
   dataSelectButton: {
     deselect: "선택 해제",
@@ -158,4 +159,41 @@ export default {
   topbarMenu: {
     menu: "메뉴",
   },
+  notificationBell: {
+    notifications: "알림",
+    clearAll: "모두 지우기",
+    noNotifications: "알림 없음",
+    unreadCount: "{{count}}개의 알림",
+  },
+  notificationProvider: {
+    prefix: "알림:",
+  },
+  themeToggle: {
+    light: "라이트 모드",
+    system: "시스템 설정",
+    dark: "다크 모드",
+  },
+  combobox: {
+    searching: "검색 중...",
+    noResults: "결과 없음",
+  },
+  numpad: {
+    enter: "입력",
+  },
+  sidebarMenu: {
+    menu: "메뉴",
+  },
+  validation: {
+    required: "필수 입력 항목입니다",
+    requiredField: "필수 항목",
+    requiredSelection: "필수 선택 항목입니다",
+    selectItem: "항목을 선택해 주세요",
+    minLength: "{{min}}자 이상 입력해 주세요",
+    maxLength: "{{max}}자 이하로 입력해 주세요",
+    invalidFormat: "입력 형식이 올바르지 않습니다",
+    minValue: "최솟값은 {{min}}입니다",
+    maxValue: "최댓값은 {{max}}입니다",
+    minDate: "{{min}} 이상이어야 합니다",
+    maxDate: "{{max}} 이하이어야 합니다",
+  },
 };

package/tailwind.config.ts

@@ -50,8 +50,8 @@ export default {
         "sidebar-backdrop": "99",
         "busy": "500",
         "dropdown": "1000",
-        "modal-backdrop": "1999",
-        "modal": "2000",
+        "dialog-backdrop": "1999",
+        "dialog": "2000",
         "notification": "3000",
       },
     },

package/tests/components/data/kanban/Kanban.selection.spec.tsx

@@ -1,38 +1,48 @@
 import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { Kanban } from "../../../../src/components/data/kanban/Kanban";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Kanban selection system", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   function renderKanban(options?: {
     selectedValues?: unknown[];
     onSelectedValuesChange?: (v: unknown[]) => void;
     selectable?: boolean;
   }) {
     return render(() => (
-      <Kanban
-        selectedValues={options?.selectedValues}
-        onSelectedValuesChange={options?.onSelectedValuesChange}
-        class="h-[400px]"
-      >
-        <Kanban.Lane value="lane-1">
-          <Kanban.LaneTitle>Lane 1</Kanban.LaneTitle>
-          <Kanban.Card value={1} selectable={options?.selectable ?? true} contentClass="p-2">
-            Card 1
-          </Kanban.Card>
-          <Kanban.Card value={2} selectable={options?.selectable ?? true} contentClass="p-2">
-            Card 2
-          </Kanban.Card>
-          <Kanban.Card value={3} selectable={false} contentClass="p-2">
-            Card 3 (not selectable)
-          </Kanban.Card>
-        </Kanban.Lane>
-        <Kanban.Lane value="lane-2">
-          <Kanban.LaneTitle>Lane 2</Kanban.LaneTitle>
-          <Kanban.Card value={4} selectable contentClass="p-2">
-            Card 4
-          </Kanban.Card>
-        </Kanban.Lane>
-      </Kanban>
+      <ConfigProvider clientName="test">
+        <I18nProvider>
+          <Kanban
+            selectedValues={options?.selectedValues}
+            onSelectedValuesChange={options?.onSelectedValuesChange}
+            class="h-[400px]"
+          >
+            <Kanban.Lane value="lane-1">
+              <Kanban.LaneTitle>Lane 1</Kanban.LaneTitle>
+              <Kanban.Card value={1} selectable={options?.selectable ?? true} contentClass="p-2">
+                Card 1
+              </Kanban.Card>
+              <Kanban.Card value={2} selectable={options?.selectable ?? true} contentClass="p-2">
+                Card 2
+              </Kanban.Card>
+              <Kanban.Card value={3} selectable={false} contentClass="p-2">
+                Card 3 (not selectable)
+              </Kanban.Card>
+            </Kanban.Lane>
+            <Kanban.Lane value="lane-2">
+              <Kanban.LaneTitle>Lane 2</Kanban.LaneTitle>
+              <Kanban.Card value={4} selectable contentClass="p-2">
+                Card 4
+              </Kanban.Card>
+            </Kanban.Lane>
+          </Kanban>
+        </I18nProvider>
+      </ConfigProvider>
     ));
   }