feat(runtime): fully rewrite and tests runtime features ; whole packa…

…ge fully covered

.eslintrc

@@ -16,7 +16,8 @@
     "max-statements-per-line": "off",
     "@typescript-eslint/prefer-ts-expect-error": "off",
     "no-console":"off",
-    "@typescript-eslint/ban-types": "off"
+    "@typescript-eslint/ban-types": "off",
+    "vue/one-component-per-file": "off"
   },
   "overrides": [
     {

docs/package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@nuxt-themes/docus": "^1.14.6",
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.6.0",
     "@vueuse/motion": "^2.0.0"
   }
 }

examples/nuxt/app.vue

@@ -1,57 +1,5 @@
 <template>
-  <main>
-    <p>
-      {{ color }}
-    </p>
-    <MyButton />
-  </main>
+  <App>
+    <NuxtPage />
+  </App>
 </template>
-
-<script setup lang="ts">
-import theme from '$pinceau/theme'
-
-const color = ref('blue')
-
-const colors = Object.keys(theme.color)
-
-const rand = array => array[Math.floor(Math.random() * array.length)];
-
-let interval: NodeJS.Timeout
-onMounted(() => {
-  if (interval) clearInterval(interval)
-  interval = setInterval(
-    () => {
-      color.value = rand(colors)
-    },
-    1000
-  )
-})
-</script>
-
-<style lang="ts">
-css({
-  'html, body, #__nuxt': {
-    minHeight: '100vh',
-    minWidth: '100vw'
-  }
-})
-</style>
-
-<style scoped lang="ts">
-css({
-  main: {
-    color: '$color.blue.1',
-    backgroundColor: '$color.blue.9',
-    minHeight: '100vh',
-    minWidth: '100vw',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    padding: '$space.16'
-  },
-  p: {
-    marginBottom: 24
-  }
-})
-</style>

examples/nuxt/nuxt.config.ts

