@isoline-ui/react-native 0.0.0-stage → 1.0.0

package/src/components/search-field.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { TextInput, View } from 'react-native';
+
+import { IconButton } from './icon-button.tsx';
+import { Search, X } from './icons.tsx';
+import {
+  Surface,
+  type MaterialOptions,
+  useIsolinePlatform,
+  useThemeColors,
+} from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+export interface SearchFieldProps extends MaterialOptions {
+  value: string;
+  onChangeText: (value: string) => void;
+  placeholder: string;
+  accessibilityLabel: string;
+  /** Label for the clear button, which only appears once something is typed. */
+  clearAccessibilityLabel: string;
+  /** Opens the keyboard on mount — for a screen whose only job is this field. */
+  autoFocus?: boolean;
+  className?: string;
+}
+
+/**
+ * The app's filter-as-you-type field: a pill with a leading magnifier and a
+ * clear button that appears only once there is something to clear.
+ *
+ * Deliberately not built on `Input`, which is the form control — a labelled
+ * box with room underneath for an error. A filter box has no label, no
+ * validation and no submit; it just narrows the list under it.
+ */
+export function SearchField({
+  value,
+  onChangeText,
+  placeholder,
+  accessibilityLabel,
+  clearAccessibilityLabel,
+  autoFocus = false,
+  className,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: SearchFieldProps) {
+  const platform = useIsolinePlatform();
+  const ios = platform === 'ios';
+  const materialActive = platform === 'ios' && material !== 'solid';
+  const Container = materialActive ? Surface : View;
+  const colors = useThemeColors();
+
+  return (
+    <Container
+      {...(materialActive
+        ? { material, glassStyle, tintColor, fallbackColor, interactive }
+        : {})}
+      className={cn(
+        'h-12 flex-row items-center gap-2 rounded-full pl-4 pr-1.5',
+        !materialActive && 'bg-surfaceContainerHigh',
+        className,
+      )}
+      style={ios ? { borderRadius: 10, height: 44 } : undefined}
+    >
+      <Search size={18} color={colors.onSurfaceVariant} />
+
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        placeholderTextColor={colors.onSurfaceVariant}
+        className="h-12 flex-1 p-0 text-base text-foreground"
+        autoCapitalize="none"
+        autoCorrect={false}
+        returnKeyType="search"
+        accessibilityLabel={accessibilityLabel}
+      />
+
+      {value.length > 0 ? (
+        <IconButton
+          icon={X}
+          onPress={() => onChangeText('')}
+          size={36}
+          iconSize={18}
+          accessibilityLabel={clearAccessibilityLabel}
+        />
+      ) : null}
+    </Container>
+  );
+}

package/src/components/select-field.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { ChevronDown } from './icons.tsx';
+import { Popover } from './popover.tsx';
+import { ContextMenuRows } from './context-menu.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import {
+  Surface,
+  useIsolinePlatform,
+  useThemeColors,
+  useRipple,
+  type MaterialOptions,
+} from '../provider.tsx';
+export interface SelectOption<T extends string> {
+  id: T;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectFieldProps<T extends string> extends MaterialOptions {
+  value: T;
+  options: SelectOption<T>[];
+  onChange: (value: T) => void;
+  accessibilityLabel: string;
+  menuMaterial?: MaterialOptions['material'];
+  disabled?: boolean;
+}
+export function SelectField<T extends string>({
+  value,
+  options,
+  onChange,
+  accessibilityLabel,
+  disabled,
+  material = 'solid',
+  menuMaterial = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: SelectFieldProps<T>) {
+  const platform = useIsolinePlatform();
+  const ios = platform === 'ios';
+  const glass = ios && material !== 'solid';
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const [open, setOpen] = React.useState(false);
+  const anchor = React.useRef<React.ComponentRef<typeof View>>(null);
+  const selected = options.find((option) => option.id === value);
+  const Container = glass ? Surface : View;
+  return (
+    <View ref={anchor} collapsable={false}>
+      <Container
+        {...(glass ? { material, glassStyle, tintColor, fallbackColor, interactive } : {})}
+        style={{ borderRadius: ios ? 10 : 24 }}
+      >
+        <Pressable
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ expanded: open, disabled }}
+          onPress={() => setOpen(true)}
+          android_ripple={{ color: ripple.onNeutral }}
+          style={{
+            minHeight: 44,
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            borderRadius: ios ? 10 : 24,
+            borderWidth: ios ? 0 : 1,
+            borderColor: colors.outline,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            ...(!glass && ios ? { backgroundColor: colors.surfaceContainerHigh } : {}),
+            opacity: disabled ? 0.4 : 1,
+          }}
+        >
+          <Text style={{ fontSize: 15, color: colors.onSurface }}>
+            {selected?.label ?? value}
+          </Text>
+          <ChevronDown size={16} color={colors.onSurfaceVariant} />
+        </Pressable>
+      </Container>
+      <Popover
+        visible={open}
+        onClose={() => setOpen(false)}
+        anchorRef={anchor}
+        accessibilityLabel={accessibilityLabel}
+        material={menuMaterial}
+        glassStyle={glassStyle}
+        tintColor={tintColor}
+        fallbackColor={fallbackColor}
+        interactive={interactive}
+      >
+        <ContextMenuRows
+          items={options.map((option) => ({
+            ...option,
+            selected: option.id === value,
+            onPress: () => onChange(option.id),
+          }))}
+          onClose={() => setOpen(false)}
+        />
+      </Popover>
+    </View>
+  );
+}

