akanjs 0.0.1 → 2.0.0-beta.0

package/ui/DatePicker.tsx

@@ -0,0 +1,184 @@
+"use client";
+import "react-datepicker/dist/react-datepicker.css";
+
+import { type Dayjs, dayjs } from "akanjs/base";
+import { clsx, msg } from "akanjs/client";
+import { lazy } from "akanjs/webkit";
+import { useEffect, useRef } from "react";
+import { AiOutlineSwapRight } from "react-icons/ai";
+
+const ReactDatePicker = lazy(() => import("react-datepicker"), { ssr: false });
+interface DatePickerProps {
+  value?: Dayjs | null;
+  onChange: (value: Dayjs | null) => void;
+  showTime?: boolean;
+  format?: string;
+  timeIntervals?: number;
+  disabledDate?: (date: Dayjs) => boolean | null | undefined;
+  className?: string;
+  placement?: "top" | "bottom" | "left" | "right";
+  defaultValue?: Dayjs;
+}
+
+export const DatePicker = ({
+  value,
+  onChange,
+  showTime,
+  format = "yyyy-MM-dd",
+  timeIntervals = 10,
+  disabledDate,
+  placement,
+  className = "",
+  defaultValue,
+}: DatePickerProps) => {
+  const clickNum = useRef(0);
+
+  useEffect(() => {
+    if (defaultValue) {
+      onChange(defaultValue);
+    }
+  }, [defaultValue]);
+
+  const handleDateChange = (date?: Date | null) => {
+    if (!date) {
+      msg.warning("base.selectDateError");
+      return;
+    }
+    onChange(dayjs(date));
+  };
+
+  return (
+    <ReactDatePicker
+      className={clsx("input text-center", className)}
+      selected={value ? value.toDate() : new Date()}
+      disabledKeyboardNavigation
+      onFocus={(e) => {
+        
+        if (clickNum.current % 2 === 0) e.target.blur();
+        clickNum.current++;
+      }}
+      onChange={handleDateChange}
+      showTimeSelect={showTime}
+      popperPlacement={placement}
+      timeIntervals={timeIntervals}
+      filterDate={(date) => (!disabledDate?.(dayjs(date)) ? true : false)}
+      dateFormat={format}
+    />
+  );
+};
+
+interface RangePickerProps {
+  value: [Dayjs | null, Dayjs | null];
+  onChange: (value: [Dayjs | null, Dayjs | null]) => void;
+  format?: string;
+  showTime?: boolean;
+  timeIntervals?: number;
+  disabledDate?: (date: Dayjs) => boolean | null | undefined;
+  className?: string;
+}
+
+const RangePicker = ({
+  value,
+  onChange,
+  format = "yyyy-MM-dd",
+  showTime,
+  timeIntervals = 10,
+  disabledDate,
+  className = "",
+}: RangePickerProps) => {
+  const handleStartDateChange = (date?: Date | null) => {
+    if (!date) {
+      msg.warning("base.selectDateError");
+      return;
+    }
+    onChange([dayjs(date), value[1] ?? dayjs()]);
+  };
+  const handleEndDateChange = (date?: Date | null) => {
+    if (!date) {
+      msg.warning("base.selectDateError");
+      return;
+    }
+    onChange([value[0] ?? dayjs(), dayjs(date)]);
+  };
+
+  const pickerClassName = "m-0 input focus:outline-hidden z-50 p-3 text-center h-full w-full ";
+  return (
+    <div className={clsx("input flex h-full w-fit items-center gap-2 p-0", className)}>
+      <ReactDatePicker
+        className={pickerClassName}
+        selected={value[0] ? value[0].toDate() : undefined}
+        selectsStart
+        startDate={value[0] ? value[0].toDate() : undefined}
+        endDate={value[1] ? value[1].toDate() : undefined}
+        onChange={handleStartDateChange}
+        showTimeSelect={showTime}
+        timeIntervals={timeIntervals}
+        filterDate={(date) => (!disabledDate?.(dayjs(date)) ? true : false)}
+        dateFormat={format}
+      />
+      <AiOutlineSwapRight className="text-3xl text-gray-400" />
+      <ReactDatePicker
+        className={pickerClassName}
+        selected={value[1] ? value[1].toDate() : undefined}
+        selectsEnd
+        startDate={value[0] ? value[0].toDate() : undefined}
+        endDate={value[1] ? value[1].toDate() : undefined}
+        onChange={handleEndDateChange}
+        showTimeSelect={showTime}
+        timeIntervals={timeIntervals}
+        filterDate={(date: Date) =>
+          !disabledDate?.(dayjs(date)) && !!value[0] && !dayjs(date).add(1, "day").isBefore(value[0]) ? true : false
+        }
+        filterTime={(time: Date) => !!value[0] && dayjs(time).isAfter(value[0])}
+        dateFormat={format}
+      />
+    </div>
+  );
+};
+
+DatePicker.RangePicker = RangePicker;
+
+interface TimePickerProps {
+  value: Dayjs | null;
+  onChange: (value: Dayjs) => void;
+  format?: string;
+  timeIntervals?: number;
+  disabledDate?: (date: Dayjs) => boolean | null | undefined;
+  className?: string;
+  disabled?: boolean;
+}
+
+const TimePicker = ({
+  disabled,
+  className,
+  value,
+  format = "HH:mm",
+  onChange,
+  timeIntervals = 10,
+}: TimePickerProps) => {
+  const handleDateChange = (date?: Date | null) => {
+    if (!date) {
+      msg.warning("base.selectDateError");
+      return;
+    }
+    onChange(dayjs(date));
+  };
+
+  return (
+    <ReactDatePicker
+      wrapperClassName="inline-block"
+      className={clsx("inline-block w-auto", className)}
+      selected={value ? value.toDate() : new Date()}
+      onChange={handleDateChange}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={timeIntervals}
+      timeCaption="Time"
+      dateFormat={format}
+      disabled={disabled}
+    />
+  );
+};
+
+DatePicker.TimePicker = TimePicker;
+

