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

Author: devivekw

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

packages/c-code/examples/base-code.vue

@@ -0,0 +1,3 @@
+<template>
+  <c-code> hello world! </c-code>
+</template>

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>

packages/c-code/index.ts

@@ -0,0 +1 @@
+export * from './src'

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 <[email protected]>",
+  "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 <[email protected]>"
+  ]
+}

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

packages/c-code/src/index.ts

@@ -0,0 +1 @@
+export { default as CCode } from './code'

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

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()
+})

packages/c-code/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}