ferns-ui 0.2.2 → 0.3.1

package/src/Field.tsx

@@ -1,7 +1,7 @@
 import isDate from "lodash/isDate";
 import isNumber from "lodash/isNumber";
 import moment from "moment-timezone";
-import React from "react";
+import React, {useState} from "react";
 
 import {Box} from "./Box";
 import {FieldProps, TextFieldType} from "./Common";
@@ -15,60 +15,58 @@ interface State {
   value: any;
 }
 
-export class Field extends React.Component<FieldProps, State> {
-  constructor(props: FieldProps) {
-    super(props);
-    this.state = {value: props.initialValue || ""};
-  }
+/**
+ * Field is a fully uncontrolled component for creating various inputs. Fully uncontrolled means Field manages its own
+ * state for the TextFields/Switches/etc, not the parent component. When values are updated, Field will pass the data to
+ * the parent through the handleChange prop. You can set an initialValue, but you should not update initialValue
+ * this prop with the result of handleChange.
+ *
+ * Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
+ * initialValue will not work.
+ *
+ */
+export function Field(props: FieldProps) {
+  const [value, setValue] = useState(props.initialValue || "");
 
-  UNSAFE_componentWillReceiveProps(nextProps: FieldProps) {
-    if (nextProps.initialValue !== this.state.value) {
-      this.setState({value: nextProps.initialValue});
+  const handleChange = (newValue: string) => {
+    if (props.type === "currency") {
+      newValue = newValue.replace("$", "");
+    } else if (props.type === "percent") {
+      newValue = newValue.replace("%", "");
     }
-  }
-
-  handleChange = (value: string) => {
-    if (this.props.type === "currency") {
-      value = value.replace("$", "");
-    } else if (this.props.type === "percent") {
-      value = value.replace("%", "");
-    }
-    this.setState({value});
-    if (this.props.handleChange) {
-      this.props.handleChange(this.props.name, value);
+    setValue(newValue);
+    if (props.handleChange) {
+      props.handleChange(props.name, newValue);
     }
   };
 
-  handleSwitchChange = (value: boolean) => {
-    this.setState({value});
-    if (this.props.handleChange) {
-      this.props.handleChange(this.props.name, value);
+  const handleSwitchChange = (switchValue: boolean) => {
+    setValue(switchValue);
+    if (props.handleChange) {
+      props.handleChange(props.name, switchValue);
     }
   };
 
-  validate = () => {
-    // console.log("VALIDATE", this.props.validate && this.props.validate(this.state.value));
-    if (this.props.validate && !this.props.validate(this.state.value)) {
+  const validate = () => {
+    // console.log("VALIDATE", props.validate && props.validate(value));
+    if (props.validate && !props.validate(value)) {
       return false;
     }
-    switch (this.props.type) {
+    switch (props.type) {
       case "boolean":
         return true;
       case "currency":
         return true;
       case "date":
-        return !this.state.value || isDate(this.state.value);
+        return !value || isDate(value);
       case "email":
-        return (
-          !this.state.value ||
-          (this.state.value.search("@") > -1 && this.state.value.search(".") > -1)
-        );
+        return !value || (value.search("@") > -1 && value.search(".") > -1);
       case "number":
-        return !this.state.value || isNumber(this.state.value);
+        return !value || isNumber(value);
       case "password":
         return true;
       case "percent":
-        return !this.state.value || isNumber(this.state.value.replace("%", ""));
+        return !value || isNumber(value.replace("%", ""));
       case "select":
         return true;
       case "text":
@@ -83,64 +81,62 @@ export class Field extends React.Component<FieldProps, State> {
     }
   };
 
-  renderField() {
-    if (this.props.type === "select") {
-      if (!this.props.options) {
+  const renderField = () => {
+    if (props.type === "select") {
+      if (!props.options) {
         console.error("Field with type=select require options");
         return null;
       }
       return (
         <SelectList
-          disabled={this.props.disabled}
-          id={this.props.name}
-          options={this.props.options}
-          value={this.state.value}
-          onChange={this.handleChange}
+          disabled={props.disabled}
+          id={props.name}
+          options={props.options}
+          value={value}
+          onChange={handleChange}
         />
       );
-    } else if (this.props.type === "textarea") {
+    } else if (props.type === "textarea") {
       return (
         <TextArea
-          disabled={this.props.disabled}
-          id={this.props.name}
-          placeholder={this.props.placeholder}
-          rows={this.props.rows}
-          value={String(this.state.value)}
-          onChange={({value}) => this.handleChange(value)}
+          disabled={props.disabled}
+          id={props.name}
+          placeholder={props.placeholder}
+          rows={props.rows}
+          value={String(value)}
+          onChange={(result) => handleChange(result.value)}
         />
       );
-    } else if (this.props.type === "boolean") {
+    } else if (props.type === "boolean") {
       return (
         <Switch
-          disabled={this.props.disabled}
-          id={this.props.name}
-          name={this.props.name}
-          switched={Boolean(this.state.value)}
-          onChange={(result) => this.handleSwitchChange(result)}
+          disabled={props.disabled}
+          id={props.name}
+          name={props.name}
+          switched={Boolean(value)}
+          onChange={(result) => handleSwitchChange(result)}
         />
       );
-    } else if (this.props.type === "date") {
-      const value = this.state.value.seconds
-        ? moment(this.state.value.seconds * 1000)
-        : moment(this.state.value);
+    } else if (props.type === "date") {
+      const date = value.seconds ? moment(value.seconds * 1000) : moment(value);
       return (
         <TextField
           disabled
-          id={this.props.name}
-          placeholder={this.props.placeholder}
+          id={props.name}
+          placeholder={props.placeholder}
           type="text"
           // TODO: allow editing with a date picker
-          value={value.format("MM/DD/YYYY HH:mmA")}
-          onChange={(result) => this.handleChange(result.value)}
+          value={date.format("MM/DD/YYYY HH:mmA")}
+          onChange={(result) => handleChange(result.value)}
         />
       );
     } else {
       let type: TextFieldType = "text";
       // Number is supported differently because we need fractional numbers and they don't work
       // well on iOS.
-      if (this.props.type && ["date", "email", "password", "url"].indexOf(this.props.type) > -1) {
-        type = this.props.type as TextFieldType;
-      } else if (this.props.type === "percent" || this.props.type === "currency") {
+      if (props.type && ["date", "email", "password", "url"].indexOf(props.type) > -1) {
+        type = props.type as TextFieldType;
+      } else if (props.type === "percent" || props.type === "currency") {
         type = "text";
       }
       let autoComplete: "on" | "current-password" | "username" = "on";
@@ -149,46 +145,43 @@ export class Field extends React.Component<FieldProps, State> {
       } else if (type === "email") {
         autoComplete = "username";
       }
-      const value = String(this.state.value);
-      // if (this.props.type === "percent") {
-      //   value = `${Number(this.state.value).toFixed(0)}%`;
-      // } else if (this.props.type === "currency") {
+      const stringValue = String(value);
+      // if (props.type === "percent") {
+      //   value = `${Number(value).toFixed(0)}%`;
+      // } else if (props.type === "currency") {
       //   value = `$${Number(value).toFixed(2)}`;
       // }
       // console.log("VAL", value);
       return (
         <TextField
           autoComplete={autoComplete}
-          disabled={this.props.disabled}
-          id={this.props.name}
-          placeholder={this.props.placeholder}
+          disabled={props.disabled}
+          id={props.name}
+          placeholder={props.placeholder}
           type={type as "date" | "email" | "number" | "password" | "text" | "url"}
-          value={value}
-          onChange={(result) => this.handleChange(result.value)}
+          value={stringValue}
+          onChange={(result) => handleChange(result.value)}
         />
       );
     }
-  }
+  };
 
-  render() {
-    const children = this.renderField();
-    const {errorMessage, errorMessageColor, helperText, helperTextColor, label, labelColor} =
-      this.props;
-    return (
-      <Box marginBottom={5}>
-        <FieldWithLabels
-          {...{
-            errorMessage,
-            errorMessageColor,
-            helperText,
-            helperTextColor,
-            label,
-            labelColor,
-          }}
-        >
-          {children}
-        </FieldWithLabels>
-      </Box>
-    );
-  }
+  const children = renderField();
+  const {errorMessage, errorMessageColor, helperText, helperTextColor, label, labelColor} = props;
+  return (
+    <Box marginBottom={5}>
+      <FieldWithLabels
+        {...{
+          errorMessage,
+          errorMessageColor,
+          helperText,
+          helperTextColor,
+          label,
+          labelColor,
+        }}
+      >
+        {children}
+      </FieldWithLabels>
+    </Box>
+  );
 }

package/src/Form.tsx

@@ -21,7 +21,7 @@ interface FormLineProps {
   value: any;
   onSave: (value: any) => void;
   kind: "boolean" | "string" | "textarea" | "select" | "multiboolean";
-  options?: (string | undefined)[];
+  options?: string[];
 }
 
 interface FormLineState {

package/src/Hyperlink.tsx

@@ -0,0 +1,181 @@
+/**
+ * @providesModule Hyperlink
+ *
+ * Forked from https://github.com/obipawan/react-native-hyperlink
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2019 Pawan
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+
+import mdurl from "mdurl";
+import React from "react";
+import {Linking, Platform, StyleProp, Text, View} from "react-native";
+
+const linkifyLib = require("linkify-it")();
+
+const {OS} = Platform;
+
+interface Props {
+  linkDefault?: boolean;
+  linkify?: any;
+  linkStyle?: StyleProp<any>;
+  linkText?: string | ((url: string) => string);
+  onPress?: (url: string) => void;
+  onLongPress?: (url: string, text: string) => void;
+  injectViewProps?: (url: string) => any;
+  children?: React.ReactNode;
+  style?: StyleProp<any>;
+}
+
+// Leaving this as a class component because it was easier to handle the `pasrse(this)` in `render()`
+class HyperlinkComponent extends React.Component<Props> {
+  isTextNested = (component: any) => {
+    if (!React.isValidElement(component)) throw new Error("Invalid component");
+    const {type: {displayName} = {} as any} = component;
+    if (displayName !== "Text") throw new Error("Not a Text component");
+    return typeof (component.props as any).children !== "string";
+  };
+
+  linkify = (component: any) => {
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    if (!linkifyIt.pretest(component.props.children) || !linkifyIt.test(component.props.children))
+      return component;
+
+    const elements = [];
+    let _lastIndex = 0;
+
+    const componentProps = {
+      ...component.props,
+      ref: undefined,
+      key: undefined,
+    };
+
+    try {
+      linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
+        const nonLinkedText = component.props.children.substring(_lastIndex, index);
+        nonLinkedText && elements.push(nonLinkedText);
+        _lastIndex = lastIndex;
+        if (this.props.linkText)
+          text =
+            typeof this.props.linkText === "function"
+              ? this.props.linkText(url)
+              : this.props.linkText;
+
+        const clickHandlerProps: any = {};
+        if (OS !== "web") {
+          if (this.props.onLongPress) {
+            clickHandlerProps.onLongPress = () => (this.props as any).onLongPress(url, text);
+          }
+        }
+        if (this.props.onPress) {
+          clickHandlerProps.onPress = () => (this.props as any).onPress(url, text);
+        }
+
+        let injected: any = {};
+        if (this.props.injectViewProps) {
+          injected = this.props.injectViewProps(url);
+        }
+
+        elements.push(
+          <Text
+            {...componentProps}
+            {...clickHandlerProps}
+            key={url + index}
+            style={[component.props.style, this.props.linkStyle]}
+            {...injected}
+          >
+            {text}
+          </Text>
+        );
+      });
+      elements.push(
+        component.props.children.substring(_lastIndex, component.props.children.length)
+      );
+      return React.cloneElement(component, componentProps, elements);
+    } catch (err) {
+      return component;
+    }
+  };
+
+  parse = (component: any): React.ReactElement => {
+    const {props: {children} = {} as any} = component || {};
+    if (!children) return component;
+
+    const componentProps = {
+      ...component.props,
+      ref: undefined,
+      key: undefined,
+    };
+
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    return React.cloneElement(
+      component,
+      componentProps,
+      React.Children.map(children, (child) => {
+        const {type: {displayName} = {} as any} = child || {};
+        if (typeof child === "string" && linkifyIt.pretest(child))
+          return this.linkify(
+            <Text {...componentProps} style={component.props.style}>
+              {child}
+            </Text>
+          );
+        if (displayName === "Text" && !this.isTextNested(child)) return this.linkify(child);
+        return this.parse(child);
+      })
+    );
+  };
+
+  render() {
+    const {...viewProps} = this.props;
+    delete viewProps.onPress;
+    delete viewProps.linkDefault;
+    delete viewProps.onLongPress;
+    delete viewProps.linkStyle;
+
+    return (
+      <View {...viewProps} style={this.props.style}>
+        {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
+          ? this.props.children
+          : this.parse(this).props.children}
+      </View>
+    );
+  }
+}
+
+export function Hyperlink(props: Props) {
+  const handleLink = (url: string) => {
+    const urlObject = mdurl.parse(url);
+    urlObject.protocol = urlObject.protocol.toLowerCase();
+    const normalizedURL = mdurl.format(urlObject);
+
+    Linking.canOpenURL(normalizedURL).then(
+      (supported) => supported && Linking.openURL(normalizedURL)
+    );
+  };
+
+  const onPress = handleLink || props.onPress;
+  if (props.linkDefault) return <HyperlinkComponent {...props} onPress={onPress} />;
+  return <HyperlinkComponent {...props} />;
+}

package/src/SelectList.tsx

@@ -4,7 +4,8 @@ import {FieldWithLabelsProps} from "./Common";
 import RNPickerSelect from "./PickerSelect";
 import {Unifier} from "./Unifier";
 
-export type SelectListOptions = {label: string; value: string | undefined}[];
+// Use "" if you want to have an "unset" value.
+export type SelectListOptions = {label: string; value: string | number}[];
 export interface SelectListProps extends FieldWithLabelsProps {
   id?: string;
   name?: string;

package/src/Text.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import {Text as NativeText} from "react-native";
-import Hyperlink from "react-native-hyperlink";
 
 import {TextProps} from "./Common";
+import {Hyperlink} from "./Hyperlink";
 import {Unifier} from "./Unifier";
 
 export class Text extends React.Component<TextProps, {}> {
@@ -82,10 +82,9 @@ export class Text extends React.Component<TextProps, {}> {
       return inner;
     } else {
       return (
-        // <Hyperlink linkDefault={true} linkStyle={{textDecorationLine: "underline"}}>
-        //   {inner}
-        // </Hyperlink>
-        <Hyperlink linkDefault>{inner}</Hyperlink>
+        <Hyperlink linkDefault linkStyle={{textDecorationLine: "underline"}}>
+          {inner}
+        </Hyperlink>
       );
     }
   }

package/src/TextFieldNumberActionSheet.tsx

@@ -1,6 +1,6 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
 import moment from "moment-timezone";
-import React, {SyntheticEvent} from "react";
+import React from "react";
 
 import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";

package/src/Unifier.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import {Clipboard, Dimensions, Keyboard, Linking, Vibration} from "react-native";
+import {Clipboard, Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {PermissionKind, UnifiedTheme} from "./Common";
@@ -206,7 +206,9 @@ class UnifierClass {
         enableVibrateFallback: true,
         ignoreAndroidSystemSettings: false,
       };
-      ReactNativeHapticFeedback.trigger("impactLight", options);
+      if (Platform.OS !== "web") {
+        ReactNativeHapticFeedback.trigger("impactLight", options);
+      }
     },
     openUrl: async (url: string) => {
       return Linking.openURL(url);

package/dist/Banner.stories.d.ts

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

package/dist/Banner.stories.js

@@ -1,13 +0,0 @@
-import { Box } from "./Box";
-import { Banner } from "./Banner";
-import React from "react";
-import { storiesOf } from "@storybook/react-native";
-storiesOf("Banner", module)
-    .add("Plain banner", () => (React.createElement(Box, { width: "100%", height: "100%", display: "flex", direction: "column" },
-    React.createElement(Banner, { id: "banner", text: "When you click this banner, it dismisses", subtext: "And in a real app, it would stay dismissed", color: "primary", textColor: "white" }))))
-    .add("Shape banner", () => (React.createElement(Box, { width: "100%", height: "100%", display: "flex", direction: "column" },
-    React.createElement(Box, { paddingY: 2, width: "100%" },
-        React.createElement(Banner, { id: "banner", text: "Banners can have multiple shapes like Boxes", subtext: "Here's a pill.", color: "primary", textColor: "white", shape: "pill" })),
-    React.createElement(Box, { paddingY: 2, width: "100%" },
-        React.createElement(Banner, { id: "banner", text: "And a rounded banner", color: "secondary", textColor: "white", shape: 3 })))));
-//# sourceMappingURL=Banner.stories.js.map

package/dist/Banner.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../unifier/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAElD,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;KACxB,GAAG,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC,CACzB,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ;IAC/D,oBAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,0CAA0C,EAC/C,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,OAAO,GACjB,CACE,CACP,CAAC;KACD,GAAG,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC,CACzB,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ;IAC/D,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM;QAC5B,oBAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,6CAA6C,EAClD,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,OAAO,EACjB,KAAK,EAAC,MAAM,GACZ,CACE;IACN,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM;QAC5B,oBAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,sBAAsB,EAC3B,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,CAAC,GACR,CACE,CACF,CACP,CAAC,CAAC"}

package/dist/Box.stories.d.ts

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

package/dist/Box.stories.js

@@ -1,45 +0,0 @@
-import React from "react";
-import { Box } from "./Box";
-import { storiesOf } from "@storybook/react-native";
-import { Text } from "./Text";
-import { StorybookContainer } from "./StorybookContainer";
-const colors = [
-    "primary",
-    "secondary",
-    "tertiary",
-    "accent",
-    "blue",
-    "darkGray",
-    "eggplant",
-    "gray",
-    "green",
-    "lightGray",
-    "maroon",
-    "midnight",
-    "navy",
-    "olive",
-    "orange",
-    "orchid",
-    "pine",
-    "purple",
-    "red",
-    "watermelon",
-    "white",
-    "neutral900",
-    "neutral200",
-    "neutral70",
-    "neutral10",
-];
-storiesOf("Box", module)
-    .add("FlexBox", () => (React.createElement(StorybookContainer, null,
-    React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", width: 50, height: 50, rounding: "circle", color: "blue", marginRight: 2 },
-        React.createElement(Text, { size: "lg" }, "JG")),
-    React.createElement(Box, { paddingX: 2, direction: "column" },
-        React.createElement(Text, { weight: "bold" }, "Josh Gachnang"),
-        React.createElement(Text, null, "joined 2 years ago")))))
-    .add("Box Colors", () => (React.createElement(StorybookContainer, null, colors.map((c) => (React.createElement(Box, { key: c, display: "flex", direction: "column" },
-    React.createElement(Box, { marginBottom: 2 },
-        React.createElement(Text, { align: "center" }, c)),
-    React.createElement(Box, { key: c, color: c, rounding: "circle", height: 50, width: 50 },
-        React.createElement(Text, null, " "))))))));
-//# sourceMappingURL=Box.stories.js.map

package/dist/Box.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../unifier/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,GAAgB;IAC1B,SAAS;IACT,WAAW;IACX,UAAU;IACV,QAAQ;IACR,MAAM;IACN,UAAU;IACV,UAAU;IACV,MAAM;IACN,OAAO;IACP,WAAW;IACX,QAAQ;IACR,UAAU;IACV,MAAM;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,KAAK;IACL,YAAY;IACZ,OAAO;IACP,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC;KACrB,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,CACpB,oBAAC,kBAAkB;IACjB,oBAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,CAAC;QAEd,oBAAC,IAAI,IAAC,IAAI,EAAC,IAAI,SAAU,CACrB;IACN,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,QAAQ;QAClC,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,oBAAqB;QACxC,oBAAC,IAAI,6BAA0B,CAC3B,CACa,CACtB,CAAC;KACD,GAAG,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CACvB,oBAAC,kBAAkB,QAChB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACjB,oBAAC,GAAG,IAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ;IAC5C,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC;QAClB,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,IAAE,CAAC,CAAQ,CAC3B;IACN,oBAAC,GAAG,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;QAC5D,oBAAC,IAAI,YAAS,CACV,CACF,CACP,CAAC,CACiB,CACtB,CAAC,CAAC"}

package/dist/Button.stories.d.ts

@@ -1 +0,0 @@
-export declare const Primary: any;

package/dist/Button.stories.js

@@ -1,41 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import React from "react";
-import { Button } from "./Button";
-import { storiesOf } from "@storybook/react-native";
-import { Box } from "./Box";
-import { StorybookContainer } from "./StorybookContainer";
-function allColorButtons(props) {
-    return (React.createElement(StorybookContainer, null,
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Default" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Primary", color: "primary" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Secondary", color: "secondary" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Tertiary", color: "tertiary" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Accent", color: "accent" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Red", color: "red" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Dark Gray", color: "darkGray" }, props))),
-        React.createElement(Box, { paddingY: 1 },
-            React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Gray", color: "gray" }, props)))));
-}
-storiesOf("Button", module)
-    .add("Colors", () => allColorButtons({}))
-    .add("Loading", () => allColorButtons({ loading: true }))
-    .add("Ghost", () => allColorButtons({ type: "ghost" }))
-    .add("Outline", () => allColorButtons({ type: "outline" }));
-const Template = (args) => React.createElement(Button, Object.assign({ onClick: action("clicked"), text: "Button" }, args));
-export const Primary = Template.bind({});
-Primary.args = {
-    size: "md",
-    color: "primary",
-    text: "PRIMARY",
-    type: "solid",
-    inline: false,
-    disabled: false,
-};
-//# sourceMappingURL=Button.stories.js.map

package/dist/Button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../unifier/Button.stories.tsx"],"names":[],"mappings":"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"}