akanjs 2.2.4-rc.5 → 2.2.4

package/ui/CsrImage.tsx

@@ -18,9 +18,20 @@ export const CsrImage = ({ src, file, className, abstractData, ...props }: CsrIm
   const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
   const defaultAbstractData =
     "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg==";
-  
+  //CSRImage로 파일 만들어서 불러서 변경
   const blurDataURL = abstractData ?? file?.abstractData ?? defaultAbstractData;
+  // const [loadedImage, setLoadedImage] = useState(false);
+  // const fetchImage = (src) => {
+  //   const loadingImage = getNewImage();
+  //   loadingImage.src = src;
+  //   loadingImage.onload = () => {
+  //     setLoadedImage(true);
+  //   };
+  // };
 
+  // useEffect(() => {
+  //   // fetchImage(url);
+  // }, []);
   const { priority, preload, quality, unoptimized, fill, ...csrProps } = props;
   return (
     <img
@@ -28,10 +39,10 @@ export const CsrImage = ({ src, file, className, abstractData, ...props }: CsrIm
       data-src={blurDataURL}
       width={width}
       height={height}
-      
+      // className={clsx("object-cover w-full", className)}
       className={className}
       alt="image"
-      
+      // placeholder="blur"
       {...csrProps}
     />
   );

package/ui/Data/ListContainer.tsx

@@ -28,7 +28,7 @@ import { Loading } from "../Loading";
 import { Model } from "../Model";
 import { Select } from "../Select";
 import DataCardList from "./CardList";
-
+// import QueryMaker from "./QueryMaker";
 import DataTableList from "./TableList";
 
 const downloadBlob = (blob: Blob, filename: string) => {

package/ui/Data/Pagination.tsx

@@ -42,7 +42,7 @@ export default function Pagination<T extends string>({ className, slice }: Pagin
     <div className={clsx("mt-4 flex flex-wrap justify-center", className)}>
       <Pagn
         currentPage={pageOfModel}
-        
+        // showQuickJumper={lastPageOfModel > 10}
         total={modelInsight.count}
         onPageSelect={(page) => {
           void storeDo[namesOfSlice.setPageOfModel](page);

package/ui/Data/QueryMaker.tsx

@@ -17,5 +17,344 @@ const byStatusQuerySetting: QuerySetting = { queryKey: "byStatuses", arg: { stat
 export default function QueryMaker({ className, slice, query }: QueryMakerProps) {
   const { sliceName } = slice;
   return null;
+  // const { l } = usePage();
+  // const storeDo = st.do as unknown as { [key: string]: (...args) => Promise<void> };
+  // const cnstInfo = constantInfo.getDatabase(sliceName);
+  // const isModelSearchable = hasTextField(cnstInfo.full);
+  // const { subMenu, filter } = st.use.searchParams();
+  // const filterRef = cnstInfo.filter;
+  // const filterQueryMap = getFilterQueryMap(filterRef);
+  // const defaultQuerySetting = { ...(isModelSearchable ? searchQuerySetting : byStatusQuerySetting), ...(query ?? {}) };
+  // const isInitialized = useRef(false);
+  // const [querySetting, setQuerySetting] = useState<QuerySetting>(defaultQuerySetting);
+  // const getQuery = useCallback(
+  //   (querySetting: QuerySetting) => {
+  //     if (querySetting.queryKey === "search") {
+  //       const query = querySetting.arg;
+  //       return query;
+  //     } else {
+  //       const queryFn = getFilterQuery(filterRef, querySetting.queryKey);
+  //       const filterQueryArgMetas = getFilterArgMetas(filterRef, querySetting.queryKey);
+  //       const queryArgs = filterQueryArgMetas.map((queryArgMeta) => querySetting.arg[queryArgMeta.name] as string);
+  //       const query = queryFn(...queryArgs);
+  //       return query;
+  //     }
+  //   },
+  //   [filter]
+  // );
+  // const setQueryOfModel = useDebounce((querySetting: QuerySetting) => {
+  //   const query = getQuery(querySetting);
+  //   if (!isInitialized.current) {
+  //     void storeDo[`init${capitalize(sliceName)}`](query);
+  //     isInitialized.current = true;
+  //   } else void storeDo[`setQueryArgsOf${capitalize(sliceName)}`](query);
+  // });
+  // useEffect(() => {
+  //   if (filter && subMenu === sliceName) setQuerySetting({ queryKey: filter, arg: {} });
+  // }, [filter, subMenu]);
+  // useEffect(() => {
+  //   setQueryOfModel(querySetting);
+  // }, [querySetting]);
+  // return (
+  //   <div className={clsx("flex w-full items-center gap-4", className)}>
+  //     <div className="flex flex-col gap-2">
+  //       Query
+  //       <Select<string>
+  //         value={querySetting.queryKey}
+  //         options={Object.keys(filterQueryMap).map((queryKey) => ({
+  //           label: l.field("summary", queryKey),
+  //           value: queryKey,
+  //         }))}
+  //         onChange={(queryKey: string) => {
+  //           const filterQueryArgMetas = getFilterArgMetas(filterRef, queryKey);
+  //           const defaultArg = Object.fromEntries(
+  //             filterQueryArgMetas.map((queryArgMeta) => [
+  //               queryArgMeta.name,
+  //               queryArgMeta.nullable
+  //                 ? null
+  //                 : queryArgMeta.arrDepth
+  //                   ? { oneOf: [] }
+  //                   : queryArgMeta.default
+  //                     ? typeof queryArgMeta.default === "function"
+  //                       ? queryArgMeta.default()
+  //                       : queryArgMeta.default
+  //                     : (scalarDefaultMap.get(queryArgMeta.modelRef) ?? null),
+  //             ])
+  //           );
+  //           setQuerySetting({ queryKey, arg: defaultArg });
+  //         }}
+  //       />
+  //     </div>
+  //     {querySetting.queryKey === "search" ? (
+  //       <div className="flex w-full flex-col gap-2">
+  //         Search
+  //         <label className="input flex w-full items-center gap-2">
+  //           <input
+  //             type="text"
+  //             className="grow"
+  //             placeholder="Type to search..."
+  //             value={(querySetting.arg.$search as string | undefined) ?? ""}
+  //             onChange={(e) => {
+  //               setQuerySetting({ ...querySetting, arg: e.target.value ? { $search: e.target.value } : {} });
+  //             }}
+  //           />
+  //           <BiSearch className="size-4 opacity-70" />
+  //         </label>
+  //       </div>
+  //     ) : (
+  //       getFilterArgMetas(filterRef, querySetting.queryKey).map((queryArgMeta, idx) => (
+  //         <div className="flex flex-col gap-2" key={idx}>
+  //           <div className="text-sm text-gray-500">{l.qarg(slice, querySetting.queryKey, queryArgMeta.name)}</div>
+  //           <QueryArg
+  //             queryArgMeta={queryArgMeta}
+  //             value={querySetting.arg[queryArgMeta.name] as string}
+  //             onChange={(value) => {
+  //               setQuerySetting({
+  //                 ...querySetting,
+  //                 arg: { ...querySetting.arg, [queryArgMeta.name]: value as string },
+  //               });
+  //             }}
+  //           />
+  //         </div>
+  //       ))
+  //     )}
+  //   </div>
+  // );
 }
 
+// interface QueryArgProps {
+//   queryArgMeta: FilterArgMeta;
+//   value: any;
+//   onChange: (value: any) => void;
+// }
+// function QueryArg({ queryArgMeta, value, onChange }: QueryArgProps) {
+//   const argType = getGqlTypeStr(queryArgMeta.modelRef) as GqlScalarName;
+//   if (queryArgMeta.enum && queryArgMeta.arrDepth && queryArgMeta.arrDepth < 2)
+//     return (
+//       <QueryArg.Enum
+//         options={queryArgMeta.enum.values}
+//         value={value as (string | number)[] | null}
+//         onChange={onChange}
+//         nullable={queryArgMeta.nullable}
+//         multiple={queryArgMeta.arrDepth ? queryArgMeta.arrDepth >= 1 : false}
+//       />
+//     );
+//   return argType === "ID" ? (
+//     <QueryArg.ID queryArgMeta={queryArgMeta} value={value as string} onChange={onChange} />
+//   ) : argType === "Int" ? (
+//     <QueryArg.Int value={value as number} onChange={onChange} />
+//   ) : argType === "Float" ? (
+//     <QueryArg.Float value={value as number} onChange={onChange} />
+//   ) : argType === "String" ? (
+//     <QueryArg.String value={value as string} onChange={onChange} />
+//   ) : argType === "Boolean" ? (
+//     <QueryArg.Boolean value={value as boolean} onChange={onChange} />
+//   ) : argType === "Date" ? (
+//     <QueryArg.Date value={value as Dayjs} onChange={onChange} />
+//   ) : argType === "JSON" ? (
+//     <QueryArg.Json value={value as string} onChange={onChange} />
+//   ) : (
+//     <></>
+//   );
+// }
+
+// interface ArgEnumProps {
+//   options: (string | number)[];
+//   value: (string | number)[] | string | number | null;
+//   onChange: (value: (string | number)[] | string | number | null) => void;
+//   nullable?: boolean;
+//   multiple?: boolean;
+// }
+// const ArgEnum = ({ options, value, onChange, nullable, multiple }: ArgEnumProps) => {
+//   return (
+//     <Select
+//       options={options.map((option) => ({
+//         label: option.toString(),
+//         value: option,
+//       }))}
+//       value={value ?? []}
+//       onChange={(val) => {
+//         onChange(val as (string | number)[] | string | number | null);
+//       }}
+//       multiple={multiple}
+//     />
+//   );
+// };
+// QueryArg.Enum = ArgEnum;
+
+// interface ArgIDProps {
+//   queryArgMeta: FilterArgMeta;
+//   value: string | null;
+//   onChange: (value: string | null) => void;
+// }
+// const ArgID = ({ queryArgMeta, value, onChange }: ArgIDProps) => {
+//   if (!queryArgMeta.ref)
+//     return (
+//       <Input
+//         inputClassName="w-full"
+//         value={value ?? ""}
+//         onChange={(value) => {
+//           onChange(value ? value : null);
+//         }}
+//         validate={(e) => true}
+//       />
+//     );
+//   else return <SelectIDWithRef queryArgMeta={queryArgMeta} value={value} onChange={onChange} />;
+// };
+// QueryArg.ID = ArgID;
+
+// interface SelectIDWithRefProps {
+//   queryArgMeta: FilterArgMeta;
+//   value: string | null;
+//   onChange: (value: string | null) => void;
+// }
+// const SelectIDWithRef = ({ queryArgMeta, value, onChange }: SelectIDWithRefProps) => {
+//   if (!queryArgMeta.ref) throw new Error("No ref in queryArgMeta");
+//   const [modalOpen, setModalOpen] = useState(false);
+//   const storeUse = st.use as { [key: string]: () => unknown };
+//   const modelList = storeUse[`${queryArgMeta.ref}List`]() as DataList<{ id: string }>;
+//   const renderOption = queryArgMeta.renderOption ?? ((value: { id: string }) => value.id);
+//   const selectedModel = value ? modelList.get(value) : null;
+//   return (
+//     <>
+//       <button
+//         className="btn"
+//         onClick={() => {
+//           setModalOpen(true);
+//         }}
+//       >
+//         {selectedModel ? renderOption(selectedModel) : `Select ${queryArgMeta.ref}`}
+//       </button>
+//       <Modal
+//         open={modalOpen}
+//         onCancel={() => {
+//           setModalOpen(false);
+//         }}
+//       >
+//         <div className="flex w-full flex-col gap-4 pb-[256px]">
+//           <QueryMaker sliceName={queryArgMeta.ref} />
+//           <Select<string | null>
+//             value={value}
+//             options={modelList.map((model) => ({
+//               label: renderOption(model),
+//               value: model.id,
+//             }))}
+//             onChange={(value) => {
+//               onChange(value);
+//             }}
+//           />
+//         </div>
+//       </Modal>
+//     </>
+//   );
+// };
+
+// interface ArgIntProps {
+//   value: number;
+//   onChange: (value: number) => void;
+// }
+// const ArgInt = ({ value, onChange }: ArgIntProps) => {
+//   return (
+//     <Input.Number
+//       inputClassName="w-full"
+//       value={value}
+//       onChange={(value) => {
+//         onChange(value ?? 0);
+//       }}
+//       validate={(e) => true}
+//     />
+//   );
+// };
+// QueryArg.Int = ArgInt;
+
+// interface ArgFloatProps {
+//   value: number;
+//   onChange: (value: number) => void;
+// }
+// const ArgFloat = ({ value, onChange }: ArgFloatProps) => {
+//   return (
+//     <Input.Number
+//       inputClassName="w-full"
+//       value={value}
+//       onChange={(value) => {
+//         onChange(value ?? 0);
+//       }}
+//       validate={(e) => true}
+//     />
+//   );
+// };
+// QueryArg.Float = ArgFloat;
+
+// interface ArgStringProps {
+//   value: string | null | undefined;
+//   onChange: (value: string | null) => void;
+// }
+// const ArgString = ({ value, onChange }: ArgStringProps) => {
+//   return (
+//     <Input
+//       inputClassName="w-full"
+//       value={value ?? ""}
+//       onChange={(value) => {
+//         onChange(value ? value : null);
+//       }}
+//       validate={(e) => true}
+//     />
+//   );
+// };
+// QueryArg.String = ArgString;
+
+// interface ArgBooleanProps {
+//   value: boolean;
+//   onChange: (value: boolean) => void;
+// }
+// const ArgBoolean = ({ value, onChange }: ArgBooleanProps) => {
+//   return (
+//     <Input.Checkbox
+//       className="w-full"
+//       checked={value}
+//       onChange={(value) => {
+//         onChange(value);
+//       }}
+//     />
+//   );
+// };
+// QueryArg.Boolean = ArgBoolean;
+
+// interface ArgDateProps {
+//   value: Dayjs;
+//   onChange: (value: Dayjs | null) => void;
+// }
+// const ArgDate = ({ value, onChange }: ArgDateProps) => {
+//   return (
+//     <DatePicker
+//       className="w-full"
+//       value={value}
+//       onChange={(value) => {
+//         onChange(value);
+//       }}
+//     />
+//   );
+// };
+// QueryArg.Date = ArgDate;
+
+// interface ArgJsonProps {
+//   value: string;
+//   onChange: (value: string) => void;
+// }
+// const ArgJson = ({ value, onChange }: ArgJsonProps) => {
+//   return (
+//     <Input.TextArea
+//       validate={(e) => true}
+//       className="w-full"
+//       inputClassName="w-full min-h-[300px]"
+//       value={value}
+//       onPressEnter={(value) => {
+//         onChange(value);
+//       }}
+//       onChange={(value) => {
+//         onChange(value);
+//       }}
+//     />
+//   );
+// };
+// QueryArg.Json = ArgJson;

package/ui/Data/index.ts

@@ -8,4 +8,5 @@ export const Data = {
   ListContainer,
   Pagination,
   TableList,
+  // QueryMaker,
 };

package/ui/DatePicker.tsx

@@ -60,7 +60,7 @@ export const DatePicker = ({
       selected={value ? value.toDate() : new Date()}
       disabledKeyboardNavigation
       onFocus={(e: FocusEvent<HTMLInputElement>) => {
-        
+        // 더블클릭 시 수동인풋 할 수 있게
         if (clickNum.current % 2 === 0) e.target.blur();
         clickNum.current++;
       }}
@@ -189,3 +189,97 @@ const TimePicker = ({
 
 DatePicker.TimePicker = TimePicker;
 
+// interface MonthPickerProps {
+//   className?: string;
+//   yearClassName?: string;
+//   monthClassName?: string;
+//   value: Dayjs | null;
+//   onChange: (value: Dayjs) => void;
+//   min?: Dayjs;
+//   max?: Dayjs;
+//   dateOfMonth?: "first" | "last";
+// }
+
+// const MonthPicker = ({
+//   className,
+//   yearClassName,
+//   monthClassName,
+//   value,
+//   onChange,
+//   min = dayjs()
+//     .subtract(1, "year")
+//     .set("month", 0)
+//     .set("date", 1)
+//     .set("hour", 0)
+//     .set("minute", 0)
+//     .set("second", 0)
+//     .set("millisecond", 0),
+//   max = dayjs()
+//     .add(1, "year")
+//     .set("month", 11)
+//     .set("date", 1)
+//     .set("hour", 0)
+//     .set("minute", 0)
+//     .set("second", 0)
+//     .set("millisecond", 0),
+//   dateOfMonth = "first",
+// }: MonthPickerProps) => {
+//   const [year, month] = [value?.year(), value?.month()];
+//   const availableYears = Array.from({ length: max.year() - min.year() + 1 }, (_, i) => min.year() + i);
+//   const availableMonths = Array.from({ length: 12 }, (_, i) => i)
+//     .filter((month) => (year === min.year() ? month >= min.month() : true))
+//     .filter((month) => (year === max.year() ? month <= max.month() : true));
+//   return (
+//     <div className={clsx("flex gap-2", className)}>
+//       <Select
+//         className={yearClassName}
+//         value={year}
+//         onChange={(year) => {
+//           if (month)
+//             onChange(
+//               dayjs(value)
+//                 .set("year", year)
+//                 .set("month", year === max.year() ? max.month() : month)
+//                 .set("date", 1)
+//                 .set("hour", 0)
+//                 .set("minute", 0)
+//                 .set("second", 0)
+//                 .set("millisecond", 0)
+//                 .add(dateOfMonth === "first" ? 0 : 1, "month")
+//                 .subtract(dateOfMonth === "first" ? 0 : -1, "millisecond")
+//             );
+//         }}
+//       >
+//         {availableYears.map((year, idx) => (
+//           <Select.Option key={idx} value={year}>
+//             {year}년
+//           </Select.Option>
+//         ))}
+//       </Select>
+//       <Select
+//         className={monthClassName}
+//         value={month}
+//         onChange={(month) => {
+//           onChange(
+//             dayjs(value)
+//               .set("month", month)
+//               .set("date", 1)
+//               .set("hour", 0)
+//               .set("minute", 0)
+//               .set("second", 0)
+//               .set("millisecond", 0)
+//               .add(dateOfMonth === "first" ? 0 : 1, "month")
+//               .subtract(dateOfMonth === "first" ? 0 : -1, "millisecond")
+//           );
+//         }}
+//       >
+//         {availableMonths.map((month, idx) => (
+//           <Select.Option key={idx} value={month}>
+//             {month + 1}월
+//           </Select.Option>
+//         ))}
+//       </Select>
+//     </div>
+//   );
+// };
+// DatePicker.MonthPicker = MonthPicker;

package/ui/Dialog/Modal.tsx

@@ -9,7 +9,7 @@ import { config, useSpring } from "react-spring";
 
 import { DialogContext } from "./context";
 
-const MODAL_MARGIN = 0; 
+const MODAL_MARGIN = 0; // px
 const OPACITY = { START: 0, END: 1 };
 let bodyScrollLockCount = 0;
 let previousBodyOverflow = "";

package/ui/DraggableList.tsx

@@ -43,14 +43,14 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
     shadow: number;
   }>(
     children.length,
-    
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     fn(
       order.current,
       new Array(children.length).fill(0) as number[],
       new Array(children.length).fill(0) as number[],
       children.length,
     ) as any,
-  ); 
+  ); // Create springs, each corresponds to an item, controlling its transform, scale, etc.
   const bind = useGesture({
     onDragStart: () => {
       order.current = children.map((_, index) => index);
@@ -76,7 +76,7 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
       const newClientHeights = (swap as (...args: any[]) => number[])([...clientLengths.current], originIdx, curRow);
       void api.start(
         fn(newOrder, clientLengths.current, newClientHeights, children.length, active, originIdx, movement),
-      ); 
+      ); // Feed springs new style data, they'll animate the view without causing a single render
       if (!active) {
         const draggedValue = (children[originIdx].props as { value: V }).value;
         void api.start(
@@ -113,7 +113,7 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
             boxShadow: shadow.to((s) => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
             scale,
             ...(mode === "vertical" ? { y: movement } : { x: movement }),
-            
+            // cursor: "grab",
           }}
         >
           <dragListContext.Provider
@@ -207,7 +207,7 @@ const fn =
           movement,
           scale: 1.01,
           zIndex: total + 1,
-          
+          // shadow: 15,
           immediate: (key: string) => key === "zIndex",
           config: (key: string) => (key === "y" ? config.stiff : config.default),
         }

package/ui/Field.tsx

@@ -197,6 +197,7 @@ const Text = ({
 };
 Field.Text = memo(Text);
 
+//! 삭제
 interface PriceProps {
   label?: string;
   desc?: string;
@@ -871,7 +872,7 @@ const Number = ({
         className={clsx("w-full", "")}
         inputClassName={clsx("w-full", inputClassName)}
         validate={(value) => {
-          
+          //수정여지
           if (min !== undefined && (value as number) < min) return l("base.numberTooSmallError", { min });
           else if (max !== undefined && (value as number) > max) return l("base.numberTooBigError", { max });
           else return validate?.(value as number) ?? true;
@@ -1528,7 +1529,7 @@ const ChildrenId = <T extends string, State, Input, Full extends { id: string },
         label={label}
         labelClassName={labelClassName}
         multiple
-        
+        // selectClassName={selectClassName}
         value={value}
         options={modelList.map((model) => {
           const label = renderOption(model);

package/ui/Image.tsx

@@ -3,6 +3,7 @@ import { clsx } from "akanjs/client";
 import type { ProtoFile } from "akanjs/constant";
 import type { ImgHTMLAttributes } from "react";
 import { preload as preloadResource } from "react-dom";
+// import NextImage, { ImageProps } from "next/image";
 
 import { CsrImage } from "./CsrImage";
 
@@ -111,11 +112,11 @@ export const Image = ({
 
   return (
     <img
-      
+      // <NextImage
       src={optimized.src}
       srcSet={optimized.srcSet}
       sizes={props.sizes}
-      
+      // fill={props.fill ?? (!width && !height)}
       width={width}
       height={height}
       className={clsx("object-cover", className)}