@artsy/palette-mobile 11.2.16 → 12.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v12.0.0 (Mon Aug 07 2023)
+
+#### 💥 Breaking Change
+
+- chore(palette-tokens): bump palette-tokens to v5 [#136](https://github.com/artsy/palette-mobile/pull/136) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# v11.2.17 (Fri Aug 04 2023)
+
+#### 🐛 Bug Fix
+
+- feat(Popover): add Popover element [#137](https://github.com/artsy/palette-mobile/pull/137) ([@araujobarret](https://github.com/araujobarret) [@damassi](https://github.com/damassi))
+
+#### Authors: 2
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.2.16 (Wed Aug 02 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Popover/Popover.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Color } from "@artsy/palette-tokens";
+import { ViewStyle } from "react-native";
+import RNPopover from "react-native-popover-view";
+interface PopoverProps {
+    children?: React.ReactElement;
+    variant?: PopoverVariant;
+    title?: React.ReactElement;
+    content?: React.ReactElement;
+    onPressOutside?: () => void;
+    onDismiss?: () => void;
+    onCloseComplete?: RNPopover["props"]["onCloseComplete"];
+    placement?: "top" | "bottom" | "left" | "right";
+    noCloseIcon?: boolean;
+    visible?: boolean;
+}
+export declare const Popover: ({ variant, children, visible, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, }: PopoverProps) => JSX.Element;
+export declare const POPOVER_VARIANTS: Record<"light" | "dark", {
+    backgroundColor: string;
+    fill: Color;
+    shadow?: ViewStyle;
+}>;
+export type PopoverVariant = keyof typeof POPOVER_VARIANTS;
+export {};

package/dist/elements/Popover/Popover.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POPOVER_VARIANTS = exports.Popover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const palette_tokens_1 = require("@artsy/palette-tokens");
+const react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
+const react_native_reanimated_1 = require("react-native-reanimated");
+const styled_components_1 = __importDefault(require("styled-components"));
+const svgs_1 = require("../../svgs");
+const Flex_1 = require("../Flex");
+const Touchable_1 = require("../Touchable");
+const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+    const style = exports.POPOVER_VARIANTS[variant];
+    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, { backgroundStyle: { opacity: 1, backgroundColor: "transparent" }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+            duration: 400,
+            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
+        }, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, p: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : (0, jsx_runtime_1.jsx)(Flex_1.Flex, {}), !noCloseIcon && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onDismiss, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
+};
+exports.Popover = Popover;
+const Container = (0, styled_components_1.default)(Flex_1.Flex) `
+  background-color: ${({ variant }) => exports.POPOVER_VARIANTS[variant].backgroundColor};
+`;
+const DROP_SHADOW = {
+    shadowColor: palette_tokens_1.THEME.colors["black100"],
+    shadowOffset: {
+        width: 0,
+        height: 2,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4,
+};
+exports.POPOVER_VARIANTS = {
+    light: {
+        backgroundColor: palette_tokens_1.THEME.colors["white100"],
+        fill: "black100",
+        shadow: DROP_SHADOW,
+    },
+    dark: {
+        backgroundColor: palette_tokens_1.THEME.colors["black100"],
+        fill: "white100",
+    },
+};

package/dist/elements/Popover/Popover.stories.d.ts

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

package/dist/elements/Popover/Popover.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const react_1 = require("react");
+const Popover_1 = require("./Popover");
+const Button_1 = require("../Button");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+(0, react_native_1.storiesOf)("Popover", module)
+    .add("Variants", () => {
+    const [visible, setVisible] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-dark", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-dark", placement: "bottom", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
+})
+    .add("With title and/or content", () => {
+    const [visible, setVisible] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "title", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", color: "white100", children: "Popover title" }), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", children: "Popover descriptive text with some not so long long long body" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "black30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "outlineGray", children: "Learn more" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title?" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "black30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
+})
+    .add("Edge positions", () => {
+    const [topVisible, setTopVisible] = (0, react_1.useState)(true);
+    const [bottomVisible, setBottomVisible] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "black30", justifyContent: "space-between", px: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "white100", width: 80, px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Top-Left" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Top-left" }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "white100", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Bottom-Right" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Bottom-right" }) }) })] }));
+});

