@forthtilliath/react-native-kit 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Forthtilliath
+
+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,88 @@
+# @forthtilliath/react-native-kit
+
+Small, dependency-free-of-app-theme React Native UI components, distributed one file per component so consumers only pull in what they use.
+
+## Install
+
+```bash
+npm install @forthtilliath/react-native-kit react react-native
+```
+
+Or, from within this monorepo, as a workspace dependency:
+
+```json
+{
+  "dependencies": {
+    "@forthtilliath/react-native-kit": "workspace:*"
+  }
+}
+```
+
+`react` and `react-native` are peer dependencies — install them in the consuming app if not already present.
+
+## Usage
+
+Each component is its own module — import the file you need directly:
+
+```ts
+import { ChangelogNotes } from "@forthtilliath/react-native-kit/ChangelogNotes";
+```
+
+### `<ChangelogNotes notes={...} styles={...} />`
+
+Renders GitHub-style release notes — as produced by `@forthtilliath/expo-release-updates`'s `parseChangelogNotes` — as headings, bulleted items, and bold-aware text, instead of showing the raw Markdown syntax in a plain `Text`.
+
+```tsx
+<ChangelogNotes notes={release.notes} />
+```
+
+It understands the small subset of Markdown GitHub release notes actually use:
+
+| `notes` input                             | Rendered as                                                                 |
+| ----------------------------------------- | --------------------------------------------------------------------------- |
+| `### Added`                               | a heading `Text` — `"Added"`                                                |
+| `- Export history to CSV.`                | a row (`View`) with a `•` bullet `Text` and an item `Text`                  |
+| `**Auto-backup**: saves every 5 minutes.` | a plain `Text`, with the bold segment split into its own bold-styled `Text` |
+
+A full example, mixing all three:
+
+```tsx
+<ChangelogNotes
+  notes={`### Added\n- **Auto-backup**: saves every 5 minutes.\n- Export history to CSV.\n\nSee the full changelog for details.`}
+/>
+```
+
+The component ships with neutral default styles and no opinion on your app's theme. Override any subset via the `styles` prop to match your colors/dark mode:
+
+```tsx
+<ChangelogNotes
+  notes={release.notes}
+  styles={{
+    heading: { color: colors.text, fontWeight: "700" },
+    itemRow: { gap: 8 },
+    bullet: { color: colors.primary },
+    itemText: { color: colors.textMuted },
+    text: { color: colors.textMuted },
+    bold: { color: colors.text, fontWeight: "700" },
+  }}
+/>
+```
+
+Every field of `styles` is optional — pass only the ones you want to override; the rest fall back to the defaults (`ChangelogNotesStyles` in `ChangelogNotes.tsx`).
+
+## Scripts
+
+```bash
+pnpm run dev            # tsc --watch -> dist/
+pnpm run build          # tsc -> dist/
+pnpm run check-types    # tsc --noEmit
+pnpm run lint           # eslint
+pnpm run test           # vitest run
+pnpm run test:watch     # vitest
+```
+
+Built to `dist/` (see the `exports` field in `package.json`), so run `pnpm run build` (or `dev`) after source changes for consumers to see them.
+
+### Testing note
+
+`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details.

package/dist/ChangelogNotes.d.ts

@@ -0,0 +1,22 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface ChangelogNotesStyles {
+    heading?: StyleProp<TextStyle>;
+    itemRow?: StyleProp<ViewStyle>;
+    bullet?: StyleProp<TextStyle>;
+    itemText?: StyleProp<TextStyle>;
+    text?: StyleProp<TextStyle>;
+    bold?: StyleProp<TextStyle>;
+}
+export interface ChangelogNotesProps {
+    /** Raw release notes, e.g. straight from a GitHub release body. */
+    notes: string;
+    /** Override any of the default styles to match your app's theme. */
+    styles?: ChangelogNotesStyles;
+}
+/**
+ * Renders GitHub-style release notes (parsed by `parseChangelogNotes`) as
+ * headings, bulleted items and bold-aware text, instead of showing the raw
+ * Markdown syntax in a plain `<Text>`.
+ */
+export declare function ChangelogNotes({ notes, styles }: ChangelogNotesProps): import("react").JSX.Element;
+//# sourceMappingURL=ChangelogNotes.d.ts.map

package/dist/ChangelogNotes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangelogNotes.d.ts","sourceRoot":"","sources":["../src/ChangelogNotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AA0BD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BAoCpE"}

package/dist/ChangelogNotes.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { parseChangelogNotes } from "@forthtilliath/expo-release-updates/parseChangelogNotes";
+// Reasonable, neutral defaults so the component works with zero
+// configuration — most consumers will still want to pass `styles` to match
+// their own theme (colors, dark mode, ...), which this package has no
+// opinion on.
+const defaultStyles = {
+    heading: { fontSize: 13, fontWeight: "700", color: "#111827", marginTop: 8 },
+    itemRow: { flexDirection: "row", gap: 6, marginTop: 4 },
+    bullet: { fontSize: 13, color: "#6b7280" },
+    itemText: { flex: 1, fontSize: 13, color: "#6b7280" },
+    text: { fontSize: 13, color: "#6b7280" },
+    bold: { fontWeight: "700", color: "#111827" },
+};
+function renderSegments(segments, boldStyle) {
+    return segments.map((segment) => (_jsx(Text, { style: segment.bold ? boldStyle : undefined, children: segment.text }, segment.text)));
+}
+/**
+ * Renders GitHub-style release notes (parsed by `parseChangelogNotes`) as
+ * headings, bulleted items and bold-aware text, instead of showing the raw
+ * Markdown syntax in a plain `<Text>`.
+ */
+export function ChangelogNotes({ notes, styles }) {
+    const merged = { ...defaultStyles, ...styles };
+    const blocks = parseChangelogNotes(notes);
+    return (_jsx(_Fragment, { children: blocks.map((block, index) => {
+            // Blocks have no stable identity of their own (plain parsed lines),
+            // so the index is the only reasonable key — the list is never
+            // reordered or filtered after the initial parse.
+            const key = `${block.type}-${String(index)}`;
+            if (block.type === "heading") {
+                return (_jsx(Text, { style: merged.heading, children: block.text }, key));
+            }
+            if (block.type === "item") {
+                return (_jsxs(View, { style: merged.itemRow, children: [_jsx(Text, { style: merged.bullet, children: "\u2022" }), _jsx(Text, { style: merged.itemText, children: renderSegments(block.segments, merged.bold) })] }, key));
+            }
+            return (_jsx(Text, { style: merged.text, children: renderSegments(block.segments, merged.bold) }, key));
+        }) }));
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@forthtilliath/react-native-kit",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Forthtilliath/turborepo.git",
+    "directory": "packages/react-native-kit"
+  },
+  "homepage": "https://github.com/Forthtilliath/turborepo/tree/main/packages/react-native-kit#readme",
+  "bugs": "https://github.com/Forthtilliath/turborepo/issues",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./*": "./dist/*.js"
+  },
+  "dependencies": {
+    "@forthtilliath/expo-release-updates": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": ">=0.81"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "10.7.0",
+    "react": "^19.2.7",
+    "react-native": "0.86.0",
+    "react-test-renderer": "19.2.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10",
+    "@forthtilliath/eslint-config": "0.0.0",
+    "@forthtilliath/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "dev": "tsc --watch -p tsconfig.build.json",
+    "build": "pnpm run clean && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}