@artsy/palette-mobile 3.5.1 → 3.5.2

package/dist/atoms/BackButton/BackButton.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { ViewProps } from "react-native";
 export interface BackButtonProps {
+    hitSlop?: ViewProps["hitSlop"];
     onPress?: () => void;
     showX?: boolean;
 }
-export declare const BackButton: ({ onPress, showX }: BackButtonProps) => JSX.Element;
-export declare const BackButtonWithBackground: ({ onPress, showX }: BackButtonProps) => JSX.Element;
+export declare const BackButton: ({ hitSlop, onPress, showX, }: BackButtonProps) => JSX.Element;
+export declare const BackButtonWithBackground: ({ hitSlop, onPress, showX, }: BackButtonProps) => JSX.Element;

package/dist/atoms/BackButton/BackButton.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackButtonWithBackground = exports.BackButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
+const constants_1 = require("../../constants");
 const svgs_1 = require("../../svgs");
 const Flex_1 = require("../Flex");
-const BackButton = ({ onPress, showX = false }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "left", fill: "onBackgroundHigh" })) }));
+const BackButton = ({ hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "left", fill: "onBackgroundHigh" })) }));
 exports.BackButton = BackButton;
-const BackButtonWithBackground = ({ onPress, showX = false }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { fill: "onBackgroundHigh", direction: "left" })) }) }));
+const BackButtonWithBackground = ({ hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { fill: "onBackgroundHigh", direction: "left" })) }) }));
 exports.BackButtonWithBackground = BackButtonWithBackground;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ onPress, showX }: import("./BackButton").BackButtonProps) => JSX.Element;
+    component: ({ hitSlop, onPress, showX, }: import("./BackButton").BackButtonProps) => JSX.Element;
 };
 export default _default;
 export declare const Styled: () => JSX.Element;

package/dist/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Touch area box for UI elements
+ */
+export declare const DEFAULT_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/dist/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_HIT_SLOP = void 0;
+/**
+ * Touch area box for UI elements
+ */
+exports.DEFAULT_HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 };

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import { FlexProps } from "../../atoms/Flex";
+import { TextProps } from "../Text";
+import React from "react";
+/**
+ * Creates a skeleton animation for a component.
+ *
+ * @example
+ *
+ * <Skeleton>
+ *   <SkeletonText>Foo</SkeletonText>
+ *   <SkeletonBox width={100} height={100} />
+ * </Skeleton>
+ */
+export declare const Skeleton: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const SkeletonText: React.FC<TextProps>;
+export declare const SkeletonBox: React.FC<FlexProps>;

package/dist/elements/Skeleton/Skeleton.js

@@ -0,0 +1,58 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonBox = exports.SkeletonText = exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../atoms/Flex");
+const Text_1 = require("../Text");
+const hooks_1 = require("../../hooks");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+/**
+ * Creates a skeleton animation for a component.
+ *
+ * @example
+ *
+ * <Skeleton>
+ *   <SkeletonText>Foo</SkeletonText>
+ *   <SkeletonBox width={100} height={100} />
+ * </Skeleton>
+ */
+const Skeleton = ({ children }) => {
+    const opacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
+    opacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000, easing: react_native_reanimated_1.Easing.ease }), -1, true);
+    const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({ opacity: opacity.value }), []);
+    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: fadeLoopAnim, children: children });
+};
+exports.Skeleton = Skeleton;
+const SkeletonText = ({ children, ...rest }) => {
+    const color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "flex-start", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { ...rest, bg: color("black10"), color: color("black10"), children: children }) }));
+};
+exports.SkeletonText = SkeletonText;
+const SkeletonBox = ({ children, ...rest }) => {
+    const color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, bg: color("black10"), children: children }));
+};
+exports.SkeletonBox = SkeletonBox;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+};
+export default _default;
+export declare const SkeletonLoaders: () => JSX.Element;

