@terreno/ui 0.0.1

package/dist/useStoredState.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Unifier } from "./Unifier";
+export const useStoredState = (key, initialValue) => {
+    const [state, setState] = useState(initialValue);
+    const [isLoading, setIsLoading] = useState(true);
+    const isMounted = useRef(true);
+    // Function to fetch data from AsyncStorage
+    const fetchData = useCallback(async () => {
+        try {
+            return await Unifier.storage.getItem(key);
+        }
+        catch (error) {
+            console.error("Error reading data from AsyncStorage:", error);
+            return initialValue;
+        }
+    }, [initialValue, key]);
+    // Fetch data when the component mounts
+    useEffect(() => {
+        void fetchData()
+            .then((value) => {
+            if (isMounted.current) {
+                setState(value);
+                setIsLoading(false);
+            }
+        })
+            .catch((error) => {
+            console.error("Error fetching data:", error);
+            if (isMounted.current) {
+                setIsLoading(false);
+            }
+        });
+        return () => {
+            isMounted.current = false;
+        };
+    }, [fetchData]);
+    const setAsyncStorageState = async (newValue) => {
+        try {
+            await Unifier.storage.setItem(key, newValue);
+            if (isMounted.current) {
+                setState(newValue);
+            }
+        }
+        catch (error) {
+            console.error("Error writing data to AsyncStorage:", error);
+        }
+    };
+    return [state, setAsyncStorageState, isLoading];
+};
+//# sourceMappingURL=useStoredState.js.map

package/dist/useStoredState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoredState.js","sourceRoot":"","sources":["../src/useStoredState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAW,EACX,YAAgB,EACmD,EAAE;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE/B,2CAA2C;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAA4B,EAAE;QAC/D,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC5C,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,OAAO,YAAY,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,SAAS,EAAE;aACb,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YACd,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,oBAAoB,GAAG,KAAK,EAAE,QAAuB,EAAiB,EAAE;QAC5E,IAAI,CAAC;YACH,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAClD,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
+  "dependencies": {
+    "@expo-google-fonts/nunito": "^0.4.2",
+    "@expo-google-fonts/titillium-web": "^0.4.1",
+    "@expo/vector-icons": "catalog:",
+    "@react-native-async-storage/async-storage": "catalog:",
+    "@react-native-community/blur": "^4.4.0",
+    "@react-native-community/datetimepicker": "catalog:",
+    "@react-native-community/slider": "catalog:",
+    "@react-native-picker/picker": "catalog:",
+    "emoji-datasource": "^16.0.0",
+    "expo-clipboard": "~8.0.8",
+    "expo-font": "~14.0.10",
+    "expo-haptics": "~15.0.8",
+    "expo-image-manipulator": "~14.0.8",
+    "expo-image-picker": "~17.0.9",
+    "expo-linear-gradient": "~15.0.8",
+    "expo-localization": "~17.0.8",
+    "libphonenumber-js": "^1.12.31",
+    "lodash": "catalog:",
+    "luxon": "catalog:",
+    "react-app-polyfill": "^3.0.0",
+    "react-date-picker": "^12.0.1",
+    "react-datetime-picker": "^7.0.1",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "catalog:",
+    "react-keyed-flatten-children": "^5.1.1",
+    "react-native": "catalog:",
+    "react-native-actions-sheet": "catalog:",
+    "react-native-calendars": "catalog:",
+    "react-native-drawer-layout": "catalog:",
+    "react-native-gesture-handler": "catalog:",
+    "react-native-google-places-autocomplete": "^2.6.1",
+    "react-native-markdown-display": "catalog:",
+    "react-native-modalize": "catalog:",
+    "react-native-permissions": "^5.4.4",
+    "react-native-picker-select": "^9.1.3",
+    "react-native-portalize": "catalog:",
+    "react-native-reanimated": "catalog:",
+    "react-native-signature-canvas": "catalog:",
+    "react-native-svg": "catalog:",
+    "react-native-swiper-flatlist": "catalog:",
+    "react-native-toast-notifications": "catalog:",
+    "react-native-webview": "catalog:",
+    "react-native-worklets": "catalog:",
+    "react-signature-canvas": "^1.1.0-alpha.2",
+    "react-time-picker": "^7.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "catalog:",
+    "@expo/config-plugins": "catalog:",
+    "@happy-dom/global-registrator": "^17.4.4",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/bun": "^1.2.6",
+    "@types/lodash": "catalog:",
+    "@types/luxon": "catalog:",
+    "@types/mdurl": "^2.0.0",
+    "@types/minimatch": "^6.0.0",
+    "@types/react": "catalog:",
+    "@types/react-datetime-picker": "^5.0.0",
+    "@types/react-signature-canvas": "^1.0.5",
+    "@types/react-time-picker": "^6.0.0",
+    "babel-preset-react-app": "^10.0.1",
+    "expo-modules-core": "^3.0.29",
+    "mdurl": "^2.0.0",
+    "prettier": "catalog:",
+    "react": "catalog:",
+    "react-router": "catalog:",
+    "react-router-dom": "catalog:",
+    "tsc-watch": "^7.1.1",
+    "typescript": "catalog:"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "name": "@terreno/ui",
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-router": "catalog:",
+    "react-router-dom": "catalog:"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "bracketSpacing": false,
+    "printWidth": 100,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "scripts": {
+    "compile": "tsc",
+    "dev": "tsc -w",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "lint:unsafefix": "biome check --write --unsafe .",
+    "local": "tsc-watch --onSuccess \"cp -a dist/* ../flourish/node_modules/@terreno/ui/dist\"",
+    "test": "TZ=America/New_York bun test --watch",
+    "test:ci": "TZ=America/New_York bun test",
+    "types": "bunx typedoc"
+  },
+  "version": "0.0.1"
+}

