@studio-piot/native-ui 0.1.0

package/src/components/LinkBlocks/LinkBlocks.tsx

@@ -0,0 +1,165 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { filterLinkBlockGroups } from "./filterGroups";
+import type { LinkBlockGroup, LinkBlocksProps } from "./types";
+
+const ICON_SLOT = 28;
+const ROW_PAD_H = 16;
+
+export function LinkBlocks({
+  blocks,
+  surfaceColor,
+  labelColor,
+  dividerColor,
+  chevronColor,
+  titleColor,
+  radius = "xl",
+  style,
+}: LinkBlocksProps) {
+  const visible = filterLinkBlockGroups(blocks);
+  const borderRadius = buttonRadiusValue(radius);
+  const resolvedTitleColor = titleColor ?? labelColor;
+
+  return (
+    <View style={[styles.stack, style]}>
+      {visible.map((group) => (
+        <Group
+          key={group.key}
+          group={group}
+          surfaceColor={surfaceColor}
+          labelColor={labelColor}
+          dividerColor={dividerColor}
+          chevronColor={chevronColor}
+          titleColor={resolvedTitleColor}
+          borderRadius={borderRadius}
+        />
+      ))}
+    </View>
+  );
+}
+
+function Group({
+  group,
+  surfaceColor,
+  labelColor,
+  dividerColor,
+  chevronColor,
+  titleColor,
+  borderRadius,
+}: {
+  group: LinkBlockGroup;
+  surfaceColor: string;
+  labelColor: string;
+  dividerColor: string;
+  chevronColor: string;
+  titleColor: string;
+  borderRadius: number;
+}) {
+  const showIconSlot = group.items.some((item) => item.icon != null);
+  const dividerInset = ROW_PAD_H + (showIconSlot ? ICON_SLOT + 12 : 0);
+
+  return (
+    <View style={styles.group}>
+      {group.title ? (
+        <Text style={[styles.title, { color: titleColor }]}>{group.title}</Text>
+      ) : null}
+      <View
+        style={[
+          styles.surface,
+          { backgroundColor: surfaceColor, borderRadius },
+        ]}
+      >
+        {group.items.map((item, index) => (
+          <View key={item.key}>
+            {index > 0 ? (
+              <View
+                style={[
+                  styles.divider,
+                  {
+                    backgroundColor: dividerColor,
+                    marginLeft: dividerInset,
+                  },
+                ]}
+              />
+            ) : null}
+            <TouchableOpacity
+              accessibilityLabel={item.label}
+              accessibilityRole="button"
+              accessibilityState={{ disabled: !!item.disabled }}
+              activeOpacity={0.75}
+              disabled={item.disabled}
+              onPress={item.onPress}
+              style={[styles.row, item.disabled && styles.blocked]}
+            >
+              {showIconSlot ? (
+                <View style={styles.iconSlot}>{item.icon ?? null}</View>
+              ) : null}
+              <Text style={[styles.label, { color: labelColor, flex: 1 }]}>
+                {item.label}
+              </Text>
+              <Text
+                accessibilityElementsHidden
+                importantForAccessibility="no"
+                selectable={false}
+                style={[styles.chevron, { color: chevronColor }]}
+              >
+                ›
+              </Text>
+            </TouchableOpacity>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stack: {
+    width: "100%",
+    gap: 16,
+  },
+  group: {
+    width: "100%",
+    gap: 8,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingHorizontal: 4,
+  },
+  surface: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  row: {
+    minHeight: 52,
+    paddingHorizontal: ROW_PAD_H,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  iconSlot: {
+    width: ICON_SLOT,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    fontSize: 17,
+  },
+  chevron: {
+    fontSize: 22,
+    fontWeight: "300",
+    lineHeight: 24,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+  },
+});

package/src/components/LinkBlocks/filterGroups.test.ts

@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { filterLinkBlockGroups } from "./filterGroups.ts";
+import type { LinkBlockGroup } from "./types.ts";
+
+describe("filterLinkBlockGroups", () => {
+  it("drops groups with empty items", () => {
+    const blocks: LinkBlockGroup[] = [
+      { key: "a", title: "A", items: [] },
+      {
+        key: "b",
+        items: [{ key: "1", label: "One", onPress: () => undefined }],
+      },
+    ];
+    const next = filterLinkBlockGroups(blocks);
+    assert.equal(next.length, 1);
+    assert.equal(next[0]?.key, "b");
+  });
+
+  it("keeps titled and untitled non-empty groups in order", () => {
+    const blocks: LinkBlockGroup[] = [
+      {
+        key: "t",
+        title: "Settings",
+        items: [{ key: "1", label: "One", onPress: () => undefined }],
+      },
+      {
+        key: "u",
+        items: [{ key: "2", label: "Two", onPress: () => undefined }],
+      },
+    ];
+    assert.deepEqual(
+      filterLinkBlockGroups(blocks).map((g) => g.key),
+      ["t", "u"],
+    );
+  });
+});

package/src/components/LinkBlocks/filterGroups.ts

@@ -0,0 +1,7 @@
+import type { LinkBlockGroup } from "./types";
+
+export function filterLinkBlockGroups(
+  blocks: LinkBlockGroup[],
+): LinkBlockGroup[] {
+  return blocks.filter((group) => group.items.length > 0);
+}

package/src/components/LinkBlocks/index.ts

@@ -0,0 +1,7 @@
+export { LinkBlocks } from "./LinkBlocks";
+export type {
+  LinkBlockGroup,
+  LinkBlockItem,
+  LinkBlocksProps,
+} from "./types";
+export { filterLinkBlockGroups } from "./filterGroups";

package/src/components/LinkBlocks/types.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type LinkBlockItem = {
+  key: string;
+  label: string;
+  onPress: () => void;
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+
+export type LinkBlockGroup = {
+  key: string;
+  title?: string;
+  items: LinkBlockItem[];
+};
+
+export type LinkBlocksProps = {
+  blocks: LinkBlockGroup[];
+  surfaceColor: string;
+  labelColor: string;
+  dividerColor: string;
+  chevronColor: string;
+  titleColor?: string;
+  radius?: ButtonRadius;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/RadioField/RadioField.tsx

@@ -0,0 +1,168 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { RadioMark } from "./RadioMark";
+import { RADIO_THEME_ROLES } from "./radioThemeRoles";
+import type { RadioFieldProps } from "./types";
+
+const ROW_PAD_H = 16;
+
+export function RadioField<T extends string = string>({
+  value,
+  onChange,
+  options,
+  label,
+  radius = "xl",
+  backgroundColor: backgroundColorProp,
+  labelColor: labelColorProp,
+  descriptionColor: descriptionColorProp,
+  dividerColor: dividerColorProp,
+  radioColor: radioColorProp,
+  selectedColor: selectedColorProp,
+  titleColor: titleColorProp,
+  style,
+}: RadioFieldProps<T>) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    RADIO_THEME_ROLES.backgroundColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    RADIO_THEME_ROLES.labelColor,
+  );
+  const descriptionColor = useResolvedFieldColor(
+    descriptionColorProp,
+    RADIO_THEME_ROLES.descriptionColor,
+  );
+  const dividerColor = useResolvedFieldColor(
+    dividerColorProp,
+    RADIO_THEME_ROLES.dividerColor,
+  );
+  const radioColor = useResolvedFieldColor(
+    radioColorProp,
+    RADIO_THEME_ROLES.radioColor,
+  );
+  const selectedColor = useResolvedFieldColor(
+    selectedColorProp,
+    RADIO_THEME_ROLES.selectedColor,
+  );
+  const titleColor = useResolvedFieldColor(
+    titleColorProp,
+    RADIO_THEME_ROLES.titleColor,
+  );
+  const borderRadius = buttonRadiusValue(radius);
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.group, style]}>
+      {label ? (
+        <Text style={[styles.title, { color: titleColor }]}>{label}</Text>
+      ) : null}
+      <View
+        accessibilityRole="radiogroup"
+        {...(label ? { accessibilityLabel: label } : {})}
+        style={[
+          styles.surface,
+          { backgroundColor, borderRadius },
+        ]}
+      >
+        {options.map((option, index) => {
+          const selected = value === option.value;
+          return (
+            <View key={option.value}>
+              {index > 0 ? (
+                <View
+                  style={[styles.divider, { backgroundColor: dividerColor }]}
+                />
+              ) : null}
+              <TouchableOpacity
+                accessibilityLabel={
+                  option.description
+                    ? `${option.label}. ${option.description}`
+                    : option.label
+                }
+                accessibilityRole="radio"
+                accessibilityState={{
+                  selected,
+                  checked: selected,
+                  disabled: !!option.disabled,
+                }}
+                activeOpacity={0.75}
+                disabled={option.disabled}
+                onPress={() => onChange(option.value)}
+                style={[styles.row, option.disabled && styles.blocked]}
+              >
+                <View style={styles.textCol}>
+                  <Text style={[styles.label, { color: labelColor }]}>
+                    {option.label}
+                  </Text>
+                  {option.description ? (
+                    <Text
+                      style={[styles.description, { color: descriptionColor }]}
+                    >
+                      {option.description}
+                    </Text>
+                  ) : null}
+                </View>
+                <RadioMark
+                  holeColor={backgroundColor}
+                  radioColor={radioColor}
+                  selected={selected}
+                  selectedColor={selectedColor}
+                />
+              </TouchableOpacity>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    gap: 8,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingHorizontal: 4,
+  },
+  surface: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  row: {
+    minHeight: 52,
+    paddingHorizontal: ROW_PAD_H,
+    paddingVertical: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  textCol: {
+    flex: 1,
+    gap: 2,
+  },
+  label: {
+    fontSize: 17,
+  },
+  description: {
+    fontSize: 13,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+  },
+});

package/src/components/RadioField/RadioMark.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet, View } from "react-native";
+
+const SIZE = 22;
+const DOT = 8;
+
+export function RadioMark({
+  selected,
+  radioColor,
+  selectedColor,
+  holeColor,
+}: {
+  selected: boolean;
+  radioColor: string;
+  selectedColor: string;
+  holeColor: string;
+}) {
+  if (selected) {
+    return (
+      <View
+        accessibilityElementsHidden
+        importantForAccessibility="no"
+        style={[
+          styles.outer,
+          { backgroundColor: selectedColor, borderColor: selectedColor },
+        ]}
+      >
+        <View style={[styles.dot, { backgroundColor: holeColor }]} />
+      </View>
+    );
+  }
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+      style={[styles.outer, { borderColor: radioColor }]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+  },
+});

package/src/components/RadioField/index.ts

@@ -0,0 +1,3 @@
+export { RadioField } from "./RadioField";
+export { RADIO_THEME_ROLES, type RadioThemeColorProp } from "./radioThemeRoles";
+export type { RadioOption, RadioFieldProps } from "./types";

package/src/components/RadioField/radioThemeRoles.test.ts

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { RADIO_THEME_ROLES } from "./radioThemeRoles.ts";
+
+describe("RADIO_THEME_ROLES", () => {
+  it("maps colour props to Field roles plus fieldRadioSelected", () => {
+    assert.equal(RADIO_THEME_ROLES.backgroundColor, "fieldBackground");
+    assert.equal(RADIO_THEME_ROLES.labelColor, "fieldText");
+    assert.equal(RADIO_THEME_ROLES.descriptionColor, "fieldDescription");
+    assert.equal(RADIO_THEME_ROLES.dividerColor, "fieldBorder");
+    assert.equal(RADIO_THEME_ROLES.radioColor, "fieldBorder");
+    assert.equal(RADIO_THEME_ROLES.selectedColor, "fieldRadioSelected");
+    assert.equal(RADIO_THEME_ROLES.titleColor, "fieldLabel");
+  });
+});

package/src/components/RadioField/radioThemeRoles.ts

@@ -0,0 +1,11 @@
+export const RADIO_THEME_ROLES = {
+  backgroundColor: "fieldBackground",
+  labelColor: "fieldText",
+  descriptionColor: "fieldDescription",
+  dividerColor: "fieldBorder",
+  radioColor: "fieldBorder",
+  selectedColor: "fieldRadioSelected",
+  titleColor: "fieldLabel",
+} as const;
+
+export type RadioThemeColorProp = keyof typeof RADIO_THEME_ROLES;

package/src/components/RadioField/types.ts

@@ -0,0 +1,25 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type RadioOption<T extends string = string> = {
+  value: T;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+};
+
+export type RadioFieldProps<T extends string = string> = {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: RadioOption<T>[];
+  label?: string;
+  radius?: ButtonRadius;
+  backgroundColor?: string;
+  labelColor?: string;
+  descriptionColor?: string;
+  dividerColor?: string;
+  radioColor?: string;
+  selectedColor?: string;
+  titleColor?: string;
+  style?: StyleProp<ViewStyle>;
+};