@itiseeron/component-lib 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eeron Grant
+
+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,278 @@
+# @itiseeron/component-lib
+
+Eeron Grant's personal React (17) component library. Every component follows the same
+conventions:
+
+- **Style props are mutable, with sensible defaults.** Each visual piece has its own
+  `*Style` prop (e.g. `containerStyle`, `itemStyle`) backed by a default `CSSProperties`
+  object — override only what you need.
+- **Selection-driven components share one behavior engine.** `HamburgerMenu`,
+  `RadioButtonGroup`, and `ScrollMenu` are all presentational wrappers around
+  `NavigationBar` — they reuse its selection rules (one item always selected, disabled
+  or already-active items are a no-op) rather than reimplementing them, and swap in
+  their own look via a `render` prop.
+
+```bash
+npm install @itiseeron/component-lib
+```
+
+```tsx
+import { Card, ThinButton } from '@itiseeron/component-lib';
+```
+
+## Components
+
+### HelloWorld
+
+A placeholder component from the project template.
+
+```tsx
+<HelloWorld />
+```
+
+### ThinButton
+
+A bordered, clickable button. Renders `text` unless `children` are given.
+
+```tsx
+<ThinButton text="Submit" onclick={() => console.log('clicked')} />
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `text` | `string` | `'Click Me'` | Ignored if `children` is given |
+| `onclick` | `() => any` | no-op | |
+| `containerStyle` / `buttonStyle` / `buttonTextStyle` | `CSSProperties` | — | |
+
+### Card
+
+A white, rounded, shadowed surface with an optional title/subtitle and close button.
+
+```tsx
+<Card titleText="Title" subtitleText="Subtitle" showCloseButton onClickCloseButton={close}>
+  <p>Body content</p>
+</Card>
+```
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `titleText` / `subtitleText` | `string` | Omit to skip rendering |
+| `showCloseButton` | `boolean` | Default `false` |
+| `onClickCloseButton` | `() => any` | |
+| `containerStyle` / `wrapperStyle` / `titleStyle` / `subtitleStyle` / `titleContainerStyle` / `closeButtonStyle` / `closeButtonContainerStyle` | `CSSProperties` | |
+
+### InputForm
+
+A labeled text field. Uncontrolled by default (seeded from `defaultValue`); pass `value`
++ `onInput` together to control it from a parent, the same duality `NavigationBar` uses
+for selection.
+
+```tsx
+<InputForm
+  name="Email"
+  placeholder="you@example.com"
+  onInput={(value) => console.log(value)}
+/>
+
+// Controlled, with validation
+<InputForm
+  name="Full Name"
+  value={name}
+  onInput={setName}
+  errorMessage={name.length < 3 ? 'Too short' : undefined}
+/>
+```
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `name` | `string` | Renders a label above the field |
+| `value` / `defaultValue` / `onInput` | — | Controlled/uncontrolled duality |
+| `secureTextEntry` | `boolean` | Renders `type="password"` |
+| `multiline` / `numberOfLines` | `boolean` / `number` | Renders a `<textarea>` |
+| `maxLength` | `number` | Default `200` |
+| `trim` | `boolean` | Trims the value passed to `onInput` (not what's displayed while typing) |
+| `errorMessage` | `string` | Shown under the field whenever set |
+| `containerStyle` / `formTitleStyle` / `inputStyle` / `errorStyle` | `CSSProperties` | |
+
+### NavigationBar
+
+A tab strip. Owns selection *behavior* only — one item is always selected (defaulting
+to the first), and a disabled or already-selected item is a no-op. Items are plain data
+(`{ key, label, icon?, disabled? }`), never elements with their own click handlers, so
+no presentation can bypass that rule.
+
+```tsx
+<NavigationBar
+  items={[
+    { key: 'home', label: 'Home' },
+    { key: 'settings', label: 'Settings' },
+    { key: 'admin', label: 'Admin', disabled: true },
+  ]}
+  onSelect={(key) => setPage(key)}
+/>
+```
+
+Uncontrolled by default (`defaultSelectedKey`); pass `selectedKey` + `onSelect` together
+to control it. Swap the look entirely with `render`:
+
+```tsx
+<NavigationBar
+  items={items}
+  render={({ items, selectedKey, onItemSelect }) => (
+    <MyTabs items={items} activeKey={selectedKey} onClick={onItemSelect} />
+  )}
+/>
+```
+
+`NavigationBarView` is the default presentation, also exported on its own if you want
+its look without going through `render`.
+
+### HamburgerMenu
+
+`NavigationBar`'s items behind a toggle button and a collapsible panel, instead of shown
+inline. Same selection guarantees, purely a different presentation
+(`HamburgerMenuView`, which itself reuses `NavigationBarView` for the panel's items).
+
+```tsx
+<HamburgerMenu
+  items={items}
+  onSelect={(key) => setPage(key)}
+  icon={<MyMenuIcon />} // optional, defaults to "☰"
+/>
+```
+
+### RadioButtonGroup
+
+`NavigationBar`'s items as a segmented radio control (default styling mirrors
+homepairsUI's `AccountTypeRadioButton`: accent fill on the selected segment, rounded
+outer edges only).
+
+```tsx
+<RadioButtonGroup
+  title="Account Type"
+  items={[
+    { key: 'tenant', label: 'Tenant' },
+    { key: 'pm', label: 'Property Manager' },
+  ]}
+  onSelect={(key) => setAccountType(key)}
+/>
+```
+
+### ScrollMenu
+
+`NavigationBar`'s items as a horizontally scrollable strip of thumbnail tiles. Give an
+item a thumbnail via `icon`; without one it falls back to its `label` as centered text.
+
+```tsx
+<ScrollMenu
+  items={[
+    { key: 'p1', label: 'Acme Plumbing', icon: <img src={logo} style={{width: '100%', height: '100%', objectFit: 'cover'}} /> },
+    { key: 'p2', label: 'No Logo Co' },
+  ]}
+  onSelect={(key) => setSelectedProvider(key)}
+/>
+```
+
+### Tile
+
+`ImageTile` and `TextTile`, the standalone rounded-tile primitives `ScrollMenu`'s
+fallback logic is conceptually built on (used independently here, not shared —
+`ScrollMenu` keeps a single unified look across image/text items, while `TextTile`'s
+own default is deliberately two-toned like the original).
+
+```tsx
+<ImageTile image={logoUrl} />          {/* 70x70 */}
+<ImageTile image={logoUrl} enlarge />  {/* 100x100 */}
+<TextTile text="+" />                  {/* fontSize defaults to 30 */}
+```
+
+### Loading
+
+A small centered spinner panel, built on `Card`. Takes `children` for a status message.
+
+```tsx
+<Loading>
+  <span>Loading properties...</span>
+</Loading>
+```
+
+### SearchBar
+
+Wraps `InputForm` (no styling of its own) and adds filtering: on every keystroke,
+`objects` is filtered and the result is handed to `onResults`.
+
+```tsx
+<SearchBar
+  placeholder="Search providers..."
+  objects={providers}
+  keys={['name']}
+  onResults={setFilteredProviders}
+/>
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `objects` | `T[]` | `[]` | The list to search |
+| `keys` | `string[]` | — | Restrict matching to these top-level fields; omit to recurse through every nested value instead |
+| `onResults` | `(filtered: T[]) => any` | no-op | Not called on mount — only once the user searches, or `objects` changes |
+| `matchStrategy` | see below | `'fuzzy'` | |
+| `caseSensitive` | `boolean` | `false` | |
+| `ignoreAccents` | `boolean` | `false` | e.g. so `"cafe"` matches `"café"` |
+| `rank` | `boolean` | `true` | Sorts survivors by match score; a no-op for the boolean strategies |
+| `debounceMs` | `number` | `0` | Delays re-filtering after the last keystroke, never delays what's shown in the field |
+
+`matchStrategy` options:
+
+| Strategy | Behavior |
+| --- | --- |
+| `'fuzzy'` (default) | Subsequence match — query characters found in order, not necessarily together. Scores tighter (more contiguous) matches higher. |
+| `'substring'` | Plain `includes()` — exact and cheap. |
+| `'prefix'` | Matches the start of the text, or the start of any word in it. |
+| `'tokenized'` | Every word in the query must appear somewhere, in any order. |
+| `'regex'` | Query is compiled as a `RegExp`; an invalid pattern just matches nothing. |
+| custom function | `(query, text) => number \| null` — return `null` to exclude, a number (higher = better) to include and rank. Receives the same case/accent-normalized query and text the built-ins do. |
+
+```tsx
+<SearchBar
+  objects={providers}
+  keys={['name']}
+  matchStrategy={(query, text) => (text.split(/\s+/).includes(query) ? 0 : null)}
+  onResults={setFilteredProviders}
+/>
+```
+
+## Development
+
+```bash
+npm install
+npm run storybook
+```
+
+## Testing
+
+```bash
+npm test
+```
+
+Runs the Jest + React Testing Library suite (`*.test.tsx` files co-located with each
+component). Test files are excluded from the type-checked/shipped build (see
+`tsconfig.json`'s `exclude`), so they're free to use Jest/Testing Library globals
+without affecting `dist/`.
+
+## Build
+
+```bash
+npm run build
+```
+
+Outputs cjs, esm, and type declarations to `dist/`.
+
+## Publish
+
+```bash
+npm login          # one-time, per machine
+npm publish        # runs the build automatically via prepublishOnly
+```
+
+Published as a public scoped package (`publishConfig.access: public` is already set, so
+`npm publish` works without extra flags once logged in).