@studio-piot/native-ui 0.1.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,279 @@
+import { useCallback, useRef, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { TrueSheet } from "@lodev09/react-native-true-sheet";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  DEFAULT_SELECT_DETENTS,
+  DEFAULT_SELECT_INITIAL_DETENT,
+  resolveSelectDetentIndex,
+} from "./resolveSelectDetentIndex";
+import { SelectCloseButton } from "./SelectCloseButton";
+import { SELECT_THEME_ROLES } from "./selectThemeRoles";
+import type { SelectOption, SelectProps } from "./types";
+
+export function Select({
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option",
+  label,
+  description,
+  error,
+  sheetTitle,
+  closeButton,
+  detents = [...DEFAULT_SELECT_DETENTS],
+  initialDetent = DEFAULT_SELECT_INITIAL_DETENT,
+  radius = "xl",
+  editable = true,
+  backgroundColor: backgroundColorProp,
+  textColor: textColorProp,
+  placeholderColor: placeholderColorProp,
+  labelColor: labelColorProp,
+  descriptionColor: descriptionColorProp,
+  borderColor: borderColorProp,
+  errorColor: errorColorProp,
+  selectedColor: selectedColorProp,
+  style,
+}: SelectProps) {
+  const sheetRef = useRef<TrueSheet>(null);
+
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    SELECT_THEME_ROLES.backgroundColor,
+  );
+  const textColor = useResolvedFieldColor(
+    textColorProp,
+    SELECT_THEME_ROLES.textColor,
+  );
+  const placeholderColor = useResolvedFieldColor(
+    placeholderColorProp,
+    SELECT_THEME_ROLES.placeholderColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    SELECT_THEME_ROLES.labelColor,
+  );
+  const descriptionColor = useResolvedFieldColor(
+    descriptionColorProp,
+    SELECT_THEME_ROLES.descriptionColor,
+  );
+  const borderColor = useResolvedFieldColor(
+    borderColorProp,
+    SELECT_THEME_ROLES.borderColor,
+  );
+  const errorColor = useResolvedFieldColor(
+    errorColorProp,
+    SELECT_THEME_ROLES.errorColor,
+  );
+  const selectedColor = useResolvedFieldColor(
+    selectedColorProp,
+    SELECT_THEME_ROLES.selectedColor,
+  );
+
+  const hasError = Boolean(error);
+  const selected = options.find((option) => option.value === value);
+  const display = selected?.label ?? placeholder;
+  const isPlaceholder = selected == null;
+  const borderRadius = buttonRadiusValue(radius);
+  const title = sheetTitle ?? label ?? "Select";
+  const presentIndex = resolveSelectDetentIndex(detents, initialDetent);
+
+  const dismiss = useCallback(() => {
+    void sheetRef.current?.dismiss();
+  }, []);
+
+  const present = useCallback(() => {
+    if (!editable) return;
+    void sheetRef.current?.present(presentIndex);
+  }, [editable, presentIndex]);
+
+  const resolvedClose: ReactNode =
+    typeof closeButton === "function"
+      ? closeButton(dismiss)
+      : (closeButton ?? <SelectCloseButton onPress={dismiss} />);
+
+  const onSelect = (option: SelectOption) => {
+    if (option.disabled) return;
+    onChange(option.value);
+    dismiss();
+  };
+
+  return (
+    <View style={[styles.column, !editable && styles.blocked, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
+      ) : null}
+      <Pressable
+        accessibilityHint="Opens a list of options"
+        accessibilityLabel={label ? `${label}. ${display}` : display}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !editable }}
+        disabled={!editable}
+        onPress={present}
+        style={[
+          styles.trigger,
+          {
+            backgroundColor,
+            borderColor: hasError ? errorColor : borderColor,
+            borderRadius,
+          },
+        ]}
+      >
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.triggerText,
+            { color: isPlaceholder ? placeholderColor : textColor, flex: 1 },
+          ]}
+        >
+          {display}
+        </Text>
+        <Text
+          accessibilityElementsHidden
+          importantForAccessibility="no"
+          style={[styles.chevron, { color: placeholderColor }]}
+        >
+          ›
+        </Text>
+      </Pressable>
+      {error ? (
+        <Text style={[styles.helper, { color: errorColor }]}>{error}</Text>
+      ) : description ? (
+        <Text style={[styles.helper, { color: descriptionColor }]}>
+          {description}
+        </Text>
+      ) : null}
+
+      <TrueSheet
+        ref={sheetRef}
+        backgroundColor={backgroundColor}
+        cornerRadius={buttonRadiusValue("xl")}
+        detents={detents}
+        grabber
+        scrollable
+      >
+        <View style={styles.sheetHeader}>
+          <Text
+            accessibilityRole="header"
+            numberOfLines={1}
+            style={[styles.sheetTitle, { color: textColor, flex: 1 }]}
+          >
+            {title}
+          </Text>
+          {resolvedClose}
+        </View>
+        {options.length === 0 ? (
+          <Text style={[styles.empty, { color: placeholderColor }]}>
+            No options
+          </Text>
+        ) : (
+          options.map((item) => {
+            const isSelected = item.value === value;
+            return (
+              <Pressable
+                key={item.value}
+                accessibilityRole="button"
+                accessibilityState={{
+                  selected: isSelected,
+                  disabled: !!item.disabled,
+                }}
+                disabled={item.disabled}
+                onPress={() => onSelect(item)}
+                style={[styles.option, item.disabled && styles.blocked]}
+              >
+                <Text
+                  style={[
+                    styles.optionLabel,
+                    {
+                      color: isSelected ? selectedColor : textColor,
+                      flex: 1,
+                    },
+                  ]}
+                >
+                  {item.label}
+                </Text>
+                {isSelected ? (
+                  <Text
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                    style={[styles.check, { color: selectedColor }]}
+                  >
+                    ✓
+                  </Text>
+                ) : null}
+              </Pressable>
+            );
+          })
+        )}
+      </TrueSheet>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: {
+    width: "100%",
+    gap: 6,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  trigger: {
+    minHeight: 48,
+    borderWidth: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  triggerText: {
+    fontSize: 17,
+  },
+  chevron: {
+    fontSize: 22,
+    fontWeight: "300",
+    lineHeight: 24,
+    transform: [{ rotate: "90deg" }],
+  },
+  helper: {
+    fontSize: 13,
+  },
+  sheetHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 12,
+  },
+  sheetTitle: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  empty: {
+    fontSize: 17,
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    textAlign: "center",
+  },
+  option: {
+    minHeight: 52,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  optionLabel: {
+    fontSize: 17,
+  },
+  check: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+});

