ferns-ui 0.2.0

package/src/Unifier.ts

@@ -0,0 +1,268 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* 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 ReactNativeHapticFeedback from "react-native-haptic-feedback";
+
+import {PermissionKind, UnifiedTheme} from "./Common";
+import {requestPermissions} from "./Permissions";
+
+const DEFAULT_FONT = "Cochin";
+const DEFAULT_BOLD_FONT = "Cochin";
+
+const DefaultTheme: UnifiedTheme = {
+  // Primary colors
+  red: "#bd081c",
+  white: "#fdfdfd",
+  lightGray: "#efefef",
+  gray: "#8e8e8e",
+  darkGray: "#111",
+  // secondary colors
+  green: "#0fa573",
+  pine: "#0a6955",
+  olive: "#364a4c",
+  blue: "#4a90e2",
+  navy: "#004b91",
+  midnight: "#133a5e",
+  purple: "#b469eb",
+  orchid: "#8046a5",
+  eggplant: "#5b2677",
+  maroon: "#6e0f3c",
+  watermelon: "#f13535",
+  orange: "#e3780c",
+  black: "#000000",
+
+  primaryLighter: "#4ED456",
+  primaryLight: "#28CA32",
+  primary: "#00BD0C",
+  primaryDark: "#00960A",
+  primaryDarker: "#007508",
+
+  secondaryLighter: "#41AAAE",
+  secondaryLight: "#20989D",
+  secondary: "#018B91",
+  secondaryDark: "#016E73",
+  secondaryDarker: "#00565A",
+
+  accentLighter: "#FF625D",
+  accentLight: "#FF3732",
+  accent: "#F00600",
+  accentDark: "#BE0500",
+  accentDarker: "#950400",
+
+  tertiaryLighter: "#FFCF67",
+  tertiaryLight: "#FFC23E",
+  tertiary: "#FFB109",
+  tertiaryDark: "#CA8A00",
+  tertiaryDarker: "#9F6D00",
+
+  // From the Atlassian templates
+  neutral900: "#091E42",
+  neutral800: "#172B4D",
+  neutral700: "#253858",
+  neutral600: "#344563",
+  neutral500: "#42526E",
+  neutral400: "#505F79",
+  neutral300: "#5E6C84",
+  neutral200: "#6B778C",
+  neutral100: "#7A869A",
+  neutral90: "#8993A4",
+  neutral80: "#97A0AF",
+  neutral70: "#A5ADBA",
+  neutral60: "#B3BAC5",
+  neutral50: "#C1C7D0",
+  neutral40: "#DFE1E6",
+  neutral30: "#EBECF0",
+  neutral20: "#F4F5F7",
+  neutral10: "#FAFBFC",
+
+  primaryFont: DEFAULT_FONT,
+  primaryBoldFont: DEFAULT_BOLD_FONT,
+
+  secondaryFont: DEFAULT_FONT,
+  secondaryBoldFont: DEFAULT_BOLD_FONT,
+
+  accentFont: DEFAULT_FONT,
+  accentBoldFont: DEFAULT_BOLD_FONT,
+
+  buttonFont: DEFAULT_FONT,
+  titleFont: DEFAULT_FONT,
+};
+
+export type PlatformOS = "ios" | "android" | "web";
+
+class UnifierClass {
+  private _theme?: Partial<UnifiedTheme>;
+
+  private _web = false;
+
+  private _dev = false;
+
+  get web(): boolean {
+    return this._web;
+  }
+
+  get dev(): boolean {
+    return this._dev;
+  }
+
+  setTheme(theme: Partial<UnifiedTheme>) {
+    this._theme = theme;
+  }
+
+  get theme(): UnifiedTheme {
+    return {
+      ...DefaultTheme,
+      // Custom per project
+      primaryLighter: this._theme?.primaryLighter || this._theme?.primary || DefaultTheme.primary,
+      primaryLight: this._theme?.primaryLight || this._theme?.primary || DefaultTheme.primary,
+      primary: this._theme?.primary || this._theme?.primary || DefaultTheme.primary,
+      primaryDark: this._theme?.primaryDark || this._theme?.primary || DefaultTheme.primary,
+      primaryDarker: this._theme?.primaryDarker || this._theme?.primary || DefaultTheme.primary,
+
+      secondaryLighter:
+        this._theme?.secondaryLighter || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryLight:
+        this._theme?.secondaryLight || this._theme?.secondary || DefaultTheme.secondary,
+      secondary: this._theme?.secondary || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryDark: this._theme?.secondaryDark || this._theme?.secondary || DefaultTheme.secondary,
+      secondaryDarker:
+        this._theme?.secondaryDarker || this._theme?.secondary || DefaultTheme.secondary,
+
+      accentLighter: this._theme?.accentLighter || this._theme?.accent || DefaultTheme.accent,
+      accentLight: this._theme?.accentLight || this._theme?.accent || DefaultTheme.accent,
+      accent: this._theme?.accent || this._theme?.accent || DefaultTheme.accent,
+      accentDark: this._theme?.accentDark || this._theme?.accent || DefaultTheme.accent,
+      accentDarker: this._theme?.accentDarker || this._theme?.accent || DefaultTheme.accent,
+
+      tertiaryLighter: this._theme?.tertiaryLighter || this._theme?.accent || DefaultTheme.accent,
+      tertiaryLight: this._theme?.tertiaryLight || this._theme?.accent || DefaultTheme.accent,
+      tertiary: this._theme?.tertiary || this._theme?.accent || DefaultTheme.accent,
+      tertiaryDark: this._theme?.tertiaryDark || this._theme?.accent || DefaultTheme.accent,
+      tertiaryDarker: this._theme?.tertiaryDarker || this._theme?.accent || DefaultTheme.accent,
+
+      primaryFont: this._theme?.primaryFont || DefaultTheme.primaryFont,
+      primaryBoldFont:
+        this._theme?.primaryBoldFont || this._theme?.primaryFont || DefaultTheme.primaryBoldFont,
+      secondaryFont:
+        this._theme?.secondaryFont || this._theme?.primaryFont || DefaultTheme.secondaryFont,
+      secondaryBoldFont:
+        this._theme?.secondaryBoldFont ||
+        this._theme?.primaryFont ||
+        DefaultTheme.secondaryBoldFont,
+      buttonFont: this._theme?.buttonFont || this._theme?.primaryFont || DefaultTheme.buttonFont,
+      accentFont: this._theme?.accentFont || this._theme?.primaryFont || DefaultTheme.accentFont,
+      accentBoldFont:
+        this._theme?.accentBoldFont || this._theme?.primaryFont || DefaultTheme.accentBoldFont,
+      titleFont: this._theme?.titleFont || this._theme?.primaryFont || DefaultTheme.titleFont,
+    };
+  }
+
+  constructor() {
+    console.debug("[unifier] Setting up Unifier");
+  }
+
+  navigation = {
+    dismissOverlay: () => {
+      console.warn("Dismiss overlay not supported.");
+    },
+  };
+
+  // tracking: Tracking,
+  utils = {
+    dismissKeyboard: () => {
+      Keyboard.dismiss();
+    },
+    dimensions: () => ({
+      width: Dimensions.get("window").width,
+      height: Dimensions.get("window").height,
+    }),
+    copyToClipboard: (text: string) => {
+      Clipboard.setString(text);
+    },
+    orientationChange: (callback: (orentation: "portrait" | "landscape") => void) => {
+      Dimensions.addEventListener("change", () => {
+        const screen = Dimensions.get("screen");
+        const isPortrait = screen.width < screen.height;
+        callback(isPortrait ? "portrait" : "landscape");
+      });
+    },
+    requestPermissions: async (_perm: PermissionKind) => {
+      return requestPermissions(_perm);
+      // return requestPermissions(perm);
+    },
+    makePurchase: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    PaymentService: () => {
+      console.warn("Make purchase not supported yet.");
+    },
+    vibrate: (pattern?: number[]) => {
+      Vibration.vibrate(pattern || [100], false);
+    },
+    haptic: () => {
+      const options = {
+        enableVibrateFallback: true,
+        ignoreAndroidSystemSettings: false,
+      };
+      ReactNativeHapticFeedback.trigger("impactLight", options);
+    },
+    openUrl: async (url: string) => {
+      return Linking.openURL(url);
+    },
+    // keepAwake: (activate: boolean) => {
+    //   if (activate) {
+    //     activateKeepAwake();
+    //   } else {
+    //     deactivateKeepAwake();
+    //   }
+    // },
+  };
+
+  storage = {
+    getItem: async (key: string, defaultValue?: any) => {
+      try {
+        const jsonValue = await AsyncStorage.getItem(key);
+        if (jsonValue) {
+          const value = JSON.parse(jsonValue);
+          if (value === null || value === undefined) {
+            return defaultValue;
+          } else {
+            return value;
+          }
+        } else if (defaultValue !== undefined) {
+          return defaultValue;
+        } else {
+          return null;
+        }
+      } catch (e) {
+        console.error(`[storage] Error reading ${key}`, e);
+        return defaultValue || null;
+      }
+    },
+    setItem: async (key: string, item: any) => {
+      try {
+        const jsonValue = JSON.stringify(item);
+        await AsyncStorage.setItem(key, jsonValue);
+      } catch (e) {
+        console.error(`[storage] Error storing ${key}`, item, e);
+        throw new Error(e as any);
+      }
+    },
+  };
+
+  tracking = {
+    log: (message: string) => {
+      console.info(message);
+    },
+  };
+
+  initIcons = () => {
+    console.debug("[unifier] Initializing icons");
+  };
+}
+
+const NOTIFICATION_TAB_KEY = "@unifier/tabNotifications";
+
+export const Unifier = new UnifierClass();

