ferns-ui 0.2.0 → 0.2.3

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/Icon.tsx

@@ -2,55 +2,7 @@ import {FontAwesome} from "@expo/vector-icons";
 import React from "react";
 
 import {iconNumberToSize, IconProps, iconSizeToNumber} from "./Common";
-// import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-// // import {library} from "@fortawesome/fontawesome-svg-core";
-// import {library} from "@fortawesome/fontawesome-svg-core";
-// // import {fal as proFal} from "@fortawesome/pro-light-svg-icons";
-// import {
-//   faHeart as farHeart,
-//   // faPlus as farPlus,
-//   faEdit as farEdit,
-//   faNewspaper as farNewspaper,
-// } from "@fortawesome/free-regular-svg-icons";
-// import {
-//   faChevronLeft,
-//   faEnvelopeOpen,
-//   faCarrot,
-//   faComment,
-//   faUserCircle,
-//   faSearch,
-//   faChevronRight,
-//   faEllipsisV,
-//   faPaperPlane,
-//   faExclamationCircle,
-//   faMailBulk,
-//   faTrashAlt,
-//   faTrashRestoreAlt,
-//   faEnvelope,
-//   faSpinner,
-// } from "@fortawesome/free-solid-svg-icons";
 import {Unifier} from "./Unifier";
