payload-intl 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/README.md +62 -221
  2. package/dist/components/MessageController.d.ts +4 -6
  3. package/dist/components/MessageController.d.ts.map +1 -1
  4. package/dist/components/MessageController.js +25 -41
  5. package/dist/components/MessageController.js.map +1 -1
  6. package/dist/components/MessageFormContext.d.ts +29 -0
  7. package/dist/components/MessageFormContext.d.ts.map +1 -0
  8. package/dist/components/MessageFormContext.js +30 -0
  9. package/dist/components/MessageFormContext.js.map +1 -0
  10. package/dist/components/MessagesForm.d.ts +2 -2
  11. package/dist/components/MessagesForm.d.ts.map +1 -1
  12. package/dist/components/MessagesForm.js +126 -112
  13. package/dist/components/MessagesForm.js.map +1 -1
  14. package/dist/components/MessagesForm.module.css +41 -0
  15. package/dist/{exports/link.d.ts → components/MessagesLink.d.ts} +3 -3
  16. package/dist/components/MessagesLink.d.ts.map +1 -0
  17. package/dist/components/MessagesLink.js +19 -0
  18. package/dist/components/MessagesLink.js.map +1 -0
  19. package/dist/components/MessagesView.d.ts +10 -0
  20. package/dist/components/MessagesView.d.ts.map +1 -0
  21. package/dist/components/MessagesView.js +48 -0
  22. package/dist/components/MessagesView.js.map +1 -0
  23. package/dist/components/actions/JsonImport.d.ts.map +1 -1
  24. package/dist/components/actions/JsonImport.js +68 -61
  25. package/dist/components/actions/JsonImport.js.map +1 -1
  26. package/dist/components/actions/JsonImport.module.css +14 -0
  27. package/dist/components/actions/Move.d.ts.map +1 -1
  28. package/dist/components/actions/Move.js +41 -0
  29. package/dist/components/actions/Move.js.map +1 -0
  30. package/dist/components/actions/Move.module.css +8 -0
  31. package/dist/components/inputs/InputWrapper.d.ts +1 -1
  32. package/dist/components/inputs/InputWrapper.d.ts.map +1 -1
  33. package/dist/components/inputs/InputWrapper.js +31 -29
  34. package/dist/components/inputs/InputWrapper.js.map +1 -1
  35. package/dist/components/inputs/InputWrapper.module.css +34 -0
  36. package/dist/components/inputs/LexicalInput.d.ts +3 -3
  37. package/dist/components/inputs/LexicalInput.js +86 -0
  38. package/dist/components/inputs/LexicalInput.js.map +1 -0
  39. package/dist/components/inputs/MessageInput.d.ts +2 -2
  40. package/dist/components/inputs/MessageInput.d.ts.map +1 -1
  41. package/dist/components/inputs/MessageInput.js +110 -37
  42. package/dist/components/inputs/MessageInput.js.map +1 -1
  43. package/dist/components/inputs/MessageInput.module.css +25 -0
  44. package/dist/components/inputs/variables/VariableChip.d.ts +8 -2
  45. package/dist/components/inputs/variables/VariableChip.d.ts.map +1 -1
  46. package/dist/components/inputs/variables/VariableChip.js +86 -64
  47. package/dist/components/inputs/variables/VariableChip.js.map +1 -1
  48. package/dist/components/inputs/variables/VariableChip.module.css +66 -0
  49. package/dist/components/inputs/variables/VariableIcon.d.ts +1 -1
  50. package/dist/components/inputs/variables/VariableIcon.d.ts.map +1 -1
  51. package/dist/components/inputs/variables/VariableIcon.js +35 -0
  52. package/dist/components/inputs/variables/VariableIcon.js.map +1 -0
  53. package/dist/components/inputs/variables/VariableNode.d.ts +11 -0
  54. package/dist/components/inputs/variables/VariableNode.d.ts.map +1 -0
  55. package/dist/components/inputs/variables/VariableNode.js +36 -0
  56. package/dist/components/inputs/variables/VariableNode.js.map +1 -0
  57. package/dist/components/inputs/variables/VariableSuggestion.module.css +34 -0
  58. package/dist/components/inputs/variables/editors/DateVariableEditor.d.ts +2 -2
  59. package/dist/components/inputs/variables/editors/DateVariableEditor.d.ts.map +1 -1
  60. package/dist/components/inputs/variables/editors/DateVariableEditor.js +15 -0
  61. package/dist/components/inputs/variables/editors/DateVariableEditor.js.map +1 -0
  62. package/dist/components/inputs/variables/editors/PluralVariableEditor.d.ts +1 -1
  63. package/dist/components/inputs/variables/editors/PluralVariableEditor.d.ts.map +1 -1
  64. package/dist/components/inputs/variables/editors/PluralVariableEditor.js +191 -172
  65. package/dist/components/inputs/variables/editors/PluralVariableEditor.js.map +1 -1
  66. package/dist/components/inputs/variables/editors/PluralVariableEditor.module.css +149 -0
  67. package/dist/components/inputs/variables/editors/SelectVariableEditor.d.ts +1 -1
  68. package/dist/components/inputs/variables/editors/SelectVariableEditor.d.ts.map +1 -1
  69. package/dist/components/inputs/variables/editors/SelectVariableEditor.js +58 -52
  70. package/dist/components/inputs/variables/editors/SelectVariableEditor.js.map +1 -1
  71. package/dist/components/inputs/variables/editors/SelectVariableEditor.module.css +25 -0
  72. package/dist/components/inputs/variables/editors/TagVariableEditor.d.ts +1 -1
  73. package/dist/components/inputs/variables/editors/TagVariableEditor.d.ts.map +1 -1
  74. package/dist/components/inputs/variables/editors/TagVariableEditor.js +36 -32
  75. package/dist/components/inputs/variables/editors/TagVariableEditor.js.map +1 -1
  76. package/dist/components/inputs/variables/editors/TagVariableEditor.module.css +7 -0
  77. package/dist/components/inputs/variables/editors/TimeVariableEditor.d.ts +2 -2
  78. package/dist/components/inputs/variables/editors/TimeVariableEditor.d.ts.map +1 -1
  79. package/dist/components/inputs/variables/editors/TimeVariableEditor.js +15 -0
  80. package/dist/components/inputs/variables/editors/TimeVariableEditor.js.map +1 -0
  81. package/dist/components/inputs/variables/pickers/NumericVariablePicker.d.ts +1 -1
  82. package/dist/components/inputs/variables/pickers/NumericVariablePicker.d.ts.map +1 -1
  83. package/dist/components/inputs/variables/pickers/NumericVariablePicker.js +48 -51
  84. package/dist/components/inputs/variables/pickers/NumericVariablePicker.js.map +1 -1
  85. package/dist/components/inputs/variables/pickers/NumericVariablePicker.module.css +27 -0
  86. package/dist/components/inputs/variables/pickers/TemporalElementEditor.d.ts +1 -1
  87. package/dist/components/inputs/variables/pickers/TemporalElementEditor.d.ts.map +1 -1
  88. package/dist/components/inputs/variables/pickers/TemporalElementEditor.js +58 -0
  89. package/dist/components/inputs/variables/pickers/TemporalElementEditor.js.map +1 -0
  90. package/dist/components/inputs/variables/pickers/TemporalElementEditor.module.css +27 -0
  91. package/dist/components/layout/MessageField.d.ts +3 -3
  92. package/dist/components/layout/MessageField.d.ts.map +1 -1
  93. package/dist/components/layout/MessageField.js +56 -56
  94. package/dist/components/layout/MessageField.js.map +1 -1
  95. package/dist/components/layout/MessageField.module.css +19 -0
  96. package/dist/components/layout/MessagesTabs.d.ts +1 -1
  97. package/dist/components/layout/MessagesTabs.d.ts.map +1 -1
  98. package/dist/components/layout/MessagesTabs.js +40 -43
  99. package/dist/components/layout/MessagesTabs.js.map +1 -1
  100. package/dist/components/layout/MessagesTabs.module.css +21 -0
  101. package/dist/components/layout/MessagesTree.d.ts +3 -2
  102. package/dist/components/layout/MessagesTree.d.ts.map +1 -1
  103. package/dist/components/layout/MessagesTree.js +65 -67
  104. package/dist/components/layout/MessagesTree.js.map +1 -1
  105. package/dist/components/layout/MessagesTree.module.css +36 -0
  106. package/dist/const.d.ts +8 -9
  107. package/dist/const.d.ts.map +1 -1
  108. package/dist/const.js +16 -13
  109. package/dist/const.js.map +1 -1
  110. package/dist/endpoints/get-messages.d.ts +1 -1
  111. package/dist/endpoints/get-messages.d.ts.map +1 -1
  112. package/dist/endpoints/get-messages.js +7 -13
  113. package/dist/endpoints/get-messages.js.map +1 -1
  114. package/dist/endpoints/set-messages.d.ts +1 -1
  115. package/dist/endpoints/set-messages.d.ts.map +1 -1
  116. package/dist/endpoints/set-messages.js +61 -45
  117. package/dist/endpoints/set-messages.js.map +1 -1
  118. package/dist/entities.d.ts +5 -0
  119. package/dist/entities.d.ts.map +1 -0
  120. package/dist/entities.js +38 -0
  121. package/dist/entities.js.map +1 -0
  122. package/dist/exports/client.d.ts +2 -0
  123. package/dist/exports/client.d.ts.map +1 -0
  124. package/dist/exports/client.js +3 -0
  125. package/dist/exports/client.js.map +1 -0
  126. package/dist/exports/rsc.d.ts +2 -2
  127. package/dist/exports/rsc.d.ts.map +1 -1
  128. package/dist/exports/rsc.js +4 -7
  129. package/dist/exports/rsc.js.map +1 -1
  130. package/dist/hooks.d.ts +4 -0
  131. package/dist/hooks.d.ts.map +1 -0
  132. package/dist/hooks.js +24 -0
  133. package/dist/hooks.js.map +1 -0
  134. package/dist/index.d.ts +20 -3
  135. package/dist/index.d.ts.map +1 -1
  136. package/dist/index.js +64 -80
  137. package/dist/index.js.map +1 -1
  138. package/dist/payload-types.d.ts +258 -0
  139. package/dist/payload-types.d.ts.map +1 -0
  140. package/dist/payload-types.js +15 -0
  141. package/dist/payload-types.js.map +1 -0
  142. package/dist/requests/fetchMessageFromAPI.d.ts +10 -0
  143. package/dist/requests/fetchMessageFromAPI.d.ts.map +1 -0
  144. package/dist/requests/fetchMessageFromAPI.js +15 -0
  145. package/dist/requests/fetchMessageFromAPI.js.map +1 -0
  146. package/dist/requests/fetchMessageFromPayload.d.ts +3 -0
  147. package/dist/requests/fetchMessageFromPayload.d.ts.map +1 -0
  148. package/dist/requests/fetchMessageFromPayload.js +29 -0
  149. package/dist/requests/fetchMessageFromPayload.js.map +1 -0
  150. package/dist/requests/fetchMessages.d.ts +3 -11
  151. package/dist/requests/fetchMessages.d.ts.map +1 -1
  152. package/dist/requests/fetchMessages.js +10 -40
  153. package/dist/requests/fetchMessages.js.map +1 -1
  154. package/dist/types.d.ts +7 -23
  155. package/dist/types.d.ts.map +1 -1
  156. package/dist/types.js +3 -0
  157. package/dist/types.js.map +1 -0
  158. package/dist/utils/config.d.ts +3 -3
  159. package/dist/utils/config.d.ts.map +1 -1
  160. package/dist/utils/config.js +27 -17
  161. package/dist/utils/config.js.map +1 -1
  162. package/dist/utils/error-handling.js +14 -12
  163. package/dist/utils/error-handling.js.map +1 -1
  164. package/dist/utils/format.d.ts +1 -1
  165. package/dist/utils/format.js +21 -13
  166. package/dist/utils/format.js.map +1 -1
  167. package/dist/utils/guards.d.ts +2 -1
  168. package/dist/utils/guards.js +8 -18
  169. package/dist/utils/guards.js.map +1 -1
  170. package/dist/utils/icu-tranform.d.ts +13 -18
  171. package/dist/utils/icu-tranform.d.ts.map +1 -1
  172. package/dist/utils/icu-tranform.js +140 -108
  173. package/dist/utils/icu-tranform.js.map +1 -1
  174. package/dist/utils/sanitize.d.ts +1 -1
  175. package/dist/utils/sanitize.js +36 -17
  176. package/dist/utils/sanitize.js.map +1 -1
  177. package/dist/utils/schema.d.ts +1 -3
  178. package/dist/utils/schema.d.ts.map +1 -1
  179. package/dist/utils/schema.js +42 -34
  180. package/dist/utils/schema.js.map +1 -1
  181. package/dist/utils/validate.d.ts +2 -2
  182. package/dist/utils/validate.js +52 -53
  183. package/dist/utils/validate.js.map +1 -1
  184. package/package.json +35 -52
  185. package/dist/components/inputs/variables/VariableSuggestion.d.ts +0 -9
  186. package/dist/components/inputs/variables/VariableSuggestion.d.ts.map +0 -1
  187. package/dist/components/inputs/variables/VariableSuggestion.js +0 -41
  188. package/dist/components/inputs/variables/VariableSuggestion.js.map +0 -1
  189. package/dist/components/inputs/variables/extension.d.ts +0 -4
  190. package/dist/components/inputs/variables/extension.d.ts.map +0 -1
  191. package/dist/components/inputs/variables/extension.js +0 -93
  192. package/dist/components/inputs/variables/extension.js.map +0 -1
  193. package/dist/context/messages-form.d.ts +0 -29
  194. package/dist/context/messages-form.d.ts.map +0 -1
  195. package/dist/context/messages-form.js +0 -26
  196. package/dist/context/messages-form.js.map +0 -1
  197. package/dist/exports/link.d.ts.map +0 -1
  198. package/dist/exports/link.js +0 -21
  199. package/dist/exports/link.js.map +0 -1
  200. package/dist/exports/view.d.ts +0 -10
  201. package/dist/exports/view.d.ts.map +0 -1
  202. package/dist/exports/view.js +0 -53
  203. package/dist/exports/view.js.map +0 -1
  204. package/dist/styles.css +0 -1
  205. package/dist/utils/cn.d.ts +0 -3
  206. package/dist/utils/cn.d.ts.map +0 -1
  207. package/dist/utils/cn.js +0 -9
  208. package/dist/utils/cn.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8CrC"}