package/src/Utilities.tsx

@@ -0,0 +1,161 @@
+// Originally based on https://github.com/pinterest/gestalt
+// Forked, updated to Typescript, and added features.
+import get from "lodash/get";
+
+export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
+  const inline = get(inlineStyle, "__style");
+  const dangerouslySetInlineStyle = {
+    __style: {
+      ...inline,
+      ...newStyle,
+    },
+  };
+
+  return dangerouslySetInlineStyle;
+}
+
+/*
+
+Style is a monoid that capture the "to-be-applied" styles (inline and classes)
+for a Box. It's basically set that is closed under an associative binary
+operation and has an identity element such that for all HA HA HA. Yes, it's a
+monoid, which sounds scary but it's not really and actually super useful. All
+that means is that basically you can do two things with it:
+
+    1. concat(concat(a, b), c) === concat(a, concat(b, c));
+    2. concat(identity(), a) === concat(a, identity()) === a;
+
+What that means is that it's really easy to compose styles together and the
+order in which you do so doesn't really matter.
+
+*/
+
+interface InlineStyle {
+  [key: string]: string | number | void;
+}
+
+// TODO: This type should be opaque, however the Babel parser doesn't support
+//       the opaque syntax yet.
+export interface Style {
+  className: Set<string>;
+  inlineStyle: InlineStyle;
+}
+
+export const identity = (): Style => ({
+  className: new Set(),
+  inlineStyle: {},
+});
+
+export const fromClassName = (...classNames: string[]): Style => ({
+  className: new Set(classNames),
+  inlineStyle: {},
+});
+
+export const fromInlineStyle = (inlineStyle: InlineStyle): Style => ({
+  className: new Set(),
+  inlineStyle,
+});
+
+export const concat = (styles: Style[]): Style =>
+  styles.reduce(
+    (
+      {className: classNameA, inlineStyle: inlineStyleA},
+      {className: classNameB, inlineStyle: inlineStyleB}
+    ) => ({
+      className: new Set([...classNameA, ...classNameB]),
+      inlineStyle: {...inlineStyleA, ...inlineStyleB},
+    }),
+    identity()
+  );
+
+export const mapClassName =
+  (fn: (x: string) => string) =>
+  ({className, inlineStyle}: Style): Style => ({
+    className: new Set(Array.from(className).map(fn)),
+    inlineStyle,
+  });
+
+export const toProps = ({
+  className,
+  inlineStyle,
+}: Style): {className: string; style: InlineStyle} => {
+  const props: any = {};
+
+  if (className.size > 0) {
+    // Sorting here ensures that classNames are always stable, reducing diff
+    // churn. Box usually has a small number of properties so it's not a perf
+    // concern.
+    props.className = Array.from(className).sort().join(" ");
+  }
+
+  if (Object.keys(inlineStyle).length > 0) {
+    props.style = inlineStyle;
+  }
+
+  return props;
+};
+
+/*
+
+Transforms
+
+These are a collection of a few functors that take values and returns Style's. OMG, I used the word functor - it's really just a fancy word for function.
+
+*/
+type Functor<T> = (n: T) => Style;
+
+// Adds a classname when a property is present.
+//
+//     <Box top />
+//
+export const toggle =
+  (...classNames: string[]) =>
+  (val?: boolean) =>
+    val ? fromClassName(...classNames) : identity();
+
+// Maps string values to classes
+//
+//     <Box alignItems="center" />
+//
+export const mapping = (map: {[key: string]: string}) => (val: string) =>
+  Object.prototype.hasOwnProperty.call(map, val) ? fromClassName(map[val]) : identity();
+
+// Maps a range of integers to a range of classnames
+//
+//     <Box padding={1} />
+//
+export const range =
+  (scale: string) =>
+  (n: number): Style =>
+    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n}`);
+
+// Like `range`, maps a range of integers to a range of classnames, excluding
+// zero values.
+//
+//     <Box padding={0} />
+export const rangeWithoutZero =
+  (scale: string) =>
+  (n: number): Style =>
+    n === 0 ? identity() : range(scale)(n);
+
+// Binds a string classname to the value in an object. Useful when interacting
+// with ranges that need to come dynamically from a style object. This is
+// similar to the NPM package 'classnames/bind'.
+export function bind<T>(
+  fn: Functor<T>,
+  scope:
+    | {
+        readonly [key: string]: string;
+      }
+    | any
+): (val: T) => Style {
+  const map = mapClassName((name) => scope[name]);
+  return (val: T): Style => map(fn(val));
+}
+
+// This takes a series of the previously defined functors, runs them all
+// against a value and returns the set of their classnames.
+export const union =
+  <T,>(...fns: Functor<T>[]) =>
+  (val: T) =>
+    concat(fns.map((fn) => fn(val)));

package/src/WithLabel.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {WithLabelProps} from "./Common";
+import {Text} from "./Text";
+
+export class WithLabel extends React.Component<WithLabelProps, {}> {
+  render() {
+    const {label, labelInline, labelColor, children} = this.props;
+    // If show is undefined or true, show, only hide for actual false for simplicity.
+    if (this.props.show === false) {
+      return children;
+    }
+    if (!children) {
+      return null;
+    }
+
+    if (label) {
+      return (
+        <Box
+          direction={labelInline ? "row" : "column"}
+          justifyContent={this.props.labelJustifyContent}
+          width="100%"
+        >
+          {this.props.labelPlacement !== "after" && (
+            <Box paddingY={1}>
+              <Text color={labelColor || "darkGray"} size={this.props.labelSize} weight="bold">
+                {label}
+              </Text>
+            </Box>
+          )}
+          {children}
+          {this.props.labelPlacement === "after" && (
+            <Box paddingY={1}>
+              <Text color={labelColor || "darkGray"} size={this.props.labelSize}>
+                {label}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      );
+    } else {
+      return children;
+    }
+  }
+}