@terreno/ui 0.1.0 → 0.2.0

package/src/signUp/__snapshots__/Swiper.test.tsx.snap

@@ -0,0 +1,249 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`Swiper renders correctly 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                "Welcome",
+              ],
+              "props": {
+                "numberOfLines": 0,
+                "style": {
+                  "color": "#1C1C1C",
+                  "fontFamily": "heading-bold",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                "testID": undefined,
+              },
+              "type": "Text",
+            },
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        "Get started with our app",
+                      ],
+                      "props": {
+                        "numberOfLines": 0,
+                        "selectable": undefined,
+                        "style": {
+                          "color": "#686868",
+                          "fontFamily": "text-regular",
+                          "fontSize": 14,
+                          "textAlign": "center",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "Text",
+                    },
+                  ],
+                  "props": {},
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "onPointerEnter": [Function: AsyncFunction],
+                "onPointerLeave": [Function: AsyncFunction],
+                "style": {
+                  "marginTop": 8,
+                },
+                "testID": undefined,
+              },
+              "type": "View",
+            },
+          ],
+          "props": {
+            "onPointerEnter": [Function: AsyncFunction],
+            "onPointerLeave": [Function: AsyncFunction],
+            "style": {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "padding": 16,
+              "width": "100%",
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                "Features",
+              ],
+              "props": {
+                "numberOfLines": 0,
+                "style": {
+                  "color": "#1C1C1C",
+                  "fontFamily": "heading-bold",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                "testID": undefined,
+              },
+              "type": "Text",
+            },
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        "Discover what we offer",
+                      ],
+                      "props": {
+                        "numberOfLines": 0,
+                        "selectable": undefined,
+                        "style": {
+                          "color": "#686868",
+                          "fontFamily": "text-regular",
+                          "fontSize": 14,
+                          "textAlign": "center",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "Text",
+                    },
+                  ],
+                  "props": {},
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "onPointerEnter": [Function: AsyncFunction],
+                "onPointerLeave": [Function: AsyncFunction],
+                "style": {
+                  "marginTop": 8,
+                },
+                "testID": undefined,
+              },
+              "type": "View",
+            },
+          ],
+          "props": {
+            "onPointerEnter": [Function: AsyncFunction],
+            "onPointerLeave": [Function: AsyncFunction],
+            "style": {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "padding": 16,
+              "width": "100%",
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                "Ready?",
+              ],
+              "props": {
+                "numberOfLines": 0,
+                "style": {
+                  "color": "#1C1C1C",
+                  "fontFamily": "heading-bold",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                "testID": undefined,
+              },
+              "type": "Text",
+            },
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        "Create your account",
+                      ],
+                      "props": {
+                        "numberOfLines": 0,
+                        "selectable": undefined,
+                        "style": {
+                          "color": "#686868",
+                          "fontFamily": "text-regular",
+                          "fontSize": 14,
+                          "textAlign": "center",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "Text",
+                    },
+                  ],
+                  "props": {},
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "onPointerEnter": [Function: AsyncFunction],
+                "onPointerLeave": [Function: AsyncFunction],
+                "style": {
+                  "marginTop": 8,
+                },
+                "testID": undefined,
+              },
+              "type": "View",
+            },
+          ],
+          "props": {
+            "onPointerEnter": [Function: AsyncFunction],
+            "onPointerLeave": [Function: AsyncFunction],
+            "style": {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "padding": 16,
+              "width": "100%",
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+      ],
+      "props": {
+        "style": undefined,
+        "testID": "swiper-flatlist",
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "onPointerEnter": [Function: AsyncFunction],
+    "onPointerLeave": [Function: AsyncFunction],
+    "style": {
+      "height": 300,
+      "testID": "swiper",
+      "width": "100%",
+    },
+    "testID": "swiper",
+  },
+  "type": "View",
+}
+`;

package/src/signUp/index.ts

@@ -0,0 +1,13 @@
+export {OAuthButtons} from "./OAuthButtons";
+export {PasswordRequirements} from "./PasswordRequirements";
+export {defaultPasswordRequirements, simplePasswordRequirements} from "./passwordPresets";
+export {SignUpScreen} from "./SignUpScreen";
+export {Swiper} from "./Swiper";
+export type {
+  OAuthProvider,
+  OAuthProviderConfig,
+  OnboardingPage,
+  PasswordRequirement,
+  SignUpFieldConfig,
+  SignUpScreenProps,
+} from "./signUpTypes";

package/src/signUp/passwordPresets.test.ts

