@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/src/components/HighlightedText/index.stories.tsx

@@ -15,10 +15,33 @@ const meta = {
     highlightText: {
       control: "text",
     },
-    className: {
-      control: "text",
+    variant: {
+      control: "select",
+      options: [
+        "label_small",
+        "label_medium",
+        "label_large",
+        "body_small",
+        "body_medium",
+        "body_large",
+        "title_small",
+        "title_medium",
+        "title_large",
+        "headline_small",
+        "headline_medium",
+        "headline_large",
+        "display_small",
+        "display_medium",
+        "display_large",
+      ],
+      description: "Typography variant for the base text",
     },
-    highlightTextClassName: {
+    weight: {
+      control: "select",
+      options: ["400", "500", "600", "700"],
+      description: "Typography weight for the base text",
+    },
+    className: {
       control: "text",
     },
     reverse: {
@@ -26,6 +49,11 @@ const meta = {
       description:
         "If true, the highlighted text will be displayed before the regular text.",
     },
+    highlightedTextProps: {
+      control: "object",
+      description:
+        "Props for the highlighted text Typography component (className, variant, weight)",
+    },
   },
 } satisfies Meta<typeof HighlightedText>;
 
@@ -49,8 +77,12 @@ export const LabelVariant: Story = {
   args: {
     text: "Label text",
     highlightText: "important",
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
+    variant: "label_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "label_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -58,8 +90,12 @@ export const BodyVariant: Story = {
   args: {
     text: "Body text content",
     highlightText: "highlighted part",
-    className: "text-body_medium_300",
-    highlightTextClassName: "text-body_medium_700",
+    variant: "body_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -67,17 +103,25 @@ export const TitleVariant: Story = {
   args: {
     text: "Title text content",
     highlightText: "highlighted part",
-    className: "text-title_medium_300",
-    highlightTextClassName: "text-title_medium_700",
+    variant: "title_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "title_medium",
+      weight: "700",
+    },
   },
 };
 
-export const HeadlineVariant: Story = {
+export const HeadingVariant: Story = {
   args: {
-    text: "Headline text content",
+    text: "Heading text content",
     highlightText: "highlighted part",
-    className: "text-headline_medium_300",
-    highlightTextClassName: "text-headline_medium_700",
+    variant: "headline_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "headline_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -85,8 +129,12 @@ export const DisplayVariant: Story = {
   args: {
     text: "Display text content",
     highlightText: "highlighted part",
-    className: "text-display_medium_300",
-    highlightTextClassName: "text-display_medium_700",
+    variant: "display_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "display_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -94,8 +142,14 @@ export const WithCustomClasses: Story = {
   args: {
     text: "Styled text",
     highlightText: "with custom styling",
+    variant: "body_medium",
+    weight: "400",
     className: "text-tangerine-900",
-    highlightTextClassName: "text-mango-900 underline",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "600",
+      className: "text-mango-900 underline",
+    },
   },
 };
 
@@ -103,8 +157,53 @@ export const ReverseHighlight: Story = {
   args: {
     text: "text with reverse highlight",
     highlightText: "Highlighted first",
+    variant: "label_medium",
+    weight: "400",
     reverse: true,
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
+    highlightedTextProps: {
+      variant: "label_medium",
+      weight: "700",
+    },
+  },
+};
+
+export const WeightVariations: Story = {
+  args: {
+    text: "Different weight for",
+    highlightText: "highlighted text",
+    variant: "body_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "600",
+    },
+  },
+};
+
+export const MixedStyling: Story = {
+  args: {
+    text: "Typography props with",
+    highlightText: "custom classes",
+    variant: "body_medium",
+    weight: "400",
+    className: "text-blue-600",
+    highlightedTextProps: {
+      variant: "title_small",
+      weight: "700",
+      className: "text-red-500 underline",
+    },
+  },
+};
+
+export const BaseTextVariations: Story = {
+  args: {
+    text: "Large title base text with",
+    highlightText: "small label highlight",
+    variant: "title_large",
+    weight: "600",
+    highlightedTextProps: {
+      variant: "label_small",
+      weight: "700",
+    },
   },
 };

package/src/components/HighlightedText/index.tsx

@@ -1,38 +1,58 @@
 import type { HighlightedTextProps } from "./types";
-import { merge } from "@kivid/tailwind-preset";
-import { Text } from "react-native";
+import { Typography } from "../Typography";
 
 export function HighlightedText(props: HighlightedTextProps) {
   const {
     text,
     highlightText,
     className,
-    highlightTextClassName,
     reverse,
-    ref,
+    highlightedTextProps = {},
+    variant = "label_medium",
+    weight = "400",
     ...rest
   } = props;
 
-  const mergeClassName = merge("text-label_medium_300", className);
-  const mergeHighlightClassName = merge(
-    "text-label_medium_700",
-    highlightTextClassName
-  );
-
   if (reverse) {
     return (
-      <Text ref={ref} className={mergeClassName} {...rest}>
-        <Text className={mergeHighlightClassName}>{highlightText}</Text> {text}
-      </Text>
+      <Typography
+        variant={variant}
+        weight={weight}
+        className={className}
+        {...rest}
+      >
+        <Typography
+          variant={highlightedTextProps.variant}
+          weight={highlightedTextProps.weight}
+          {...highlightedTextProps}
+        >
+          {highlightText}
+        </Typography>{" "}
+        {text}
+      </Typography>
     );
   }
 
   return (
-    <Text ref={ref} className={mergeClassName} {...rest}>
-      {text} <Text className={mergeHighlightClassName}>{highlightText}</Text>
-    </Text>
+    <Typography
+      variant={variant}
+      weight={weight}
+      className={className}
+      {...rest}
+    >
+      {text}{" "}
+      <Typography
+        variant={highlightedTextProps.variant || "label_medium"}
+        weight={highlightedTextProps.weight || "700"}
+        {...highlightedTextProps}
+      >
+        {highlightText}
+      </Typography>
+    </Typography>
   );
 }
 
 HighlightedText.displayName = "HighlightedText";
 export default HighlightedText;
+
+export { HighlightedTextProps };

package/src/components/HighlightedText/types.ts

@@ -1,10 +1,16 @@
-import { Text, TextProps } from "react-native";
+import { TextProps } from "react-native";
+import type { TypographyProps } from "../Typography/types";
 
 export interface HighlightedTextProps extends TextProps {
   text: string;
   highlightText?: string;
-  highlightTextClassName?: string;
   className?: string;
-  ref?: React.RefObject<Text | null>;
   reverse?: boolean;
+  variant?: TypographyProps["variant"];
+  weight?: TypographyProps["weight"];
+  highlightedTextProps?: {
+    className?: string;
+    variant?: TypographyProps["variant"];
+    weight?: TypographyProps["weight"];
+  };
 }

package/src/components/InputOTP/components/InformationStatus/index.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import type { InformationStatusProps } from "./types";
 
 import { merge } from "@kivid/tailwind-preset";
-import Button from "../../../Button";
+import { Button } from "../../../Button";
 import { HighlightedText } from "../../../HighlightedText";
 import LoadingDots from "../../../LoadingDots";
 import { Chip } from "../../../Chip";

package/src/components/InputOTP/enums/index.ts

@@ -1 +1,7 @@
-export * from "./information-status";
+export enum InformationStatusEnum {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+  LOADING = "loading",
+  COOLDOWN = "cooldown",
+}

package/src/components/InputOTP/index.stories.tsx

@@ -3,6 +3,7 @@ import { InputOTP } from "./index";
 import { useState } from "react";
 import { Text, View } from "react-native";
 import { InformationStatusEnum } from "./enums";
+import { Typography } from "../Typography";
 
 const meta: Meta<typeof InputOTP> = {
   title: "Components/InputOTP",
@@ -106,12 +107,20 @@ export const WithCustomInformation: Story = {
       {...args}
       customInformation={
         <View>
-          <Text className="text-label_medium_700 text-blackberry-500">
+          <Typography
+            variant="label_medium"
+            weight="700"
+            className="text-blackberry-500"
+          >
             O código realmente é esse?
-          </Text>
-          <Text className="text-label_medium_700 text-chia-900">
+          </Typography>
+          <Typography
+            variant="label_medium"
+            weight="700"
+            className="text-chia-900"
+          >
             Tente novamente
-          </Text>
+          </Typography>
         </View>
       }
     />