@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+
+import { useRecentColors } from "../../../infrastructure/hooks/use-recent-colors"
+import { Popover } from "../popover"
+import { LegacyColorPickerProvider } from "./legacy-color-picker.context"
+import { LegacyColorPickerContent } from "./legacy-color-picker.content"
+import { DEFAULT_COLOR_PICKER_PRESETS } from "./legacy-color-picker.presets"
+import { LegacyColorPickerOpenButton, LegacyColorPickerTrigger } from "./legacy-color-picker.trigger"
+import { LegacyColorPickerQuickList } from "./legacy-color-picker.quick-list"
+import type { LegacyColorPickerSize } from "./legacy-color-picker.types"
+import { DEFAULT_COLOR, normalizeHex } from "./legacy-color-picker.utils"
+
+export interface LegacyColorPickerProps
+  extends Omit<React.ComponentProps<typeof Popover>, "children"> {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  size?: LegacyColorPickerSize
+  presets?: string[]
+  disabled?: boolean
+  showQuickList?: boolean
+  quickListCount?: number
+  persistRecentColors?: boolean
+  children?: React.ReactNode
+}
+
+export function LegacyColorPicker({
+  value: valueProp,
+  defaultValue = DEFAULT_COLOR,
+  onValueChange,
+  size = "md",
+  presets = DEFAULT_COLOR_PICKER_PRESETS,
+  disabled = false,
+  showQuickList = true,
+  quickListCount = 7,
+  persistRecentColors = true,
+  children,
+  ...popoverProps
+}: LegacyColorPickerProps) {
+  const { recentColors, addRecentColor } = useRecentColors({ enabled: persistRecentColors })
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
+  const value = valueProp ?? uncontrolledValue
+
+  const handleValueChange = React.useCallback(
+    (nextValue: string) => {
+      const normalized = normalizeHex(nextValue) ?? nextValue
+      if (valueProp === undefined) {
+        setUncontrolledValue(normalized)
+      }
+      onValueChange?.(normalized)
+    },
+    [valueProp, onValueChange]
+  )
+
+  const handleCommit = React.useCallback(
+    (nextValue: string) => {
+      const normalized = normalizeHex(nextValue) ?? nextValue
+      if (valueProp === undefined) {
+        setUncontrolledValue(normalized)
+      }
+      onValueChange?.(normalized)
+      if (persistRecentColors) {
+        addRecentColor(normalized)
+      }
+    },
+    [valueProp, onValueChange, persistRecentColors, addRecentColor]
+  )
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      onValueChange: handleValueChange,
+      onCommit: handleCommit,
+      size,
+      disabled,
+      presets,
+      recentColors,
+      quickListCount,
+    }),
+    [value, handleValueChange, handleCommit, size, disabled, presets, recentColors, quickListCount]
+  )
+
+  return (
+    <LegacyColorPickerProvider value={contextValue}>
+      <Popover {...popoverProps}>
+        {children ?? (
+          showQuickList ? (
+            <>
+              <div
+                data-slot="color-picker-quick-container"
+                className="flex w-full items-center gap-1.5 rounded-full p-0"
+              >
+                <LegacyColorPickerQuickList />
+                <LegacyColorPickerOpenButton />
+              </div>
+              <LegacyColorPickerContent />
+            </>
+          ) : (
+            <>
+              <LegacyColorPickerTrigger />
+              <LegacyColorPickerContent />
+            </>
+          )
+        )}
+      </Popover>
+    </LegacyColorPickerProvider>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.types.ts

@@ -0,0 +1 @@
+export type LegacyColorPickerSize = "xs" | "sm" | "md" | "lg" | "xl"

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.utils.ts

@@ -0,0 +1,114 @@
+export const DEFAULT_COLOR = "#3B82F6"
+
+export interface RgbaColor {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+export interface HsvColor {
+  h: number
+  s: number
+  v: number
+}
+
+export function normalizeHex(value: string): string | null {
+  let hex = value.trim().replace(/^#/, "")
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex
+      .split("")
+      .map((char) => char + char)
+      .join("")
+  }
+  return /^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(hex) ? `#${hex.toLowerCase()}` : null
+}
+
+function toChannel(n: number): string {
+  return Math.max(0, Math.min(255, Math.round(n)))
+    .toString(16)
+    .padStart(2, "0")
+}
+
+export function hexToRgba(value: string): RgbaColor | null {
+  const normalized = normalizeHex(value)
+  if (!normalized) return null
+  const hex = normalized.slice(1)
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1
+  return { r, g, b, a }
+}
+
+export function rgbaToHex(rgba: RgbaColor): string {
+  const { r, g, b, a } = rgba
+  if (a >= 1) {
+    return `#${toChannel(r)}${toChannel(g)}${toChannel(b)}`
+  }
+  return `#${toChannel(r)}${toChannel(g)}${toChannel(b)}${toChannel(a * 255)}`
+}
+
+export function rgbaToCss(rgba: RgbaColor): string {
+  return `rgba(${Math.round(rgba.r)}, ${Math.round(rgba.g)}, ${Math.round(rgba.b)}, ${rgba.a})`
+}
+
+export function rgbToHsv(r: number, g: number, b: number): HsvColor {
+  const rf = r / 255
+  const gf = g / 255
+  const bf = b / 255
+  const max = Math.max(rf, gf, bf)
+  const min = Math.min(rf, gf, bf)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    switch (max) {
+      case rf:
+        h = ((gf - bf) / d) % 6
+        break
+      case gf:
+        h = (bf - rf) / d + 2
+        break
+      default:
+        h = (rf - gf) / d + 4
+    }
+    h *= 60
+    if (h < 0) {
+      h += 360
+    }
+  }
+  return {
+    h,
+    s: max === 0 ? 0 : d / max,
+    v: max,
+  }
+}
+
+export function hsvToRgb(h: number, s: number, v: number): Omit<RgbaColor, "a"> {
+  const c = v * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = v - c
+  let r = 0
+  let g = 0
+  let b = 0
+  if (h < 60) {
+    r = c
+    g = x
+  } else if (h < 120) {
+    r = x
+    g = c
+  } else if (h < 180) {
+    g = c
+    b = x
+  } else if (h < 240) {
+    g = x
+    b = c
+  } else if (h < 300) {
+    r = x
+    b = c
+  } else {
+    r = c
+    b = x
+  }
+  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }
+}