@@ -0,0 +1,57 @@
+import {describe, expect, it} from "bun:test";
+
+import {defaultPasswordRequirements, simplePasswordRequirements} from "./passwordPresets";
+
+describe("defaultPasswordRequirements", () => {
+  it("has 5 requirements", () => {
+    expect(defaultPasswordRequirements).toHaveLength(5);
+  });
+
+  it("validates minimum length of 8 characters", () => {
+    const req = defaultPasswordRequirements.find((r) => r.key === "minLength")!;
+    expect(req.validate("short")).toBe(false);
+    expect(req.validate("longenough")).toBe(true);
+  });
+
+  it("validates uppercase letter", () => {
+    const req = defaultPasswordRequirements.find((r) => r.key === "uppercase")!;
+    expect(req.validate("lowercase")).toBe(false);
+    expect(req.validate("Uppercase")).toBe(true);
+  });
+
+  it("validates lowercase letter", () => {
+    const req = defaultPasswordRequirements.find((r) => r.key === "lowercase")!;
+    expect(req.validate("UPPERCASE")).toBe(false);
+    expect(req.validate("lowercase")).toBe(true);
+  });
+
+  it("validates number", () => {
+    const req = defaultPasswordRequirements.find((r) => r.key === "number")!;
+    expect(req.validate("noDigits")).toBe(false);
+    expect(req.validate("has1digit")).toBe(true);
+  });
+
+  it("validates special character", () => {
+    const req = defaultPasswordRequirements.find((r) => r.key === "special")!;
+    expect(req.validate("noSpecial1")).toBe(false);
+    expect(req.validate("special!")).toBe(true);
+  });
+
+  it("passes all requirements for a strong password", () => {
+    const strongPassword = "MyP@ssw0rd!";
+    const allMet = defaultPasswordRequirements.every((r) => r.validate(strongPassword));
+    expect(allMet).toBe(true);
+  });
+});
+
+describe("simplePasswordRequirements", () => {
+  it("has 1 requirement", () => {
+    expect(simplePasswordRequirements).toHaveLength(1);
+  });
+
+  it("validates minimum length of 6 characters", () => {
+    const req = simplePasswordRequirements[0];
+    expect(req.validate("short")).toBe(false);
+    expect(req.validate("enough")).toBe(true);
+  });
+});

package/src/signUp/passwordPresets.ts

@@ -0,0 +1,43 @@
+import type {PasswordRequirement} from "./signUpTypes";
+
+/**
+ * Default password requirements with strong validation rules.
+ */
+export const defaultPasswordRequirements: PasswordRequirement[] = [
+  {
+    key: "minLength",
+    label: "At least 8 characters",
+    validate: (password: string) => password.length >= 8,
+  },
+  {
+    key: "uppercase",
+    label: "At least one uppercase letter",
+    validate: (password: string) => /[A-Z]/.test(password),
+  },
+  {
+    key: "lowercase",
+    label: "At least one lowercase letter",
+    validate: (password: string) => /[a-z]/.test(password),
+  },
+  {
+    key: "number",
+    label: "At least one number",
+    validate: (password: string) => /\d/.test(password),
+  },
+  {
+    key: "special",
+    label: "At least one special character",
+    validate: (password: string) => /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  },
+];
+
+/**
+ * Simple password requirements with minimal validation.
+ */
+export const simplePasswordRequirements: PasswordRequirement[] = [
+  {
+    key: "minLength",
+    label: "At least 6 characters",
+    validate: (password: string) => password.length >= 6,
+  },
+];

package/src/signUp/signUpTypes.ts

@@ -0,0 +1,94 @@
+import type {ReactNode} from "react";
+
+/**
+ * Supported OAuth providers for social login buttons.
+ */
+export type OAuthProvider = "google" | "github" | "apple";
+
+/**
+ * Configuration for an OAuth provider button.
+ */
+export interface OAuthProviderConfig {
+  /** The OAuth provider identifier. */
+  provider: OAuthProvider;
+  /** Callback triggered when the provider button is pressed. */
+  onPress: () => Promise<void>;
+  /** Whether the button is in a loading state. */
+  loading?: boolean;
+  /** Whether the button is disabled. */
+  disabled?: boolean;
+}
+
+/**
+ * Configuration for a sign-up form field.
+ */
+export interface SignUpFieldConfig {
+  /** Unique field name used as the key in form state. */
+  name: string;
+  /** Display label for the field. */
+  label: string;
+  /** Placeholder text shown when the field is empty. */
+  placeholder?: string;
+  /** Input type for the field. */
+  type?: "text" | "email" | "password";
+  /** Whether the field is required. */
+  required?: boolean;
+  /** Auto-complete hint for the field. */
+  autoComplete?: "current-password" | "on" | "off" | "username";
+}
+
+/**
+ * A single password requirement with a label and validation function.
+ */
+export interface PasswordRequirement {
+  /** Unique key for the requirement. */
+  key: string;
+  /** Display label for the requirement. */
+  label: string;
+  /** Returns true if the password meets this requirement. */
+  validate: (password: string) => boolean;
+}
+
+/**
+ * Configuration for a single onboarding page in the swiper.
+ */
+export interface OnboardingPage {
+  /** Title text displayed on the page. */
+  title: string;
+  /** Subtitle or description text. */
+  subtitle?: string;
+  /** Custom content to render on the page. */
+  content?: ReactNode;
+  /** Image source for the page. */
+  image?: number | {uri: string};
+}
+
+/**
+ * Props for the SignUpScreen component.
+ */
+export interface SignUpScreenProps {
+  /** Form field configurations. */
+  fields: SignUpFieldConfig[];
+  /** Callback triggered on form submission. Receives field values as a record. */
+  onSubmit: (values: Record<string, string>) => Promise<void>;
+  /** Optional OAuth provider configurations for social login buttons. */
+  oauthProviders?: OAuthProviderConfig[];
+  /** Password requirements to validate against. */
+  passwordRequirements?: PasswordRequirement[];
+  /** Onboarding pages to display before the sign-up form. */
+  onboardingPages?: OnboardingPage[];
+  /** Custom logo or banner to display above the form. */
+  logo?: ReactNode;
+  /** Title text for the sign-up form. */
+  title?: string;
+  /** Whether the form is in a loading state. */
+  loading?: boolean;
+  /** Error message to display. */
+  error?: string;
+  /** Text for the link to navigate to login. */
+  loginLinkText?: string;
+  /** Callback triggered when the login link is pressed. */
+  onLoginPress?: () => void;
+  /** Test ID for the root element. */
+  testID?: string;
+}