ferns-ui 0.2.0

package/src/HeaderButtons.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {BackButtonInterface, SearchButtonProps} from "./Common";
+import {IconButton} from "./IconButton";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+interface HeaderButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+interface HeaderButtonState {}
+
+export class HeaderButton extends React.Component<HeaderButtonProps, HeaderButtonState> {
+  constructor(props: HeaderButtonProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <Box marginRight={2}>
+        <Button color="primary" text={this.props.text} type="ghost" onClick={this.props.onClick} />
+      </Box>
+    );
+  }
+}
+
+export class SearchButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Box>
+        <IconButton
+          accessibilityLabel="search"
+          icon="search"
+          iconColor={this.props.color || "white"}
+          prefix="fas"
+          onClick={this.props.onClick}
+        />
+      </Box>
+    );
+  }
+}
+
+export class BackButton extends React.Component<BackButtonInterface, {}> {
+  render() {
+    return (
+      <Box alignItems="center" justifyContent="center" paddingX={3} width={50}>
+        <IconButton
+          accessibilityLabel=""
+          icon="chevron-left"
+          iconColor="white"
+          prefix="fas"
+          size="md"
+          onClick={() => this.props.onBack && this.props.onBack()}
+        />
+      </Box>
+    );
+  }
+}
+
+export class FilterButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return <Button color="white" text="Filter" type="ghost" onClick={this.props.onClick} />;
+  }
+}
+
+export class EditButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <IconButton
+        accessibilityLabel="edit"
+        icon="pen"
+        iconColor={this.props.color}
+        prefix="fas"
+        onClick={this.props.onClick}
+      />
+    );
+  }
+}
+
+export class UseButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Button
+        text="Use"
+        onClick={() => {
+          Unifier.utils.haptic();
+          this.props.onClick();
+        }}
+      />
+    );
+  }
+}
+
+export class AddTabButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Box color="blue" height={62} width={62} onClick={this.props.onClick}>
+        <Text color="darkGray">Add</Text>
+      </Box>
+    );
+  }
+}

