feat(spinner): initialize base spinner

codebender828 · codebender828 · commit 250f69c5f480 · 2021-02-08T01:23:17.000+08:00
diff --git a/_templates/generator/component/examples.vue.ejs.t b/_templates/generator/component/examples.vue.ejs.t
@@ -3,7 +3,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.par
 ---
 
 <template>
-  <<%=h.changeCase.pascalCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> <<%=h.changeCase.pascalCase(name)%>>
+  <<%=h.changeCase.paramCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> </<%=h.changeCase.paramCase(name)%>>
 </template>
 
 <script lang="ts">
diff --git a/_templates/generator/component/package.json.ejs.t b/_templates/generator/component/package.json.ejs.t
@@ -10,12 +10,6 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
-    }
-  },
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "test-utils": "yarn workspace @chakra-ui/vue-test-utils",
-    "c-reset": "yarn workspace @chakra-ui/c-reset"
+    "c-reset": "yarn workspace @chakra-ui/c-reset",
+    "c-spinner": "yarn workspace @chakra-ui/c-spinner"
   },
   "license": "MIT",
   "private": true,
diff --git a/packages/c-reset/src/index.ts b/packages/c-reset/src/index.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { injectGlobal } from '@emotion/css'
+import { injectGlobal } from '@chakra-ui/vue-system'
 
 export const CReset = defineComponent({
   setup() {
diff --git a/packages/c-spinner/README.md b/packages/c-spinner/README.md
@@ -0,0 +1,11 @@
+# @chakra-ui/c-spinner
+
+Visual cue that an action is either processing awaiting a course of change or a result
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-spinner
+# or
+npm i @chakra-ui/c-spinner
+```
diff --git a/packages/c-spinner/examples/base-spinner.vue b/packages/c-spinner/examples/base-spinner.vue
@@ -0,0 +1,13 @@
+<template>
+  <c-spinner />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>
diff --git a/packages/c-spinner/examples/with-color.vue b/packages/c-spinner/examples/with-color.vue
@@ -0,0 +1,13 @@
+<template>
+  <c-spinner color="red.500" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>
diff --git a/packages/c-spinner/examples/with-empty-area-color.vue b/packages/c-spinner/examples/with-empty-area-color.vue
@@ -0,0 +1,19 @@
+<template>
+  <c-spinner
+    thickness="4px"
+    speed="0.65s"
+    emptyColor="gray.200"
+    color="blue.500"
+    size="xl"
+  />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>
diff --git a/packages/c-spinner/examples/with-size.vue b/packages/c-spinner/examples/with-size.vue
@@ -0,0 +1,17 @@
+<template>
+  <c-spinner size="xs" mr="3" />
+  <c-spinner size="sm" mr="3" />
+  <c-spinner size="md" mr="3" />
+  <c-spinner size="lg" mr="3" />
+  <c-spinner size="xl" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>
diff --git a/packages/c-spinner/package.json b/packages/c-spinner/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/c-spinner",
+  "description": "Chakra UI Vue | Visual cue that an action is either processing awaiting a course of change or a result 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 -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "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-spinner/src/index.ts b/packages/c-spinner/src/index.ts
@@ -0,0 +1 @@
+export { default as CSpinner } from './spinner'
diff --git a/packages/c-spinner/src/spinner.ts b/packages/c-spinner/src/spinner.ts
@@ -0,0 +1,127 @@
+import { h, defineComponent, PropType, computed } from 'vue'
+import {
+  chakra,
+  keyframes,
+  DOMElements,
+  ThemingProps,
+  useStyleConfig,
+} from '@chakra-ui/vue-system'
+import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
+
+const spin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+})
+
+interface SpinnerOptions {
+  /**
+   * The color of the empty area in the spinner
+   */
+  emptyColor?: string
+  /**
+   * The color of the spinner
+   */
+  color?: string
+  /**
+   * The thickness of the spinner
+   * @example
+   * ```html
+   * <c-spinner thickness="4px"/>
+   * ```
+   */
+  thickness?: string
+  /**
+   * The speed of the spinner.
+   * @example
+   * ```html
+   * <c-spinner speed="0.2s"/>
+   * ```
+   */
+  speed?: string
+  /**
+   * For accessibility, it is important to add a fallback loading text.
+   * This text will be visible to screen readers.
+   */
+  label?: string
+}
+
+export interface SpinnerProps extends SpinnerOptions, ThemingProps {}
+
+const props = {
+  as: {
+    type: [Object, String] as PropType<DOMElements>,
+    default: 'div',
+  },
+  emptyColor: {
+    type: String as PropType<SpinnerProps['emptyColor']>,
+    default: 'transparent',
+  },
+  thickness: {
+    type: String as PropType<SpinnerProps['thickness']>,
+    default: '2px',
+  },
+  speed: {
+    type: String as PropType<SpinnerProps['speed']>,
+    default: '0.45s',
+  },
+  color: {
+    type: String as PropType<SpinnerProps['color']>,
+  },
+  label: {
+    type: String as PropType<SpinnerProps['label']>,
+  },
+  colorScheme: String as PropType<string>,
+  variant: {
+    type: String as PropType<string>,
+    default: 'solid',
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'md',
+  },
+  styleConfig: String as PropType<ComponentThemeConfig>,
+}
+
+const CSpinner = defineComponent({
+  props,
+  setup(props, { slots, attrs }) {
+    const themingProps = computed<ThemingProps>(() => ({
+      colorScheme: props.colorScheme,
+      variant: props.variant,
+      size: props.size,
+      styleConfig: props.styleConfig,
+    }))
+
+    const styles = useStyleConfig('Spinner', { ...themingProps.value })
+
+    const spinnerStyles = {
+      display: 'inline-block',
+      borderColor: 'currentColor',
+      borderStyle: 'solid',
+      borderRadius: '99999px',
+      borderWidth: props.thickness,
+      borderBottomColor: props.emptyColor,
+      borderLeftColor: props.emptyColor,
+      color: props.color,
+      animation: `${spin} ${props.speed} linear infinite`,
+      ...styles.value,
+    }
+
+    return () =>
+      h(
+        chakra(props.as, {
+          label: 'spinner',
+          __css: spinnerStyles,
+        }),
+        {
+          ...attrs,
+        }
+      )
+  },
+})
+
+export default CSpinner
diff --git a/packages/c-spinner/tests/c-spinner.test.ts b/packages/c-spinner/tests/c-spinner.test.ts
@@ -0,0 +1,7 @@
+import { render } from '../../test-utils/src'
+import { CSpinner } from '../src'
+
+it('should render properly', () => {
+  const { asFragment } = render(CSpinner)
+  expect(asFragment()).toMatchSnapshot()
+})
diff --git a/packages/c-spinner/tsconfig.json b/packages/c-spinner/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/system/package.json b/packages/system/package.json
@@ -24,6 +24,7 @@
     "@chakra-ui/vue-next": "*",
     "@chakra-ui/vue-theme": "*",
     "@chakra-ui/vue-utils": "*",
+    "@emotion/css": "^11.1.3",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1"
   },
diff --git a/packages/system/src/chakra.ts b/packages/system/src/chakra.ts
@@ -116,7 +116,7 @@ export type ChakraBaseComponentProps = typeof chakraProps
 // @ts-expect-error
 export const chakra: IChakraFactory = (
   tag: DOMElements & Component,
-  options: ChakraFactoryOptions
+  options = {} as ChakraFactoryOptions
 ): DefineComponent => {
   return defineComponent({
     inheritAttrs: false,
@@ -254,7 +254,7 @@ export const resolveStyles = (
 type IChakraFactory = {
   [key in DOMElements]: DefineComponent
 } & {
-  (tag: DOMElements, options: StyleResolverProps): DefineComponent
+  (tag: DOMElements, options?: StyleResolverProps): DefineComponent
 }
 
 domElements.forEach((tag) => {
diff --git a/packages/system/src/system.utils.ts b/packages/system/src/system.utils.ts
@@ -1,4 +1,5 @@
 import { Dict, UnionStringArray } from '@chakra-ui/vue-utils'
+import { keyframes, injectGlobal } from '@emotion/css'
 
 /**
  * Carefully selected html elements for chakra components.
@@ -73,3 +74,5 @@ export type DOMElements = UnionStringArray<typeof domElements>
 export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>
 }
+
+export { keyframes, injectGlobal }
diff --git a/playground/src/.generated/imports.js b/playground/src/.generated/imports.js
@@ -13,10 +13,14 @@ import Component_12 from '@chakra-ui/c-icon/examples/base-icon.vue'
 import Component_13 from '@chakra-ui/c-icon/examples/with-color.vue'
 import Component_14 from '@chakra-ui/c-icon/examples/with-icon-library.vue'
 import Component_15 from '@chakra-ui/c-icon/examples/with-size.vue'
-import Component_16 from "../components/Home.vue";
+import Component_16 from '@chakra-ui/c-spinner/examples/base-spinner.vue'
+import Component_17 from '@chakra-ui/c-spinner/examples/with-color.vue'
+import Component_18 from '@chakra-ui/c-spinner/examples/with-empty-area-color.vue'
+import Component_19 from '@chakra-ui/c-spinner/examples/with-size.vue'
+import Component_20 from "../components/Home.vue";
 
 export default {
-  "../components/Home.vue": Component_16,
+  "../components/Home.vue": Component_20,
   "@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
   "@chakra-ui/c-alert/examples/with-accent.vue": Component_3,
   "@chakra-ui/c-alert/examples/with-icon.vue": Component_4,
@@ -30,5 +34,9 @@ export default {
   "@chakra-ui/c-icon/examples/base-icon.vue": Component_12,
   "@chakra-ui/c-icon/examples/with-color.vue": Component_13,
   "@chakra-ui/c-icon/examples/with-icon-library.vue": Component_14,
-  "@chakra-ui/c-icon/examples/with-size.vue": Component_15
+  "@chakra-ui/c-icon/examples/with-size.vue": Component_15,
+  "@chakra-ui/c-spinner/examples/base-spinner.vue": Component_16,
+  "@chakra-ui/c-spinner/examples/with-color.vue": Component_17,
+  "@chakra-ui/c-spinner/examples/with-empty-area-color.vue": Component_18,
+  "@chakra-ui/c-spinner/examples/with-size.vue": Component_19
 }
diff --git a/playground/src/.generated/resolver.js b/playground/src/.generated/resolver.js
@@ -5,6 +5,7 @@
   '@chakra-ui/c-button': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-button/src/index.ts',
   '@chakra-ui/c-icon': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-icon/src/index.ts',
   '@chakra-ui/c-reset': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-reset/src/index.ts',
+  '@chakra-ui/c-spinner': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-spinner/src/index.ts',
   '@chakra-ui/c-theme-provider': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/c-theme-provider/src/index.ts',
   '@chakra-ui/system': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/system/src/index.ts',
   '@chakra-ui/test-utils': '/Users/jonathanbakebwa/Github/chakra-ui-vue-next/packages/test-utils/src/index.ts',
diff --git a/playground/src/.generated/routes.json b/playground/src/.generated/routes.json
diff --git a/playground/src/components/Sidebar.vue b/playground/src/components/Sidebar.vue