@@ -13,6 +13,12 @@ export default defineNuxtConfig({
   modules: [
     '@pinceau/nuxt',
   ],
+  components: [
+    {
+      path: resolve('../shared'),
+      global: true
+    }
+  ],
   pinceau: {
     theme: {
       layers: [

examples/nuxt/package.json

@@ -17,7 +17,7 @@
     "pinceau": "workspace:*"
   },
   "devDependencies": {
-    "nuxt": "^3.7.0"
+    "nuxt": "^3.7.1"
   },
   "stackblitz": {
     "installDependencies": false,

examples/nuxt/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <MyButton size="xl" color="green" />
+  </div>
+</template>

examples/shared/App.vue

@@ -0,0 +1,48 @@
+<template>
+  <main>
+    <slot />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import theme from '$pinceau/theme'
+
+const color = ref('blue')
+
+const colors = Object.keys(theme.color)
+
+const rand = (array: any[]) => array[Math.floor(Math.random() * array.length)];
+
+let interval: NodeJS.Timeout
+onMounted(() => {
+  if (interval) clearInterval(interval)
+  interval = setInterval(
+    () => {
+      color.value = rand(colors)
+    },
+    1000
+  )
+})
+</script>
+
+<style lang="ts">
+css({
+  'html, body, #__nuxt': {
+    minHeight: '100vh',
+    minWidth: '100vw'
+  }
+})
+</style>
+
+<style scoped lang="ts">
+css({
+  main: {
+    color: '$color.blue.1',
+    backgroundColor: '$color.blue.9',
+    minHeight: '100vh',
+    minWidth: '100vw',
+    padding: '$space.16'
+  }
+})
+</style>

examples/nuxt/components/MyButton.vue → examples/shared/MyButton.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    color?: StyleProp<keyof PinceauTheme['color']>
+    color?: keyof PinceauTheme['color']
   }>(),
   {
-    color: 'blue'
+    color: 'green'
   }
 )
 </script>
@@ -23,58 +23,57 @@ withDefaults(
 <style scoped lang="ts">
 css({
   '.my-button': {
-    '--button-primary': (props) => `$color.${props.color}.600`,
-    '--button-secondary': (props) => `$color.${props.color}.500`,
+    '--button-bg': () => `$color.${props.color}.5`,
+    '--button-border': () => `$color.${props.color}.6`,
+    '--button-active': () => `$color.${props.color}.4`,
+    transition: 'all 333ms ease-out',
     display: 'inline-block',
-    borderRadius: '$radii.xl',
-    transition: '$transition.all',
+    borderRadius: '$radii.xs',
     color: '$color.white',
-    boxShadow: `0 5px 0 $button.primary, 0 12px 16px $color.dimmed`,
+    backgroundColor: '$button.bg',
     span: {
+      boxShadow: 'inset 0 0 0 2px $button.border, 0 1px 2px $color.black',
       display: 'inline-block',
       fontFamily: '$font.sans',
-      borderRadius: '$radii.lg',
+      borderRadius: '$radii.xs',
       fontSize: '$fontSize.xl',
-      lineHeight: '$lead.none',
-      transition: '$transition.all',
-      backgroundColor: '$button.primary',
-      boxShadow: 'inset 0 -1px 1px $color.dark',
+      lineHeight: '0',
     },
     '&:hover': {
       span: {
-        backgroundColor: `$button.secondary`,
+        backgroundColor: `$button.border`,
       }
     },
     '&:active': {
       span: {
-        transform: 'translateY($space.4)'
+        boxShadow: 'inset 0 0 0 2px $button.active',
       }
     }
   },
   variants: {
     size: {
       sm: {
         span: {
-          padding: '$space.6 $space.12',
+          padding: '$space.3 $space.6',
         },
       },
       md: {
         span: {
-          padding: '$space.12 $space.16'
+          padding: '$space.4 $space.8'
         },
       },
       lg: {
         span: {
-          padding: '$space.16 $space.24'
+          padding: '$space.6 $space.12'
         },
       },
       xl: {
         span: {
-          padding: '$space.32 $space.48'
+          padding: '$space.8 $space.16'
         },
       },
       options: {
-        default: 'sm',
+        default: 'md',
       },
     },
   },

examples/vite-lib/package.json

@@ -17,7 +17,7 @@
     "pinceau": "workspace:*"
   },
   "devDependencies": {
-    "typescript": "^5.2.0",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
 }

examples/vite-lib/vite.config.ts

@@ -1,7 +1,7 @@
 import { createResolver } from '@nuxt/kit'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import Pinceau from 'pinceau/plugin'
+import { Pinceau } from 'pinceau/plugin'
 
 const resolve = (p: string) => createResolver(import.meta.url).resolve(p)
 

examples/vite-vue/app.vue

@@ -1,28 +1,17 @@
 <template>
-  <main class="main">
-    <Navigation />
+  <App class="main">
+    <div 
+      :styled="{
+        width: '100%',
+      }"
+    >
+      <Navigation />
+    </div>
 
     <RouterView />
-  </main>
+  </App>
 </template>
 
-
-<style lang="ts">
-css({
-  'html, body, #app': {
-    height: '100vh',
-    width: '100vw',
-    backgroundColor: '$color.blue.2'
-  },
-})
-</style>
-
-<style scoped lang="ts">
-css({
-  '.main': {
-    width: '100%',
-    height: '100%',
-    padding: '$space.8',
-  }
-})
-</style>
+<script lang="ts" setup>
+import App from '../shared/App.vue'
+</script>

examples/vite-vue/components/Navigation.vue

@@ -15,10 +15,13 @@ import { routes } from '../main'
 <style scoped lang="ts">
 css({
   ul: {
+    width: '100%',
     listStyleType: 'count',
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
     gap: '$space.2',
+    marginBottom: '2rem',
   },
   a: {
     textTransform: 'capitalize',

examples/vite-vue/features/core.vue

@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.yellow.1');
+  background-color: $theme('color.yellow.9');
 }
 </style>

examples/vite-vue/features/index.vue

@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.green.1');
+  background-color: $theme('color.green.9');
 }
 </style>

examples/vite-vue/features/runtime.vue

@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.violet.1');
+  background-color: $theme('color.violet.9');
 }
 </style>

examples/vite-vue/features/theme.vue

@@ -4,6 +4,6 @@
 
 <style scoped lang="postcss">
 div {
-  background-color: $theme('color.red.1');
+  background-color: $theme('color.red.9');
 }
 </style>