@brand-map/primitives 0.0.0-broken.0

package/src/tooltip/tooltip.web.tsx

@@ -0,0 +1,175 @@
+// import * as Tooltip from "@radix-ui/react-tooltip";
+// 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 { 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>(
+//   ({ render, delayDuration, skipDelayDuration, disableHoverableContent, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//     const [open, setOpen] = React.useState(false);
+
+//     function onOpenChange(value: boolean) {
+//       setOpen(value);
+//       onOpenChangeProp?.(value);
+//     }
+
+//
+//     return (
+//       <RootContext.Provider value={{ open, onOpenChange }}>
+//         <Tooltip.Provider
+//           delayDuration={delayDuration}
+//           skipDelayDuration={skipDelayDuration}
+//           disableHoverableContent={disableHoverableContent}
+//         >
+//           <Tooltip.Root
+//             open={open}
+//             onOpenChange={onOpenChange}
+//             delayDuration={delayDuration}
+//             disableHoverableContent={disableHoverableContent}
+//           >
+//             <Component
+//               ref={ref}
+//               {...viewProps}
+//             />
+//           </Tooltip.Root>
+//         </Tooltip.Provider>
+//       </RootContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebTooltip";
+
+// function useTooltipContext() {
+//   const context = React.useContext(RootContext);
+//   if (!context) {
+//     throw new Error("Tooltip compound components cannot be rendered outside the Tooltip component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+//   const { onOpenChange, open } = useTooltipContext();
+//   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 (
+//     <Tooltip.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         onPress={onPress}
+//         role="button"
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Tooltip.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebTooltip";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <Tooltip.Portal
+//       keepMounted={keepMounted}
+//       children={children}
+//       container={container}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebTooltip";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align = "center",
+//       side = "top",
+//       sideOffset = 0,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       insets: _insets,
+//       disablePositioningStyle: _disablePositioningStyle,
+//       onCloseAutoFocus: _onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onInteractOutside: _onInteractOutside,
+//       onPointerDownOutside,
+//       sticky,
+//       hideWhenDetached,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//
+//     return (
+//       <Tooltip.Content
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onPointerDownOutside={onPointerDownOutside}
+//         keepMounted={keepMounted}
+//         align={align}
+//         side={side}
+//         sideOffset={sideOffset}
+//         alignOffset={alignOffset}
+//         avoidCollisions={avoidCollisions}
+//         sticky={sticky}
+//         hideWhenDetached={hideWhenDetached}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Tooltip.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebTooltip";
+
+// export { Content, Backdrop, Portal, Root, Trigger };

package/src/tooltip/types.ts

@@ -0,0 +1,61 @@
+import type { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * @platform: WEB ONLY
+   * @default 700
+   */
+  delayDuration?: number;
+
+  /**
+   * @platform: WEB ONLY
+   * @default 300
+   */
+  skipDelayDuration?: number;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  disableHoverableContent?: boolean;
+};
+
+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 ContentProps = RenderViewProps &
+  Omit<PositionedContentProps, "side"> & {
+    /**
+     * `left` and `right` are only supported on web.
+     */
+    side?: "top" | "right" | "bottom" | "left";
+  };
+
+type TriggerProps = RenderPressableProps;
+
+type RootRef = ViewRef;
+type ContentRef = ViewRef;
+type BackdropRef = PressableRef;
+type TriggerRef = PressableRef & {
+  open: () => void;
+  close: () => void;
+};
+
+export type { ContentProps, ContentRef, BackdropProps, BackdropRef, PortalProps, RootProps, RootRef, TriggerProps, TriggerRef };

package/src/types/index.ts

