fix: better components

This commit is contained in:
Juan Di Toro 2023-10-10 17:16:58 +02:00
parent 88d1121d1f
commit 0db2a24f92
4 changed files with 28 additions and 7 deletions

View File

@ -1,4 +1,4 @@
import React, { type FC } from "react"; import React, { useState, type FC } from "react";
import { Button } from "../../ui/button"; import { Button } from "../../ui/button";
import { import {
SwitchableComponent, SwitchableComponent,
@ -9,6 +9,7 @@ import * as ComponentList from "./components";
import { LazyMotion, domAnimation } from "framer-motion"; import { LazyMotion, domAnimation } from "framer-motion";
import * as Dialog from "@radix-ui/react-dialog"; import * as Dialog from "@radix-ui/react-dialog";
import LumeLogoBg from "./LumeLogoBg"; import LumeLogoBg from "./LumeLogoBg";
import { LumeIdentityContext } from "./LumeIdentityContext";
const LumeIdentity: FC = () => { const LumeIdentity: FC = () => {
const { visibleComponent, setVisibleComponent } = useSwitchableComponent( const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
@ -109,6 +110,7 @@ const LumeIdentity: FC = () => {
export const LumeIdentityTrigger = Dialog.Trigger; export const LumeIdentityTrigger = Dialog.Trigger;
LumeIdentityTrigger.displayName = "LumeIdentityTrigger"; LumeIdentityTrigger.displayName = "LumeIdentityTrigger";
export default function Wrapped({ children }: React.PropsWithChildren) { export default function Wrapped({ children }: React.PropsWithChildren) {
const [open, setOpen] = useState(false);
const DefaultTrigger = () => ( const DefaultTrigger = () => (
<LumeIdentityTrigger asChild> <LumeIdentityTrigger asChild>
<button className="bg-primary text-primary-foreground p-2 px-4 text-sm font-semibold font-mono rounded-md"> <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) const GivenTrigger = React.Children.toArray(children)
.filter((c) => { .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 //@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); .at(0);
const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger; const Trigger = GivenTrigger ? () => GivenTrigger : DefaultTrigger;
return ( return (
<Dialog.Root> <Dialog.Root open={open} onOpenChange={setOpen}>
<Trigger /> <Trigger />
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed z-40 inset-0 bg-black bg-opacity-50 backdrop-blur-sm" /> <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 */} {/* @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"> <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> <SwitchableComponentProvider>
<LumeIdentity /> <LumeIdentityContext.Provider value={{open, setOpen}}>
<LumeIdentity />
</LumeIdentityContext.Provider>
</SwitchableComponentProvider> </SwitchableComponentProvider>
</Dialog.Content> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>

View File

@ -4,9 +4,19 @@ import {
// logoutComplete, // logoutComplete,
} from "@lumeweb/libkernel/kernel"; } from "@lumeweb/libkernel/kernel";
import { useLume } from "../LumeProvider"; 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() { export function useLumeIndentity() {
const {isLoggedIn, setIsLoggedIn} = useLume(); const {isLoggedIn, setIsLoggedIn} = useLume();
const ctx = useContext(LumeIdentityContext);
if(!ctx) {
throw new Error("useLumeIdentity should be used inside LumeIdentityContext.Provider")
}
const {setOpen} = ctx;
return { return {
isSignedIn: isLoggedIn, isSignedIn: isLoggedIn,
@ -14,10 +24,12 @@ export function useLumeIndentity() {
await login(key); await login(key);
// await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') ` // await loginComplete(); # this function is buggy `auth.ts:42 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'promise') `
setIsLoggedIn(true); setIsLoggedIn(true);
setOpen(false);
}, },
async signOut() { async signOut() {
// await logoutComplete(); // await logoutComplete();
setIsLoggedIn(false); setIsLoggedIn(false);
setOpen(false);
}, },
}; };
} }

View File

@ -1,3 +1,4 @@
import React from "react";
import { StoryFn, Meta } from "@storybook/react"; import { StoryFn, Meta } from "@storybook/react";
import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js"; import LumeDashboard from "../src/components/lume/LumeDashboard/LumeDashboard.js";
import LumeProvider from "../src/components/lume/LumeProvider.js"; import LumeProvider from "../src/components/lume/LumeProvider.js";

View File

@ -1,5 +1,7 @@
import React from "react";
import { StoryFn, Meta } from "@storybook/react"; import { StoryFn, Meta } from "@storybook/react";
import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js"; import LumeIdentity from "../src/components/lume/LumeIdentity/LumeIdentity.js";
import LumeProvider from "../src/components/lume/LumeProvider.js";
export default { export default {
title: "LumeIdentity", title: "LumeIdentity",
@ -7,7 +9,9 @@ export default {
} as Meta<typeof LumeIdentity>; } as Meta<typeof LumeIdentity>;
const Template: StoryFn<typeof LumeIdentity> = (args) => ( const Template: StoryFn<typeof LumeIdentity> = (args) => (
<LumeIdentity {...args} /> <LumeProvider>
<LumeIdentity {...args} />
</LumeProvider>
); );
export const Primary = Template.bind({}); export const Primary = Template.bind({});