@jobber/components 9.14.2 → 9.14.4

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -5,16 +5,22 @@ tokens.
 
 ## Design & usage guidelines
 
-Both the web and mobile components have the exact same API, except for one minor
-difference in how you update the theme.
+Web and mobile both expose Atlantis theme context, but the runtime ownership is
+slightly different across platforms.
 
 Each platform provides a `useAtlantisTheme` hook that you may use to access the
-`theme` and `tokens` in your components.
+current theme information and design tokens in your components.
 
-On mobile, this hook also returns a `setTheme` function which you'll use to
-update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
-Typically there will only be a single provider at the root, controlling the
-theme for the entire app.
+On mobile, the hook returns:
+
+* `theme`: the selected theme preference (`"system" | "light" | "dark"`)
+* `effectiveTheme`: the resolved theme Atlantis uses for tokens
+  (`"light" | "dark"`)
+* `tokens`
+* `setTheme`
+
+Typically there will only be a single provider at the root, and the consuming
+app will control `theme` and persist that preference outside Atlantis.
 
 On web, you'll need to import the `updateTheme` function and call it with the
 new theme. This is a separate function because it synchronizes the theme update
@@ -86,7 +92,7 @@ function App() {
 }
 
 function ThemedComponent() {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
   return (
     <Content>
       <View
@@ -96,11 +102,16 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}.</Text>
+          <Text>The selected theme is: {theme}.</Text>
+          <Text>The effective theme is: {effectiveTheme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
           <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("system")}
+            label="The theme can be changed to system"
+          />
           <Button
             onPress={() => setTheme("light")}
             label="The theme can be changed to light"
@@ -163,6 +174,10 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
+On mobile, forcing a theme changes the rendered tokens for that subtree, but it
+does not replace the selected theme preference semantics from the nearest
+non-forced provider.
+
 Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
 within a *child component* of the `AtlantisThemeContextProvider`, not in the
 same component that renders the provider. Same goes for `useAtlantisTheme`.

package/dist/docs/FilterPicker/FilterPicker.md

@@ -30,6 +30,10 @@ You may also set an optional `subjectNoun` for the FilterPicker content. This
 will be used in the
 [empty state](/storybook/web/?path=/story/components-selections-filterpicker--empty-state)
 of the FilterPicker, as well as the noun within the search placeholder.
+Consumer-provided strings such as `label`, `subjectNoun`, action labels, and
+option labels are rendered as provided and should be localized by the consuming
+application. FilterPicker localizes its own default labels and messages from
+`AtlantisContext.locale`.
 
 You may include a prefix element to any `FilterPicker.Option` by setting its
 `prefix` prop. This could be a [StatusIndicator](../StatusIndicator/StatusIndicator.md) or
@@ -38,9 +42,9 @@ You may include a prefix element to any `FilterPicker.Option` by setting its
 ### Empty states
 
 In cases where the list of options is empty, the FilterPicker content will
-display a message indicating the absence of options. The default will read, *"No
-options yet"* or *"You don't have any \[subjectNoun] yet"* if you've set the
-`subjectNoun` prop.
+display a localized message indicating the absence of options. In English, the
+default reads *"No options yet"* or *"You don't have any \[subjectNoun] yet"* if
+you've set the `subjectNoun` prop.
 
 If options are available, but the search query does not match any of them, the
 FilterPicker Content will display a message indicating that no options match the
@@ -87,7 +91,8 @@ and
 [multi-select](/storybook/web/?path=/story/components-selections-filterpicker--multi-select)
 stories. The label of the default activator can be customized by adding the
 optional `label` prop to FilterPicker, to better reflect the type of data being
-selected. Otherwise, the default activator label will read "Select".
+selected. Otherwise, the default activator label is localized from
+`AtlantisContext.locale`; in English, it reads "Select".
 
 The optional `label` prop on FilterPicker is only effective when using the
 default activator.

package/dist/docs/Icon/Icon.md

@@ -521,6 +521,7 @@ export function IconSizesExample() {
 |      | `partlySunny`       |
 |      | `snow`              |
 |      | `thunderLightening` |
+|      | `windy`             |
 
 ### Legacy
 

package/dist/index.cjs

@@ -137,6 +137,7 @@ require('./_baseEach-cjs.js');
 require('./debounce-cjs.js');
 require('./FilterPickerContent-cjs.js');
 require('./FilterPickerContentSearch-cjs.js');
+require('./FilterPicker.messages-cjs.js');
 require('./FilterPickerContentList-cjs.js');
 require('framer-motion');
 require('./FilterPickerOption-cjs.js');
@@ -182,6 +183,7 @@ require('./DataListLoadMore-cjs.js');
 require('./DataListAction-cjs.js');
 require('./DataListLayoutActions-cjs.js');
 require('./DataListStatusBar-cjs.js');
+require('./dateLocale-cjs.js');
 require('./ScrollAreaViewport-cjs.js');
 require('./scrollEdges-cjs.js');
 require('./OverlaySeparator-cjs.js');

package/dist/index.mjs

@@ -135,6 +135,7 @@ import './_baseEach-es.js';
 import './debounce-es.js';
 import './FilterPickerContent-es.js';
 import './FilterPickerContentSearch-es.js';
+import './FilterPicker.messages-es.js';
 import './FilterPickerContentList-es.js';
 import 'framer-motion';
 import './FilterPickerOption-es.js';
@@ -180,6 +181,7 @@ import './DataListLoadMore-es.js';
 import './DataListAction-es.js';
 import './DataListLayoutActions-es.js';
 import './DataListStatusBar-es.js';
+import './dateLocale-es.js';
 import './ScrollAreaViewport-es.js';
 import './scrollEdges-es.js';
 import './OverlaySeparator-es.js';

package/dist/sharedHelpers/i18n/dateLocale.d.ts

@@ -0,0 +1,2 @@
+export declare function getDateLocale(locale: string): import("date-fns").Locale;
+export declare function useDateLocale(): import("date-fns").Locale;

package/dist/sharedHelpers/i18n/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var common_messages = require('../../common.messages-cjs.js');
+var dateLocale = require('../../dateLocale-cjs.js');
 var useAtlantisI18n = require('../../useAtlantisI18n-cjs.js');
 require('react');
 require('../../AtlantisContext-cjs.js');
@@ -8,6 +9,8 @@ require('../../AtlantisContext-cjs.js');
 
 
 exports.commonMessages = common_messages.commonMessages;
+exports.getDateLocale = dateLocale.getDateLocale;
+exports.useDateLocale = dateLocale.useDateLocale;
 exports.defineMessages = useAtlantisI18n.defineMessages;
 exports.useAtlantisI18n = useAtlantisI18n.useAtlantisI18n;
 exports.useReleasedLocale = useAtlantisI18n.useReleasedLocale;

package/dist/sharedHelpers/i18n/index.d.ts

@@ -1,4 +1,5 @@
 export { commonMessages } from "./common.messages";
+export { getDateLocale, useDateLocale } from "./dateLocale";
 export { defineMessages, useAtlantisI18n } from "./useAtlantisI18n";
 export type { AtlantisMessages } from "./useAtlantisI18n";
 export { useReleasedLocale } from "./useReleasedLocale";

package/dist/sharedHelpers/i18n/index.mjs

@@ -1,4 +1,5 @@
 export { c as commonMessages } from '../../common.messages-es.js';
+export { g as getDateLocale, u as useDateLocale } from '../../dateLocale-es.js';
 export { d as defineMessages, u as useAtlantisI18n, a as useReleasedLocale } from '../../useAtlantisI18n-es.js';
 import 'react';
 import '../../AtlantisContext-es.js';

package/dist/sharedHelpers/i18n/releasedLanguages.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Languages that have been fully released and are safe to surface to users.
+ * Any locale whose language tag is not in this list will fall back to "en".
+ *
+ * To release a new language, add its BCP 47 language tag here (e.g. "es").
+ */
+export declare const RELEASED_LANGUAGES: readonly string[];
 /**
  * Returns the locale to use based on what has been released. Matches on the
  * language part of the locale (before the "-") so that regional variants like

package/dist/sharedHelpers/i18n/useAtlantisI18n.d.ts

@@ -1,13 +1,24 @@
+type MessageValues = Record<string, string | number>;
+type PluralMessage = Readonly<Partial<Record<Intl.LDMLPluralRule, string>> & {
+    readonly other: string;
+}>;
+interface LocalizedMessage<Message> {
+    readonly en: Message;
+    readonly [locale: string]: Message;
+}
+type AtlantisMessage = LocalizedMessage<string> | LocalizedMessage<PluralMessage>;
 export interface AtlantisMessages {
-    readonly [messageKey: string]: {
-        readonly en: string;
-        readonly [locale: string]: string;
-    };
+    readonly [messageKey: string]: AtlantisMessage;
 }
-type MessageValues = Record<string, string | number>;
+type MessageKeyOfType<Messages extends AtlantisMessages, Message> = {
+    readonly [MessageKey in keyof Messages]: Messages[MessageKey] extends Message ? MessageKey : never;
+}[keyof Messages];
+export type TextMessageKey<Messages extends AtlantisMessages> = MessageKeyOfType<Messages, LocalizedMessage<string>>;
+type PluralMessageKey<Messages extends AtlantisMessages> = MessageKeyOfType<Messages, LocalizedMessage<PluralMessage>>;
 export declare function defineMessages<Messages extends AtlantisMessages>(messages: Messages): Messages;
 export declare function useAtlantisI18n<Messages extends AtlantisMessages>(messages: Messages): {
     readonly locale: string;
-    readonly t: (messageKey: keyof Messages, values?: MessageValues) => string;
+    readonly t: (messageKey: TextMessageKey<Messages>, values?: MessageValues) => string;
+    readonly plural: (messageKey: PluralMessageKey<Messages>, count: number, values?: MessageValues) => string;
 };
 export {};

package/dist/useAtlantisI18n-cjs.js

@@ -47,7 +47,29 @@ function useAtlantisI18n(messages) {
     const t = React.useCallback((messageKey, values) => {
         return interpolateMessage(resolveMessage(messages[messageKey], locale), values);
     }, [locale, messages]);
-    return { locale, t };
+    const plural = React.useCallback((messageKey, count, values) => {
+        var _a;
+        const pluralMessage = resolveMessage(messages[messageKey], locale);
+        const pluralCategory = createPluralRules(locale).select(count);
+        const message = (_a = pluralMessage[pluralCategory]) !== null && _a !== void 0 ? _a : pluralMessage.other;
+        return interpolateMessage(message, Object.assign(Object.assign({}, values), { count }));
+    }, [locale, messages]);
+    return { locale, plural, t };
+}
+const pluralRulesCache = new Map();
+function createPluralRules(locale) {
+    const cachedPluralRules = pluralRulesCache.get(locale);
+    if (cachedPluralRules)
+        return cachedPluralRules;
+    let pluralRules;
+    try {
+        pluralRules = new Intl.PluralRules(locale);
+    }
+    catch (_a) {
+        pluralRules = new Intl.PluralRules("en");
+    }
+    pluralRulesCache.set(locale, pluralRules);
+    return pluralRules;
 }
 function resolveMessage(message, locale) {
     var _a, _b;

package/dist/useAtlantisI18n-es.js

@@ -45,7 +45,29 @@ function useAtlantisI18n(messages) {
     const t = useCallback((messageKey, values) => {
         return interpolateMessage(resolveMessage(messages[messageKey], locale), values);
     }, [locale, messages]);
-    return { locale, t };
+    const plural = useCallback((messageKey, count, values) => {
+        var _a;
+        const pluralMessage = resolveMessage(messages[messageKey], locale);
+        const pluralCategory = createPluralRules(locale).select(count);
+        const message = (_a = pluralMessage[pluralCategory]) !== null && _a !== void 0 ? _a : pluralMessage.other;
+        return interpolateMessage(message, Object.assign(Object.assign({}, values), { count }));
+    }, [locale, messages]);
+    return { locale, plural, t };
+}
+const pluralRulesCache = new Map();
+function createPluralRules(locale) {
+    const cachedPluralRules = pluralRulesCache.get(locale);
+    if (cachedPluralRules)
+        return cachedPluralRules;
+    let pluralRules;
+    try {
+        pluralRules = new Intl.PluralRules(locale);
+    }
+    catch (_a) {
+        pluralRules = new Intl.PluralRules("en");
+    }
+    pluralRulesCache.set(locale, pluralRules);
+    return pluralRules;
 }
 function resolveMessage(message, locale) {
     var _a, _b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.14.2",
+  "version": "9.14.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -481,6 +481,7 @@
     "axios": "^1.18.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
+    "date-fns": "^4.1.0",
     "filesize": "^6.1.0",
     "framer-motion": "^11.11.12",
     "lodash": "^4.17.21",
@@ -495,7 +496,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.114.0",
+    "@jobber/design": "0.115.0",
     "@jobber/hooks": "2.21.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -547,5 +548,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e4dbbfa3535d42741ca8622ccb33275f4284edd3"
+  "gitHead": "982281f5f4ae2c3fce9ac0f09960bafdb1651d64"
 }