package/src/presentation/ui/legacy-country-input.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import {cn} from "../../infrastructure/utilities/utils"
+import {useMemo, useId, useState} from "react";
+import {countriesConstant, CountryInterface} from "../../infrastructure/data/countries";
+import {
+    InputGroup,
+    InputGroupAddon
+} from "./input-group"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./select"
+import type {LegacyInputColoring} from "./legacy-input"
+import {Field, FieldDescription} from "./field";
+import {useElasticInteraction, chainHandlers} from "../../infrastructure/hooks/use-elastic-interaction"
+
+export interface LegacyCountryInputProps extends React.ComponentProps<"div"> {
+    label?: string;
+    icon?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultCountryCode?: string;
+    onValueChange?: (value: string) => void;
+    onCountryChange?: (country: CountryInterface) => void;
+    color?: LegacyInputColoring;
+    required?: boolean;
+    description?: React.ReactNode;
+}
+
+const coloringClassname: Record<LegacyInputColoring, string> = {
+    disabled: "bg-background/20 text-foreground-500 opacity-50",
+    info: "!bg-primary/20 !text-primary !border-primary",
+    success: "bg-green-500/20 text-green-500 !border-green-500",
+    warning: "bg-yellow-500/20 text-yellow-500 !border-yellow-500",
+    error: 'bg-red-800/20 text-red-800 !border-red-500',
+    ghost: 'bg-transparent text-foreground',
+}
+
+const LegacyCountryInput = React.forwardRef<HTMLDivElement, LegacyCountryInputProps>(
+    ({
+         label,
+         description,
+         icon,
+         className,
+         id,
+         color,
+         placeholder = "Sélectionner un pays",
+         value: valueProp,
+         defaultCountryCode: defaultCountryCodeProp,
+         onValueChange,
+         onCountryChange,
+         required,
+         ...props
+     }, ref) => {
+        const reactId = useId();
+        const _id = useMemo(() => id || label?.toLowerCase().replace(/ /g, '-') || reactId, [id, label, reactId]);
+
+        const sortedCountries = useMemo(() => {
+            return [...countriesConstant].sort((a, b) => a.name.localeCompare(b.name));
+        }, []);
+
+        const defaultCountryCode = useMemo(() => {
+            if (defaultCountryCodeProp) return defaultCountryCodeProp;
+
+            if (typeof window === 'undefined') return 'CI';
+
+            try {
+                const locale = navigator.language;
+                const parts = locale.split('-');
+                const region = parts[parts.length - 1].toUpperCase();
+                if (region.length === 2 && countriesConstant.some(c => c.code === region)) {
+                    return region;
+                }
+            } catch {}
+
+            return 'CI';
+        }, [defaultCountryCodeProp]);
+
+        const [internalValue, setInternalValue] = useState(defaultCountryCode);
+        const value = valueProp ?? internalValue;
+
+        const selectedCountry = useMemo(() => {
+            if (!value) return undefined;
+            return sortedCountries.find(c => c.code === value);
+        }, [value, sortedCountries]);
+
+        const handleValueChange = (countryCode: string) => {
+            setInternalValue(countryCode);
+            onValueChange?.(countryCode);
+            const country = sortedCountries.find(c => c.code === countryCode);
+            if (country) {
+                onCountryChange?.(country);
+            }
+        };
+
+        const elastic = useElasticInteraction({pressScale: 0.99, focusScale: 1.015});
+
+        return (
+            <Field>
+                <InputGroup
+                    {...props}
+                    suppressHydrationWarning
+                    className={cn(
+                        "h-auto flex-col items-stretch rounded-md bg-background px-4 py-2.5",
+                        coloringClassname[color || 'ghost'] || '',
+                        className
+                    )}
+                    onPointerDown={chainHandlers(elastic.onPointerDown, props.onPointerDown)}
+                    onPointerUp={chainHandlers(elastic.onPointerUp, props.onPointerUp)}
+                    onPointerCancel={chainHandlers(elastic.onPointerCancel, props.onPointerCancel)}
+                    onPointerLeave={chainHandlers(elastic.onPointerLeave, props.onPointerLeave)}
+                    onFocus={chainHandlers(elastic.onFocus, props.onFocus)}
+                    onBlur={chainHandlers(elastic.onBlur, props.onBlur)}
+                >
+                    {label && (
+                        <InputGroupAddon
+                            align="block-start"
+                            className="px-0 py-0 text-[10px] uppercase font-bold tracking-wider text-muted-foreground select-none"
+                        >
+                            {label}
+                            {required && <span className="text-destructive">*</span>}
+                        </InputGroupAddon>
+                    )}
+                    <div className="flex items-center justify-between gap-2 mt-0.5">
+                        <Select value={value || ''} onValueChange={handleValueChange}>
+                            <SelectTrigger
+                                className="h-auto p-0 border-none bg-transparent! shadow-none! focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 w-full min-w-0 data-[placeholder]:text-muted-foreground/30 [&_[data-slot=select-value]]:text-sm [&_[data-slot=select-value]]:font-normal">
+                                <SelectValue placeholder={placeholder}>
+                                    {selectedCountry && (
+                                        <div className="flex items-center gap-1.5 text-sm font-medium">
+                                            <span className="text-base">{selectedCountry.flag}</span>
+                                            <span>{selectedCountry.name}</span>
+                                            {/*<span className="text-muted-foreground ml-auto">{selectedCountry.dialCode}</span>*/}
+                                        </div>
+                                    )}
+                                </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent className="max-h-80">
+                                {sortedCountries.map((country) => (
+                                    <SelectItem key={country.code} value={country.code} className="cursor-pointer">
+                                        <div className="flex items-center gap-2 w-full">
+                                            <span className="text-base">{country.flag}</span>
+                                            <span className="truncate flex-1">{country.name}</span>
+                                            <span className="text-muted-foreground text-xs">{country.dialCode}</span>
+                                        </div>
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        {icon && <InputGroupAddon
+                            align="inline-end"
+                            className="text-muted-foreground select-none px-0"
+                        >
+                            {icon}
+                        </InputGroupAddon>}
+                    </div>
+                </InputGroup>
+                {description && <FieldDescription className="mt-1">{description}</FieldDescription>}
+            </Field>
+        )
+    }
+)
+
+LegacyCountryInput.displayName = "LegacyCountryInput"
+
+export {LegacyCountryInput}

package/src/presentation/ui/legacy-gender-input.tsx

@@ -0,0 +1,22 @@
+import {LegacySelectInput, LegacySelectInputProps} from "./legacy-select-input";
+import {UserGenderEnum} from "../../infrastructure/data/gender";
+
+
+export function LegacyGenderInput(props: Omit<LegacySelectInputProps, 'options'>) {
+    return (
+        <LegacySelectInput
+            id="gender"
+            label="Genre"
+            placeholder="Sélectionner"
+            description={"Indiquez le genre pour plus de précision"}
+            {...props}
+            value={props.value || ''}
+            onValueChange={(value) => props.onValueChange?.(value as UserGenderEnum)}
+            options={[
+                {value: UserGenderEnum.MALE, label: 'Homme'},
+                {value: UserGenderEnum.FEMALE, label: 'Femme'},
+                {value: UserGenderEnum.OTHER, label: 'Autre'},
+            ]}
+        />
+    )
+}

package/src/presentation/ui/legacy-input.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import {cn} from "../../infrastructure/utilities/utils"
+import {useMemo, useId} from "react";
+import {
+    InputGroup,
+    InputGroupInput,
+    InputGroupAddon
+} from "./input-group"
+import {FieldDescription, Field} from "./field"
+import {useElasticInteraction, chainHandlers} from "../../infrastructure/hooks/use-elastic-interaction"
+
+export type LegacyInputColoring = 'error' | 'success' | 'warning' | 'info' | 'disabled' | 'ghost';
+
+export interface LegacyInputProps extends React.ComponentProps<"div"> {
+    label?: string;
+    icon?: React.ReactNode;
+    input?: React.ComponentProps<"input">;
+    color?: LegacyInputColoring;
+    description?: React.ReactNode;
+}
+
+const coloringClassname: Record<LegacyInputColoring, string> = {
+    disabled: "bg-background/20 text-foreground-500 opacity-50",
+    info: "!bg-primary/20 !text-primary !border-primary",
+    success: "bg-green-500/20 text-green-500 !border-green-500",
+    warning: "bg-yellow-500/20 text-yellow-500 !border-yellow-500",
+    error: 'bg-red-800/20 text-red-800 !border-red-500',
+    ghost: 'bg-transparent text-foreground',
+}
+
+
+const LegacyInput = React.forwardRef<HTMLInputElement, LegacyInputProps>(
+    ({label, icon, className, id, input, color, description, ...props}, ref) => {
+        const reactId = useId();
+        const _id = useMemo(() => id || label?.toLowerCase().replace(/ /g, '-') || reactId, [id, label, reactId]);
+
+        const {
+            type,
+            placeholder,
+            required,
+            value,
+            onChange,
+            className: inputClassName,
+            ...inputProps
+        } = input || {};
+
+        const elastic = useElasticInteraction({pressScale: 0.99, focusScale: 1.015});
+
+        return (
+            <Field>
+                <InputGroup
+                    {...props}
+                    suppressHydrationWarning
+                    className={cn(
+                        "h-auto flex-col items-stretch rounded-md bg-background  px-4 py-2.5",
+                        coloringClassname[color || 'ghost'] || '',
+                        className
+                    )}
+                    onPointerDown={chainHandlers(elastic.onPointerDown, props.onPointerDown)}
+                    onPointerUp={chainHandlers(elastic.onPointerUp, props.onPointerUp)}
+                    onPointerCancel={chainHandlers(elastic.onPointerCancel, props.onPointerCancel)}
+                    onPointerLeave={chainHandlers(elastic.onPointerLeave, props.onPointerLeave)}
+                    onFocus={chainHandlers(elastic.onFocus, props.onFocus)}
+                    onBlur={chainHandlers(elastic.onBlur, props.onBlur)}
+                >
+                    <InputGroupAddon
+                        align="block-start"
+                        className="px-0 py-0 text-[10px] uppercase font-bold tracking-wider text-muted-foreground select-none"
+                    >
+                        {label}
+                        {required && <span className="text-destructive">*</span>}
+                    </InputGroupAddon>
+                    <div className="flex items-center justify-between gap-2 mt-0.5">
+                        <InputGroupInput
+                            ref={ref}
+                            id={_id}
+                            type={type}
+                            placeholder={placeholder}
+                            required={required}
+                            value={value}
+                            onChange={onChange}
+                            className={cn(
+                                "text-sm placeholder:text-muted-foreground/30 px-0!",
+                                inputClassName,
+                            )}
+                            {...inputProps}
+                        />
+                        {icon && <InputGroupAddon
+                            align="inline-end"
+                            className="text-muted-foreground select-none px-0"
+                        >
+                            {icon}
+                        </InputGroupAddon>}
+                    </div>
+                </InputGroup>
+                {description && <FieldDescription className="mt-1">{description}</FieldDescription>}
+            </Field>
+        )
+    }
+)
+
+LegacyInput.displayName = "LegacyInput"
+
+export {LegacyInput}