@indielayer/ui 1.0.0-alpha.9 → 1.0.0

package/lib/nuxt.js

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     name: '@indielayer/ui',
     configKey: 'indielayer',
     compatibility: {
-      nuxt: '^3.0.0',
+      nuxt: '^3.0.0-rc.1',
     },
   },
   defaults: {
@@ -25,6 +25,7 @@ export default defineNuxtModule({
     nuxt.hook('components:dirs', (dirs) => {
       dirs.push({
         path: fileURLToPath(new URL('../src/components', import.meta.url)),
+        extensions: ['vue', 'tsx'],
         prefix: options?.prefix ? options?.prefix : 'X',
       })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -41,16 +41,19 @@
   },
   "sideEffects": false,
   "scripts": {
-    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
-    "dev2": "vite build --watch",
+    "dev": "vite build --watch",
+    "dev2": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
     "build": "pnpm generate && vite build",
     "build-prod": "pnpm build && pnpm gen-types",
-    "typecheck": "vue-tsc --noEmit",
     "build-only": "vite build",
     "generate": "pnpm gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
     "gen-version": "node .scripts/gen-version.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "pnpm test:unit",
+    "test:unit": "vitest --environment jsdom",
+    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
+    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
@@ -60,22 +63,29 @@
     "@cypress/vite-dev-server": "^2.2.2",
     "@cypress/vue": "^3.1.1",
     "@rushstack/eslint-patch": "^1.1.3",
+    "@types/jsdom": "^16.2.14",
     "@types/node": "^17.0.30",
+    "@types/ramda": "^0.28.15",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/test-utils": "^2.0.0-rc.20",
     "@vue/tsconfig": "^0.1.3",
     "@vueuse/core": "^8.4.2",
     "autoprefixer": "^10.4.0",
+    "c8": "^7.12.0",
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.0",
     "cypress": "^9.6.0",
     "eslint": "^8.16.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "jsdom": "^19.0.0",
     "postcss": "^8.4.4",
+    "ramda": "^0.28.0",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.0",
     "typescript": "~4.6.3",
     "vite": "^2.9.5",
+    "vitest": "^0.9.3",
     "vue": "^3.2.33",
     "vue-tsc": "^0.34.15"
   },

package/src/common/icons.ts

@@ -0,0 +1,15 @@
+export const infoIcon = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const successIcon = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const errorIcon = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const warningIcon = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />'
+export const closeIcon = '<path d="M6 18L18 6M6 6l12 12" />'
+export const avatarIcon = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />'
+export const arrowRightIcon = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />'
+export const eyeIcon = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />'
+export const eyeVisibleIcon = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />'
+export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />'
+export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
+export const nextIcon = '<path d="M9 5l7 7-7 7" />'
+export const checkIcon = '<path d="M5 13l4 4L19 7" />'
+export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'

package/src/common/utils.ts

@@ -0,0 +1,68 @@
+import { unref, isRef } from 'vue'
+
+const isObject = (val: any) => val !== null && typeof val === 'object'
+const isArray = Array.isArray
+
+/**
+ * Deeply unref a value, recursing into objects and arrays.
+ *
+ * @param {Mixed} val - The value to deeply unref.
+ *
+ * @return {Mixed}
+ */
+export const deepUnref = (val: any) => {
+  const checkedVal = isRef(val) ? unref(val) : val
+
+  if (!isObject(checkedVal)) {
+    return checkedVal
+  }
+
+  if (isArray(checkedVal)) {
+    return unrefArray(checkedVal)
+  }
+
+  return unrefObject(checkedVal)
+}
+
+/**
+ * Unref a value, recursing into it if it's an object.
+ *
+ * @param {Mixed} val - The value to unref.
+ *
+ * @return {Mixed}
+ */
+export const smartUnref = (val: any) => {
+  // Non-ref object?  Go deeper!
+  if (val !== null && !isRef(val) && typeof val === 'object') {
+    return deepUnref(val)
+  }
+
+  return unref(val)
+}
+
+/**
+ * Unref an array, recursively.
+ *
+ * @param {Array} arr - The array to unref.
+ *
+ * @return {Array}
+ */
+export const unrefArray: any = (arr: []) => arr.map(smartUnref)
+
+/**
+ * Unref an object, recursively.
+ *
+ * @param {Object} obj - The object to unref.
+ *
+ * @return {Object}
+ */
+export const unrefObject = (obj: any) => {
+  const unreffed: any = {}
+
+  // Object? un-ref it!
+  Object.keys(obj).forEach((key) => {
+    unreffed[key] = smartUnref(obj[key])
+  })
+
+  return unreffed
+}

package/src/components/alert/Alert.theme.ts

@@ -0,0 +1,57 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    /*tw*/
+    wrapper: 'flex rounded-md space-x-2 px-4 py-2 border items-center',
+  },
+  styles: ({ props, colors, css }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+    const vars: (object | string)[] = []
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[600],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: color[200],
+            text: color[800],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}

package/src/components/alert/Alert.vue

@@ -1,151 +1,75 @@
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useCSS } from '../../composables/css'
-
-export default defineComponent({
-  name: 'XAlert',
-
-  props: {
-    ...useColors.props(),
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    type: String as PropType<'info' | 'success' | 'error' | 'warning' | undefined>,
-    glow: Boolean,
-    light: Boolean,
-    outlined: Boolean,
-    removable: Boolean,
-  },
-
-  emits: ['remove'],
+export default { name: 'XAlert' }
+</script>
 
-  setup(props) {
-    const css = useCSS('alert')
-    const colors = useColors()
-    const gray = colors.getPalette('gray')
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
-      const vars: (object | string)[] = []
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
+import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
 
-      if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+import XIcon from '../icon/Icon.vue'
 
-      if (props.color) {
-        if (props.light) {
-          vars.push(css.variables({
-            bg: color[50],
-            text: color[600],
-            icon: color[600],
-            border: props.outlined ? color[600] : color[50],
-            dark: {
-              bg: color[200],
-              text: color[800],
-              icon: color[600],
-              border: props.outlined ? color[500] : color[200],
-            },
-          }))
-        } else {
-          vars.push(css.variables({
-            bg: props.outlined ? 'transparent' : color[600],
-            text: props.outlined ? color[600] : color[50],
-            icon: props.outlined ? color[600] : color[50],
-            border: color[600],
-            dark: {
-              border: color[400],
-              text: props.outlined ? color[400] : color[50],
-            },
-          }))
-        }
+import theme from './Alert.theme'
 
-        return vars
-      }
+const props = defineProps({
+  ...useColors.props(),
+  type: String as PropType<'info' | 'success' | 'error' | 'warning' | undefined>,
+  glow: Boolean,
+  light: Boolean,
+  outlined: Boolean,
+  removable: Boolean,
+})
 
-      vars.push(css.variables({
-        bg: 'transparent',
-        text: color[500],
-        border: color[300],
-        dark: {
-          bg: 'transparent',
-          text: color[300],
-          border: color[500],
-        },
-      }))
+defineEmits(['remove'])
 
-      return vars
-    })
+const icon = computed(() => {
+  if (props.type === 'info') return infoIcon
+  else if (props.type === 'success') return successIcon
+  else if (props.type === 'error') return errorIcon
+  else if (props.type === 'warning') return warningIcon
 
-    return {
-      styles,
-    }
-  },
+  return ''
 })
+
+const { styles, classes, className } = useTheme('alert', theme, props)
 </script>
 
 <template>
-  <component
-    :is="tag"
-    class="flex rounded-md px-4 py-2 border items-center"
+  <div
+    :style="styles"
     :class="[
+      className,
       $style['alert'],
       glow ? $style['alert--glow'] : '',
+      classes.wrapper,
     ]"
-    :style="styles"
   >
-    <div v-if="$slots.icon" class="flex-none pr-2">
-      <slot name="icon"></slot>
-    </div>
-    <svg
-      v-else-if="type"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-linejoin="round"
-      stroke-linecap="round"
-      fill="none"
-      role="presentation"
-      class="flex-none stroke-2 w-5 h-5 mr-2 text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-dark-alert-icon)]"
-    >
-      <template v-if="type === 'info'">
-        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </template>
-
-      <template v-if="type === 'success'">
-        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </template>
 
-      <template v-if="type === 'error'">
-        <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </template>
-      <template v-if="type === 'warning'">
-        <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-      </template>
-    </svg>
+    <slot name="icon">
+      <x-icon
+        v-if="type"
+        :icon="icon"
+        class="text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
+      />
+    </slot>
 
-    <slot></slot>
+    <div>
+      <slot></slot>
+    </div>
 
     <template v-if="removable">
       <div class="flex-grow"></div>
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        role="presentation"
-        class="stroke-2 w-5 h-5 ml-1 cursor-pointer shrink-0"
-        @click="(e) => $emit('remove', e)"
-      >
-        <path d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      <span class="flex items-center cursor-pointer shrink-0" @click="(e) => $emit('remove', e)">
+        <slot name="removeIcon">
+          <x-icon :icon="closeIcon"/>
+        </slot>
+      </span>
     </template>
-  </component>
+  </div>
 </template>
 
-<style lang="postcss" module scoped>
+<style lang="postcss" module>
 .alert {
   color: var(--x-alert-text);
   background-color: var(--x-alert-bg);
@@ -155,10 +79,10 @@ export default defineComponent({
     box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
   }
 
-  :global(.dark) & {
-    color: var(--x-dark-alert-text, var(--x-alert-text));
-    background-color: var(--x-dark-alert-bg, var(--x-alert-bg));
-    border-color: var(--x-dark-alert-border, var(--x-alert-border));
+  :global(.dark) &, &:global(.dark) {
+    color: var(--x-alert-dark-text, var(--x-alert-text));
+    background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
+    border-color: var(--x-alert-dark-border, var(--x-alert-border));
   }
 }
 </style>

package/src/components/alert/__tests__/Alert.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Alert from '../Alert.vue'
+
+describe('Alert', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Alert)
+
+    expect(wrapper.vm).toBeTruthy()
+    // expect(wrapper.isVueInstance()).toBeTruthy()
+
+    // expect(wrapper.text()).toContain('Hi there!')
+  })
+})

package/src/components/avatar/Avatar.theme.ts

@@ -0,0 +1,39 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper({ props }: ThemeParams) {
+      const classes = ['relative inline-flex items-center justify-center overflow-hidden align-middle border box-content']
+
+      // radius
+      classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+
+      // size
+      if (props.size === 'xs') classes.push('h-6 w-6 text-xs')
+      else if (props.size === 'sm') classes.push('h-9 w-9 text-sm')
+      else if (props.size === 'lg') classes.push('h-12 w-12 text-lg')
+      else if (props.size === 'xl') classes.push('h-[3.75rem] w-[3.75rem] text-xl')
+      else classes.push('h-10 w-10')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }: ThemeParams) {
+    const color = colors.getPalette(props.color)
+
+    if (data.source) return css.variables({
+      bg: 'transparent',
+      border: props.outlined ? color[500] : 'transparent',
+    })
+
+    return css.variables({
+      bg: color[100],
+      text: color[500],
+      border: props.outlined ? color[500] : 'transparent',
+      dark: {
+        bg: color[900],
+      },
+    })
+  },
+}