@tastic/profile 0.1.0 → 0.1.2

package/dist/index.js

@@ -237,7 +237,6 @@ var styles2 = import_react_native2.StyleSheet.create({
 // src/ProfilesManager.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_focus_chain = require("@rific/focus-chain");
 var import_toaster = require("@rific/toaster");
 var import_hud2 = require("@tastic/hud");
 var import_react2 = require("react");
@@ -384,13 +383,12 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   ] });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
-  const register = (0, import_focus_chain.useFocusChain)();
-  const tag = register();
-  const name = register();
+  const tagInputRef = (0, import_react2.useRef)(null);
+  const nameInputRef = (0, import_react2.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark, size: CHIP_SIZE }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tagInputRef, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent, onSubmitEditing: () => nameInputRef.current?.focus() }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: nameInputRef, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }

package/dist/index.mjs

@@ -205,7 +205,6 @@ var styles2 = StyleSheet2.create({
 // src/ProfilesManager.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
-import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
 import { InlineColorPicker, usePopoverHost } from "@tastic/hud";
 import { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
@@ -352,13 +351,12 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   ] });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
-  const register = useFocusChain();
-  const tag = register();
-  const name = register();
+  const tagInputRef = useRef(null);
+  const nameInputRef = useRef(null);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark, size: CHIP_SIZE }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: name.ref, ...name.props, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
+    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
+    /* @__PURE__ */ jsx3(TextInput, { ref: tagInputRef, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent, onSubmitEditing: () => nameInputRef.current?.focus() }),
+    /* @__PURE__ */ jsx3(TextInput, { ref: nameInputRef, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
     onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Player profile identity for local-multiplayer React Native games — a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -45,37 +45,36 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
     "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "ci": "npm run lint && npm test && npm run typecheck && npm run build",
     "fix": "eslint --fix",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
     "release": "git push --follow-tags",
-    "release:major": "npm version major && git push --follow-tags",
-    "release:minor": "npm version minor && git push --follow-tags",
-    "release:patch": "npm version patch && git push --follow-tags",
+    "release:major": "npm version major && npm run release",
+    "release:minor": "npm version minor && npm run release",
+    "release:patch": "npm version patch && npm run release",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "typecheck": "tsc --noEmit",
-    "preversion": "npm run lint && npm test && npm run build"
+    "preversion": "npm run ci"
   },
+  "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@rific/auto-paper": "file:.yalc/@rific/auto-paper",
-    "@rific/feedback-press": "^0.10.4",
-    "@rific/focus-chain": "^0.4.3",
-    "@rific/toaster": "^0.4.1",
-    "@tastic/core": "^0.1.2",
-    "@tastic/hud": "file:.yalc/@tastic/hud",
+    "@infinitetoken/eslint-config": "^0.1.4",
+    "@infinitetoken/tsconfig": "^0.1.1",
+    "@rific/auto-paper": "^0.10.1",
+    "@rific/feedback-press": "^0.10.7",
+    "@rific/focus-chain": "^0.4.4",
+    "@rific/toaster": "^0.6.0",
+    "@tastic/core": "^0.1.3",
+    "@tastic/hud": "^0.1.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.0.0",
-    "@typescript-eslint/parser": "^8.59.3",
     "eslint": "^9.39.4",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-package-json": "^1.0.0",
-    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "eslint-plugin-simple-import-sort": "^13.0.0",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "prettier": "^3.8.3",
@@ -86,8 +85,7 @@
     "react-native-safe-area-context": "^5.0.0",
     "ts-jest": "^29.4.9",
     "tsup": "^8.0.0",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.3"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "@rific/auto-paper": ">=0.9.0",

package/src/ProfilesManager.tsx

@@ -1,10 +1,9 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
 import { InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native'
+import { ComponentRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, TextInput as RNTextInput, View } from 'react-native'
 import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -270,33 +269,27 @@ interface EditRowProps {
   dark: boolean
 }
 
-// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker, which takes a size prop
-// rather than a fixed one, so it can be clamped to CHIP_SIZE along with every other circle on this
-// screen), a tag field clamped to that same CHIP_SIZE footprint, the name taking up whatever's
+// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker), a tag field clamped to
+// CHIP_SIZE, the name taking up whatever's
 // left, and — only for an existing profile — a delete icon at the very end. No `tag` passed to the
 // color trigger here — it keeps its plain palette icon regardless of the row's own tag field, since
 // the tag is already right next to it in its own field, so repeating it on the color trigger too
 // would be redundant rather than informative.
-// Return-key chains tag -> name (see @rific/focus-chain) rather than each field submitting on its
+// Return-key chains tag -> name via explicit refs rather than each field submitting on its
 // own — submitting the *name* field is what actually commits the row (see the last field's own
 // onSubmitEditing override below), matching how a normal multi-field form reads: fill fields in
 // order, the last one finishes it.
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }: EditRowProps) {
-  const register = useFocusChain()
-  const tag = register()
-  const name = register()
+  const tagInputRef = useRef<ComponentRef<typeof RNTextInput>>(null)
+  const nameInputRef = useRef<ComponentRef<typeof RNTextInput>>(null)
 
   return (
     <View style={styles.editRow}>
-      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} dark={dark} size={CHIP_SIZE} />
+      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} dark={dark} />
       {/* selectTextOnFocus so tapping into an already-set tag selects it for wholesale replacement
       — the far more common edit than inserting into the middle of a 1-3 character value. */}
-      <TextInput ref={tag.ref} {...tag.props} mode='outlined' dense value={draftTag} onChangeText={onTagChange} placeholder='Tag' autoCapitalize='characters' selectTextOnFocus error={tagInvalid} returnKeyType='next' style={styles.tagInput} contentStyle={styles.tagInputContent} />
-      {/* tag.props' own onSubmitEditing (focus the next field) applies to every field but this
-      one — as the chain's last field, submitting it should finish the row instead of trying to
-      focus a field that doesn't exist, so this overrides it with the real commit action. Spread
-      order matters: name.props first, the explicit prop after, so this wins. */}
-      <TextInput ref={name.ref} {...name.props} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} onSubmitEditing={onSubmit} />
+      <TextInput ref={tagInputRef} mode='outlined' dense value={draftTag} onChangeText={onTagChange} placeholder='Tag' autoCapitalize='characters' selectTextOnFocus error={tagInvalid} returnKeyType='next' style={styles.tagInput} contentStyle={styles.tagInputContent} onSubmitEditing={() => nameInputRef.current?.focus()} />
+      <TextInput ref={nameInputRef} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} onSubmitEditing={onSubmit} />
       {onDelete && (
         <TouchableRipple onPress={onDelete} style={styles.iconButton}>
           <Icon source='trash-can-outline' size={18} color={fgMuted} />