admin-ui-starter-kit 0.4.4 → 0.5.0

package/dist/showcase/assets/sync-BAO20Naa.js

@@ -0,0 +1,107 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,r as o,t as s}from"./example-CbMg22fx.js";import{t as c}from"./clock-3-BxradwSg.js";import{t as l}from"./database-C8o4g1ov.js";import{t as u}from"./receipt-text-2YwFjXVP.js";import{t as d}from"./refresh-cw-DlkWEAjG.js";import{k as f,n as p,s as m}from"./index-DNH0y0r-.js";import{t as h}from"./props-table-DSdjPLVr.js";import{t as g}from"./label-BE1d_Rxi.js";import{i as _,t as v}from"./index.esm-Ducg7a0P.js";import{n as y,t as b}from"./card-radio-group-CEX1QGZc.js";import{t as x}from"./dialog-DpfYwJPk.js";var S=e=>({getError:t=>{if(e)return e[t]},hasError:t=>e!==void 0&&e[t]!==void 0}),C={optionsLabel:`Options`},w=m(),T=e=>{let{formId:t,options:n,syncOptions:r,defaultHours:i=`24`,onSubmit:o,errors:s,strings:c}=e,l=f(C,c),{getError:u}=S(Object.fromEntries(Object.entries(s??{}).map(([e,t])=>[e,Array.isArray(t)?t[0]:t]))),{control:d,handleSubmit:m}=_({defaultValues:{hours:i,options:[]}});return(0,w.jsxs)(`form`,{id:t,onSubmit:m(e=>{o({hours:Number(e.hours),financials_only:e.options.includes(`financials_only`)})}),className:p(`sync-range-dialog-form--component`,`space-y-4`),children:[(0,w.jsx)(v,{name:`hours`,control:d,rules:{required:!0},render:({field:e})=>(0,w.jsx)(b,{options:n,value:e.value,onChange:e.onChange,name:e.name,columns:2})}),u(`hours`)&&(0,w.jsx)(a,{type:`error`,children:u(`hours`)}),!!r&&r.length>0&&(0,w.jsxs)(`div`,{className:`space-y-2 border-t pt-2`,children:[(0,w.jsx)(g,{children:l.optionsLabel}),(0,w.jsx)(v,{name:`options`,control:d,render:({field:e})=>(0,w.jsx)(y,{options:r,value:e.value,onChange:e.onChange,columns:2})})]})]})};T.displayName=`SyncRangeDialogForm`;var E=e({InlineSyncForm:()=>M,SyncDialogPattern:()=>j}),D=t(n(),1),O=[{value:`6`,label:`6 hours`,description:`Recent corrections only.`,icon:c},{value:`24`,label:`24 hours`,description:`Recommended for daily operations.`,icon:l},{value:`48`,label:`48 hours`,description:`Use after a long import pause.`,icon:d}],k=[{value:`financials_only`,label:`Financial records only`,description:`Skip profile and note updates.`,icon:u}];function A({value:e}){return e?(0,w.jsxs)(a,{size:`xs`,type:`secondary`,children:[`Submitted `,e.hours,` hours`,e.financials_only?` with financial records only.`:` with all records.`]}):null}function j(){let[e,t]=(0,D.useState)(!1),[n,r]=(0,D.useState)(null);return(0,w.jsxs)(`div`,{className:`space-y-3`,children:[(0,w.jsx)(o,{type:`button`,variant:`primary`,icon:d,onClick:()=>t(!0),children:`Open sync dialog`}),(0,w.jsx)(A,{value:n}),(0,w.jsx)(x,{open:e,onOpenChange:t,title:`Sync records`,description:`Choose how far back the integration should reconcile records.`,formId:`sync-range-dialog-form`,size:`lg`,children:(0,w.jsx)(T,{formId:`sync-range-dialog-form`,options:O,syncOptions:k,defaultHours:`24`,onSubmit:e=>{r(e),t(!1)}})})]})}function M(){let[e,t]=(0,D.useState)(null);return(0,w.jsxs)(`div`,{className:`max-w-2xl space-y-3`,children:[(0,w.jsx)(T,{formId:`inline-sync-range-form`,options:O,syncOptions:k,defaultHours:`6`,onSubmit:t,strings:{optionsLabel:`Sync scope`}}),(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-t border-border/60 pt-3`,children:[(0,w.jsx)(A,{value:e}),(0,w.jsx)(o,{type:`submit`,form:`inline-sync-range-form`,variant:`primary`,children:`Run sync`})]})]})}var N=`import { useState } from 'react';
+import { Clock3, Database, ReceiptText, RefreshCw } from 'lucide-react';
+
+import { Button } from '@/components/base/buttons';
+import { Dialog } from '@/components/features/overlays';
+import {
+	SyncRangeDialogForm,
+	type SyncRangeDialogFormSubmit,
+} from '@/components/features/sync';
+import { Text } from '@/components/typography';
+
+const rangeOptions = [
+	{
+		value: '6',
+		label: '6 hours',
+		description: 'Recent corrections only.',
+		icon: Clock3,
+	},
+	{
+		value: '24',
+		label: '24 hours',
+		description: 'Recommended for daily operations.',
+		icon: Database,
+	},
+	{
+		value: '48',
+		label: '48 hours',
+		description: 'Use after a long import pause.',
+		icon: RefreshCw,
+	},
+];
+
+const syncOptions = [
+	{
+		value: 'financials_only',
+		label: 'Financial records only',
+		description: 'Skip profile and note updates.',
+		icon: ReceiptText,
+	},
+];
+
+function SubmittedState({ value }: { value: SyncRangeDialogFormSubmit | null }) {
+	if (!value) return null;
+	return (
+		<Text size="xs" type="secondary">
+			Submitted {value.hours} hours
+			{value.financials_only ? ' with financial records only.' : ' with all records.'}
+		</Text>
+	);
+}
+
+export function SyncDialogPattern() {
+	const [open, setOpen] = useState(false);
+	const [submitted, setSubmitted] = useState<SyncRangeDialogFormSubmit | null>(null);
+
+	return (
+		<div className="space-y-3">
+			<Button type="button" variant="primary" icon={RefreshCw} onClick={() => setOpen(true)}>
+				Open sync dialog
+			</Button>
+			<SubmittedState value={submitted} />
+			<Dialog
+				open={open}
+				onOpenChange={setOpen}
+				title="Sync records"
+				description="Choose how far back the integration should reconcile records."
+				formId="sync-range-dialog-form"
+				size="lg"
+			>
+				<SyncRangeDialogForm
+					formId="sync-range-dialog-form"
+					options={rangeOptions}
+					syncOptions={syncOptions}
+					defaultHours="24"
+					onSubmit={(values) => {
+						setSubmitted(values);
+						setOpen(false);
+					}}
+				/>
+			</Dialog>
+		</div>
+	);
+}
+
+export function InlineSyncForm() {
+	const [submitted, setSubmitted] = useState<SyncRangeDialogFormSubmit | null>(null);
+
+	return (
+		<div className="max-w-2xl space-y-3">
+			<SyncRangeDialogForm
+				formId="inline-sync-range-form"
+				options={rangeOptions}
+				syncOptions={syncOptions}
+				defaultHours="6"
+				onSubmit={setSubmitted}
+				strings={{ optionsLabel: 'Sync scope' }}
+			/>
+			<div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
+				<SubmittedState value={submitted} />
+				<Button type="submit" form="inline-sync-range-form" variant="primary">
+					Run sync
+				</Button>
+			</div>
+		</div>
+	);
+}
+`;function P(e){let t={h4:`h4`,...e.components};return E||I(`Examples`,!1),M||I(`Examples.InlineSyncForm`,!0),j||I(`Examples.SyncDialogPattern`,!0),(0,w.jsxs)(r,{title:`Features · Sync`,description:`Reusable sync-range form for integration repair flows. The feature owns form state and validation wiring; consumers own dialog placement, submission, errors, and telemetry.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/sync`,children:[(0,w.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,w.jsx)(s,{name:`SyncDialogPattern`,source:N,children:(0,w.jsx)(j,{})}),(0,w.jsx)(s,{name:`InlineSyncForm`,source:N,children:(0,w.jsx)(M,{})})]}),(0,w.jsxs)(i,{title:`API`,id:`api`,children:[(0,w.jsx)(t.h4,{children:`SyncRangeDialogForm`}),(0,w.jsx)(h,{component:`SyncRangeDialogForm`})]})]})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,w.jsx)(t,{...e,children:(0,w.jsx)(P,{...e})}):P(e)}function I(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{F as default};