package/ui/Dialog/Action.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { type ReactNode, useContext, useEffect } from "react";
+
+import { DialogContext } from "./context";
+
+export interface ActionProps {
+  children?: ReactNode;
+}
+export const Action = ({ children }: ActionProps) => {
+  const { setAction } = useContext(DialogContext);
+  useEffect(() => {
+    setAction(children);
+  }, [children]);
+  return null;
+};

package/ui/Dialog/Close.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { type ReactNode, useContext } from "react";
+
+import { DialogContext } from "./context";
+
+export interface CloseProps {
+  className?: string;
+  children?: ReactNode;
+}
+export const Close = ({ className, children }: CloseProps) => {
+  const { setOpen } = useContext(DialogContext);
+  return (
+    <a
+      className={className}
+      onClick={() => {
+        setOpen(false);
+      }}
+    >
+      {children}
+    </a>
+  );
+};

package/ui/Dialog/Content.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+
+export interface ContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+export const Content = ({ className, children }: ContentProps) => {
+  return <div className={clsx("block w-full", className)}>{children}</div>;
+};

package/ui/Dialog/Modal.tsx

@@ -0,0 +1,137 @@
+"use client";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useDrag } from "@use-gesture/react";
+import { clsx, usePage } from "akanjs/client";
+import { animated } from "akanjs/ui";
+import { type ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { BiX } from "react-icons/bi";
+import { config, useSpring } from "react-spring";
+
+import { DialogContext } from "./context";
+
+const MODAL_MARGIN = 0; 
+const OPACITY = { START: 0, END: 1 };
+
+const interpolate = (o: number, i: number, t: number) => {
+  return o + (i - o) * t;
+};
+
+export interface ModalProps {
+  className?: string;
+  bodyClassName?: string;
+  confirmClose?: boolean;
+  children?: ReactNode;
+  onCancel?: () => void;
+}
+export const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }: ModalProps) => {
+  const { open, setOpen, title, action } = useContext(DialogContext);
+  const openRef = useRef<boolean>(open);
+  const { l } = usePage();
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
+  const [showBackground, setShowBackground] = useState(false);
+  const openModal = async ({ canceled }: { canceled?: boolean } = {}) => {
+    setTimeout(() => {
+      setShowBackground(true);
+    }, 100);
+    await Promise.all(api.start({ translate: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }));
+  };
+  const closeModal = async ({ velocity = 0, confirmClose }: { velocity?: number; confirmClose?: boolean }) => {
+    if (confirmClose && !window.confirm(l("base.confirmClose"))) {
+      return;
+    }
+    setTimeout(() => {
+      setShowBackground(false);
+    }, 100);
+    await Promise.all(api.start({ translate: 1, immediate: false, config: { ...config.stiff, velocity } }));
+    setOpen(false);
+    onCancel?.();
+  };
+  const bind = useDrag(
+    ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], movement: [, my], cancel, canceled }) => {
+      if (!ref.current) return;
+      const height = (ref.current.clientHeight || MODAL_MARGIN) - MODAL_MARGIN;
+      if (my > 70) cancel();
+      if (last) {
+        if (my > height * 0.5 || (vy > 0.5 && dy > 0))
+          void closeModal({ velocity: vy / height, confirmClose: confirmClose });
+        else void openModal({ canceled });
+      } else void api.start({ translate: oy / height, immediate: true });
+    },
+    { from: () => [0, translate.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true },
+  );
+  const opacity = translate.to((t) => {
+    return interpolate(OPACITY.END, OPACITY.START, t);
+  });
+  const translateY = translate.to((t) => {
+    return `${t * 100}%`;
+  });
+
+  useEffect(() => {
+    if (openRef.current === open) return;
+    openRef.current = open;
+    if (open) void openModal();
+    else void closeModal({});
+  }, [open]);
+
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay
+        onClick={() => {
+          void closeModal({ confirmClose });
+        }}
+      >
+        {showBackground ? (
+          <div className={"fixed inset-0 z-10 bg-base-content/50 backdrop-blur-md data-[state=open]:animate-fadeIn"} />
+        ) : null}
+      </Dialog.Overlay>
+      <Dialog.Content
+        className="fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+        asChild
+        forceMount
+      >
+        <div className="z-10">
+          <animated.div ref={ref} style={{ translateY, opacity }}>
+            <button
+              className="btn btn-circle btn-sm absolute top-[-16px] right-0 z-20 md:top-[-40px]"
+              onClick={() => void closeModal({ confirmClose })}
+            >
+              <BiX className="text-3xl" />
+            </button>
+            <div
+              className={clsx(
+                "mx-auto mt-6 flex max-h-[75vh] w-full max-w-screen animate-fadeIn flex-col items-center justify-center overflow-x-hidden rounded-lg bg-base-100 transition-all duration-100 sm:w-[90%] sm:px-2 sm:pb-2 md:mt-0 md:max-h-[90vh] md:pt-0",
+                className,
+              )}
+            >
+              <Dialog.Title asChild>
+                <animated.div
+                  {...bind()}
+                  className="relative z-10 flex w-full animate-fadeIn cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1"
+                >
+                  <div className="flex w-full cursor-pointer items-center justify-center pt-1 opacity-50">
+                    <div className="h-1 w-24 rounded-full bg-gray-500" />
+                  </div>
+                  <div className="flex w-full items-center justify-start">
+                    <div className="w-full text-start font-bold text-lg">{title}</div>
+                  </div>
+                </animated.div>
+              </Dialog.Title>
+              <Dialog.Description asChild>
+                <div
+                  className={clsx(
+                    "scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-base-content/30 border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
+                    bodyClassName,
+                  )}
+                >
+                  {children}
+                </div>
+              </Dialog.Description>
+              {action ? <div className="w-full">{action}</div> : null}
+            </div>
+          </animated.div>
+        </div>
+      </Dialog.Content>
+    </Dialog.Portal>
+  );
+};