-// library.add(
-//   farHeart,
-//   // farPlus,
-//   farEdit,
-//   farNewspaper,
-//   faChevronLeft,
-//   faCarrot,
-//   faComment,
-//   faUserCircle,
-//   faEnvelopeOpen,
-//   faSearch,
-//   faChevronRight,
-//   faEllipsisV,
-//   faPaperPlane,
-//   faExclamationCircle,
-//   faMailBulk,
-//   faTrashAlt,
-//   faTrashRestoreAlt,
-//   faEnvelope,
-//   faSpinner
-// );
 
 export function initIcons() {
   console.debug("Initializing icons");
@@ -58,82 +10,11 @@ export function initIcons() {
 
 const iconSet = new Set();
 
-function addIcon(icon: string, prefix = "far") {
-  const prev = new Set(iconSet);
-  iconSet.add(`${prefix}-${icon}`);
-  if (
-    prev.size !== iconSet.size &&
-    (!process.env.NODE_ENV || process.env.NODE_ENV === "development")
-  ) {
-    console.debug("[Icon] current icon set:", iconSet);
-  }
-}
-
+// TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used, etc.
 export class Icon extends React.Component<IconProps, {}> {
-  render() {
-    addIcon(this.props.name, this.props.prefix);
-    const color = Unifier.theme[this.props.color || "primary"];
-    let size: string = iconNumberToSize(this.props.size);
-    if (size === "xl") {
-      size = "2x";
-    } else if (size === "md") {
-      size = "1x";
-    }
-    return <FontAwesome color={color} icon={this.props.name as any} size={size as any} />;
-  }
-}
-
-export class IconExpo extends React.Component<IconProps, {}> {
   render() {
     const color = Unifier.theme[this.props.color || "primary"];
-    // Standardize the size (pretty hacky..)
-    const size = iconSizeToNumber(iconNumberToSize(this.props.size));
-    return (
-      <FontAwesome
-        color={color}
-        icon={[this.props.prefix || "far", this.props.name as any]}
-        size={size}
-      />
-    );
-    // const {name, prefix} = this.props;
-    // const color = Unifier.theme[this.props.color || "primary"];
-    // const size = this.props.size;
-
-    // const map = {
-    //   fapro: FAPro,
-    //   fas: FAIcon,
-    //   fa: FAIcon,
-    //   fal: FAIcon,
-    //   "fa-brand": FAIcon,
-    //   ant: AntDesignIcon,
-    //   entypo: EntypoIcon,
-    //   evil: EvilIcons,
-    //   material: MaterialIcons,
-    //   "material-community": MaterialCommunityIcons,
-    //   ionicon: Ionicons,
-    //   octicon: Octicons,
-    //   zocial: Zocial,
-    //   "simple-line": SimpleLineIcons,
-    //   feather: Feather,
-    // };
-    // const Component: any = map[prefix];
-    // if (!Component) {
-    //   console.warn(`[icons] could not find icon: ${prefix}:${name}`);
-    //   return null;
-    // }
-
-    // if (["fapro", "fal", "fa", "fas", "fa-brand"].indexOf(this.props.prefix) > -1) {
-    //   return (
-    //     <Component
-    //       solid={this.props.prefix === "fas"}
-    //       light={this.props.prefix === "fal"}
-    //       brand={this.props.prefix === "fa-brand"}
-    //       name={name}
-    //       color={color}
-    //       size={size}
-    //     />
-    //   );
-    // }
-    // return <Component name={name} color={color} size={size} />;
+    const size = iconSizeToNumber(this.props.size);
+    return <FontAwesome color={color} name={this.props.name as any} size={size} />;
   }
 }

package/src/IconButton.tsx

@@ -44,7 +44,7 @@ export class IconButton extends React.Component<IconButtonProps, {}> {
           color={this.props.iconColor}
           name={this.props.icon}
           prefix={this.props.prefix || "fas"}
-          size={iconSizeToNumber(this.props.size)}
+          size={this.props.size}
         />
       </TouchableOpacity>
     );

package/src/Pog.tsx

@@ -5,7 +5,7 @@ import {Box} from "./Box";
 import {AllColors, IconPrefix, IconSize} from "./Common";
 import {Icon} from "./Icon";
 
-/* 
+/*
 Originally based on https://github.com/pinterest/gestalt
 Forked, added type definitions, and added features.
 */
@@ -203,7 +203,7 @@ export default function Pog(props: Props) {
           // dangerouslySetSvgPath={dangerouslySetSvgPath}
           name={icon}
           prefix={iconPrefix}
-          size={iconSize}
+          size={size}
         />
       </Box>
     </div>

package/src/TapToEdit.tsx

@@ -19,7 +19,7 @@ export class TapToEdit extends React.Component<TextFieldProps, TapToEditState> {
       return (
         <Box direction="row" display="flex" onClick={() => this.setState({showEdit: true})}>
           <Box marginRight={2}>
-            <Icon color="primaryDark" name="edit" prefix="far" size={20} />
+            <Icon color="primaryDark" name="edit" prefix="far" size="lg" />
           </Box>
           <Text>{this.props.children}</Text>
         </Box>

package/src/TextField.tsx

@@ -79,7 +79,7 @@ export class TextField extends React.Component<TextFieldProps, TextFieldState> {
     } else {
       return (
         <Box marginRight={2}>
-          <Icon name="search" prefix="far" size={14} />
+          <Icon name="search" prefix="far" size="md" />
         </Box>
       );
     }

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/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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"}

package/dist/Card.stories.d.ts

@@ -1,6 +0,0 @@
-import { Card } from "./Card";
-declare const _default: {
-    title: string;
-    component: typeof Card;
-};
-export default _default;

package/dist/Card.stories.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { Box } from "./Box";
-import { Card } from "./Card";
-import { storiesOf } from "@storybook/react-native";
-export default {
-    title: "Card",
-    component: Card,
-};
-storiesOf("Card", module).add("Plain", () => (React.createElement(Box, { width: "100%", height: "100%", display: "flex", direction: "column", color: "lightGray", padding: 12 },
-    React.createElement(Card, null,
-        React.createElement(Box, { display: "flex", direction: "row", alignItems: "center" },
-            React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", width: 50, height: 50, rounding: "circle", color: "blue", marginRight: 2 },
-                React.createElement("h2", null, "JG")),
-            React.createElement(Box, { paddingX: 2, direction: "column" },
-                React.createElement("div", null,
-                    React.createElement("b", null, "Josh Gachnang")),
-                React.createElement("div", null, "joined 2 years ago")))))));
-//# sourceMappingURL=Card.stories.js.map

package/dist/Card.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../unifier/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAC3C,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,EAAE;IAC7F,oBAAC,IAAI;QACH,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;YACrD,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;gBAEd,qCAAW,CACP;YACN,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAC,QAAQ;gBAClC;oBACE,+CAAoB,CAChB;gBACN,sDAA6B,CACzB,CACF,CACD,CACH,CACP,CAAC,CAAC"}

package/dist/CheckBox.stories.d.ts

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