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

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

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Toggle } from "./index";
-import type { ToggleProps } from "./types";
-import { useState } from "react";
-import { ToggleVariantEnum } from "./enums";
-
-const meta: Meta<ToggleProps> = {
-  title: "Components/Toggle",
-  component: Toggle,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    checked: {
-      control: "boolean",
-      description: "Whether the toggle is checked",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the toggle is disabled",
-    },
-    onChange: {
-      action: "changed",
-      description: "Callback fired when the toggle state changes",
-    },
-    variant: {
-      control: "select",
-      options: Object.values(ToggleVariantEnum),
-      description: "The variant of the toggle",
-      table: {
-        type: { summary: Object.values(ToggleVariantEnum).join(" | ") },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    checked: false,
-    disabled: false,
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-    disabled: false,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    checked: false,
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  args: {
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const Interactive: Story = {
-  args: {
-    checked: false,
-    disabled: false,
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(args.checked);
-
-    return (
-      <Toggle
-        {...args}
-        checked={checked}
-        onChange={(newChecked) => {
-          setChecked(newChecked);
-          args.onChange?.(newChecked);
-        }}
-      />
-    );
-  },
-};

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

@@ -1,218 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Typography } from "./index";
-import { ScrollView, View } from "react-native";
-import type { VariantProps } from "class-variance-authority";
-import { typographyVariants } from "./assets/class-variants";
-
-type TypographyVariant = NonNullable<
-  VariantProps<typeof typographyVariants>["variant"]
->;
-type TypographyWeight = NonNullable<
-  VariantProps<typeof typographyVariants>["weight"]
->;
-
-const variantOptions = [
-  "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",
-];
-
-const weightOptions = ["400", "500", "600", "700"];
-
-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: variantOptions,
-      description: "Typography variant from the design system",
-    },
-    weight: {
-      control: { type: "select" },
-      options: weightOptions,
-      description: "Font weight",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Content to display",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional NativeWind classes",
-    },
-  },
-  args: {
-    variant: "body_medium",
-    weight: "400",
-    children: "Sample text content",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Typography>;
-
-export const Default: Story = {
-  args: {
-    variant: "body_medium",
-    weight: "400",
-    children: "This is the default body text style",
-  },
-};
-
-export const Interactive: Story = {
-  args: {
-    variant: "body_medium",
-    weight: "500",
-    children:
-      "Change the variant and weight using the controls to see different styles",
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => {
-    const roles = {
-      display: ["display_large", "display_medium", "display_small"],
-      headline: ["headline_large", "headline_medium", "headline_small"],
-      title: ["title_large", "title_medium", "title_small"],
-      body: ["body_large", "body_medium", "body_small"],
-      label: ["label_large", "label_medium", "label_small"],
-    };
-
-    const commonWeights = ["400", "500", "600", "700"];
-
-    function renderVariantDescription(variant: string, weight: string) {
-      const [type, size] = variant.split("_");
-      const sizeDescription = size.charAt(0).toUpperCase() + size.slice(1);
-      const typeDescription = type.charAt(0).toUpperCase() + type.slice(1);
-
-      const weightDescriptions = {
-        "400": "Regular",
-        "500": "Medium",
-        "600": "Semi Bold",
-        "700": "Bold",
-      };
-
-      const weightDescription =
-        weightDescriptions[weight as keyof typeof weightDescriptions];
-
-      return `${typeDescription} ${sizeDescription} - ${weightDescription}`;
-    }
-
-    return (
-      <ScrollView>
-        <View style={{ padding: 16, gap: 24 }}>
-          {Object.entries(roles).map(([role, variants]) => (
-            <View key={role} style={{ gap: 16 }}>
-              <Typography
-                variant="title_medium"
-                weight="700"
-                style={{
-                  textTransform: "capitalize",
-                  borderBottomWidth: 1,
-                  borderBottomColor: "#e5e5e5",
-                  paddingBottom: 8,
-                }}
-              >
-                {role}
-              </Typography>
-              <View style={{ gap: 12 }}>
-                {variants.map((variant) => (
-                  <View key={variant} style={{ gap: 8 }}>
-                    <Typography
-                      variant="body_small"
-                      weight="600"
-                      style={{ color: "#666" }}
-                    >
-                      {variant.replace("_", " ").toUpperCase()}
-                    </Typography>
-                    <View style={{ gap: 6 }}>
-                      {commonWeights.map((weight) => (
-                        <View
-                          key={`${variant}_${weight}`}
-                          style={{
-                            flexDirection: "column",
-                            gap: 6,
-                            padding: 12,
-                            backgroundColor: "#f9f9f9",
-                            borderRadius: 8,
-                          }}
-                        >
-                          <Typography
-                            variant="body_small"
-                            weight="400"
-                            style={{
-                              fontFamily: "monospace",
-                              backgroundColor: "#e5e5e5",
-                              paddingHorizontal: 6,
-                              paddingVertical: 3,
-                              borderRadius: 4,
-                              fontSize: 10,
-                            }}
-                          >
-                            variant="{variant}" weight="{weight}"
-                          </Typography>
-                          <Typography
-                            variant={variant as TypographyVariant}
-                            weight={weight as TypographyWeight}
-                          >
-                            {renderVariantDescription(variant, weight)}
-                          </Typography>
-                        </View>
-                      ))}
-                    </View>
-                  </View>
-                ))}
-              </View>
-            </View>
-          ))}
-        </View>
-      </ScrollView>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of all typography variants organized by role (display, headline, title, body, label) and size (small, medium, large), with common font weights.",
-      },
-    },
-  },
-};
-
-export const WithCustomStyling: Story = {
-  args: {
-    variant: "headline_medium",
-    weight: "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,30 +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-Black": require("../../assets/fonts/Nunito-Black.ttf"),
-    "Nunito-BlackItalic": require("../../assets/fonts/Nunito-BlackItalic.ttf"),
-    "Nunito-Bold": require("../../assets/fonts/Nunito-Bold.ttf"),
-    "Nunito-BoldItalic": require("../../assets/fonts/Nunito-BoldItalic.ttf"),
-    "Nunito-ExtraBold": require("../../assets/fonts/Nunito-ExtraBold.ttf"),
-    "Nunito-ExtraBoldItalic": require("../../assets/fonts/Nunito-ExtraBoldItalic.ttf"),
-    "Nunito-ExtraLight": require("../../assets/fonts/Nunito-ExtraLight.ttf"),
-    "Nunito-ExtraLightItalic": require("../../assets/fonts/Nunito-ExtraLightItalic.ttf"),
-    "Nunito-Italic": require("../../assets/fonts/Nunito-Italic.ttf"),
-    "Nunito-Light": require("../../assets/fonts/Nunito-Light.ttf"),
-    "Nunito-LightItalic": require("../../assets/fonts/Nunito-LightItalic.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: {},
-};