package/src/Heading.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {Text as NativeText} from "react-native";
+
+import {HeadingProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+export class Heading extends React.Component<HeadingProps, {}> {
+  fontSizes = {
+    sm: 20,
+    md: 28,
+    lg: 36,
+  };
+
+  propsToStyle(): any {
+    const style: any = {};
+
+    // let font = this.props.font || "primary";
+    // if (this.props.bold) {
+    //   font += "Bold";
+    // }
+    style.fontFamily = Unifier.theme.primaryBoldFont;
+
+    style.fontSize = this.fontSizes[this.props.size || "md"];
+    if (this.props.align) {
+      style.textAlign = this.props.align;
+    }
+    if (this.props.color) {
+      style.color = Unifier.theme[this.props.color];
+    } else {
+      style.color = Unifier.theme.darkGray;
+    }
+    // TODO: might be useful for wrapping/truncating
+    // if (this.props.numberOfLines !== 1 && !this.props.inline) {
+    //   style.flexWrap = "wrap";
+    // }
+
+    return style;
+  }
+
+  render() {
+    const lines = 0;
+    // if (this.props.numberOfLines) {
+    //   lines = this.props.numberOfLines;
+    // } else if (this.props.inline) {
+    //   lines = 1;
+    // }
+    return (
+      <NativeText numberOfLines={lines} style={this.propsToStyle()}>
+        {this.props.children}
+      </NativeText>
+    );
+  }
+}

package/src/HeightActionSheet.tsx

@@ -0,0 +1,104 @@
+import {Picker} from "@react-native-picker/picker";
+import range from "lodash/range";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {OnChangeCallback} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+interface HeightActionSheetProps {
+  value?: string;
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface HeightActionSheetState {
+  feet: string;
+  inches: string;
+}
+
+export class HeightActionSheet extends React.Component<
+  HeightActionSheetProps,
+  HeightActionSheetState
+> {
+  constructor(props: HeightActionSheetProps) {
+    super(props);
+    this.state = {
+      feet: String(Math.floor(Number(props.value) / 12)),
+      inches: String(Number(props.value) % 12),
+    };
+  }
+
+  render() {
+    return (
+      <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>
+        <Box marginBottom={8} paddingX={4} width="100%">
+          <Box alignItems="end" display="flex" width="100%">
+            <Box width="33%">
+              <Button
+                color="blue"
+                size="lg"
+                text="Close"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <Box direction="row" width="100%">
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.feet}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(feet) => {
+                  this.setState({feet: String(feet)});
+                  this.props.onChange({
+                    value: String(Number(feet) * 12 + Number(this.state.inches)),
+                  });
+                }}
+              >
+                {range(4, 8).map((n) => {
+                  // console.log("FIRST", String(n));
+                  return <Picker.Item key={String(n)} label={`${String(n)}ft`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.inches}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(inches) => {
+                  this.setState({inches: String(inches)});
+                  this.props.onChange({
+                    value: String(Number(this.state.feet) * 12 + Number(inches)),
+                  });
+                }}
+              >
+                {range(0, 12).map((n) => {
+                  // console.log("N", n);
+                  return <Picker.Item key={String(n)} label={`${String(n)}in`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+          </Box>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/Icon.tsx

@@ -0,0 +1,139 @@
+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");
+}
+
+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);
+  }
+}
+
+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} />;
+  }
+}

package/src/IconButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {TouchableOpacity} from "react-native";
+
+import {IconButtonProps, iconSizeToNumber} from "./Common";
+import {Icon} from "./Icon";
+import {Unifier} from "./Unifier";
+
+export class IconButton extends React.Component<IconButtonProps, {}> {
+  render() {
+    let opacity = 1;
+    let color;
+    if (this.props.bgColor === "transparentDarkGray") {
+      opacity = 0.8;
+      color = Unifier.theme.darkGray;
+    } else if (this.props.bgColor === "transparent" || !this.props.bgColor) {
+      opacity = 0.0;
+      color = Unifier.theme.white;
+    } else {
+      color = Unifier.theme[this.props.bgColor];
+    }
+    return (
+      <TouchableOpacity
+        hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
+        style={{
+          opacity,
+          backgroundColor: color,
+          borderRadius: 100,
+          // paddingBottom: iconSizeToNumber(this.props.size) / 4,
+          // paddingTop: iconSizeToNumber(this.props.size) / 4,
+          // paddingLeft: iconSizeToNumber(this.props.size) / 2,
+          // paddingRight: iconSizeToNumber(this.props.size) / 2,
+          width: iconSizeToNumber(this.props.size) * 2.5,
+          height: iconSizeToNumber(this.props.size) * 2.5,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+        onPress={() => {
+          Unifier.utils.haptic();
+          this.props.onClick();
+        }}
+      >
+        <Icon
+          color={this.props.iconColor}
+          name={this.props.icon}
+          prefix={this.props.prefix || "fas"}
+          size={iconSizeToNumber(this.props.size)}
+        />
+      </TouchableOpacity>
+    );
+  }
+}

package/src/Image.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {Dimensions, Image as NativeImage} from "react-native";
+
+import {Box} from "./Box";
+import {ImageProps} from "./Common";
+const {width: DEVICE_WIDTH} = Dimensions.get("window");
+
+export class Image extends React.Component<ImageProps, {}> {
+  resizeMode = (fit?: "cover" | "contain" | "none") => {
+    if (!fit || fit === "none") {
+      return undefined;
+    } else {
+      return fit;
+    }
+  };
+
+  width = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    } else if (this.props.fullWidth) {
+      return DEVICE_WIDTH;
+    }
+    throw new Error("Width required for Image");
+  };
+
+  height = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    }
+    return this.width() * (9 / 16);
+  };
+
+  render() {
+    return (
+      <Box color={this.props.color}>
+        <NativeImage
+          resizeMode={this.resizeMode(this.props.fit)}
+          source={{uri: this.props.src, cache: "force-cache"}}
+          style={{
+            height: this.height(),
+            width: this.width(),
+            maxHeight: this.props.maxHeight,
+            maxWidth: this.props.maxWidth,
+            ...this.props.style,
+          }}
+        />
+      </Box>
+    );
+  }
+}