package/dist/elements/Skeleton/Skeleton.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoaders = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const atoms_1 = require("../../atoms");
+const storybookHelpers_1 = require("../../storybookHelpers");
+const Skeleton_1 = require("./Skeleton");
+const Join_1 = require("../Join");
+const lodash_1 = require("lodash");
+exports.default = {
+    title: "Skeleton",
+    component: Skeleton_1.Skeleton,
+};
+const SkeletonLoaders = () => ((0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: (0, jsx_runtime_1.jsxs)(Skeleton_1.Skeleton, { children: [(0, jsx_runtime_1.jsxs)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { y: 1 }), children: [(0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "lg", children: "Hi i am loading" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "md", children: "Me too" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "sm", children: "Also loading" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "xs", children: "Also loading" })] }), (0, jsx_runtime_1.jsx)(atoms_1.Spacer, { y: 2 }), (0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", flexWrap: "wrap", children: (0, lodash_1.range)(1, 100).map((index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { mr: 1, mb: 1, width: 20, height: 20 }, index))) })] }) }));
+exports.SkeletonLoaders = SkeletonLoaders;

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

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

package/dist/elements/Skeleton/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("./Skeleton"), exports);

package/dist/elements/index.d.ts

@@ -17,6 +17,7 @@ export * from "./ProgressBar";
 export * from "./Radio";
 export * from "./Separator";
 export * from "./SimpleMessage";
+export * from "./Skeleton";
 export * from "./Spinner";
 export * from "./Text";
 export * from "./Touchable";

package/dist/elements/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./ProgressBar"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./Separator"), exports);
 __exportStar(require("./SimpleMessage"), exports);
+__exportStar(require("./Skeleton"), exports);
 __exportStar(require("./Spinner"), exports);
 __exportStar(require("./Text"), exports);
 __exportStar(require("./Touchable"), exports);

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from "./elements";
 export * from "./animation";
 export * from "./svgs";
 export * from "./svgs/Icon";
+export * from "./constants";
 export * from "./tokens";
 export * from "./Theme";
 export * from "./ClassTheme";

package/dist/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./elements"), exports);
 __exportStar(require("./animation"), exports);
 __exportStar(require("./svgs"), exports);
 __exportStar(require("./svgs/Icon"), exports);
+__exportStar(require("./constants"), exports);
 __exportStar(require("./tokens"), exports);
 __exportStar(require("./Theme"), exports);
 __exportStar(require("./ClassTheme"), exports);

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "Artsy's design system for React Native",
   "scripts": {
+    "android": "react-native run-android",
+    "beta:ios": "bundle e fastlane ios beta",
+    "build-lib:clean": "rimraf dist && yarn build-lib",
+    "build-lib": "tsc",
+    "bundle-install": "bundle install",
     "install:all": "yarn install && yarn bundle-install && yarn pod-install",
-    "start": "react-native start",
     "ios": "react-native run-ios",
-    "android": "react-native run-android",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "prestart": "sb-rn-get-stories",
-    "storybook-watcher": "sb-rn-watcher",
-    "bundle-install": "bundle install",
+    "open-xcode": "open ios/PaletteMobile.xcworkspace",
     "pod-install": "cd ios && bundle exec pod install && cd ..",
-    "test": "jest",
-    "build-lib": "tsc",
-    "build-lib:clean": "rimraf dist && yarn build-lib",
-    "release": "auto shipit",
+    "prestart": "sb-rn-get-stories",
     "release:canary": "auto canary",
-    "beta:ios": "bundle e fastlane ios beta",
-    "setup:artsy": "./scripts/download-fonts"
+    "release": "auto shipit",
+    "setup:artsy": "./scripts/download-fonts",
+    "start": "react-native start",
+    "storybook-watcher": "sb-rn-watcher",
+    "test": "jest"
   },
   "dependenciesComments": [
     "ONLY ADD DEPS THAT ARE OK TO SHIP WITH THIS LIBRARY.",