From eb9a4b2b2e8df73e433964350535ce7737086f26 Mon Sep 17 00:00:00 2001 From: Ryan-Zayne Date: Sat, 4 Jan 2025 18:17:08 +0100 Subject: [PATCH] update --- .../components/common/For/getElementList.ts | 23 ------ .../src/components/common/For/index.ts | 2 - .../src/components/common/Show/index.ts | 1 - .../src/components/common/Slot/index.ts | 1 - .../src/components/common/Switch/index.ts | 1 - .../src/components/common/Teleport/index.ts | 1 - .../src/components/common/for/for.tsx | 51 ------------ .../components/common/for/getElementList.ts | 23 ------ .../src/components/common/for/index.ts | 2 - .../src/components/common/show/index.ts | 1 - .../src/components/common/show/show.tsx | 52 ------------ .../src/components/common/slot/index.ts | 1 - .../src/components/common/slot/slot.tsx | 80 ------------------- .../src/components/common/switch/index.ts | 1 - .../src/components/common/switch/switch.tsx | 47 ----------- .../src/components/common/teleport/index.ts | 1 - .../components/common/teleport/teleport.tsx | 49 ------------ 17 files changed, 337 deletions(-) delete mode 100644 packages/ui-react/src/components/common/For/getElementList.ts delete mode 100644 packages/ui-react/src/components/common/For/index.ts delete mode 100644 packages/ui-react/src/components/common/Show/index.ts delete mode 100644 packages/ui-react/src/components/common/Slot/index.ts delete mode 100644 packages/ui-react/src/components/common/Switch/index.ts delete mode 100644 packages/ui-react/src/components/common/Teleport/index.ts delete mode 100644 packages/ui-react/src/components/common/for/for.tsx delete mode 100644 packages/ui-react/src/components/common/for/getElementList.ts delete mode 100644 packages/ui-react/src/components/common/for/index.ts delete mode 100644 packages/ui-react/src/components/common/show/index.ts delete mode 100644 packages/ui-react/src/components/common/show/show.tsx delete mode 100644 packages/ui-react/src/components/common/slot/index.ts delete mode 100644 packages/ui-react/src/components/common/slot/slot.tsx delete mode 100644 packages/ui-react/src/components/common/switch/index.ts delete mode 100644 packages/ui-react/src/components/common/switch/switch.tsx delete mode 100644 packages/ui-react/src/components/common/teleport/index.ts delete mode 100644 packages/ui-react/src/components/common/teleport/teleport.tsx diff --git a/packages/ui-react/src/components/common/For/getElementList.ts b/packages/ui-react/src/components/common/For/getElementList.ts deleted file mode 100644 index 7a0e094..0000000 --- a/packages/ui-react/src/components/common/For/getElementList.ts +++ /dev/null @@ -1,23 +0,0 @@ -import * as For from "./for"; - -type GetElementListResult = TVariant extends "base" - ? [typeof For.Base] - : [typeof For.List]; - -const getElementList = ( - variant?: TVariant -): GetElementListResult => { - switch (variant) { - case "base": { - return [For.Base] as never; - } - case "withWrapper": { - return [For.List] as never; - } - default: { - return [For.List] as never; - } - } -}; - -export { getElementList }; diff --git a/packages/ui-react/src/components/common/For/index.ts b/packages/ui-react/src/components/common/For/index.ts deleted file mode 100644 index c1d0d78..0000000 --- a/packages/ui-react/src/components/common/For/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./for"; -export { getElementList } from "./getElementList"; diff --git a/packages/ui-react/src/components/common/Show/index.ts b/packages/ui-react/src/components/common/Show/index.ts deleted file mode 100644 index edcb5b1..0000000 --- a/packages/ui-react/src/components/common/Show/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./show"; diff --git a/packages/ui-react/src/components/common/Slot/index.ts b/packages/ui-react/src/components/common/Slot/index.ts deleted file mode 100644 index 0ef9662..0000000 --- a/packages/ui-react/src/components/common/Slot/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Slot, Slottable } from "./slot"; diff --git a/packages/ui-react/src/components/common/Switch/index.ts b/packages/ui-react/src/components/common/Switch/index.ts deleted file mode 100644 index 7c69fd9..0000000 --- a/packages/ui-react/src/components/common/Switch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./switch"; diff --git a/packages/ui-react/src/components/common/Teleport/index.ts b/packages/ui-react/src/components/common/Teleport/index.ts deleted file mode 100644 index 87e573e..0000000 --- a/packages/ui-react/src/components/common/Teleport/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Teleport } from "./teleport"; diff --git a/packages/ui-react/src/components/common/for/for.tsx b/packages/ui-react/src/components/common/for/for.tsx deleted file mode 100644 index 791280f..0000000 --- a/packages/ui-react/src/components/common/for/for.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from "react"; - -import type { DiscriminatedRenderProps, PolymorphicProps } from "@zayne-labs/toolkit-react/utils"; -import { isArray } from "@zayne-labs/toolkit-type-helpers"; - -// prettier-ignore -type RenderPropFn = ( - item: TArrayItem, - index: number, - array: TArrayItem[] -) => React.ReactNode; - -export type EachProp = { each: TArrayItem[] }; - -export type ForRenderProps = DiscriminatedRenderProps>; - -type ForProps = EachProp & ForRenderProps; - -export function ForBase(props: ForProps) { - const { children, each, render } = props; - - if (!isArray(each)) { - return each; - } - - const JSXElementList = each.map((...params: Parameters>) => { - if (typeof children === "function") { - return children(...params); - } - - return render(...params); - }); - - return JSXElementList; -} - -export function ForList( - props: PolymorphicProps & { className?: string }> -) { - const { as: ListContainer = "ul", children, className, each, ref, render, ...restOfListProps } = props; - - return ( - - )} /> - - ); -} - -export const Base = ForBase; - -export const List = ForList; diff --git a/packages/ui-react/src/components/common/for/getElementList.ts b/packages/ui-react/src/components/common/for/getElementList.ts deleted file mode 100644 index 7a0e094..0000000 --- a/packages/ui-react/src/components/common/for/getElementList.ts +++ /dev/null @@ -1,23 +0,0 @@ -import * as For from "./for"; - -type GetElementListResult = TVariant extends "base" - ? [typeof For.Base] - : [typeof For.List]; - -const getElementList = ( - variant?: TVariant -): GetElementListResult => { - switch (variant) { - case "base": { - return [For.Base] as never; - } - case "withWrapper": { - return [For.List] as never; - } - default: { - return [For.List] as never; - } - } -}; - -export { getElementList }; diff --git a/packages/ui-react/src/components/common/for/index.ts b/packages/ui-react/src/components/common/for/index.ts deleted file mode 100644 index c1d0d78..0000000 --- a/packages/ui-react/src/components/common/for/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./for"; -export { getElementList } from "./getElementList"; diff --git a/packages/ui-react/src/components/common/show/index.ts b/packages/ui-react/src/components/common/show/index.ts deleted file mode 100644 index edcb5b1..0000000 --- a/packages/ui-react/src/components/common/show/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./show"; diff --git a/packages/ui-react/src/components/common/show/show.tsx b/packages/ui-react/src/components/common/show/show.tsx deleted file mode 100644 index 2867379..0000000 --- a/packages/ui-react/src/components/common/show/show.tsx +++ /dev/null @@ -1,52 +0,0 @@ -"use client"; - -import * as React from "react"; - -import { getOtherChildren, getSlotElement } from "@zayne-labs/toolkit-react/utils"; -import { AssertionError } from "@zayne-labs/toolkit-type-helpers"; - -type ShowProps = { - children: React.ReactNode; - fallback?: React.ReactNode; - when: boolean; -}; - -export function ShowRoot({ children, fallback, when }: ShowProps) { - const fallBackSlot = getSlotElement(children, ShowFallback, { - errorMessage: "Only one or component is allowed", - throwOnMultipleSlotMatch: true, - }); - - const contentSlot = getSlotElement(children, ShowContent, { - errorMessage: "Only one component is allowed", - throwOnMultipleSlotMatch: true, - }); - - const otherChildren = getOtherChildren(children, [ShowFallback, ShowContent]); - - if (fallBackSlot && fallback) { - throw new AssertionError(` - The fallback prop and / cannot be used at the same time. - `); - } - - return when ? (contentSlot ?? otherChildren) : (fallBackSlot ?? fallback); -} - -export function ShowContent({ children }: Pick) { - return children; -} -ShowContent.slot = Symbol.for("content"); - -export function ShowFallback({ children }: Pick) { - return children; -} -ShowFallback.slot = Symbol.for("fallback"); - -export const Root = ShowRoot; - -export const Fallback = ShowFallback; - -export const Content = ShowContent; - -export const OtherWise = ShowFallback; diff --git a/packages/ui-react/src/components/common/slot/index.ts b/packages/ui-react/src/components/common/slot/index.ts deleted file mode 100644 index 0ef9662..0000000 --- a/packages/ui-react/src/components/common/slot/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Slot, Slottable } from "./slot"; diff --git a/packages/ui-react/src/components/common/slot/slot.tsx b/packages/ui-react/src/components/common/slot/slot.tsx deleted file mode 100644 index ab6527f..0000000 --- a/packages/ui-react/src/components/common/slot/slot.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from "react"; - -import { type InferProps, composeRefs, mergeProps } from "@zayne-labs/toolkit-react/utils"; -import { isArray } from "@zayne-labs/toolkit-type-helpers"; -import { Children, cloneElement, isValidElement } from "react"; - -type SlotProps = InferProps; - -/* ------------------------------------------------------------------------------------------------- - * Slottable - * ----------------------------------------------------------------------------------------------- */ - -export function Slottable({ children }: Pick) { - return children; -} - -const isSlottable = (child: React.ReactNode): child is React.ReactElement => { - return isValidElement(child) && child.type === Slottable; -}; - -/* ------------------------------------------------------------------------------------------------- - * Slot - * ----------------------------------------------------------------------------------------------- */ - -export function Slot(props: SlotProps) { - const { children, ...restOfSlotProps } = props; - - const childrenArray = isArray(children) ? children : [children]; - const slottable = childrenArray.find((element) => isSlottable(element)); - - if (slottable) { - // == The new element to render is the one passed as a child of `Slottable` - const newElement = (slottable.props as SlotProps).children; - - if (Children.count(newElement) > 1) { - return Children.only(null); - } - - const newElementChildren = childrenArray.map((child) => { - if (child === slottable) { - // == Because the new element will be the one rendered, we are only interested in grabbing its children (`newElement.props.children`) - return isValidElement(newElement) && newElement.props.children; - } - - return child; - }); - - return ( - - {isValidElement(newElement) && cloneElement(newElement, undefined, newElementChildren)} - - ); - } - - return {children}; -} - -type SlotCloneProps = { - children: React.ReactNode; - ref?: React.RefObject; -}; - -type UnknownProps = Record; - -function SlotClone(props: SlotCloneProps) { - const { children, ref: forwardedRef, ...restOfSlotProps } = props; - - if (!isValidElement(children)) { - return Children.count(children) > 1 ? Children.only(null) : null; - } - - const childRef = children.props.ref ?? (children as unknown as UnknownProps).ref; - - const clonedProps = { - ...mergeProps(restOfSlotProps, children.props), - ref: forwardedRef ? composeRefs([forwardedRef, childRef as React.Ref]) : childRef, - }; - - return cloneElement(children, clonedProps); -} diff --git a/packages/ui-react/src/components/common/switch/index.ts b/packages/ui-react/src/components/common/switch/index.ts deleted file mode 100644 index 7c69fd9..0000000 --- a/packages/ui-react/src/components/common/switch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./switch"; diff --git a/packages/ui-react/src/components/common/switch/switch.tsx b/packages/ui-react/src/components/common/switch/switch.tsx deleted file mode 100644 index a1d5bf4..0000000 --- a/packages/ui-react/src/components/common/switch/switch.tsx +++ /dev/null @@ -1,47 +0,0 @@ -"use client"; - -import * as React from "react"; - -import { getOtherChildren, getSlotElement } from "@zayne-labs/toolkit-react/utils"; - -type ValidSwitchComponentType = React.ReactElement; - -type SwitchProps = { - children: ValidSwitchComponentType | ValidSwitchComponentType[]; - condition?: TCondition; -}; - -type SwitchMatchProps = { - children: React.ReactNode; - when: TWhen; -}; - -export function SwitchRoot(props: SwitchProps) { - const { children, condition = true } = props; - - const defaultCase = getSlotElement(children, Default, { - errorMessage: "Only one component is allowed", - throwOnMultipleSlotMatch: true, - }); - - const childrenCasesArray = getOtherChildren(children, Default); - - const matchedCase = childrenCasesArray.find((child) => child.props.when === condition); - - return matchedCase ?? defaultCase; -} - -export function SwitchMatch({ children }: SwitchMatchProps) { - return children; -} - -export function SwitchDefault({ children }: Pick) { - return children; -} -SwitchDefault.slot = Symbol.for("default-case"); - -export const Root = SwitchRoot; - -export const Match = SwitchMatch; - -export const Default = SwitchDefault; diff --git a/packages/ui-react/src/components/common/teleport/index.ts b/packages/ui-react/src/components/common/teleport/index.ts deleted file mode 100644 index 87e573e..0000000 --- a/packages/ui-react/src/components/common/teleport/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Teleport } from "./teleport"; diff --git a/packages/ui-react/src/components/common/teleport/teleport.tsx b/packages/ui-react/src/components/common/teleport/teleport.tsx deleted file mode 100644 index b68658a..0000000 --- a/packages/ui-react/src/components/common/teleport/teleport.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from "react"; - -import { useEffectOnce, useMountEffect } from "@zayne-labs/toolkit-react"; -import { type AnyString, isString } from "@zayne-labs/toolkit-type-helpers"; -import { useState } from "react"; -import { createPortal } from "react-dom"; - -type ValidHtmlTags = keyof HTMLElementTagNameMap; - -type PortalProps = { - children: React.ReactNode; - insertPosition?: InsertPosition; - to?: AnyString | HTMLElement | ValidHtmlTags | null; -}; - -function Teleport(props: PortalProps) { - const { children, insertPosition, to } = props; - - const [reactPortal, setReactPortal] = useState(null); - - useEffectOnce(() => { - if (!to || !insertPosition) return; - - const destination = isString(to) ? document.querySelector(to) : to; - - const tempWrapper = document.createElement("div"); - tempWrapper.style.display = "contents"; - - destination?.insertAdjacentElement(insertPosition, tempWrapper); - - setReactPortal(createPortal(children, tempWrapper)); - - return () => { - tempWrapper.remove(); - }; - }); - - useMountEffect(() => { - if (!to || insertPosition) return; - - const destination = isString(to) ? document.querySelector(to) : to; - - destination && setReactPortal(createPortal(children, destination)); - }); - - return reactPortal; -} - -export { Teleport };