fix: better components
This commit is contained in:
parent
88d1121d1f
commit
0db2a24f92
|
@ -1,4 +1,4 @@
|
|||
import React, { type FC } from "react";
|
||||
import React, { useState, type FC } from "react";
|
||||
import { Button } from "../../ui/button";
|
||||
import {
|
||||
SwitchableComponent,
|
||||
|
@ -9,6 +9,7 @@ import * as ComponentList from "./components";
|
|||
import { LazyMotion, domAnimation } from "framer-motion";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import LumeLogoBg from "./LumeLogoBg";
|
||||
import { LumeIdentityContext } from "./LumeIdentityContext";
|
||||
|
||||
const LumeIdentity: FC = () => {
|
||||
const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
|
||||
|
@ -109,6 +110,7 @@ const LumeIdentity: FC = () => {
|
|||
export const LumeIdentityTrigger = Dialog.Trigger;
|
||||
LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
|
||||
export default function Wrapped({ children }: React.PropsWithChildren) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const DefaultTrigger = () => (
|
||||
<LumeIdentityTrigger asChild>
|
||||
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md">
|
||||
|
@ -118,25 +120,27 @@ export default function Wrapped({ children }: React.PropsWithChildren) {
|
|||
);
|
||||
const GivenTrigger = React.Children.toArray(children)
|
||||
.filter((c) => {
|
||||
if(typeof c === 'object'){
|
||||
if (typeof c === "object") {
|
||||
//@ts-expect-error -- I dont know what the type of this should be, i just know that this works
|
||||
return c.type?.displayName === "LumeIdentityTrigger"
|
||||
return c.type?.displayName === "LumeIdentityTrigger";
|
||||
}
|
||||
|
||||
return false
|
||||
return false;
|
||||
})
|
||||
.at(0);
|
||||
const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
|
||||
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Trigger />
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" />
|
||||
{/* @ditorodev: `left-[calc(50%-192px)] top-[calc(50vh-174px)]` these two are me being dumb and lazy, would be cool to fix with proper centering */}
|
||||
<Dialog.Content className="absolute left-[calc(50%-192px)] top-[calc(50vh-174px)] mx-auto my-auto w-96 max-w-full h-auto z-40 flex items-center justify-center">
|
||||
<SwitchableComponentProvider>
|
||||
<LumeIdentityContext.Provider value={{open, setOpen}}>
|
||||
<LumeIdentity />
|
||||
</LumeIdentityContext.Provider>
|
||||
</SwitchableComponentProvider>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
|
|
|
@ -4,9 +4,19 @@ import {
|
|||
// logoutComplete,
|
||||
} from "@lumeweb/libkernel/kernel";
|
||||
import { useLume } from "../LumeProvider";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
export const LumeIdentityContext = React.createContext<{open: boolean, setOpen: (open: boolean) => void} | undefined>(undefined);
|
||||
|
||||
export function useLumeIndentity() {
|
||||
const {isLoggedIn, setIsLoggedIn} = useLume();
|
||||
const ctx = useContext(LumeIdentityContext);
|
||||
|
||||
if(!ctx) {
|
||||
throw new Error("useLumeIdentity should be used inside LumeIdentityContext.Provider")
|
||||
}
|
||||
|
||||
const {setOpen} = ctx;
|
||||
|
||||
return {
|
||||
isSignedIn: isLoggedIn,
|
||||
|
@ -14,10 +24,12 @@ export function useLumeIndentity() {
|
|||
await login(key);
|
||||
// await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
|
||||
setIsLoggedIn(true);
|
||||
setOpen(false);
|
||||
},
|
||||
async signOut() {
|
||||
// await logoutComplete();
|
||||
setIsLoggedIn(false);
|
||||
setOpen(false);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import React from "react";
|
||||
import { StoryFn, Meta } from "@storybook/react";
|
||||
import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js";
|
||||
import LumeProvider from "../src/components/lume/LumeProvider.js";
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import React from "react";
|
||||
import { StoryFn, Meta } from "@storybook/react";
|
||||
import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js";
|
||||
import LumeProvider from "../src/components/lume/LumeProvider.js";
|
||||
|
||||
export default {
|
||||
title: "LumeIdentity",
|
||||
|
@ -7,7 +9,9 @@ export default {
|
|||
} as Meta<typeof LumeIdentity>;
|
||||
|
||||
const Template: StoryFn<typeof LumeIdentity> = (args) => (
|
||||
<LumeProvider>
|
||||
<LumeIdentity {...args} />
|
||||
</LumeProvider>
|
||||
);
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
|
|
Loading…
Reference in New Issue