package/src/ImageBackground.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {ImageBackground as ImageBackgroundNative} from "react-native";
+
+interface ImageBackgroundProps {
+  style?: any;
+  source: any;
+}
+
+export class ImageBackground extends React.Component<ImageBackgroundProps, {}> {
+  render() {
+    return <ImageBackgroundNative {...this.props} />;
+  }
+}

package/src/Layer.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {LayerProps} from "./Common";
+
+interface LayerState {}
+
+// TODO: Flesh out for native.
+export class Layer extends React.Component<LayerProps, LayerState> {
+  constructor(props: LayerProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return this.props.children;
+  }
+}

package/src/Link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {LinkProps} from "./Common";
+import {Text} from "./Text";
+
+interface LinkState {}
+
+export class Link extends React.Component<LinkProps, LinkState> {
+  constructor(props: LinkProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return <Text>{this.props.children}</Text>;
+  }
+}

package/src/Mask.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import {MaskProps} from "./Common";
+
+export class Mask extends React.Component<MaskProps, {}> {
+  render() {
+    // if (this.props.shape === "rounded") {
+    //   return <Box style={{overflow: "hidden", borderRadius: 12}}>{this.props.children}</Box>;
+    // } else if (this.props.shape === "circle") {
+    //   return <Box style={{overflow: "hidden", borderRadius: 1000}}>{this.props.children}</Box>;
+    // }
+    // if (this.props.rounding) {
+    //   let rounding = this.props.rounding === "circle" ? 100 : this.props.rounding;
+    //   // Subtract 1 from rounding because of some very odd rendering.
+    //   return (
+    //     // <View style={{borderRadius: (rounding - 1) * 4, overflow: "visible"}}>
+    //       <View>{this.props.children}</View>
+    //     // </View>
+    //   );
+    // } else {
+    return this.props.children;
+    // }
+  }
+}

package/src/MediaQuery.ts

@@ -0,0 +1,28 @@
+import {Dimensions} from "react-native";
+
+export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
+  const width = Dimensions.get("window").width;
+  if (width < 576) {
+    return "xs";
+  } else if (width < 768) {
+    return "sm";
+  } else if (width < 1312) {
+    return "md";
+  } else {
+    return "lg";
+  }
+}
+
+export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "xs") {
+    return true;
+  } else if (size === "sm") {
+    return ["sm", "md", "lg"].includes(media);
+  } else if (size === "md") {
+    return ["md", "lg"].includes(media);
+  } else if (size === "lg") {
+    return ["lg"].includes(media);
+  }
+  return false;
+}

package/src/Meta.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import {MetaProps} from "./Common";
+
+export class Meta extends React.Component<MetaProps, {}> {
+  render() {
+    return this.props.children || null;
+  }
+}

package/src/ModalSheet.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react/display-name */
+import React, {forwardRef, useEffect, useRef} from "react";
+import {Animated} from "react-native";
+import {Modalize} from "react-native-modalize";
+import {Portal} from "react-native-portalize";
+
+export const useCombinedRefs = (...refs: any) => {
+  const targetRef = useRef();
+
+  useEffect(() => {
+    refs.forEach((ref: any) => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+};
+
+interface Props {
+  children: any;
+}
+
+export const SimpleContent = forwardRef((props: Props, ref) => {
+  const modalizeRef = useRef(null);
+  const combinedRef = useCombinedRefs(ref, modalizeRef);
+  const animated = useRef(new Animated.Value(0)).current;
+
+  // const renderHeader = () => (
+  //   <Box paddingY={4} marginTop={4} marginBottom={4}>
+  //     <Text>50 users online</Text>
+  //   </Box>
+  // );
+
+  return (
+    <Portal>
+      <Modalize
+        // HeaderComponent={renderHeader}
+        ref={combinedRef}
+        adjustToContentHeight
+        panGestureAnimatedValue={animated}
+        scrollViewProps={{
+          showsVerticalScrollIndicator: false,
+          stickyHeaderIndices: [0],
+        }}
+      >
+        {props.children}
+      </Modalize>
+    </Portal>
+  );
+});