@artsy/palette-mobile 10.0.2 → 10.0.3

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 /// <reference types="react" />
 import { EventEmitter } from "events";
 import { TextInput, TextInputProps, TextStyle } from "react-native";

package/dist/elements/Text/LinkText.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const LinkText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Text").TextProps & import("react").RefAttributes<import("react-native").Text>>, any, {}, never>;
+import { TextProps } from "./Text";
+export declare const LinkText: ({ style, ...props }: TextProps) => JSX.Element;

package/dist/elements/Text/LinkText.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkText = void 0;
-const native_1 = __importDefault(require("styled-components/native"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Text_1 = require("./Text");
-exports.LinkText = (0, native_1.default)(Text_1.Text) `
-  text-decoration-line: underline;
-`;
+const LinkText = ({ style, ...props }) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { ...props, style: [style, { textDecorationLine: "underline" }] }));
+exports.LinkText = LinkText;

package/dist/elements/Text/Text.d.ts

@@ -10,6 +10,7 @@ export interface TextProps extends RNTextProps, InnerStyledTextProps {
     weight?: "regular" | "medium";
     maxChars?: number;
     underline?: boolean;
+    maxWidth?: boolean;
 }
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
 type InnerStyledTextProps = ColorProps & SpaceProps & TypographyProps & FontSizeProps;

package/dist/elements/Text/Text.js

@@ -11,7 +11,7 @@ const native_1 = __importDefault(require("styled-components/native"));
 const styled_system_1 = require("styled-system");
 const __1 = require("../..");
 const helpers_1 = require("./helpers");
-exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps, weight = "regular", underline = false, style, children, ...restProps }, ref) => {
+exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps, weight = "regular", underline = false, maxWidth, style, children, ...restProps }, ref) => {
     const { theme } = (0, __1.useTheme)();
     const fontFamily = (0, helpers_1.useFontFamilyFor)({ italic, weight });
     const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
@@ -19,6 +19,7 @@ exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color
             ...nativeTextStyle,
             { textAlignVertical: "center" },
             { textDecorationLine: !!underline ? "underline" : "none" },
+            !!maxWidth ? { width: "100%", maxWidth: 600, alignSelf: "center" } : {},
             style, // keep last so we can override
         ], fontFamily: fontFamily, ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
 });

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

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react-native";
+import { Text } from ".";
+declare const TextMeta: ComponentMeta<typeof Text>;
+export default TextMeta;
+type TextStory = ComponentStory<typeof Text>;
+export declare const Variants: TextStory;
+export declare const VariantsInBoxes: TextStory;
+export declare const BasicProps: TextStory;
+export declare const Misc: TextStory;
+export declare const FontCenteringRaw: TextStory;
+export declare const FontCenteringPalette: TextStory;

package/dist/elements/Text/Text.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontCenteringPalette = exports.FontCenteringRaw = exports.Misc = exports.BasicProps = exports.VariantsInBoxes = exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const _1 = require(".");
+const helpers_1 = require("../../storybook/helpers");
+const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
+const TextMeta = {
+    title: "Theme/Text",
+    component: _1.Text,
+};
+exports.default = TextMeta;
+const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
+const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => (0, jsx_runtime_1.jsxs)(_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
+exports.Variants = Variants;
+const VariantsInBoxes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black", width: 100, children: (0, jsx_runtime_1.jsxs)(_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) }));
+exports.VariantsInBoxes = VariantsInBoxes;
+const BasicProps = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.Text, { children: "regular ~~ This is a text." }), (0, jsx_runtime_1.jsx)(_1.LinkText, { children: "LinkText." }), (0, jsx_runtime_1.jsx)(_1.Text, { caps: true, children: "caps ~~ This is a text." }), (0, jsx_runtime_1.jsx)(_1.Text, { italic: true, children: "italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(_1.Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(_1.Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), (0, jsx_runtime_1.jsx)(_1.Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] }));
+exports.BasicProps = BasicProps;
+const Misc = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { borderWidth: 1, borderColor: "black" }, children: (0, jsx_runtime_1.jsx)(_1.Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, {})] }));
+exports.Misc = Misc;
+// this is useful for making sure our custom fonts are rendering at the same height for ios and android
+const FontCenteringRaw = () => {
+    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+    const systemFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
+    const unicaFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Unica custom font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
+};
+exports.FontCenteringRaw = FontCenteringRaw;
+// this is useful for making sure our custom fonts are rendering at the same height for ios and android
+const FontCenteringPalette = () => {
+    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.Text, { style: style, children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(_1.Text, { style: style, children: "ALL CAPS text." })] })] }));
+};
+exports.FontCenteringPalette = FontCenteringPalette;

package/dist/elements/Text/Text.tests.d.ts

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

package/dist/elements/Text/Text.tests.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const text_1 = require("../../utils/text");
+describe("Text", () => {
+    it("uses endash in ranges", () => {
+        const usingHelper = (0, text_1.range)("10", "20");
+        const usingEndash = `10 ${text_1.endash} 20`;
+        expect(usingHelper).toEqual(usingEndash);
+        expect(usingHelper).toEqual("10 – 20"); // endash
+        expect(usingHelper).not.toEqual("10 - 20"); // minus
+    });
+});

package/dist/svgs/Icon.js

@@ -7,7 +7,7 @@ exports.RadialGradient = exports.Stop = exports.LinearGradient = exports.Defs =
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const react_native_svg_1 = __importDefault(require("react-native-svg"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const native_1 = __importDefault(require("styled-components/native"));
 const styled_system_1 = require("styled-system");
 const DEFAULT_SIZE = 18;
 /**
@@ -22,7 +22,7 @@ const ScaledSvg = ({ width = DEFAULT_SIZE, height = DEFAULT_SIZE, ...restProps }
     return (0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: scaledWidth, height: scaledHeight, ...restProps });
 };
 /** Wrapper for icons to include space */
-exports.Icon = (0, styled_components_1.default)(ScaledSvg) `
+exports.Icon = (0, native_1.default)(ScaledSvg) `
   position: relative;
 
   ${styled_system_1.space};

package/dist/utils/hooks/useTheme.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
 const react_1 = require("react");
-const styled_components_1 = require("styled-components");
+const native_1 = require("styled-components/native");
 const tokens_1 = require("../../tokens");
 const useTheme = () => {
-    const maybeTheme = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    const maybeTheme = (0, react_1.useContext)(native_1.ThemeContext);
     // if we are not wrapped in `<Theme>`, if we dev, throw error.
     // if we are in prod, we will default to v2 to avoid a crash.
     // if we are wrapped, then all good.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",