Start with Header and Navigation components

README.md

@@ -1,5 +1,6 @@
-# yuika
+# Yuika
 
+> A Vue component library 
 ## Project setup
 ```
 yarn install

docs/.vuepress/config.js

@@ -0,0 +1,33 @@
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
+
+const purgecss = postcssPurgecss({
+  // Specify the paths to all of the template files in your project.
+  content: [
+    './public/**/*.html',
+    './src/**/*.vue',
+  ],
+  // Include any special characters you're using in this regular expression.
+  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
+  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+  // Whitelist auto generated classes for transitions and router links.
+  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
+  whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
+});
+
+module.exports = {
+  title: "Yuika documentation",
+  description: "",
+  themeConfig: {
+  },
+  postcss: {
+    plugins: [
+      require("autoprefixer"),
+      require("tailwindcss")("./tailwind.config.js"),
+      ...process.env.NODE_ENV === 'production'
+        ? [purgecss]
+        : [],
+    ]
+  }
+};

docs/.vuepress/theme/Layout.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Header>
+      <HeaderLeft>
+      </HeaderLeft>
+      <HeaderMiddle>
+        <p>Yuika Documentation</p>
+      </HeaderMiddle>
+      <HeaderRight>
+        <NavigationBar>
+          <NavigationItem>
+            <a href="/">Home</a>
+          </NavigationItem>
+          <NavigationItem>
+            <a href="/">Home</a>
+          </NavigationItem>
+        </NavigationBar>
+      </HeaderRight>
+    </Header>
+    <div>
+      <Content/>
+    </div>
+  </div>
+</template>
+<script>
+import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from "../../../src/components/Header";
+import { NavigationBar, NavigationItem } from "../../../src/components/Navigation";
+
+export default {
+  components: {
+    Header, HeaderLeft, HeaderMiddle, HeaderRight,
+    NavigationBar, NavigationItem,
+  }
+}
+</script>
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
+  @import "./../../../src/assets/css/tailwind.css";
+
+  body {
+    @apply m-0 font-sans;
+  }
+</style>

docs/README.md

@@ -0,0 +1 @@
+# Yuika

package.json

@@ -1,14 +1,21 @@
 {
-  "name": "yuika",
+  "name": "@mitsuminedamillora/yuika",
   "version": "0.1.0",
   "private": true,
+  "main": "./dist/yuika.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build-lib": "vue-cli-service build --target lib --name yuika src/main.js",
+    "lint": "vue-cli-service lint",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "dependencies": {
+    "@fullhuman/postcss-purgecss": "^1.3.0",
     "core-js": "^3.4.4",
+    "tailwindcss": "^1.1.4",
+    "tailwindcss-transitions": "^2.1.0",
     "vue": "^2.6.10"
   },
   "devDependencies": {
@@ -18,7 +25,8 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "vuepress": "^1.2.0"
   },
   "eslintConfig": {
     "root": true,

postcss.config.js

@@ -0,0 +1,27 @@
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
+
+const purgecss = postcssPurgecss({
+  // Specify the paths to all of the template files in your project.
+  content: [
+    './public/**/*.html',
+    './src/**/*.vue',
+  ],
+  // Include any special characters you're using in this regular expression.
+  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
+  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+  // Whitelist auto generated classes for transitions and router links.
+  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
+  whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
+});
+
+module.exports = {
+  plugins: [
+    tailwindcss,
+    autoprefixer,
+    ...process.env.NODE_ENV === 'production'
+      ? [purgecss]
+      : [],
+  ],
+};

src/App.vue

@@ -1,28 +1,13 @@
 <template>
-  <div id="app">
+  <div>
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
   name: 'app',
-  components: {
-    HelloWorld
-  }
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/Header/Header.vue

@@ -0,0 +1,18 @@
+<template>
+<header class="yuika-header">
+  <slot></slot>
+</header>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-header {
+    @apply h-16 w-full z-10 flex flex-row justify-start items-center bg-yuika-blue-500 text-white;
+
+}
+</style>

src/components/Header/HeaderLeft.vue

@@ -0,0 +1,17 @@
+<template>
+<div class="yuika-header-left">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-header-left {
+  @apply ml-4;
+}
+</style>

src/components/Header/HeaderMiddle.vue

@@ -0,0 +1,17 @@
+<template>
+<div class="yuika-header-middle">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-header-middle {
+  @apply flex-grow;
+}
+</style>

src/components/Header/HeaderRight.vue

@@ -0,0 +1,17 @@
+<template>
+<div class="yuika-header-right">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-header-right {
+  @apply mr-4;
+}
+</style>

src/components/Header/index.js

@@ -0,0 +1,11 @@
+import Header from "./Header";
+import HeaderLeft from "./HeaderLeft";
+import HeaderMiddle from "./HeaderMiddle";
+import HeaderRight from "./HeaderRight";
+
+export {
+  Header,
+  HeaderLeft,
+  HeaderMiddle,
+  HeaderRight
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Navigation/NavigationBar.vue

@@ -0,0 +1,20 @@
+<template>
+<ul class="yuika-nav-bar">
+  <slot></slot>
+</ul>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-nav-bar {
+  @apply w-full flex flex-row;
+}
+.yuika-nav-bar .yuika-nav-item a {
+  @apply text-white no-underline;
+}
+</style>

src/components/Navigation/NavigationItem.vue

@@ -0,0 +1,17 @@
+<template>
+<li class="yuika-nav-item">
+  <slot></slot>
+</li>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.yuika-nav-item {
+  @apply mx-2 list-none;
+}
+</style>

src/components/Navigation/index.js

@@ -0,0 +1,7 @@
+import NavigationBar from "./NavigationBar";
+import NavigationItem from "./NavigationItem";
+
+export {
+  NavigationBar,
+  NavigationItem,
+}

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import '@/assets/css/tailwind.css';
 
 Vue.config.productionTip = false
 

tailwind.config.js

@@ -0,0 +1,43 @@
+module.exports = {
+  theme: {
+    transitionProperty: {
+      'none': 'none',
+      'all': 'all',
+      'color': 'color',
+      'bg': 'background-color',
+      'border': 'border-color',
+      'colors': ['color', 'background-color', 'border-color'],
+      'opacity': 'opacity',
+      'transform': 'transform',
+    },
+    extend: {
+      colors: {
+        'yuika-blue': {
+          '100': '#C6E7F8',
+          '200': '#9FD3F0',
+          '300': '#7BBEE5',
+          '400': '#5AA7D7',
+          '500': '#3B90C6',
+          '600': '#2E72AA',
+          '700': '#22558C',
+          '800': '#173B6C',
+          '900': '#0E254C',
+        }
+      },
+      maxHeight: {
+       '16': '4rem',
+       '24': '6rem',
+       '32': '8rem',
+      }
+    },
+    fontFamily: {
+      'sans': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
+      'display': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
+      'body': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
+    }
+  },
+  variants: ['responsive', 'group-hover', 'hover', 'active' ],
+  plugins: [
+    require('tailwindcss-transitions')(),
+  ],
+}