@oxy.so/bloom 4.0.0 → 4.2.0

package/src/settings-modal/SettingsModal.tsx

@@ -26,9 +26,10 @@ import Animated, {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
+import { PageHeader } from '../page-header';
+import { ButtonGroup, ButtonGroupItem } from '../button-group';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { VerticalFade } from './SettingsArt';
 import { Backdrop, OverlayRoot } from '../overlay';
@@ -58,9 +59,7 @@ import { IS_WEB, useSettingsWebCss } from './web-css';
  *             20px icon (icon/secondary) + 8 + body-medium label
  *             (selected: background/secondary/hover + text/primary;
  *             hover: background/secondary/hover @ 60%)
- *   content   title row px 32 pt 32 pb 12 (Storage 6), title-3-medium +
- *             24px round close (background/tertiary, hover tertiary/hover,
- *             16px glyph); the page scrolls under a 40px top fade that eases
+ *   content   shared inline PageHeader and close ButtonGroup island; the page scrolls under a 40px top fade that eases
  *             in (200ms) once it is scrolled; px 32 pb 32
  *   toast     "Saved" pill straddling the panel's bottom edge: 1px
  *             border/button, background/primary, py 4 pr 10 pl 6, gap 4,
@@ -133,6 +132,7 @@ export function SettingsModal({
   page: controlledPage,
   defaultPage,
   onPageChange,
+  initialView = 'navigation',
   labels,
   testID,
 }: SettingsModalProps) {
@@ -156,7 +156,9 @@ export function SettingsModal({
   const insets = useSafeAreaInsets();
 
   // `compact` layout is two levels: the section list, then a page pushed over it.
-  const [compactPageOpen, setCompactPageOpen] = useState(false);
+  const [compactPageOpen, setCompactPageOpen] = useState(initialView === 'page');
+  const initialViewRef = useRef(initialView);
+  initialViewRef.current = initialView;
 
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -167,7 +169,7 @@ export function SettingsModal({
 
   const show = useCallback(() => {
     setInternalPage(defaultPageRef.current);
-    setCompactPageOpen(false);
+    setCompactPageOpen(initialViewRef.current === 'page');
     setMounted(true);
     setOpenCount((count) => count + 1);
   }, []);
@@ -398,7 +400,7 @@ export function SettingsModal({
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>
-                        <CompactHeader
+                        <SettingsHeader
                           title={pageConfig.title}
                           onBack={() => setCompactPageOpen(false)}
                           backLabel={labels?.back ?? 'Back'}
@@ -419,7 +421,7 @@ export function SettingsModal({
                       </View>
                     ) : (
                       <View style={styles.content}>
-                        <CompactHeader
+                        <SettingsHeader
                           title={labels?.dialog ?? 'Settings'}
                           closeLabel={closeLabel}
                           onClose={requestClose}
@@ -449,36 +451,18 @@ export function SettingsModal({
                         testID={testID}
                       />
                       <View style={styles.content}>
-                        <View
-                          style={[
-                            styles.titleRow,
-                            {
-                              paddingLeft: CONTENT_INSET[layout],
-                              paddingRight: CONTENT_INSET[layout],
-                              paddingTop: CONTENT_INSET[layout],
-                              paddingBottom: pageConfig?.compactTitle ? 6 : 12,
-                            },
-                          ]}
-                          testID={testID ? `${testID}-title-row` : undefined}
-                        >
-                          <Text
-                            variant="title-3-medium"
-                            role="heading"
-                            style={{ color: palette.text }}
-                          >
-                            {pageConfig?.title ?? ''}
-                          </Text>
-                          <SettingsCloseButton
-                            label={closeLabel}
-                            onPress={requestClose}
-                            palette={palette}
-                            testID={testID ? `${testID}-close` : undefined}
-                          />
-                        </View>
+                        <SettingsHeader
+                          title={pageConfig?.title ?? ''}
+                          closeLabel={closeLabel}
+                          onClose={requestClose}
+                          palette={palette}
+                          testID={testID}
+                        />
                         <PageScroller
                           key={currentPage}
                           palette={palette}
                           inset={CONTENT_INSET[layout]}
+                          insetTop={pageConfig?.compactTitle ? 6 : 12}
                           testID={testID}
                         >
                           {pageConfig?.content}
@@ -638,42 +622,8 @@ function RailRow({
 //  Close button, scroller, toast
 // ---------------------------------------------------------------------------
 
-function SettingsCloseButton({
-  label,
-  onPress,
-  palette,
-  testID,
-}: {
-  label: string;
-  onPress: () => void;
-  palette: SettingsPalette;
-  testID?: string;
-}) {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable
-      role="button"
-      accessibilityLabel={label}
-      {...webDataSet({ bloomSettingsPress: '' })}
-      onPress={onPress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-      testID={testID}
-      style={[
-        styles.close,
-        { backgroundColor: hovered ? palette.tertiaryHover : palette.tertiary },
-      ]}
-    >
-      <RiCloseLine width={16} height={16} fill={palette.iconSecondary} />
-    </Pressable>
-  );
-}
-
-/**
- * The `compact` title bar: optional back chevron, the title, the close button —
- * 56px, the page's 16px inset, hairline under it.
- */
-function CompactHeader({
+/** Shared header on every layout; the modal already owns safe-area insets. */
+function SettingsHeader({
   title,
   onBack,
   backLabel,
@@ -690,39 +640,34 @@ function CompactHeader({
   palette: SettingsPalette;
   testID?: string;
 }) {
+  // Inline chrome does not reveal with scroll. An explicit local offset keeps
+  // the page behind the modal from influencing this header's paint or title.
+  const scrollY = useSharedValue(0);
   return (
-    <View
-      style={[styles.compactHeader, { borderBottomColor: palette.separator }]}
-      testID={testID ? `${testID}-title-row` : undefined}
-    >
-      {onBack ? (
-        <Pressable
-          role="button"
-          accessibilityLabel={backLabel}
-          {...webDataSet({ bloomSettingsPress: '' })}
-          onPress={onBack}
-          hitSlop={8}
-          testID={testID ? `${testID}-back` : undefined}
-          style={styles.compactBack}
-        >
-          <RiArrowLeftSLine width={24} height={24} fill={palette.text} />
-        </Pressable>
-      ) : null}
-      <Text
-        variant="headline-medium"
-        role="heading"
-        numberOfLines={1}
-        style={[styles.compactTitle, { color: palette.text }]}
-      >
-        {title}
-      </Text>
-      <SettingsCloseButton
-        label={closeLabel}
-        onPress={onClose}
-        palette={palette}
-        testID={testID ? `${testID}-close` : undefined}
-      />
-    </View>
+    <PageHeader
+      title={title}
+      headingLevel={2}
+      onBack={onBack}
+      backLabel={backLabel}
+      safeArea={false}
+      sticky={false}
+      placement="inline"
+      scrim="none"
+      scrimColor={palette.full}
+      scrollY={scrollY}
+      actions={
+        <ButtonGroup accessibilityLabel={closeLabel}>
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiCloseLine}
+            accessibilityLabel={closeLabel}
+            onPress={onClose}
+            testID={testID ? `${testID}-close` : undefined}
+          />
+        </ButtonGroup>
+      }
+      testID={testID ? `${testID}-header` : undefined}
+    />
   );
 }
 
@@ -736,7 +681,7 @@ function PageScroller({
   children: React.ReactNode;
   palette: SettingsPalette;
   inset: number;
-  /** Top inset — only the compact page, which has no title row above its content. */
+  /** Content gap below PageHeader; desktop Storage uses the compact 6px gap. */
   insetTop?: number;
   testID?: string;
 }) {
@@ -865,27 +810,6 @@ const styles = StyleSheet.create({
   railChevron: {
     marginLeft: 'auto',
   },
-  compactHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    height: 56,
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderBottomWidth: 1,
-  },
-  compactBack: {
-    width: 32,
-    height: 32,
-    marginLeft: -8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 9999,
-  },
-  compactTitle: {
-    flex: 1,
-    minWidth: 0,
-  },
   panel: {
     flexDirection: 'row',
     borderRadius: 24,
@@ -924,18 +848,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
-  titleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  close: {
-    width: 24,
-    height: 24,
-    borderRadius: 9999,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   scrollHost: {
     flex: 1,
     minHeight: 0,

package/src/settings-modal/types.ts

@@ -33,11 +33,11 @@ export interface SettingsNavGroup {
 
 /** One page of the content pane. */
 export interface SettingsModalPage {
-  /** Heading of the fixed title row. */
+  /** Heading of the shared PageHeader. */
   title: string;
   content: ReactNode;
   /**
-   * Used on the Storage page: a 6px title gap instead of 12px, because the page
+   * Used on the Storage page: a 6px gap below PageHeader instead of 12px, because the page
    * already carries 10px of headroom for the dropzone's progress badge.
    */
   compactTitle?: boolean;
@@ -73,6 +73,8 @@ export interface SettingsModalProps {
   /** Page selected every time the modal opens. Defaults to the first navigable row. */
   defaultPage?: string;
   onPageChange?: (page: string) => void;
+  /** Compact layout: start at the section list (default) or open the selected page directly. Resets on each open. */
+  initialView?: 'navigation' | 'page';
   labels?: SettingsModalLabels;
   testID?: string;
 }

package/src/shipment-request/ShipmentLoadPicker.tsx

@@ -0,0 +1,217 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useContainerWidth } from '../hooks/use-container-width';
+import { resolveSelectionPaint, SelectionCard } from '../listing-editor/SelectionCard';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { StepperRow } from '../stepper';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel, TextFieldSuffix } from '../text-field';
+import { Textarea } from '../textarea';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { SHIPMENT_LOAD_KINDS, SHIPMENT_LOAD_LABELS, SHIPMENT_LOAD_SIZES, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { joinShipmentName, sanitizeWeight } from './shared';
+import type { ShipmentLoadPickerProps, ShipmentLoadSize } from './types';
+
+/**
+ * What is being moved, how big it is, how heavy and how many.
+ *
+ *   kind      the editor's selectable cards, one answer: a 44 icon tile, the
+ *             kind at `headline-semibold`, what it covers under it, a radio
+ *             indicator on the right
+ *   size      a `SegmentedControl` of single letters, with the chosen rung's
+ *             sentence under it — four words never fit in one control at phone
+ *             width, and a control whose every option carries a sentence is a
+ *             list, not a segmented control
+ *   weight    a `TextField` with its unit as a `TextFieldSuffix`, beside the
+ *             quantity from 480 wide and stacked under it below
+ *   quantity  a `StepperRow` from 1
+ *   notes     an auto-resizing `Textarea`, drawn only when asked for
+ *
+ * **THE VALUE IS ONE OBJECT AND IT ARRIVES WHOLE.** `onValueChange` is called
+ * with the next `ShipmentLoad`, never with a patch: a form that merges patches
+ * in four places has four chances to drop a field, and this one has none.
+ *
+ * **THE UNIT IS NOT PART OF THE VALUE.** `weight` holds digits and at most one
+ * dot (`sanitizeWeight`), so an app parses a number; the "kg" beside it is
+ * drawn, announced, and never stored.
+ *
+ * Validation is the app's. `errors` is keyed by field and each message sits
+ * under its own control, in the error colour — the kind's under the cards.
+ */
+
+function ShipmentLoadPickerComponent({
+  value,
+  onValueChange,
+  kinds = SHIPMENT_LOAD_KINDS,
+  sizes = SHIPMENT_LOAD_SIZES,
+  notes = false,
+  maxQuantity = 20,
+  errors = {},
+  labels: labelOverrides,
+  disabled = false,
+  style,
+  testID,
+}: ShipmentLoadPickerProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const labels = useMemo(() => ({ ...SHIPMENT_LOAD_LABELS, ...labelOverrides }), [labelOverrides]);
+  const { width, onLayout } = useContainerWidth();
+  const wide = width === null || width >= SHIPMENT_REQUEST_GEOMETRY.narrowWidth;
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const chosenSize = sizes.find((size) => size.value === value.size);
+
+  return (
+    <View
+      testID={testID}
+      onLayout={onLayout}
+      style={[{ gap: SHIPMENT_REQUEST_GEOMETRY.controlGap }, style]}
+    >
+      <View style={{ gap: 8 }}>
+        <TextFieldLabel>{labels.kind}</TextFieldLabel>
+        <View
+          role="radiogroup"
+          accessibilityLabel={labels.kind}
+          style={{ gap: 12 }}
+          testID={id('kind')}
+        >
+          {kinds.map((kind) => (
+            <SelectionCard
+              key={kind.value}
+              selection="single"
+              selected={value.kind === kind.value}
+              onPress={() => {
+                if (value.kind !== kind.value) onValueChange({ ...value, kind: kind.value });
+              }}
+              title={kind.label}
+              description={kind.description}
+              icon={kind.icon}
+              compact={!wide}
+              disabled={disabled || kind.disabled === true}
+              accessibilityLabel={joinShipmentName([kind.label, kind.description])}
+              testID={id(`kind-${kind.value}`)}
+            />
+          ))}
+        </View>
+        {errors.kind ? (
+          <TextFieldHint isInvalid>{errors.kind}</TextFieldHint>
+        ) : null}
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <TextFieldLabel>{labels.size}</TextFieldLabel>
+        {/* `''` is "nothing chosen yet": the control's value is required, and a
+            sentinel that matches no segment is the honest way to say a
+            single-choice control has not been answered. */}
+        <SegmentedControl<ShipmentLoadSize | ''>
+          type="radio"
+          label={labels.size}
+          value={value.size ?? ''}
+          onValueChange={(size) => {
+            if (size !== '') onValueChange({ ...value, size });
+          }}
+          disabled={disabled}
+          style={{ alignSelf: 'stretch' }}
+          testID={id('size')}
+        >
+          {sizes.map((size) => (
+            <SegmentedControlItem
+              key={size.value}
+              value={size.value}
+              disabled={disabled || size.disabled}
+              accessibilityLabel={joinShipmentName([size.label, size.detail])}
+              testID={id(`size-${size.value}`)}
+            >
+              <SegmentedControlItemText>{size.label}</SegmentedControlItemText>
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+        {chosenSize?.detail ? (
+          <Text
+            variant="body-2-regular"
+            style={{ color: paint.textSecondary }}
+            testID={id('size-detail')}
+          >
+            {chosenSize.detail}
+          </Text>
+        ) : null}
+        {errors.size ? (
+          <TextFieldHint isInvalid>{errors.size}</TextFieldHint>
+        ) : null}
+      </View>
+
+      <View
+        style={{
+          flexDirection: wide ? 'row' : 'column',
+          // The stepper has no label above it, so on a wide form the two
+          // columns line up on their BOTTOM edge — the field and the counter,
+          // not the field and the word above it.
+          alignItems: wide ? 'flex-end' : 'stretch',
+          gap: SHIPMENT_REQUEST_GEOMETRY.controlGap,
+        }}
+      >
+        <View
+          style={[
+            { gap: 8 },
+            wide ? { width: SHIPMENT_REQUEST_GEOMETRY.weightWidth } : null,
+          ]}
+        >
+          <TextFieldLabel>{labels.weight}</TextFieldLabel>
+          <TextField isInvalid={!!errors.weight} disabled={disabled}>
+            <TextFieldInput
+              label={labels.weight}
+              placeholder={null}
+              value={value.weight}
+              onChangeText={(text) => onValueChange({ ...value, weight: sanitizeWeight(text) })}
+              keyboardType="decimal-pad"
+              inputMode="decimal"
+              isInvalid={!!errors.weight}
+              disabled={disabled}
+              testID={id('weight')}
+            />
+            <TextFieldSuffix label={labels.weightUnit}>{labels.weightUnit}</TextFieldSuffix>
+          </TextField>
+          {errors.weight ? (
+            <TextFieldHint isInvalid>{errors.weight}</TextFieldHint>
+          ) : null}
+        </View>
+
+        <View style={{ flex: wide ? 1 : undefined, minWidth: 0, gap: 8 }}>
+          <StepperRow
+            title={labels.quantity}
+            value={value.quantity}
+            onValueChange={(quantity) => onValueChange({ ...value, quantity })}
+            min={1}
+            max={maxQuantity}
+            formatValue={labels.quantityValue}
+            size="small"
+            disabled={disabled}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+            testID={id('quantity')}
+          />
+          {errors.quantity ? (
+            <TextFieldHint isInvalid>{errors.quantity}</TextFieldHint>
+          ) : null}
+        </View>
+      </View>
+
+      {notes ? (
+        <Textarea
+          label={labels.notes}
+          placeholder={labels.notesPlaceholder}
+          value={value.notes ?? ''}
+          onChangeText={(text) => onValueChange({ ...value, notes: text })}
+          rows={3}
+          autoResize
+          maxRows={6}
+          disabled={disabled}
+          testID={id('notes')}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const ShipmentLoadPicker = memo(ShipmentLoadPickerComponent);
+ShipmentLoadPicker.displayName = 'ShipmentLoadPicker';