ferns-ui 0.2.0

package/src/DateTimeActionSheet.tsx

@@ -0,0 +1,61 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {OnChangeCallback} from "./Common";
+
+interface DateTimeActionSheetProps {
+  value?: string;
+  mode?: "date" | "time";
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface DateTimeActionSheetState {}
+
+export class DateTimeActionSheet extends React.Component<
+  DateTimeActionSheetProps,
+  DateTimeActionSheetState
+> {
+  constructor(props: DateTimeActionSheetProps) {
+    super(props);
+  }
+
+  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="Save"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <DateTimePicker
+            display="spinner"
+            is24Hour
+            mode={this.props.mode}
+            testID="dateTimePicker"
+            value={moment(this.props.value).toDate()}
+            onChange={(event: any, date: any) => {
+              if (!date) {
+                return;
+              }
+              this.props.onChange({event, value: date.toString()});
+            }}
+          />
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/DecimalRangeActionSheet.tsx

@@ -0,0 +1,113 @@
+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 DecimalRangeActionSheetProps {
+  value: string;
+  min: number;
+  max: number;
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface DecimalRangeActionSheetState {
+  whole: string;
+  decimal: string;
+}
+
+export class DecimalRangeActionSheet extends React.Component<
+  DecimalRangeActionSheetProps,
+  DecimalRangeActionSheetState
+> {
+  constructor(props: DecimalRangeActionSheetProps) {
+    super(props);
+    this.state = {
+      whole: String(Math.floor(Number(props.value))),
+      decimal: String((Number(props.value) * 10) % 10),
+    };
+  }
+
+  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.whole}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(whole) => {
+                  this.setState({whole: String(whole)});
+                  this.props.onChange({
+                    value: String(Number(whole) + Number(this.state.decimal) * 0.1),
+                  });
+                }}
+              >
+                {range(this.props.min, this.props.max + 1).map((n) => {
+                  // console.log("FIRST", String(n));
+                  return <Picker.Item key={String(n)} label={String(n)} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.decimal}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(decimal) => {
+                  // console.log(
+                  //   "DECIMAL",
+                  //   decimal,
+                  //   this.state.whole,
+                  //   Number(decimal.toString()) * 0.1,
+                  //   String(this.state.whole + Number(decimal) * 0.1)
+                  // );
+                  this.setState({decimal: String(decimal)});
+                  this.props.onChange({
+                    value: String(Number(this.state.whole) + Number(decimal) * 0.1),
+                  });
+                }}
+              >
+                {range(0, 10).map((n) => {
+                  // console.log("N", n);
+                  return <Picker.Item key={String(n)} label={`.${String(n)}`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+          </Box>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import * as Sentry from "@sentry/react-native";
+import React from "react";
+
+import {ErrorBoundaryProps} from "./Common";
+import {ErrorPage} from "./ErrorPage";
+
+interface State {
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+  state = {error: undefined};
+
+  static getDerivedStateFromError(error: Error) {
+    console.warn("[ErrorBoundary] Derived error", error);
+    return {error};
+  }
+
+  componentDidCatch(error: Error, info: {componentStack: string}) {
+    console.warn("[ErrorBoundary] Caught error", error);
+    Sentry.captureException(error);
+
+    if (this.props.onError) {
+      this.props.onError(error, info.componentStack);
+    }
+  }
+
+  resetError = () => {
+    this.setState({error: undefined});
+  };
+
+  render() {
+    const error = this.state.error;
+    if (error) {
+      return <ErrorPage error={error} resetError={this.resetError} />;
+    }
+    return this.props.children;
+  }
+}

package/src/ErrorPage.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Text} from "./Text";
+interface ErrorPageProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export class ErrorPage extends React.Component<ErrorPageProps, {}> {
+  constructor(props: ErrorPageProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <Box
+        alignItems="center"
+        direction="column"
+        display="flex"
+        height="100%"
+        justifyContent="center"
+        padding={6}
+        width="100%"
+      >
+        <Text align="center" color="red" size="lg" weight="bold">
+          Oops!
+        </Text>
+        <Box paddingY={3}>
+          <Text align="center">
+            There&apos;s an error. Sorry! Josh just got a notification about the error so he can fix
+            it as soon as possible!
+          </Text>
+        </Box>
+        <Box paddingY={3}>
+          <Text>{this.props.error.toString()}</Text>
+        </Box>
+        <Button color="blue" text="Try again" onClick={this.props.resetError} />
+      </Box>
+    );
+  }
+}

package/src/Field.tsx

@@ -0,0 +1,194 @@
+import isDate from "lodash/isDate";
+import isNumber from "lodash/isNumber";
+import moment from "moment-timezone";
+import React from "react";
+
+import {Box} from "./Box";
+import {FieldProps, TextFieldType} from "./Common";
+import {FieldWithLabels} from "./FieldWithLabels";
+import {SelectList} from "./SelectList";
+import {Switch} from "./Switch";
+import {TextArea} from "./TextArea";
+import {TextField} from "./TextField";
+
+interface State {
+  value: any;
+}
+
+export class Field extends React.Component<FieldProps, State> {
+  constructor(props: FieldProps) {
+    super(props);
+    this.state = {value: props.initialValue || ""};
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: FieldProps) {
+    if (nextProps.initialValue !== this.state.value) {
+      this.setState({value: nextProps.initialValue});
+    }
+  }
+
+  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);
+    }
+  };
+
+  handleSwitchChange = (value: boolean) => {
+    this.setState({value});
+    if (this.props.handleChange) {
+      this.props.handleChange(this.props.name, value);
+    }
+  };
+
+  validate = () => {
+    // console.log("VALIDATE", this.props.validate && this.props.validate(this.state.value));
+    if (this.props.validate && !this.props.validate(this.state.value)) {
+      return false;
+    }
+    switch (this.props.type) {
+      case "boolean":
+        return true;
+      case "currency":
+        return true;
+      case "date":
+        return !this.state.value || isDate(this.state.value);
+      case "email":
+        return (
+          !this.state.value ||
+          (this.state.value.search("@") > -1 && this.state.value.search(".") > -1)
+        );
+      case "number":
+        return !this.state.value || isNumber(this.state.value);
+      case "password":
+        return true;
+      case "percent":
+        return !this.state.value || isNumber(this.state.value.replace("%", ""));
+      case "select":
+        return true;
+      case "text":
+      case undefined: // text is default
+        return true;
+      case "textarea":
+        return true;
+      case "url":
+        return true;
+      default:
+        return true;
+    }
+  };
+
+  renderField() {
+    if (this.props.type === "select") {
+      if (!this.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}
+        />
+      );
+    } else if (this.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)}
+        />
+      );
+    } else if (this.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)}
+        />
+      );
+    } else if (this.props.type === "date") {
+      const value = this.state.value.seconds
+        ? moment(this.state.value.seconds * 1000)
+        : moment(this.state.value);
+      return (
+        <TextField
+          disabled
+          id={this.props.name}
+          placeholder={this.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)}
+        />
+      );
+    } 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") {
+        type = "text";
+      }
+      let autoComplete: "on" | "current-password" | "username" = "on";
+      if (type === "password") {
+        autoComplete = "current-password";
+      } 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") {
+      //   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}
+          type={type as "date" | "email" | "number" | "password" | "text" | "url"}
+          value={value}
+          onChange={(result) => this.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>
+    );
+  }
+}

