ferns-ui 0.2.0

package/src/Pog.tsx

@@ -0,0 +1,211 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from "react";
+
+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.
+*/
+// TOOD: create styles
+// :root {
+//   --lightGray: #efefef;
+//   --gray: #8e8e8e;
+//   --darkGray: #111;
+// }
+
+// .pog {
+//   composes: circle from "./Borders.module.css";
+//   composes: flex from "./Layout.module.css";
+//   composes: itemsCenter from "./Layout.module.css";
+//   composes: justifyCenter from "./Layout.module.css";
+// }
+
+// .focused {
+//   composes: accessibilityOutlineFocus from "./Focus.module.css";
+// }
+
+// .selected {
+//   composes: darkGrayBg from "./Colors.module.css";
+// }
+
+// .transparent {
+//   composes: transparentBg from "./Colors.module.css";
+// }
+
+// .transparentDarkGray {
+//   composes: transparentDarkGrayBg from "./Colors.module.css";
+// }
+
+// .transparent.hovered,
+// .transparent.focused,
+// .white.hovered,
+// .white.focused {
+//   background-color: rgba(0, 0, 0, 0.06);
+// }
+
+// .transparent.active,
+// .white.active {
+//   background-color: rgba(0, 0, 0, 0.1);
+// }
+
+// .transparentDarkGray.hovered,
+// .transparentDarkGray.focused {
+//   background-color: var(--darkGray);
+// }
+
+// .transparentDarkGray.active {
+//   background-color: var(--darkGray);
+// }
+
+// .white {
+//   composes: whiteBg from "./Colors.module.css";
+// }
+
+// .white.hovered,
+// .white.focused {
+//   background-color: #f0f0f0;
+// }
+
+// .white.active {
+//   background-color: #e5e5e5;
+// }
+
+// .lightGray {
+//   composes: lightGrayBg from "./Colors.module.css";
+// }
+
+// .lightGray.hovered,
+// .lightGray.focused {
+//   background-color: #e2e2e2;
+// }
+
+// .lightGray.active {
+//   background-color: #dadada;
+// }
+
+// .gray {
+//   composes: grayBg from "./Colors.module.css";
+// }
+
+// .gray.hovered,
+// .gray.focused {
+//   background-color: #878787;
+// }
+
+// .gray.active {
+//   background-color: #828282;
+// }
+
+// .darkGray {
+//   composes: darkGrayBg from "./Colors.module.css";
+// }
+
+// .blue {
+//   composes: blueBg from "./Colors.module.css";
+// }
+
+// .blue.hovered,
+// .blue.focused {
+//   background-color: #4a8ad4;
+// }
+
+// .blue.active {
+//   background-color: #4a85c9;
+// }
+
+const styles = {
+  pog: "",
+  selected: "",
+  active: "",
+  focused: "",
+  hovered: "",
+};
+
+const SIZE_NAME_TO_PIXEL = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 56,
+};
+
+// type PogColor = "gray" | "darkGray" | "red" | "blue" | "white" | "orange";
+interface Props {
+  active?: boolean;
+  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white" | "blue";
+  focused?: boolean;
+  hovered?: boolean;
+  selected?: boolean;
+  iconColor?: AllColors;
+  icon: string;
+  iconPrefix?: IconPrefix;
+  size?: IconSize;
+}
+
+const defaultIconButtonIconColors = {
+  blue: "white",
+  darkGray: "white",
+  gray: "white",
+  lightGray: "gray",
+  transparent: "gray",
+  transparentDarkGray: "white",
+  white: "gray",
+};
+
+export default function Pog(props: Props) {
+  const {
+    active = false,
+    bgColor = "transparent",
+    focused = false,
+    hovered = false,
+    iconColor,
+    icon,
+    iconPrefix = "fas",
+    selected = false,
+    size = "md",
+  } = props;
+
+  const iconSize = SIZE_NAME_TO_PIXEL[size] / 2;
+  const color =
+    (selected && "white") ||
+    iconColor ||
+    (defaultIconButtonIconColors[bgColor] as AllColors) ||
+    "white";
+
+  const inlineStyle = {
+    height: SIZE_NAME_TO_PIXEL[size],
+    width: SIZE_NAME_TO_PIXEL[size],
+  };
+
+  // const classes = classnames(styles.pog, {
+  //   [styles[bgColor]]: !selected,
+  //   [styles.selected]: selected,
+  //   [styles.active]: active,
+  //   [styles.focused]: focused,
+  //   [styles.hovered]: hovered && !focused && !active,
+  // });
+
+  return (
+    <div style={inlineStyle}>
+      <Box rounding="circle">
+        {/*
+         We're explicitly setting an empty string as a label on the Icon since we
+         already have an aria-label on the button container.
+         This is similar to having empty `alt` attributes:
+         https://davidwalsh.name/accessibility-tip-empty-alt-attributes
+        */}
+        <Icon
+          // accessibilityLabel=""
+          color={color}
+          // dangerouslySetSvgPath={dangerouslySetSvgPath}
+          name={icon}
+          prefix={iconPrefix}
+          size={iconSize}
+        />
+      </Box>
+    </div>
+  );
+}

