@djangocfg/ui-tools 2.1.133 → 2.1.134
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/{CronScheduler.client-HLABENG7.mjs → CronScheduler.client-BYKMIOZJ.mjs} +3 -3
- package/dist/{CronScheduler.client-HLABENG7.mjs.map → CronScheduler.client-BYKMIOZJ.mjs.map} +1 -1
- package/dist/{CronScheduler.client-G65DNGCA.cjs → CronScheduler.client-X74RLZLW.cjs} +11 -11
- package/dist/{CronScheduler.client-G65DNGCA.cjs.map → CronScheduler.client-X74RLZLW.cjs.map} +1 -1
- package/dist/{chunk-CBGBDVUG.cjs → chunk-D3TZQSX6.cjs} +123 -124
- package/dist/chunk-D3TZQSX6.cjs.map +1 -0
- package/dist/{chunk-CDUFZ24N.mjs → chunk-HVRP57NM.mjs} +123 -124
- package/dist/chunk-HVRP57NM.mjs.map +1 -0
- package/dist/index.cjs +22 -22
- package/dist/index.mjs +3 -3
- package/package.json +8 -7
- package/src/styles/index.css +5 -0
- package/src/tools/CronScheduler/CronScheduler.story.tsx +80 -0
- package/src/tools/CronScheduler/components/DayChips.tsx +55 -49
- package/src/tools/CronScheduler/components/MonthDayGrid.tsx +64 -50
- package/src/tools/CronScheduler/components/ScheduleTypeSelector.tsx +20 -11
- package/dist/chunk-CBGBDVUG.cjs.map +0 -1
- package/dist/chunk-CDUFZ24N.mjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCronType, ScheduleTypeSelector, TimeSelector, DayChips, MonthDayGrid, CustomInput, SchedulePreview, CronSchedulerProvider } from './chunk-
|
|
1
|
+
import { useCronType, ScheduleTypeSelector, TimeSelector, DayChips, MonthDayGrid, CustomInput, SchedulePreview, CronSchedulerProvider } from './chunk-HVRP57NM.mjs';
|
|
2
2
|
import { __name } from './chunk-CGILA3WO.mjs';
|
|
3
3
|
import { cn } from '@djangocfg/ui-core/lib';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -63,5 +63,5 @@ __name(CronScheduler, "CronScheduler");
|
|
|
63
63
|
var CronScheduler_client_default = CronScheduler;
|
|
64
64
|
|
|
65
65
|
export { CronScheduler, CronScheduler_client_default as default };
|
|
66
|
-
//# sourceMappingURL=CronScheduler.client-
|
|
67
|
-
//# sourceMappingURL=CronScheduler.client-
|
|
66
|
+
//# sourceMappingURL=CronScheduler.client-BYKMIOZJ.mjs.map
|
|
67
|
+
//# sourceMappingURL=CronScheduler.client-BYKMIOZJ.mjs.map
|
package/dist/{CronScheduler.client-HLABENG7.mjs.map → CronScheduler.client-BYKMIOZJ.mjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":[],"mappings":";;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,WAAA,EAAY;AAE7B,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACR,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACR,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACC,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CS,MAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgB,MAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-
|
|
1
|
+
{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":[],"mappings":";;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,WAAA,EAAY;AAE7B,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACR,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACR,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACR,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACC,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CS,MAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgB,MAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-BYKMIOZJ.mjs","sourcesContent":["'use client';\n\n/**\n * CronScheduler Client Component\n *\n * Compact cron expression builder following Apple HIG principles.\n * Uses context-based architecture for state management.\n */\n\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { CronSchedulerProvider } from './context/CronSchedulerContext';\nimport { useCronType } from './context/hooks';\nimport {\n ScheduleTypeSelector,\n TimeSelector,\n DayChips,\n MonthDayGrid,\n CustomInput,\n SchedulePreview,\n} from './components';\nimport type { CronSchedulerProps } from './types';\n\n// ============================================================================\n// Inner Component (uses context)\n// ============================================================================\n\ninterface CronSchedulerInnerProps {\n showPreview: boolean;\n showCronExpression: boolean;\n allowCopy: boolean;\n timeFormat: '12h' | '24h';\n disabled: boolean;\n className?: string;\n}\n\nfunction CronSchedulerInner({\n showPreview,\n showCronExpression,\n allowCopy,\n timeFormat,\n disabled,\n className,\n}: CronSchedulerInnerProps) {\n const { type } = useCronType();\n\n return (\n <div className={cn('space-y-3', className)}>\n {/* Schedule Type Selector */}\n <ScheduleTypeSelector disabled={disabled} />\n\n {/* Time Selector (shown for daily, weekly, monthly) */}\n {type !== 'custom' && (\n <TimeSelector format={timeFormat} disabled={disabled} />\n )}\n\n {/* Day Chips (weekly only) */}\n {type === 'weekly' && (\n <DayChips disabled={disabled} showPresets />\n )}\n\n {/* Month Day Grid (monthly only) */}\n {type === 'monthly' && (\n <MonthDayGrid disabled={disabled} showPresets />\n )}\n\n {/* Custom Input (custom only) */}\n {type === 'custom' && (\n <CustomInput disabled={disabled} />\n )}\n\n {/* Preview - always show cron expression */}\n {showPreview && (\n <SchedulePreview\n showCronExpression\n allowCopy={allowCopy}\n />\n )}\n </div>\n );\n}\n\n// ============================================================================\n// Main Component (with Provider)\n// ============================================================================\n\n/**\n * CronScheduler - Compact cron expression builder\n *\n * A user-friendly interface for creating cron schedules without\n * needing to know cron syntax. Follows Apple HIG design principles.\n *\n * @example\n * // Basic usage\n * <CronScheduler\n * value={cronExpression}\n * onChange={setCronExpression}\n * />\n *\n * @example\n * // With all options\n * <CronScheduler\n * value=\"0 9 * * 1-5\"\n * onChange={handleChange}\n * defaultType=\"weekly\"\n * showPreview\n * showCronExpression\n * allowCopy\n * timeFormat=\"24h\"\n * />\n */\nexport function CronScheduler({\n value,\n onChange,\n defaultType = 'daily',\n showPreview = true,\n showCronExpression = false,\n allowCopy = false,\n timeFormat = '24h',\n disabled = false,\n className,\n}: CronSchedulerProps) {\n return (\n <CronSchedulerProvider\n value={value}\n onChange={onChange}\n defaultType={defaultType}\n >\n <CronSchedulerInner\n showPreview={showPreview}\n showCronExpression={showCronExpression}\n allowCopy={allowCopy}\n timeFormat={timeFormat}\n disabled={disabled}\n className={className}\n />\n </CronSchedulerProvider>\n );\n}\n\nexport default CronScheduler;\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var chunkD3TZQSX6_cjs = require('./chunk-D3TZQSX6.cjs');
|
|
6
6
|
var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
|
|
7
7
|
var lib = require('@djangocfg/ui-core/lib');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -15,15 +15,15 @@ function CronSchedulerInner({
|
|
|
15
15
|
disabled,
|
|
16
16
|
className
|
|
17
17
|
}) {
|
|
18
|
-
const { type } =
|
|
18
|
+
const { type } = chunkD3TZQSX6_cjs.useCronType();
|
|
19
19
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn("space-y-3", className), children: [
|
|
20
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
type !== "custom" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
22
|
-
type === "weekly" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
23
|
-
type === "monthly" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
-
type === "custom" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkD3TZQSX6_cjs.ScheduleTypeSelector, { disabled }),
|
|
21
|
+
type !== "custom" && /* @__PURE__ */ jsxRuntime.jsx(chunkD3TZQSX6_cjs.TimeSelector, { format: timeFormat, disabled }),
|
|
22
|
+
type === "weekly" && /* @__PURE__ */ jsxRuntime.jsx(chunkD3TZQSX6_cjs.DayChips, { disabled, showPresets: true }),
|
|
23
|
+
type === "monthly" && /* @__PURE__ */ jsxRuntime.jsx(chunkD3TZQSX6_cjs.MonthDayGrid, { disabled, showPresets: true }),
|
|
24
|
+
type === "custom" && /* @__PURE__ */ jsxRuntime.jsx(chunkD3TZQSX6_cjs.CustomInput, { disabled }),
|
|
25
25
|
showPreview && /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
-
|
|
26
|
+
chunkD3TZQSX6_cjs.SchedulePreview,
|
|
27
27
|
{
|
|
28
28
|
showCronExpression: true,
|
|
29
29
|
allowCopy
|
|
@@ -44,7 +44,7 @@ function CronScheduler({
|
|
|
44
44
|
className
|
|
45
45
|
}) {
|
|
46
46
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
|
|
47
|
+
chunkD3TZQSX6_cjs.CronSchedulerProvider,
|
|
48
48
|
{
|
|
49
49
|
value,
|
|
50
50
|
onChange,
|
|
@@ -68,5 +68,5 @@ var CronScheduler_client_default = CronScheduler;
|
|
|
68
68
|
|
|
69
69
|
exports.CronScheduler = CronScheduler;
|
|
70
70
|
exports.default = CronScheduler_client_default;
|
|
71
|
-
//# sourceMappingURL=CronScheduler.client-
|
|
72
|
-
//# sourceMappingURL=CronScheduler.client-
|
|
71
|
+
//# sourceMappingURL=CronScheduler.client-X74RLZLW.cjs.map
|
|
72
|
+
//# sourceMappingURL=CronScheduler.client-X74RLZLW.cjs.map
|
package/dist/{CronScheduler.client-G65DNGCA.cjs.map → CronScheduler.client-X74RLZLW.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":["useCronType","cn","jsx","ScheduleTypeSelector","TimeSelector","DayChips","MonthDayGrid","CustomInput","SchedulePreview","__name","CronSchedulerProvider"],"mappings":";;;;;;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAIA,6BAAA,EAAY;AAE7B,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,MAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,0CAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACRD,cAAA,CAACE,8BAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACRF,cAAA,CAACG,0BAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACRH,cAAA,CAACI,8BAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACRJ,cAAA,CAACK,6BAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACCL,cAAA;AAAA,MAACM,iCAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CSC,wBAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACEP,cAAA;AAAA,IAACQ,uCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAAR,cAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgBO,wBAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-
|
|
1
|
+
{"version":3,"sources":["../src/tools/CronScheduler/CronScheduler.client.tsx"],"names":["useCronType","cn","jsx","ScheduleTypeSelector","TimeSelector","DayChips","MonthDayGrid","CustomInput","SchedulePreview","__name","CronSchedulerProvider"],"mappings":";;;;;;;;;AAmCA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAK,GAAIA,6BAAA,EAAY;AAE7B,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,MAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,0CAAqB,QAAA,EAAoB,CAAA;AAAA,IAGzC,SAAS,QAAA,oBACRD,cAAA,CAACE,8BAAA,EAAA,EAAa,MAAA,EAAQ,YAAY,QAAA,EAAoB,CAAA;AAAA,IAIvD,SAAS,QAAA,oBACRF,cAAA,CAACG,0BAAA,EAAA,EAAS,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI3C,SAAS,SAAA,oBACRH,cAAA,CAACI,8BAAA,EAAA,EAAa,QAAA,EAAoB,aAAW,IAAA,EAAC,CAAA;AAAA,IAI/C,IAAA,KAAS,QAAA,oBACRJ,cAAA,CAACK,6BAAA,EAAA,EAAY,QAAA,EAAoB,CAAA;AAAA,IAIlC,WAAA,oBACCL,cAAA;AAAA,MAACM,iCAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,IAAA;AAAA,QAClB;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;AA5CSC,wBAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA;AA2EF,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,WAAA,GAAc,IAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAuB;AACrB,EAAA,uBACEP,cAAA;AAAA,IAACQ,uCAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MAEA,QAAA,kBAAAR,cAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AA3BgBO,wBAAA,CAAA,aAAA,EAAA,eAAA,CAAA;AA6BhB,IAAO,4BAAA,GAAQ","file":"CronScheduler.client-X74RLZLW.cjs","sourcesContent":["'use client';\n\n/**\n * CronScheduler Client Component\n *\n * Compact cron expression builder following Apple HIG principles.\n * Uses context-based architecture for state management.\n */\n\nimport { cn } from '@djangocfg/ui-core/lib';\nimport { CronSchedulerProvider } from './context/CronSchedulerContext';\nimport { useCronType } from './context/hooks';\nimport {\n ScheduleTypeSelector,\n TimeSelector,\n DayChips,\n MonthDayGrid,\n CustomInput,\n SchedulePreview,\n} from './components';\nimport type { CronSchedulerProps } from './types';\n\n// ============================================================================\n// Inner Component (uses context)\n// ============================================================================\n\ninterface CronSchedulerInnerProps {\n showPreview: boolean;\n showCronExpression: boolean;\n allowCopy: boolean;\n timeFormat: '12h' | '24h';\n disabled: boolean;\n className?: string;\n}\n\nfunction CronSchedulerInner({\n showPreview,\n showCronExpression,\n allowCopy,\n timeFormat,\n disabled,\n className,\n}: CronSchedulerInnerProps) {\n const { type } = useCronType();\n\n return (\n <div className={cn('space-y-3', className)}>\n {/* Schedule Type Selector */}\n <ScheduleTypeSelector disabled={disabled} />\n\n {/* Time Selector (shown for daily, weekly, monthly) */}\n {type !== 'custom' && (\n <TimeSelector format={timeFormat} disabled={disabled} />\n )}\n\n {/* Day Chips (weekly only) */}\n {type === 'weekly' && (\n <DayChips disabled={disabled} showPresets />\n )}\n\n {/* Month Day Grid (monthly only) */}\n {type === 'monthly' && (\n <MonthDayGrid disabled={disabled} showPresets />\n )}\n\n {/* Custom Input (custom only) */}\n {type === 'custom' && (\n <CustomInput disabled={disabled} />\n )}\n\n {/* Preview - always show cron expression */}\n {showPreview && (\n <SchedulePreview\n showCronExpression\n allowCopy={allowCopy}\n />\n )}\n </div>\n );\n}\n\n// ============================================================================\n// Main Component (with Provider)\n// ============================================================================\n\n/**\n * CronScheduler - Compact cron expression builder\n *\n * A user-friendly interface for creating cron schedules without\n * needing to know cron syntax. Follows Apple HIG design principles.\n *\n * @example\n * // Basic usage\n * <CronScheduler\n * value={cronExpression}\n * onChange={setCronExpression}\n * />\n *\n * @example\n * // With all options\n * <CronScheduler\n * value=\"0 9 * * 1-5\"\n * onChange={handleChange}\n * defaultType=\"weekly\"\n * showPreview\n * showCronExpression\n * allowCopy\n * timeFormat=\"24h\"\n * />\n */\nexport function CronScheduler({\n value,\n onChange,\n defaultType = 'daily',\n showPreview = true,\n showCronExpression = false,\n allowCopy = false,\n timeFormat = '24h',\n disabled = false,\n className,\n}: CronSchedulerProps) {\n return (\n <CronSchedulerProvider\n value={value}\n onChange={onChange}\n defaultType={defaultType}\n >\n <CronSchedulerInner\n showPreview={showPreview}\n showCronExpression={showCronExpression}\n allowCopy={allowCopy}\n timeFormat={timeFormat}\n disabled={disabled}\n className={className}\n />\n </CronSchedulerProvider>\n );\n}\n\nexport default CronScheduler;\n"]}
|
|
@@ -495,25 +495,32 @@ function ScheduleTypeSelector({
|
|
|
495
495
|
className
|
|
496
496
|
}) {
|
|
497
497
|
const { type, setType } = useCronType();
|
|
498
|
+
const triggerClassName = lib.cn(
|
|
499
|
+
"text-xs font-medium px-2 py-1.5",
|
|
500
|
+
"data-[state=active]:shadow-sm",
|
|
501
|
+
"transition-all duration-150"
|
|
502
|
+
);
|
|
503
|
+
const triggers = SCHEDULE_TYPES.map(({ value, label }) => ({
|
|
504
|
+
value,
|
|
505
|
+
label,
|
|
506
|
+
disabled,
|
|
507
|
+
className: triggerClassName
|
|
508
|
+
}));
|
|
498
509
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
499
510
|
components.Tabs,
|
|
500
511
|
{
|
|
501
512
|
value: type,
|
|
502
513
|
onValueChange: (v) => setType(v),
|
|
503
514
|
className: lib.cn("w-full", className),
|
|
504
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(components.TabsList, { className: "
|
|
515
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(components.TabsList, { className: "grid w-full grid-cols-4 h-9 p-0.5", children: triggers.map((trigger) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
505
516
|
components.TabsTrigger,
|
|
506
517
|
{
|
|
507
|
-
value,
|
|
508
|
-
disabled,
|
|
509
|
-
className:
|
|
510
|
-
|
|
511
|
-
"data-[state=active]:shadow-sm",
|
|
512
|
-
"transition-all duration-150"
|
|
513
|
-
),
|
|
514
|
-
children: label
|
|
518
|
+
value: trigger.value,
|
|
519
|
+
disabled: trigger.disabled,
|
|
520
|
+
className: trigger.className,
|
|
521
|
+
children: trigger.label
|
|
515
522
|
},
|
|
516
|
-
value
|
|
523
|
+
trigger.value
|
|
517
524
|
)) })
|
|
518
525
|
}
|
|
519
526
|
);
|
|
@@ -615,65 +622,58 @@ function DayChips({
|
|
|
615
622
|
}) {
|
|
616
623
|
const { weekDays, toggleWeekDay, setWeekDays } = useCronWeekDays();
|
|
617
624
|
const isWeekdays2 = weekDays.length === 5 && [1, 2, 3, 4, 5].every((d) => weekDays.includes(d));
|
|
618
|
-
const
|
|
625
|
+
const isWeekendPreset = weekDays.length === 2 && [0, 6].every((d) => weekDays.includes(d));
|
|
619
626
|
const isEveryday = weekDays.length === 7;
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
isWeekend3 ? "text-muted-foreground/70" : "text-muted-foreground"
|
|
640
|
-
),
|
|
641
|
-
disabled && "opacity-50 cursor-not-allowed pointer-events-none"
|
|
642
|
-
),
|
|
643
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
|
|
644
|
-
},
|
|
645
|
-
value
|
|
646
|
-
);
|
|
647
|
-
}) }),
|
|
648
|
-
showPresets && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
|
|
649
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
650
|
-
PresetButton,
|
|
651
|
-
{
|
|
652
|
-
label: "Weekdays",
|
|
653
|
-
isActive: isWeekdays2,
|
|
654
|
-
onClick: () => setWeekDays([1, 2, 3, 4, 5]),
|
|
655
|
-
disabled
|
|
656
|
-
}
|
|
657
|
-
),
|
|
658
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
659
|
-
PresetButton,
|
|
660
|
-
{
|
|
661
|
-
label: "Weekends",
|
|
662
|
-
isActive: isWeekend2,
|
|
663
|
-
onClick: () => setWeekDays([0, 6]),
|
|
664
|
-
disabled
|
|
665
|
-
}
|
|
666
|
-
),
|
|
667
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
668
|
-
PresetButton,
|
|
669
|
-
{
|
|
670
|
-
label: "Every day",
|
|
671
|
-
isActive: isEveryday,
|
|
672
|
-
onClick: () => setWeekDays([0, 1, 2, 3, 4, 5, 6]),
|
|
673
|
-
disabled
|
|
674
|
-
}
|
|
627
|
+
const dayButtons = DAYS.map(({ value, label }) => {
|
|
628
|
+
const isSelected = weekDays.includes(value);
|
|
629
|
+
const isWeekendDay = value === 0 || value === 6;
|
|
630
|
+
return {
|
|
631
|
+
value,
|
|
632
|
+
label,
|
|
633
|
+
isSelected,
|
|
634
|
+
isWeekendDay,
|
|
635
|
+
className: lib.cn(
|
|
636
|
+
"flex flex-col items-center justify-center",
|
|
637
|
+
"py-2.5 rounded-lg text-xs font-medium",
|
|
638
|
+
"transition-all duration-150",
|
|
639
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
|
|
640
|
+
"active:scale-[0.97]",
|
|
641
|
+
isSelected ? "bg-primary text-primary-foreground shadow-sm" : lib.cn(
|
|
642
|
+
"bg-muted/50 hover:bg-muted",
|
|
643
|
+
isWeekendDay ? "text-muted-foreground/70" : "text-muted-foreground"
|
|
644
|
+
),
|
|
645
|
+
disabled && "opacity-50 cursor-not-allowed pointer-events-none"
|
|
675
646
|
)
|
|
676
|
-
|
|
647
|
+
};
|
|
648
|
+
});
|
|
649
|
+
const presets = [
|
|
650
|
+
{ label: "Weekdays", isActive: isWeekdays2, days: [1, 2, 3, 4, 5] },
|
|
651
|
+
{ label: "Weekends", isActive: isWeekendPreset, days: [0, 6] },
|
|
652
|
+
{ label: "Every day", isActive: isEveryday, days: [0, 1, 2, 3, 4, 5, 6] }
|
|
653
|
+
];
|
|
654
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn("space-y-3", className), children: [
|
|
655
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: dayButtons.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
656
|
+
"button",
|
|
657
|
+
{
|
|
658
|
+
type: "button",
|
|
659
|
+
disabled,
|
|
660
|
+
onClick: () => toggleWeekDay(day.value),
|
|
661
|
+
"aria-pressed": day.isSelected,
|
|
662
|
+
className: day.className,
|
|
663
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: day.label })
|
|
664
|
+
},
|
|
665
|
+
day.value
|
|
666
|
+
)) }),
|
|
667
|
+
showPresets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
668
|
+
PresetButton,
|
|
669
|
+
{
|
|
670
|
+
label: preset.label,
|
|
671
|
+
isActive: preset.isActive,
|
|
672
|
+
onClick: () => setWeekDays(preset.days),
|
|
673
|
+
disabled
|
|
674
|
+
},
|
|
675
|
+
preset.label
|
|
676
|
+
)) })
|
|
677
677
|
] });
|
|
678
678
|
}
|
|
679
679
|
chunkWGEGR3DF_cjs.__name(DayChips, "DayChips");
|
|
@@ -707,71 +707,70 @@ function MonthDayGrid({
|
|
|
707
707
|
const is1st = monthDays.length === 1 && monthDays[0] === 1;
|
|
708
708
|
const is15th = monthDays.length === 1 && monthDays[0] === 15;
|
|
709
709
|
const is1stAnd15th = monthDays.length === 2 && monthDays.includes(1) && monthDays.includes(15);
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
710
|
+
const presets = [
|
|
711
|
+
{ label: "1st", isActive: is1st, days: [1] },
|
|
712
|
+
{ label: "15th", isActive: is15th, days: [15] },
|
|
713
|
+
{ label: "1st & 15th", isActive: is1stAnd15th, days: [1, 15] }
|
|
714
|
+
];
|
|
715
|
+
const gridCells = Array.from({ length: GRID_SIZE }, (_, i) => {
|
|
716
|
+
const day = i + 1;
|
|
717
|
+
const isValidDay = day <= 31;
|
|
718
|
+
const isSelected = isValidDay && monthDays.includes(day);
|
|
719
|
+
const isPartialMonth = day > 28;
|
|
720
|
+
if (!isValidDay) {
|
|
721
|
+
return { type: "empty", key: i };
|
|
722
|
+
}
|
|
723
|
+
return {
|
|
724
|
+
type: "day",
|
|
725
|
+
key: day,
|
|
726
|
+
day,
|
|
727
|
+
isSelected,
|
|
728
|
+
className: lib.cn(
|
|
729
|
+
"aspect-square flex items-center justify-center",
|
|
730
|
+
"rounded-lg text-sm font-medium",
|
|
731
|
+
"transition-all duration-150",
|
|
732
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
|
|
733
|
+
"active:scale-[0.95]",
|
|
734
|
+
isSelected ? "bg-primary text-primary-foreground shadow-sm" : lib.cn(
|
|
735
|
+
"bg-muted/30 hover:bg-muted/60",
|
|
736
|
+
isPartialMonth ? "text-muted-foreground/50" : "text-muted-foreground"
|
|
737
|
+
),
|
|
738
|
+
disabled && "opacity-50 cursor-not-allowed pointer-events-none"
|
|
738
739
|
)
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
740
|
+
};
|
|
741
|
+
});
|
|
742
|
+
const selectionCount = monthDays.length;
|
|
743
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn("space-y-3", className), children: [
|
|
744
|
+
showPresets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
745
|
+
PresetButton2,
|
|
746
|
+
{
|
|
747
|
+
label: preset.label,
|
|
748
|
+
isActive: preset.isActive,
|
|
749
|
+
onClick: () => setMonthDays(preset.days),
|
|
750
|
+
disabled
|
|
751
|
+
},
|
|
752
|
+
preset.label
|
|
753
|
+
)) }),
|
|
754
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: gridCells.map((cell) => {
|
|
755
|
+
if (cell.type === "empty") {
|
|
756
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square" }, cell.key);
|
|
747
757
|
}
|
|
748
758
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
749
759
|
"button",
|
|
750
760
|
{
|
|
751
761
|
type: "button",
|
|
752
762
|
disabled,
|
|
753
|
-
onClick: () => toggleMonthDay(day),
|
|
754
|
-
"aria-pressed": isSelected,
|
|
755
|
-
"aria-label": `Day ${day}`,
|
|
756
|
-
className:
|
|
757
|
-
|
|
758
|
-
"rounded-lg text-sm font-medium",
|
|
759
|
-
"transition-all duration-150",
|
|
760
|
-
"focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
|
|
761
|
-
"active:scale-[0.95]",
|
|
762
|
-
isSelected ? "bg-primary text-primary-foreground shadow-sm" : lib.cn(
|
|
763
|
-
"bg-muted/30 hover:bg-muted/60",
|
|
764
|
-
isPartialMonth ? "text-muted-foreground/50" : "text-muted-foreground"
|
|
765
|
-
),
|
|
766
|
-
disabled && "opacity-50 cursor-not-allowed pointer-events-none"
|
|
767
|
-
),
|
|
768
|
-
children: day
|
|
763
|
+
onClick: () => toggleMonthDay(cell.day),
|
|
764
|
+
"aria-pressed": cell.isSelected,
|
|
765
|
+
"aria-label": `Day ${cell.day}`,
|
|
766
|
+
className: cell.className,
|
|
767
|
+
children: cell.day
|
|
769
768
|
},
|
|
770
|
-
|
|
769
|
+
cell.key
|
|
771
770
|
);
|
|
772
771
|
}) }),
|
|
773
|
-
|
|
774
|
-
|
|
772
|
+
selectionCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground text-center", children: [
|
|
773
|
+
selectionCount,
|
|
775
774
|
" days selected"
|
|
776
775
|
] })
|
|
777
776
|
] });
|
|
@@ -1011,5 +1010,5 @@ exports.useCronSchedulerContext = useCronSchedulerContext;
|
|
|
1011
1010
|
exports.useCronTime = useCronTime;
|
|
1012
1011
|
exports.useCronType = useCronType;
|
|
1013
1012
|
exports.useCronWeekDays = useCronWeekDays;
|
|
1014
|
-
//# sourceMappingURL=chunk-
|
|
1015
|
-
//# sourceMappingURL=chunk-
|
|
1013
|
+
//# sourceMappingURL=chunk-D3TZQSX6.cjs.map
|
|
1014
|
+
//# sourceMappingURL=chunk-D3TZQSX6.cjs.map
|