@tulip-systems/core 0.8.2 → 0.9.0

package/src/modules/inline-edit/components/editor.client.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { Editor, type EditorProps } from "@/components/editor/components/editor.client";
-import type { EditorJSONContent } from "@/components/editor/lib/types";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
-  EditorJSONContent,
-  Required
-> &
-  InlineEditVariantsProps &
-  Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
-
-export function InlineEditor<Required extends boolean = false>({
-  initialValue,
-  action,
-  extensions,
-  variant,
-  disabled,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  children,
-}: InlineEditorProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Editor
-      value={value}
-      extensions={extensions}
-      onUpdate={(value) => handleChange(value)}
-      onBlur={(value) => handleBlur(value)}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-      disabled={disabled || !isAllowed}
-      variant={variant}
-      attributes={{
-        "data-inline-input": "editor",
-      }}
-    >
-      {children}
-    </Editor>
-  );
-}

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { type Contact, RecipientInput } from "@/components/ui/input-recipient";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-type InlineRecipientInputProps<Required extends boolean = false> = Omit<
-  ComponentProps<typeof RecipientInput>,
-  "value" | "onChange"
-> &
-  useInlineEditOptions<string[], Required> &
-  InlineEditVariantsProps & {
-    contacts: Contact[];
-  };
-
-/**
- * The inline edit recipient input component.
- */
-export function InlineRecipientInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  disabled,
-  contacts,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineRecipientInputProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <RecipientInput
-      {...props}
-      data-inline-input="recipient"
-      contacts={contacts}
-      value={value ?? []}
-      onChange={(newValue) => {
-        handleChange(newValue);
-        handleBlur(newValue);
-      }}
-      disabled={disabled || !isAllowed}
-      className={cn(inlineEditVariants({ variant, status }), className)}
-    />
-  );
-}

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { CheckIcon, XIcon } from "lucide-react";
-import { type ComponentProps, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/entry";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
-  ComponentProps<typeof Input>,
-  "type"
-> &
-  useInlineEditOptions<string, Required>;
-
-export function InlineStringInputToggle<Required extends boolean>({
-  initialValue,
-  action,
-  disabled,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineStringInputToggleProps<Required>) {
-  const [enabled, setEnabled] = useState(!!initialValue);
-
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  function handleToggle() {
-    setEnabled(!enabled);
-    if (!enabled) return;
-
-    handleBlur(null);
-  }
-
-  const isDisabled = !enabled || disabled || !isAllowed;
-
-  return (
-    <div className="relative">
-      <Input
-        {...props}
-        data-inline-input="input-toggle"
-        type="text"
-        value={value ?? undefined}
-        disabled={isDisabled}
-        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-        className={cn("w-full border-border/70 hover:border-border", className)}
-      />
-
-      <Button
-        variant="ghost"
-        onClick={handleToggle}
-        tabIndex={-1}
-        className={cn(
-          "absolute top-0 right-0 bottom-0 opacity-50",
-          !value && "text-muted-foreground",
-        )}
-      >
-        {enabled ? <CheckIcon /> : <XIcon />}
-      </Button>
-    </div>
-  );
-}

package/src/modules/inline-edit/components/input.client.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
-  ComponentProps<typeof Input>,
-  "type"
-> &
-  useInlineEditOptions<TValue, Required> &
-  InlineEditVariantsProps;
-
-/**
- * The inline edit string input component.
- */
-export function InlineStringInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<string, Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="string"
-      type="text"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}
-
-/**
- * The inline edit number input component.
- */
-const parseValueAsNumber = (valueAsNumber: number): number | null =>
-  !Number.isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
-
-export function InlineNumberInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<number, Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="number"
-      type="number"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
-      onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}
-
-/**
- * The inline edit decimal input component.
- */
-export function InlineDecimalInput({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<string>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="decimal"
-      type="number"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}

package/src/modules/inline-edit/components/select.client.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.client";
-import { useIndicator } from "@/lib/entry.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-export function InlineSelect<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: ComponentProps<typeof Select> & useInlineEditOptions<string, Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Select
-      {...props}
-      disabled={disabled || !isAllowed}
-      defaultValue={value ?? undefined}
-      onValueChange={(value) => {
-        handleChange(value ? value : null);
-        handleBlur(value ? value : null);
-      }}
-    />
-  );
-}
-
-export function InlineSelectTrigger({
-  variant,
-  className,
-  ...props
-}: ComponentProps<typeof SelectTrigger> & InlineEditVariantsProps) {
-  const { status } = useIndicator();
-
-  return (
-    <SelectTrigger
-      {...props}
-      data-inline-input="select"
-      className={cn(inlineEditVariants({ variant, status }), className)}
-    />
-  );
-}
-
-export function InlineSelectContent(props: ComponentProps<typeof SelectContent>) {
-  return <SelectContent {...props} />;
-}
-
-export function InlineSelectValue(props: ComponentProps<typeof SelectValue>) {
-  return <SelectValue {...props} />;
-}
-
-export function InlineSelectItem(props: ComponentProps<typeof SelectItem>) {
-  return <SelectItem {...props} />;
-}

