@artsy/palette-mobile 20.2.0 → 20.4.0

package/README.md

@@ -36,7 +36,7 @@ yarn add @artsy/palette-mobile
 - Install native peer deps
 
 ```sh
-yarn add react-native-haptic-feedback react-native-linear-gradient react-native-reanimated react-native-svg
+yarn add react-native-haptic-feedback react-native-linear-gradient react-native-reanimated react-native-svg react-native-safe-area-context
 ```
 
 ## How to contribute
@@ -75,14 +75,6 @@ or
 yarn android
 ```
 
-⚠️ Temporary workaround until we move Expo into an example directory:
-
-For local development, remove the line from package.json:
-
-`"main": "dist/index.js"`
-
-Make sure to add it back before committing.
-
 ## Developing Features using Local Versions of Palette
 
 When developing new components in Palette, it's often useful to test those components in consuming apps (such as Eigen). However, due to the poor support for symlinks in React Native, this can be difficult. Enter [yalc](https://github.com/wclr/yalc). Yalc is a mini package manager that one can publish to and install from, which makes it easy to test code in realtime from outside of your app.

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -8,6 +8,4 @@ export interface BorderBoxProps extends FlexProps, SpaceProps<SpacingUnitsTheme>
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-export declare const BorderBox: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<Omit<import("..").BoxProps & import("react").RefAttributes<import("react-native").View>, "ref"> & {
-    ref?: import("react").Ref<import("react-native").View>;
-}, BorderBoxProps>>;
+export declare const BorderBox: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("..").BoxProps & import("react").RefAttributes<import("react-native").View>, BorderBoxProps>>;

package/dist/elements/EntityHeader/EntityHeader.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { AvatarSize } from "../Avatar";
 import { FlexProps } from "../Flex";
 export interface EntityHeaderProps extends FlexProps {

package/dist/elements/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "events";
+import { JSX } from "react";
 import { TextInput, TextInputProps } from "react-native";
 export declare const inputEvents: EventEmitter<[never]>;
 export declare const emitInputClearEvent: () => void;

package/dist/elements/Input/Input.js

@@ -41,7 +41,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
     const [inputWidth, setInputWidth] = useState(0);
     const placeholderWidths = useRef([]);
     const rightComponentRef = useRef(null);
-    const inputRef = useRef();
+    const inputRef = useRef(null);
     const variant = getInputVariant({
         hasError: !!props.error,
         disabled: disabled,

package/dist/elements/Screen/Header.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { JSX } from "react";
 import { FlexProps } from "../Flex";
 export interface HeaderProps {
     animated?: boolean;

package/dist/elements/Separator/ShadowSeparator.d.ts

@@ -1,3 +1 @@
-export declare const ShadowSeparator: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, import("./Separator").SeparatorProps>, keyof import("./Separator").SeparatorProps> & import("./Separator").SeparatorProps, "ref"> & {
-    ref?: import("react").Ref<import("react-native").View>;
-}, never>>;
+export declare const ShadowSeparator: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, import("./Separator").SeparatorProps>, keyof import("./Separator").SeparatorProps> & import("./Separator").SeparatorProps, never>>;

package/dist/elements/Tabs/TabsWithHeader.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from "react";
 import { CollapsibleProps } from "react-native-collapsible-tab-view";
 import { TabsContainerProps } from "./TabsContainer";
 import { HeaderProps } from "../Screen/Header";

package/dist/storybook/decorators.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useEffect, useState } from "react";
-import { Appearance } from "react-native";
+import { Appearance, Platform, StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Theme } from "../Theme";
-import { Flex } from "../elements/Flex";
-import { Pill } from "../elements/Pill";
-import { Text } from "../elements/Text";
+import { Flex, Pill, Text } from "../elements";
 import { ScreenDimensionsProvider } from "../utils/hooks";
-export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
+export const withTheme = (story) => _jsx(Theme, { theme: "v3light", children: story() });
 const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
 export const useDarkModeSwitcher = (story) => {
     const [mode, setModeState] = useState("system");
@@ -39,5 +37,9 @@ export const useDarkModeSwitcher = (story) => {
     };
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsx(Theme, { theme: theme, children: _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] }) }) }) }));
+    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsxs(Theme, { theme: theme, children: [_jsx(StatusBar
+                    // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
+                    , { 
+                        // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
+                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] })] }) }) }));
 };

package/dist/utils/space.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSpace } from "./hooks";
 import { bullet } from "./text";
-import { Box, Text } from "../elements";
 import { List } from "../storybook/helpers";
+import { Box, Text } from "../elements";
 const SpaceLine = ({ space: theSpace }) => {
     const space = useSpace();
     return (_jsxs(Box, { children: [_jsx(Box, { width: space(theSpace), borderBottomWidth: 1, borderColor: "black", marginBottom: "4px" }), _jsx(Text, { color: "black", children: `${theSpace} ${bullet} ${space(theSpace)}px` })] }));

package/dist/utils/tests/flattenChildren.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/tests/flattenChildren.tests.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { flattenChildren } from "../flattenChildren";
+describe("flattenChildren", () => {
+    it("flattens the children", () => {
+        const flattened = flattenChildren(_jsxs(_Fragment, { children: [_jsx(View, { children: "one" }), _jsx(View, { children: "two" }), _jsxs(_Fragment, { children: [_jsx(View, { children: "three" }), _jsx(_Fragment, { children: _jsx(View, { children: "four" }) })] })] }));
+        expect(flattened).toHaveLength(4);
+    });
+});

package/package.json

@@ -1,31 +1,36 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "20.2.0",
+  "version": "20.4.0",
   "description": "Artsy's design system for React Native",
+  "workspaces": [
+    "Example"
+  ],
   "scripts": {
-    "android": "expo run:android --port 8082",
+    "android": "yarn workspace palette-mobile-example android",
+    "android:prebuild": "yarn workspace palette-mobile-example android:prebuild",
     "beta:ios": "bundle e fastlane ios beta",
     "bundle-install": "bundle install",
     "clean": "rimraf dist",
     "compile": "tsc",
     "install:all": "yarn install && yarn postinstall && yarn bundle-install",
-    "ios": "expo run:ios --port 8082",
+    "ios": "yarn workspace palette-mobile-example ios",
+    "ios:prebuild": "yarn workspace palette-mobile-example ios:prebuild",
     "lint:all": "yarn lint .",
     "lint": "eslint --cache --cache-location '.cache/eslint/' --ext .ts,.tsx --fix",
     "local-palette-dev": "./scripts/sync-after-change",
-    "open-xcode": "open ios/PaletteMobile.xcworkspace",
+    "open-xcode": "open Example/ios/PaletteMobile.xcworkspace",
     "postinstall": "yarn patch-package",
-    "prebuild": "npx expo prebuild",
+    "prebuild": "yarn workspace palette-mobile-example prebuild",
     "prepare": "patch-package && husky install",
     "prepublishOnly": "yarn clean && yarn compile",
-    "prestart": "sb-rn-get-stories",
+    "prestart": "yarn workspace palette-mobile-example prestart",
     "prettier-write": "prettier --write --ignore-unknown",
     "release:canary": "auto canary",
     "release": "auto shipit",
     "setup:artsy": "./scripts/download-fonts",
-    "start:reset-cache": "npx expo start -c --port 8082",
-    "start": "npx expo start --port 8082",
-    "storybook-watcher": "sb-rn-watcher",
+    "start:reset-cache": "yarn workspace palette-mobile-example start:reset-cache",
+    "start": "yarn workspace palette-mobile-example start",
+    "storybook-watcher": "yarn workspace palette-mobile-example storybook-watcher",
     "test": "jest --maxWorkers=2",
     "type-check": "tsc --noEmit"
   },
@@ -76,14 +81,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "^7.25.0",
-    "@gorhom/bottom-sheet": "^4.6.4",
-    "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
     "@react-native/eslint-config": "0.76.9",
-    "@storybook/addon-ondevice-actions": "^8.3.5",
-    "@storybook/addon-ondevice-controls": "^8.3.5",
-    "@storybook/react-native": "^8.6.2",
     "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
     "@types/jest": "29.4.0",
@@ -108,8 +106,6 @@
     "eslint-plugin-react-native-a11y": "^3.5.1",
     "eslint-plugin-storybook": "0.6.10",
     "eslint-plugin-testing-library": "6.4.0",
-    "expo": "^53.0.0",
-    "expo-dev-client": "~5.2.4",
     "husky": "^8.0.3",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "29.4.2",
@@ -122,10 +118,7 @@
     "prettier": "^2.8.8",
     "pull-lock": "1.0.0",
     "react": "19.0.0",
-    "react-dom": "19.0.0",
     "react-native": "0.79.6",
-    "react-native-device-info": "14.0.4",
-    "react-native-gesture-handler": "~2.22.1",
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "3.17.5",
@@ -136,9 +129,6 @@
     "styled-components": "6.1.19",
     "typescript": "5.8.3"
   },
-  "resolutions": {
-    "@types/react": "18.3.12"
-  },
   "engines": {
     "yarn": "4.x"
   },
@@ -157,7 +147,7 @@
   "author": "Pavlos Vinieratos <pvinis@gmail.com>",
   "license": "MIT",
   "pull-lock": {
-    "ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
+    "Example/ios/Podfile.lock": "echo \"🚨 New Podfile.lock detected!, you might need to run yarn install:all\" 🚨",
     "yarn.lock": "yarn install"
   },
   "lint-staged": {