feat(c-badge): add component and write tests

codebender828 · codebender828 · commit fbd2badfa39d · 2021-02-19T03:39:32.000+08:00
diff --git a/_templates/generator/component/component.ts.ejs.t b/_templates/generator/component/component.ts.ejs.t
@@ -1,11 +1,11 @@
 ---
-to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
+to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>.ts
 ---
 
 import { h, defineComponent, PropType } from 'vue'
 import { chakra, DOMElements } from '@chakra-ui/vue-system'
 
-export const <%= h.changeCase.pascalCase(name) %> = defineComponent({
+const <%= h.changeCase.pascalCase(name) %> = defineComponent({
   props: {
     as: {
       type: [Object, String] as PropType<DOMElements>,
@@ -16,3 +16,5 @@ export const <%= h.changeCase.pascalCase(name) %> = defineComponent({
     return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })
+
+export default <%= h.changeCase.pascalCase(name) %>
diff --git a/_templates/generator/component/examples.vue.ejs.t b/_templates/generator/component/examples.vue.ejs.t
@@ -5,13 +5,3 @@ to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.par
 <template>
   <<%=h.changeCase.paramCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> </<%=h.changeCase.paramCase(name)%>>
 </template>
-
-<script lang="ts">
-import { <%=h.changeCase.pascalCase(name)%> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>/src'
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Base<%= h.changeCase.pascalCase(name) %>Example',
-  components: { <%= h.changeCase.pascalCase(name) %> },
-})
-</script>
diff --git a/_templates/generator/component/index.ts.ejs.t b/_templates/generator/component/index.ts.ejs.t
@@ -0,0 +1,5 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
+---
+
+export { default as <%= h.changeCase.pascalCase(name) %> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>'
diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
     "c-button": "yarn workspace @chakra-ui/c-button",
     "c-icon": "yarn workspace @chakra-ui/c-icon",
     "c-reset": "yarn workspace @chakra-ui/c-reset",
-    "c-spinner": "yarn workspace @chakra-ui/c-spinner"
+    "c-spinner": "yarn workspace @chakra-ui/c-spinner",
+    "c-badge": "yarn workspace @chakra-ui/c-badge"
   },
   "license": "MIT",
   "private": true,
diff --git a/packages/c-badge/README.md b/packages/c-badge/README.md
@@ -0,0 +1,11 @@
+# @chakra-ui/c-badge
+
+Badges are used to highlight an item s status for quick recognition
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-badge
+# or
+npm i @chakra-ui/c-badge
+```
diff --git a/packages/c-badge/examples/base-badge.vue b/packages/c-badge/examples/base-badge.vue
@@ -0,0 +1,3 @@
+<template>
+  <c-badge> New ! </c-badge>
+</template>
diff --git a/packages/c-badge/examples/outline-badges.vue b/packages/c-badge/examples/outline-badges.vue
@@ -0,0 +1,19 @@
+<template>
+  <chakra.div>
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="outline"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra.div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const colorSchemes = ref(['gray', 'green', 'red', 'orange', 'purple', 'teal'])
+</script>
diff --git a/packages/c-badge/examples/solid-badge.vue b/packages/c-badge/examples/solid-badge.vue
@@ -0,0 +1,19 @@
+<template>
+  <chakra class="div">
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="solid"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const colorSchemes = ref(['gray', 'green', 'red', 'orange', 'purple', 'teal'])
+</script>
diff --git a/packages/c-badge/examples/subtle-badges.vue b/packages/c-badge/examples/subtle-badges.vue
@@ -0,0 +1,19 @@
+<template>
+  <chakra.div>
+    <c-badge
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      variant="subtle"
+      mr="2"
+    >
+      {{ color }}
+    </c-badge>
+  </chakra.div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const colorSchemes = ref(['gray', 'green', 'red', 'orange', 'purple', 'teal'])
+</script>
diff --git a/packages/c-badge/package.json b/packages/c-badge/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/c-badge",
+  "description": "Chakra UI Vue | Badges are used to highlight an item s status for quick recognition component",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/styled-system": "^1.4.1",
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
+  }
+}
diff --git a/packages/c-badge/src/badge.ts b/packages/c-badge/src/badge.ts
@@ -0,0 +1,48 @@
+import { h, defineComponent, PropType, computed } from 'vue'
+import {
+  chakra,
+  DOMElements,
+  ThemingProps,
+  useStyleConfig,
+} from '@chakra-ui/vue-system'
+import { filterUndefined } from '@chakra-ui/vue-utils'
+
+const CBadge = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'div',
+    },
+    colorScheme: String as PropType<ThemingProps['colorScheme']>,
+    variant: String as PropType<ThemingProps['variant']>,
+    size: String as PropType<ThemingProps['size']>,
+    styleConfig: String as PropType<ThemingProps['styleConfig']>,
+  },
+  setup(props, { slots, attrs }) {
+    const themingProps = computed(() =>
+      filterUndefined<ThemingProps>({
+        colorScheme: props.colorScheme,
+        variant: props.variant,
+        size: props.size,
+        styleConfig: props.styleConfig,
+      })
+    )
+    const styles = useStyleConfig('Badge', themingProps.value)
+    return () =>
+      h(
+        chakra(props.as),
+        {
+          __css: {
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+            verticalAlign: 'middle',
+            ...styles.value,
+          },
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+export default CBadge
diff --git a/packages/c-badge/src/index.ts b/packages/c-badge/src/index.ts
@@ -0,0 +1 @@
+export { default as CBadge } from './badge'
diff --git a/packages/c-badge/tests/__snapshots__/c-badge.test.ts.snap b/packages/c-badge/tests/__snapshots__/c-badge.test.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-2q4iwi"
+  >
+    New !
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/c-badge/tests/c-badge.test.ts b/packages/c-badge/tests/c-badge.test.ts
@@ -0,0 +1,22 @@
+import { CBadge } from '../src'
+import { render, testA11y } from '../../test-utils/src'
+
+const renderComponent = (props?: any) => {
+  const base = {
+    components: {
+      CBadge,
+    },
+    template: '<c-badge>New !</c-badge>',
+    ...props,
+  }
+  return render(base)
+}
+
+it('should have no a11y violations', async () => {
+  await testA11y(renderComponent())
+})
+
+it('should render properly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})
diff --git a/packages/c-badge/tsconfig.json b/packages/c-badge/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/c-button/src/button.utils.ts b/packages/c-button/src/button.utils.ts
@@ -1,6 +1,5 @@
 import { SystemCSSProperties } from '@chakra-ui/styled-system'
-import { DOMElements } from '@chakra-ui/vue-system'
-import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
+import { DOMElements, ThemingProps } from '@chakra-ui/vue-system'
 import { PropType } from 'vue'
 
 type ButtonTypes = 'button' | 'reset' | 'submit'
@@ -18,10 +17,10 @@ export const BUTTON_PROPS = {
   type: String as PropType<ButtonTypes>,
   leftIcon: String as PropType<string>,
   rightIcon: String as PropType<string>,
-  colorScheme: String as PropType<string>,
-  variant: String as PropType<string>,
-  size: String as PropType<string>,
-  styleConfig: String as PropType<ComponentThemeConfig>,
+  colorScheme: String as PropType<ThemingProps['colorScheme']>,
+  variant: String as PropType<ThemingProps['variant']>,
+  size: String as PropType<ThemingProps['size']>,
+  styleConfig: String as PropType<ThemingProps['styleConfig']>,
 
   /** Not sure if the SystemCSSProperties is the right prop type for this */
   iconSpacing: {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -54,14 +54,29 @@ export { extendTheme }
 // Export chakra factory function
 export { chakra }
 
-// Component exports
+/**
+ *
+ * Component exports
+ * ==================
+ *
+ * Dear contributors,
+ *
+ * Please keep these exports in Alphabetical order :)
+ */
 export const CBox = chakra.div
 
 export * from '@chakra-ui/c-accordion'
 export * from '@chakra-ui/c-alert'
+
+export * from '@chakra-ui/c-badge'
 export * from '@chakra-ui/c-button'
+
 export * from '@chakra-ui/c-icon'
+
 export * from '@chakra-ui/c-reset'
+
 export * from '@chakra-ui/c-spinner'
+
 export * from '@chakra-ui/c-theme-provider'
+
 export * from '@chakra-ui/c-visually-hidden'
diff --git a/packages/utils/src/object.ts b/packages/utils/src/object.ts
@@ -125,22 +125,22 @@ type FilterFn<T> = (value: any, key: string, object: T) => boolean
  * @param object the object to loop through
  * @param fn The filter function
  */
-export function objectFilter<T extends Dict>(object: T, fn: FilterFn<T>) {
-  const result: Dict = {}
+export function objectFilter<T>(object: T, fn: FilterFn<T>): Partial<T> {
+  const result = {} as T
 
   Object.keys(object).forEach((key) => {
-    const value = object[key]
+    const value = object[key as keyof T]
     const shouldPass = fn(value, key, object)
     if (shouldPass) {
-      result[key] = value
+      result[key as keyof T] = value
     }
   })
 
   return result
 }
 
-export const filterUndefined = (object: Dict) =>
-  objectFilter(object, (val) => val !== null && val !== undefined)
+export const filterUndefined = <T>(object: T): Partial<T> =>
+  objectFilter<T>(object, (val) => val !== null && val !== undefined)
 
 export const objectKeys = <T extends Dict>(obj: T) =>
   (Object.keys(obj) as unknown) as (keyof T)[]
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
-import ChakraUIVuePlugin from '@chakra-ui/vue-next'
-import { domElements, chakra } from '@chakra-ui/vue-system'
+import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'
+import { domElements } from '@chakra-ui/vue-system'
 import { feActivity } from 'feather-icons-paths'
 import App from './App.vue'
 import router from './router'

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
 +---
++
 +export { default as <%= h.changeCase.pascalCase(name) %> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>'
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <c-badge> New ! </c-badge>`
	`3`	`+</template>`