mogh_ui 1.2.7 → 1.2.9
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.
- package/dist/components/config/group.cjs +1 -1
- package/dist/components/config/group.cjs.map +1 -1
- package/dist/components/config/group.d.ts.map +1 -1
- package/dist/components/config/group.js +1 -1
- package/dist/components/config/group.js.map +1 -1
- package/dist/components/config/index.cjs.map +1 -1
- package/dist/components/config/index.d.ts +2 -0
- package/dist/components/config/index.d.ts.map +1 -1
- package/dist/components/config/index.js.map +1 -1
- package/dist/components/tabbed-page.cjs +30 -3
- package/dist/components/tabbed-page.cjs.map +1 -1
- package/dist/components/tabbed-page.d.ts +11 -1
- package/dist/components/tabbed-page.d.ts.map +1 -1
- package/dist/components/tabbed-page.js +28 -2
- package/dist/components/tabbed-page.js.map +1 -1
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@ function ConfigGroup({
|
|
|
42
42
|
if (args?.hidden) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
|
-
switch (typeof value) {
|
|
45
|
+
switch (value !== void 0 && value !== null ? typeof value : args?.type) {
|
|
46
46
|
case "string":
|
|
47
47
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
48
48
|
import_item.ConfigInput,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n config,\n update,\n setUpdate,\n disabled,\n fields,\n}: {\n config: T;\n update: Partial<T>;\n setUpdate: (update: Partial<T>) => void;\n disabled: boolean;\n fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n return (\n <Stack gap=\"xl\">\n {Object.entries(fields).map(([key, field]) => {\n const value =\n (update as { [key: string]: unknown })[key] ??\n (config as { [key: string]: unknown })[key];\n if (typeof field === \"function\") {\n return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n } else if (typeof field === \"object\" || field === true) {\n const args =\n typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n if (args?.hidden) {\n return null;\n }\n\n switch (typeof value) {\n case \"string\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={value}\n onValueChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"number\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={Number(value)}\n onValueChange={(value) =>\n setUpdate({ [key]: Number(value) } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"boolean\":\n return (\n <ConfigSwitch\n key={key}\n label={args?.label ?? key}\n value={value}\n onCheckedChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n description={args?.description}\n />\n );\n\n default:\n return (\n <Group>\n Config '{args?.label ?? key}':{\" \"}\n <CircleQuestionMark size=\"1rem\" />\n </Group>\n );\n }\n } else {\n return <Fragment key={key} />;\n }\n })}\n </Stack>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BiB;AA1BjB,mBAAyB;AAEzB,kBAA0C;AAC1C,kBAA6B;AAC7B,0BAAmC;AAE5B,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,4CAAC,qBAAM,KAAI,MACR,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5C,UAAM,QACH,OAAsC,GAAG,KACzC,OAAsC,GAAG;AAC5C,QAAI,OAAO,UAAU,YAAY;AAC/B,aAAO,4CAAC,yBAAoB,gBAAM,OAAO,SAAS,KAA5B,GAA8B;AAAA,IACtD,WAAW,OAAO,UAAU,YAAY,UAAU,MAAM;AACtD,YAAM,OACJ,OAAO,UAAU,WAAY,QAA4B;AAE3D,UAAI,MAAM,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n config,\n update,\n setUpdate,\n disabled,\n fields,\n}: {\n config: T;\n update: Partial<T>;\n setUpdate: (update: Partial<T>) => void;\n disabled: boolean;\n fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n return (\n <Stack gap=\"xl\">\n {Object.entries(fields).map(([key, field]) => {\n const value =\n (update as { [key: string]: unknown })[key] ??\n (config as { [key: string]: unknown })[key];\n if (typeof field === \"function\") {\n return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n } else if (typeof field === \"object\" || field === true) {\n const args =\n typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n if (args?.hidden) {\n return null;\n }\n\n switch (\n value !== undefined && value !== null ? typeof value : args?.type\n ) {\n case \"string\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={value as string}\n onValueChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"number\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={Number(value)}\n onValueChange={(value) =>\n setUpdate({ [key]: Number(value) } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"boolean\":\n return (\n <ConfigSwitch\n key={key}\n label={args?.label ?? key}\n value={value as boolean}\n onCheckedChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n description={args?.description}\n />\n );\n\n default:\n return (\n <Group>\n Config '{args?.label ?? key}':{\" \"}\n <CircleQuestionMark size=\"1rem\" />\n </Group>\n );\n }\n } else {\n return <Fragment key={key} />;\n }\n })}\n </Stack>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BiB;AA1BjB,mBAAyB;AAEzB,kBAA0C;AAC1C,kBAA6B;AAC7B,0BAAmC;AAE5B,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,4CAAC,qBAAM,KAAI,MACR,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5C,UAAM,QACH,OAAsC,GAAG,KACzC,OAAsC,GAAG;AAC5C,QAAI,OAAO,UAAU,YAAY;AAC/B,aAAO,4CAAC,yBAAoB,gBAAM,OAAO,SAAS,KAA5B,GAA8B;AAAA,IACtD,WAAW,OAAO,UAAU,YAAY,UAAU,MAAM;AACtD,YAAM,OACJ,OAAO,UAAU,WAAY,QAA4B;AAE3D,UAAI,MAAM,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,cACE,UAAU,UAAa,UAAU,OAAO,OAAO,QAAQ,MAAM,MAC7D;AAAA,QACA,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB,OAAO,OAAO,KAAK;AAAA,cACnB,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAG,OAAOA,MAAK,EAAE,CAAe;AAAA,cAElD,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,iBAAiB,CAACA,WAChB,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA;AAAA,YAPd;AAAA,UAQP;AAAA,QAGJ;AACE,iBACE,6CAAC,qBAAM;AAAA;AAAA,YACI,MAAM,SAAS;AAAA,YAAI;AAAA,YAAG;AAAA,YAC/B,4CAAC,0CAAmB,MAAK,QAAO;AAAA,aAClC;AAAA,MAEN;AAAA,IACF,OAAO;AACL,aAAO,4CAAC,2BAAc,GAAK;AAAA,IAC7B;AAAA,EACF,CAAC,GACH;AAEJ;","names":["value"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/config/group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,eAAe,EAAE,MAAM,GAAG,CAAC;AAKrD,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,GACP,EAAE;IACD,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;CACtC,+
|
|
1
|
+
{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/config/group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,eAAe,EAAE,MAAM,GAAG,CAAC;AAKrD,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,GACP,EAAE;IACD,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;CACtC,+BA8EA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n config,\n update,\n setUpdate,\n disabled,\n fields,\n}: {\n config: T;\n update: Partial<T>;\n setUpdate: (update: Partial<T>) => void;\n disabled: boolean;\n fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n return (\n <Stack gap=\"xl\">\n {Object.entries(fields).map(([key, field]) => {\n const value =\n (update as { [key: string]: unknown })[key] ??\n (config as { [key: string]: unknown })[key];\n if (typeof field === \"function\") {\n return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n } else if (typeof field === \"object\" || field === true) {\n const args =\n typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n if (args?.hidden) {\n return null;\n }\n\n switch (typeof value) {\n case \"string\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={value}\n onValueChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"number\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={Number(value)}\n onValueChange={(value) =>\n setUpdate({ [key]: Number(value) } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"boolean\":\n return (\n <ConfigSwitch\n key={key}\n label={args?.label ?? key}\n value={value}\n onCheckedChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n description={args?.description}\n />\n );\n\n default:\n return (\n <Group>\n Config '{args?.label ?? key}':{\" \"}\n <CircleQuestionMark size=\"1rem\" />\n </Group>\n );\n }\n } else {\n return <Fragment key={key} />;\n }\n })}\n </Stack>\n );\n}\n"],"mappings":"AA0BiB,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n config,\n update,\n setUpdate,\n disabled,\n fields,\n}: {\n config: T;\n update: Partial<T>;\n setUpdate: (update: Partial<T>) => void;\n disabled: boolean;\n fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n return (\n <Stack gap=\"xl\">\n {Object.entries(fields).map(([key, field]) => {\n const value =\n (update as { [key: string]: unknown })[key] ??\n (config as { [key: string]: unknown })[key];\n if (typeof field === \"function\") {\n return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n } else if (typeof field === \"object\" || field === true) {\n const args =\n typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n if (args?.hidden) {\n return null;\n }\n\n switch (\n value !== undefined && value !== null ? typeof value : args?.type\n ) {\n case \"string\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={value as string}\n onValueChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"number\":\n return (\n <ConfigInput\n key={key}\n label={args?.label ?? key}\n value={Number(value)}\n onValueChange={(value) =>\n setUpdate({ [key]: Number(value) } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n placeholder={args?.placeholder}\n description={args?.description}\n />\n );\n\n case \"boolean\":\n return (\n <ConfigSwitch\n key={key}\n label={args?.label ?? key}\n value={value as boolean}\n onCheckedChange={(value) =>\n setUpdate({ [key]: value } as Partial<T>)\n }\n disabled={args?.disabled || disabled}\n description={args?.description}\n />\n );\n\n default:\n return (\n <Group>\n Config '{args?.label ?? key}':{\" \"}\n <CircleQuestionMark size=\"1rem\" />\n </Group>\n );\n }\n } else {\n return <Fragment key={key} />;\n }\n })}\n </Stack>\n );\n}\n"],"mappings":"AA0BiB,cA0DD,YA1DC;AA1BjB,SAAS,gBAAgB;AAEzB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,OAAO,aAAa;AAC7B,SAAS,0BAA0B;AAE5B,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,oBAAC,SAAM,KAAI,MACR,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5C,UAAM,QACH,OAAsC,GAAG,KACzC,OAAsC,GAAG;AAC5C,QAAI,OAAO,UAAU,YAAY;AAC/B,aAAO,oBAAC,YAAoB,gBAAM,OAAO,SAAS,KAA5B,GAA8B;AAAA,IACtD,WAAW,OAAO,UAAU,YAAY,UAAU,MAAM;AACtD,YAAM,OACJ,OAAO,UAAU,WAAY,QAA4B;AAE3D,UAAI,MAAM,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,cACE,UAAU,UAAa,UAAU,OAAO,OAAO,QAAQ,MAAM,MAC7D;AAAA,QACA,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB,OAAO,OAAO,KAAK;AAAA,cACnB,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAG,OAAOA,MAAK,EAAE,CAAe;AAAA,cAElD,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,iBAAiB,CAACA,WAChB,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA;AAAA,YAPd;AAAA,UAQP;AAAA,QAGJ;AACE,iBACE,qBAAC,SAAM;AAAA;AAAA,YACI,MAAM,SAAS;AAAA,YAAI;AAAA,YAAG;AAAA,YAC/B,oBAAC,sBAAmB,MAAK,QAAO;AAAA,aAClC;AAAA,MAEN;AAAA,IACF,OAAO;AACL,aAAO,oBAAC,cAAc,GAAK;AAAA,IAC7B;AAAA,EACF,CAAC,GACH;AAEJ;","names":["value"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n Anchor,\n Box,\n Button,\n Flex,\n Group,\n ScrollArea,\n Select,\n Stack,\n Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\nimport { SectionProps } from \"../section\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n label?: string;\n description?: ReactNode;\n /** Use a selector instead of input */\n options?: { value: string; label?: string; icon?: ReactNode }[];\n placeholder?: string;\n hidden?: boolean;\n disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n label: string;\n labelExtra?: ReactNode;\n icon?: ReactNode;\n description?: ReactNode;\n actions?: ReactNode;\n hidden?: boolean;\n labelHidden?: boolean;\n contentHidden?: boolean;\n fields: {\n [K in keyof Partial<T>]:\n | boolean\n | ConfigFieldArgs\n | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n };\n}\n\nexport interface ConfigProps<T> extends SectionProps {\n original: T;\n update: Partial<T>;\n setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n disabled: boolean;\n onSave: () => Promise<unknown>;\n disableSidebar?: boolean;\n fileContentsLanguage?: MonacoLanguage;\n enableFancyToml?: boolean;\n groups: Record<\n string, // Section key\n ConfigGroupArgs<T>[] | false | undefined\n >;\n}\n\nexport function Config<T>({\n original,\n update,\n setUpdate,\n disabled,\n onSave,\n disableSidebar,\n fileContentsLanguage,\n enableFancyToml,\n groups: _groups,\n ...sectionProps\n}: ConfigProps<T>) {\n const changesMade = Object.keys(update).length ? true : false;\n const onConfirm = async () => {\n await onSave();\n setUpdate({});\n };\n const onReset = () => setUpdate({});\n\n const groups = useMemo(\n () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n [_groups],\n );\n\n const GroupsComponent = useMemo(\n () =>\n groups.map(([group, groupArgs]) => {\n return (\n <Fragment key={group}>\n {group && (\n <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n {group}\n </Text>\n )}\n\n <Stack>\n {(groupArgs as ConfigGroupArgs<T>[])\n .filter(({ hidden }) => !hidden)\n .map(\n ({\n label,\n labelHidden,\n icon,\n labelExtra,\n actions,\n description,\n contentHidden,\n fields,\n }) => (\n <Stack\n key={group + label}\n id={group + label}\n p=\"xl\"\n gap=\"md\"\n className=\"bordered-light\"\n bdrs=\"md\"\n style={{ scrollMarginTop: 94 }}\n >\n {!labelHidden && (\n <Group justify=\"space-between\">\n <Stack gap=\"0\">\n <Group>\n {icon}\n <Text fz=\"h3\">{label}</Text>\n {labelExtra}\n </Group>\n {description && (\n <Text c=\"dimmed\">{description}</Text>\n )}\n </Stack>\n {actions}\n </Group>\n )}\n {!contentHidden && (\n <ConfigGroup\n config={original}\n update={update}\n setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n fields={fields}\n disabled={disabled}\n />\n )}\n </Stack>\n ),\n )}\n </Stack>\n </Fragment>\n );\n }),\n [groups],\n );\n\n const SaveOrReset = ({\n unsavedIndicator,\n fullWidth,\n }: {\n unsavedIndicator?: boolean;\n fullWidth?: boolean;\n }) =>\n changesMade && (\n <>\n {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n <Button\n variant=\"outline\"\n onClick={onReset}\n disabled={disabled || !changesMade}\n leftSection={<History size=\"1rem\" />}\n fullWidth={fullWidth}\n w={fullWidth ? undefined : 100}\n >\n Reset\n </Button>\n <ConfirmUpdate\n original={original}\n update={update}\n onConfirm={onConfirm}\n disabled={disabled}\n fileContentsLanguage={fileContentsLanguage}\n fullWidth={fullWidth}\n enableFancyToml={enableFancyToml}\n />\n </>\n );\n\n const SaveOrResetComponent = changesMade && (\n <>\n <Group visibleFrom=\"xs\" justify=\"flex-end\">\n <SaveOrReset unsavedIndicator />\n </Group>\n <Stack hiddenFrom=\"xs\">\n <SaveOrReset unsavedIndicator fullWidth />\n </Stack>\n </>\n );\n\n return (\n <ConfigLayout SaveOrReset={SaveOrResetComponent} {...sectionProps}>\n {disableSidebar && (\n <>\n {GroupsComponent}\n {SaveOrResetComponent}\n </>\n )}\n {!disableSidebar && (\n <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n {/** SIDEBAR (LG) */}\n <Box\n visibleFrom=\"lg\"\n pos=\"relative\"\n className=\"bordered-light\"\n style={{\n borderLeftWidth: 0,\n borderBottomWidth: 0,\n borderTopRightRadius: \"var(--mantine-radius-md)\",\n }}\n >\n <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n {/** ANCHORS */}\n <ScrollArea\n mah={\n changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n }\n >\n <Stack>\n {groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => (\n <Stack key={group} gap=\"xs\">\n <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n <Bookmark size=\"1rem\" />\n <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n </Group>\n <Stack gap=\"0.1rem\">\n {groupArgs &&\n groupArgs\n .filter((groupArgs) => !groupArgs.hidden)\n .map((groupArgs) => (\n <Button\n key={group + groupArgs.label}\n variant=\"subtle\"\n justify=\"flex-end\"\n size=\"sm\"\n fullWidth\n renderRoot={(props) => (\n <Anchor\n href={\"#\" + group + groupArgs.label}\n {...props}\n />\n )}\n >\n {groupArgs.label}\n </Button>\n ))}\n </Stack>\n </Stack>\n ))}\n </Stack>\n </ScrollArea>\n\n {/** SAVE */}\n <Stack gap=\"xs\">\n <SaveOrReset fullWidth />\n </Stack>\n </Stack>\n </Box>\n\n {/** SELECTOR (MOBILE) */}\n <Select\n hiddenFrom=\"lg\"\n className=\"select-nondimmed-placeholder\"\n placeholder=\"Go To\"\n leftSection={<Bookmark size=\"1rem\" />}\n value={null}\n data={groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => ({\n group,\n items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n label: arg.label,\n value: group + arg.label,\n })),\n }))}\n onChange={(group) => {\n if (!group) return;\n window.location.hash = group;\n }}\n />\n\n {/** CONTENT */}\n <Stack style={{ flexGrow: 1 }} gap=\"md\">\n {GroupsComponent}\n {SaveOrResetComponent}\n </Stack>\n </Flex>\n )}\n </ConfigLayout>\n );\n}\n"],"mappings":"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","names":["groupArgs"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n Anchor,\n Box,\n Button,\n Flex,\n Group,\n ScrollArea,\n Select,\n Stack,\n Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\nimport { SectionProps } from \"../section\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n label?: string;\n description?: ReactNode;\n /** Useful to set explicitly in cases where value is nullable from the API (so type cannot be inferred). */\n type?:\n | \"string\"\n | \"number\"\n | \"bigint\"\n | \"boolean\"\n | \"symbol\"\n | \"undefined\"\n | \"object\"\n | \"function\";\n /** Use a selector instead of input */\n options?: { value: string; label?: string; icon?: ReactNode }[];\n placeholder?: string;\n hidden?: boolean;\n disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n label: string;\n labelExtra?: ReactNode;\n icon?: ReactNode;\n description?: ReactNode;\n actions?: ReactNode;\n hidden?: boolean;\n labelHidden?: boolean;\n contentHidden?: boolean;\n fields: {\n [K in keyof Partial<T>]:\n | boolean\n | ConfigFieldArgs\n | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n };\n}\n\nexport interface ConfigProps<T> extends SectionProps {\n original: T;\n update: Partial<T>;\n setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n disabled: boolean;\n onSave: () => Promise<unknown>;\n disableSidebar?: boolean;\n fileContentsLanguage?: MonacoLanguage;\n enableFancyToml?: boolean;\n groups: Record<\n string, // Section key\n ConfigGroupArgs<T>[] | false | undefined\n >;\n}\n\nexport function Config<T>({\n original,\n update,\n setUpdate,\n disabled,\n onSave,\n disableSidebar,\n fileContentsLanguage,\n enableFancyToml,\n groups: _groups,\n ...sectionProps\n}: ConfigProps<T>) {\n const changesMade = Object.keys(update).length ? true : false;\n const onConfirm = async () => {\n await onSave();\n setUpdate({});\n };\n const onReset = () => setUpdate({});\n\n const groups = useMemo(\n () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n [_groups],\n );\n\n const GroupsComponent = useMemo(\n () =>\n groups.map(([group, groupArgs]) => {\n return (\n <Fragment key={group}>\n {group && (\n <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n {group}\n </Text>\n )}\n\n <Stack>\n {(groupArgs as ConfigGroupArgs<T>[])\n .filter(({ hidden }) => !hidden)\n .map(\n ({\n label,\n labelHidden,\n icon,\n labelExtra,\n actions,\n description,\n contentHidden,\n fields,\n }) => (\n <Stack\n key={group + label}\n id={group + label}\n p=\"xl\"\n gap=\"md\"\n className=\"bordered-light\"\n bdrs=\"md\"\n style={{ scrollMarginTop: 94 }}\n >\n {!labelHidden && (\n <Group justify=\"space-between\">\n <Stack gap=\"0\">\n <Group>\n {icon}\n <Text fz=\"h3\">{label}</Text>\n {labelExtra}\n </Group>\n {description && (\n <Text c=\"dimmed\">{description}</Text>\n )}\n </Stack>\n {actions}\n </Group>\n )}\n {!contentHidden && (\n <ConfigGroup\n config={original}\n update={update}\n setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n fields={fields}\n disabled={disabled}\n />\n )}\n </Stack>\n ),\n )}\n </Stack>\n </Fragment>\n );\n }),\n [groups],\n );\n\n const SaveOrReset = ({\n unsavedIndicator,\n fullWidth,\n }: {\n unsavedIndicator?: boolean;\n fullWidth?: boolean;\n }) =>\n changesMade && (\n <>\n {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n <Button\n variant=\"outline\"\n onClick={onReset}\n disabled={disabled || !changesMade}\n leftSection={<History size=\"1rem\" />}\n fullWidth={fullWidth}\n w={fullWidth ? undefined : 100}\n >\n Reset\n </Button>\n <ConfirmUpdate\n original={original}\n update={update}\n onConfirm={onConfirm}\n disabled={disabled}\n fileContentsLanguage={fileContentsLanguage}\n fullWidth={fullWidth}\n enableFancyToml={enableFancyToml}\n />\n </>\n );\n\n const SaveOrResetComponent = changesMade && (\n <>\n <Group visibleFrom=\"xs\" justify=\"flex-end\">\n <SaveOrReset unsavedIndicator />\n </Group>\n <Stack hiddenFrom=\"xs\">\n <SaveOrReset unsavedIndicator fullWidth />\n </Stack>\n </>\n );\n\n return (\n <ConfigLayout SaveOrReset={SaveOrResetComponent} {...sectionProps}>\n {disableSidebar && (\n <>\n {GroupsComponent}\n {SaveOrResetComponent}\n </>\n )}\n {!disableSidebar && (\n <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n {/** SIDEBAR (LG) */}\n <Box\n visibleFrom=\"lg\"\n pos=\"relative\"\n className=\"bordered-light\"\n style={{\n borderLeftWidth: 0,\n borderBottomWidth: 0,\n borderTopRightRadius: \"var(--mantine-radius-md)\",\n }}\n >\n <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n {/** ANCHORS */}\n <ScrollArea\n mah={\n changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n }\n >\n <Stack>\n {groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => (\n <Stack key={group} gap=\"xs\">\n <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n <Bookmark size=\"1rem\" />\n <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n </Group>\n <Stack gap=\"0.1rem\">\n {groupArgs &&\n groupArgs\n .filter((groupArgs) => !groupArgs.hidden)\n .map((groupArgs) => (\n <Button\n key={group + groupArgs.label}\n variant=\"subtle\"\n justify=\"flex-end\"\n size=\"sm\"\n fullWidth\n renderRoot={(props) => (\n <Anchor\n href={\"#\" + group + groupArgs.label}\n {...props}\n />\n )}\n >\n {groupArgs.label}\n </Button>\n ))}\n </Stack>\n </Stack>\n ))}\n </Stack>\n </ScrollArea>\n\n {/** SAVE */}\n <Stack gap=\"xs\">\n <SaveOrReset fullWidth />\n </Stack>\n </Stack>\n </Box>\n\n {/** SELECTOR (MOBILE) */}\n <Select\n hiddenFrom=\"lg\"\n className=\"select-nondimmed-placeholder\"\n placeholder=\"Go To\"\n leftSection={<Bookmark size=\"1rem\" />}\n value={null}\n data={groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => ({\n group,\n items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n label: arg.label,\n value: group + arg.label,\n })),\n }))}\n onChange={(group) => {\n if (!group) return;\n window.location.hash = group;\n }}\n />\n\n {/** CONTENT */}\n <Stack style={{ flexGrow: 1 }} gap=\"md\">\n {GroupsComponent}\n {SaveOrResetComponent}\n </Stack>\n </Flex>\n )}\n </ConfigLayout>\n );\n}\n"],"mappings":"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","names":["groupArgs"]}
|
|
@@ -9,6 +9,8 @@ export * from "./unsaved-changes";
|
|
|
9
9
|
export interface ConfigFieldArgs {
|
|
10
10
|
label?: string;
|
|
11
11
|
description?: ReactNode;
|
|
12
|
+
/** Useful to set explicitly in cases where value is nullable from the API (so type cannot be inferred). */
|
|
13
|
+
type?: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
|
|
12
14
|
/** Use a selector instead of input */
|
|
13
15
|
options?: {
|
|
14
16
|
value: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/config/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAiB3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAElC,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sCAAsC;IACtC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE;SACL,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,GAClB,OAAO,GACP,eAAe,GACf,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,SAAS,CAAC;KACnE,CAAC;CACH;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,CAAE,SAAQ,YAAY;IAClD,QAAQ,EAAE,CAAC,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,MAAM,CACZ,MAAM,EAAE,cAAc;IACtB,AADQ,cAAc;IACtB,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,SAAS,CACzC,CAAC;CACH;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,MAAM,EAAE,OAAO,EACf,GAAG,YAAY,EAChB,EAAE,WAAW,CAAC,CAAC,CAAC,+BAkOhB"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/config/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAiB3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAElC,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2GAA2G;IAC3G,IAAI,CAAC,EACD,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,UAAU,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE;SACL,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,GAClB,OAAO,GACP,eAAe,GACf,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,SAAS,CAAC;KACnE,CAAC;CACH;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,CAAE,SAAQ,YAAY;IAClD,QAAQ,EAAE,CAAC,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,cAAc,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,MAAM,CACZ,MAAM,EAAE,cAAc;IACtB,AADQ,cAAc;IACtB,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,SAAS,CACzC,CAAC;CACH;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,MAAM,EAAE,OAAO,EACf,GAAG,YAAY,EAChB,EAAE,WAAW,CAAC,CAAC,CAAC,+BAkOhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n Anchor,\n Box,\n Button,\n Flex,\n Group,\n ScrollArea,\n Select,\n Stack,\n Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\nimport { SectionProps } from \"../section\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n label?: string;\n description?: ReactNode;\n /** Use a selector instead of input */\n options?: { value: string; label?: string; icon?: ReactNode }[];\n placeholder?: string;\n hidden?: boolean;\n disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n label: string;\n labelExtra?: ReactNode;\n icon?: ReactNode;\n description?: ReactNode;\n actions?: ReactNode;\n hidden?: boolean;\n labelHidden?: boolean;\n contentHidden?: boolean;\n fields: {\n [K in keyof Partial<T>]:\n | boolean\n | ConfigFieldArgs\n | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n };\n}\n\nexport interface ConfigProps<T> extends SectionProps {\n original: T;\n update: Partial<T>;\n setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n disabled: boolean;\n onSave: () => Promise<unknown>;\n disableSidebar?: boolean;\n fileContentsLanguage?: MonacoLanguage;\n enableFancyToml?: boolean;\n groups: Record<\n string, // Section key\n ConfigGroupArgs<T>[] | false | undefined\n >;\n}\n\nexport function Config<T>({\n original,\n update,\n setUpdate,\n disabled,\n onSave,\n disableSidebar,\n fileContentsLanguage,\n enableFancyToml,\n groups: _groups,\n ...sectionProps\n}: ConfigProps<T>) {\n const changesMade = Object.keys(update).length ? true : false;\n const onConfirm = async () => {\n await onSave();\n setUpdate({});\n };\n const onReset = () => setUpdate({});\n\n const groups = useMemo(\n () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n [_groups],\n );\n\n const GroupsComponent = useMemo(\n () =>\n groups.map(([group, groupArgs]) => {\n return (\n <Fragment key={group}>\n {group && (\n <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n {group}\n </Text>\n )}\n\n <Stack>\n {(groupArgs as ConfigGroupArgs<T>[])\n .filter(({ hidden }) => !hidden)\n .map(\n ({\n label,\n labelHidden,\n icon,\n labelExtra,\n actions,\n description,\n contentHidden,\n fields,\n }) => (\n <Stack\n key={group + label}\n id={group + label}\n p=\"xl\"\n gap=\"md\"\n className=\"bordered-light\"\n bdrs=\"md\"\n style={{ scrollMarginTop: 94 }}\n >\n {!labelHidden && (\n <Group justify=\"space-between\">\n <Stack gap=\"0\">\n <Group>\n {icon}\n <Text fz=\"h3\">{label}</Text>\n {labelExtra}\n </Group>\n {description && (\n <Text c=\"dimmed\">{description}</Text>\n )}\n </Stack>\n {actions}\n </Group>\n )}\n {!contentHidden && (\n <ConfigGroup\n config={original}\n update={update}\n setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n fields={fields}\n disabled={disabled}\n />\n )}\n </Stack>\n ),\n )}\n </Stack>\n </Fragment>\n );\n }),\n [groups],\n );\n\n const SaveOrReset = ({\n unsavedIndicator,\n fullWidth,\n }: {\n unsavedIndicator?: boolean;\n fullWidth?: boolean;\n }) =>\n changesMade && (\n <>\n {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n <Button\n variant=\"outline\"\n onClick={onReset}\n disabled={disabled || !changesMade}\n leftSection={<History size=\"1rem\" />}\n fullWidth={fullWidth}\n w={fullWidth ? undefined : 100}\n >\n Reset\n </Button>\n <ConfirmUpdate\n original={original}\n update={update}\n onConfirm={onConfirm}\n disabled={disabled}\n fileContentsLanguage={fileContentsLanguage}\n fullWidth={fullWidth}\n enableFancyToml={enableFancyToml}\n />\n </>\n );\n\n const SaveOrResetComponent = changesMade && (\n <>\n <Group visibleFrom=\"xs\" justify=\"flex-end\">\n <SaveOrReset unsavedIndicator />\n </Group>\n <Stack hiddenFrom=\"xs\">\n <SaveOrReset unsavedIndicator fullWidth />\n </Stack>\n </>\n );\n\n return (\n <ConfigLayout SaveOrReset={SaveOrResetComponent} {...sectionProps}>\n {disableSidebar && (\n <>\n {GroupsComponent}\n {SaveOrResetComponent}\n </>\n )}\n {!disableSidebar && (\n <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n {/** SIDEBAR (LG) */}\n <Box\n visibleFrom=\"lg\"\n pos=\"relative\"\n className=\"bordered-light\"\n style={{\n borderLeftWidth: 0,\n borderBottomWidth: 0,\n borderTopRightRadius: \"var(--mantine-radius-md)\",\n }}\n >\n <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n {/** ANCHORS */}\n <ScrollArea\n mah={\n changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n }\n >\n <Stack>\n {groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => (\n <Stack key={group} gap=\"xs\">\n <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n <Bookmark size=\"1rem\" />\n <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n </Group>\n <Stack gap=\"0.1rem\">\n {groupArgs &&\n groupArgs\n .filter((groupArgs) => !groupArgs.hidden)\n .map((groupArgs) => (\n <Button\n key={group + groupArgs.label}\n variant=\"subtle\"\n justify=\"flex-end\"\n size=\"sm\"\n fullWidth\n renderRoot={(props) => (\n <Anchor\n href={\"#\" + group + groupArgs.label}\n {...props}\n />\n )}\n >\n {groupArgs.label}\n </Button>\n ))}\n </Stack>\n </Stack>\n ))}\n </Stack>\n </ScrollArea>\n\n {/** SAVE */}\n <Stack gap=\"xs\">\n <SaveOrReset fullWidth />\n </Stack>\n </Stack>\n </Box>\n\n {/** SELECTOR (MOBILE) */}\n <Select\n hiddenFrom=\"lg\"\n className=\"select-nondimmed-placeholder\"\n placeholder=\"Go To\"\n leftSection={<Bookmark size=\"1rem\" />}\n value={null}\n data={groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => ({\n group,\n items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n label: arg.label,\n value: group + arg.label,\n })),\n }))}\n onChange={(group) => {\n if (!group) return;\n window.location.hash = group;\n }}\n />\n\n {/** CONTENT */}\n <Stack style={{ flexGrow: 1 }} gap=\"md\">\n {GroupsComponent}\n {SaveOrResetComponent}\n </Stack>\n </Flex>\n )}\n </ConfigLayout>\n );\n}\n"],"mappings":"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","names":["Fragment","groupArgs"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n Anchor,\n Box,\n Button,\n Flex,\n Group,\n ScrollArea,\n Select,\n Stack,\n Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\nimport { SectionProps } from \"../section\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n label?: string;\n description?: ReactNode;\n /** Useful to set explicitly in cases where value is nullable from the API (so type cannot be inferred). */\n type?:\n | \"string\"\n | \"number\"\n | \"bigint\"\n | \"boolean\"\n | \"symbol\"\n | \"undefined\"\n | \"object\"\n | \"function\";\n /** Use a selector instead of input */\n options?: { value: string; label?: string; icon?: ReactNode }[];\n placeholder?: string;\n hidden?: boolean;\n disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n label: string;\n labelExtra?: ReactNode;\n icon?: ReactNode;\n description?: ReactNode;\n actions?: ReactNode;\n hidden?: boolean;\n labelHidden?: boolean;\n contentHidden?: boolean;\n fields: {\n [K in keyof Partial<T>]:\n | boolean\n | ConfigFieldArgs\n | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n };\n}\n\nexport interface ConfigProps<T> extends SectionProps {\n original: T;\n update: Partial<T>;\n setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n disabled: boolean;\n onSave: () => Promise<unknown>;\n disableSidebar?: boolean;\n fileContentsLanguage?: MonacoLanguage;\n enableFancyToml?: boolean;\n groups: Record<\n string, // Section key\n ConfigGroupArgs<T>[] | false | undefined\n >;\n}\n\nexport function Config<T>({\n original,\n update,\n setUpdate,\n disabled,\n onSave,\n disableSidebar,\n fileContentsLanguage,\n enableFancyToml,\n groups: _groups,\n ...sectionProps\n}: ConfigProps<T>) {\n const changesMade = Object.keys(update).length ? true : false;\n const onConfirm = async () => {\n await onSave();\n setUpdate({});\n };\n const onReset = () => setUpdate({});\n\n const groups = useMemo(\n () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n [_groups],\n );\n\n const GroupsComponent = useMemo(\n () =>\n groups.map(([group, groupArgs]) => {\n return (\n <Fragment key={group}>\n {group && (\n <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n {group}\n </Text>\n )}\n\n <Stack>\n {(groupArgs as ConfigGroupArgs<T>[])\n .filter(({ hidden }) => !hidden)\n .map(\n ({\n label,\n labelHidden,\n icon,\n labelExtra,\n actions,\n description,\n contentHidden,\n fields,\n }) => (\n <Stack\n key={group + label}\n id={group + label}\n p=\"xl\"\n gap=\"md\"\n className=\"bordered-light\"\n bdrs=\"md\"\n style={{ scrollMarginTop: 94 }}\n >\n {!labelHidden && (\n <Group justify=\"space-between\">\n <Stack gap=\"0\">\n <Group>\n {icon}\n <Text fz=\"h3\">{label}</Text>\n {labelExtra}\n </Group>\n {description && (\n <Text c=\"dimmed\">{description}</Text>\n )}\n </Stack>\n {actions}\n </Group>\n )}\n {!contentHidden && (\n <ConfigGroup\n config={original}\n update={update}\n setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n fields={fields}\n disabled={disabled}\n />\n )}\n </Stack>\n ),\n )}\n </Stack>\n </Fragment>\n );\n }),\n [groups],\n );\n\n const SaveOrReset = ({\n unsavedIndicator,\n fullWidth,\n }: {\n unsavedIndicator?: boolean;\n fullWidth?: boolean;\n }) =>\n changesMade && (\n <>\n {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n <Button\n variant=\"outline\"\n onClick={onReset}\n disabled={disabled || !changesMade}\n leftSection={<History size=\"1rem\" />}\n fullWidth={fullWidth}\n w={fullWidth ? undefined : 100}\n >\n Reset\n </Button>\n <ConfirmUpdate\n original={original}\n update={update}\n onConfirm={onConfirm}\n disabled={disabled}\n fileContentsLanguage={fileContentsLanguage}\n fullWidth={fullWidth}\n enableFancyToml={enableFancyToml}\n />\n </>\n );\n\n const SaveOrResetComponent = changesMade && (\n <>\n <Group visibleFrom=\"xs\" justify=\"flex-end\">\n <SaveOrReset unsavedIndicator />\n </Group>\n <Stack hiddenFrom=\"xs\">\n <SaveOrReset unsavedIndicator fullWidth />\n </Stack>\n </>\n );\n\n return (\n <ConfigLayout SaveOrReset={SaveOrResetComponent} {...sectionProps}>\n {disableSidebar && (\n <>\n {GroupsComponent}\n {SaveOrResetComponent}\n </>\n )}\n {!disableSidebar && (\n <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n {/** SIDEBAR (LG) */}\n <Box\n visibleFrom=\"lg\"\n pos=\"relative\"\n className=\"bordered-light\"\n style={{\n borderLeftWidth: 0,\n borderBottomWidth: 0,\n borderTopRightRadius: \"var(--mantine-radius-md)\",\n }}\n >\n <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n {/** ANCHORS */}\n <ScrollArea\n mah={\n changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n }\n >\n <Stack>\n {groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => (\n <Stack key={group} gap=\"xs\">\n <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n <Bookmark size=\"1rem\" />\n <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n </Group>\n <Stack gap=\"0.1rem\">\n {groupArgs &&\n groupArgs\n .filter((groupArgs) => !groupArgs.hidden)\n .map((groupArgs) => (\n <Button\n key={group + groupArgs.label}\n variant=\"subtle\"\n justify=\"flex-end\"\n size=\"sm\"\n fullWidth\n renderRoot={(props) => (\n <Anchor\n href={\"#\" + group + groupArgs.label}\n {...props}\n />\n )}\n >\n {groupArgs.label}\n </Button>\n ))}\n </Stack>\n </Stack>\n ))}\n </Stack>\n </ScrollArea>\n\n {/** SAVE */}\n <Stack gap=\"xs\">\n <SaveOrReset fullWidth />\n </Stack>\n </Stack>\n </Box>\n\n {/** SELECTOR (MOBILE) */}\n <Select\n hiddenFrom=\"lg\"\n className=\"select-nondimmed-placeholder\"\n placeholder=\"Go To\"\n leftSection={<Bookmark size=\"1rem\" />}\n value={null}\n data={groups\n .filter(([_, groupArgs]) => groupArgs)\n .map(([group, groupArgs]) => ({\n group,\n items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n label: arg.label,\n value: group + arg.label,\n })),\n }))}\n onChange={(group) => {\n if (!group) return;\n window.location.hash = group;\n }}\n />\n\n {/** CONTENT */}\n <Stack style={{ flexGrow: 1 }} gap=\"md\">\n {GroupsComponent}\n {SaveOrResetComponent}\n </Stack>\n </Flex>\n )}\n </ConfigLayout>\n );\n}\n"],"mappings":"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","names":["Fragment","groupArgs"]}
|
|
@@ -18,24 +18,50 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var tabbed_page_exports = {};
|
|
20
20
|
__export(tabbed_page_exports, {
|
|
21
|
-
TabbedPage: () => TabbedPage
|
|
21
|
+
TabbedPage: () => TabbedPage,
|
|
22
|
+
tabSlug: () => tabSlug
|
|
22
23
|
});
|
|
23
24
|
module.exports = __toCommonJS(tabbed_page_exports);
|
|
24
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
26
|
var import_core = require("@mantine/core");
|
|
26
27
|
var import_hooks = require("@mantine/hooks");
|
|
28
|
+
var import_react = require("react");
|
|
29
|
+
var import_react_router_dom = require("react-router-dom");
|
|
27
30
|
var import_page = require("./page");
|
|
28
31
|
var import_lucide_react = require("lucide-react");
|
|
32
|
+
function tabSlug(tab) {
|
|
33
|
+
return tab.toLowerCase().replace(/\s+/g, "-");
|
|
34
|
+
}
|
|
29
35
|
function TabbedPage({
|
|
30
36
|
storageKey,
|
|
37
|
+
queryKey = "tab",
|
|
31
38
|
tabs,
|
|
32
39
|
...tabsProps
|
|
33
40
|
}) {
|
|
34
41
|
const defaultTab = tabs[0]?.tab;
|
|
35
|
-
const [
|
|
42
|
+
const [storedTab, setStoredTab] = (0, import_hooks.useLocalStorage)({
|
|
36
43
|
key: storageKey,
|
|
37
44
|
defaultValue: defaultTab
|
|
38
45
|
});
|
|
46
|
+
const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
|
|
47
|
+
const querySlug = queryKey ? searchParams.get(queryKey) : null;
|
|
48
|
+
const queryTab = querySlug ? tabs.find(({ tab }) => tabSlug(tab) === querySlug)?.tab : void 0;
|
|
49
|
+
const selectedTab = queryTab ?? storedTab;
|
|
50
|
+
const setSelectedTab = (0, import_react.useCallback)(
|
|
51
|
+
(tab) => {
|
|
52
|
+
setStoredTab(tab);
|
|
53
|
+
if (queryKey) {
|
|
54
|
+
setSearchParams(
|
|
55
|
+
(params) => {
|
|
56
|
+
params.set(queryKey, tabSlug(tab));
|
|
57
|
+
return params;
|
|
58
|
+
},
|
|
59
|
+
{ replace: true }
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
[queryKey, setStoredTab, setSearchParams]
|
|
64
|
+
);
|
|
39
65
|
const Content = tabs.find((tab) => tab.tab === selectedTab)?.content ?? (() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleQuestionMark, { size: 22 }) }));
|
|
40
66
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
41
67
|
import_core.Tabs,
|
|
@@ -61,6 +87,7 @@ function TabbedPage({
|
|
|
61
87
|
}
|
|
62
88
|
// Annotate the CommonJS export names for ESM import in node:
|
|
63
89
|
0 && (module.exports = {
|
|
64
|
-
TabbedPage
|
|
90
|
+
TabbedPage,
|
|
91
|
+
tabSlug
|
|
65
92
|
});
|
|
66
93
|
//# sourceMappingURL=tabbed-page.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC } from \"react\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n tabs: TabbedPageItem<Tab>[];\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [
|
|
1
|
+
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC, useCallback } from \"react\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n /**\n * Sync the selected tab with this url query param, so links\n * can target a specific tab, eg. `/settings?tab=secret-providers`.\n * Tabs are matched by slug (lowercased, spaces to '-').\n * The query takes priority over localStorage.\n * Default: \"tab\". Pass false to disable.\n */\n queryKey?: string | false;\n tabs: TabbedPageItem<Tab>[];\n}\n\n/** \"Secret Providers\" => \"secret-providers\" */\nexport function tabSlug(tab: string) {\n return tab.toLowerCase().replace(/\\s+/g, \"-\");\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n queryKey = \"tab\",\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [storedTab, setStoredTab] = useLocalStorage<Tab>({\n key: storageKey,\n defaultValue: defaultTab,\n });\n\n const [searchParams, setSearchParams] = useSearchParams();\n const querySlug = queryKey ? searchParams.get(queryKey) : null;\n const queryTab = querySlug\n ? tabs.find(({ tab }) => tabSlug(tab) === querySlug)?.tab\n : undefined;\n\n const selectedTab = queryTab ?? storedTab;\n const setSelectedTab = useCallback(\n (tab: Tab) => {\n setStoredTab(tab);\n if (queryKey) {\n setSearchParams(\n (params) => {\n params.set(queryKey, tabSlug(tab));\n return params;\n },\n { replace: true },\n );\n }\n },\n [queryKey, setStoredTab, setSearchParams],\n );\n\n const Content =\n tabs.find((tab) => tab.tab === selectedTab)?.content ??\n (() => (\n <Center>\n <CircleQuestionMark size={22} />\n </Center>\n ));\n return (\n <Tabs\n value={selectedTab}\n onChange={(tab) => setSelectedTab((tab as Tab) ?? defaultTab)}\n {...tabsProps}\n >\n <Page\n customTitle={\n <Tabs.List>\n {tabs.map(({ tab, icon }) => {\n const Icon = icon ?? CircleQuestionMark;\n return (\n <Tabs.Tab key={tab} value={tab}>\n <Group opacity={tab === selectedTab ? 1 : 0.6}>\n <Icon size={20} />\n <Text fz=\"h3\">{tab}</Text>\n </Group>\n </Tabs.Tab>\n );\n })}\n </Tabs.List>\n }\n >\n <Content />\n </Page>\n </Tabs>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EQ;AA9ER,kBAOO;AACP,mBAAgC;AAChC,mBAAgC;AAChC,8BAAgC;AAChC,kBAAqB;AACrB,0BAAmC;AAuB5B,SAAS,QAAQ,KAAa;AACnC,SAAO,IAAI,YAAY,EAAE,QAAQ,QAAQ,GAAG;AAC9C;AAEO,SAAS,WAA+B;AAAA,EAC7C;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,aAAa,KAAK,CAAC,GAAG;AAC5B,QAAM,CAAC,WAAW,YAAY,QAAI,8BAAqB;AAAA,IACrD,KAAK;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,CAAC,cAAc,eAAe,QAAI,yCAAgB;AACxD,QAAM,YAAY,WAAW,aAAa,IAAI,QAAQ,IAAI;AAC1D,QAAM,WAAW,YACb,KAAK,KAAK,CAAC,EAAE,IAAI,MAAM,QAAQ,GAAG,MAAM,SAAS,GAAG,MACpD;AAEJ,QAAM,cAAc,YAAY;AAChC,QAAM,qBAAiB;AAAA,IACrB,CAAC,QAAa;AACZ,mBAAa,GAAG;AAChB,UAAI,UAAU;AACZ;AAAA,UACE,CAAC,WAAW;AACV,mBAAO,IAAI,UAAU,QAAQ,GAAG,CAAC;AACjC,mBAAO;AAAA,UACT;AAAA,UACA,EAAE,SAAS,KAAK;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,cAAc,eAAe;AAAA,EAC1C;AAEA,QAAM,UACJ,KAAK,KAAK,CAAC,QAAQ,IAAI,QAAQ,WAAW,GAAG,YAC5C,MACC,4CAAC,sBACC,sDAAC,0CAAmB,MAAM,IAAI,GAChC;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU,CAAC,QAAQ,eAAgB,OAAe,UAAU;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aACE,4CAAC,iBAAK,MAAL,EACE,eAAK,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;AAC3B,kBAAM,OAAO,QAAQ;AACrB,mBACE,4CAAC,iBAAK,KAAL,EAAmB,OAAO,KACzB,uDAAC,qBAAM,SAAS,QAAQ,cAAc,IAAI,KACxC;AAAA,0DAAC,QAAK,MAAM,IAAI;AAAA,cAChB,4CAAC,oBAAK,IAAG,MAAM,eAAI;AAAA,eACrB,KAJa,GAKf;AAAA,UAEJ,CAAC,GACH;AAAA,UAGF,sDAAC,WAAQ;AAAA;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -10,7 +10,17 @@ export type TabbedPageItem<Tab extends string> = {
|
|
|
10
10
|
export interface TabbedPageProps<Tab extends string> extends TabsProps {
|
|
11
11
|
/** Store current tab on localStorage */
|
|
12
12
|
storageKey: string;
|
|
13
|
+
/**
|
|
14
|
+
* Sync the selected tab with this url query param, so links
|
|
15
|
+
* can target a specific tab, eg. `/settings?tab=secret-providers`.
|
|
16
|
+
* Tabs are matched by slug (lowercased, spaces to '-').
|
|
17
|
+
* The query takes priority over localStorage.
|
|
18
|
+
* Default: "tab". Pass false to disable.
|
|
19
|
+
*/
|
|
20
|
+
queryKey?: string | false;
|
|
13
21
|
tabs: TabbedPageItem<Tab>[];
|
|
14
22
|
}
|
|
15
|
-
|
|
23
|
+
/** "Secret Providers" => "secret-providers" */
|
|
24
|
+
export declare function tabSlug(tab: string): string;
|
|
25
|
+
export declare function TabbedPage<Tab extends string>({ storageKey, queryKey, tabs, ...tabsProps }: TabbedPageProps<Tab>): import("react").JSX.Element;
|
|
16
26
|
//# sourceMappingURL=tabbed-page.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabbed-page.d.ts","sourceRoot":"","sources":["../../src/components/tabbed-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EAEV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"tabbed-page.d.ts","sourceRoot":"","sources":["../../src/components/tabbed-page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EAEV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAKxC,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,MAAM,IAAI;IAC/C,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,EAAE,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,SAAS;IACpE,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B,IAAI,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;CAC7B;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAElC;AAED,wBAAgB,UAAU,CAAC,GAAG,SAAS,MAAM,EAAE,EAC7C,UAAU,EACV,QAAgB,EAChB,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,GAAG,CAAC,+BAgEtB"}
|
|
@@ -6,18 +6,43 @@ import {
|
|
|
6
6
|
Text
|
|
7
7
|
} from "@mantine/core";
|
|
8
8
|
import { useLocalStorage } from "@mantine/hooks";
|
|
9
|
+
import { useCallback } from "react";
|
|
10
|
+
import { useSearchParams } from "react-router-dom";
|
|
9
11
|
import { Page } from "./page";
|
|
10
12
|
import { CircleQuestionMark } from "lucide-react";
|
|
13
|
+
function tabSlug(tab) {
|
|
14
|
+
return tab.toLowerCase().replace(/\s+/g, "-");
|
|
15
|
+
}
|
|
11
16
|
function TabbedPage({
|
|
12
17
|
storageKey,
|
|
18
|
+
queryKey = "tab",
|
|
13
19
|
tabs,
|
|
14
20
|
...tabsProps
|
|
15
21
|
}) {
|
|
16
22
|
const defaultTab = tabs[0]?.tab;
|
|
17
|
-
const [
|
|
23
|
+
const [storedTab, setStoredTab] = useLocalStorage({
|
|
18
24
|
key: storageKey,
|
|
19
25
|
defaultValue: defaultTab
|
|
20
26
|
});
|
|
27
|
+
const [searchParams, setSearchParams] = useSearchParams();
|
|
28
|
+
const querySlug = queryKey ? searchParams.get(queryKey) : null;
|
|
29
|
+
const queryTab = querySlug ? tabs.find(({ tab }) => tabSlug(tab) === querySlug)?.tab : void 0;
|
|
30
|
+
const selectedTab = queryTab ?? storedTab;
|
|
31
|
+
const setSelectedTab = useCallback(
|
|
32
|
+
(tab) => {
|
|
33
|
+
setStoredTab(tab);
|
|
34
|
+
if (queryKey) {
|
|
35
|
+
setSearchParams(
|
|
36
|
+
(params) => {
|
|
37
|
+
params.set(queryKey, tabSlug(tab));
|
|
38
|
+
return params;
|
|
39
|
+
},
|
|
40
|
+
{ replace: true }
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
[queryKey, setStoredTab, setSearchParams]
|
|
45
|
+
);
|
|
21
46
|
const Content = tabs.find((tab) => tab.tab === selectedTab)?.content ?? (() => /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 22 }) }));
|
|
22
47
|
return /* @__PURE__ */ jsx(
|
|
23
48
|
Tabs,
|
|
@@ -42,6 +67,7 @@ function TabbedPage({
|
|
|
42
67
|
);
|
|
43
68
|
}
|
|
44
69
|
export {
|
|
45
|
-
TabbedPage
|
|
70
|
+
TabbedPage,
|
|
71
|
+
tabSlug
|
|
46
72
|
};
|
|
47
73
|
//# sourceMappingURL=tabbed-page.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC } from \"react\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n tabs: TabbedPageItem<Tab>[];\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [
|
|
1
|
+
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC, useCallback } from \"react\";\nimport { useSearchParams } from \"react-router-dom\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n /**\n * Sync the selected tab with this url query param, so links\n * can target a specific tab, eg. `/settings?tab=secret-providers`.\n * Tabs are matched by slug (lowercased, spaces to '-').\n * The query takes priority over localStorage.\n * Default: \"tab\". Pass false to disable.\n */\n queryKey?: string | false;\n tabs: TabbedPageItem<Tab>[];\n}\n\n/** \"Secret Providers\" => \"secret-providers\" */\nexport function tabSlug(tab: string) {\n return tab.toLowerCase().replace(/\\s+/g, \"-\");\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n queryKey = \"tab\",\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [storedTab, setStoredTab] = useLocalStorage<Tab>({\n key: storageKey,\n defaultValue: defaultTab,\n });\n\n const [searchParams, setSearchParams] = useSearchParams();\n const querySlug = queryKey ? searchParams.get(queryKey) : null;\n const queryTab = querySlug\n ? tabs.find(({ tab }) => tabSlug(tab) === querySlug)?.tab\n : undefined;\n\n const selectedTab = queryTab ?? storedTab;\n const setSelectedTab = useCallback(\n (tab: Tab) => {\n setStoredTab(tab);\n if (queryKey) {\n setSearchParams(\n (params) => {\n params.set(queryKey, tabSlug(tab));\n return params;\n },\n { replace: true },\n );\n }\n },\n [queryKey, setStoredTab, setSearchParams],\n );\n\n const Content =\n tabs.find((tab) => tab.tab === selectedTab)?.content ??\n (() => (\n <Center>\n <CircleQuestionMark size={22} />\n </Center>\n ));\n return (\n <Tabs\n value={selectedTab}\n onChange={(tab) => setSelectedTab((tab as Tab) ?? defaultTab)}\n {...tabsProps}\n >\n <Page\n customTitle={\n <Tabs.List>\n {tabs.map(({ tab, icon }) => {\n const Icon = icon ?? CircleQuestionMark;\n return (\n <Tabs.Tab key={tab} value={tab}>\n <Group opacity={tab === selectedTab ? 1 : 0.6}>\n <Icon size={20} />\n <Text fz=\"h3\">{tab}</Text>\n </Group>\n </Tabs.Tab>\n );\n })}\n </Tabs.List>\n }\n >\n <Content />\n </Page>\n </Tabs>\n );\n}\n"],"mappings":"AA8EQ,cAgBU,YAhBV;AA9ER;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAa,mBAAmB;AAChC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAuB5B,SAAS,QAAQ,KAAa;AACnC,SAAO,IAAI,YAAY,EAAE,QAAQ,QAAQ,GAAG;AAC9C;AAEO,SAAS,WAA+B;AAAA,EAC7C;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,aAAa,KAAK,CAAC,GAAG;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,gBAAqB;AAAA,IACrD,KAAK;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB;AACxD,QAAM,YAAY,WAAW,aAAa,IAAI,QAAQ,IAAI;AAC1D,QAAM,WAAW,YACb,KAAK,KAAK,CAAC,EAAE,IAAI,MAAM,QAAQ,GAAG,MAAM,SAAS,GAAG,MACpD;AAEJ,QAAM,cAAc,YAAY;AAChC,QAAM,iBAAiB;AAAA,IACrB,CAAC,QAAa;AACZ,mBAAa,GAAG;AAChB,UAAI,UAAU;AACZ;AAAA,UACE,CAAC,WAAW;AACV,mBAAO,IAAI,UAAU,QAAQ,GAAG,CAAC;AACjC,mBAAO;AAAA,UACT;AAAA,UACA,EAAE,SAAS,KAAK;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,cAAc,eAAe;AAAA,EAC1C;AAEA,QAAM,UACJ,KAAK,KAAK,CAAC,QAAQ,IAAI,QAAQ,WAAW,GAAG,YAC5C,MACC,oBAAC,UACC,8BAAC,sBAAmB,MAAM,IAAI,GAChC;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU,CAAC,QAAQ,eAAgB,OAAe,UAAU;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aACE,oBAAC,KAAK,MAAL,EACE,eAAK,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;AAC3B,kBAAM,OAAO,QAAQ;AACrB,mBACE,oBAAC,KAAK,KAAL,EAAmB,OAAO,KACzB,+BAAC,SAAM,SAAS,QAAQ,cAAc,IAAI,KACxC;AAAA,kCAAC,QAAK,MAAM,IAAI;AAAA,cAChB,oBAAC,QAAK,IAAG,MAAM,eAAI;AAAA,eACrB,KAJa,GAKf;AAAA,UAEJ,CAAC,GACH;AAAA,UAGF,8BAAC,WAAQ;AAAA;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;","names":[]}
|