mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-29 16:30:55 +00:00
refactor(column): use context for manage column
This commit is contained in:
parent
e1edba8a78
commit
be333260f2
@ -79,8 +79,7 @@
|
|||||||
"sonner": "^1.3.1",
|
"sonner": "^1.3.1",
|
||||||
"tippy.js": "^6.3.7",
|
"tippy.js": "^6.3.7",
|
||||||
"tiptap-markdown": "^0.8.8",
|
"tiptap-markdown": "^0.8.8",
|
||||||
"virtua": "^0.18.0",
|
"virtua": "^0.18.0"
|
||||||
"zustand": "^4.4.7"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@lume/tailwindcss": "workspace:^",
|
"@lume/tailwindcss": "workspace:^",
|
||||||
|
@ -1,62 +1,30 @@
|
|||||||
import { Thread } from "@columns/thread";
|
import { Thread } from "@columns/thread";
|
||||||
import { Timeline } from "@columns/timeline";
|
import { Timeline } from "@columns/timeline";
|
||||||
import { User } from "@columns/user";
|
import { User } from "@columns/user";
|
||||||
import { useStorage } from "@lume/ark";
|
import { useColumnContext } from "@lume/ark";
|
||||||
import { LoaderIcon } from "@lume/icons";
|
import { IColumn } from "@lume/types";
|
||||||
import { WidgetProps } from "@lume/types";
|
|
||||||
import { WIDGET_KIND } from "@lume/utils";
|
import { WIDGET_KIND } from "@lume/utils";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
import { VList, VListHandle } from "virtua";
|
import { VList, VListHandle } from "virtua";
|
||||||
|
|
||||||
export function HomeScreen() {
|
export function HomeScreen() {
|
||||||
const storage = useStorage();
|
|
||||||
const ref = useRef<VListHandle>(null);
|
const ref = useRef<VListHandle>(null);
|
||||||
|
const { columns } = useColumnContext();
|
||||||
const { isLoading, data } = useQuery({
|
|
||||||
queryKey: ["widgets"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const dbWidgets = await storage.getWidgets();
|
|
||||||
const defaultWidgets = [
|
|
||||||
{
|
|
||||||
id: "9999",
|
|
||||||
title: "Newsfeed",
|
|
||||||
content: "",
|
|
||||||
kind: WIDGET_KIND.newsfeed,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return [...defaultWidgets, ...dbWidgets];
|
|
||||||
},
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnReconnect: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
staleTime: Infinity,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||||
|
|
||||||
const renderItem = (widget: WidgetProps) => {
|
const renderItem = (column: IColumn) => {
|
||||||
switch (widget.kind) {
|
switch (column.kind) {
|
||||||
case WIDGET_KIND.newsfeed:
|
case WIDGET_KIND.newsfeed:
|
||||||
return <Timeline key={widget.id} />;
|
return <Timeline key={column.id} />;
|
||||||
case WIDGET_KIND.thread:
|
case WIDGET_KIND.thread:
|
||||||
return <Thread key={widget.id} thread={widget} />;
|
return <Thread key={column.id} thread={column} />;
|
||||||
case WIDGET_KIND.user:
|
case WIDGET_KIND.user:
|
||||||
return <User key={widget.id} user={widget} />;
|
return <User key={column.id} user={column} />;
|
||||||
default:
|
default:
|
||||||
return <Timeline key={widget.id} />;
|
return <Timeline key={column.id} />;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="h-full w-full">
|
||||||
<VList
|
<VList
|
||||||
@ -82,7 +50,7 @@ export function HomeScreen() {
|
|||||||
case "ArrowDown":
|
case "ArrowDown":
|
||||||
case "ArrowRight": {
|
case "ArrowRight": {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const nextIndex = Math.min(selectedIndex + 1, data.length - 1);
|
const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
|
||||||
setSelectedIndex(nextIndex);
|
setSelectedIndex(nextIndex);
|
||||||
ref.current.scrollToIndex(nextIndex, {
|
ref.current.scrollToIndex(nextIndex, {
|
||||||
align: "center",
|
align: "center",
|
||||||
@ -95,7 +63,7 @@ export function HomeScreen() {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{data.map((widget) => renderItem(widget))}
|
{columns.map((column) => renderItem(column))}
|
||||||
<div className="h-full w-[200px]" />
|
<div className="h-full w-[200px]" />
|
||||||
</VList>
|
</VList>
|
||||||
</div>
|
</div>
|
||||||
|
@ -9,7 +9,7 @@ import {
|
|||||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import { useWidget } from "../../hooks/useWidget";
|
import { useColumnContext } from "./provider";
|
||||||
|
|
||||||
export function ColumnHeader({
|
export function ColumnHeader({
|
||||||
id,
|
id,
|
||||||
@ -23,22 +23,22 @@ export function ColumnHeader({
|
|||||||
icon?: ReactNode;
|
icon?: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const { removeWidget } = useWidget();
|
const { removeColumn } = useColumnContext();
|
||||||
|
|
||||||
const refresh = async () => {
|
const refresh = async () => {
|
||||||
if (queryKey) await queryClient.refetchQueries({ queryKey });
|
if (queryKey) await queryClient.refetchQueries({ queryKey });
|
||||||
};
|
};
|
||||||
|
|
||||||
const moveLeft = async () => {
|
const moveLeft = async () => {
|
||||||
removeWidget.mutate(id);
|
removeColumn(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const moveRight = async () => {
|
const moveRight = async () => {
|
||||||
removeWidget.mutate(id);
|
removeColumn(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteWidget = async () => {
|
const deleteWidget = async () => {
|
||||||
removeWidget.mutate(id);
|
removeColumn(id);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -11,3 +11,5 @@ export const Column = {
|
|||||||
Content: ColumnContent,
|
Content: ColumnContent,
|
||||||
Route: Route,
|
Route: Route,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export * from "./provider";
|
||||||
|
81
packages/ark/src/components/column/provider.tsx
Normal file
81
packages/ark/src/components/column/provider.tsx
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { IColumn } from "@lume/types";
|
||||||
|
import { WIDGET_KIND } from "@lume/utils";
|
||||||
|
import { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||||
|
import {
|
||||||
|
ReactNode,
|
||||||
|
createContext,
|
||||||
|
useCallback,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import { useStorage } from "../../provider";
|
||||||
|
|
||||||
|
type ColumnContext = {
|
||||||
|
columns: IColumn[];
|
||||||
|
addColumn: (column: IColumn) => void;
|
||||||
|
removeColumn: (id: string) => void;
|
||||||
|
loadAllColumns: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ColumnContext = createContext<ColumnContext>(null);
|
||||||
|
|
||||||
|
export function ColumnProvider({ children }: { children: ReactNode }) {
|
||||||
|
const storage = useStorage();
|
||||||
|
const [columns, setColumns] = useState<IColumn[]>([
|
||||||
|
{
|
||||||
|
id: "9999",
|
||||||
|
title: "Newsfeed",
|
||||||
|
content: "",
|
||||||
|
kind: WIDGET_KIND.newsfeed,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const loadAllColumns = useCallback(async () => {
|
||||||
|
return await storage.getWidgets();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addColumn = useCallback(async (column: IColumn) => {
|
||||||
|
const result = await storage.createWidget(
|
||||||
|
column.kind,
|
||||||
|
column.title,
|
||||||
|
column.content,
|
||||||
|
);
|
||||||
|
if (result) setColumns((prev) => [...prev, column]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const removeColumn = useCallback(async (id: string) => {
|
||||||
|
await storage.removeWidget(id);
|
||||||
|
setColumns((prev) => prev.filter((t) => t.id !== id));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
|
||||||
|
loadAllColumns().then((data) => {
|
||||||
|
if (isMounted) setColumns((prev) => [...prev, ...data]);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ColumnContext.Provider
|
||||||
|
value={{ columns, addColumn, removeColumn, loadAllColumns }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ColumnContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useColumnContext() {
|
||||||
|
const context = useContext(ColumnContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error(
|
||||||
|
"Please import Column Provider to use useColumnContext() hook",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
@ -2,11 +2,11 @@ import { PinIcon } from "@lume/icons";
|
|||||||
import { WIDGET_KIND } from "@lume/utils";
|
import { WIDGET_KIND } from "@lume/utils";
|
||||||
import * as Tooltip from "@radix-ui/react-tooltip";
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
||||||
import { useNoteContext } from "..";
|
import { useNoteContext } from "..";
|
||||||
import { useWidget } from "../../../hooks/useWidget";
|
import { useColumnContext } from "../../column";
|
||||||
|
|
||||||
export function NotePin() {
|
export function NotePin() {
|
||||||
const event = useNoteContext();
|
const event = useNoteContext();
|
||||||
const { addWidget } = useWidget();
|
const { addColumn } = useColumnContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip.Provider>
|
<Tooltip.Provider>
|
||||||
@ -15,7 +15,7 @@ export function NotePin() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
addWidget.mutate({
|
addColumn({
|
||||||
kind: WIDGET_KIND.thread,
|
kind: WIDGET_KIND.thread,
|
||||||
title: "Thread",
|
title: "Thread",
|
||||||
content: event.id,
|
content: event.id,
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
import { WIDGET_KIND } from "@lume/utils";
|
import { WIDGET_KIND } from "@lume/utils";
|
||||||
import { useWidget } from "../../../hooks/useWidget";
|
import { useColumnContext } from "../../column";
|
||||||
|
|
||||||
export function Hashtag({ tag }: { tag: string }) {
|
export function Hashtag({ tag }: { tag: string }) {
|
||||||
const { addWidget } = useWidget();
|
const { addColumn } = useColumnContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
addWidget.mutate({
|
addColumn({
|
||||||
kind: WIDGET_KIND.hashtag,
|
kind: WIDGET_KIND.hashtag,
|
||||||
title: tag,
|
title: tag,
|
||||||
content: tag.replace("#", ""),
|
content: tag.replace("#", ""),
|
||||||
|
@ -3,13 +3,13 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|||||||
import { memo } from "react";
|
import { memo } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { useProfile } from "../../../hooks/useProfile";
|
import { useProfile } from "../../../hooks/useProfile";
|
||||||
import { useWidget } from "../../../hooks/useWidget";
|
import { useColumnContext } from "../../column";
|
||||||
|
|
||||||
export const MentionUser = memo(function MentionUser({
|
export const MentionUser = memo(function MentionUser({
|
||||||
pubkey,
|
pubkey,
|
||||||
}: { pubkey: string }) {
|
}: { pubkey: string }) {
|
||||||
const { user } = useProfile(pubkey);
|
const { user } = useProfile(pubkey);
|
||||||
const { addWidget } = useWidget();
|
const { addColumn } = useColumnContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
@ -29,7 +29,7 @@ export const MentionUser = memo(function MentionUser({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
addWidget.mutate({
|
addColumn({
|
||||||
kind: WIDGET_KIND.user,
|
kind: WIDGET_KIND.user,
|
||||||
title: user?.name || user?.displayName || "",
|
title: user?.name || user?.displayName || "",
|
||||||
content: pubkey,
|
content: pubkey,
|
||||||
|
@ -1,79 +0,0 @@
|
|||||||
import { type WidgetProps } from '@lume/types';
|
|
||||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
||||||
import { useStorage } from '../provider';
|
|
||||||
|
|
||||||
export function useWidget() {
|
|
||||||
const storage = useStorage();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const addWidget = useMutation({
|
|
||||||
mutationFn: async (widget: WidgetProps) => {
|
|
||||||
return await storage.createWidget(widget.kind, widget.title, widget.content);
|
|
||||||
},
|
|
||||||
onSuccess: (data) => {
|
|
||||||
queryClient.setQueryData(['widgets'], (old: WidgetProps[]) => [...old, data]);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const replaceWidget = useMutation({
|
|
||||||
mutationFn: async ({
|
|
||||||
currentId,
|
|
||||||
widget,
|
|
||||||
}: {
|
|
||||||
currentId: string;
|
|
||||||
widget: WidgetProps;
|
|
||||||
}) => {
|
|
||||||
// Cancel any outgoing refetches
|
|
||||||
await queryClient.cancelQueries({ queryKey: ['widgets'] });
|
|
||||||
|
|
||||||
// Snapshot the previous value
|
|
||||||
const prevWidgets = queryClient.getQueryData(['widgets']);
|
|
||||||
|
|
||||||
// create new widget
|
|
||||||
await storage.removeWidget(currentId);
|
|
||||||
const newWidget = await storage.createWidget(
|
|
||||||
widget.kind,
|
|
||||||
widget.title,
|
|
||||||
widget.content
|
|
||||||
);
|
|
||||||
|
|
||||||
// Optimistically update to the new value
|
|
||||||
queryClient.setQueryData(['widgets'], (prev: WidgetProps[]) => [
|
|
||||||
...prev.filter((t) => t.id !== currentId),
|
|
||||||
newWidget,
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Return a context object with the snapshotted value
|
|
||||||
return { prevWidgets };
|
|
||||||
},
|
|
||||||
onSettled: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['widgets'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const removeWidget = useMutation({
|
|
||||||
mutationFn: async (id: string) => {
|
|
||||||
// Cancel any outgoing refetches
|
|
||||||
await queryClient.cancelQueries({ queryKey: ['widgets'] });
|
|
||||||
|
|
||||||
// Snapshot the previous value
|
|
||||||
const prevWidgets = queryClient.getQueryData(['widgets']);
|
|
||||||
|
|
||||||
// Optimistically update to the new value
|
|
||||||
queryClient.setQueryData(['widgets'], (prev: WidgetProps[]) =>
|
|
||||||
prev.filter((t) => t.id !== id)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Update in database
|
|
||||||
await storage.removeWidget(id);
|
|
||||||
|
|
||||||
// Return a context object with the snapshotted value
|
|
||||||
return { prevWidgets };
|
|
||||||
},
|
|
||||||
onSettled: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['widgets'] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return { addWidget, replaceWidget, removeWidget };
|
|
||||||
}
|
|
@ -2,7 +2,6 @@ export * from "./ark";
|
|||||||
export * from "./provider";
|
export * from "./provider";
|
||||||
export * from "./components/column";
|
export * from "./components/column";
|
||||||
export * from "./components/note";
|
export * from "./components/note";
|
||||||
export * from "./hooks/useWidget";
|
|
||||||
export * from "./hooks/useRichContent";
|
export * from "./hooks/useRichContent";
|
||||||
export * from "./hooks/useEvent";
|
export * from "./hooks/useEvent";
|
||||||
export * from "./hooks/useProfile";
|
export * from "./hooks/useProfile";
|
||||||
|
7
packages/types/index.d.ts
vendored
7
packages/types/index.d.ts
vendored
@ -33,6 +33,13 @@ export interface WidgetGroupItem {
|
|||||||
icon?: string;
|
icon?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IColumn {
|
||||||
|
id?: string;
|
||||||
|
kind: number;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface WidgetProps {
|
export interface WidgetProps {
|
||||||
id?: string;
|
id?: string;
|
||||||
account_id?: number;
|
account_id?: number;
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
import { Outlet } from 'react-router-dom';
|
import { ColumnProvider } from "@lume/ark";
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
|
||||||
export function HomeLayout() {
|
export function HomeLayout() {
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
<ColumnProvider>
|
||||||
<Outlet />
|
<div className="h-full w-full rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
||||||
</div>
|
<Outlet />
|
||||||
);
|
</div>
|
||||||
|
</ColumnProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -236,9 +236,6 @@ importers:
|
|||||||
virtua:
|
virtua:
|
||||||
specifier: ^0.18.0
|
specifier: ^0.18.0
|
||||||
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
|
version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
|
||||||
zustand:
|
|
||||||
specifier: ^4.4.7
|
|
||||||
version: 4.4.7(@types/react@18.2.46)(react@18.2.0)
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@lume/tailwindcss':
|
'@lume/tailwindcss':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
@ -6152,14 +6149,6 @@ packages:
|
|||||||
tslib: 2.6.2
|
tslib: 2.6.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/use-sync-external-store@1.2.0(react@18.2.0):
|
|
||||||
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
|
||||||
dependencies:
|
|
||||||
react: 18.2.0
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/utf-8-validate@5.0.10:
|
/utf-8-validate@5.0.10:
|
||||||
resolution: {integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==}
|
resolution: {integrity: sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==}
|
||||||
engines: {node: '>=6.14.2'}
|
engines: {node: '>=6.14.2'}
|
||||||
@ -6391,23 +6380,3 @@ packages:
|
|||||||
resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
|
resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
|
||||||
engines: {node: '>= 14'}
|
engines: {node: '>= 14'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/zustand@4.4.7(@types/react@18.2.46)(react@18.2.0):
|
|
||||||
resolution: {integrity: sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==}
|
|
||||||
engines: {node: '>=12.7.0'}
|
|
||||||
peerDependencies:
|
|
||||||
'@types/react': '>=16.8'
|
|
||||||
immer: '>=9.0'
|
|
||||||
react: '>=16.8'
|
|
||||||
peerDependenciesMeta:
|
|
||||||
'@types/react':
|
|
||||||
optional: true
|
|
||||||
immer:
|
|
||||||
optional: true
|
|
||||||
react:
|
|
||||||
optional: true
|
|
||||||
dependencies:
|
|
||||||
'@types/react': 18.2.46
|
|
||||||
react: 18.2.0
|
|
||||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
|
||||||
dev: false
|
|
||||||
|
Loading…
Reference in New Issue
Block a user