Date Input

package.json

@@ -21,6 +21,7 @@
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@icons-pack/react-simple-icons": "^13.13.0",
+    "@internationalized/date": "^3.12.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/context-zone": "^2.6.1",
     "@opentelemetry/exporter-logs-otlp-http": "^0.218.0",

src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx

@@ -12,6 +12,7 @@ import {DataTypeBooleanInputComponent} from "@edition/datatype/components/inputs
 import {DataTypeSelectInputComponent} from "@edition/datatype/components/inputs/select/DataTypeSelectInputComponent";
 import {InputWrapperProps} from "@code0-tech/pictor/dist/components/form/InputWrapper";
 import {DataTypeNumberInputComponent} from "@edition/datatype/components/inputs/number/DataTypeNumberInputComponent";
+import {DataTypeDateInputComponent} from "@edition/datatype/components/inputs/date/DataTypeDateInputComponent";
 import {DataTypeJSONInputComponent} from "@edition/datatype/components/inputs/json/DataTypeJSONInputComponent";
 import {DataTypeGenericInputComponent} from "@edition/datatype/components/inputs/generic/DataTypeGenericInputComponent";
 import {
@@ -56,6 +57,11 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
                         schema={schema}
                         suggestions={suggestions}
                         {...rest}/>
+                case "date":
+                    return <DataTypeDateInputComponent
+                        schema={schema}
+                        suggestions={suggestions}
+                        {...rest}/>
                 case "list":
                 case "data":
                     return <DataTypeJSONInputComponent

src/packages/ce/src/datatype/components/inputs/DataTypeInputControlsComponent.tsx

@@ -11,6 +11,7 @@ import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/Refer
 import {
     Button,
     ButtonGroup,
+    ButtonProps,
     Flex,
     Menu,
     MenuContent,
@@ -36,6 +37,7 @@ export interface DataTypeInputControlsComponentProps {
     suggestions?: (NodeFunction | SubFlowValue | ReferenceValue | LiteralValue)[]
     onSelect?: (value: NodeFunction | SubFlowValue | ReferenceValue | LiteralValue | null) => void
     showSuggestions?: boolean
+    children?: React.ReactElement<ButtonProps>
 }
 
 interface ReferencePathTreeNode {
@@ -130,7 +132,7 @@ const ReferencePathMenuItems: React.FC<{
 
 export const DataTypeInputControlsComponent: React.FC<DataTypeInputControlsComponentProps> = (props) => {
 
-    const {suggestions, showSuggestions = true, onSelect} = props
+    const {suggestions, showSuggestions = true, onSelect, children} = props
 
     const menuEntries = React.useMemo(() => {
         if (!suggestions) return []
@@ -258,6 +260,7 @@ export const DataTypeInputControlsComponent: React.FC<DataTypeInputControlsCompo
                 </MenuPortal>
             </Menu>
         ) : <></>}
+        {children ?? <></>}
         <Button paddingSize={"xxs"} tabIndex={-1} onClick={(event) => {
             onSelect?.(null)
             event.stopPropagation()

src/packages/ce/src/datatype/components/inputs/date/DataTypeDateInputComponent.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {DataTypeInputComponentProps} from "../DataTypeInputComponent";
+import {
+    Button,
+    DateInput,
+    DateInputContent,
+    DateInputControl,
+    DateInputField,
+    DateInputTrigger,
+    InputDescription,
+    InputLabel
+} from "@code0-tech/pictor";
+import {IconCalendar} from "@tabler/icons-react";
+import {fromDate} from "@internationalized/date";
+import {useDebouncedCallback} from "use-debounce";
+import {
+    LiteralValue,
+    NodeFunction,
+    NodeParameterValue,
+    ReferenceValue,
+    SubFlowValue
+} from "@code0-tech/sagittarius-graphql-types";
+import {DataTypeInputControlsComponent} from "@edition/datatype/components/inputs/DataTypeInputControlsComponent";
+import {DataTypeInputValueComponent} from "@edition/datatype/components/inputs/DataTypeInputValueComponent";
+
+export type DataTypeDateInputComponentProps = DataTypeInputComponentProps
+
+export const DataTypeDateInputComponent: React.FC<DataTypeDateInputComponentProps> = (props) => {
+
+    const {formValidation, title, initialValue, description, suggestions, onChange} = props
+
+    const defaultValue: NodeParameterValue | NodeFunction | undefined = React.useMemo(() => initialValue ?? undefined, [initialValue])
+    const onChangeDebounced = useDebouncedCallback((value: number | LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
+        if (typeof value === "number") {
+            onChange?.({__typename: "LiteralValue", value})
+        } else {
+            onChange?.(value)
+        }
+    }, 400)
+
+    return React.useMemo(() => <>
+        <InputLabel>{title}</InputLabel>
+        <InputDescription>{description}</InputDescription>
+        <DataTypeInputValueComponent initialValue={initialValue} onChange={value => {
+            formValidation?.setValue?.(value)
+            onChangeDebounced(value)
+        }} suggestions={suggestions}
+                                     formValidation={formValidation}>
+            <DateInput value={typeof (defaultValue as LiteralValue)?.value === "number"
+                ? fromDate(new Date((defaultValue as LiteralValue).value as number * 1000), "UTC")
+                : null}
+                       granularity={"second"}
+                       locale={"de-DE"}
+                       closeOnSelect={false}
+                       formValidation={{
+                           ...formValidation,
+                           setValue: (value) => {
+                               const literal: LiteralValue | null = value == null ? null : {
+                                   __typename: "LiteralValue",
+                                   value: value as number
+                               }
+                               formValidation?.setValue?.(literal)
+                               onChangeDebounced(value as number | null)
+                           }
+                       }}
+                       maw={"100%"}
+                       right={
+                           <DataTypeInputControlsComponent suggestions={suggestions} onSelect={value => {
+                               formValidation?.setValue?.(value)
+                               onChangeDebounced(value)
+                           }}>
+                               <DateInputTrigger asChild>
+                                   <Button paddingSize={"xxs"}>
+                                       <IconCalendar size={13}/>
+                                   </Button>
+                               </DateInputTrigger>
+                           </DataTypeInputControlsComponent>
+                       }
+                       rightType={"action"}>
+                <DateInputControl>
+                    <DateInputField fz={0.8}/>
+                </DateInputControl>
+                <DateInputContent withTime/>
+            </DateInput>
+        </DataTypeInputValueComponent>
+    </>, [formValidation, defaultValue])
+}