feat: checkbox and checkbox group component

.changeset/fuzzy-walls-shop.md

@@ -0,0 +1,41 @@
+---
+"@chakra-ui/vue-anatomy": major
+"@chakra-ui/c-accordion": major
+"@chakra-ui/c-alert": major
+"@chakra-ui/c-breadcrumb": major
+"@chakra-ui/c-button": major
+"@chakra-ui/c-checkbox": major
+"@chakra-ui/c-close-button": major
+"@chakra-ui/c-code": major
+"@chakra-ui/c-color-mode": major
+"@chakra-ui/c-flex": major
+"@chakra-ui/c-focus-lock": major
+"@chakra-ui/c-form-control": major
+"@chakra-ui/c-icon": major
+"@chakra-ui/c-input": major
+"@chakra-ui/c-modal": major
+"@chakra-ui/c-motion": major
+"@chakra-ui/c-popper": major
+"@chakra-ui/c-portal": major
+"@chakra-ui/c-reset": major
+"@chakra-ui/c-scroll-lock": major
+"@chakra-ui/c-spinner": major
+"@chakra-ui/c-tag": major
+"@chakra-ui/c-theme-provider": major
+"@chakra-ui/c-visually-hidden": major
+"@chakra-ui/vue-next": major
+"@chakra-ui/vue-layout": major
+"@chakra-ui/nuxt-next": major
+"@chakra-ui/vue-styled": major
+"@chakra-ui/vue-system": major
+"@chakra-ui/vue-test-utils": major
+"@chakra-ui/vue-theme": major
+"@chakra-ui/vue-theme-tools": major
+"@chakra-ui/vue-utils": major
+"@chakra-ui/vue-a11y": major
+"@chakra-ui/vue-composables": major
+"@chakra-ui/vue-auto-import": major
+"@chakra-ui/vue-docs": major
+---
+
+Add component for checkbox and checnbox group

.github/workflows/pr.yml

@@ -49,7 +49,7 @@ jobs:
       run: yarn build
 
     - name: Run tests
-      run: yarn test
+      run: yarn test:ci
       env:
         CI: true
 

.github/workflows/release.yml

@@ -50,7 +50,7 @@ jobs:
       run: yarn build && yarn bootstrap
 
     - name: Testing components
-      run: yarn test
+      run: yarn test:ci
       env:
         CI: true
 

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-08-31T15:33:17.883Z
+ * This file was generated on 2022-09-12T04:00:56.880Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -78,6 +78,7 @@ declare module "@vue/runtime-core" {
     CButton: typeof import("@chakra-ui/vue-next")["CButton"]
     CButtonGroup: typeof import("@chakra-ui/vue-next")["CButtonGroup"]
     CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
+    CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
     CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
     CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
     CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]

package.json

@@ -31,6 +31,7 @@
     "cy:run": "cypress run-ct --quiet",
     "test:component": "yarn cy:run",
     "test": "jest",
+    "test:ci": "cross-env NODE_ENV=test jest --verbose --silent --config jest.config.js",
     "test:unit": "cross-env NODE_ENV=test jest --config jest.config.js",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "docs:dev:legacy": "vitepress dev docs",