package/ui/Dialog/Provider.tsx

@@ -0,0 +1,33 @@
+"use client";
+import * as Dialog from "@radix-ui/react-dialog";
+import { clsx } from "akanjs/client";
+import { type ReactNode, useEffect, useState } from "react";
+
+import { DialogContext } from "./context";
+
+export interface ProviderProps {
+  /** Additional classes for the dialog root wrapper. */
+  className?: string;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  children?: ReactNode;
+}
+export const Provider = ({ className, defaultOpen = false, open = defaultOpen, children }: ProviderProps) => {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const [title, setTitle] = useState<ReactNode>(null);
+  const [action, setAction] = useState<ReactNode>(null);
+  useEffect(() => {
+    setOpenState(open);
+  }, [open]);
+  return (
+    <DialogContext.Provider value={{ open: openState, setOpen: setOpenState, title, setTitle, action, setAction }}>
+      <Dialog.Root open={openState}>
+        <div data-open={openState} className={clsx("group/dialog", className)}>
+          {children}
+        </div>
+      </Dialog.Root>
+    </DialogContext.Provider>
+  );
+};

package/ui/Dialog/Title.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { type ReactNode, useContext, useEffect } from "react";
+
+import { DialogContext } from "./context";
+
+export interface TitleProps {
+  children?: ReactNode;
+}
+export const Title = ({ children }: TitleProps) => {
+  const { setTitle } = useContext(DialogContext);
+  useEffect(() => {
+    setTitle(children);
+  }, [children]);
+  return null;
+};