package/src/components/Select/SelectCloseButton.tsx

@@ -0,0 +1,19 @@
+import { Pressable, StyleSheet, Text } from "react-native";
+import { useThemeColor } from "../../theme/useThemeColor";
+
+export function SelectCloseButton({ onPress }: { onPress: () => void }) {
+  const text = useThemeColor("text");
+
+  return (
+    <Pressable accessibilityRole="button" hitSlop={8} onPress={onPress}>
+      <Text style={[styles.label, { color: text }]}>Cancel</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+});

package/src/components/Select/index.ts

@@ -0,0 +1,13 @@
+export { Select } from "./Select";
+export { SelectCloseButton } from "./SelectCloseButton";
+export {
+  DEFAULT_SELECT_DETENTS,
+  DEFAULT_SELECT_INITIAL_DETENT,
+  resolveSelectDetentIndex,
+} from "./resolveSelectDetentIndex";
+export { SELECT_THEME_ROLES, type SelectThemeColorProp } from "./selectThemeRoles";
+export type {
+  SelectCloseButton as SelectCloseButtonProp,
+  SelectOption,
+  SelectProps,
+} from "./types";

package/src/components/Select/resolveSelectDetentIndex.test.ts

@@ -0,0 +1,20 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  DEFAULT_SELECT_DETENTS,
+  DEFAULT_SELECT_INITIAL_DETENT,
+  resolveSelectDetentIndex,
+} from "./resolveSelectDetentIndex.ts";
+
+describe("resolveSelectDetentIndex", () => {
+  it("returns the index of the initial detent", () => {
+    assert.equal(
+      resolveSelectDetentIndex(DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT),
+      1,
+    );
+  });
+
+  it("falls back to 0 when initial is missing", () => {
+    assert.equal(resolveSelectDetentIndex([0.25, 0.5, 0.75], 0.9), 0);
+  });
+});

