From ec96bd0a5fe7c845ea65a8048858fe1f6ea37083 Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Mon, 17 Jan 2022 18:59:44 +1100
Subject: [PATCH 1/6] update: convert balstack to a render function component

---
 src/components/_global/BalStack/BalStack.vue | 162 +++++++++++--------
 1 file changed, 92 insertions(+), 70 deletions(-)

diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue
index 8c2be91c14..35765d203c 100644
--- a/src/components/_global/BalStack/BalStack.vue
+++ b/src/components/_global/BalStack/BalStack.vue
@@ -1,19 +1,8 @@
-<script setup lang="ts">
-import { uniqueId } from 'lodash';
-import { computed, useSlots } from 'vue';
+<script lang="ts">
+import {  defineComponent, PropType, h } from 'vue';
 
 type Spacing = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'none';
-type Props = {
-  vertical?: boolean;
-  horizontal?: boolean;
-  spacing?: Spacing;
-  withBorder?: boolean;
-  ref?: any;
-  align?: 'center' | 'start' | 'end' | 'between';
-  justify?: 'center' | 'start' | 'end' | 'between';
-  isDynamic?: boolean;
-  expandChildren?: boolean;
-};
+type Alignment = 'center' | 'start' | 'end' | 'between';
 
 const SpacingMap: Record<Spacing, number> = {
   xs: 1,
@@ -25,63 +14,96 @@ const SpacingMap: Record<Spacing, number> = {
   none: 0
 };
 
-const props = withDefaults(defineProps<Props>(), {
-  spacing: 'base'
-});
-
-const spacingClass = computed(() => {
-  const spacingType = props.vertical ? 'mb' : 'mr';
-  return `${spacingType}-${SpacingMap[props.spacing]}`;
-});
-
-const stackId = uniqueId();
-const slots = useSlots();
-
-const slotsWithContent = computed(() => {
-  if (props.isDynamic) {
-    if (Array.isArray(slots.default()[0].children)) {
-      return (slots.default()[0].children as any[]).filter(
-        child => child.children !== 'v-if'
-      );
+export default defineComponent({
+  props: {
+    vertical: { type: Boolean, default: () => false },
+    horizontal: { type: Boolean, default: () => false },
+    spacing: {
+      type: String as PropType<Spacing>,
+      default: () => 'base'
+    },
+    withBorder: {
+      type: Boolean,
+      default: () => false
+    },
+    align: {
+      type: String as PropType<Alignment>
+    },
+    justify: {
+      type: String as PropType<Alignment>
+    },
+    isDynamic: {
+      type: Boolean,
+      default: () => false
+    },
+    expandChildren: {
+      type: Boolean,
+      default: () => false
     }
+  },
+  setup(props, { slots, attrs }) {
+    return {
+      slotsWithContent: [],
+      slots,
+      attrs
+    };
+  },
+  render() {
+    const spacingType = this.vertical ? 'mb' : 'mr';
+    const spacingClass = `${spacingType}-${SpacingMap[this.spacing]}`;
+
+    const vNodes = this.$slots.default() || [];
+    const children = vNodes.filter(vNode => vNode.children !== 'v-if');
+    const styledChildren = children.map((child, childIndex) => {
+      let styledNestedChildren = child.children;
+      if (Array.isArray(styledNestedChildren)) {
+        const nonNullishChildren = styledNestedChildren.filter(
+          nestedChild => nestedChild !== undefined || nestedChild !== null
+        );
+        styledNestedChildren = nonNullishChildren.map(
+          (nestedChild, nestedChildIndex) => {
+            return h(nestedChild, {
+              class:
+                nestedChildIndex !== nonNullishChildren.length - 1
+                  ? spacingClass
+                  : null
+            });
+          }
+        );
+        return h(
+          child,
+          {
+            class: childIndex !== children.length - 1 ? spacingClass : null
+          },
+          [styledNestedChildren]
+        );
+      }
+      return h(child, {
+        class: childIndex !== children.length - 1 ? spacingClass : null
+      });
+    });
+    return h(
+      'div',
+      {
+        attrs: this.$attrs,
+        class: [
+          'flex',
+          {
+            'flex-row': this.horizontal,
+            'flex-col': this.vertical,
+            'items-center': this.align === 'center',
+            'items-start': this.align === 'start',
+            'items-end': this.align === 'end',
+            'items-between': this.align === 'between',
+            'justify-center': this.justify === 'center',
+            'justify-start': this.justify === 'start',
+            'justify-end': this.justify === 'end',
+            'justify-between': this.justify === 'between'
+          }
+        ]
+      },
+      [styledChildren]
+    );
   }
-  return slots.default().filter(slot => {
-    if (slot.children !== 'v-if') return true;
-    return false;
-  });
 });
 </script>
-
-<template>
-  <div
-    :class="[
-      'flex',
-      {
-        'flex-row': horizontal,
-        'flex-col': vertical,
-        'items-center': align === 'center',
-        'items-start': align === 'start',
-        'items-end': align === 'end',
-        'items-between': align === 'between',
-        'justify-center': justify === 'center',
-        'justify-start': justify === 'start',
-        'justify-end': justify === 'end',
-        'justify-between': justify === 'between'
-      }
-    ]"
-  >
-    <component
-      v-for="(child, i) in slotsWithContent"
-      :key="`stack-${stackId}-child-${i}-${child?.key || ''}`"
-      :is="child"
-      :class="{
-        [spacingClass]: i !== slotsWithContent.length - 1,
-        'border-b': i !== slotsWithContent.length - 1 && withBorder && vertical,
-        'border-r':
-          i !== slotsWithContent.length - 1 && withBorder && horizontal,
-        'w-full': expandChildren,
-        'dark:border-gray-600': true
-      }"
-    />
-  </div>
-</template>

From bec5fbca0014a8cd7883cf5068b86d13d791c713 Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Mon, 17 Jan 2022 19:00:09 +1100
Subject: [PATCH 2/6] fix: lint

---
 src/components/_global/BalStack/BalStack.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue
index 35765d203c..5c4dee84ce 100644
--- a/src/components/_global/BalStack/BalStack.vue
+++ b/src/components/_global/BalStack/BalStack.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import {  defineComponent, PropType, h } from 'vue';
+import { defineComponent, PropType, h } from 'vue';
 
 type Spacing = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'none';
 type Alignment = 'center' | 'start' | 'end' | 'between';

From 4d01295d0f3fcad9f9db6b7626c830dd97ad3377 Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Mon, 17 Jan 2022 19:01:46 +1100
Subject: [PATCH 3/6] cleanup: remove unneeded isDynamic prop from balstack

---
 src/components/_global/BalStack/BalStack.vue                 | 4 ----
 src/components/_global/BalVerticalSteps/BalVerticalSteps.vue | 2 +-
 src/components/cards/CreatePool/InitialLiquidity.vue         | 2 +-
 src/components/cards/CreatePool/PreviewPool.vue              | 2 +-
 src/components/cards/CreatePool/SimilarPools.vue             | 2 +-
 src/components/cards/CreatePool/SimilarPoolsCompact.vue      | 2 +-
 src/components/cards/CreatePool/WalletPoolTokens.vue         | 4 ++--
 7 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue
index 5c4dee84ce..60e71aba2a 100644
--- a/src/components/_global/BalStack/BalStack.vue
+++ b/src/components/_global/BalStack/BalStack.vue
@@ -32,10 +32,6 @@ export default defineComponent({
     justify: {
       type: String as PropType<Alignment>
     },
-    isDynamic: {
-      type: Boolean,
-      default: () => false
-    },
     expandChildren: {
       type: Boolean,
       default: () => false
diff --git a/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue b/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
index 05e32c305a..8f055364dd 100644
--- a/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
+++ b/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
@@ -74,7 +74,7 @@ function handleNavigate(state: StepState, stepIndex: number) {
     <div class="p-4 border-b dark:border-gray-600">
       <h6 class="dark:text-gray-300">{{ title }}</h6>
     </div>
-    <BalStack vertical isDynamic spacing="base" class="p-4" justify="center">
+    <BalStack vertical spacing="base" class="p-4" justify="center">
       <div
         v-for="(step, i) in visibleSteps"
         :key="`vertical-step-${step.tooltip}`"
diff --git a/src/components/cards/CreatePool/InitialLiquidity.vue b/src/components/cards/CreatePool/InitialLiquidity.vue
index 8913ffc3b2..eb88629a65 100644
--- a/src/components/cards/CreatePool/InitialLiquidity.vue
+++ b/src/components/cards/CreatePool/InitialLiquidity.vue
@@ -226,7 +226,7 @@ function saveAndProceed() {
             </BalStack>
           </AnimatePresence>
         </BalStack>
-        <BalStack isDynamic vertical>
+        <BalStack vertical>
           <TokenInput
             v-for="(address, i) in tokenAddresses"
             :key="i"
diff --git a/src/components/cards/CreatePool/PreviewPool.vue b/src/components/cards/CreatePool/PreviewPool.vue
index 64be78cef6..4836943955 100644
--- a/src/components/cards/CreatePool/PreviewPool.vue
+++ b/src/components/cards/CreatePool/PreviewPool.vue
@@ -156,7 +156,7 @@ function getSwapFeeManager() {
               {{ $t('createAPool.tokensAndSeedLiquidity') }}
             </h6>
           </div>
-          <BalStack vertical spacing="none" withBorder isDynamic>
+          <BalStack vertical spacing="none" withBorder>
             <div
               v-for="token in seedTokens"
               :key="`tokenpreview-${token.tokenAddress}`"
diff --git a/src/components/cards/CreatePool/SimilarPools.vue b/src/components/cards/CreatePool/SimilarPools.vue
index 05bc3e2833..d693e33d61 100644
--- a/src/components/cards/CreatePool/SimilarPools.vue
+++ b/src/components/cards/CreatePool/SimilarPools.vue
@@ -106,7 +106,7 @@ function cancel() {
           </BalStack>
         </BalStack>
       </BalCard>
-      <BalStack isDynamic v-else vertical>
+      <BalStack v-else vertical>
         <BalCard
           shadow="none"
           v-for="pool in relevantSimilarPools"
diff --git a/src/components/cards/CreatePool/SimilarPoolsCompact.vue b/src/components/cards/CreatePool/SimilarPoolsCompact.vue
index e115d77138..b0b61463a3 100644
--- a/src/components/cards/CreatePool/SimilarPoolsCompact.vue
+++ b/src/components/cards/CreatePool/SimilarPoolsCompact.vue
@@ -33,7 +33,7 @@ function getPoolLabel(pool: Pool) {
       <BalIcon class="mt-1" name="alert-circle" size="md" />
       <h6>{{ $t('createAPool.similarPoolsExist') }}</h6>
     </BalStack>
-    <BalStack vertical isDynamic spacing="sm" class="p-4">
+    <BalStack vertical spacing="sm" class="p-4">
       <BalLink
         target="_blank"
         :href="`/#/pool/${pool.id}`"
diff --git a/src/components/cards/CreatePool/WalletPoolTokens.vue b/src/components/cards/CreatePool/WalletPoolTokens.vue
index 66bb88fbd2..c1762dca82 100644
--- a/src/components/cards/CreatePool/WalletPoolTokens.vue
+++ b/src/components/cards/CreatePool/WalletPoolTokens.vue
@@ -55,7 +55,7 @@ const totalFiat = computed(() => {
     <BalStack vertical class="p-4" spacing="sm">
       <div>
         <h6 class="branch relative">Native tokens</h6>
-        <BalStack isDynamic vertical spacing="xs">
+        <BalStack vertical spacing="xs">
           <BalStack
             class="ml-6 twig relative"
             v-for="token in nativeTokens"
@@ -88,7 +88,7 @@ const totalFiat = computed(() => {
             :exit="exitAnimateProps"
             :isVisible="true"
           >
-            <BalStack horizontal justify="between" isDynamic>
+            <BalStack horizontal justify="between">
               <BalStack vertical spacing="none">
                 <h6>{{ _tokens[token]?.symbol || 'N/A' }}</h6>
                 <span class="text-sm text-gray-600">{{

From 1da9e9dc5cf9b4f1379093cc5526f0bfb1408fae Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Tue, 18 Jan 2022 12:17:16 +1100
Subject: [PATCH 4/6] update: implement remaining props and add comments

---
 src/components/_global/BalStack/BalStack.vue | 43 ++++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue
index 60e71aba2a..97b167cb62 100644
--- a/src/components/_global/BalStack/BalStack.vue
+++ b/src/components/_global/BalStack/BalStack.vue
@@ -4,6 +4,9 @@ import { defineComponent, PropType, h } from 'vue';
 type Spacing = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'none';
 type Alignment = 'center' | 'start' | 'end' | 'between';
 
+/**
+ * Maps discrete spacing types to a tailwind spacing tier
+ */
 const SpacingMap: Record<Spacing, number> = {
   xs: 1,
   sm: 2,
@@ -16,22 +19,41 @@ const SpacingMap: Record<Spacing, number> = {
 
 export default defineComponent({
   props: {
+    /**
+     * Stacked top down
+     */
     vertical: { type: Boolean, default: () => false },
+    /**
+     * Stacked left to right
+     */
     horizontal: { type: Boolean, default: () => false },
     spacing: {
       type: String as PropType<Spacing>,
       default: () => 'base'
     },
+    /**
+     * Show a hairline border after each stack element
+     */
     withBorder: {
       type: Boolean,
       default: () => false
     },
+    /**
+     * Flex align prop
+     */
     align: {
       type: String as PropType<Alignment>
     },
+    /**
+     * Flex justify prop
+     */
     justify: {
       type: String as PropType<Alignment>
     },
+    /**
+     * Will cause children of the stack to occupy
+     * as much space as possible.
+     */
     expandChildren: {
       type: Boolean,
       default: () => false
@@ -46,22 +68,35 @@ export default defineComponent({
   },
   render() {
     const spacingType = this.vertical ? 'mb' : 'mr';
-    const spacingClass = `${spacingType}-${SpacingMap[this.spacing]}`;
+    const borderType = this.vertical ? 'b' : 'r';
+    const widthClass = this.expandChildren ? 'w-full' : '';
+    const borderClass = this.withBorder ? `border-${borderType}` : '';
+    const stackNodeClass = `dark:border-gray-600 ${spacingType}-${
+      SpacingMap[this.spacing]
+    } ${borderClass} ${widthClass}`;
 
+    // @ts-ignore
     const vNodes = this.$slots.default() || [];
+    // if a childs 'value' is 'v-if', it is not visible so filter it out
+    // to not cause an empty node to render with margin
     const children = vNodes.filter(vNode => vNode.children !== 'v-if');
+    // need to apply margin and decorator classes to all children
     const styledChildren = children.map((child, childIndex) => {
       let styledNestedChildren = child.children;
+      // a child can have an array of nested children, this is when
+      // those children are rendered as part of a 'v-for directive'
       if (Array.isArray(styledNestedChildren)) {
+        // and those children can be nullish too
         const nonNullishChildren = styledNestedChildren.filter(
           nestedChild => nestedChild !== undefined || nestedChild !== null
         );
         styledNestedChildren = nonNullishChildren.map(
           (nestedChild, nestedChildIndex) => {
+            //@ts-ignore
             return h(nestedChild, {
               class:
                 nestedChildIndex !== nonNullishChildren.length - 1
-                  ? spacingClass
+                  ? stackNodeClass
                   : null
             });
           }
@@ -69,13 +104,13 @@ export default defineComponent({
         return h(
           child,
           {
-            class: childIndex !== children.length - 1 ? spacingClass : null
+            class: childIndex !== children.length - 1 ? stackNodeClass : null
           },
           [styledNestedChildren]
         );
       }
       return h(child, {
-        class: childIndex !== children.length - 1 ? spacingClass : null
+        class: childIndex !== children.length - 1 ? stackNodeClass : null
       });
     });
     return h(

From 5292edd7cc216f217de2ac5b21b1016e186b16dd Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Thu, 20 Jan 2022 13:21:44 +1100
Subject: [PATCH 5/6] update: add balstack spec file

---
 .../_global/BalStack/BalStack.spec.ts         | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/_global/BalStack/BalStack.spec.ts

diff --git a/src/components/_global/BalStack/BalStack.spec.ts b/src/components/_global/BalStack/BalStack.spec.ts
new file mode 100644
index 0000000000..fd57e350cb
--- /dev/null
+++ b/src/components/_global/BalStack/BalStack.spec.ts
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/vue';
+import BalStack from './BalStack.vue';
+
+describe('BalStack', () => {
+  describe('When using BalStack', () => {
+    it('should render items horizontally when the horizontal prop is supplied', () => {
+      const { getByText } = render(BalStack, {
+        slots: {
+          default: '<div>First</div><div>Second</div><div>Third</div>'
+        }
+      });
+
+      // check that elements are actually rendered as children
+      expect(getByText('First')).toBeVisible();
+      expect(getByText('Second')).toBeVisible();
+      expect(getByText('Third')).toBeVisible();
+    });
+
+    // it('should render items vertically when the vertical prop is supplied', () => {});
+
+    // it('should render items with a space between them', () => {});
+
+    // it('should render items with a border between them if withBorder prop is supplied', () => {});
+  });
+});

From 576de39db2bceb95996e6b398f2393f48126e410 Mon Sep 17 00:00:00 2001
From: 1saf <me@ansaf.net>
Date: Thu, 20 Jan 2022 14:37:29 +1100
Subject: [PATCH 6/6] update: complete balstack tests

---
 .../_global/BalStack/BalStack.spec.ts         | 68 +++++++++++++++++--
 src/plugins/components.ts                     |  2 +-
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/components/_global/BalStack/BalStack.spec.ts b/src/components/_global/BalStack/BalStack.spec.ts
index fd57e350cb..78a17a6027 100644
--- a/src/components/_global/BalStack/BalStack.spec.ts
+++ b/src/components/_global/BalStack/BalStack.spec.ts
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/vue';
 import BalStack from './BalStack.vue';
 
-describe('BalStack', () => {
+describe.only('BalStack', () => {
   describe('When using BalStack', () => {
-    it('should render items horizontally when the horizontal prop is supplied', () => {
+    it('should render items', () => {
       const { getByText } = render(BalStack, {
         slots: {
           default: '<div>First</div><div>Second</div><div>Third</div>'
@@ -16,10 +16,68 @@ describe('BalStack', () => {
       expect(getByText('Third')).toBeVisible();
     });
 
-    // it('should render items vertically when the vertical prop is supplied', () => {});
+    it('should render items horizontally when the horizontal prop is supplied', () => {
+      const { getByText } = render(BalStack, {
+        slots: {
+          default: '<div>First</div><div>Second</div><div>Third</div>'
+        },
+        props: {
+          horizontal: true
+        }
+      });
+
+      // its fine to make this assumption here as we render the children without any wrappers
+      const stackEl = getByText('First').parentElement;
+      expect(stackEl).toHaveClass('flex-row');
+    });
+
+    it('should render items verticlly if vertical prop is supplied', () => {
+      const { getByText } = render(BalStack, {
+        slots: {
+          default: '<div>First</div><div>Second</div><div>Third</div>'
+        },
+        props: {
+          vertical: true
+        }
+      });
+
+      // its fine to make this assumption here as we render the children without any wrappers
+      const stackEl = getByText('First').parentElement;
+      expect(stackEl).toHaveClass('flex-col');
+    });
+
+    it('should render items with space between them', () => {
+      const { getByText } = render(BalStack, {
+        slots: {
+          default: '<div>First</div><div>Second</div><div>Third</div>'
+        },
+        props: {
+          vertical: true
+        }
+      });
 
-    // it('should render items with a space between them', () => {});
+      // the default spacing unit (tailwind) is 4. So can be either mb-4 or mr-4
+      expect(getByText('First')).toHaveClass('mb-4');
+      expect(getByText('Second')).toHaveClass('mb-4');
+      // last el shouldn't have a spacing class
+      expect(getByText('Third')).not.toHaveClass('mb-4');
+    });
+    it('should render items with a border between them if withBorder prop is supplied', () => {
+      const { getByText } = render(BalStack, {
+        slots: {
+          default: '<div>First</div><div>Second</div><div>Third</div>'
+        },
+        props: {
+          vertical: true,
+          withBorder: true
+        }
+      });
 
-    // it('should render items with a border between them if withBorder prop is supplied', () => {});
+      // the default spacing unit (tailwind) is 4. So can be either mb-4 or mr-4
+      expect(getByText('First')).toHaveClass('mb-4 border-b');
+      expect(getByText('Second')).toHaveClass('mb-4 border-b');
+      // last el shouldn't have a spacing class
+      expect(getByText('Third')).not.toHaveClass('mb-4 border-b');
+    });
   });
 });
diff --git a/src/plugins/components.ts b/src/plugins/components.ts
index ac1761b10c..8c52957e94 100644
--- a/src/plugins/components.ts
+++ b/src/plugins/components.ts
@@ -6,7 +6,7 @@ export function registerGlobalComponents(app: App): void {
   const req = require.context(
     '@/components/_global',
     true,
-    /^((?!stories).)*\.(js|ts|vue)$/i
+    /^((?!(stories|spec)).)*\.(js|ts|vue)$/i
   );
   for (const filePath of req.keys()) {
     const componentName = parsePath(filePath).name;