feat(playground): playground ui

codebender828 · codebender828 · commit a4ec441b65fa · 2020-10-06T09:45:46.000+08:00
diff --git a/.DS_Store b/.DS_Store
diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/playground/playground.md b/playground/playground.md
@@ -0,0 +1,2 @@
+- [ ] read all `component-name.story.vue` files inside the `./packages` directory
+- [ ] For each Vue file found, parse the component javascript
diff --git a/playground/public/favicon.ico b/playground/public/favicon.ico
diff --git a/playground/src/.generated/.gitignore b/playground/src/.generated/.gitignore
diff --git a/playground/src/.generated/imports.js b/playground/src/.generated/imports.js
@@ -0,0 +1,13 @@
+import Component_1 from "../components/Home.vue";
+const Component_2 = () => import('@chakra-ui/c-alert/examples/base-alert.vue')
+const Component_3 = () => import('@chakra-ui/c-box/examples/base-box.vue')
+const Component_4 = () => import('@chakra-ui/c-box/examples/box-with-chakra-directive.vue')
+const Component_5 = () => import('@chakra-ui/c-button/examples/base-button.vue')
+
+export default {
+  "../components/Home.vue": Component_1,
+  "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
+  "@chakra-ui/c-box/examples/base-box.vue": Component_3,
+  "@chakra-ui/c-box/examples/box-with-chakra-directive.vue": Component_4,
+  "@chakra-ui/c-button/examples/base-button.vue": Component_5
+}
diff --git a/playground/src/.generated/routes.json b/playground/src/.generated/routes.json
@@ -0,0 +1,45 @@
+[
+  {
+    "name": "Home",
+    "path": "/",
+    "component": "../components/Home.vue"
+  },
+  {
+    "name": "Alert",
+    "path": "/c-alert",
+    "children": [
+      {
+        "name": "Base alert",
+        "path": "/c-alert/base-alert",
+        "component": "@chakra-ui/c-alert/examples/base-alert.vue"
+      }
+    ]
+  },
+  {
+    "name": "Box",
+    "path": "/c-box",
+    "children": [
+      {
+        "name": "Base box",
+        "path": "/c-box/base-box",
+        "component": "@chakra-ui/c-box/examples/base-box.vue"
+      },
+      {
+        "name": "Box with chakra directive",
+        "path": "/c-box/box-with-chakra-directive",
+        "component": "@chakra-ui/c-box/examples/box-with-chakra-directive.vue"
+      }
+    ]
+  },
+  {
+    "name": "Button",
+    "path": "/c-button",
+    "children": [
+      {
+        "name": "Base button",
+        "path": "/c-button/base-button",
+        "component": "@chakra-ui/c-button/examples/base-button.vue"
+      }
+    ]
+  }
+]
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/playground/src/components/Home.vue b/playground/src/components/Home.vue
@@ -0,0 +1,40 @@
+<template>
+  <Examples :examples="examples" />
+</template>
+
+<script>
+import { defineComponent, h } from 'vue'
+import CButton from '@chakra-ui/c-button'
+import { RouterLink } from 'vue-router'
+import routes from '../.generated/routes.json'
+
+const Examples = defineComponent({
+  props: ['examples'],
+  setup(props) {
+    return () => {
+      return h(
+        'ul',
+        props.examples.map(example =>
+          h(
+            'li',
+            { key: example.path },
+            example.children
+              ? h('h3', example.name)
+              : [h(RouterLink, { to: example.path }, () => example.name)],
+            example.children && h(Examples, { examples: example.children })
+          )
+        )
+      )
+    }
+  },
+})
+
+export default defineComponent({
+  components: { Examples, CButton },
+  setup() {
+    return {
+      examples: routes,
+    }
+  },
+})
+</script>
diff --git a/playground/src/index.css b/playground/src/index.css
diff --git a/playground/src/main.js b/playground/src/main.js
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+import router from './router'
+
+createApp(App)
+  .use(router)
+  .mount('#app')
diff --git a/playground/src/router.js b/playground/src/router.js
@@ -0,0 +1,27 @@
+import { createWebHistory, createRouter, RouterView } from 'vue-router'
+import lookup from './.generated/imports'
+import generatedRoutes from './.generated/routes.json'
+
+function buildRoutes(routes) {
+  return routes.map(route => {
+    const definition = {
+      path: route.path,
+      component: route.component ? lookup[route.component] : RouterView,
+    }
+
+    if (route.children) {
+      definition.children = buildRoutes(route.children)
+    }
+
+    return definition
+  })
+}
+
+const routes = buildRoutes(generatedRoutes)
+
+console.group(routes)
+
+export default createRouter({
+  history: createWebHistory(),
+  routes,
+})
diff --git a/playground/src/routes-lookup.js b/playground/src/routes-lookup.js
@@ -0,0 +1,13 @@
+import Component_1 from "./components/Home.vue";
+const Component_2 = () => import('@chakra-ui/c-alert/examples/base-alert.vue')
+const Component_3 = () => import('@chakra-ui/c-box/examples/base-box.vue')
+const Component_4 = () => import('@chakra-ui/c-box/examples/box-with-chakra-directive.vue')
+const Component_5 = () => import('@chakra-ui/c-button/examples/base-button.vue')
+
+export default {
+  "./components/Home.vue": Component_1,
+  "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
+  "@chakra-ui/c-box/examples/base-box.vue": Component_3,
+  "@chakra-ui/c-box/examples/box-with-chakra-directive.vue": Component_4,
+  "@chakra-ui/c-button/examples/base-button.vue": Component_5
+}
diff --git a/playground/src/routes.json b/playground/src/routes.json
@@ -0,0 +1,45 @@
+[
+  {
+    "name": "Home",
+    "path": "/",
+    "component": "./components/Home.vue"
+  },
+  {
+    "name": "Alert",
+    "path": "/c-alert",
+    "children": [
+      {
+        "name": "Base alert",
+        "path": "/c-alert/base-alert",
+        "component": "@chakra-ui/c-alert/examples/base-alert.vue"
+      }
+    ]
+  },
+  {
+    "name": "Box",
+    "path": "/c-box",
+    "children": [
+      {
+        "name": "Base box",
+        "path": "/c-box/base-box",
+        "component": "@chakra-ui/c-box/examples/base-box.vue"
+      },
+      {
+        "name": "Box with chakra directive",
+        "path": "/c-box/box-with-chakra-directive",
+        "component": "@chakra-ui/c-box/examples/box-with-chakra-directive.vue"
+      }
+    ]
+  },
+  {
+    "name": "Button",
+    "path": "/c-button",
+    "children": [
+      {
+        "name": "Base button",
+        "path": "/c-button/base-button",
+        "component": "@chakra-ui/c-button/examples/base-button.vue"
+      }
+    ]
+  }
+]
diff --git a/scripts/parse-routes.ts b/scripts/parse-routes.ts
@@ -105,6 +105,7 @@ interface RoutesMap {
 
 let i = 0
 const routesMap: RoutesMap = {}
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const componentLookup = flatten(routes, (route) => route.component!)
   .map((path) => {
     const name = `Component_${++i}`

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +.DS_Store
 +dist
 +*.local
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	+- [ ] read all `component-name.story.vue` files inside the `./packages` directory
	`2`	`+- [ ] For each Vue file found, parse the component javascript`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <router-view />`
	`3`	`+</template>`