package/src/components/Select/resolveSelectDetentIndex.ts

@@ -0,0 +1,16 @@
+/** Default sheet heights: quarter, half, three-quarter. */
+export const DEFAULT_SELECT_DETENTS = [0.25, 0.5, 0.75] as const;
+
+export const DEFAULT_SELECT_INITIAL_DETENT = 0.5;
+
+/**
+ * Resolve which detent index to present at.
+ * Falls back to 0 when `initial` is missing from `detents`.
+ */
+export function resolveSelectDetentIndex(
+  detents: readonly number[],
+  initial: number,
+): number {
+  const index = detents.indexOf(initial);
+  return index >= 0 ? index : 0;
+}

package/src/components/Select/selectThemeRoles.ts

@@ -0,0 +1,12 @@
+export const SELECT_THEME_ROLES = {
+  backgroundColor: "fieldBackground",
+  textColor: "fieldText",
+  placeholderColor: "fieldPlaceholder",
+  labelColor: "fieldLabel",
+  descriptionColor: "fieldDescription",
+  borderColor: "fieldBorder",
+  errorColor: "fieldError",
+  selectedColor: "fieldRadioSelected",
+} as const;
+
+export type SelectThemeColorProp = keyof typeof SELECT_THEME_ROLES;

package/src/components/Select/types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SelectCloseButton =
+  | ReactNode
+  | ((dismiss: () => void) => ReactNode);
+
+export type SelectProps = {
+  value: string | null;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  label?: string;
+  description?: string;
+  error?: string;
+  sheetTitle?: string;
+  /** Plain Cancel by default. Pass `(dismiss) => <Glass onPress={dismiss} />` for app chrome. */
+  closeButton?: SelectCloseButton;
+  detents?: number[];
+  initialDetent?: number;
+  radius?: ButtonRadius;
+  editable?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  placeholderColor?: string;
+  labelColor?: string;
+  descriptionColor?: string;
+  borderColor?: string;
+  errorColor?: string;
+  selectedColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/index.ts

@@ -0,0 +1,42 @@
+export {
+  Button,
+  type ButtonProps,
+  buttonRadiusValue,
+  type ButtonRadius,
+} from "./Button";
+export {
+  LinkBlocks,
+  filterLinkBlockGroups,
+  type LinkBlockGroup,
+  type LinkBlockItem,
+  type LinkBlocksProps,
+} from "./LinkBlocks";
+export {
+  FieldText,
+  FieldTextarea,
+  FIELD_THEME_ROLES,
+  type FieldThemeColorProp,
+  type FieldSharedProps,
+  type FieldTextProps,
+  type FieldTextareaProps,
+} from "./Field";
+export { Form, FormCloseButton, type FormProps } from "./Form";
+export {
+  RadioField,
+  RADIO_THEME_ROLES,
+  type RadioThemeColorProp,
+  type RadioOption,
+  type RadioFieldProps,
+} from "./RadioField";
+export {
+  Select,
+  SelectCloseButton,
+  SELECT_THEME_ROLES,
+  DEFAULT_SELECT_DETENTS,
+  DEFAULT_SELECT_INITIAL_DETENT,
+  resolveSelectDetentIndex,
+  type SelectThemeColorProp,
+  type SelectOption,
+  type SelectProps,
+  type SelectCloseButtonProp,
+} from "./Select";

package/src/index.ts

@@ -0,0 +1,50 @@
+export const version = "0.1.0";
+
+export * from "./theme";
+export {
+  Button,
+  type ButtonProps,
+  buttonRadiusValue,
+  type ButtonRadius,
+} from "./components/Button";
+export {
+  LinkBlocks,
+  filterLinkBlockGroups,
+  type LinkBlockGroup,
+  type LinkBlockItem,
+  type LinkBlocksProps,
+} from "./components/LinkBlocks";
+export {
+  FieldText,
+  FieldTextarea,
+  FIELD_THEME_ROLES,
+  type FieldThemeColorProp,
+  type FieldSharedProps,
+  type FieldTextProps,
+  type FieldTextareaProps,
+} from "./components/Field";
+export {
+  Form,
+  FormCloseButton,
+  type FormProps,
+} from "./components/Form";
+export {
+  RadioField,
+  RADIO_THEME_ROLES,
+  type RadioThemeColorProp,
+  type RadioOption,
+  type RadioFieldProps,
+} from "./components/RadioField";
+export {
+  Select,
+  SelectCloseButton,
+  SELECT_THEME_ROLES,
+  DEFAULT_SELECT_DETENTS,
+  DEFAULT_SELECT_INITIAL_DETENT,
+  resolveSelectDetentIndex,
+  type SelectThemeColorProp,
+  type SelectOption,
+  type SelectProps,
+  type SelectCloseButtonProp,
+} from "./components/Select";
+export * as components from "./components";

package/src/layout/index.ts

@@ -0,0 +1 @@
+export { screenPaddingHorizontal } from "./screenPadding";

package/src/layout/screenPadding.ts

@@ -0,0 +1,2 @@
+/** Default inset from screen edges for Form header, content, and footer. */
+export const screenPaddingHorizontal = 16;

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,20 @@
+import {
+  createContext,
+  createElement,
+  useMemo,
+  type ReactNode,
+} from "react";
+import type { ThemeColors, ThemeContextValue } from "./types";
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({
+  colors,
+  children,
+}: {
+  colors: { light: ThemeColors; dark: ThemeColors };
+  children: ReactNode;
+}) {
+  const value = useMemo(() => ({ colors }), [colors]);
+  return createElement(ThemeContext.Provider, { value }, children);
+}

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+export type { ThemeColors, ThemeContextValue } from "./types";
+export { ThemeProvider } from "./ThemeProvider";
+export { useColorScheme } from "./useColorScheme";
+export { useThemeColor } from "./useThemeColor";
+export { resolveColorScheme } from "./resolveColorScheme";

package/src/theme/resolveColorScheme.test.ts

@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { resolveColorScheme } from "./resolveColorScheme.ts";
+
+describe("resolveColorScheme", () => {
+  it("returns dark only for dark", () => {
+    assert.equal(resolveColorScheme("dark"), "dark");
+  });
+
+  it("treats everything else as light", () => {
+    assert.equal(resolveColorScheme("light"), "light");
+    assert.equal(resolveColorScheme(null), "light");
+    assert.equal(resolveColorScheme(undefined), "light");
+    assert.equal(resolveColorScheme("unspecified"), "light");
+  });
+});

package/src/theme/resolveColorScheme.ts

@@ -0,0 +1,5 @@
+export function resolveColorScheme(
+  scheme: string | null | undefined,
+): "light" | "dark" {
+  return scheme === "dark" ? "dark" : "light";
+}

package/src/theme/types.ts

@@ -0,0 +1,5 @@
+export type ThemeColors = Record<string, string>;
+
+export type ThemeContextValue = {
+  colors: { light: ThemeColors; dark: ThemeColors };
+};

package/src/theme/useColorScheme.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useColorScheme as useSystemColorScheme } from "react-native";
+import { resolveColorScheme } from "./resolveColorScheme";
+import { ThemeContext } from "./ThemeProvider";
+
+export function useColorScheme(): "light" | "dark" {
+  const ctx = useContext(ThemeContext);
+  const systemScheme = useSystemColorScheme();
+  if (!ctx) {
+    throw new Error("useColorScheme must be used within ThemeProvider");
+  }
+  return resolveColorScheme(systemScheme);
+}

package/src/theme/useThemeColor.ts

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { useColorScheme as useSystemColorScheme } from "react-native";
+import { resolveColorScheme } from "./resolveColorScheme";
+import { ThemeContext } from "./ThemeProvider";
+
+export function useThemeColor(
+  colorName: string,
+  overrides?: { light?: string; dark?: string },
+): string {
+  const ctx = useContext(ThemeContext);
+  const systemScheme = useSystemColorScheme();
+  if (!ctx) {
+    throw new Error("useThemeColor must be used within ThemeProvider");
+  }
+  const scheme = resolveColorScheme(systemScheme);
+  const override = overrides?.[scheme];
+  if (override != null) {
+    return override;
+  }
+  const value = ctx.colors[scheme][colorName];
+  if (value == null) {
+    throw new Error(`Unknown theme colour "${colorName}" for scheme "${scheme}"`);
+  }
+  return value;
+}