@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/custom/Sidebar/Sidebar.stories.tsx

@@ -13,7 +13,16 @@ import {
 const meta: Meta<typeof Sidebar> = {
   title: 'Components/Organisms/Sidebar',
   component: Sidebar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Composes RN primitives only (View / Pressable / ScrollView) plus caller-supplied ' +
+          'icon components. The seven parts share collapsed and active state through a context.',
+      },
+    },
+  },
   argTypes: {
     isCollapsed: {
       control: 'boolean',
@@ -46,27 +55,51 @@ type Story = StoryObj<typeof Sidebar>
 
 // Simple icon components for demos
 function HomeIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#8962;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#8962;
+    </Text>
+  )
 }
 
 function ChartIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9632;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9632;
+    </Text>
+  )
 }
 
 function UserIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9786;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9786;
+    </Text>
+  )
 }
 
 function GearIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9881;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9881;
+    </Text>
+  )
 }
 
 function MailIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9993;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9993;
+    </Text>
+  )
 }
 
 function FileIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#128196;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#128196;
+    </Text>
+  )
 }
 
 export const Default: Story = {
@@ -187,7 +220,7 @@ export const WithBadge: Story = {
             label="Messages"
             badge={
               <View className="bg-status-error rounded-full px-1.5 py-0.5">
-                <Text className="text-white text-xs font-bold">5</Text>
+                <Text className="text-on-status-error text-xs font-bold">5</Text>
               </View>
             }
           />

package/src/components/custom/Sidebar/Sidebar.test.tsx

@@ -12,7 +12,11 @@ import {
 } from './Sidebar'
 
 function MockIcon({ size, className }: { size?: number; className?: string }) {
-  return <span data-testid="mock-icon" data-size={size} className={className}>I</span>
+  return (
+    <span data-testid="mock-icon" data-size={size} className={className}>
+      I
+    </span>
+  )
 }
 
 function renderSidebar(props: Partial<React.ComponentProps<typeof Sidebar>> = {}) {

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -1,5 +1,12 @@
 import React, { createContext, useContext } from 'react'
-import { View, Text, Pressable, ScrollView, type ViewProps, type PressableProps } from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+  type PressableProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
 
 interface SidebarContextType {
@@ -85,9 +92,7 @@ export interface SidebarHeaderProps {
  */
 export function SidebarHeader({ children, className }: SidebarHeaderProps) {
   return (
-    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>
-      {children}
-    </View>
+    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>{children}</View>
   )
 }
 
@@ -101,10 +106,7 @@ export interface SidebarContentProps {
  */
 export function SidebarContent({ children, className }: SidebarContentProps) {
   return (
-    <ScrollView
-      className={cn('flex-1', className)}
-      showsVerticalScrollIndicator={false}
-    >
+    <ScrollView className={cn('flex-1', className)} showsVerticalScrollIndicator={false}>
       {children}
     </ScrollView>
   )
@@ -120,9 +122,7 @@ export interface SidebarFooterProps {
  */
 export function SidebarFooter({ children, className }: SidebarFooterProps) {
   return (
-    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>
-      {children}
-    </View>
+    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>{children}</View>
   )
 }
 
@@ -146,9 +146,7 @@ export function SidebarSection({ title, children, className }: SidebarSectionPro
           {title}
         </Text>
       )}
-      <View className="gap-0.5">
-        {children}
-      </View>
+      <View className="gap-0.5">{children}</View>
     </View>
   )
 }
@@ -209,12 +207,7 @@ export function SidebarItem({
       {...props}
     >
       {Icon && (
-        <Icon
-          size={20}
-          className={cn(
-            isActive ? 'text-brand-primary' : 'text-text-secondary'
-          )}
-        />
+        <Icon size={20} className={cn(isActive ? 'text-brand-primary' : 'text-text-secondary')} />
       )}
       {!isCollapsed && (
         <>
@@ -227,16 +220,8 @@ export function SidebarItem({
           >
             {label}
           </Text>
-          {badge && (
-            <View className="ml-auto">
-              {badge}
-            </View>
-          )}
-          {hasChildren && (
-            <Text className="text-text-tertiary ml-1">
-              {isExpanded ? '▼' : '▶'}
-            </Text>
-          )}
+          {badge && <View className="ml-auto">{badge}</View>}
+          {hasChildren && <Text className="text-text-tertiary ml-1">{isExpanded ? '▼' : '▶'}</Text>}
         </>
       )}
     </Pressable>
@@ -251,7 +236,5 @@ export interface SidebarDividerProps {
  * Divider between sidebar sections.
  */
 export function SidebarDivider({ className }: SidebarDividerProps) {
-  return (
-    <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
-  )
+  return <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
 }

package/src/components/custom/Table/Table.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { cn } from '../../../utils/cn'
@@ -15,6 +15,7 @@ import {
   TableSelectCell,
   useTable,
 } from './Table'
+import { useColumnFit, type TableColumnFit } from './column-fit'
 import { Button, ButtonText } from '../../ui/button/Button'
 
 interface User {
@@ -44,7 +45,10 @@ const manyUsers: User[] = Array.from({ length: 50 }, (_, i) => ({
 const meta: Meta<typeof Table> = {
   title: 'Components/Organisms/Table',
   component: Table,
-  tags: ['autodocs'],
+  parameters: {
+    docs: { description: { component: 'Composes **Tooltip**.' } },
+  },
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     isLoading: {
       control: 'boolean',
@@ -87,7 +91,7 @@ export const Default: Story = {
               <View
                 className={cn(
                   'px-2 py-0.5 rounded-full self-start',
-                  user.status === 'Active' ? 'bg-status-success/20' : 'bg-status-warning/20'
+                  user.status === 'Active' ? 'bg-status-success-subtle' : 'bg-status-warning-subtle'
                 )}
               >
                 <Text
@@ -114,9 +118,7 @@ export const WithSorting: Story = {
 
     const handleSort = (column: string) => {
       if (sortColumn === column) {
-        setSortDirection((prev) =>
-          prev === 'asc' ? 'desc' : prev === 'desc' ? null : 'asc'
-        )
+        setSortDirection((prev) => (prev === 'asc' ? 'desc' : prev === 'desc' ? null : 'asc'))
       } else {
         setSortColumn(column)
         setSortDirection('asc')
@@ -313,11 +315,17 @@ export const WithColumnWidths: Story = {
     <Table>
       <TableHeader>
         <TableRow isHoverable={false}>
-          <TableHeaderCell width={60} align="center">#</TableHeaderCell>
+          <TableHeaderCell width={60} align="center">
+            #
+          </TableHeaderCell>
           <TableHeaderCell width={200}>Name</TableHeaderCell>
           <TableHeaderCell>Email</TableHeaderCell>
-          <TableHeaderCell width={120} align="center">Role</TableHeaderCell>
-          <TableHeaderCell width={100} align="right">Status</TableHeaderCell>
+          <TableHeaderCell width={120} align="center">
+            Role
+          </TableHeaderCell>
+          <TableHeaderCell width={100} align="right">
+            Status
+          </TableHeaderCell>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -330,8 +338,12 @@ export const WithColumnWidths: Story = {
               <Text className="text-sm text-text-primary font-medium">{user.name}</Text>
             </TableCell>
             <TableCell>{user.email}</TableCell>
-            <TableCell width={120} align="center">{user.role}</TableCell>
-            <TableCell width={100} align="right">{user.status}</TableCell>
+            <TableCell width={120} align="center">
+              {user.role}
+            </TableCell>
+            <TableCell width={100} align="right">
+              {user.status}
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -339,6 +351,79 @@ export const WithColumnWidths: Story = {
   ),
 }
 
+/**
+ * A column's terms for the fit: what it needs, and when it leaves. `name` has no
+ * `dropPriority`, so it never drops — which is what puts a floor under the
+ * dropping and hands the overflow to horizontal scroll instead.
+ */
+const FIT_COLUMNS: (TableColumnFit & { label: string })[] = [
+  { key: 'name', label: 'Name', minWidth: 200 },
+  { key: 'email', label: 'Email', minWidth: 220, dropPriority: 3 },
+  { key: 'role', label: 'Role', minWidth: 120, dropPriority: 2 },
+  { key: 'status', label: 'Status', minWidth: 100, dropPriority: 1 },
+]
+
+/** The hairline frame, which the outer width includes but the columns cannot use. */
+const FRAME_INSET = 2
+
+/** The same table at a pinned width, so one story shows every step of the order at once. */
+function FittedTable({ available }: { available: number }) {
+  const fit = useColumnFit(FIT_COLUMNS, available - FRAME_INSET)
+  const columns = FIT_COLUMNS.filter((column) => fit.isVisible(column.key))
+  const width = (key: string) =>
+    key === 'name' ? undefined : FIT_COLUMNS.find((c) => c.key === key)!.minWidth
+
+  return (
+    <View className="gap-1" style={{ width: available }}>
+      <Text className="text-xs text-text-secondary">
+        {`${available}px · ${columns.length} columns${fit.isScrolling ? ' · scrolls' : ''}`}
+      </Text>
+      <View className="overflow-hidden rounded-lg border border-hairline">
+        <Table contentMinWidth={fit.contentMinWidth}>
+          <TableHeader>
+            <TableRow isHoverable={false}>
+              {columns.map((column) => (
+                <TableHeaderCell key={column.key} width={width(column.key)}>
+                  {column.label}
+                </TableHeaderCell>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sampleUsers.slice(0, 3).map((user) => (
+              <TableRow key={user.id}>
+                {columns.map((column) => (
+                  <TableCell key={column.key} width={width(column.key)}>
+                    {user[column.key as keyof User]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * **Column drop order.** When the measured width cannot hold every column, they
+ * drop one at a time in the order the caller declared — `status`, then `role`,
+ * then `email`. `name` declares no `dropPriority`, so dropping stops there and
+ * the table scrolls horizontally instead: scroll is the floor, not the first
+ * resort. Measure with `useMeasuredWidth`, decide with `useColumnFit`, and hand
+ * `contentMinWidth` to `Table` so it knows what to scroll to.
+ */
+export const ColumnDropOrder: Story = {
+  render: () => (
+    <View className="gap-6">
+      {[660, 560, 440, 300, 150].map((available) => (
+        <FittedTable key={available} available={available} />
+      ))}
+    </View>
+  ),
+}
+
 export const UseTableHook: Story = {
   render: function Render() {
     const {
@@ -361,8 +446,8 @@ export const UseTableHook: Story = {
     return (
       <View style={{ gap: 8 }}>
         <Text className="text-sm text-text-secondary">
-          Showing {paginatedData.length} of {totalItems} users, sorted by{' '}
-          {sortColumn ?? 'none'} ({sortDirection ?? 'none'})
+          Showing {paginatedData.length} of {totalItems} users, sorted by {sortColumn ?? 'none'} (
+          {sortDirection ?? 'none'})
         </Text>
         <Table sortColumn={sortColumn} sortDirection={sortDirection} onSort={handleSort}>
           <TableHeader>
@@ -434,9 +519,7 @@ export const SortingAndSelection: Story = {
 
     return (
       <View style={{ gap: 8 }}>
-        <Text className="text-sm text-text-secondary">
-          Selected: {selectedRows.size} rows
-        </Text>
+        <Text className="text-sm text-text-secondary">Selected: {selectedRows.size} rows</Text>
         <Table
           sortColumn={sortColumn}
           sortDirection={sortDirection}