@terreno/ui 0.3.0 → 0.4.0

package/src/MarkdownEditorField.tsx

@@ -0,0 +1,154 @@
+import type React from "react";
+import {useMemo, useRef} from "react";
+import {Platform, Pressable, Text as RNText, TextInput, View} from "react-native";
+
+import {Box} from "./Box";
+import type {ErrorTextProps, HelperTextProps} from "./Common";
+import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
+import {MarkdownView} from "./MarkdownView";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+interface MarkdownEditorFieldProps extends HelperTextProps, ErrorTextProps {
+  title?: string;
+  value?: string;
+  onChange: (text: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  testID?: string;
+}
+
+interface ToolbarButton {
+  label: string;
+  insert: (value: string) => string;
+}
+
+const TOOLBAR_BUTTONS: ToolbarButton[] = [
+  {insert: (v) => `${v}**text**`, label: "B"},
+  {insert: (v) => `${v}_text_`, label: "I"},
+  {insert: (v) => `${v}~~text~~`, label: "~"},
+  {insert: (v) => `${v}\`code\``, label: "<>"},
+  {insert: (v) => (v ? `${v}\n# text` : "# text"), label: "H1"},
+  {insert: (v) => (v ? `${v}\n## text` : "## text"), label: "H2"},
+  {insert: (v) => (v ? `${v}\n- item` : "- item"), label: "•"},
+  {insert: (v) => (v ? `${v}\n> text` : "> text"), label: ">"},
+  {insert: (v) => `${v}[text](url)`, label: "🔗"},
+];
+
+export const MarkdownEditorField: React.FC<MarkdownEditorFieldProps> = ({
+  title,
+  value = "",
+  onChange,
+  placeholder,
+  disabled,
+  errorText,
+  helperText,
+  testID,
+}) => {
+  const {theme} = useTheme();
+  const isWeb = Platform.OS === "web";
+  const inputRef = useRef<TextInput>(null);
+
+  const monoFont = useMemo(
+    () => (isWeb ? "monospace" : Platform.select({android: "monospace", ios: "Menlo"})),
+    [isWeb]
+  );
+
+  return (
+    <View testID={testID}>
+      {title && <FieldTitle text={title} />}
+      <Box
+        border={errorText ? "error" : "default"}
+        direction={isWeb ? "row" : "column"}
+        gap={0}
+        overflow="hidden"
+        rounding="md"
+      >
+        <View style={{flex: 1, minHeight: 200}}>
+          <TextInput
+            editable={!disabled}
+            multiline
+            onChangeText={onChange}
+            placeholder={placeholder ?? "Enter markdown..."}
+            placeholderTextColor={theme.text.secondaryDark}
+            ref={inputRef}
+            style={{
+              backgroundColor: theme.surface.base,
+              borderBottomWidth: isWeb ? 0 : 1,
+              borderColor: theme.border.default,
+              borderRightWidth: isWeb ? 1 : 0,
+              color: theme.text.primary,
+              flex: 1,
+              fontFamily: monoFont,
+              fontSize: 14,
+              minHeight: 200,
+              padding: 12,
+              textAlignVertical: "top",
+            }}
+            testID={testID ? `${testID}-input` : undefined}
+            value={value}
+          />
+          {!disabled && (
+            <View
+              style={{
+                backgroundColor: theme.surface.neutralLight,
+                borderColor: theme.border.default,
+                borderTopWidth: 1,
+                flexDirection: "row",
+                flexWrap: "wrap",
+                gap: 2,
+                paddingHorizontal: 4,
+                paddingVertical: 3,
+              }}
+            >
+              {TOOLBAR_BUTTONS.map((button) => (
+                <Pressable
+                  key={button.label}
+                  onPress={() => onChange(button.insert(value))}
+                  style={({pressed}) => ({
+                    alignItems: "center",
+                    backgroundColor: pressed ? theme.border.default : "transparent",
+                    borderColor: theme.border.default,
+                    borderRadius: 3,
+                    borderWidth: 1,
+                    justifyContent: "center",
+                    minHeight: 24,
+                    minWidth: 28,
+                    paddingHorizontal: 5,
+                    paddingVertical: 3,
+                  })}
+                >
+                  <RNText
+                    style={{
+                      color: theme.text.primary,
+                      fontFamily: monoFont,
+                      fontSize: 12,
+                      fontWeight: button.label === "B" ? "700" : "400",
+                      lineHeight: 14,
+                      textAlign: "center",
+                    }}
+                  >
+                    {button.label}
+                  </RNText>
+                </Pressable>
+              ))}
+            </View>
+          )}
+        </View>
+        <View style={{flex: 1, minHeight: 200}}>
+          <Box color="base" padding={3} style={{flex: 1, minHeight: 200}}>
+            {value ? (
+              <MarkdownView>{value}</MarkdownView>
+            ) : (
+              <Text color="secondaryDark" size="sm">
+                Preview
+              </Text>
+            )}
+          </Box>
+        </View>
+      </Box>
+      {errorText && <FieldError text={errorText} />}
+      {helperText && <FieldHelperText text={helperText} />}
+    </View>
+  );
+};

package/src/MarkdownView.tsx

@@ -48,10 +48,43 @@ export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boole
     "text-regular": Nunito_400Regular,
   });
 