package/src/components/settings-list.tsx

@@ -0,0 +1,302 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Check, ChevronRight, type IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { RowGap } from './row-gap.tsx';
+import { SelectField, type SelectOption } from './select-field.tsx';
+import { Switch } from './switch.tsx';
+import { Text } from './text.tsx';
+import { useRipple, useThemeColors, type MaterialOptions } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * The pieces every settings screen is built from.
+ *
+ * Settings used to be one screen that spelled out each card, row, switch and
+ * chevron inline, which is why the same twelve lines of markup appeared a
+ * dozen times over and drifted apart as they were edited. Splitting settings
+ * across several screens would have multiplied that, so the row shapes live
+ * here instead and a screen only says what its settings *are*.
+ */
+
+export type SettingsIcon = React.ComponentType<IconProps>;
+
+/**
+ * Corner radii for one row of a connected group.
+ *
+ * M3 Expressive draws a settings group as separate cards that still read as
+ * one object: the group's outer corners stay large, and every corner facing a
+ * neighbour tightens to the small step.
+ */
+export function groupRounding(index: number, count: number): string {
+  if (count === 1) return 'rounded-3xl';
+  if (index === 0) return 'rounded-t-3xl rounded-b-lg';
+  if (index === count - 1) return 'rounded-t-lg rounded-b-3xl';
+  return 'rounded-lg';
+}
+
+export function SettingsSection({
+  title,
+  children,
+}: {
+  title?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <View className="gap-2">
+      {title ? (
+        <Text variant="label" className="px-4">
+          {title}
+        </Text>
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+/**
+ * A run of rows drawn as one connected card group.
+ *
+ * Takes the rows as children rather than as data so a screen can drop one on a
+ * condition (`{Platform.OS === 'android' ? <Row/> : null}`) and still get the
+ * rounding right — a falsy child is discarded here, before the corners are
+ * worked out, so a hidden row never leaves a flattened corner behind.
+ */
+export function SettingsGroup({ children }: { children: React.ReactNode }) {
+  const rows = React.Children.toArray(children).filter(React.isValidElement);
+
+  return (
+    <View className="mx-4">
+      {rows.map((row, index) => (
+        <React.Fragment key={row.key ?? index}>
+          {index > 0 ? <RowGap /> : null}
+          <View
+            className={cn(
+              'overflow-hidden bg-surfaceContainerLow',
+              groupRounding(index, rows.length),
+            )}
+          >
+            {row}
+          </View>
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}
+
+function RowLabel({
+  icon: Icon,
+  leading,
+  label,
+  description,
+  destructive,
+}: {
+  icon?: SettingsIcon;
+  leading?: React.ReactNode;
+  label: string;
+  description?: string;
+  destructive?: boolean;
+}) {
+  const colors = useThemeColors();
+
+  return (
+    <View className={cn('flex-1 flex-row gap-3', description ? 'items-start' : 'items-center')}>
+      {leading ? (
+        <View
+          className="h-[18px] w-[18px] items-center justify-center"
+          style={description ? { marginTop: 2 } : undefined}
+        >
+          {leading}
+        </View>
+      ) : Icon ? (
+        <Icon
+          size={18}
+          color={destructive ? colors.error : colors.onSurfaceVariant}
+          style={description ? { marginTop: 2 } : undefined}
+        />
+      ) : null}
+      <View className="flex-1">
+        <Text className={cn('text-[15px] font-medium', destructive && 'text-destructive')}>
+          {label}
+        </Text>
+        {description ? <Text variant="caption">{description}</Text> : null}
+      </View>
+    </View>
+  );
+}
+
+export interface SettingsNavRowProps {
+  icon?: SettingsIcon;
+  /** Custom leading content in the icon's place — an account's color dot. */
+  leading?: React.ReactNode;
+  label: string;
+  description?: string;
+  /** The current choice, shown at the row's trailing edge. */
+  value?: string;
+  onPress: () => void;
+  accessibilityLabel?: string;
+  /** For a row that removes something: red label, and no chevron to follow. */
+  destructive?: boolean;
+}
+
+/** A row that opens something else — another screen, or a picker sheet. */
+export function SettingsNavRow({
+  icon,
+  leading,
+  label,
+  description,
+  value,
+  onPress,
+  accessibilityLabel,
+  destructive,
+}: SettingsNavRowProps) {
+  const colors = useThemeColors();
+  const ripple = useRipple();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      android_ripple={{ color: ripple.onNeutral }}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      className="flex-row items-center gap-3 px-4 py-3.5"
+    >
+      <RowLabel
+        icon={icon}
+        leading={leading}
+        label={label}
+        description={description}
+        destructive={destructive}
+      />
+      {value ? (
+        <Text variant="muted" numberOfLines={1} className="max-w-[45%]">
+          {value}
+        </Text>
+      ) : null}
+      {destructive ? null : <ChevronRight size={18} color={colors.onSurfaceVariant} />}
+    </Pressable>
+  );
+}
+
+export interface SettingsChoiceRowProps {
+  /** Custom leading content — a calendar's color dot. */
+  leading?: React.ReactNode;
+  label: string;
+  description?: string;
+  selected: boolean;
+  onPress: () => void;
+  accessibilityLabel?: string;
+}
+
+/**
+ * One option of a choice spelled out as rows rather than a menu, for options
+ * that need a second line to tell apart: two calendars both called "Personal".
+ */
+export function SettingsChoiceRow({
+  leading,
+  label,
+  description,
+  selected,
+  onPress,
+  accessibilityLabel,
+}: SettingsChoiceRowProps) {
+  const colors = useThemeColors();
+  const ripple = useRipple();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      android_ripple={{ color: ripple.onNeutral }}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      className="flex-row items-center gap-3 px-4 py-3.5"
+    >
+      <RowLabel leading={leading} label={label} description={description} />
+      <View className="h-[18px] w-[18px]">
+        {selected ? <Check size={18} color={colors.primary} /> : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export interface SettingsSwitchRowProps {
+  icon?: SettingsIcon;
+  /** Custom leading content in the icon's place — a calendar's color dot. */
+  leading?: React.ReactNode;
+  label: string;
+  description?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+
+export function SettingsSwitchRow({
+  icon,
+  leading,
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled,
+  accessibilityLabel,
+}: SettingsSwitchRowProps) {
+  return (
+    <View className="flex-row items-center gap-3 px-4 py-3.5">
+      <RowLabel icon={icon} leading={leading} label={label} description={description} />
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel ?? label}
+      />
+    </View>
+  );
+}
+
+export interface SettingsSelectRowProps<T extends string> extends MaterialOptions {
+  menuMaterial?: MaterialOptions['material'];
+  disabled?: boolean;
+  icon?: SettingsIcon;
+  label: string;
+  description?: string;
+  value: T;
+  options: SelectOption<T>[];
+  onChange: (value: T) => void;
+  accessibilityLabel?: string;
+}
+
+export function SettingsSelectRow<T extends string>({
+  icon,
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  accessibilityLabel,
+  ...materialOptions
+}: SettingsSelectRowProps<T>) {
+  return (
+    <View className="flex-row items-center gap-3 px-4 py-3.5">
+      <RowLabel icon={icon} label={label} description={description} />
+      <SelectField
+        {...materialOptions}
+        value={value}
+        options={options}
+        onChange={onChange}
+        accessibilityLabel={accessibilityLabel ?? label}
+      />
+    </View>
+  );
+}
+
+/**
+ * A card holding something that is not a row — the theme picker's button
+ * group, the accent swatches. Matches a group of one so custom content sits on
+ * the same surface at the same inset as the rows above and below it.
+ */
+export function SettingsCard({ children }: { children: React.ReactNode }) {
+  return <View className="mx-4 gap-4 rounded-3xl bg-surfaceContainerLow p-4">{children}</View>;
+}

package/src/components/settings-row.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ChevronRight, type IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { Switch } from './switch.tsx';
+import { Text } from './text.tsx';
+import { useRipple, useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/** A row in a settings card: a symbol in its own tinted circle, a label and what it is set to. */
+export function SettingsRow({
+  icon: Icon,
+  label,
+  description,
+  onPress,
+  value,
+  onValueChange,
+  first,
+}: {
+  icon?: React.ComponentType<IconProps>;
+  label: string;
+  description?: string;
+  onPress?: () => void;
+  /** A switch instead of a chevron. */
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  first?: boolean;
+}) {
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const toggle = value !== undefined && onValueChange;
+  return (
+    <Pressable
+      onPress={toggle ? () => onValueChange(!value) : onPress}
+      disabled={!toggle && !onPress}
+      android_ripple={{ color: ripple.onNeutral }}
+      accessibilityRole={toggle ? 'switch' : 'button'}
+      accessibilityState={toggle ? { checked: value } : undefined}
+      className={cn(
+        'min-h-16 flex-row items-center gap-4 px-4 py-3',
+        !first && 'border-t border-border',
+      )}
+    >
+      {Icon ? (
+        <View className="h-10 w-10 items-center justify-center rounded-full bg-secondaryContainer">
+          <Icon size={20} color={colors.onSecondaryContainer} />
+        </View>
+      ) : null}
+      <View className="flex-1 gap-0.5">
+        <Text variant="subject">{label}</Text>
+        {description ? <Text variant="muted">{description}</Text> : null}
+      </View>
+      {toggle ? (
+        <Switch value={value} onValueChange={onValueChange} accessibilityLabel={label} />
+      ) : onPress ? (
+        <ChevronRight size={20} color={colors.outline} />
+      ) : null}
+    </Pressable>
+  );
+}