@kivid/native-components 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/components/Tooltip/assets/class-variant.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+import { TooltipVariantEnum } from "../enum";
+
+export const contentVariants = cva(
+  "bg-chia-200 rounded-500 p-400 px-3 py-2 border z-50",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "text-red-600 border-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-chia-400",
+      },
+    },
+  }
+);
+
+export const pointerVariants = cva(
+  "absolute -top-[9px] mx-4 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "border-b-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-b-chia-400",
+      },
+    },
+  }
+);

package/src/components/Tooltip/components/Content/index.tsx

@@ -0,0 +1,93 @@
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { ContentProps } from "./types";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+import { contentVariants, pointerVariants } from "../../assets/class-variant";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { Seal } from "../../../Seal";
+import Typography from "../../../Typography";
+import { SizeEnum } from "../../../../enums";
+
+export function Content(props: ContentProps) {
+  const {
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    isVisible,
+    translateX,
+    pointerOffset,
+    pointerClassName,
+    containerClassName,
+    onLayout,
+  } = props;
+
+  const pointerStyle = pointerVariants({ variant });
+  const contentStyle = contentVariants({ variant });
+  const mergedContainerClassName = merge(
+    "absolute top-full mt-[9px] z-50 self-center",
+    containerClassName
+  );
+
+  function renderContent() {
+    if (variant === TooltipVariantEnum.ERROR) {
+      return (
+        <View className="flex flex-row items-center gap-2">
+          <Seal variant={SealVariantEnum.ERROR} size={SizeEnum.SMALL} />
+          {typeof message === "string" ? (
+            <Typography
+              className="text-blackberry-500"
+              variant="body_small"
+              weight="600"
+            >
+              {message}
+            </Typography>
+          ) : (
+            message
+          )}
+        </View>
+      );
+    }
+
+    return typeof message === "string" ? (
+      <Typography className="text-chia-900" variant="body_small" weight="600">
+        {message}
+      </Typography>
+    ) : (
+      message
+    );
+  }
+
+  if (!isVisible) return null;
+
+  const mappedPointerPosition: Record<
+    TooltipPointerOffsetEnum,
+    "flex-start" | "flex-end" | "center"
+  > = {
+    [TooltipPointerOffsetEnum.LEFT]: "flex-start",
+    [TooltipPointerOffsetEnum.RIGHT]: "flex-end",
+    [TooltipPointerOffsetEnum.CENTER]: "center",
+  };
+
+  return (
+    <View
+      className={mergedContainerClassName}
+      style={{
+        transform: [{ translateX: translateX ?? 0 }],
+      }}
+      onLayout={onLayout}
+    >
+      <View className={merge(contentStyle, className)}>
+        {renderContent()}
+        <View
+          className={merge(pointerStyle, pointerClassName)}
+          style={{
+            alignSelf:
+              mappedPointerPosition[
+                pointerOffset ?? TooltipPointerOffsetEnum.CENTER
+              ],
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/Tooltip/components/Content/types.ts

@@ -0,0 +1,15 @@
+import { LayoutChangeEvent } from "react-native";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+
+export interface ContentProps {
+  message: string | React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  isVisible: boolean;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  translateX?: number;
+  pointerOffset?: TooltipPointerOffsetEnum;
+  onChangeVisibility?: (isVisible: boolean) => void;
+}

package/src/components/Tooltip/components/index.ts

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

package/src/components/Tooltip/enum/index.ts

@@ -0,0 +1,10 @@
+export enum TooltipVariantEnum {
+  ERROR = "error",
+  TRIGGER = "trigger",
+}
+
+export enum TooltipPointerOffsetEnum {
+  LEFT = "left",
+  CENTER = "center",
+  RIGHT = "right",
+}

package/src/components/Tooltip/hooks/index.ts

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

package/src/components/Tooltip/hooks/tooltip-position.ts

@@ -0,0 +1,85 @@
+import { useState, useCallback, useMemo } from "react";
+import { Dimensions, LayoutChangeEvent, LayoutRectangle } from "react-native";
+import { TooltipPointerOffsetEnum } from "../enum";
+
+interface TooltipPositionData {
+  triggerLayout: LayoutRectangle | null;
+  tooltipLayout: LayoutRectangle | null;
+  screenWidth: number;
+  adjustedPosition: {
+    translateX?: number;
+  };
+  pointerOffset?: TooltipPointerOffsetEnum;
+}
+
+export function useTooltipPosition(): {
+  positionData: TooltipPositionData;
+  onTriggerLayout: (event: LayoutChangeEvent) => void;
+  onTooltipLayout: (event: LayoutChangeEvent) => void;
+} {
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+  const [tooltipLayout, setTooltipLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+
+  const screenWidth = Dimensions.get("window").width;
+
+  const onTriggerLayout = useCallback((event: LayoutChangeEvent) => {
+    setTriggerLayout(event.nativeEvent.layout);
+  }, []);
+
+  const onTooltipLayout = useCallback((event: LayoutChangeEvent) => {
+    setTooltipLayout(event.nativeEvent.layout);
+  }, []);
+
+  const pointerOffset = useMemo(() => {
+    if (!triggerLayout || !tooltipLayout)
+      return TooltipPointerOffsetEnum.CENTER;
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return TooltipPointerOffsetEnum.LEFT;
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return TooltipPointerOffsetEnum.RIGHT;
+    }
+
+    return TooltipPointerOffsetEnum.CENTER;
+  }, [triggerLayout, tooltipLayout]);
+
+  const calculateAdjustedPosition = useCallback(() => {
+    if (!triggerLayout || !tooltipLayout) {
+      return { translateX: 0 };
+    }
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return { translateX: -tooltipLayout.x };
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return { translateX: tooltipLayout.x };
+    }
+
+    return { translateX: 0 };
+  }, [triggerLayout, tooltipLayout, screenWidth]);
+
+  return {
+    positionData: {
+      triggerLayout,
+      tooltipLayout,
+      screenWidth,
+      adjustedPosition: calculateAdjustedPosition(),
+      pointerOffset,
+    },
+    onTriggerLayout,
+    onTooltipLayout,
+  };
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,90 @@
+import { View, Pressable } from "react-native";
+import { Content } from "./components";
+import { useTooltipPosition } from "./hooks";
+import { TooltipProps } from "./types";
+
+import { TooltipVariantEnum } from "./enum";
+import { useState, useCallback, cloneElement, isValidElement, ReactElement } from "react";
+
+export function Tooltip(props: TooltipProps) {
+  const {
+    children,
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    containerClassName,
+    pointerClassName,
+    isOpenedByVariantError,
+    onChangeVisibility
+  } = props;
+  const { positionData, onTriggerLayout, onTooltipLayout } =
+    useTooltipPosition();
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleVisibilityChange = useCallback((visible: boolean) => {
+    setIsVisible(visible);
+    onChangeVisibility?.(visible);
+  }, [onChangeVisibility]);
+
+  const handleToggleVisibility = useCallback(() => {
+    const newVisibility = !isVisible;
+    handleVisibilityChange(newVisibility);
+  }, [isVisible, handleVisibilityChange]);
+
+  const renderTriggerContent = () => {
+    if (variant !== TooltipVariantEnum.TRIGGER) {
+      return children;
+    }
+
+    if (isValidElement(children)) {
+      const child = children as ReactElement;
+      const childProps = child.props as any;
+
+      const componentType = child.type as any;
+      const componentName = (typeof componentType === 'function'
+        ? componentType.displayName || componentType.name
+        : componentType) || '';
+      const isButton = componentName === 'Button' ||
+        componentName === 'Pressable' ||
+        componentName === 'TouchableOpacity';
+
+      if (isButton || (childProps && typeof childProps.onPress === 'function')) {
+        return cloneElement(child, {
+          ...childProps,
+          onPress: (...args: any[]) => {
+            if (typeof childProps.onPress === 'function') {
+              childProps.onPress(...args);
+              handleToggleVisibility();
+            }
+          }
+        })
+      }
+    }
+
+    return (
+      <Pressable onPress={handleToggleVisibility}>
+        {children}
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className="relative" onLayout={onTriggerLayout}>
+      {renderTriggerContent()}
+
+      <Content
+        message={message}
+        variant={variant}
+        isVisible={variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError}
+        onLayout={onTooltipLayout}
+        translateX={positionData.adjustedPosition.translateX}
+        pointerOffset={positionData.pointerOffset}
+        className={className}
+        containerClassName={containerClassName}
+        pointerClassName={pointerClassName}
+        onChangeVisibility={handleVisibilityChange}
+      />
+    </View>
+  );
+}

package/src/components/Tooltip/types.ts

@@ -0,0 +1,15 @@
+import { ViewStyle } from "react-native";
+import { TooltipVariantEnum } from "./enum";
+
+export interface TooltipProps {
+  children?: React.ReactNode;
+  message: React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  triggerButtonClassName?: string;
+  style?: ViewStyle;
+  onChangeVisibility?: (isVisible: boolean) => void;
+  isOpenedByVariantError?: boolean;
+}

package/src/components/Typography/assets/class-variants.ts

@@ -27,7 +27,7 @@ const getWeightVariants = () => {
   };
 };
 
-export const typographyVariants = cva("font-nunito-regular", {
+export const typographyVariants = cva("font-nunito-regular text-chia-900", {
   variants: {
     variant: {
       label_small: "text-[12px] leading-[16px]",

package/src/components/index.ts

@@ -2,6 +2,10 @@ export * from "./Avatar";
 export * from "./Button";
 export type * from "./Button/types";
 
+export * from "./ChatBubble";
+export type * from "./ChatBubble/types";
+export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
+
 export * from "./Chip";
 export * from "./Chip/types";
 export * from "./Chip/enums";
@@ -10,13 +14,13 @@ export * from "./InformationStatus";
 export type * from "./InformationStatus/types";
 export * from "./InformationStatus/enums";
 
-export * from "./InputCheckbox";
-export type * from "./InputCheckbox/types";
-export * from "./InputCheckbox/enums";
+export * from "./CheckboxInput";
+export type * from "./CheckboxInput/types";
+export * from "./CheckboxInput/enums";
 
-export * from "./InputOTP";
-export type * from "./InputOTP/types";
-export * from "./InputOTP/enums";
+export * from "./OtpInput";
+export type * from "./OtpInput/types";
+export * from "./OtpInput/enums";
 
 export * from "./HighlightedText";
 export type * from "./HighlightedText/types";
@@ -37,3 +41,30 @@ export * from "./Toggle/enums";
 
 export * from "./Typography";
 export type * from "./Typography/types";
+
+export * from "./Toast";
+export type * from "./Toast/types";
+export * from "./Toast/enums";
+
+export * from "./Tooltip";
+export type * from "./Tooltip/types";
+
+export * from "./ListButton";
+export type * from "./ListButton/types";
+export * from "./ListButton/enums";
+
+export * from "./TextInput";
+export type * from "./TextInput/types";
+export * from "./TextInput/enums";
+
+export * from "./SelectButton";
+export type * from "./SelectButton/types";
+export * from "./SelectButton/enums";
+
+export * from "./RadioInput";
+export type * from "./RadioInput/types";
+export * from "./RadioInput/enums";
+
+export * from "./IconButton";
+export type * from "./IconButton/types";
+export * from "./IconButton/enums";

package/src/{components/Avatar/enums/size.ts → enums/corners.ts}

@@ -1,5 +1,4 @@
-export enum AvatarSizeEnum {
-  XSMALL = "xsmall",
+export enum CornersEnum {
   SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",

package/src/enums/index.ts

@@ -0,0 +1,2 @@
+export * from "./size";
+export * from "./corners";

package/src/enums/size.ts

@@ -0,0 +1,10 @@
+export enum SizeEnum {
+  XXSMALL = "xxsmall",
+  XSMALL = "xsmall",
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+  XLARGE = "xlarge",
+  XXLARGE = "xxlarge",
+  XXXLARGE = "xxxlarge",
+}

package/src/iconography/Icons/index.tsx

@@ -5,7 +5,6 @@ import {
   Alert,
   FlatList,
   Pressable,
-  SafeAreaView,
   Text,
   TextInput,
   View,
@@ -36,7 +35,7 @@ export function Icons(props: IconsProps) {
   }
 
   return (
-    <SafeAreaView className="m-16">
+    <View className="m-16">
       <TextInput
         placeholder="Pesquisar ícones..."
         placeholderTextColor="#98A3A3"
@@ -90,6 +89,6 @@ export function Icons(props: IconsProps) {
           </View>
         )}
       />
-    </SafeAreaView>
+    </View>
   );
 }

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./enums";

package/src/storybook-utils/components/CodeBlock/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, Text, ScrollView } from "react-native";
+import { CodeBlockProps } from "./types";
+
+export function CodeBlock({
+  children,
+  title,
+  showLineNumbers = false,
+  maxHeight = 400,
+}: CodeBlockProps) {
+  const lines = children.trim().split("\n");
+
+  return (
+    <View className="border border-chia-400 rounded-400 overflow-hidden mb-4">
+      {title && (
+        <View className="bg-chia-200 px-4 py-2 border-b border-chia-400">
+          <Text className="text-chia-900 font-semibold text-sm">{title}</Text>
+        </View>
+      )}
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{ maxHeight }}
+      >
+        <View className="bg-chia-100 p-4 w-full">
+          {lines.map((line, index) => (
+            <View key={index} className="flex-row">
+              {showLineNumbers && (
+                <Text className="text-chia-600 font-mono text-xs mr-4 w-8 text-right">
+                  {index + 1}
+                  {"  "}
+                </Text>
+              )}
+              <Text className="text-chia-900 font-mono text-xs flex-1">
+                {line || " "}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+export default CodeBlock;

package/src/storybook-utils/components/CodeBlock/types.ts

@@ -0,0 +1,6 @@
+export interface CodeBlockProps {
+  children: string;
+  title?: string;
+  showLineNumbers?: boolean;
+  maxHeight?: number;
+}

package/src/storybook-utils/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Storybook Utilities - Documentation Components
+ *
+ * These components are NOT part of the design system.
+ * They are utility components specifically for Storybook documentation.
+ *
+ * DO NOT export these from the main components index.
+ * DO NOT create stories for these components.
+ */
+
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock/types";

package/src/storybook-utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Storybook Utilities
+ *
+ * These are utility components and helpers specifically for Storybook documentation.
+ * They are NOT part of the design system and should not be exported from the main package.
+ */
+
+export * from "./components";

package/src/styles/index.ts

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

package/src/styles/mixins/index.ts

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

package/src/styles/mixins/shadows/elevation-down-100.tsx

@@ -0,0 +1,2 @@
+export const elevationDown100 =
+  "1px 1px 2px 0 rgba(119, 128, 128, 0.02), 1px 1px 4px 0 rgba(119, 128, 128, 0.02), 2px 2px 6px 0 rgba(119, 128, 128, 0.02), 2px 2px 16px 0 rgba(119, 128, 128, 0.06)";

package/src/styles/mixins/shadows/elevation-down-200.tsx

@@ -0,0 +1,2 @@
+export const elevationDown200 =
+  "2px 2px 4px 0 rgba(119, 128, 128, 0.08), 4px 4px 6px 0 rgba(119, 128, 128, 0.06), 6px 6px 8px 0 rgba(119, 128, 128, 0.04), 8px 8px 24px 0 rgba(119, 128, 128, 0.08)";

package/src/styles/mixins/shadows/elevation-down-300.tsx

@@ -0,0 +1,2 @@
+export const elevation300 =
+  "4px 4px 4px 0 rgba(119, 128, 128, 0.08), 12px 12px 6px 0 rgba(119, 128, 128, 0.06), 18px 18px 16px 0 rgba(119, 128, 128, 0.04), 12px 12px 40px 0 rgba(119, 128, 128, 0.24)";

package/src/styles/mixins/shadows/elevation-up-100.tsx

@@ -0,0 +1,2 @@
+export const elevationUp100 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.02), 0 -4px 4px 0 rgba(119, 128, 128, 0.02), 0 -8px 16px 0 rgba(119, 128, 128, 0.02), 0 -8px 32px 0 rgba(119, 128, 128, 0.08)";

package/src/styles/mixins/shadows/elevation-up-200.tsx

@@ -0,0 +1,2 @@
+export const elevationUp200 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.04), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.06), 0 -12px 32px 0 rgba(119, 128, 128, 0.12)";

package/src/styles/mixins/shadows/elevation-up-300.tsx

@@ -0,0 +1,2 @@
+export const elevationUp300 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.06), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.12), 0 -16px 48px 0 rgba(119, 128, 128, 0.24)";

package/src/styles/mixins/shadows/index.ts

@@ -0,0 +1,6 @@
+export * from "./elevation-down-100";
+export * from "./elevation-down-200";
+export * from "./elevation-down-300";
+export * from "./elevation-up-100";
+export * from "./elevation-up-200";
+export * from "./elevation-up-300";

package/dist/README.md

@@ -1,57 +0,0 @@
-![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
-
-# getting started
-
-```sh
-npx create-expo-app --template expo-template-storybook AwesomeStorybook
-```
-
-or
-
-```sh
-yarn create expo-app --template expo-template-storybook AwesomeStorybook
-```
-
-# app
-
-```sh
-yarn start
-```
-
-# RN Storybook (ondevice)
-
-In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
-This works via env variables and expo constants.
-
-```sh
-# either
-yarn storybook
-
-# ios
-yarn storybook:ios
-
-# android
-yarn storybook:android
-```
-
-If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
-
-To update the stories one time
-
-```sh
-yarn storybook-generate
-```
-
-# Web
-
-Start react native web storybook:
-
-```
-yarn storybook:web
-```
-
-build react native web storybook:
-
-```sh
-yarn build-storybook
-```

package/dist/commonjs/components/Avatar/enums/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_size","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../../../src","sources":["components/Avatar/enums/index.ts"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/commonjs/components/Avatar/enums/size.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AvatarSizeEnum = void 0;
-let AvatarSizeEnum = exports.AvatarSizeEnum = /*#__PURE__*/function (AvatarSizeEnum) {
-  AvatarSizeEnum["XSMALL"] = "xsmall";
-  AvatarSizeEnum["SMALL"] = "small";
-  AvatarSizeEnum["MEDIUM"] = "medium";
-  AvatarSizeEnum["LARGE"] = "large";
-  AvatarSizeEnum["XLARGE"] = "xlarge";
-  return AvatarSizeEnum;
-}({});
-//# sourceMappingURL=size.js.map

package/dist/commonjs/components/Avatar/enums/size.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AvatarSizeEnum","exports"],"sourceRoot":"../../../../../src","sources":["components/Avatar/enums/size.ts"],"mappings":";;;;;;IAAYA,cAAc,GAAAC,OAAA,CAAAD,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}