Merge pull request #59 from devivekw/feat/c-code

codebender828 · web-flow · commit aa0a7d110b89 · 2021-04-08T10:07:11.000+08:00
feat: c-code component
diff --git a/.changeset/khaki-hounds-hunt.md b/.changeset/khaki-hounds-hunt.md
@@ -0,0 +1,29 @@
+---
+'@chakra-ui/c-accordion': patch
+'@chakra-ui/c-alert': patch
+'@chakra-ui/c-badge': patch
+'@chakra-ui/c-button': patch
+'@chakra-ui/c-close-button': patch
+'@chakra-ui/c-code': patch
+'@chakra-ui/c-color-mode': patch
+'@chakra-ui/c-flex': patch
+'@chakra-ui/c-icon': patch
+'@chakra-ui/c-modal': patch
+'@chakra-ui/c-popper': patch
+'@chakra-ui/c-portal': patch
+'@chakra-ui/c-reset': patch
+'@chakra-ui/c-spinner': patch
+'@chakra-ui/c-theme-provider': patch
+'@chakra-ui/c-visually-hidden': patch
+'@chakra-ui/vue-next': patch
+'@chakra-ui/nuxt-next': patch
+'@chakra-ui/vue-system': patch
+'@chakra-ui/vue-test-utils': patch
+'@chakra-ui/vue-theme': patch
+'@chakra-ui/vue-theme-tools': patch
+'@chakra-ui/vue-utils': patch
+'@chakra-ui/vue-auto-import': patch
+'@chakra-ui/vue-docs': patch
+---
+
+Created code component
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -55,6 +55,7 @@ function getSetupSidebar() {
         { text: 'Alert', link: '/components/alert' },
         { text: 'Badge', link: '/components/badge' },
         { text: 'Button', link: '/components/button' },
+        { text: 'Code', link: '/components/code' },
         { text: 'Icon', link: '/components/icon' },
         { text: 'Spinner', link: '/components/spinner' },
         { text: 'CSS reset', link: '/components/css-reset' },
diff --git a/docs/components/code.md b/docs/components/code.md
@@ -0,0 +1,33 @@
+# Code
+
+Code is a component used to display inline code. It is composed from the Box component with a font family of `mono` for displaying code.
+
+## Import
+
+```js
+import { CCode } from "@chakra-ui/vue-next"
+```
+
+## Usage
+```vue
+<c-code>hello world</c-code>
+```
+
+### Code 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-code>hello world, default</c-code>
+<c-code color-scheme="green">hello world, green</c-code>
+<c-code color-scheme="red">hello world, red</c-code>
+<c-code color-scheme="purple">hello world, purple</c-code>
+```
+
+## Props
+
+| Name | Type | Description | Default |
+| :---: | :---: | :---: | :---: |
+|`colorScheme`|`string`|Color Scheme to be applied|"cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"`|`"gray"`|
diff --git a/packages/c-close-button/package.json b/packages/c-close-button/package.json
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@chakra-ui/c-icon": "1.0.0-alpha.1",
-    "@chakra-ui/styled-system": "1.10.0",
+    "@chakra-ui/styled-system": "^1.10.0",
     "@chakra-ui/vue-system": "0.1.0-alpha.1",
     "@chakra-ui/vue-utils": "0.1.0-alpha.1"
   },
