@brand-map/primitives 0.0.0-broken.0

package/src/popover/popover.tsx

@@ -0,0 +1,279 @@
+import * as React from "react";
+import { BackHandler, Pressable, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
+
+import { useAugmentedRef, useRelativePosition, type LayoutPosition } from "../hooks";
+import { Portal as RNPPortal } from "../portal";
+import * as Slot from "../slot";
+
+import type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+} from "./types";
+
+interface RootContextInterface {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<RootContextInterface | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
+  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+  const [open, setOpen] = React.useState(false);
+
+  function onOpenChange(value: boolean) {
+    setOpen(value);
+    onOpenChangeProp?.(value);
+  }
+
+  return (
+    <RootContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        contentLayout,
+        nativeID,
+        setContentLayout,
+        setTriggerPosition,
+        triggerPosition,
+      }}
+    >
+      <Component
+        ref={ref}
+        {...viewProps}
+      />
+    </RootContext.Provider>
+  );
+});
+
+Root.displayName = "RootNativePopover";
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("Popover compound components cannot be rendered outside the Popover component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange, open, setTriggerPosition } = useRootContext();
+
+  const augmentedRef = useAugmentedRef({
+    ref,
+    methods: {
+      open: () => {
+        onOpenChange(true);
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setTriggerPosition({ width, pageX, pageY: pageY, height });
+        });
+      },
+      close: () => {
+        setTriggerPosition(null);
+        onOpenChange(false);
+      },
+    },
+  });
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerPosition({ width, pageX, pageY: pageY, height });
+    });
+    onOpenChange(!open);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={augmentedRef}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativePopover";
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ keepMounted, hostName, children }: PortalProps) {
+  const value = useRootContext();
+
+  if (!value.triggerPosition) {
+    return null;
+  }
+
+  if (!keepMounted) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal
+      hostName={hostName}
+      name={`${value.nativeID}_portal`}
+    >
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+  const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setTriggerPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativePopover";
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
+ */
+const Content = React.forwardRef<ContentRef, ContentProps>(
+  (
+    {
+      render = false,
+      keepMounted,
+      align = "start",
+      side = "bottom",
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      onOpenAutoFocus: _onOpenAutoFocus,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, contentLayout, nativeID, setContentLayout, setTriggerPosition, triggerPosition } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side,
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!keepMounted) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    return (
+      <Component
+        ref={ref}
+        role="dialog"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  },
+);
+
+Content.displayName = "ContentNativePopover";
+
+const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    setTriggerPosition(null);
+    setContentLayout(null);
+    onOpenChange(false);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Close.displayName = "CloseNativePopover";
+
+export { Close, Content, Backdrop, Portal, Root, Trigger, useRootContext };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/src/popover/popover.web.tsx

@@ -0,0 +1,217 @@
+// import * as Popover from "@radix-ui/react-popover";
+// import * as React from "react";
+// import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+// import { useAugmentedRef, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+
+// import type {
+//   CloseProps,
+//   CloseRef,
+//   ContentProps,
+//   ContentRef,
+//   BackdropProps,
+//   BackdropRef,
+//   PortalProps,
+//   RootProps,
+//   RootRef,
+//   TriggerProps,
+//   TriggerRef,
+// } from "./types";
+
+// const RootContext = React.createContext<{
+//   open: boolean;
+//   onOpenChange: (open: boolean) => void;
+// } | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps & { onOpenChange?: (open: boolean) => void }>(
+//   ({ render, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//     const [open, setOpen] = React.useState(false);
+
+//     function onOpenChange(value: boolean) {
+//       setOpen(value);
+//       onOpenChangeProp?.(value);
+//     }
+//
+//     return (
+//       <RootContext.Provider value={{ open, onOpenChange }}>
+//         <Popover.Root
+//           open={open}
+//           onOpenChange={onOpenChange}
+//         >
+//           <Component
+//             ref={ref}
+//             {...viewProps}
+//           />
+//         </Popover.Root>
+//       </RootContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebPopover";
+
+// function useRootContext() {
+//   const context = React.useContext(RootContext);
+//   if (!context) {
+//     throw new Error("Popover compound components cannot be rendered outside the Popover component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+//   const { onOpenChange, open } = useRootContext();
+//   const augmentedRef = useAugmentedRef({
+//     ref,
+//     methods: {
+//       open() {
+//         onOpenChange(true);
+//       },
+//       close() {
+//         onOpenChange(false);
+//       },
+//     },
+//   });
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//       augRef.type = "button";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <Popover.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         onPress={onPress}
+//         role="button"
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Popover.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebPopover";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <Popover.Portal
+//       keepMounted={keepMounted}
+//       children={children}
+//       container={container}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebPopover";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align = "start",
+//       side = "bottom",
+//       sideOffset = 0,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       insets: _insets,
+//       disablePositioningStyle: _disablePositioningStyle,
+//       onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onInteractOutside,
+//       onPointerDownOutside,
+//       onOpenAutoFocus,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//
+//     return (
+//       <Popover.Content
+//         onCloseAutoFocus={onCloseAutoFocus}
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onInteractOutside={onInteractOutside}
+//         onPointerDownOutside={onPointerDownOutside}
+//         keepMounted={keepMounted}
+//         align={align}
+//         side={side}
+//         sideOffset={sideOffset}
+//         alignOffset={alignOffset}
+//         avoidCollisions={avoidCollisions}
+//         onOpenAutoFocus={onOpenAutoFocus}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Popover.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebPopover";
+
+// const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+//     }
+//   }, []);
+
+//
+//   return (
+//     <>
+//       <Popover.Close
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           onPress={onPress}
+//           role="button"
+//           disabled={disabled}
+//           {...props}
+//         />
+//       </Popover.Close>
+//     </>
+//   );
+// });
+
+// Close.displayName = "CloseWebPopover";
+
+// export { Close, Content, Backdrop, Portal, Root, Trigger, useRootContext };

package/src/popover/types.ts

@@ -0,0 +1,44 @@
+import type { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  onOpenChange?: (open: boolean) => void;
+};
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    closeOnPress?: boolean;
+  };
+
+type TriggerProps = RenderPressableProps;
+type ContentProps = RenderViewProps &
+  PositionedContentProps & {
+    /**
+     * @platform: WEB ONLY
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+  };
+type CloseProps = RenderPressableProps;
+
+type CloseRef = PressableRef;
+type ContentRef = ViewRef;
+type BackdropRef = PressableRef;
+type RootRef = ViewRef;
+type TriggerRef = PressableRef & {
+  open: () => void;
+  close: () => void;
+};
+
+export type { CloseProps, CloseRef, ContentProps, ContentRef, BackdropProps, BackdropRef, PortalProps, RootProps, RootRef, TriggerProps, TriggerRef };

package/src/portal/index.ts

@@ -0,0 +1 @@
+export * from "./portal";

package/src/portal/portal.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import { create } from "zustand"; // TODO: drop zustand and implement own store functionaly
+
+const DEFAULT_PORTAL_HOST_NAME = "__INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME";
+
+type PortalMap = Map<string, React.ReactNode>;
+
+const startingState = {
+  map: new Map<string, PortalMap>(),
+};
+
+startingState.map.set(DEFAULT_PORTAL_HOST_NAME, new Map<string, React.ReactNode>());
+
+const usePortal = create(() => startingState);
+
+const updatePortal = (hostName: string, name: string, children: React.ReactNode) => {
+  usePortal.setState((prev) => {
+    const next = new Map(prev.map);
+    const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+    portal.set(name, children);
+    next.set(hostName, portal);
+    return { map: next };
+  });
+};
+
+const removePortal = (hostName: string, name: string) => {
+  usePortal.setState((prev) => {
+    const next = new Map(prev.map);
+    const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+    portal.delete(name);
+    next.set(hostName, portal);
+    return { map: next };
+  });
+};
+
+export function PortalHost({ name = DEFAULT_PORTAL_HOST_NAME }: { name?: string }) {
+  const portalMap = usePortal((state) => state.map).get(name);
+  if (!portalMap || portalMap.size === 0) {
+    return null;
+  }
+  return <>{Array.from(portalMap.values())}</>;
+}
+
+export function Portal({ name, hostName = DEFAULT_PORTAL_HOST_NAME, children }: { name: string; hostName?: string; children: React.ReactNode }) {
+  useEffect(() => {
+    updatePortal(hostName, name, children);
+  }, [hostName, name, children]);
+
+  useEffect(() => {
+    return () => {
+      removePortal(hostName, name);
+    };
+  }, [hostName, name]);
+
+  return null;
+}

package/src/progress/index.ts

@@ -0,0 +1,2 @@
+export * from "./progress";
+export * from "./types";

package/src/progress/progress.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { View } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
+
+// This project uses code from WorkOS/Radix Primitives.
+// The code is licensed under the MIT License.
+// https://github.com/radix-ui/primitives/tree/main
+
+const DEFAULT_MAX = 100;
+
+const Root = React.forwardRef<RootRef, RootProps>(({ value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props }, ref) => {
+  const max = maxProp ?? DEFAULT_MAX;
+  const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
+
+  return (
+    <Component
+      role="progressbar"
+      ref={ref}
+      aria-valuemax={max}
+      aria-valuemin={0}
+      aria-valuenow={value}
+      aria-valuetext={getValueLabel(value, max)}
+      accessibilityValue={{
+        min: 0,
+        max,
+        now: value,
+        text: getValueLabel(value, max),
+      }}
+      {...props}
+    />
+  );
+});
+
+Root.displayName = "RootProgress";
+
+const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+Indicator.displayName = "IndicatorProgress";
+
+export { Indicator, Root };
+
+function defaultGetValueLabel(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+function isValidValueNumber(value: any, max: number): value is number {
+  return typeof value === "number" && !isNaN(value) && value <= max && value >= 0;
+}

package/src/progress/progress.web.tsx

@@ -0,0 +1,46 @@
+// import * as Progress from "@radix-ui/react-progress";
+// import * as React from "react";
+// import { View } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
+
+// const ProgressContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ value, max, getValueLabel, ...props }, ref) => {
+//
+//   return (
+//     <ProgressContext.Provider value={{ value, max }}>
+//       <Progress.Root
+//         value={value}
+//         max={max}
+//         getValueLabel={getValueLabel}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Progress.Root>
+//     </ProgressContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootProgress";
+
+// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Progress.Indicator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Progress.Indicator>
+//   );
+// });
+
+// Indicator.displayName = "IndicatorProgress";
+
+// export { Indicator, Root };