From 4a80af1bc66778d18b098550f6ddb27704fd1595 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 12 Apr 2024 09:32:35 +0100
Subject: [PATCH] some line refactor

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 -
 .../controls/FieldContext/lines/Column.svelte |  8 +--
 .../lines/JSONPrimitivesOnly.svelte           | 12 ++--
 .../FieldContext/lines/NotRequired.svelte     |  9 +--
 .../FieldContext/lines/StringNumber.svelte    | 17 ++---
 .../FieldContext/lines/Support.svelte         |  4 +-
 .../FieldContext/typography/Comma.svelte      |  3 +-
 .../FieldContext/typography/InfoWord.svelte   |  5 +-
 .../FieldContext/typography/Line.svelte       | 12 ++--
 .../FieldContext/typography/Period.svelte     |  1 +
 .../FieldContext/typography/Space.svelte      |  6 +-
 .../FieldContext/typography/Text.svelte       | 70 ++++++++++++++++++-
 12 files changed, 108 insertions(+), 41 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10f050c7b6..d5afad9fa2 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
index e1952fd67d..d28748d8e0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte
@@ -35,16 +35,16 @@
   }
 </script>
 
-<Line>
+<Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
     on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />
-  <Space />
-  <Text>is a</Text>
-  <Space />
+  <Text
+    value=" is a "
+  />
   <DocumentationLink
     href={getDocLink(columnType)}
     icon={columnIcon}
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index f2ad385d57..f4726d754b 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -6,10 +6,14 @@
 </script>
 
 
-<Line wrap>
-  <Text>
-    JSON Objects cannot be used, but scalar child values can be if their types are supported
-  </Text><Period />
+<Line>
+  <Text
+    value="JSON Objects cannot be used, but scalar"
+  />
+  <Text
+    value=" child values can be if their individual types are supported"
+  />
+  <Period />
 </Line>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
index 4c90e73916..30dc48fabd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/NotRequired.svelte
@@ -7,8 +7,7 @@
 
 
 <Line>
-  <Text>No</Text>
-  <Space />
+  <Text value="No " />
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
   on:mouseleave={() => setExplanationSubject(subjects.none)}
@@ -20,11 +19,7 @@
     href="https://docs.budibase.com/docs/budibasedb#constraints"
     text="Constraint"
   />
-  <Comma />
-  <Text>
-    so values may be missing
-  </Text>
-  <Period />
+  <Text value=", so values may be missing." />
 </Line>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
index b3499a9733..da9e2ea28e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/StringNumber.svelte
@@ -6,14 +6,11 @@
 </script>
 
 <Line>
-  <Text>Any</Text>
-  <Space />
-<InfoWord
-    on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
-    on:mouseleave={() => setExplanationSubject(subjects.none)}
-  text="non-number values"
-/>
-  <Space />
-  <Text>will be ignored</Text>
-  <Period />
+  <Text value="Any " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="non-number values"
+  />
+  <Text value=" will be ignored." />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
index cfb4831ccb..89d6015560 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/Support.svelte
@@ -49,9 +49,7 @@
     {color}
     {text}
   />
-  <Space />
-  <Text>with</Text>
-  <Space />
+  <Text value=" with " />
   <DocumentationLink
     href="https://docs.budibase.com/docs/chart"
     icon="GraphPie"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
index a1221d5321..03a7f0d51e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Comma.svelte
@@ -5,8 +5,9 @@
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
-    margin-right: 5px;
     line-height: 26px;
     margin-left: 2px;
+    margin-right: 2px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
index 11538c3906..7ace69daf3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte
@@ -51,16 +51,17 @@
 
 <style>
   .infoWord {
+    vertical-align: bottom;
     display: inline-flex;
     box-sizing: border-box;
     padding: 3px 6px;
     border-radius: 5px;
-    vertical-align: sub;
     filter: brightness(100%);
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
     overflow: hidden;
-    transition: filter 300ms
+    transition: filter 300ms;
+    align-items: center;
   }
 
   .infoWord:hover {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 2dc61fa593..7b0c71a604 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -1,9 +1,9 @@
 <script>
-  export let wrap = false
+  export let noWrap = false
 </script>
 <div class="line">
   <span class="bullet">•</span>
-  <div class="content" class:wrap>
+  <div class="content" class:noWrap>
     <slot />
   </div>
 </div>
@@ -27,12 +27,14 @@
   }
 
   .content {
-    display: flex;
     min-width: 0;
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .wrap {
-    display: block;
+  .noWrap {
+    display: flex;
+    flex-wrap: nowrap;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
index c5ab3b498b..8faf71d3ba 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Period.svelte
@@ -7,5 +7,6 @@
     display: inline block;
     line-height: 26px;
     margin-left: 2px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
index e6a1000762..1003a8c577 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Space.svelte
@@ -1,8 +1,10 @@
-<span class="space" />
+<span class="space">{" "}</span>
 
 <style>
   .space {
-    margin-right: 5px;
+    white-space: pre;
     line-height: 26px;
+    width: 5px;
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
index 0b688e7e06..a9b137e025 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte
@@ -1,8 +1,76 @@
-<span class="text"><slot /></span>
+<script>
+  import Comma from "./Comma.svelte";
+  import Period from "./Period.svelte";
+  import Space from "./Space.svelte";
+
+  export let value = null
+
+  const punctuation = [" ", ",", "."]
+
+  const getWords = (value) => {
+    if (typeof value !== "string") {
+      return [];
+    }
+
+    const newWords = [];
+    let lastIndex = 0;
+
+    const makeWord = (i) => {
+      // No word to make, multiple spaces, spaces at start of text etc
+      if (i - lastIndex > 0) {
+        newWords.push(value.substring(lastIndex, i));
+      }
+
+      lastIndex = i + 1;
+    }
+
+    value.split("").forEach((character, i) => {
+      if (punctuation.includes(character)) {
+        makeWord(i);
+        newWords.push(character);
+      }
+    })
+
+    makeWord(value.length);
+
+    return newWords;
+  }
+
+  $: words = getWords(value)
+  $: console.log(words);
+</script>
+
+{#if words.length}
+  {#each words as word}
+    {#if word === " "}
+      <Space />
+    {:else if word === ","}
+      <Comma />
+    {:else if word === "."}
+      <Period />
+    {:else}
+      <span class="text">
+        {word}
+      </span>
+    {/if}
+  {/each}
+{:else}
+  <span class="text"><slot /></span>
+{/if}
 
 <style>
   .text {
     flex-shrink: 0;
     line-height: 26px;
+    vertical-align: middle;
+  }
+
+  .space {
+    margin-right: 5px;
+  }
+
+  .punctuation {
+    color: red;
+    font-size: 20px;
   }
 </style>