From e5021187e96b78b53203bd95d08d6818aea47d17 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Wed, 14 Jul 2021 15:10:31 +0200
Subject: New Ignite 7.0.6 app

---
 app/components/text/text.presets.ts | 48 +++++++++++++++++++
 app/components/text/text.props.ts   | 37 +++++++++++++++
 app/components/text/text.story.tsx  | 92 +++++++++++++++++++++++++++++++++++++
 app/components/text/text.tsx        | 28 +++++++++++
 4 files changed, 205 insertions(+)
 create mode 100644 app/components/text/text.presets.ts
 create mode 100644 app/components/text/text.props.ts
 create mode 100644 app/components/text/text.story.tsx
 create mode 100644 app/components/text/text.tsx

(limited to 'app/components/text')

diff --git a/app/components/text/text.presets.ts b/app/components/text/text.presets.ts
new file mode 100644
index 0000000..9622268
--- /dev/null
+++ b/app/components/text/text.presets.ts
@@ -0,0 +1,48 @@
+import { TextStyle } from "react-native"
+import { color, typography } from "../../theme"
+
+/**
+ * All text will start off looking like this.
+ */
+const BASE: TextStyle = {
+  fontFamily: typography.primary,
+  color: color.text,
+  fontSize: 15,
+}
+
+/**
+ * All the variations of text styling within the app.
+ *
+ * You want to customize these to whatever you need in your app.
+ */
+export const presets = {
+  /**
+   * The default text styles.
+   */
+  default: BASE,
+
+  /**
+   * A bold version of the default text.
+   */
+  bold: { ...BASE, fontWeight: "bold" } as TextStyle,
+
+  /**
+   * Large headers.
+   */
+  header: { ...BASE, fontSize: 24, fontWeight: "bold" } as TextStyle,
+
+  /**
+   * Field labels that appear on forms above the inputs.
+   */
+  fieldLabel: { ...BASE, fontSize: 13, color: color.dim } as TextStyle,
+
+  /**
+   * A smaller piece of secondard information.
+   */
+  secondary: { ...BASE, fontSize: 9, color: color.dim } as TextStyle,
+}
+
+/**
+ * A list of preset names.
+ */
+export type TextPresets = keyof typeof presets
diff --git a/app/components/text/text.props.ts b/app/components/text/text.props.ts
new file mode 100644
index 0000000..d2c55dc
--- /dev/null
+++ b/app/components/text/text.props.ts
@@ -0,0 +1,37 @@
+import { StyleProp, TextProps as TextProperties, TextStyle } from "react-native"
+import i18n from "i18n-js"
+import { TextPresets } from "./text.presets"
+import { TxKeyPath } from "../../i18n"
+
+export interface TextProps extends TextProperties {
+  /**
+   * Children components.
+   */
+  children?: React.ReactNode
+
+  /**
+   * Text which is looked up via i18n.
+   */
+  tx?: TxKeyPath
+
+  /**
+   * Optional options to pass to i18n. Useful for interpolation
+   * as well as explicitly setting locale or translation fallbacks.
+   */
+  txOptions?: i18n.TranslateOptions
+
+  /**
+   * The text to display if not using `tx` or nested components.
+   */
+  text?: string
+
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<TextStyle>
+
+  /**
+   * One of the different types of text presets.
+   */
+  preset?: TextPresets
+}
diff --git a/app/components/text/text.story.tsx b/app/components/text/text.story.tsx
new file mode 100644
index 0000000..5582c1b
--- /dev/null
+++ b/app/components/text/text.story.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+
+import * as React from "react"
+import { View, ViewStyle } from "react-native"
+import { storiesOf } from "@storybook/react-native"
+import { StoryScreen, Story, UseCase } from "../../../storybook/views"
+import { color } from "../../theme"
+import { Text } from "./text"
+
+declare let module
+
+const VIEWSTYLE = {
+  flex: 1,
+  backgroundColor: color.storybookDarkBg,
+}
+const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: "#7fff00" }]
+
+storiesOf("Text", module)
+  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
+  .add("Style Presets", () => (
+    <Story>
+      <UseCase text="default" usage="Used for normal body text.">
+        <View style={VIEWSTYLE}>
+          <Text>Hello!</Text>
+          <Text style={{ paddingTop: 10 }}>
+            Check out{"\n"}
+            my{"\n"}
+            line height
+          </Text>
+          <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text>
+          <Text>$123,456,789.00</Text>
+        </View>
+      </UseCase>
+      <UseCase text="bold" usage="Used for bolded body text.">
+        <View style={VIEWSTYLE}>
+          <Text preset="bold">Osnap! I'm puffy.</Text>
+        </View>
+      </UseCase>
+      <UseCase text="header" usage="Used for major section headers.">
+        <View style={VIEWSTYLE}>
+          <Text preset="header">Behold!</Text>
+        </View>
+      </UseCase>
+    </Story>
+  ))
+  .add("Passing Content", () => (
+    <Story>
+      <UseCase
+        text="text"
+        usage="Used when you want to pass a value but don't want to open a child."
+      >
+        <View style={VIEWSTYLE}>
+          <Text text="Heyo!" />
+        </View>
+      </UseCase>
+      <UseCase text="tx" usage="Used for looking up i18n keys.">
+        <View style={VIEWSTYLE}>
+          <Text tx="common.ok" />
+          <Text tx="common.cancel" />
+        </View>
+      </UseCase>
+      <UseCase
+        text="children"
+        usage="Used like you would normally use a React Native <Text> component."
+      >
+        <View style={VIEWSTYLE}>
+          <Text>Passing strings as children.</Text>
+        </View>
+      </UseCase>
+      <UseCase text="nested children" usage="You can embed them and change styles too.">
+        <View style={VIEWSTYLE}>
+          <Text>
+            {" "}
+            Hello <Text preset="bold">bolded</Text> World.
+          </Text>
+        </View>
+      </UseCase>
+    </Story>
+  ))
+  .add("Styling", () => (
+    <Story>
+      <UseCase text="Style array" usage="Text with style array">
+        <View style={viewStyleArray}>
+          <Text>
+            {" "}
+            Hello <Text preset="bold">bolded</Text> World.
+          </Text>
+        </View>
+      </UseCase>
+    </Story>
+  ))
diff --git a/app/components/text/text.tsx b/app/components/text/text.tsx
new file mode 100644
index 0000000..3ea613b
--- /dev/null
+++ b/app/components/text/text.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Text as ReactNativeText } from "react-native"
+import { presets } from "./text.presets"
+import { TextProps } from "./text.props"
+import { translate } from "../../i18n"
+
+/**
+ * For your text displaying needs.
+ *
+ * This component is a HOC over the built-in React Native one.
+ */
+export function Text(props: TextProps) {
+  // grab the props
+  const { preset = "default", tx, txOptions, text, children, style: styleOverride, ...rest } = props
+
+  // figure out which content to use
+  const i18nText = tx && translate(tx, txOptions)
+  const content = i18nText || text || children
+
+  const style = presets[preset] || presets.default
+  const styles = [style, styleOverride]
+
+  return (
+    <ReactNativeText {...rest} style={styles}>
+      {content}
+    </ReactNativeText>
+  )
+}
-- 
cgit v1.2.3