Work In Progress

atomic-codegen --init

scaffolding components from pseudo html schema

Schema

<home page Route="/"></home>
<about page Route="/about">
  <template-about template>
    <hero-logo></hero-logo>
    <big-button></big-button>
    <form organism>
      <input-field></input-field>
      <input-checkbox></input-checkbox>
    </form>
  </about-temp>
</template-about>
<sign-up page Route="/sign-up" RouteTitle="Register">
  <welcome template>
    <icon></icon>
    <text></text>
    <header></header>
  </welcome>
  <template-sign-up template>
    <form organism>
      <input-field></input-field>
      <!-- should have input-checkbox mentioned in another instance -->
      <input-password></input-password>
      <big-button organism>
        <icon></icon>
      </big-button>
    </form>
  </template-sign-up>
</sign-up>
<app template>
  <side-nav molecule></side-nav>
  <router-view></router-view>
  <footer></footer>
</app>

./generated Output

├── components
│   ├── atoms
│   │   ├── VFooter
│   │   │   ├── index.js
│   │   │   └── VFooter.vue
│   │   ├── VHeader
│   │   │   ├── index.js
│   │   │   └── VHeader.vue
│   │   ├── VHeroLogo
│   │   │   ├── index.js
│   │   │   └── VHeroLogo.vue
│   │   ├── VIcon
│   │   │   ├── index.js
│   │   │   └── VIcon.vue
│   │   ├── VInputCheckbox
│   │   │   ├── index.js
│   │   │   └── VInputCheckbox.vue
│   │   ├── VInputField
│   │   │   ├── index.js
│   │   │   └── VInputField.vue
│   │   ├── VInputPassword
│   │   │   ├── index.js
│   │   │   └── VInputPassword.vue
│   │   └── VText
│   │       ├── index.js
│   │       └── VText.vue
│   ├── molecules
│   │   └── VSideNav
│   │       ├── index.js
│   │       └── VSideNav.vue
│   ├── organisms
│   │   ├── VBigButton
│   │   │   ├── index.js
│   │   │   └── VBigButton.vue
│   │   └── VForm
│   │       ├── index.js
│   │       └── VForm.vue
│   ├── pages
│   │   ├── VAbout
│   │   │   ├── index.js
│   │   │   └── VAbout.vue
│   │   ├── VHome
│   │   │   ├── index.js
│   │   │   └── VHome.vue
│   │   └── VSignUp
│   │       ├── index.js
│   │       └── VSignUp.vue
│   └── templates
│       ├── VApp
│       │   ├── index.js
│       │   └── VApp.vue
│       ├── VTemplateAbout
│       │   ├── index.js
│       │   └── VTemplateAbout.vue
│       ├── VTemplateSignUp
│       │   ├── index.js
│       │   └── VTemplateSignUp.vue
│       └── VWelcome
│           ├── index.js
│           └── VWelcome.vue
├── navigation.js
└── routes.js

./generated/components/organisms/VForm/index.js

export { default } from './VForm.vue'

./generated/components/organisms/VForm/VForm.vue

<template>
  <div class="v-form">
    <h1>VForm</h1>
    <v-input-field></v-input-field>
    <v-input-password></v-input-password>
    <v-big-button></v-big-button>
    <v-input-checkbox></v-input-checkbox>
  </div>
</template>
<style lang="postcss">
.v-form > h1 {
  color: gray;
}
.v-form {
  & > .v-input-field {
    /*  */
  }
  & > .v-input-password {
    /*  */
  }
  & > .v-big-button {
    /*  */
  }
  & > .v-input-checkbox {
    /*  */
  }
}
</style>
<!--  -->
<script>
import Vue from 'vue'
import VInputField from '@/components/atoms/VInputField'
import VInputPassword from '@/components/atoms/VInputPassword'
import VBigButton from '@/components/organisms/VBigButton'
import VInputCheckbox from '@/components/atoms/VInputCheckbox'
export default Vue.extend({
  name: 'VForm',
  components: { VInputField, VInputPassword, VBigButton, VInputCheckbox },
})
</script>

./generated/navigation.js

export const navigation = [{
    to: { name: 'VHome' },
    title: 'Home',
  },
  {
    to: { name: 'VAbout' },
    title: 'About',
  },
  {
    to: { name: 'VSignUp' },
    title: 'Register',
  },]

./generated/routes.js

import VHome from '@/components/pages/VHome'
import VAbout from '@/components/pages/VAbout'
import VSignUp from '@/components/pages/VSignUp'
export const routes = [{
    path: '/',
    name: 'VHome',
    component: VHome,
  },
  {
    path: '/about',
    name: 'VAbout',
    component: VAbout,
  },
  {
    path: '/sign-up',
    name: 'VSignUp',
    component: VSignUp,
  },]