package/src/modules/inline-edit/components/switch.client.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Switch } from "@/components/ui/switch.client";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-export function InlineSwitch<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: ComponentProps<typeof Switch> & useInlineEditOptions<boolean, Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Switch
-      {...props}
-      data-inline-input="switch"
-      disabled={disabled || !isAllowed}
-      defaultChecked={value ?? undefined}
-      onCheckedChange={(checked) => {
-        handleChange(checked ?? null);
-        handleBlur(checked ?? null);
-      }}
-    />
-  );
-}

package/src/modules/inline-edit/components/toggle.client.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import type React from "react";
-import { Toggle } from "@/components/ui/toggle.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-export type InlineEditToggleProps<Required extends boolean = false> =
-  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;
-
-export function InlineToggle<Required extends boolean = false>({
-  initialValue,
-  action,
-  children,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineEditToggleProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <div {...props} className={cn("flex flex-wrap items-center justify-start gap-1", className)}>
-      <Toggle
-        data-inline-input="toggle"
-        disabled={!isAllowed}
-        variant="outline"
-        pressed={value ?? undefined}
-        defaultChecked={initialValue ?? undefined}
-        onPressedChange={(value) => {
-          handleChange(value);
-          handleBlur(value);
-        }}
-      >
-        {children}
-      </Toggle>
-    </div>
-  );
-}

package/src/modules/inline-edit/entry.client.ts

@@ -1,22 +0,0 @@
-/**
- * Components
- */
-
-export * from "./components/combobox.client";
-export * from "./components/combobox-dropdown.client";
-export * from "./components/date-input.client";
-export * from "./components/date-picker.client";
-export * from "./components/date-time.client";
-export * from "./components/editor.client";
-export * from "./components/input.client";
-export * from "./components/input-recipient.client";
-export * from "./components/input-toggle.client";
-export * from "./components/select.client";
-export * from "./components/switch.client";
-export * from "./components/toggle.client";
-
-/**
- * Hooks
- */
-export * from "./hooks/context.client";
-export * from "./hooks/use-inline.client";

package/src/modules/inline-edit/hooks/context.client.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import type React from "react";
-import { createContext, useContext } from "react";
-import type { Permission } from "@/modules/auth/lib/permissions";
-
-/**
- * InlineEditContext
- */
-export type InlineEditContextParams = { id: string; permission?: Permission };
-const InlineEditContext = createContext<InlineEditContextParams | undefined>(undefined);
-
-/**
- * UseInlineEditContext
- */
-export function useInlineEditContext() {
-  const context = useContext(InlineEditContext);
-  if (!context) throw new Error("InlineEditContext not found!");
-  return context;
-}
-
-/**
- * InlineEditContext Provider
- */
-export function InlineEditProvider({
-  children,
-  ...value
-}: InlineEditContextParams & { children: React.ReactNode }) {
-  return <InlineEditContext.Provider value={value}>{children}</InlineEditContext.Provider>;
-}