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

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

@@ -1,260 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Typography } from "./index";
-import type { TypographyVariant } from "@kivid/tailwind-preset";
-import { ScrollView, View } from "react-native";
-
-const allOptions: TypographyVariant[] = [
-  "text-display_large_700",
-  "text-display_large_500",
-  "text-display_large_300",
-  "text-display_medium_700",
-  "text-display_medium_500",
-  "text-display_medium_300",
-  "text-display_small_700",
-  "text-display_small_500",
-  "text-display_small_300",
-  "text-headline_large_700",
-  "text-headline_large_500",
-  "text-headline_large_300",
-  "text-headline_medium_700",
-  "text-headline_medium_500",
-  "text-headline_medium_300",
-  "text-headline_small_700",
-  "text-headline_small_500",
-  "text-headline_small_300",
-  "text-title_large_700",
-  "text-title_large_500",
-  "text-title_large_300",
-  "text-title_medium_700",
-  "text-title_medium_500",
-  "text-title_medium_300",
-  "text-title_small_700",
-  "text-title_small_500",
-  "text-title_small_300",
-  "text-body_large_700",
-  "text-body_large_500",
-  "text-body_large_300",
-  "text-body_medium_700",
-  "text-body_medium_500",
-  "text-body_medium_300",
-  "text-body_small_700",
-  "text-body_small_500",
-  "text-body_small_300",
-  "text-label_large_700",
-  "text-label_large_500",
-  "text-label_large_300",
-  "text-label_medium_700",
-  "text-label_medium_500",
-  "text-label_medium_300",
-  "text-label_small_700",
-  "text-label_small_500",
-  "text-label_small_300",
-];
-
-const meta: Meta<typeof Typography> = {
-  title: "Components/Typography",
-  component: Typography,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Universal typography component for React Native that provides access to all design system text styles with automatic font-family mapping.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: allOptions,
-      description: "Typography variant from the design system",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Content to display",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional NativeWind classes",
-    },
-  },
-  args: {
-    variant: "text-body_medium_300",
-    children: "Sample text content",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Typography>;
-
-export const Default: Story = {
-  args: {
-    variant: "text-body_medium_300",
-    children: "This is the default body text style",
-  },
-};
-
-export const Interactive: Story = {
-  args: {
-    variant: "text-body_medium_300",
-    children: "Change the variant using the controls to see different styles",
-  },
-};
-
-// Comprehensive showcase of all 45 typography variants
-export const AllVariants: Story = {
-  render: () => {
-    const roles: Record<string, TypographyVariant[]> = {
-      display: [
-        "text-display_large_700",
-        "text-display_large_500",
-        "text-display_large_300",
-        "text-display_medium_700",
-        "text-display_medium_500",
-        "text-display_medium_300",
-        "text-display_small_700",
-        "text-display_small_500",
-        "text-display_small_300",
-      ],
-      headline: [
-        "text-headline_large_700",
-        "text-headline_large_500",
-        "text-headline_large_300",
-        "text-headline_medium_700",
-        "text-headline_medium_500",
-        "text-headline_medium_300",
-        "text-headline_small_700",
-        "text-headline_small_500",
-        "text-headline_small_300",
-      ],
-      title: [
-        "text-title_large_700",
-        "text-title_large_500",
-        "text-title_large_300",
-        "text-title_medium_700",
-        "text-title_medium_500",
-        "text-title_medium_300",
-        "text-title_small_700",
-        "text-title_small_500",
-        "text-title_small_300",
-      ],
-      body: [
-        "text-body_large_700",
-        "text-body_large_500",
-        "text-body_large_300",
-        "text-body_medium_700",
-        "text-body_medium_500",
-        "text-body_medium_300",
-        "text-body_small_700",
-        "text-body_small_500",
-        "text-body_small_300",
-      ],
-      label: [
-        "text-label_large_700",
-        "text-label_large_500",
-        "text-label_large_300",
-        "text-label_medium_700",
-        "text-label_medium_500",
-        "text-label_medium_300",
-        "text-label_small_700",
-        "text-label_small_500",
-        "text-label_small_300",
-      ],
-    };
-
-    return (
-      <ScrollView>
-        <View style={{ padding: 4, gap: 24 }}>
-          {Object.entries(roles).map(([role, variants]) => (
-            <View key={role} style={{ gap: 12 }}>
-              <Typography
-                variant="text-title_medium_700"
-                style={{
-                  textTransform: "capitalize",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#e5e5e5",
-                  paddingBottom: 8,
-                }}
-              >
-                {role}
-              </Typography>
-              <View style={{ gap: 8 }}>
-                {variants.map((variant, index) => {
-                  const [, size, weight] = variant.split("_");
-                  return (
-                    <View key={index}>
-                      <View
-                        key={variant}
-                        style={{
-                          flexDirection: "column",
-                          alignItems: "flex-start",
-                          gap: 12,
-                          padding: 12,
-                          backgroundColor: "#f9f9f9",
-                          borderRadius: 8,
-                        }}
-                      >
-                        <Typography
-                          variant="text-label_small_300"
-                          style={{
-                            fontFamily: "monospace",
-                            backgroundColor: "#e5e5e5",
-                            paddingHorizontal: 8,
-                            paddingVertical: 4,
-                            borderRadius: 4,
-                            minWidth: 140,
-                          }}
-                        >
-                          {variant}
-                        </Typography>
-                        <Typography variant={variant as TypographyVariant}>
-                          {size.charAt(0).toUpperCase() + size.slice(1)}{" "}
-                          {weight === "300"
-                            ? "Regular"
-                            : weight === "500"
-                              ? "Medium"
-                              : "Bold"}
-                        </Typography>
-                      </View>
-                      <View
-                        style={{
-                          height: 2,
-                          backgroundColor: "#e5e5e5",
-                          width: "100%",
-                        }}
-                      />
-                    </View>
-                  );
-                })}
-              </View>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of all 45 typography variants organized by role (display, headline, title, body, label), size (small, medium, large), and weight (300, 500, 700).",
-      },
-    },
-  },
-};
-
-// Custom styling example
-export const WithCustomStyling: Story = {
-  args: {
-    variant: "text-headline_medium_500",
-    className: "text-blue-600",
-    children: "Custom styled headline with color override",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Shows how className prop can override or extend the base typography styles using NativeWind.",
-      },
-    },
-  },
-};

package/src/hooks/index.ts

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

package/src/hooks/use-fonts.ts

@@ -1,22 +0,0 @@
-import { useFonts as useExpoFonts } from "expo-font";
-
-/**
- * A hook to load the custom fonts for the design system.
- * This should be used in the root component of the application (e.g., App.tsx).
- *
- * @returns A boolean indicating if the fonts have been loaded, and an error object if one occurred.
- */
-export const useBrandFonts = () => {
-  const [fontsLoaded, fontError] = useExpoFonts({
-    "Nunito-Bold": require("../../assets/fonts/Nunito-Bold.ttf"),
-    "Nunito-BoldItalic": require("../../assets/fonts/Nunito-BoldItalic.ttf"),
-    "Nunito-Italic": require("../../assets/fonts/Nunito-Italic.ttf"),
-    "Nunito-Medium": require("../../assets/fonts/Nunito-Medium.ttf"),
-    "Nunito-MediumItalic": require("../../assets/fonts/Nunito-MediumItalic.ttf"),
-    "Nunito-Regular": require("../../assets/fonts/Nunito-Regular.ttf"),
-    "Nunito-SemiBold": require("../../assets/fonts/Nunito-SemiBold.ttf"),
-    "Nunito-SemiBoldItalic": require("../../assets/fonts/Nunito-SemiBoldItalic.ttf"),
-  });
-
-  return { fontsLoaded, fontError };
-};

package/src/iconography/Icons/index.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Icons } from ".";
-
-const meta = {
-  title: "Iconography/Icons",
-  component: Icons,
-  argTypes: {
-    size: {
-      control: { type: "number" },
-    },
-  },
-  args: {
-    size: 24,
-  },
-} satisfies Meta<typeof Icons>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AllIcons: Story = {
-  name: "Todos os Ícones",
-  args: {},
-};