From 27a5f0fc6f61a3166811fdfd162d22806f03bb09 Mon Sep 17 00:00:00 2001
From: Stijn Van Hulle <stijn@stijnvanhulle.be>
Date: Mon, 9 Oct 2023 23:35:49 +0200
Subject: [PATCH] feat: `useIndent` hook

---
 .../react-template/src/components/Text.tsx    | 34 ++--------------
 packages/react-template/src/hooks/index.ts    |  1 +
 .../react-template/src/hooks/useIndent.ts     | 39 +++++++++++++++++++
 3 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 packages/react-template/src/hooks/useIndent.ts

diff --git a/packages/react-template/src/components/Text.tsx b/packages/react-template/src/components/Text.tsx
index fd4b0fc2f..bc83ec426 100644
--- a/packages/react-template/src/components/Text.tsx
+++ b/packages/react-template/src/components/Text.tsx
@@ -1,41 +1,15 @@
 import React from 'react'
 
-import type { ReactNode } from 'react'
+import { useIndent } from '../hooks/useIndent'
 
 type Props = {
-  children?: ReactNode
+  children?: React.ReactNode
   indentSize?: number
 }
 
-export function createIndent(size: number): string {
-  return Array.from({ length: size }).join(' ')
-}
-
 export function Text({ indentSize = 0, children }: Props): React.ReactNode {
-  const indentBefore = createIndent(indentSize)
-
-  let indentChildren
-
-  if (indentSize && typeof children === 'string') {
-    indentChildren = children.replaceAll('\n', `\n${createIndent(4)}`)
-  }
-
-  if (indentSize && Array.isArray(children)) {
-    indentChildren = children.map((child) => {
-      let text: string = child as string
-
-      if (typeof text === 'string') {
-        if (text.startsWith('\n')) {
-          text = text.replace('\n', '')
-        }
-        if (text.substring(text.length - 1, text.length) === '\n') {
-          text = text.substring(0, text.length - 2)
-        }
-        text = text.replaceAll('\n', `\n${createIndent(4)}`)
-      }
-      return text
-    })
-  }
+  const indentBefore = useIndent({ size: indentSize })
+  const indentChildren = useIndent({ size: 4, children })
 
   return (
     <kubb-text>
diff --git a/packages/react-template/src/hooks/index.ts b/packages/react-template/src/hooks/index.ts
index b3ad03cf5..80558c987 100644
--- a/packages/react-template/src/hooks/index.ts
+++ b/packages/react-template/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useApp.ts'
 export * from './useMeta.ts'
+export * from './useIndent.ts'
diff --git a/packages/react-template/src/hooks/useIndent.ts b/packages/react-template/src/hooks/useIndent.ts
new file mode 100644
index 000000000..6818b0221
--- /dev/null
+++ b/packages/react-template/src/hooks/useIndent.ts
@@ -0,0 +1,39 @@
+type Props = {
+  size: number
+  children?: React.ReactNode
+}
+
+function createIndent(size: number): string {
+  return Array.from({ length: size }).join(' ')
+}
+
+export function useIndent({ size, children }: Props): React.ReactNode {
+  let indentWithChildren: React.ReactNode
+
+  if (!children) {
+    return createIndent(size)
+  }
+
+  if (typeof children === 'string') {
+    indentWithChildren = children.replaceAll('\n', `\n${createIndent(size)}`)
+  }
+
+  if (Array.isArray(children)) {
+    indentWithChildren = children.map((child) => {
+      let text: string = child as string
+
+      if (typeof text === 'string') {
+        if (text.startsWith('\n')) {
+          text = text.replace('\n', '')
+        }
+        if (text.substring(text.length - 1, text.length) === '\n') {
+          text = text.substring(0, text.length - 2)
+        }
+        text = text.replaceAll('\n', `\n${createIndent(size)}`)
+      }
+      return text
+    })
+  }
+
+  return indentWithChildren
+}