Merge pull request #23 from chakra-ui/develop

codebender828 · web-flow · commit 8a4fe29bf637 · 2021-02-19T03:56:01.000+08:00
feat: add badge to core
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/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -45,6 +45,7 @@ function getSetupSidebar() {
       text: 'Components',
       children: [
         { text: 'Alert', link: '/components/alert' },
+        { text: 'Badge', link: '/components/badge' },
         { text: 'Button', link: '/components/button' },
         { text: 'Icon', link: '/components/icon' },
         { text: 'Spinner', link: '/components/spinner' },
@@ -62,6 +63,7 @@ function getComponentsSidebar() {
       children: [
         { text: 'Alert', link: '/components/alert' },
         { text: 'Button', link: '/components/button' },
+        { text: 'Badge', link: '/components/badge' },
         { text: 'Icon', link: '/components/icon' },
         { text: 'Spinner', link: '/components/spinner' },
         { text: 'CSS reset', link: '/components/css-reset' },
diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -0,0 +1,50 @@
+# Badge
+
+Badges are used to highlight an item's status for quick recognition.
+
+## Import
+
+```bash
+import { CBadge } from "@chakra-ui/vue-next"
+```
+
+## Usage
+```vue
+<c-badge color-scheme="blue">Badge</c-badge>
+```
+
+### Badge Color
+
+Pass the `colorScheme` prop to customize the color of the Badge. `colorScheme`
+can be any **color key** that exists in `theme.colors`.
+
+TODO: Link to theming page
+
+```vue
+<c-badge>Default</c-badge>
+<c-badge color-scheme="green">Success</c-badge>
+<c-badge color-scheme="red">Removed</c-badge>
+<c-badge color-scheme="purple">New</c-badge>
+```
+
+### Badge Variants
+
+Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to
+get a different style.
+
+```vue
+<c-badge variant="outline" color-scheme="green">Default</c-badge>
+<c-badge variant="solid" color-scheme="green">Success</c-badge>
+<c-badge variant="subtle" color-scheme="green">Removed</c-badge>
+```
+
+TODO: Add composition examples
+
+## Props
+
+The `CBadge` component composes `CBox` component so you can pass props for `CBox`.
+| Name | Type | Description | Default |
+| :---: | :---: | :---: | :---: |
+|`colorScheme`|`"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"`| Theme color scheme |`"gray"`|
+|`size` |	`"sm" | "md" | "lg" | "xs"` |	Sizes for Badge are not implemented in the default theme. You can extend the theme to implement them.	| - |
+|`variant` |	`"outline" | "solid" | "subtle"` |		| `"subtle"` |
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
diff --git a/playground/src/main.ts b/playground/src/main.ts

-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>`