@artsy/palette-mobile 11.2.15 → 11.2.17

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# 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
+
+- fix(Pill): animate moti using worklet [#135](https://github.com/artsy/palette-mobile/pull/135) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v11.2.15 (Wed Aug 02 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Pill/Pill.js

@@ -30,6 +30,7 @@ exports.Pill = exports.PILL_VARIANT_NAMES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
 const interactions_1 = require("moti/interactions");
+const react_1 = require("react");
 const styled_components_1 = __importStar(require("styled-components"));
 const svgs_1 = require("../../svgs");
 const Flex_1 = require("../Flex");
@@ -39,7 +40,12 @@ exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "artist", "badge"];
 const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
     const stateString = selected ? "selected" : disabled ? "disabled" : "default";
     const color = TEXT_COLOR[variant][stateString];
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, children: [variant === "artist" && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, children: children }), ((variant === "filter" && !disabled) || (variant === "artist" && selected)) && ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
+                "worklet";
+                return {
+                    opacity: hovered || pressed ? 0.5 : 1,
+                };
+            }, []), children: [variant === "artist" && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, children: children }), ((variant === "filter" && !disabled) || (variant === "artist" && selected)) && ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 }))] }) }));
 };
 exports.Pill = Pill;
 const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.2.15",
+  "version": "11.2.17",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -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"
   },