@edu-tosel/design 1.0.73 → 1.0.75

package/card/design/TableCard.design.d.ts

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T, S>({ dataSet, dataField, option, }: TableCardProps<T, S>): import("react/jsx-runtime").JSX.Element;
+export default function TableCardDesign<T>({ dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/TableCard.design.js

@@ -21,7 +21,7 @@ export default function TableCardDesign({ dataSet, dataField, option, }) {
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, state: dataSet.state, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
+        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
                         position: "top-10",
                     }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/card/template/TableCard.d.ts

@@ -1,6 +1,6 @@
 import { TableCardProps } from "../../interface";
-declare function TableCard<T, S>(props: TableCardProps<T, S>): import("react/jsx-runtime").JSX.Element;
+declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
-    var Log: <T, S>(props: TableCardProps<T, S>) => import("react/jsx-runtime").JSX.Element;
+    var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default TableCard;

package/interface/Action.d.ts

@@ -1,5 +1,5 @@
 import { LabelWidget } from "./widget";
-import { OnClick, Size, State } from "./Property";
+import { OnClick, Size } from "./Property";
 import { DataField, DataFieldType } from "./Data";
 import { Color } from "./Color";
 export interface ActionEvent {
@@ -29,9 +29,9 @@ export interface DataFieldProps<T> {
         padding?: string;
     };
 }
-export interface RowProps<T, S> {
+export interface RowProps<T> {
     item: T;
-    state?: State<S[] | undefined>;
+    stateAction?: (item: T) => void;
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
     buttons?: LabelWidget[];
@@ -46,10 +46,10 @@ export interface RowProps<T, S> {
         className?: string;
     };
 }
-export interface RowElementProps<T, S> {
+export interface RowElementProps<T> {
     item: T;
     entry: [string, unknown];
-    state?: State<S[] | undefined>;
+    stateAction?: (item: T) => void;
     data?: DataFieldType;
 }
 export {};

package/interface/Card.d.ts

@@ -116,8 +116,8 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
     icon?: string;
     onClick: OnClick;
 }
-export interface TableCardProps<T, S> extends Omit<CardProps, "children"> {
-    dataSet: Flexify<DataSet<T, S>, "renderItem">;
+export interface TableCardProps<T> extends Omit<CardProps, "children"> {
+    dataSet: Flexify<DataSet<T>, "renderItem">;
     dataField?: DataField<T>;
     option?: CardOption & {
         className?: string;

package/interface/Data.d.ts

@@ -1,12 +1,11 @@
 import { Replace } from "./Action";
-import { OnClick, State, Titles } from "./Property";
+import { OnClick, Titles } from "./Property";
 export interface DataPackage<T> {
     dataField: DataField<T>;
     dataSet: Omit<DataSet<T>, "renderItem">;
 }
-export type DataSet<T = any, S = any> = {
+export type DataSet<T = any> = {
     items?: T[];
-    state?: State<S[] | undefined>;
     renderItem: (item: T, index?: number) => React.ReactNode;
     titles?: Titles;
     interaction?: React.ReactNode;

package/layout/design/Row.design/SelectRoll.d.ts

@@ -1,9 +1,8 @@
-import { DataSelectRoll, State } from "../../../interface";
-interface SelectRollProps<T, S> {
+import { DataSelectRoll } from "../../../interface";
+interface SelectRollProps<T> {
     item: T;
     entry: [string, unknown];
-    state: State<S[] | undefined>;
     data: DataSelectRoll;
 }
-export default function SelectRoll<T, S>({ item, entry, state, data, }: SelectRollProps<T, S>): import("react/jsx-runtime").JSX.Element;
+export default function SelectRoll<T>({ item, entry, data, }: SelectRollProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/design/Row.design/SelectRoll.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { cn } from "../../../util";
-export default function SelectRoll({ item, entry, state, data, }) {
+import { useActionStore } from "../../../store";
+export default function SelectRoll({ item, entry, data, }) {
+    const { updateItem } = useActionStore();
     const { options } = data ?? {};
     const [key, value] = entry;
-    const [rows, setRows] = state ?? [];
     const [isHover, setIsHover] = useState(false);
     const keys = options?.map((option) => option.key);
     const values = options?.map((option) => option.value);
@@ -31,25 +32,15 @@ export default function SelectRoll({ item, entry, state, data, }) {
         sizes: "w-[20px] h-full",
         styles: "duration-300 text-gray-dark",
     };
-    useEffect(() => {
-        setRows(rows?.map((row) => {
-            if (row === item) {
-                const temp = { ...row, [key]: keys[index] };
-                return temp;
-            }
-            console.log("not changed");
-            console.log("row", row);
-            console.log("item", item);
-            return row;
-        }));
-    }, [index, setIndex]);
     return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [values[index], _jsx("button", { onClick: () => {
                         if (index > 0) {
                             setIndex(index - 1);
+                            updateItem({ ...item, [key]: keys[index - 1] });
                         }
                     }, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: () => {
                         if (index < keys.length - 1) {
                             setIndex(index + 1);
+                            updateItem({ ...item, [key]: keys[index + 1] });
                         }
                     }, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
 }

package/layout/design/Row.design/index.d.ts

@@ -1,2 +1,2 @@
 import { RowProps } from "../../../interface";
-export default function RowDesign<T, S>({ item, state, dataField, option, onClick, buttons, dot, }: RowProps<T, S>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T>({ item, stateAction, dataField, option, onClick, buttons, dot, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/Row.design/index.js

@@ -5,9 +5,9 @@ import { cn } from "../../../util";
 import { Label } from "../../../widget";
 import { widthSizes } from "../../../asset/sizes";
 import SelectRoll from "./SelectRoll";
-export default function RowDesign({ item, state, dataField, option, onClick, buttons, dot, }) {
+export default function RowDesign({ item, stateAction, dataField, option, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = option ?? {};
-    const id = useId();
+    const rowId = useId();
     const container = {
         positions: "relative",
         displays: "flex items-center ",
@@ -28,18 +28,21 @@ export default function RowDesign({ item, state, dataField, option, onClick, but
         styles: "rounded-full",
     };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
-                Object.entries(dataField).map(([key, value]) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { state: state, entry: [key, value], item: item, data: dataField[key]?.data }) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                Object.entries(dataField).map(([key, value]) => {
+                    const id = useId();
+                    return (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { stateAction: stateAction, entry: [key, value], item: item, data: dataField[key]?.data }) }, id));
+                }), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         background: option?.background ?? "bg-crimson-dark",
                         text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
-                    } }, id + title))) })] }));
+                    } }, rowId + title))) })] }));
 }
 function RowElement(props) {
     const { item, data } = props;
     const [key, value] = props.entry;
-    if (isDataSelectRoll(data) && props.state) {
-        return (_jsx(SelectRoll, { item: item, state: props.state, entry: props.entry, data: data }));
+    if (isDataSelectRoll(data)) {
+        return _jsx(SelectRoll, { item: item, entry: props.entry, data: data });
     }
     if (isDataButton(data))
         return (_jsx(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: data.onClick, option: { ...data.option, width: "xs", height: "xs" } }));

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Row<T, S>({ item, dataField, onClick, buttons, dot }: RowProps<T, S>): import("react/jsx-runtime").JSX.Element;
+declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T, S>({ item, dataField, state, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T, S>, "option"> & {
+    var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "option"> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T, S>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T, S>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -18,9 +18,9 @@ function Board({ item, dataField, onClick, buttons, dot, option, }) {
             text: "text-xl",
         } }, id));
 }