package/ui/Dialog/Trigger.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { type ReactNode, useContext } from "react";
+
+import { DialogContext } from "./context";
+
+export interface TriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+export const Trigger = ({ className, children }: TriggerProps) => {
+  const { setOpen } = useContext(DialogContext);
+  return (
+    <div
+      className={className}
+      onClick={() => {
+        setOpen(true);
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/ui/Dialog/context.ts

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, type ReactNode } from "react";
+
+export interface DialogContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  title: ReactNode;
+  setTitle: (title: ReactNode) => void;
+  action: ReactNode;
+  setAction: (action: ReactNode) => void;
+}
+
+export const DialogContext = createContext<DialogContextType>({
+  open: false,
+  setOpen: (open: boolean) => null,
+  title: null,
+  setTitle: (title: ReactNode) => null,
+  action: null,
+  setAction: (action: ReactNode) => null,
+});

package/ui/Dialog/index.tsx

@@ -0,0 +1,15 @@
+import { Action } from "./Action";
+import { Content } from "./Content";
+import { Modal } from "./Modal";
+import { Provider, type ProviderProps } from "./Provider";
+import { Title } from "./Title";
+import { Trigger } from "./Trigger";
+
+export const Dialog = ({ children, ...props }: ProviderProps) => {
+  return <Provider {...props}>{children}</Provider>;
+};
+Dialog.Modal = Modal;
+Dialog.Title = Title;
+Dialog.Action = Action;
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;

package/ui/DragAction.tsx

@@ -0,0 +1,129 @@
+"use client";
+import { useGesture } from "@use-gesture/react";
+import type { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
+import { clsx } from "akanjs/client";
+import { animated } from "akanjs/ui";
+import { createContext, type ReactNode, useContext, useRef } from "react";
+import { SpringValue, useSpring } from "react-spring";
+
+interface DragActionContextType {
+  bind: () => ReactDOMAttributes;
+  x: SpringValue<number>;
+  y: SpringValue<number>;
+  leftOpacity: SpringValue<number>;
+  leftWidth: SpringValue<number>;
+  rightOpacity: SpringValue<number>;
+  rightWidth: SpringValue<number>;
+  onClick?: () => void;
+}
+
+const DragActionContext = createContext<DragActionContextType>({
+  bind: () => ({}),
+  x: new SpringValue(0),
+  y: new SpringValue(0),
+  leftOpacity: new SpringValue(0),
+  leftWidth: new SpringValue(0),
+  rightOpacity: new SpringValue(0),
+  rightWidth: new SpringValue(0),
+});
+
+interface DragActionProps {
+  className?: string;
+  children: ReactNode;
+  onClick?: () => void;
+  onLeft?: () => void;
+  onRight?: () => void;
+}
+export const DragAction = ({ className, children, onClick, onLeft, onRight }: DragActionProps) => {
+  const action = useRef<"left" | "right" | null>(null);
+  const [{ x, y, leftOpacity, leftWidth, rightOpacity, rightWidth }, api] = useSpring(() => ({
+    x: 0,
+    y: 0,
+    leftOpacity: 0,
+    leftWidth: 0,
+    rightOpacity: 0,
+    rightWidth: 0,
+  }));
+  const ref = useRef<HTMLDivElement>(null);
+
+  const bind = useGesture(
+    {
+      onClick: () => {
+        if (!action.current) onClick?.();
+        action.current = null;
+      },
+      onDrag: ({ down, movement: [mx], event }) => {
+        if (!ref.current) return;
+        void api.start({
+          x: down ? mx : 0,
+          leftOpacity: mx > 0 && down ? mx / ref.current.clientWidth : 0,
+          leftWidth: mx > 0 && down ? Math.min(mx, ref.current.clientWidth) : 0,
+          rightOpacity: mx < 0 && down ? -mx / ref.current.clientWidth : 0,
+          rightWidth: mx < 0 && down ? Math.min(-mx, ref.current.clientWidth) : 0,
+        });
+        action.current = mx > 0 ? "left" : mx < 0 ? "right" : null;
+      },
+      onDragEnd: ({ movement: [mx] }) => {
+        if (!ref.current) return;
+        void api.start({ x: 0, leftOpacity: 0, leftWidth: 0, rightOpacity: 0, rightWidth: 0 });
+        if (mx > ref.current.clientWidth / 2 && onLeft) onLeft();
+        if (mx < -ref.current.clientWidth / 2 && onRight) onRight();
+      },
+    },
+    { drag: { axis: "x" } },
+  );
+  return (
+    <DragActionContext.Provider value={{ bind, x, y, leftOpacity, leftWidth, rightOpacity, rightWidth, onClick }}>
+      <div ref={ref} className={clsx("relative overflow-x-hidden", className)}>
+        {children}
+      </div>
+    </DragActionContext.Provider>
+  );
+};
+
+interface BodyProps {
+  children: ReactNode;
+}
+const Body = ({ children }: BodyProps) => {
+  const { bind, x } = useContext(DragActionContext);
+  return (
+    <animated.div className="cursor-pointer" {...bind()} style={{ x, touchAction: "pan-y" }}>
+      {children}
+    </animated.div>
+  );
+};
+DragAction.Body = Body;
+
+interface LeftProps {
+  children: ReactNode;
+}
+const Left = ({ children }: LeftProps) => {
+  const { bind, leftOpacity, leftWidth } = useContext(DragActionContext);
+  return (
+    <animated.div
+      {...bind()}
+      style={{ touchAction: "pan-y", opacity: leftOpacity, width: leftWidth }}
+      className="absolute inset-y-0 left-0 flex items-center justify-center"
+    >
+      {children}
+    </animated.div>
+  );
+};
+DragAction.Left = Left;
+
+interface RightProps {
+  children: ReactNode;
+}
+const Right = ({ children }: RightProps) => {
+  const { bind, rightOpacity, rightWidth } = useContext(DragActionContext);
+  return (
+    <animated.div
+      {...bind()}
+      style={{ opacity: rightOpacity, width: rightWidth }}
+      className="absolute inset-y-0 right-0 flex items-center justify-center"
+    >
+      {children}
+    </animated.div>
+  );
+};
+DragAction.Right = Right;