diff --git a/packages/c-code/README.md b/packages/c-code/README.md
@@ -0,0 +1,11 @@
+# @chakra-ui/c-code
+
+Code is a component used to display inline code. It is composed from the Box component with a font family of mono for displaying code
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-code
+# or
+npm i @chakra-ui/c-code
+```
diff --git a/packages/c-code/examples/base-code.vue b/packages/c-code/examples/base-code.vue
@@ -0,0 +1,3 @@
+<template>
+  <c-code> hello world! </c-code>
+</template>
diff --git a/packages/c-code/examples/with-color.vue b/packages/c-code/examples/with-color.vue
@@ -0,0 +1,26 @@
+<template>
+  <chakra.div>
+    <c-code
+      v-for="(color, i) in colorSchemes"
+      :key="i"
+      :color-scheme="color"
+      ml="2"
+    >
+      {{ color }}
+    </c-code>
+  </chakra.div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const colorSchemes = ref([
+  'gray',
+  'green',
+  'red',
+  'yellow',
+  'orange',
+  'purple',
+  'teal',
+])
+</script>
diff --git a/packages/c-code/index.ts b/packages/c-code/index.ts
@@ -0,0 +1 @@
+export * from './src'
diff --git a/packages/c-code/package.json b/packages/c-code/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@chakra-ui/c-code",
+  "description": "Chakra UI Vue | Code is a component used to display inline code. It is composed from the Box component with a font family of mono for displaying code",
+  "version": "0.0.1-alpha.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"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-code",
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "rimraf ./dist && 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 --incremental"
+  },
+  "dependencies": {
+    "@chakra-ui/utils": "^1.5.0",
+    "@chakra-ui/vue-system": "0.1.0-alpha.1"
+  },
+  "devDependencies": {
+    "vue": ">=3.0.5"
+  },
+  "peerDependencies": {
+    "@chakra-ui/vue-system": "0.1.0-alpha.1",
+    "vue": "^3.0.5"
+  },
+  "contributors": [
+    "Vivek Wadhwani <devivekw@pm.me>"
+  ]
+}
diff --git a/packages/c-code/src/code.ts b/packages/c-code/src/code.ts
@@ -0,0 +1,49 @@
+import { h, defineComponent, PropType, computed } from 'vue'
+import {
+  chakra,
+  DOMElements,
+  ThemingProps,
+  useStyleConfig,
+} from '@chakra-ui/vue-system'
+import { filterUndefined } from '@chakra-ui/utils'
+
+const CCode = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'code',
+    },
+    colorScheme: String as PropType<ThemingProps['colorScheme']>,
+    styleConfig: String as PropType<ThemingProps['styleConfig']>,
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const themingProps = computed<ThemingProps>(() =>
+        filterUndefined({
+          colorScheme: props.colorScheme,
+          styleConfig: props.styleConfig,
+        })
+      )
+      const styles = useStyleConfig('Code', themingProps.value)
+
+      return h(
+        chakra(props.as),
+        {
+          __css: {
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            fontSize: 'sm',
+            px: '0.2em',
+            fontFamily: 'mono',
+            rounded: 'sm',
+            ...styles.value,
+          },
+          ...attrs,
+        },
+        slots
+      )
+    }
+  },
+})
+
+export default CCode
diff --git a/packages/c-code/src/index.ts b/packages/c-code/src/index.ts
@@ -0,0 +1 @@
+export { default as CCode } from './code'
diff --git a/packages/c-code/tests/__snapshots__/c-code.test.ts.snap b/packages/c-code/tests/__snapshots__/c-code.test.ts.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <code
+    class="css-1b9x1mh"
+  >
+    hello world
+  </code>
+  <code
+    class="css-1hzweom"
+  >
+     hello world, red 
+  </code>
+  <code
+    class="css-bri9l4"
+  >
+     hello world, green 
+  </code>
+  <code
+    class="css-1y46pxi"
+  >
+     hello world, yellow 
+  </code>
+  <code
+    class="css-1kx42k1"
+  >
+     hello world, teal 
+  </code>
+</DocumentFragment>
+`;
diff --git a/packages/c-code/tests/c-code.test.ts b/packages/c-code/tests/c-code.test.ts
@@ -0,0 +1,28 @@
+import { CCode } from '../src'
+import { render, testA11y } from '../../test-utils/src'
+
+const renderComponent = (props?: any) => {
+  const base = {
+    components: {
+      CCode,
+    },
+    template: `
+      <c-code>hello world</c-code>
+      <c-code color-scheme="red"> hello world, red </c-code>
+      <c-code color-scheme="green"> hello world, green </c-code>
+      <c-code color-scheme="yellow"> hello world, yellow </c-code>
+      <c-code color-scheme="teal"> hello world, teal </c-code>
+    `,
+    ...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-code/tsconfig.json b/packages/c-code/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/c-modal/package.json b/packages/c-modal/package.json
@@ -37,7 +37,7 @@
     "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "1.10.0",
+    "@chakra-ui/styled-system": "^1.10.0",
     "@chakra-ui/vue-system": "0.1.0-alpha.1",
     "@chakra-ui/vue-utils": "0.1.0-alpha.1"
   },
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -87,6 +87,7 @@ export * from '@chakra-ui/c-button'
 // C
 export * from '@chakra-ui/c-color-mode'
 export * from '@chakra-ui/c-close-button'
+export * from '@chakra-ui/c-code'
 
 // F
 export * from '@chakra-ui/c-flex'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <c-code> hello world! </c-code>`
	`3`	`+</template>`