Add additional sections, clean up some code

Author: rogden

src/components/Canvas/Canvas.vue

@@ -29,14 +29,23 @@
             v-for="section in configTransformed"
             :key="section.title"
             :href="`#${section.title}`"
-            class="block py-2 px-3 text-gray-600 hover:text-teal-600 hover:bg-teal-200 hover:opacity-25 text-base rounded-sm"
+            class="block py-2 px-3 text-gray-600 hover:text-gray-900 text-base rounded-sm"
           >
             {{ section.title }}
           </a>
         </nav>
         <div class="pr-4">
-          <CanvasSection v-for="section in configTransformed" :key="section.title" :title="section.title" :id="section.title">
-            <component :is="sectionComponent(section.component)" :data="section.data" />
+          <CanvasSection
+            v-for="section in configTransformed"
+            :key="section.title"
+            :title="section.title"
+            :id="section.title"
+          >
+            <component
+              :is="sectionComponent(section.component)"
+              :data="section.data"
+              :config="config"
+            />
           </CanvasSection>
         </div>
       </div>
@@ -45,7 +54,7 @@
 </template>
 
 <script>
-import configParser, { transformThemeForCanvas } from '@/lib/twConfigParser'
+import themeComponentMapper from '@/utils/themeComponentMapper'
 import CanvasSection from './CanvasSection'
 import Spacing from './Sections/Spacing'
 
@@ -66,13 +75,12 @@ export default {
     sectionComponent: (component) => {
       return require(`./Sections/${component}.vue`).default
     },
+
     fileSelected (e) {
       const fr = new FileReader()
       fr.onload = (e) => {
-        console.log(e)
-        this.config = configParser(e.target.result)
-        this.configTransformed = transformThemeForCanvas(this.config)
-        console.log(this.config)
+        this.config = JSON.parse(e.target.result)
+        this.configTransformed = themeComponentMapper(this.config)
       }
       fr.readAsText(e.target.files[0])
     }

src/components/Canvas/CanvasSection.vue

@@ -1,7 +1,6 @@
 <template>
   <section class="mb-16 max-w-full">
     <h1 class="mb-1 text-4xl text-gray-800">{{ title }}</h1>
-    <p class="mb-4 text-gray-600">This is the description of the section. You can use it to do cool things.</p>
     <div class="bg-white p-6 rounded border-gray-300 border">
       <slot />
     </div>

src/components/Canvas/Sections/BorderRadius.vue

@@ -8,7 +8,7 @@
         }"
       />
       <CanvasBlockLabel
-        :label="`rounded-${prop}`"
+        :label="`${removeDefaultSuffix(`rounded-${prop}`)}`"
         :value="value"
       />
     </div>
@@ -17,16 +17,22 @@
 
 <script>
 import CanvasBlockLabel from '../CanvasBlockLabel'
+import { removeDefaultSuffix } from '@/utils'
 
 export default {
   components: {
     CanvasBlockLabel
   },
+
   props: {
     data: {
       type: Object,
       required: true
     }
+  },
+
+  methods: {
+    removeDefaultSuffix
   }
 }
 </script>

src/components/Canvas/Sections/BorderWidth.vue

@@ -12,7 +12,7 @@
         }"
       />
       <CanvasBlockLabel
-        :label="`rounded-${prop}`"
+        :label="`${removeDefaultSuffix(`border-${prop}`)}`"
         :value="value"
       />
     </div>
@@ -21,16 +21,22 @@
 
 <script>
 import CanvasBlockLabel from '../CanvasBlockLabel'
+import { removeDefaultSuffix } from '@/utils'
 
 export default {
   components: {
     CanvasBlockLabel
   },
+
   props: {
     data: {
       type: Object,
       required: true
     }
+  },
+
+  methods: {
+    removeDefaultSuffix
   }
 }
 </script>

src/components/Canvas/Sections/FontWeight.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="">
+    <div
+      v-for="(value, prop) in data"
+      class="mb-4"
+      :key="prop"
+    >
+      <div class="border p-4 rounded">
+        <p
+          class="mb-2 leading-none text-2xl"
+          :style="{
+            fontWeight: value
+          }"
+        >
+          The quick brown fox jumped over the lazy dog.
+        </p>
+        <CanvasBlockLabel
+          :label="`font-${prop}`"
+          :value="value"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CanvasBlockLabel from '../CanvasBlockLabel'
+
+export default {
+  components: {
+    CanvasBlockLabel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/components/Canvas/Sections/MaxHeight.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="">
+    <div
+      v-for="(value, prop) in data"
+      :key="prop"
+      class="mb-6"
+    >
+        <div
+          class="mb-2 bg-gray-400"
+          :style="{
+            height: value
+          }"
+        />
+      <CanvasBlockLabel
+        :label="`h-${prop}`"
+        :value="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CanvasBlockLabel from '../CanvasBlockLabel'
+
+export default {
+  components: {
+    CanvasBlockLabel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/components/Canvas/Sections/MaxWidth.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div
+      v-for="(value, prop) in data"
+      :key="prop"
+      class="mb-6"
+    >
+      <div class="mb-2 bg-gray-200">
+        <div
+          class="bg-gray-400"
+          :style="{
+            maxWidth: value,
+            height: '100px'
+          }"
+        />
+      </div>
+      <CanvasBlockLabel
+        :label="`max-w-${prop}`"
+        :value="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CanvasBlockLabel from '../CanvasBlockLabel'
+
+export default {
+  components: {
+    CanvasBlockLabel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/components/Canvas/Sections/MinHeight.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="">
+    <div
+      v-for="(value, prop) in data"
+      :key="prop"
+      class="mb-6"
+    >
+        <div
+          class="mb-2 bg-gray-400"
+          :style="{
+            minHeight: value
+          }"
+        />
+      <CanvasBlockLabel
+        :label="`min-h-${prop}`"
+        :value="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CanvasBlockLabel from '../CanvasBlockLabel'
+
+export default {
+  components: {
+    CanvasBlockLabel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/components/Canvas/Sections/MinWidth.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div
+      v-for="(value, prop) in data"
+      :key="prop"
+      class="mb-6"
+    >
+      <div class="mb-2 bg-gray-200">
+        <div
+          class="bg-gray-400"
+          :style="{
+            maxWidth: value,
+            height: '100px'
+          }"
+        />
+      </div>
+      <CanvasBlockLabel
+        :label="`min-w-${prop}`"
+        :value="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CanvasBlockLabel from '../CanvasBlockLabel'
+
+export default {
+  components: {
+    CanvasBlockLabel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/components/Canvas/Sections/Shadows.vue

@@ -12,7 +12,7 @@
           }"
         />
         <CanvasBlockLabel
-          :label="`shadow-${prop}`"
+          :label="`${removeDefaultSuffix(`shadow-${prop}`)}`"
           :value="value"
         />
     </div>
@@ -21,16 +21,22 @@
 
 <script>
 import CanvasBlockLabel from '../CanvasBlockLabel'
+import { removeDefaultSuffix } from '@/utils'
 
 export default {
   components: {
     CanvasBlockLabel
   },
+
   props: {
     data: {
       type: Object,
       required: true
     }
+  },
+
+  methods: {
+    removeDefaultSuffix
   }
 }
 </script>