@edu-tosel/design 1.0.14 → 1.0.16

package/html/widget/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { HTMLToggleElement } from "../../interface";
+export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Toggle.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const widthSize = {
+    xs: "w-32",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }) {
+    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: isDisabled, type: "checkbox", className: "bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+}

package/index.d.ts

@@ -1,11 +1,9 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";
-export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
 export * from "./overlay";

package/index.js

@@ -1,11 +1,9 @@
 import "./globals.css";
 export * from "./board";
 export * from "./card";
-export * from "./deck";
 export * from "./layout";
 export * from "./html";
 export * from "./interaction";
-export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
 export * from "./overlay";

package/interface/Board.d.ts

@@ -1,5 +1,5 @@
-import React, { Dispatch, SetStateAction } from "react";
-import { DataField, Size } from "./Property";
+import React from "react";
+import { DataField, Size, State, Titles } from "./Property";
 import { EventsProps } from "./Widget";
 interface OptionsProps {
     classNames?: string;
@@ -16,16 +16,18 @@ export interface BoardProps {
     debug?: string;
 }
 export interface BoardHeaderProps {
-    title?: string;
+    titles?: Titles & {
+        icon?: string;
+    };
     tags?: {
         selects?: {
             title: string;
-            onChange: Dispatch<SetStateAction<string>>;
+            state: State<string>;
             options: [string | number, string][];
             width?: Size;
         }[];
         inputs?: {
-            onChange: Dispatch<string>;
+            state: State<string>;
             placeholder?: string;
             title?: string;
             width?: Size;
@@ -41,14 +43,13 @@ export interface BoardHeaderProps {
 export interface ManageBoardProps<T> extends BoardProps {
     data: {
         dataSets: {
-            title?: string;
-            subtitle?: string;
             items: T[] | undefined;
             renderItem: (item: T) => React.ReactNode;
+            titles?: Titles;
             interaction?: React.ReactNode;
         }[];
         dataField?: {
-            [p in keyof T]: DataField;
+            [p in keyof T]?: Partial<DataField>;
         };
         gap?: number;
     };

package/interface/Card.d.ts

@@ -60,7 +60,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
     dataSets: T[];
     dataField: {
-        [p in keyof T]: DataField;
+        [p in keyof T]: Partial<DataField>;
     };
     options?: CardOptions;
 }
@@ -86,6 +86,15 @@ export interface InfoCardProps extends CardProps {
     } & CardOptions;
 }
 export interface AddCardProps extends Omit<CardProps, "children"> {
+    title?: string;
+    icon?: string;
     onClick: OnClick;
 }
+export interface RowCardProps<T> {
+    onClick?: OnClick;
+    dataSet: T;
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
+    };
+}
 export {};

package/interface/HTMLElement.d.ts

@@ -1,29 +1,31 @@
-import { Dispatch } from "react";
-import { OnClick, Size } from "./Property";
-export type HTMLElementType = "text" | "button" | "input" | "select";
+import { OnClick, Size, State } from "./Property";
+export declare const HTMLElementType: {
+    readonly TEXT: "text";
+    readonly BUTTON: "button";
+    readonly INPUT: "input";
+    readonly SELECT: "select";
+    readonly TOGGLE: "toggle";
+};
+export type HTMLElementType = (typeof HTMLElementType)[keyof typeof HTMLElementType];
 export interface HTMLElement {
     options?: {
         width?: Size;
     };
 }
-export interface HTMLElementSetting {
-    [key: string]: {
-        label: string;
-        type: HTMLElementType;
-        placeholder?: string;
-        options?: [string, string][];
-        onChnage?: Dispatch<string>;
-    };
-}
 export interface HTMLButtonElement extends HTMLElement {
     title: string;
     onClick: OnClick;
 }
 export interface HTMLSelectElement extends HTMLElement {
-    onChange: Dispatch<string>;
+    state: State<string>;
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
-    onChange: Dispatch<string>;
+    state: State<string>;
     placeholder?: string;
 }
+export interface HTMLToggleElement extends HTMLElement {
+    state: State<boolean>;
+    labels: [[true, string], [false, string]];
+    isDisabled?: boolean;
+}

package/interface/HTMLElement.js

@@ -1 +1,7 @@
-export {};
+export const HTMLElementType = {
+    TEXT: "text",
+    BUTTON: "button",
+    INPUT: "input",
+    SELECT: "select",
+    TOGGLE: "toggle",
+};

package/interface/Modal.d.ts

@@ -1,6 +1,7 @@
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
     isVisible?: boolean;
+    event?: string;
     children: React.ReactNode;
     classNames?: string;
     options?: {

package/interface/Overlay.d.ts

@@ -1,3 +1,20 @@
+import { HTMLElementType } from "./HTMLElement";
+import { State, Titles } from "./Property";
 export interface OverlayProps {
+    titles: Titles;
     isVisible?: boolean;
+    event?: string;
+    children?: React.ReactNode;
+}
+export interface InfoOverlayProps extends OverlayProps {
+}
+export interface ManageOverlayProps extends InfoOverlayProps {
+    elements?: {
+        title: string;
+        state: State<string> | State<boolean>;
+        type: HTMLElementType;
+        selectOptions?: [string | number, string][];
+        labels?: [string | boolean, string][];
+        isDisabled?: boolean;
+    }[];
 }

package/interface/Property.d.ts

@@ -9,7 +9,8 @@ import { Dispatch, SetStateAction } from "react";
  * const [state, setState] = useState<T>(initialState);
  * @typedef {Array<T, Dispatch<SetStateAction<T>>>} State
  */
-export type State<T> = [T, Dispatch<SetStateAction<T>>];
+export type StateAction<T> = Dispatch<SetStateAction<T>>;
+export type State<T> = [T, StateAction<T>];
 /**
  * Size type
  * @enum {string}
@@ -47,7 +48,8 @@ export type Titles = {
 };
 export type DataField = {
     title: string | number;
-    size?: string | number;
+    type: string;
+    size: string | number;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";
 export * from "./Widget";

package/interface/index.js

@@ -1,5 +1,6 @@
 export * from "./Card";
 export * from "./HTMLElement";
+export * from "./Overlay";
 export * from "./Property";
 export * from "./Shelf";
 export * from "./Widget";

package/layout/template/Shelf.js

@@ -3,13 +3,13 @@ import { cn } from "../../util";
 import ShelfDesign from "../widget/Shelf";
 function Shelf({ titles, debug, children }) {
     const container = {
-        displays: "inline-flex flex-col gap-8 w-full",
+        displays: "inline-flex flex-col gap-12 w-full",
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), debug: debug, children: children }));
 }
 function Wrap({ classNames, titles, children, debug, }) {
     const container = {
-        displays: "flex flex-row flex-wrap gap-x-4",
+        displays: "flex flex-row flex-wrap gap-x-7.5",
         classNames,
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
@@ -19,7 +19,7 @@ function Wrap({ classNames, titles, children, debug, }) {
 }
 function Row({ titles, children, debug }) {
     const container = {
-        displays: "flex flex-row gap-y-5",
+        displays: "flex flex-row gap-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",

package/layout/template/dashboard/index.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { NavigationContainer } from "../../../navigation";
 import { Header } from "./Header";
 import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
 function Layout({ subject, colors, navigations, children, }) {
-    const { isDark, setFlag } = useWidgetStore();
+    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
     const [title, image, imageUrl] = subject ?? ["", "", ""];
     const [bgColor, textColor] = colors ?? ["white", "black"];
+    useEffect(() => {
+        if (isOwn) {
+            return setIsOwn(false);
+        }
+        return clearView();
+    }, [flag]);
     const container = {
         sizes: "min-h-screen h-screen xl:h-auto",
         background: !isDark ? `bg-${bgColor}` : "bg-black/80",
@@ -16,8 +22,8 @@ function Layout({ subject, colors, navigations, children, }) {
     };
     const body = {
         sizes: "h-full ",
-        displays: "flex gap-12 xl:gap-8 ",
-        paddings: "pt-15 xl:pl-2 2xl:px-9 xl:pt-10",
+        displays: "flex gap-12 xl:gap-7.5 ",
+        paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
     };
     return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/layout/widget/Events.js

@@ -7,8 +7,14 @@ function Show({ widgets, children }) {
                 const isVisible = typeof flag === "boolean"
                     ? flag
                     : events?.some(({ event }) => event === flag);
+                const event = () => {
+                    if (typeof flag === "string") {
+                        return flag;
+                    }
+                };
                 if (React.isValidElement(Component)) {
                     const ComponentWithVisibility = React.cloneElement(Component, {
+                        event: event(),
                         isVisible,
                     });
                     return _jsx(Fragment, { children: ComponentWithVisibility }, index);

package/layout/widget/Shelf.js

@@ -4,10 +4,11 @@ import { cn, isDebug } from "../../util";
 export default function Shelf({ children, classNames, options, titles, debug, }) {
     const { titleSize, subtitleSize } = options ?? {};
     const container = {
+        displays: "flex flex-col gap-4",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const titleBox = {
-        container: "flex flex-col pb-2",
+        container: "flex flex-col text-gray-dim",
         title: {
             text: titleSize ?? "text-xl xl:text-3xl",
             font: "font-bold",
@@ -20,5 +21,5 @@ export default function Shelf({ children, classNames, options, titles, debug, })
         sizes: "w-full",
         classNames,
     };
-    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles.title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles?.title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
 }

package/modal/template/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../interface";
 import { ModalProps } from "../../interface/Modal";
-export default function Input<T>({ isVisible, title, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ isVisible, event, title, options, state, }: Omit<ModalProps, "children"> & {
     title?: string;
     state: State<T>;
 }): import("react/jsx-runtime").JSX.Element;

package/modal/template/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../widget/Modal.design";
-export default function Input({ isVisible, title, options, state, }) {
+export default function Input({ isVisible, event, title, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
 }

package/modal/widget/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ isVisible, children, options, debug, }: ModalProps): import("react").ReactPortal;
+export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal;

package/modal/widget/Modal.design.js

@@ -22,9 +22,9 @@ const heightSize = {
     "2xl": "w-2/3 min-w-76 max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ isVisible, children, options, debug, }) {
+export default function ModalDesign({ isVisible, event, children, options, debug, }) {
     const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
-    const { clearModal } = useWidgetStore();
+    const { setIsOwn, removeModal } = useWidgetStore();
     const background = {
         positions: "z-50 fixed top-0 left-0",
         displays: "flex items-center justify-center ",
@@ -60,5 +60,5 @@ export default function ModalDesign({ isVisible, children, options, debug, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && (_jsx("button", { className: cn(closeButton), onClick: clearModal, children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
+    return ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && event && (_jsx("button", { className: cn(closeButton), onClick: () => removeModal(event), children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body);
 }

package/navigation/Navigation.js

@@ -1,27 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { center, cn } from "../util";
+import { cn } from "../util";
 import { useWidgetStore } from "../store";
+import checkPathMatch from "../util/checkPathMatch";
 export const buttonClassNames = (href, nowPath, color) => {
     const { isDark } = useWidgetStore();
     const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
-    const classNames = [
-        center.row(6),
-        "font-bold w-full xl:w-50 h-11 xl:rounded-2xl flex justify-center xl:justify-start xl:pl-5",
-    ].join(" ");
-    const checkPathMatch = (href, nowPath) => {
-        const nowPathFormat = nowPath
-            .split("/")
-            .filter((segment) => !/^\d+$/.test(segment))
-            .join("/");
-        return href.split("/").pop() === nowPathFormat.split("/").pop();
+    const container = {
+        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
+        sizes: " w-full xl:w-51 h-11 ",
+        styles: "xl:rounded-2xl xl:pl-5 font-bold ",
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !isDark
             ? `bg-${bg} text-${selectedText}`
             : "bg-white text-black"
         : (!isDark ? "bg-white " : "bg-black ") +
-            `xl:bg-transparent text-${text} dark:text-white`;
-    return [classNames, toggle].join(" ");
+            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark text-${text} dark:text-white`;
+    return [cn(container), toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {
     const container = {

package/overlay/template/Info.d.ts

@@ -0,0 +1,2 @@
+import { InfoOverlayProps } from "../../interface/Overlay";
+export default function Info({ event, isVisible, }: Omit<InfoOverlayProps, "titles">): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Info.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import OverlayDesign from "../widget/Overlay.design";
+export default function Info({ event, isVisible, }) {
+    return (_jsx(OverlayDesign, { titles: { title: "유저 관리" }, event: event, isVisible: isVisible, children: _jsx("div", { children: "TEST" }) }));
+}

package/overlay/template/Manage.d.ts

@@ -0,0 +1,2 @@
+import { ManageOverlayProps } from "../../interface";
+export default function Manage({ titles, isVisible, event, elements, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Manage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Toggle } from "../..";
+import OverlayDesign from "../widget/Overlay.design";
+import { useId } from "react";
+export default function Manage({ titles, isVisible, event, elements, }) {
+    const id = useId();
+    return (_jsx(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: elements?.map(({ title, type, labels, state, isDisabled, selectOptions }) => {
+            if (type === "select")
+                return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
+            if (type === "toggle")
+                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, isDisabled: isDisabled }) }, id + title));
+            return null;
+        }) }));
+}
+function Frame({ title, children, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3.75", children: [_jsx("div", { className: "w-20 text-sm font-bold text-gray-dim", children: title }), children] }));
+}

package/overlay/template/index.d.ts

@@ -1,3 +1,7 @@
-import { OverlayProps } from "../../interface/Overlay";
-declare function Overlay(props: OverlayProps): import("react/jsx-runtime").JSX.Element;
+import Info from "./Info";
+import Manage from "./Manage";
+declare const Overlay: {
+    Info: typeof Info;
+    Manage: typeof Manage;
+};
 export default Overlay;

package/overlay/template/index.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import OverlayDesign from "./Overlay.design";
-function Overlay(props) {
-    return _jsx(OverlayDesign, { ...props });
-}
+import Info from "./Info";
+import Manage from "./Manage";
+const Overlay = {
+    Info,
+    Manage,
+};
 export default Overlay;

package/overlay/widget/Overlay.design.d.ts

@@ -0,0 +1,2 @@
+import { OverlayProps } from "../../interface";
+export default function OverlayDesign({ titles, children, event, isVisible, }: OverlayProps): JSX.Element;

package/overlay/widget/Overlay.design.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTransition, animated } from "react-spring";
+import { cn } from "../../util";
+import { useWidgetStore } from "../../store";
+export default function OverlayDesign({ titles, children, event, isVisible, }) {
+    const { removeView, setIsOwn } = useWidgetStore();
+    const { title } = titles;
+    const container = {
+        positions: "absolute top-0 right-0 z-30",
+        sizes: "h-full h",
+        styles: "box-shadow-sm bg-white",
+    };
+    const body = {
+        positions: "relative",
+        paddings: "pt-12 pl-12",
+        displays: "flex flex-col gap-3.5",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { width: "0%" },
+        enter: { width: "80%", maxWidth: "540px" },
+        leave: { width: "0%" },
+        config: { duration: 300 },
+    });
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { className: "absolute top-3 left-3 bg-black w-6 h-6", onClick: () => removeView(event) }))] })));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,7 +14,10 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.1",
     "react": "^18.2.0",
+    "react-datepicker": "^6.4.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-lottie-player": "^1.5.6",

package/store/index.d.ts

@@ -3,6 +3,7 @@ interface WidgetProps {
     events: WidgetEvent[];
     setView: (prop: string) => void;
     removeView: (prop: string) => void;
+    clearView: () => void;
     setModal: (prop: string) => void;
     removeModal: (prop: string) => void;
     clearModal: () => void;
@@ -13,6 +14,8 @@ interface WidgetProps {
     clearTempData: () => void;
     flag: boolean;
     setFlag: () => void;
+    isOwn: boolean;
+    setIsOwn: (prop: boolean) => void;
     isDark: boolean;
     setDark: () => void;
 }

package/store/index.js

@@ -1,14 +1,21 @@
 import { create } from "zustand";
 export const useWidgetStore = create((set) => ({
     events: [],
-    setView: (prop) => set((state) => ({
-        events: [...state.events, { event: prop, type: "view" }],
-    })),
+    setView: (prop) => set((state) => {
+        if (state.events.find(({ event }) => event === prop) !== undefined)
+            return state;
+        return {
+            events: [...state.events, { event: prop, type: "view" }],
+        };
+    }),
     removeView: (prop) => {
         set((state) => ({
             events: state.events.filter(({ event }) => event !== prop),
         }));
     },
+    clearView: () => set((state) => ({
+        events: state.events.filter(({ type }) => type !== "view"),
+    })),
     order: {},
     setOrder: (id, prop) => {
         set((state) => {
@@ -52,6 +59,8 @@ export const useWidgetStore = create((set) => ({
     clearTempData: () => set({ tempData: {} }),
     flag: false,
     setFlag: () => set((state) => ({ flag: !state.flag })),
+    isOwn: false,
+    setIsOwn: (prop) => set({ isOwn: prop }),
     isDark: false,
     setDark: () => set((state) => ({ isDark: !state.isDark })),
 }));