@codewithbeto/ui 0.0.2-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Code with Beto LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+# @codewithbeto/ui
+
+A React Native UI component library built for Expo applications.
+
+## Overview
+
+This package provides reusable UI components for React Native applications. Components are built on top of React Native primitives and are designed to work seamlessly with Expo.
+
+## Installation
+
+```bash
+pnpm add @codewithbeto/ui
+```
+
+Or with npm:
+
+```bash
+npm install @codewithbeto/ui
+```
+
+## Usage
+
+```typescript
+import { Text } from "@codewithbeto/ui";
+
+export default function App() {
+  return <Text variant="heading">Hello World</Text>;
+}
+```
+
+## Development
+
+### Local Development Setup
+
+This package is part of a pnpm workspace. For local development:
+
+1. Clone the repository and install dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+2. Use the workspace link in `apps/example` to test your changes:
+
+   ```typescript
+   import { Text } from "@codewithbeto/ui";
+   ```
+
+3. Changes will hot-reload automatically in Expo.
+
+### Building
+
+Before publishing, you must build the package to compile TypeScript to JavaScript:
+
+```bash
+pnpm --filter @codewithbeto/ui build
+```
+
+This command:
+
+- Compiles TypeScript files from `src/` to JavaScript in `dist/`
+- Generates TypeScript declaration files (`.d.ts`) for type support
+- Creates source maps for debugging
+
+**Why build?** We publish compiled JavaScript to npm, not TypeScript source files. This ensures:
+
+- Faster installs (no compilation needed)
+- Smaller package size
+- Better compatibility across different TypeScript versions
+
+### Type Checking
+
+Run type checking without building:
+
+```bash
+pnpm --filter @codewithbeto/ui typecheck
+```
+
+## Publishing
+
+Publishing is automated via GitHub Actions. No local `.npmrc` or Personal Access Token is required.
+
+### How It Works
+
+The repository includes a [publish workflow](../../.github/workflows/publish.yml) that:
+
+- Triggers automatically when a **GitHub Release** is created
+- Publishes as `latest` for stable releases, or `beta` for pre-releases
+- Builds the package and publishes it to npm
+- Uses an `NPM_TOKEN` repository secret for authentication
+
+### Publishing a Stable Release
+
+1. **Bump the version** in `package.json` according to [Semantic Versioning](https://semver.org/):
+   - **Patch** (`0.0.1` → `0.0.2`): Bug fixes, small improvements
+   - **Minor** (`0.0.1` → `0.1.0`): New features (backward compatible)
+   - **Major** (`0.0.1` → `1.0.0`): Breaking changes
+
+2. **Commit the version bump** and push to `main`.
+
+3. **Create a GitHub Release:**
+   - Go to the [Releases page](https://github.com/Code-with-Beto/cwb/releases/new)
+   - Click "Draft a new release"
+   - Create a new tag matching the version (e.g., `v0.0.2`)
+   - Add release notes describing the changes
+   - Click "Publish release"
+
+4. The workflow will automatically build and publish the package under the `latest` tag.
+
+### Publishing a Beta Release
+
+Beta releases let you test new changes without affecting users on the stable version.
+
+1. **Bump the version** with a prerelease identifier, e.g. `0.0.2-beta.1`.
+
+2. **Commit the version bump** and push to your branch.
+
+3. **Create a GitHub Release:**
+   - Go to the [Releases page](https://github.com/Code-with-Beto/cwb/releases/new)
+   - Create a new tag matching the version (e.g., `v0.0.2-beta.1`)
+   - Check the **"Set as a pre-release"** checkbox
+   - Click "Publish release"
+
+4. The workflow detects the pre-release flag and publishes under the `beta` dist-tag instead of `latest`.
+
+**Installing a beta version:**
+
+```bash
+pnpm add @codewithbeto/ui@beta
+```
+
+Users who run `pnpm add @codewithbeto/ui` (without `@beta`) will continue to get the latest stable version.
+
+### Promoting Beta to Stable
+
+Once a beta has been tested and is ready for production:
+
+1. **Update the version** in `package.json` to the stable version (remove the prerelease identifier):
+   - `0.0.2-beta.3` → `0.0.2`
+
+2. **Commit the version bump** and push to `main`.
+
+3. **Create a regular GitHub Release** (do **not** check "Set as a pre-release"):
+   - Create a new tag matching the stable version (e.g., `v0.0.2`)
+   - Click "Publish release"
+
+4. The workflow publishes the package under `latest`. All users will get the stable version on their next install or update.
+
+### Example: Full Release Lifecycle
+
+Here's a typical workflow from development to stable release:
+
+| Step | Version in `package.json` | Git Tag | Pre-release? | Dist-tag |
+|------|---------------------------|---------|--------------|----------|
+| First beta | `0.0.2-beta.1` | `v0.0.2-beta.1` | Yes | `beta` |
+| Fix a bug in beta | `0.0.2-beta.2` | `v0.0.2-beta.2` | Yes | `beta` |
+| Promote to stable | `0.0.2` | `v0.0.2` | No | `latest` |
+
+You can also trigger the workflow manually from the **Actions** tab with a custom dist-tag if needed.
+
+### Package Configuration
+
+The package is configured to publish to npm:
+
+- **Registry:** `https://registry.npmjs.org`
+- **Scope:** `@codewithbeto`
+- **Access:** Public
+- **Files included:** Only the `dist/` folder (specified in `package.json`)
+
+## Components
+
+### Text
+
+A text component with variant support.
+
+```typescript
+import { Text } from "@codewithbeto/ui";
+
+<Text variant="heading">Heading Text</Text>
+<Text variant="body">Body Text</Text>
+<Text variant="caption">Caption Text</Text>
+```
+
+**Props:**
+
+- `variant?: "body" | "heading" | "caption"` - Text style variant
+- All standard React Native `Text` props are supported
+
+## Adding New Components
+
+1. Create your component file in `src/`:
+
+   ```typescript
+   // src/MyComponent.tsx
+   import { View } from "react-native";
+
+   export interface MyComponentProps {
+     // your props
+   }
+
+   export function MyComponent({ ...props }: MyComponentProps) {
+     return <View>...</View>;
+   }
+   ```
+
+2. Export it from `src/index.ts`:
+
+   ```typescript
+   export { MyComponent, type MyComponentProps } from "./MyComponent";
+   ```
+
+3. Test it in `apps/example` before publishing.
+
+## License
+
+This package is licensed under the [MIT License](../../LICENSE).

package/dist/Text.d.ts

@@ -0,0 +1,74 @@
+import { type TextProps as RNTextProps } from "react-native";
+import { type ReactNode } from "react";
+/**
+ * Text component with automatic color scheme support and multiple size variants.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default size
+ * <Text>Hello World</Text>
+ *
+ * // Using different size types
+ * <Text type="title">Page Title</Text>
+ * <Text type="body">Body text content</Text>
+ * <Text type="caption">Small caption text</Text>
+ *
+ * // Using numeric sizes
+ * <Text type="xs">Extra small text</Text>
+ * <Text type="lg">Large text</Text>
+ * <Text type="3xl">Very large heading</Text>
+ *
+ * // Using secondary prop for description text
+ * <Text secondary>This is a description with gray color</Text>
+ * <Text type="caption" secondary>Secondary caption text</Text>
+ *
+ * // Using weight, fontStyle, and color props
+ * <Text weight="bold">Bold text</Text>
+ * <Text weight={600} fontStyle="italic">Semi-bold italic text</Text>
+ * <Text color="#FF0000">Red text</Text>
+ * <Text weight="bold" color="#0066CC">Bold blue text</Text>
+ *
+ * // All standard React Native Text props are supported
+ * <Text type="heading" style={{ marginTop: 10 }}>
+ *   Custom styled text
+ * </Text>
+ * ```
+ */
+export type TextProps = RNTextProps & {
+    /** Text content to display */
+    children?: ReactNode;
+    /**
+     * Text size variant
+     * @default "default"
+     */
+    type?: "default" | "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "11xl" | "12xl" | "title" | "subtitle" | "link" | "body" | "caption";
+    /**
+     * When enabled, uses a secondary gray color suitable for descriptions and less prominent text.
+     * Follows Apple's Human Interface Guidelines for secondary label colors.
+     * @default false
+     */
+    secondary?: boolean;
+    /**
+     * Font weight of the text.
+     * Can be a string ("normal", "bold") or a number (100-900).
+     * @default "normal"
+     */
+    weight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | number;
+    /**
+     * Font style of the text.
+     * @default "normal"
+     */
+    fontStyle?: "normal" | "italic";
+    /**
+     * Override the default color. When provided, this takes precedence over the automatic
+     * color scheme and secondary prop.
+     */
+    color?: string;
+};
+/**
+ * Text component that automatically adapts to light/dark color scheme.
+ * Text color will be black in light mode and white in dark mode.
+ * Use the `secondary` prop for description text with a gray color.
+ */
+export declare function Text({ style, type, secondary, weight, fontStyle, color: colorOverride, ...rest }: TextProps): import("react").JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,IAAI,WAAW,EAC9B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EACD,SAAS,GACT,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,SAAS,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EACH,QAAQ,GACR,MAAM,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;IACX;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,IAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,aAAa,EACpB,GAAG,IAAI,EACR,EAAE,SAAS,+BAuCX"}

package/dist/Text.js

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { Text as RNText, StyleSheet, useColorScheme, } from "react-native";
+import {} from "react";
+/**
+ * Text component that automatically adapts to light/dark color scheme.
+ * Text color will be black in light mode and white in dark mode.
+ * Use the `secondary` prop for description text with a gray color.
+ */
+export function Text({ style, type = "default", secondary = false, weight, fontStyle, color: colorOverride, ...rest }) {
+    const colorScheme = useColorScheme();
+    // Default to light mode if colorScheme is null/undefined
+    const color = useMemo(() => {
+        // If color override is provided, use it
+        if (colorOverride) {
+            return colorOverride;
+        }
+        if (secondary) {
+            // Apple's secondary label colors following HIG guidelines
+            // Light mode: #6E6E73 (60% opacity equivalent)
+            // Dark mode: #8E8E93 (60% opacity equivalent)
+            return colorScheme === "dark" ? "#8E8E93" : "#6E6E73";
+        }
+        return colorScheme === "dark" ? "#ffffff" : "#000000";
+    }, [colorScheme, secondary, colorOverride]);
+    // Memoize size style lookup
+    const sizeStyle = useMemo(() => sizeStyles[type], [type]);
+    // Build dynamic styles from props
+    const dynamicStyles = useMemo(() => {
+        const styles = {};
+        if (weight !== undefined) {
+            styles.fontWeight = weight;
+        }
+        if (fontStyle !== undefined) {
+            styles.fontStyle = fontStyle;
+        }
+        return styles;
+    }, [weight, fontStyle]);
+    return (<RNText style={[{ color }, sizeStyle, dynamicStyles, style]} textBreakStrategy="simple" {...rest}/>);
+}
+const sizeStyles = StyleSheet.create({
+    default: { fontSize: 16, lineHeight: 24 },
+    base: { fontSize: 16, lineHeight: 24 },
+    xs: { fontSize: 12, lineHeight: 16 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    lg: { fontSize: 18, lineHeight: 28 },
+    xl: { fontSize: 20, lineHeight: 28 },
+    "2xl": { fontSize: 24, lineHeight: 32 },
+    "3xl": { fontSize: 30, lineHeight: 36 },
+    "4xl": { fontSize: 36, lineHeight: 44 },
+    "5xl": { fontSize: 48, lineHeight: 58 },
+    "6xl": { fontSize: 60, lineHeight: 72 },
+    "7xl": { fontSize: 72, lineHeight: 86 },
+    "8xl": { fontSize: 96, lineHeight: 116 },
+    "9xl": { fontSize: 128, lineHeight: 154 },
+    "10xl": { fontSize: 160, lineHeight: 192 },
+    "11xl": { fontSize: 192, lineHeight: 230 },
+    "12xl": { fontSize: 220, lineHeight: 268 },
+    title: { fontSize: 32, lineHeight: 32 },
+    subtitle: { fontSize: 20, lineHeight: 28 },
+    body: { fontSize: 14, lineHeight: 20 },
+    caption: { fontSize: 12, lineHeight: 16 },
+    link: { lineHeight: 30, fontSize: 16 },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Text, type TextProps } from "./Text";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { Text } from "./Text";

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@codewithbeto/ui",
+  "version": "0.0.2-beta.1",
+  "private": false,
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "expo": "*"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.1",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc --noEmit",
+    "watch": "tsc -p tsconfig.json --watch"
+  }
+}