package/src/FieldWithLabels.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import {FieldWithLabelsProps} from "./Common";
+import {WithLabel} from "./WithLabel";
+
+export const FieldWithLabels = ({
+  children,
+  errorMessage,
+  errorMessageColor = "red",
+  helperText,
+  helperTextColor = "darkGray",
+  label,
+  labelColor = "darkGray",
+}: FieldWithLabelsProps) => {
+  return (
+    <WithLabel
+      label={helperText}
+      labelColor={helperTextColor}
+      labelPlacement="after"
+      labelSize="sm"
+      show={Boolean(helperText)}
+    >
+      <WithLabel
+        label={errorMessage}
+        labelColor={errorMessageColor}
+        labelPlacement="after"
+        labelSize="md"
+        show={Boolean(errorMessage)}
+      >
+        <WithLabel label={label} labelColor={labelColor} show={Boolean(label)}>
+          {children}
+        </WithLabel>
+      </WithLabel>
+    </WithLabel>
+  );
+};

package/src/FlatList.tsx

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

package/src/Form.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {IconButton} from "./IconButton";
+import {SelectList} from "./SelectList";
+import {Switch} from "./Switch";
+import {Text} from "./Text";
+import {TextArea} from "./TextArea";
+import {TextField} from "./TextField";
+
+function objToJoinedString(obj: any) {
+  return Object.keys(obj || {})
+    .map((k) => (obj[k] ? k : undefined))
+    .filter((v) => v)
+    .join(", ");
+}
+
+interface FormLineProps {
+  name: string;
+  value: any;
+  onSave: (value: any) => void;
+  kind: "boolean" | "string" | "textarea" | "select" | "multiboolean";
+  options?: (string | undefined)[];
+}
+
+interface FormLineState {
+  editing: boolean;
+  value: any;
+}
+
+export class FormLine extends React.Component<FormLineProps, FormLineState> {
+  constructor(props: FormLineProps) {
+    super(props);
+    this.state = {editing: false, value: ""};
+  }
+
+  renderMultiBoolean() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <Box direction="column" display="flex">
+          {Object.keys(this.props.value).map((k) => (
+            <>
+              <Text weight="bold">{k}</Text>
+              <Switch
+                id={k}
+                switched={this.state.value[k]}
+                onChange={() => {
+                  this.setState({value: {...this.state.value, [k]: !this.state.value[k]}});
+                }}
+              />
+            </>
+          ))}
+        </Box>
+      </>
+    );
+  }
+
+  renderBooleanField() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <Switch
+          id={this.props.name}
+          switched={this.state.value}
+          onChange={() => this.setState({value: !this.state.value})}
+        />
+      </>
+    );
+  }
+
+  renderTextField() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <TextField
+          id={this.props.name}
+          value={this.state.value}
+          onChange={(result) => this.setState({value: result.value})}
+        />
+      </>
+    );
+  }
+
+  renderTextArea() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <TextArea
+          id={this.props.name}
+          value={this.state.value}
+          onChange={(result) => this.setState({value: result.value})}
+        />
+        <Button size="sm" text="Save" onClick={() => this.props.onSave(this.state.value)} />
+      </>
+    );
+  }
+
+  renderSelect() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <SelectList
+          id={this.props.name}
+          options={(this.props.options || []).map((o) => ({label: o ?? "---", value: o}))}
+          value={this.state.value}
+          onChange={(result) => {
+            this.setState({value: result});
+          }}
+        />
+      </>
+    );
+  }
+
+  render() {
+    if (!this.state.editing) {
+      let text = this.props.value;
+      if (text === undefined) {
+        text = " - ";
+      }
+      if (typeof text === "object") {
+        text = objToJoinedString(text);
+      }
+      return (
+        <Box direction="row" display="flex">
+          <IconButton
+            accessibilityLabel="edit"
+            icon="edit"
+            iconColor="darkGray"
+            prefix="far"
+            size="xs"
+            onClick={() => this.setState({editing: true, value: this.props.value})}
+          />
+          <Box marginRight={2}>
+            <Text weight="bold">{this.props.name}: </Text>
+          </Box>
+          <Text>{text}</Text>
+        </Box>
+      );
+    }
+    return (
+      <Box direction="row" display="flex">
+        <IconButton
+          accessibilityLabel="edit"
+          icon="cancel"
+          iconColor="darkGray"
+          prefix="far"
+          size="xs"
+          onClick={() => this.setState({editing: false})}
+        />
+        {this.props.kind === "boolean" && this.renderBooleanField()}
+        {this.props.kind === "multiboolean" && this.renderMultiBoolean()}
+
+        {this.props.kind === "string" && this.renderTextField()}
+        {this.props.kind === "textarea" && this.renderTextArea()}
+        {this.props.kind === "select" && this.renderSelect()}
+        <Box width={60}>
+          <Button
+            color="blue"
+            size="sm"
+            text="Save"
+            onClick={() => {
+              this.props.onSave(this.state.value);
+              this.setState({editing: false});
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  }
+}