package/src/ProgressBar.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {View} from "react-native";
+
+import {ProgressBarProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+interface ProgressBarState {}
+
+export class ProgressBar extends React.Component<ProgressBarProps, ProgressBarState> {
+  constructor(props: ProgressBarProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    // console.log("PROGRESS", Unifier.theme[this.props.color], `${this.props.completed / 100}%`);
+    return (
+      <View
+        style={{
+          width: "100%",
+          height: 6,
+        }}
+      >
+        <View
+          style={{
+            width: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: 6,
+            borderRadius: 6,
+            borderWidth: 1,
+            borderColor: Unifier.theme[this.props.color],
+            backgroundColor: Unifier.theme[this.props.color],
+            opacity: 0.3,
+          }}
+        />
+        <View
+          style={{
+            width: `${Math.min(this.props.completed / 100, 1) * 100}%`,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: 6,
+            borderRadius: 6,
+            borderWidth: 1,
+            borderColor: Unifier.theme[this.props.color],
+            backgroundColor: Unifier.theme[this.props.color],
+            opacity: 1,
+          }}
+        />
+      </View>
+    );
+  }
+}

package/src/ScrollView.tsx

@@ -0,0 +1,2 @@
+import {ScrollView} from "react-native";
+export {ScrollView};

package/src/SegmentedControl.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {SegmentedControlProps} from "./Common";
+import {Text} from "./Text";
+
+export class SegmentedControl extends React.Component<SegmentedControlProps, {}> {
+  renderItem(item: string | React.ReactNode) {
+    return <Text weight="bold">{item}</Text>;
+    // if (typeof item === "string") {
+    //   return <Text weight="bold">{item}</Text>;
+    // } else {
+    //   return item;
+    // }
+  }
+
+  render() {
+    return (
+      <Box
+        color="lightGray"
+        direction="row"
+        display="flex"
+        height={40}
+        padding={1}
+        rounding={3}
+        width="100%"
+      >
+        {this.props.items.map((item, index) => (
+          <Box
+            key={index}
+            color={this.props.selectedItemIndex === index ? "white" : "lightGray"}
+            height="100%"
+            rounding={3}
+            width={`${100 / this.props.items.length}%`}
+          >
+            <Box
+              alignItems="center"
+              display="flex"
+              height="100%"
+              justifyContent="center"
+              width="100%"
+              onClick={() => this.props.onChange({activeIndex: index})}
+            >
+              {this.renderItem(item)}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+}

package/src/SelectList.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import {FieldWithLabelsProps} from "./Common";
+import RNPickerSelect from "./PickerSelect";
+import {Unifier} from "./Unifier";
+
+export type SelectListOptions = {label: string; value: string | undefined}[];
+export interface SelectListProps extends FieldWithLabelsProps {
+  id?: string;
+  name?: string;
+  options: SelectListOptions;
+  onChange: (value: string) => void;
+  value?: string;
+  disabled?: boolean;
+  size?: "md" | "lg";
+  placeholder?: string;
+}
+
+export class SelectList extends React.Component<SelectListProps, {}> {
+  state = {showing: false};
+
+  render() {
+    return (
+      <RNPickerSelect
+        items={this.props.options}
+        placeholder={{}}
+        style={{
+          viewContainer: {
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: 50,
+            width: "100%",
+            // Add padding so the border doesn't mess up layouts
+            paddingHorizontal: 6,
+            paddingVertical: 4,
+            borderColor: Unifier.theme.gray,
+            borderWidth: 1,
+            borderRadius: 5,
+            backgroundColor: Unifier.theme.white,
+          },
+        }}
+        value={this.props.value}
+        onValueChange={this.props.onChange}
+      />
+    );
+  }
+}

package/src/Spinner.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {ActivityIndicator, View} from "react-native";
+
+import {SpinnerProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+export class LoadingOverlay extends React.Component<SpinnerProps, {}> {
+  componentId?: string = undefined;
+
+  async showHide() {
+    if (this.componentId) {
+      try {
+        await Unifier.navigation.dismissOverlay();
+      } catch (e) {
+        console.debug(`[spinner] could not dismiss spinner overlay`, e);
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.showHide();
+  }
+
+  componentDidUpdate() {
+    this.showHide();
+  }
+
+  componentWillUnmount() {
+    this.showHide();
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          width: "100%",
+          height: "100%",
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: Unifier.theme.white,
+          opacity: 0.5,
+        }}
+      >
+        <Spinner />
+      </View>
+    );
+  }
+}
+
+interface SpinnerState {
+  show: boolean;
+}
+export class Spinner extends React.Component<SpinnerProps, SpinnerState> {
+  state = {show: false};
+
+  // The delay is for perceived performance so you should rarely need to remove it.
+  componentDidMount() {
+    setTimeout(() => this.setState({show: true}), 300);
+  }
+
+  render() {
+    if (!this.state.show) {
+      return null;
+    }
+    const size: "small" | "large" = this.props.size === "sm" ? "small" : "large";
+    return <ActivityIndicator color={this.props.color || "darkGray"} size={size} />;
+  }
+}

package/src/SplitPage.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import {ListRenderItemInfo, View} from "react-native";
+
+import {Box} from "./Box";
+import {Color} from "./Common";
+import {ErrorBoundary} from "./ErrorBoundary";
+import {FlatList} from "./FlatList";
+import {Icon} from "./Icon";
+import {IconButton} from "./IconButton";
+import {mediaQueryLargerThan} from "./MediaQuery";
+import {Spinner} from "./Spinner";
+import {Unifier} from "./Unifier";
+
+interface SplitPageProps {
+  // TODO: figure out navigation
+  navigation: any;
+  loading?: boolean;
+  color?: Color;
+  keyboardOffset?: number;
+  rightButton?: string;
+  rightButtonOnClick?: () => void;
+  renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => React.ReactElement | null;
+  renderListViewHeader?: () => React.ReactElement | null;
+  renderContent: (index?: number) => React.ReactElement | null;
+  listViewData: any[];
+  listViewExtraData?: any;
+  listViewWidth?: number;
+}
+
+interface SplitPageState {
+  selectedId?: number;
+}
+
+// A component for rendering a list on one side and a details view on the right for large screens,
+// and a scrollable list where clicking an item takes you the details view.
+export class SplitPage extends React.Component<SplitPageProps, SplitPageState> {
+  state = {selectedId: undefined};
+
+  actionSheetRef: React.RefObject<any> = React.createRef();
+
+  renderItem = (itemInfo: ListRenderItemInfo<any>) => {
+    return (
+      <Box
+        onClick={() => {
+          this.setState({selectedId: itemInfo.index});
+        }}
+      >
+        {this.props.renderListViewItem(itemInfo)}
+      </Box>
+    );
+  };
+
+  renderList = () => {
+    if (!mediaQueryLargerThan("sm") && this.state.selectedId) {
+      return null;
+    }
+    return (
+      <View
+        style={{
+          width: mediaQueryLargerThan("sm") ? this.props.listViewWidth ?? 300 : "100%",
+          maxWidth: mediaQueryLargerThan("sm") ? this.props.listViewWidth ?? 300 : "100%",
+          flexGrow: 1,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {this.props.renderListViewHeader && this.props.renderListViewHeader()}
+        <FlatList
+          data={this.props.listViewData}
+          extraData={this.props.listViewExtraData}
+          keyExtractor={(item) => item.id}
+          renderItem={this.renderItem}
+        />
+      </View>
+    );
+  };
+
+  renderListContent = () => {
+    return (
+      <Box flex="grow" padding={2}>
+        {!mediaQueryLargerThan("sm") && (
+          <Box width="100%">
+            <IconButton
+              accessibilityLabel="close"
+              icon="times"
+              iconColor="darkGray"
+              onClick={() => this.setState({selectedId: undefined})}
+            />
+          </Box>
+        )}
+        {this.props.renderContent(this.state.selectedId)}
+      </Box>
+    );
+  };
+
+  render() {
+    return (
+      <Box
+        avoidKeyboard
+        color={this.props.color || "lightGray"}
+        direction="row"
+        display="flex"
+        flex="grow"
+        height="100%"
+        keyboardOffset={this.props.keyboardOffset}
+        width="100%"
+      >
+        {this.props.loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
+        {this.renderList()}
+        {this.renderListContent()}
+      </Box>
+    );
+  }
+}

package/src/Switch.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {Switch as NativeSwitch} from "react-native";
+
+import {SwitchProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export class Switch extends React.Component<SwitchProps, {}> {
+  render() {
+    return (
+      <WithLabel labelInline labelJustifyContent="between" {...this.props}>
+        <NativeSwitch
+          disabled={this.props.disabled}
+          value={this.props.switched}
+          onValueChange={this.props.onChange}
+        />
+      </WithLabel>
+    );
+  }
+}

package/src/TapToEdit.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {TextFieldProps} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {TextField} from "./TextField";
+
+interface TapToEditState {
+  showEdit: boolean;
+}
+
+export class TapToEdit extends React.Component<TextFieldProps, TapToEditState> {
+  state = {showEdit: false};
+
+  render() {
+    if (!this.state.showEdit) {
+      return (
+        <Box direction="row" display="flex" onClick={() => this.setState({showEdit: true})}>
+          <Box marginRight={2}>
+            <Icon color="primaryDark" name="edit" prefix="far" size={20} />
+          </Box>
+          <Text>{this.props.children}</Text>
+        </Box>
+      );
+    } else {
+      return (
+        <Box>
+          <TextField {...this.props} />
+          <Box paddingY={1} width={100}>
+            <Button
+              color="primary"
+              inline
+              text="Save"
+              onClick={() => {
+                this.setState({showEdit: false});
+                if (this.props.onSubmitEditing) {
+                  this.props.onSubmitEditing();
+                }
+              }}
+            />
+          </Box>
+        </Box>
+      );
+    }
+  }
+}