+  const monoFont = isWeb ? "monospace" : Platform.select({android: "monospace", ios: "Menlo"});
+
   return (
     <Markdown
       style={{
         body: {fontFamily: "text", ...color},
+        code_block: {
+          backgroundColor: theme.surface.neutralLight,
+          borderColor: theme.border.default,
+          borderRadius: 4,
+          borderWidth: 1,
+          fontFamily: monoFont,
+          fontSize: 13,
+          padding: 8,
+          ...color,
+        },
+        code_inline: {
+          backgroundColor: theme.surface.neutralLight,
+          borderColor: theme.border.default,
+          borderRadius: 3,
+          borderWidth: 1,
+          fontFamily: monoFont,
+          fontSize: 13,
+          paddingHorizontal: 4,
+          paddingVertical: 1,
+          ...color,
+        },
+        fence: {
+          backgroundColor: theme.surface.neutralLight,
+          borderColor: theme.border.default,
+          borderRadius: 4,
+          borderWidth: 1,
+          fontFamily: monoFont,
+          fontSize: 13,
+          padding: 8,
+          ...color,
+        },
         heading1: {fontFamily: "heading-bold", fontSize: sizes.xl, ...color},
         heading2: {fontFamily: "heading-bold", fontSize: sizes.lg, ...color},
         heading3: {fontFamily: "heading-bold", fontSize: sizes.md, ...color},

package/src/__snapshots__/MarkdownView.test.tsx.snap

@@ -849,12 +849,14 @@ exports[`MarkdownView renders code blocks 1`] = `
             "fontFamily": "text",
           },
           {
-            "backgroundColor": "#f5f5f5",
-            "borderColor": "#CCCCCC",
+            "backgroundColor": "#D9D9D9",
+            "borderColor": "#CDCDCD",
             "borderRadius": 4,
             "borderWidth": 1,
-            "fontFamily": "Courier",
-            "padding": 10,
+            "color": "#1C1C1C",
+            "fontFamily": "Menlo",
+            "fontSize": 13,
+            "padding": 8,
           },
         ],
       },
@@ -907,12 +909,16 @@ exports[`MarkdownView renders inline code 1`] = `
                     "fontFamily": "text",
                   },
                   {
-                    "backgroundColor": "#f5f5f5",
-                    "borderColor": "#CCCCCC",
-                    "borderRadius": 4,
+                    "backgroundColor": "#D9D9D9",
+                    "borderColor": "#CDCDCD",
+                    "borderRadius": 3,
                     "borderWidth": 1,
-                    "fontFamily": "Courier",
+                    "color": "#1C1C1C",
+                    "fontFamily": "Menlo",
+                    "fontSize": 13,
                     "padding": 10,
+                    "paddingHorizontal": 4,
+                    "paddingVertical": 1,
                   },
                 ],
               },

package/src/index.tsx

@@ -43,6 +43,7 @@ export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./login";
 
+export * from "./MarkdownEditorField";
 export * from "./MarkdownView";
 export * from "./MediaQuery";
 export * from "./MobileAddressAutoComplete";