package/dist/elements/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./Popover";

package/dist/elements/Popover/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Popover"), exports);

package/dist/elements/index.d.ts

@@ -26,6 +26,7 @@ export * from "./MeasuredView";
 export * from "./MenuItem";
 export * from "./Pill";
 export * from "./PopIn";
+export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./Radio";
 export * from "./SearchInput";

package/dist/elements/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./MeasuredView"), exports);
 __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./Pill"), exports);
 __exportStar(require("./PopIn"), exports);
+__exportStar(require("./Popover"), exports);
 __exportStar(require("./ProgressBar"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./SearchInput"), exports);

package/dist/tokens.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.THEMES = exports.COLOR_LAYER_ROLE = exports.COLOR_LAYER_NAME = void 0;
 const palette_tokens_1 = require("@artsy/palette-tokens");
 const webTokensToMobile_1 = require("./utils/webTokensToMobile");
-const { textVariants, space, colors, fonts } = palette_tokens_1.THEME_V3;
+const { textVariants, space, colors } = palette_tokens_1.THEME;
 exports.COLOR_LAYER_NAME = {
     ...colors,
     /** Adding this here for dev usage. Avoid using it for actual components. */

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { SpacingUnit as BaseSpacingUnit } from "@artsy/palette-tokens/dist/themes/v3";
+import { SpacingUnit as BaseSpacingUnit } from "@artsy/palette-tokens";
 import { COLOR_LAYER_ROLE, COLOR_LAYER_NAME } from "./tokens";
 import { Neg } from "./utils/types";
 export type SpacingUnitDSValueNumber = BaseSpacingUnit;

package/dist/utils/hooks/useTheme.d.ts

@@ -10,8 +10,8 @@ type SpaceFn = (spaceName: SpacingUnit) => number;
 declare const space: (theme: AllThemesType) => SpaceFn;
 export interface ColorFn {
     (colorNumber: undefined): undefined;
-    (colorNumber: ColorDSValue): string;
-    (colorNumber: Color | undefined): string | undefined;
+    (colorNumber: ColorDSValue | Color): string;
+    (colorNumber: ColorDSValue | Color | undefined): string | undefined;
 }
 declare const color: (theme: AllThemesType) => ColorFn;
 export {};

package/dist/utils/webTokensToMobile.d.ts

@@ -1,4 +1,4 @@
-import { THEME_V3 } from "@artsy/palette-tokens";
+import { THEME } from "@artsy/palette-tokens";
 import { SpacingUnit } from "@artsy/palette-tokens/dist/themes/v3";
 import { TextTreatment, TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { SpacingUnitPixelValue } from "../types";
@@ -12,7 +12,7 @@ export type TextTreatmentWithoutUnits = {
  * from a string `"120px"` to a number `120`, and the key values from a number
  * `0.5` to a string `"0.5"`.
  */
-export declare const convertWebSpacingUnitsToMobile: (withUnits: typeof THEME_V3.space) => Record<SpacingUnit, SpacingUnitPixelValue>;
+export declare const convertWebSpacingUnitsToMobile: (withUnits: typeof THEME.space) => Record<SpacingUnit, SpacingUnitPixelValue>;
 /**
  * This function is removing the `px` and `em` suffix and making the values
  * into numbers. letterspacing, fontSize, and lineHeight all take numbers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.2.16",
+  "version": "12.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -33,7 +33,7 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
-    "@artsy/palette-tokens": "^4.0.1",
+    "@artsy/palette-tokens": "^5.0.0",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
@@ -43,6 +43,7 @@
     "react-native-collapsible-tab-view": "^6.1.4",
     "react-native-fast-image": "^8.6.3",
     "react-native-pager-view": "^6.2.0",
+    "react-native-popover-view": "^5.1.7",
     "react-spring": "8.0.23",
     "styled-system": "^5.1.5"
   },