package/src/Accordion.test.tsx

@@ -0,0 +1,104 @@
+import {describe, expect, it} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+import {Text} from "react-native";
+
+import {Accordion} from "./Accordion";
+import {renderWithTheme} from "./test-utils";
+
+describe("Accordion", () => {
+  const defaultProps = {
+    children: <Text testID="test-content">Test Content</Text>,
+    title: "Test Title",
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Accordion {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders title and children", () => {
+    const {getByText, getByTestId} = renderWithTheme(
+      <Accordion {...defaultProps} isCollapsed={false} />
+    );
+    expect(getByText("Test Title")).toBeTruthy();
+    expect(getByTestId("test-content")).toBeTruthy();
+  });
+
+  it("renders subtitle when provided", () => {
+    const {getByText} = renderWithTheme(<Accordion {...defaultProps} subtitle="Test Subtitle" />);
+    expect(getByText("Test Subtitle")).toBeTruthy();
+  });
+
+  it("collapses when isCollapsed is true", () => {
+    const {queryByTestId} = renderWithTheme(<Accordion {...defaultProps} isCollapsed />);
+    expect(queryByTestId("test-content")).toBeNull();
+  });
+
+  it("expands when isCollapsed is false", () => {
+    const {getByTestId} = renderWithTheme(<Accordion {...defaultProps} isCollapsed={false} />);
+    expect(getByTestId("test-content")).toBeTruthy();
+  });
+
+  it("toggles visibility when header is pressed", () => {
+    const {queryByTestId, getByTestId} = renderWithTheme(
+      <Accordion {...defaultProps} isCollapsed={false} />
+    );
+
+    // Content should be visible initially
+    expect(getByTestId("test-content")).toBeTruthy();
+
+    // Click the toggle button
+    const toggleButton = getByTestId("accordion-toggle");
+    fireEvent.press(toggleButton);
+
+    // Content should be hidden after click
+    expect(queryByTestId("test-content")).toBeNull();
+  });
+
+  it("renders info modal icon when includeInfoModal is true and infoModalTitle is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <Accordion {...defaultProps} includeInfoModal infoModalTitle="Test Info Title" />
+    );
+
+    // The info modal icon should be present
+    expect(getByTestId("info-icon")).toBeTruthy();
+  });
+
+  it("toggles content visibility when header is clicked", () => {
+    const {getByTestId, queryByText, getByText} = renderWithTheme(
+      <Accordion {...defaultProps} isCollapsed={false} />
+    );
+
+    // Content should be visible initially
+    expect(queryByText("Test Content")).toBeTruthy();
+
+    // Click the header to collapse
+    const toggleButton = getByTestId("accordion-toggle");
+    fireEvent.press(toggleButton);
+
+    // Content should be hidden after click
+    expect(queryByText("Test Content")).toBeNull();
+
+    // Click again to expand
+    fireEvent.press(toggleButton);
+    expect(getByText("Test Content")).toBeTruthy();
+  });
+
+  it("renders info modal icon when includeInfoModal is true and infoModalTitle is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <Accordion {...defaultProps} includeInfoModal infoModalTitle="Info Title" />
+    );
+
+    // The info modal icon should be present
+    expect(getByTestId("info-icon")).toBeTruthy();
+  });
+
+  it("does not render info modal icon when includeInfoModal is false", () => {
+    const {queryByTestId} = renderWithTheme(
+      <Accordion {...defaultProps} includeInfoModal={false} infoModalTitle="Info Title" />
+    );
+
+    // The info modal icon should not be present
+    expect(queryByTestId("info-icon")).toBeNull();
+  });
+});

