@artsy/palette-mobile 8.3.0 → 8.5.0

package/dist/atoms/Box/Box.stories.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+import { View } from "react-native";
+import { BoxProps } from "../Box";
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<typeof import("react-native").View, any, import("./Box").BoxProps, never>;
+    component: import("styled-components").StyledComponent<typeof View, any, BoxProps, never>;
 };
 export default _default;
 export declare const Styled: () => JSX.Element;
+export declare const RegularViewProps: () => JSX.Element;

package/dist/atoms/Box/Box.stories.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Styled = void 0;
+exports.RegularViewProps = exports.Styled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const storybookHelpers_1 = require("../../storybookHelpers");
 const Box_1 = require("../Box");
 exports.default = {
@@ -26,3 +27,8 @@ const Styled = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { style: {
         // TextAlignProps
         textAlign: "center" }) }));
 exports.Styled = Styled;
+const RegularViewProps = () => {
+    const r = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }));
+};
+exports.RegularViewProps = RegularViewProps;

package/dist/atoms/Flex/Flex.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
+import { View } from "react-native";
 import { BoxProps } from "../Box";
 export type FlexProps = BoxProps;
-export declare const Flex: {
-    ({ backgroundColor, ...restProps }: FlexProps): JSX.Element;
-    displayName: string;
-};
+export declare const Flex: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<View>>;

package/dist/atoms/Flex/Flex.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Box_1 = require("../Box");
-const Flex = ({ backgroundColor, ...restProps }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: backgroundColor ?? "transparent", ...restProps }));
-exports.Flex = Flex;
+exports.Flex = (0, react_1.forwardRef)(({ backgroundColor, ...restProps }, ref) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: backgroundColor ?? "transparent", ...restProps, ref: ref })));
 exports.Flex.displayName = "Flex";

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

@@ -9,7 +9,4 @@ export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<Spaci
  * 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").StyledComponent<{
-    ({ backgroundColor, ...restProps }: import("../../atoms").BoxProps): JSX.Element;
-    displayName: string;
-}, any, BorderBoxProps, never>;
+export declare const BorderBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../atoms").BoxProps & import("react").RefAttributes<import("react-native").View>>, any, BorderBoxProps, never>;

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -39,9 +39,7 @@ exports.CollapsibleMenuItem = (0, react_1.forwardRef)(({ children, overtitle, ti
             });
         },
     }), [isOpen]);
-    return (
-    // @ts-expect-error
-    (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { ref: componentRef, collapsable: false, children: [(0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, { onPress: () => {
+    return ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { ref: componentRef, collapsable: false, children: [(0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, { onPress: () => {
                     setIsOpen(!isOpen);
                     isOpen ? onCollapse?.() : onExpand?.();
                 }, disabled: disabled, children: [!!overtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && ((0, jsx_runtime_1.jsx)(svgs_1.CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: isOpen, children: children })] }));

package/dist/space.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SpacingUnits: () => JSX.Element;

package/dist/space.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacingUnits = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _1 = require(".");
+const storybookHelpers_1 = require("./storybookHelpers");
+const SpaceLine = ({ space: theSpace }) => {
+    const space = (0, _1.useSpace)();
+    return ((0, jsx_runtime_1.jsxs)(_1.Box, { children: [(0, jsx_runtime_1.jsx)(_1.Box, { width: space(theSpace), borderBottomWidth: 1, borderColor: "black", marginBottom: "4px" }), (0, jsx_runtime_1.jsx)(_1.Text, { color: "black", children: typeof theSpace === "string"
+                    ? `${theSpace}`
+                    : `${theSpace} ${_1.bullet} ${space(theSpace)}px` })] }));
+};
+exports.default = {
+    title: "space",
+};
+const SpacingUnits = () => ((0, jsx_runtime_1.jsxs)(storybookHelpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [(0, jsx_runtime_1.jsx)(SpaceLine, { space: 0.5 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 1 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 2 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 4 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 6 }), (0, jsx_runtime_1.jsx)(SpaceLine, { space: 12 })] }));
+exports.SpacingUnits = SpacingUnits;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -33,7 +33,6 @@
     "events": "^3.3.0",
     "lodash": "^4.17.21",
     "react-nanny": "^2.15.0",
-    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
   "peerDependenciesComments": [
@@ -45,7 +44,8 @@
     "react-native-haptic-feedback": "*",
     "react-native-linear-gradient": "*",
     "react-native-reanimated": "*",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "styled-components": ">= 5"
   },
   "devDependencies": {
     "@artsy/auto-config": "1.2.0",
@@ -102,6 +102,7 @@
     "react-test-renderer": "18.2.0",
     "rimraf": "4.1.2",
     "rn-flipper-async-storage-advanced": "1.0.4",
+    "styled-components": "^5.3.6",
     "typescript": "4.9.5"
   },
   "files": [