-function Card({ item, dataField, state, onClick, buttons, height, noPadding, noHover, dot, }) {
+function Card({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, state: state, dataField: dataField, buttons: buttons, dot: dot, option: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, stateAction: stateAction, dataField: dataField, buttons: buttons, dot: dot, option: {
             size: `w-full ${height ?? "h-15"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-5" : "",
             text: "text-base",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/store/index.d.ts

@@ -1,5 +1,5 @@
 import { Order, ActionEvent } from "../interface";
-interface ActionProps {
+interface ActionProps<T = any> {
     events: ActionEvent[];
     setView: (prop: string) => void;
     removeView: (prop: string) => void;
@@ -21,6 +21,9 @@ interface ActionProps {
     isDark: boolean;
     dark: () => void;
     setDark: () => void;
+    items: T[];
+    setItems: (prop: T[]) => void;
+    updateItem: (prop: T) => void;
 }
-export declare const useActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActionProps>>;
+export declare const useActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActionProps<any>>>;
 export {};

package/store/index.js

@@ -67,4 +67,9 @@ export const useActionStore = create((set) => ({
     isDark: false,
     dark: () => set(() => ({ isDark: true })),
     setDark: () => set((state) => ({ isDark: !state.isDark })),
+    items: [],
+    setItems: (prop) => set({ items: prop }),
+    updateItem: (item) => set((state) => ({
+        items: state.items.map((prevItem) => prevItem.id === item.id ? item : prevItem),
+    })),
 }));

package/version.txt

@@ -1 +1 @@
-1.0.73
+1.0.75