package/src/Accordion.tsx

@@ -0,0 +1,81 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
+import {type FC, useEffect, useState} from "react";
+import {Pressable, View} from "react-native";
+
+import type {AccordionProps} from "./Common";
+import {Heading} from "./Heading";
+import {InfoModalIcon} from "./InfoModalIcon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+export const Accordion: FC<AccordionProps> = ({
+  children,
+  isCollapsed = false,
+  title,
+  subtitle,
+  includeInfoModal = false,
+  infoModalChildren,
+  infoModalSubtitle,
+  infoModalText,
+  infoModalTitle,
+  onToggle,
+}) => {
+  const {theme} = useTheme();
+  const [collapsed, setCollapsed] = useState(false);
+
+  // The external collapse state should override the internal collapse state.
+  useEffect(() => {
+    setCollapsed(isCollapsed);
+  }, [isCollapsed]);
+
+  return (
+    <View
+      style={{
+        borderBottomColor: theme.border.default,
+        borderBottomWidth: 2,
+        borderTopColor: theme.border.default,
+        borderTopWidth: 2,
+        padding: 16,
+        width: "100%",
+      }}
+    >
+      <View style={{alignItems: "center", flexDirection: "row", justifyContent: "space-between"}}>
+        <View style={{flexDirection: "column", gap: 4}}>
+          <View style={{alignItems: "center", flexDirection: "row"}}>
+            <Heading>{title}</Heading>
+            {includeInfoModal && infoModalTitle && (
+              <InfoModalIcon
+                infoModalChildren={infoModalChildren}
+                infoModalSubtitle={infoModalSubtitle}
+                infoModalText={infoModalText}
+                infoModalTitle={infoModalTitle}
+              />
+            )}
+          </View>
+          {subtitle && <Text>{subtitle}</Text>}
+        </View>
+        <View>
+          <Pressable
+            aria-role="button"
+            hitSlop={{bottom: 20, left: 20, right: 20, top: 20}}
+            onPress={() => {
+              setCollapsed(!collapsed);
+              if (onToggle) {
+                onToggle(!collapsed);
+              }
+            }}
+            testID="accordion-toggle"
+          >
+            <FontAwesome6
+              color={theme.text.link}
+              name={collapsed ? "chevron-down" : "chevron-up"}
+              selectable={undefined}
+              size={16}
+            />
+          </Pressable>
+        </View>
+      </View>
+      {collapsed ? null : <View style={{marginTop: 8}}>{children}</View>}
+    </View>
+  );
+};