1
+ {"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8CrC"}
@@ -1,57 +1,57 @@
1
- import { jsxs as d, jsx as i } from "react/jsx-runtime";
2
- import { useMemo as p } from "react";
3
- import { useMessagesForm as f } from "../../context/messages-form.js";
4
- import { cn as n } from "../../utils/cn.js";
5
- import { parseMessageSchema as v } from "../../utils/schema.js";
6
- import { createValidator as x } from "../../utils/validate.js";
7
- import { MessageController as c } from "../MessageController.js";
8
- function w({
9
- schema: o,
10
- messageKey: s,
11
- path: t,
12
- className: l
13
- }) {
14
- const { locales: r } = f(), e = p(() => v(o), [o]), m = p(
15
- () => x(e.variables),
16
- [e.variables]
17
- );
18
- return /* @__PURE__ */ d("div", { className: n("", l), children: [
19
- e.description && /* @__PURE__ */ i("p", { children: e.description }),
20
- r.length === 1 ? /* @__PURE__ */ i(
21
- c,
22
- {
23
- className: l,
24
- locale: r[0],
25
- name: [r[0], t, s].join("."),
26
- type: e.type,
27
- validate: m,
28
- variables: e.variables
29
- }
30
- ) : /* @__PURE__ */ i(
31
- "div",
32
- {
33
- className: n("-mx-3 flex min-w-0 gap-4 px-3", {
34
- "overflow-x-auto": e.type === "icu"
35
- // "flex-col": config.type === "rich",
36
- }),
37
- children: r.map((a) => /* @__PURE__ */ i(
38
- c,
39
- {
40
- className: "flex-1",
41
- label: a.toUpperCase(),
42
- locale: a,
43
- name: [a, t, s].join("."),
44
- type: e.type,
45
- validate: m,
46
- variables: e.variables
47
- },
48
- a
49
- ))
50
- }
51
- )
52
- ] });
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
3
+ import { useMessagesForm } from '../../components/MessageFormContext';
4
+ import { parseMessageSchema } from '../../utils/schema';
5
+ import { createValidator } from '../../utils/validate';
6
+ import { MessageController } from '../MessageController';
7
+ import styles from './MessageField.module.css';
8
+ export function MessageField({ schema, messageKey, path, hidden }) {
9
+ const { locales } = useMessagesForm();
10
+ const config = useMemo(()=>parseMessageSchema(schema), [
11
+ schema
12
+ ]);
13
+ const validator = useMemo(()=>createValidator(config.variables), [
14
+ config.variables
15
+ ]);
16
+ const [firstLocale, ...otherLocales] = locales;
17
+ if (!firstLocale) return null;
18
+ return /*#__PURE__*/ _jsxs("div", {
19
+ style: {
20
+ display: hidden ? 'none' : undefined
21
+ },
22
+ children: [
23
+ config.description && /*#__PURE__*/ _jsx("p", {
24
+ children: config.description
25
+ }),
26
+ otherLocales.length === 0 ? /*#__PURE__*/ _jsx(MessageController, {
27
+ locale: firstLocale,
28
+ name: [
29
+ firstLocale,
30
+ path,
31
+ messageKey
32
+ ].join('.'),
33
+ validate: validator,
34
+ variables: config.variables
35
+ }) : /*#__PURE__*/ _jsx("div", {
36
+ className: [
37
+ styles.localeRow,
38
+ styles.localeRowScrollable
39
+ ].filter(Boolean).join(' '),
40
+ children: locales.map((locale)=>/*#__PURE__*/ _jsx(MessageController, {
41
+ className: styles.localeItem,
42
+ label: locale.toUpperCase(),
43
+ locale: locale,
44
+ name: [
45
+ locale,
46
+ path,
47
+ messageKey
48
+ ].join('.'),
49
+ validate: validator,
50
+ variables: config.variables
51
+ }, locale))
52
+ })
53
+ ]
54
+ });
53
55
  }
54
- export {
55
- w as MessageField
56
- };
57
- //# sourceMappingURL=MessageField.js.map
56
+
57
+ //# sourceMappingURL=MessageField.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MessageField.js","sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { MessageSchema } from '@/types';\nimport { cn } from '@/utils/cn';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageController } from '../MessageController';\n\ninterface MessageFieldProps {\n schema: MessageSchema;\n messageKey: string;\n path: string;\n className?: string;\n}\n\nexport function MessageField({\n schema,\n messageKey,\n path,\n className,\n}: MessageFieldProps): React.ReactNode {\n const { locales } = useMessagesForm();\n\n const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n const validator = useMemo(\n () => createValidator(config.variables),\n [config.variables],\n );\n\n return (\n <div className={cn('', className)}>\n {config.description && <p>{config.description}</p>}\n\n {locales.length === 1 ? (\n <MessageController\n className={className}\n locale={locales[0]}\n name={[locales[0], path, messageKey].join('.')}\n type={config.type}\n validate={validator}\n variables={config.variables}\n />\n ) : (\n <div\n className={cn('-mx-3 flex min-w-0 gap-4 px-3', {\n 'overflow-x-auto': config.type === 'icu',\n // \"flex-col\": config.type === \"rich\",\n })}\n >\n {locales.map((locale) => (\n <MessageController\n className=\"flex-1\"\n key={locale}\n label={locale.toUpperCase()}\n locale={locale}\n name={[locale, path, messageKey].join('.')}\n type={config.type}\n validate={validator}\n variables={config.variables}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["MessageField","schema","messageKey","path","className","locales","useMessagesForm","config","useMemo","parseMessageSchema","validator","createValidator","cn","jsx","MessageController","locale"],"mappings":";;;;;;;AAgBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAASC,EAAQ,MAAMC,EAAmBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAE3DS,IAAYF;AAAA,IAChB,MAAMG,EAAgBJ,EAAO,SAAS;AAAA,IACtC,CAACA,EAAO,SAAS;AAAA,EAAA;AAGnB,2BACG,OAAA,EAAI,WAAWK,EAAG,IAAIR,CAAS,GAC7B,UAAA;AAAA,IAAAG,EAAO,eAAe,gBAAAM,EAAC,KAAA,EAAG,UAAAN,EAAO,aAAY;AAAA,IAE7CF,EAAQ,WAAW,IAClB,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAV;AAAA,QACA,QAAQC,EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,MAAMK,EAAO;AAAA,QACb,UAAUG;AAAA,QACV,WAAWH,EAAO;AAAA,MAAA;AAAA,IAAA,IAGpB,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,iCAAiC;AAAA,UAC7C,mBAAmBL,EAAO,SAAS;AAAA;AAAA,QAAA,CAEpC;AAAA,QAEA,UAAAF,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YAEV,OAAOC,EAAO,YAAA;AAAA,YACd,QAAAA;AAAA,YACA,MAAM,CAACA,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,YACzC,MAAMK,EAAO;AAAA,YACb,UAAUG;AAAA,YACV,WAAWH,EAAO;AAAA,UAAA;AAAA,UANbQ;AAAA,QAAA,CAQR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
1
+ {"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { MessageSchema } from '@/types';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageController } from '../MessageController';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n schema: MessageSchema;\n messageKey: string;\n path: string;\n hidden?: boolean;\n}\n\nexport function MessageField({\n schema,\n messageKey,\n path,\n hidden,\n}: MessageFieldProps): React.ReactNode {\n const { locales } = useMessagesForm();\n\n const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n const validator = useMemo(\n () => createValidator(config.variables),\n [config.variables],\n );\n\n const [firstLocale, ...otherLocales] = locales;\n\n if (!firstLocale) return null;\n\n return (\n <div style={{ display: hidden ? 'none' : undefined }}>\n {config.description && <p>{config.description}</p>}\n\n {otherLocales.length === 0 ? (\n <MessageController\n locale={firstLocale}\n name={[firstLocale, path, messageKey].join('.')}\n validate={validator}\n variables={config.variables}\n />\n ) : (\n <div\n className={[styles.localeRow, styles.localeRowScrollable]\n .filter(Boolean)\n .join(' ')}\n >\n {locales.map((locale) => (\n <MessageController\n className={styles.localeItem}\n key={locale}\n label={locale.toUpperCase()}\n locale={locale}\n name={[locale, path, messageKey].join('.')}\n validate={validator}\n variables={config.variables}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"],"names":["useMemo","useMessagesForm","parseMessageSchema","createValidator","MessageController","styles","MessageField","schema","messageKey","path","hidden","locales","config","validator","variables","firstLocale","otherLocales","div","style","display","undefined","description","p","length","locale","name","join","validate","className","localeRow","localeRowScrollable","filter","Boolean","map","localeItem","label","toUpperCase"],"mappings":";AAAA,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,kBAAkB,QAAQ,iBAAiB;AACpD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,OAAOC,YAAY,4BAA4B;AAS/C,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,MAAM,EACY;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGV;IAEpB,MAAMW,SAASZ,QAAQ,IAAME,mBAAmBK,SAAS;QAACA;KAAO;IAEjE,MAAMM,YAAYb,QAChB,IAAMG,gBAAgBS,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAM,CAACC,aAAa,GAAGC,aAAa,GAAGL;IAEvC,IAAI,CAACI,aAAa,OAAO;IAEzB,qBACE,MAACE;QAAIC,OAAO;YAAEC,SAAST,SAAS,SAASU;QAAU;;YAChDR,OAAOS,WAAW,kBAAI,KAACC;0BAAGV,OAAOS,WAAW;;YAE5CL,aAAaO,MAAM,KAAK,kBACvB,KAACnB;gBACCoB,QAAQT;gBACRU,MAAM;oBAACV;oBAAaN;oBAAMD;iBAAW,CAACkB,IAAI,CAAC;gBAC3CC,UAAUd;gBACVC,WAAWF,OAAOE,SAAS;+BAG7B,KAACG;gBACCW,WAAW;oBAACvB,OAAOwB,SAAS;oBAAExB,OAAOyB,mBAAmB;iBAAC,CACtDC,MAAM,CAACC,SACPN,IAAI,CAAC;0BAEPf,QAAQsB,GAAG,CAAC,CAACT,uBACZ,KAACpB;wBACCwB,WAAWvB,OAAO6B,UAAU;wBAE5BC,OAAOX,OAAOY,WAAW;wBACzBZ,QAAQA;wBACRC,MAAM;4BAACD;4BAAQf;4BAAMD;yBAAW,CAACkB,IAAI,CAAC;wBACtCC,UAAUd;wBACVC,WAAWF,OAAOE,SAAS;uBALtBU;;;;AAYnB"}
@@ -0,0 +1,19 @@
1
+ .localeRow {
2
+ margin-inline: -0.75rem;
3
+ display: flex;
4
+ min-width: 0;
5
+ gap: 1rem;
6
+ padding-inline: 0.75rem;
7
+ }
8
+
9
+ .localeRowScrollable {
10
+ overflow-x: auto;
11
+ }
12
+
13
+ .localeItem {
14
+ flex: 1;
15
+ }
16
+
17
+ .hidden {
18
+ display: none;
19
+ }
@@ -1,4 +1,4 @@
1
- import { MessagesSchema } from '../../types';
1
+ import type { MessagesSchema } from '../../types';
2
2
  interface MessagesTabsProps {
3
3
  schema: MessagesSchema;
4
4
  activeTab: string | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAqCrC"}
1
+ {"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoCrC"}
@@ -1,44 +1,41 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { Button as p } from "@payloadcms/ui";
3
- import { get as c } from "lodash-es";
4
- import { useCallback as b } from "react";
5
- import { useFormState as d } from "react-hook-form";
6
- import { useMessagesForm as u } from "../../context/messages-form.js";
7
- import { cn as f } from "../../utils/cn.js";
8
- import { toWords as x } from "../../utils/format.js";
9
- function N({
10
- schema: m,
11
- activeTab: o,
12
- setActiveTab: n
13
- }) {
14
- const { locales: t, control: l } = u(), { errors: e } = d({ control: l }), i = b(
15
- (r) => t.some((a) => c(e, [a, r]) !== void 0),
16
- [e, t]
17
- );
18
- return /* @__PURE__ */ s(
19
- "div",
20
- {
21
- className: "overflow-x-auto text-nowrap border-border border-b-2 px-4",
22
- role: "tablist",
23
- children: Object.keys(m).map((r) => /* @__PURE__ */ s(
24
- p,
25
- {
26
- buttonStyle: o === r ? "pill" : "tab",
27
- className: f(
28
- "my-0 rounded-b-none text-lg",
29
- i(r) ? o === r ? "bg-error" : "text-error" : void 0
30
- ),
31
- onClick: () => n(r),
32
- size: "large",
33
- type: "button",
34
- children: x(r)
35
- },
36
- r
37
- ))
38
- }
39
- );
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Button } from '@payloadcms/ui';
3
+ import { get } from 'lodash-es';
4
+ import { useCallback } from 'react';
5
+ import { useFormState } from 'react-hook-form';
6
+ import { useMessagesForm } from '../../components/MessageFormContext';
7
+ import { toWords } from '../../utils/format';
8
+ import styles from './MessagesTabs.module.css';
9
+ // TODO add hash for current tab to url
10
+ export function MessagesTabs({ schema, activeTab, setActiveTab }) {
11
+ const { locales, control } = useMessagesForm();
12
+ const { errors } = useFormState({
13
+ control
14
+ });
15
+ const hasErrors = useCallback((key)=>{
16
+ return locales.some((locale)=>get(errors, [
17
+ locale,
18
+ key
19
+ ]) !== undefined);
20
+ }, [
21
+ errors,
22
+ locales
23
+ ]);
24
+ return /*#__PURE__*/ _jsx("div", {
25
+ className: styles.tabs,
26
+ role: "tablist",
27
+ children: Object.keys(schema).map((key)=>/*#__PURE__*/ _jsx(Button, {
28
+ buttonStyle: activeTab === key ? 'pill' : 'tab',
29
+ className: [
30
+ styles.tab,
31
+ hasErrors(key) ? activeTab === key ? styles.tabError : styles.tabErrorInactive : undefined
32
+ ].filter(Boolean).join(' '),
33
+ onClick: ()=>setActiveTab(key),
34
+ size: "large",
35
+ type: "button",
36
+ children: toWords(key)
37
+ }, key))
38
+ });
40
39
  }
41
- export {
42
- N as MessagesTabs
43
- };
44
- //# sourceMappingURL=MessagesTabs.js.map
40
+
41
+ //# sourceMappingURL=MessagesTabs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MessagesTabs.js","sources":["../../../src/components/layout/MessagesTabs.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { MessagesSchema } from '@/types';\nimport { cn } from '@/utils/cn';\nimport { toWords } from '@/utils/format';\n\ninterface MessagesTabsProps {\n schema: MessagesSchema;\n activeTab: string | undefined;\n setActiveTab: (tab: string) => void;\n}\n\n// TODO add hash for current tab to url\nexport function MessagesTabs({\n schema,\n activeTab,\n setActiveTab,\n}: MessagesTabsProps): React.ReactNode {\n const { locales, control } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some((locale) => get(errors, [locale, key]) !== undefined);\n },\n [errors, locales],\n );\n\n return (\n <div\n className=\"overflow-x-auto text-nowrap border-border border-b-2 px-4\"\n role=\"tablist\"\n >\n {Object.keys(schema).map((key) => (\n <Button\n buttonStyle={activeTab === key ? 'pill' : 'tab'}\n className={cn(\n 'my-0 rounded-b-none text-lg',\n hasErrors(key)\n ? activeTab === key\n ? 'bg-error'\n : 'text-error'\n : undefined,\n )}\n key={key}\n onClick={() => setActiveTab(key)}\n size=\"large\"\n type=\"button\"\n >\n {toWords(key)}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["MessagesTabs","schema","activeTab","setActiveTab","locales","control","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","jsx","Button","cn"],"mappings":";;;;;;;;AAgBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAH,GAAS,GAErCI,IAAYC;AAAA,IAChB,CAACC,MACQP,EAAQ,KAAK,CAACQ,MAAWC,EAAIN,GAAQ,CAACK,GAAQD,CAAG,CAAC,MAAM,MAAS;AAAA,IAE1E,CAACJ,GAAQH,CAAO;AAAA,EAAA;AAGlB,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MAEJ,iBAAO,KAAKb,CAAM,EAAE,IAAI,CAACU,MACxB,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab,MAAcS,IAAM,SAAS;AAAA,UAC1C,WAAWK;AAAA,YACT;AAAA,YACAP,EAAUE,CAAG,IACTT,MAAcS,IACZ,aACA,eACF;AAAA,UAAA;AAAA,UAGN,SAAS,MAAMR,EAAaQ,CAAG;AAAA,UAC/B,MAAK;AAAA,UACL,MAAK;AAAA,UAEJ,YAAQA,CAAG;AAAA,QAAA;AAAA,QALPA;AAAA,MAAA,CAOR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"sources":["../../../src/components/layout/MessagesTabs.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { MessagesSchema } from '@/types';\nimport { toWords } from '@/utils/format';\nimport styles from './MessagesTabs.module.css';\n\ninterface MessagesTabsProps {\n schema: MessagesSchema;\n activeTab: string | undefined;\n setActiveTab: (tab: string) => void;\n}\n\n// TODO add hash for current tab to url\nexport function MessagesTabs({\n schema,\n activeTab,\n setActiveTab,\n}: MessagesTabsProps): React.ReactNode {\n const { locales, control } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some((locale) => get(errors, [locale, key]) !== undefined);\n },\n [errors, locales],\n );\n\n return (\n <div className={styles.tabs} role=\"tablist\">\n {Object.keys(schema).map((key) => (\n <Button\n buttonStyle={activeTab === key ? 'pill' : 'tab'}\n className={[\n styles.tab,\n hasErrors(key)\n ? activeTab === key\n ? styles.tabError\n : styles.tabErrorInactive\n : undefined,\n ]\n .filter(Boolean)\n .join(' ')}\n key={key}\n onClick={() => setActiveTab(key)}\n size=\"large\"\n type=\"button\"\n >\n {toWords(key)}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["Button","get","useCallback","useFormState","useMessagesForm","toWords","styles","MessagesTabs","schema","activeTab","setActiveTab","locales","control","errors","hasErrors","key","some","locale","undefined","div","className","tabs","role","Object","keys","map","buttonStyle","tab","tabError","tabErrorInactive","filter","Boolean","join","onClick","size","type"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,OAAO,QAAQ,iBAAiB;AACzC,OAAOC,YAAY,4BAA4B;AAQ/C,uCAAuC;AACvC,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,SAAS,EACTC,YAAY,EACM;IAClB,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC7B,MAAM,EAAES,MAAM,EAAE,GAAGV,aAAa;QAAES;IAAQ;IAE1C,MAAME,YAAYZ,YAChB,CAACa;QACC,OAAOJ,QAAQK,IAAI,CAAC,CAACC,SAAWhB,IAAIY,QAAQ;gBAACI;gBAAQF;aAAI,MAAMG;IACjE,GACA;QAACL;QAAQF;KAAQ;IAGnB,qBACE,KAACQ;QAAIC,WAAWd,OAAOe,IAAI;QAAEC,MAAK;kBAC/BC,OAAOC,IAAI,CAAChB,QAAQiB,GAAG,CAAC,CAACV,oBACxB,KAACf;gBACC0B,aAAajB,cAAcM,MAAM,SAAS;gBAC1CK,WAAW;oBACTd,OAAOqB,GAAG;oBACVb,UAAUC,OACNN,cAAcM,MACZT,OAAOsB,QAAQ,GACftB,OAAOuB,gBAAgB,GACzBX;iBACL,CACEY,MAAM,CAACC,SACPC,IAAI,CAAC;gBAERC,SAAS,IAAMvB,aAAaK;gBAC5BmB,MAAK;gBACLC,MAAK;0BAEJ9B,QAAQU;eALJA;;AAUf"}
@@ -0,0 +1,21 @@
1
+ .tabs {
2
+ overflow-x: auto;
3
+ white-space: nowrap;
4
+ border-bottom: 2px solid var(--theme-border-color);
5
+ padding-inline: 1rem;
6
+ }
7
+
8
+ .tab {
9
+ margin-block: 0;
10
+ border-bottom-left-radius: 0;
11
+ border-bottom-right-radius: 0;
12
+ font-size: var(--font-size-large);
13
+ }
14
+
15
+ .tabError {
16
+ background-color: var(--theme-error-100);
17
+ }
18
+
19
+ .tabErrorInactive {
20
+ color: var(--theme-error-400);
21
+ }
@@ -1,10 +1,11 @@
1
- import { Messages } from '../../types';
1
+ import type { Messages } from '../../types';
2
2
  interface MessagesTreeProps {
3
3
  path: string;
4
4
  nestingLevel: number;
5
5
  schema: Messages;
6
6
  className?: string;
7
+ hidden?: boolean;
7
8
  }
8
- export declare function MessagesTree({ path, schema, nestingLevel, className, }: MessagesTreeProps): React.ReactNode;
9
+ export declare function MessagesTree({ path, schema, nestingLevel, className, hidden, }: MessagesTreeProps): React.ReactNode;
9
10
  export {};
10
11
  //# sourceMappingURL=MessagesTree.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MessagesTree.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTree.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxC,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,YAAgB,EAChB,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAyDrC"}
1
+ {"version":3,"file":"MessagesTree.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTree.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxC,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,YAAgB,EAChB,SAAS,EACT,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8DrC"}
@@ -1,68 +1,66 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import { Collapsible as d } from "@payloadcms/ui";
3
- import { get as f } from "lodash-es";
4
- import { useCallback as g } from "react";
5
- import { useFormState as h } from "react-hook-form";
6
- import { useMessagesForm as x } from "../../context/messages-form.js";
7
- import { cn as a } from "../../utils/cn.js";
8
- import { toWords as N } from "../../utils/format.js";
9
- import { MessageField as b } from "./MessageField.js";
10
- function j({
11
- path: o,
12
- schema: l,
13
- nestingLevel: m = 0,
14
- className: n
15
- }) {
16
- const { control: c, locales: i } = x(), { errors: t } = h({ control: c }), p = g(
17
- (r) => i.some(
18
- (s) => f(t, [s, o, r].join(".")) !== void 0
19
- ),
20
- [t, i, o]
21
- );
22
- return /* @__PURE__ */ e("div", { className: a("grid gap-6", n), children: Object.entries(l).map(([r, s]) => /* @__PURE__ */ e(
23
- "div",
24
- {
25
- className: "grid min-w-0",
26
- style: {
27
- "--nesting-level": m
28
- },
29
- children: /* @__PURE__ */ e(
30
- d,
31
- {
32
- className: "messages-tree-collapsible min-w-0",
33
- header: /* @__PURE__ */ e(
34
- "span",
35
- {
36
- className: a("text-xl", {
37
- "text-error": p(r)
38
- }),
39
- children: N(r)
40
- }
41
- ),
42
- children: typeof s == "string" ? /* @__PURE__ */ e(
43
- b,
44
- {
45
- className: "min-w-0",
46
- messageKey: r,
47
- path: o,
48
- schema: s
49
- },
50
- r
51
- ) : /* @__PURE__ */ e(
52
- j,
53
- {
54
- nestingLevel: m + 1,
55
- path: [o, r].join("."),
56
- schema: s
57
- }
58
- )
59
- }
60
- )
61
- },
62
- r
63
- )) });
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Collapsible } from '@payloadcms/ui';
3
+ import { get } from 'lodash-es';
4
+ import { useCallback } from 'react';
5
+ import { useFormState } from 'react-hook-form';
6
+ import { useMessagesForm } from '../../components/MessageFormContext';
7
+ import { toWords } from '../../utils/format';
8
+ import { MessageField } from './MessageField';
9
+ import styles from './MessagesTree.module.css';
10
+ // TODO fix sticky position on single locale form
11
+ export function MessagesTree({ path, schema, nestingLevel = 0, className, hidden }) {
12
+ const { control, locales } = useMessagesForm();
13
+ const { errors } = useFormState({
14
+ control
15
+ });
16
+ const hasErrors = useCallback((key)=>{
17
+ return locales.some((locale)=>get(errors, [
18
+ locale,
19
+ path,
20
+ key
21
+ ].join('.')) !== undefined);
22
+ }, [
23
+ errors,
24
+ locales,
25
+ path
26
+ ]);
27
+ return /*#__PURE__*/ _jsx("div", {
28
+ className: [
29
+ styles.grid,
30
+ className
31
+ ].filter(Boolean).join(' '),
32
+ style: {
33
+ display: hidden ? 'none' : undefined
34
+ },
35
+ children: Object.entries(schema).map(([key, value])=>/*#__PURE__*/ _jsx("div", {
36
+ className: styles.item,
37
+ style: {
38
+ '--nesting-level': nestingLevel
39
+ },
40
+ children: /*#__PURE__*/ _jsx(Collapsible, {
41
+ className: styles.collapsible,
42
+ header: /*#__PURE__*/ _jsx("span", {
43
+ className: [
44
+ styles.header,
45
+ hasErrors(key) ? styles.headerError : undefined
46
+ ].filter(Boolean).join(' '),
47
+ children: toWords(key)
48
+ }),
49
+ children: typeof value === 'string' ? /*#__PURE__*/ _jsx(MessageField, {
50
+ messageKey: key,
51
+ path: path,
52
+ schema: value
53
+ }, key) : /*#__PURE__*/ _jsx(MessagesTree, {
54
+ nestingLevel: nestingLevel + 1,
55
+ path: [
56
+ path,
57
+ key
58
+ ].join('.'),
59
+ schema: value
60
+ })
61
+ })
62
+ }, key))
63
+ });
64
64
  }
65
- export {
66
- j as MessagesTree
67
- };
68
- //# sourceMappingURL=MessagesTree.js.map
65
+
66
+ //# sourceMappingURL=MessagesTree.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MessagesTree.js","sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import { Collapsible } from '@payloadcms/ui';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/context/messages-form';\nimport type { Messages } from '@/types';\nimport { cn } from '@/utils/cn';\nimport { toWords } from '@/utils/format';\n\nimport { MessageField } from './MessageField';\n\ninterface MessagesTreeProps {\n path: string;\n nestingLevel: number;\n schema: Messages;\n className?: string;\n}\n\n// TODO fix sticky position on single locale form\n\nexport function MessagesTree({\n path,\n schema,\n nestingLevel = 0,\n className,\n}: MessagesTreeProps): React.ReactNode {\n const { control, locales } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some(\n (locale) => get(errors, [locale, path, key].join('.')) !== undefined,\n );\n },\n [errors, locales, path],\n );\n\n return (\n <div className={cn('grid gap-6', className)}>\n {Object.entries(schema).map(([key, value]) => (\n <div\n className=\"grid min-w-0\"\n key={key}\n style={\n {\n ['--nesting-level']: nestingLevel,\n } as React.CSSProperties\n }\n >\n <Collapsible\n className=\"messages-tree-collapsible min-w-0\"\n header={\n <span\n className={cn('text-xl', {\n 'text-error': hasErrors(key),\n })}\n >\n {toWords(key)}\n </span>\n }\n >\n {typeof value === 'string' ? (\n <MessageField\n className=\"min-w-0\"\n key={key}\n messageKey={key}\n path={path}\n schema={value}\n />\n ) : (\n <MessagesTree\n nestingLevel={nestingLevel + 1}\n path={[path, key].join('.')}\n schema={value}\n />\n )}\n </Collapsible>\n </div>\n ))}\n </div>\n );\n}\n"],"names":["MessagesTree","path","schema","nestingLevel","className","control","locales","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","cn","value","jsx","Collapsible","MessageField"],"mappings":";;;;;;;;;AAoBO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAJ,GAAS,GAErCK,IAAYC;AAAA,IAChB,CAACC,MACQN,EAAQ;AAAA,MACb,CAACO,MAAWC,EAAIN,GAAQ,CAACK,GAAQZ,GAAMW,CAAG,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAAA;AAAA,IAG/D,CAACJ,GAAQF,GAASL,CAAI;AAAA,EAAA;AAGxB,2BACG,OAAA,EAAI,WAAWc,EAAG,cAAcX,CAAS,GACvC,UAAA,OAAO,QAAQF,CAAM,EAAE,IAAI,CAAC,CAACU,GAAKI,CAAK,MACtC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,OACE;AAAA,QACG,mBAAoBd;AAAA,MAAA;AAAA,MAIzB,UAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QACE,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAG,WAAW;AAAA,gBACvB,cAAcL,EAAUE,CAAG;AAAA,cAAA,CAC5B;AAAA,cAEA,YAAQA,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIf,UAAA,OAAOI,KAAU,WAChB,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cAEV,YAAYP;AAAA,cACZ,MAAAX;AAAA,cACA,QAAQe;AAAA,YAAA;AAAA,YAHHJ;AAAA,UAAA,IAMP,gBAAAK;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,cAAcG,IAAe;AAAA,cAC7B,MAAM,CAACF,GAAMW,CAAG,EAAE,KAAK,GAAG;AAAA,cAC1B,QAAQI;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,IAlCKJ;AAAA,EAAA,CAoCR,GACH;AAEJ;"}
1
+ {"version":3,"sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import { Collapsible } from '@payloadcms/ui';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { Messages } from '@/types';\nimport { toWords } from '@/utils/format';\n\nimport { MessageField } from './MessageField';\nimport styles from './MessagesTree.module.css';\n\ninterface MessagesTreeProps {\n path: string;\n nestingLevel: number;\n schema: Messages;\n className?: string;\n hidden?: boolean;\n}\n\n// TODO fix sticky position on single locale form\n\nexport function MessagesTree({\n path,\n schema,\n nestingLevel = 0,\n className,\n hidden,\n}: MessagesTreeProps): React.ReactNode {\n const { control, locales } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some(\n (locale) => get(errors, [locale, path, key].join('.')) !== undefined,\n );\n },\n [errors, locales, path],\n );\n\n return (\n <div\n className={[styles.grid, className].filter(Boolean).join(' ')}\n style={{ display: hidden ? 'none' : undefined }}\n >\n {Object.entries(schema).map(([key, value]) => (\n <div\n className={styles.item}\n key={key}\n style={\n {\n '--nesting-level': nestingLevel,\n } as React.CSSProperties\n }\n >\n <Collapsible\n className={styles.collapsible}\n header={\n <span\n className={[\n styles.header,\n hasErrors(key) ? styles.headerError : undefined,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {toWords(key)}\n </span>\n }\n >\n {typeof value === 'string' ? (\n <MessageField\n key={key}\n messageKey={key}\n path={path}\n schema={value}\n />\n ) : (\n <MessagesTree\n nestingLevel={nestingLevel + 1}\n path={[path, key].join('.')}\n schema={value}\n />\n )}\n </Collapsible>\n </div>\n ))}\n </div>\n );\n}\n"],"names":["Collapsible","get","useCallback","useFormState","useMessagesForm","toWords","MessageField","styles","MessagesTree","path","schema","nestingLevel","className","hidden","control","locales","errors","hasErrors","key","some","locale","join","undefined","div","grid","filter","Boolean","style","display","Object","entries","map","value","item","collapsible","header","span","headerError","messageKey"],"mappings":";AAAA,SAASA,WAAW,QAAQ,iBAAiB;AAC7C,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,OAAO,QAAQ,iBAAiB;AAEzC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,OAAOC,YAAY,4BAA4B;AAU/C,iDAAiD;AAEjD,OAAO,SAASC,aAAa,EAC3BC,IAAI,EACJC,MAAM,EACNC,eAAe,CAAC,EAChBC,SAAS,EACTC,MAAM,EACY;IAClB,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGX;IAC7B,MAAM,EAAEY,MAAM,EAAE,GAAGb,aAAa;QAAEW;IAAQ;IAE1C,MAAMG,YAAYf,YAChB,CAACgB;QACC,OAAOH,QAAQI,IAAI,CACjB,CAACC,SAAWnB,IAAIe,QAAQ;gBAACI;gBAAQX;gBAAMS;aAAI,CAACG,IAAI,CAAC,UAAUC;IAE/D,GACA;QAACN;QAAQD;QAASN;KAAK;IAGzB,qBACE,KAACc;QACCX,WAAW;YAACL,OAAOiB,IAAI;YAAEZ;SAAU,CAACa,MAAM,CAACC,SAASL,IAAI,CAAC;QACzDM,OAAO;YAAEC,SAASf,SAAS,SAASS;QAAU;kBAE7CO,OAAOC,OAAO,CAACpB,QAAQqB,GAAG,CAAC,CAAC,CAACb,KAAKc,MAAM,iBACvC,KAACT;gBACCX,WAAWL,OAAO0B,IAAI;gBAEtBN,OACE;oBACE,mBAAmBhB;gBACrB;0BAGF,cAAA,KAACX;oBACCY,WAAWL,OAAO2B,WAAW;oBAC7BC,sBACE,KAACC;wBACCxB,WAAW;4BACTL,OAAO4B,MAAM;4BACblB,UAAUC,OAAOX,OAAO8B,WAAW,GAAGf;yBACvC,CACEG,MAAM,CAACC,SACPL,IAAI,CAAC;kCAEPhB,QAAQa;;8BAIZ,OAAOc,UAAU,yBAChB,KAAC1B;wBAECgC,YAAYpB;wBACZT,MAAMA;wBACNC,QAAQsB;uBAHHd,qBAMP,KAACV;wBACCG,cAAcA,eAAe;wBAC7BF,MAAM;4BAACA;4BAAMS;yBAAI,CAACG,IAAI,CAAC;wBACvBX,QAAQsB;;;eAjCTd;;AAyCf"}
@@ -0,0 +1,36 @@
1
+ .grid {
2
+ display: grid;
3
+ gap: 1.5rem;
4
+ }
5
+
6
+ .item {
7
+ display: grid;
8
+ min-width: 0;
9
+ }
10
+
11
+ .collapsible {
12
+ min-width: 0;
13
+ }
14
+
15
+ .collapsible:hover {
16
+ border-color: var(--theme-border-color);
17
+ }
18
+
19
+ .collapsible > .collapsible__toggle-wrap {
20
+ position: sticky;
21
+ border-bottom: 1px solid var(--theme-border-color);
22
+ top: calc(var(--nesting-level) * 40px - 26px);
23
+ z-index: calc(9 - var(--nesting-level));
24
+ }
25
+
26
+ .collapsible .collapsible__content {
27
+ padding: 0.75rem;
28
+ }
29
+
30
+ .header {
31
+ font-size: var(--font-size-large);
32
+ }
33
+
34
+ .headerError {
35
+ color: var(--theme-error-400);
36
+ }
package/dist/const.d.ts CHANGED
@@ -1,11 +1,10 @@
1
- export declare const ENDPOINT_CONFIG: {
2
- setMessages: {
3
- path: string;
4
- method: "put";
5
- };
6
- getMessages: {
7
- path: string;
8
- method: "get";
9
- };
1
+ import type { Messages } from './types';
2
+ export declare const ENDPOINTS: {
3
+ getMessages: import("@repo/common").Procedure<{
4
+ locale: string;
5
+ }, Messages>;
6
+ setMessages: import("@repo/common").Procedure<void, {
7
+ success: boolean;
8
+ }>;
10
9
  };
11
10
  //# sourceMappingURL=const.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;CASiC,CAAC"}
1
+ {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,SAAS;;;;;iBASE,OAAO;;CAC9B,CAAC"}
package/dist/const.js CHANGED
@@ -1,14 +1,17 @@
1
- const t = {
2
- setMessages: {
3
- path: "/intl-plugin",
4
- method: "put"
5
- },
6
- getMessages: {
7
- path: "/intl-plugin/:locale",
8
- method: "get"
9
- }
1
+ import { defineProcedure } from '@repo/common';
2
+ import { z } from 'zod';
3
+ export const ENDPOINTS = {
4
+ getMessages: defineProcedure({
5
+ path: '/intl-plugin/:locale',
6
+ method: 'get',
7
+ input: z.object({
8
+ locale: z.string()
9
+ })
10
+ }).returns(),
11
+ setMessages: defineProcedure({
12
+ path: '/intl-plugin',
13
+ method: 'put'
14
+ }).returns()
10
15
  };
11
- export {
12
- t as ENDPOINT_CONFIG
13
- };
14
- //# sourceMappingURL=const.js.map
16
+
17
+ //# sourceMappingURL=const.js.map
package/dist/const.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["import type { Endpoint } from 'payload';\n\nexport const ENDPOINT_CONFIG = {\n setMessages: {\n path: '/intl-plugin',\n method: 'put',\n },\n getMessages: {\n path: '/intl-plugin/:locale',\n method: 'get',\n },\n} satisfies Record<string, Pick<Endpoint, 'path' | 'method'>>;\n"],"names":["ENDPOINT_CONFIG"],"mappings":"AAEO,MAAMA,IAAkB;AAAA,EAC7B,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAEZ;"}
1
+ {"version":3,"sources":["../src/const.ts"],"sourcesContent":["import { defineProcedure } from '@repo/common';\nimport { z } from 'zod';\nimport type { Messages } from './types';\n\nexport const ENDPOINTS = {\n getMessages: defineProcedure({\n path: '/intl-plugin/:locale',\n method: 'get',\n input: z.object({ locale: z.string() }),\n }).returns<Messages>(),\n setMessages: defineProcedure({\n path: '/intl-plugin',\n method: 'put',\n }).returns<{ success: boolean }>(),\n};\n"],"names":["defineProcedure","z","ENDPOINTS","getMessages","path","method","input","object","locale","string","returns","setMessages"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,SAASC,CAAC,QAAQ,MAAM;AAGxB,OAAO,MAAMC,YAAY;IACvBC,aAAaH,gBAAgB;QAC3BI,MAAM;QACNC,QAAQ;QACRC,OAAOL,EAAEM,MAAM,CAAC;YAAEC,QAAQP,EAAEQ,MAAM;QAAG;IACvC,GAAGC,OAAO;IACVC,aAAaX,gBAAgB;QAC3BI,MAAM;QACNC,QAAQ;IACV,GAAGK,OAAO;AACZ,EAAE"}
@@ -1,3 +1,3 @@
1
- import { Endpoint } from 'payload';
1
+ import type { Endpoint } from 'payload';
2
2
  export declare const getMessagesEndpoint: Endpoint;
3
3
  //# sourceMappingURL=get-messages.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"get-messages.d.ts","sourceRoot":"","sources":["../../src/endpoints/get-messages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAIxD,eAAO,MAAM,mBAAmB,EAAE,QAOjC,CAAC"}
1
+ {"version":3,"file":"get-messages.d.ts","sourceRoot":"","sources":["../../src/endpoints/get-messages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,SAAS,CAAC;AAIxD,eAAO,MAAM,mBAAmB,EAAE,QAIjC,CAAC"}