packages/c-checkbox/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-checkbox
+
+C checkbox component is used in forms when a user needs to select multiple values from several options
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-checkbox
+# or
+npm i @chakra-ui/c-checkbox
+```

packages/c-checkbox/examples/simple-checkbox.vue

@@ -0,0 +1,7 @@
+<template>
+  <c-checkbox default-checked> Simple checkbox </c-checkbox>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "@chakra-ui/vue-next"
+</script>

packages/c-checkbox/examples/with-checkbox-group.vue

@@ -0,0 +1,19 @@
+<template>
+  <c-checkbox-group v-model="items" color-scheme="blue" size="lg">
+    <c-stack>
+      <c-checkbox value="naruto"> Naruto </c-checkbox>
+      <c-checkbox value="sasuke"> Sasuke </c-checkbox>
+      <c-checkbox value="kakashi"> Kakashi </c-checkbox>
+    </c-stack>
+  </c-checkbox-group>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from "vue"
+import { CCheckbox, CCheckboxGroup } from "@chakra-ui/vue-next"
+const items = ref(["naruto", "sasuke"])
+
+watchEffect(() => {
+  console.log("items list updated", items.value)
+})
+</script>

packages/c-checkbox/examples/with-color-scheme.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-stack>
+    <c-checkbox default-checked color-scheme="red"> Red checkbox </c-checkbox>
+    <c-checkbox default-checked color-scheme="green">
+      Green checkbox
+    </c-checkbox>
+    <c-checkbox default-checked color-scheme="pink"> Pink checkbox </c-checkbox>
+  </c-stack>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "@chakra-ui/vue-next"
+</script>

packages/c-checkbox/examples/with-indeterminate.vue

@@ -0,0 +1,52 @@
+<template>
+  <c-stack>
+    <c-checkbox
+      v-model="allChecked"
+      :is-indeterminate="isIndeterminate"
+      @change="
+        (value) => {
+          setCheckedItems([value, value])
+        }
+      "
+    >
+      Parent checkbox
+    </c-checkbox>
+    <c-stack pl="6" mt="1" spacing="1">
+      <c-checkbox
+        :model-value="checkedItems[0]"
+        @change="
+          (value) => {
+            setCheckedItems([value, checkedItems[1]])
+          }
+        "
+      >
+        Child Checkbox 1
+      </c-checkbox>
+      <c-checkbox
+        :model-value="checkedItems[1]"
+        @change="
+          (value) => {
+            setCheckedItems([checkedItems[0], value])
+          }
+        "
+      >
+        Child Checkbox 2
+      </c-checkbox>
+    </c-stack>
+  </c-stack>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue"
+import { CCheckbox } from "@chakra-ui/vue-next"
+
+const checkedItems = ref([false, false])
+function setCheckedItems(value: boolean[]) {
+  checkedItems.value = [value[0], value[1]]
+}
+
+const allChecked = computed(() => checkedItems.value.every(Boolean))
+const isIndeterminate = computed(
+  () => checkedItems.value.some(Boolean) && !allChecked.value
+)
+</script>

packages/c-checkbox/examples/with-invalid.vue

@@ -0,0 +1,7 @@
+<template>
+  <c-checkbox is-invalid> Checkbox </c-checkbox>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "@chakra-ui/vue-next"
+</script>

packages/c-checkbox/examples/with-size.vue

@@ -0,0 +1,17 @@
+<template>
+  <c-stack :spacing="[1, 5]" :direction="['column', 'row']">
+    <c-checkbox size="sm" default-checked color-scheme="red">
+      Small checkbox
+    </c-checkbox>
+    <c-checkbox size="md" default-checked color-scheme="green">
+      Medium checkbox (default)
+    </c-checkbox>
+    <c-checkbox size="lg" default-checked color-scheme="pink">
+      Large checkbox
+    </c-checkbox>
+  </c-stack>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "@chakra-ui/vue-next"
+</script>

packages/c-checkbox/examples/with-spacing.vue

@@ -0,0 +1,11 @@
+<template>
+  <c-stack>
+    <c-checkbox spacing="1rem"> Option (1rem) </c-checkbox>
+    <c-checkbox spacing="1.25rem"> Option (1.25rem) </c-checkbox>
+    <c-checkbox spacing="1.5rem"> Option (1.5rem) </c-checkbox>
+  </c-stack>
+</template>
+
+<script lang="ts" setup>
+import { CCheckbox } from "@chakra-ui/vue-next"
+</script>

packages/c-checkbox/index.tsx

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

packages/c-checkbox/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@chakra-ui/c-checkbox",
+  "description": "Chakra UI Vue | C checkbox component is used in forms when a user needs to select multiple values from several options component",
+  "version": "0.0.0-alpha.0",
+  "main": "dist/chakra-ui-c-checkbox.cjs.js",
+  "module": "dist/chakra-ui-c-checkbox.esm.js",
+  "author": "Jonathan Bakebwa <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/chakra-ui-c-checkbox.cjs.js",
+      "default": "./dist/chakra-ui-c-checkbox.esm.js"
+    }
+  },
+  "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": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@chakra-ui/c-form-control": "0.0.0-alpha.5",
+    "@chakra-ui/c-motion": "0.1.0-alpha.9",
+    "@chakra-ui/utils": "2.0.3",
+    "@chakra-ui/vue-composables": "0.1.0-alpha.9",
+    "@chakra-ui/vue-system": "0.1.0-alpha.10",
+    "@chakra-ui/vue-utils": "0.1.0-alpha.10",
+    "@vueuse/motion": "1.5.4",
+    "@zag-js/checkbox": "0.1.6",
+    "@zag-js/vue": "0.1.14"
+  },
+  "devDependencies": {
+    "vue": "^3.1.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/c-checkbox/src/checkbox-group.tsx

@@ -0,0 +1,79 @@
+import { UseCheckboxGroupProps } from "./checkbox.types"
+import { ThemingProps } from "@chakra-ui/styled-system"
+import {
+  defineComponent,
+  h,
+  ComputedRef,
+  PropType,
+  computed,
+  renderSlot,
+} from "vue"
+import { createContext, vueThemingProps } from "@chakra-ui/vue-utils"
+import { ComponentWithProps, DeepPartial } from "@chakra-ui/vue-system"
+import { useCheckboxGroup } from "./use-checkbox-group"
+
+export interface CCheckboxGroupProps
+  extends UseCheckboxGroupProps,
+    Omit<ThemingProps<"Checkbox">, "orientation"> {}
+
+type CheckboxGroupContext = ComputedRef<
+  ThemingProps & {
+    isDisabled?: boolean
+    value: (string | number)[]
+    handleChange(value: number | string, isChecked: boolean): void
+  }
+>
+
+const [CheckboxGroupProvider, useCheckboxGroupContext] =
+  createContext<CheckboxGroupContext>({
+    strict: false,
+    name: "CheckboxGroupContext",
+  })
+
+export const CCheckboxGroup: ComponentWithProps<
+  DeepPartial<CCheckboxGroupProps>
+> = defineComponent({
+  name: "CCheckboxGroup",
+  props: {
+    modelValue: {
+      type: Object as PropType<(string | number)[]>,
+      // eslint-disable-next-line vue/require-valid-default-prop
+      default: () => [],
+    },
+    isDisabled: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    ...vueThemingProps,
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit, slots }) {
+    const checkBoxGroupValue = computed<(number | string)[]>({
+      get() {
+        return props.modelValue
+      },
+      set(value) {
+        emit("update:modelValue", value)
+      },
+    })
+
+    const { modelValue, handleChange } = useCheckboxGroup({
+      modelValue: checkBoxGroupValue,
+      isDisabled: computed(() => props.isDisabled),
+    })
+
+    const checkboxGroupContext = computed(() => ({
+      size: props.size,
+      variant: props.variant,
+      isDisabled: props.isDisabled,
+      colorScheme: props.colorScheme,
+      value: modelValue.value,
+      handleChange,
+    }))
+
+    CheckboxGroupProvider(checkboxGroupContext)
+    return () => renderSlot(slots, "default")
+  },
+})
+
+export { useCheckboxGroupContext }