@@ -0,0 +1,141 @@
+import type { Pressable, Text, View, ViewStyle } from "react-native";
+
+type ComponentPropsWithRender<T extends React.ElementType> = BrandMapUIComponentProps<T>;
+
+type ViewRef = React.ComponentRef<typeof View>;
+type PressableRef = React.ComponentRef<typeof Pressable>;
+type TextRef = React.ComponentRef<typeof Text>;
+
+type RenderViewProps<S = {}> = BrandMapUIComponentProps<typeof View, S>;
+type RenderPressableProps<S = {}> = BrandMapUIComponentProps<typeof Pressable, S> & {
+  /**
+   * @platform: WEB ONLY
+   */
+  onKeyDown?: (ev: React.KeyboardEvent) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onKeyUp?: (ev: React.KeyboardEvent) => void;
+};
+type RenderTextProps = BrandMapUIComponentProps<typeof Text>;
+
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
+type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
+
+/**
+ * Certain props are only available on the native version of the component.
+ * @docs For the web version, see the Radix documentation https://www.radix-ui.com/primitives
+ */
+interface PositionedContentProps {
+  keepMounted?: true | undefined;
+  style?: ViewStyle;
+  alignOffset?: number;
+  insets?: Insets;
+  avoidCollisions?: boolean;
+  align?: "start" | "center" | "end";
+  side?: "top" | "bottom";
+  sideOffset?: number;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  disablePositioningStyle?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  loop?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onCloseAutoFocus?: (event: Event) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onFocusOutside?: (event: FocusOutsideEvent) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  collisionBoundary?: Element | null | Array<Element | null>;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  sticky?: "partial" | "always";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  hideWhenDetached?: boolean;
+}
+
+interface KeepMountable {
+  keepMounted?: true | undefined;
+}
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+type BrandMapUIComponentProps<
+  ElementType extends React.ElementType,
+  State = {},
+  RenderFunctionProps = Omit<React.ComponentPropsWithRef<ElementType>, "className" | "color" | "defaultValue" | "defaultChecked">,
+> = Omit<React.ComponentPropsWithRef<ElementType>, "className" | "color" | "defaultValue" | "defaultChecked"> & {
+  /**
+   * Allows you to replace the component’s element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render?: (ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement) | undefined;
+};
+
+export type {
+  BrandMapUIComponentProps,
+  ComponentRenderFn,
+  ComponentPropsWithRender,
+  KeepMountable,
+  Insets,
+  PositionedContentProps,
+  PressableRef,
+  RenderPressableProps,
+  RenderTextProps,
+  RenderViewProps,
+  TextRef,
+  ViewRef,
+};

package/src/utils/index.ts

@@ -0,0 +1,69 @@
+import type { GestureResponderEvent } from "react-native";
+
+const ToggleGroupUtils = {
+  getIsSelected(value: string | string[] | undefined, itemValue: string) {
+    if (value === undefined) {
+      return false;
+    }
+
+    if (typeof value === "string") {
+      return value === itemValue;
+    }
+
+    return value.includes(itemValue);
+  },
+
+  getNewSingleValue(originalValue: string | string[] | undefined, itemValue: string) {
+    if (originalValue === itemValue) {
+      return undefined;
+    }
+
+    return itemValue;
+  },
+
+  getNewMultipleValue(originalValue: string | string[] | undefined, itemValue: string) {
+    if (originalValue === undefined) {
+      return [itemValue];
+    }
+
+    if (typeof originalValue === "string") {
+      return originalValue === itemValue ? [] : [originalValue, itemValue];
+    }
+
+    if (originalValue.includes(itemValue)) {
+      return originalValue.filter((v) => v !== itemValue);
+    }
+
+    return [...originalValue, itemValue];
+  },
+};
+
+const EmptyGestureResponderEvent: GestureResponderEvent = {
+  nativeEvent: {
+    changedTouches: [],
+    identifier: "0",
+    locationX: 0,
+    locationY: 0,
+    pageX: 0,
+    pageY: 0,
+    target: "0",
+    timestamp: 0,
+    touches: [],
+  },
+  bubbles: false,
+  cancelable: false,
+  currentTarget: {} as any,
+  defaultPrevented: false,
+  eventPhase: 0,
+  persist: () => {},
+  isDefaultPrevented: () => false,
+  isPropagationStopped: () => false,
+  isTrusted: false,
+  preventDefault: () => {},
+  stopPropagation: () => {},
+  target: {} as any,
+  timeStamp: 0,
+  type: "",
+};
+
+export { ToggleGroupUtils, EmptyGestureResponderEvent };

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2019",
+      "es2020.bigint",
+      "es2020.date",
+      "es2020.number",
+      "es2020.promise",
+      "es2020.string",
+      "es2020.symbol.wellknown",
+      "es2021.promise",
+      "es2021.string",
+      "es2021.weakref",
+      "es2022.array",
+      "es2022.object",
+      "es2022.string"
+    ]
+  },
+  "exclude": ["dist", "build", "node_modules"]
+}