feat: modal component

.changeset/rare-ads-impress.md

@@ -0,0 +1,31 @@
+---
+'@chakra-ui/c-accordion': minor
+'@chakra-ui/c-alert': minor
+'@chakra-ui/c-button': minor
+'@chakra-ui/c-code': minor
+'@chakra-ui/c-flex': minor
+'@chakra-ui/c-focus-lock': minor
+'@chakra-ui/c-icon': minor
+'@chakra-ui/c-modal': minor
+'@chakra-ui/c-motion': minor
+'@chakra-ui/c-popper': minor
+'@chakra-ui/c-portal': minor
+'@chakra-ui/c-reset': minor
+'@chakra-ui/c-scroll-lock': minor
+'@chakra-ui/c-spinner': minor
+'@chakra-ui/c-visually-hidden': minor
+'@chakra-ui/vue-next': minor
+'@chakra-ui/vue-layout': minor
+'@chakra-ui/vue-theme': minor
+'@chakra-ui/vue-theme-tools': minor
+'@chakra-ui/vue-utils': minor
+'@chakra-ui/vue-a11y': minor
+'@chakra-ui/vue-composables': minor
+'@chakra-ui/vue-auto-import': minor
+'@chakra-ui/vue-docs': minor
+---
+
+- Adds Modal component
+- Adds FocusLock composable, directive and component
+- Adds ScrollLock composable, directive and component
+- Improves TSX support

.eslintignore

@@ -4,4 +4,5 @@ dist
 # At the time of writing this, I could not find any helpful
 # documentation for adding ESLint for Vue 3 projects running on Vite.
 # For this reason, we ignore the playground directory.
-playground
+playground
+snapshots.js

_templates/generator/component/component.ts.ejs.t

@@ -1,6 +1,15 @@
 ---
 to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>.ts
 ---
+/**
+ * Hey! Welcome to @chakra-ui/vue-next <%= h.changeCase.pascalCase(name) %>
+ *
+ * <%=h.changeCase.sentence(description)%>
+ *
+ * @see Docs     https://next.vue.chakra-ui.com/<%=h.changeCase.paramCase(name)%>
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>/<%=h.changeCase.paramCase(name)%>.ts
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
+ */
 
 import { h, defineComponent, PropType } from 'vue'
 import { chakra, DOMElements } from '@chakra-ui/vue-system'

babel.config.js

@@ -35,11 +35,11 @@ const testConfig = {
         [
           '@babel/preset-env',
           {
-            targets: { node: true },
+            targets: { node: 'current' },
           },
         ],
       ],
-      plugins: ['@vue/babel-plugin-jsx'],
+      plugins: ['@vue/babel-plugin-jsx', '@babel/plugin-transform-runtime'],
     },
   },
 }

docs/.vitepress/config.js

@@ -65,7 +65,8 @@ function getSetupSidebar() {
     {
       text: 'Composables',
       children: [
-        { text: 'usePopper', link: '/composables/use-popper' }
+        { text: 'usePopper', link: '/composables/use-popper' },
+        { text: 'useFocusLock', link: '/composables/use-focus-lock' }
       ]
     }
   ]

docs/composables/use-focus-lock.md

@@ -0,0 +1,110 @@
+# useFocusLock
+
+The **`useFocusLock`** hook is an internal hook for Chakra UI Vue used to encapsulate `focus-trap` into an extendable composable hook.
+
+This allows us to compose the behaviour required for focus trapping accessible dialogs and modals into a single hook and can be extended as a component
+
+## Import
+
+```bash
+import { useFocusLock } from "@chakra-ui/c-focus-lock"
+```
+
+This composable accepts options to modify the positioning fo the popover as well as the modifiers of the popper. It returns an object of properties that can be used to bind the template refs to the popper instance
+
+## Usage
+
+```vue
+<template>
+  <chakra.div
+    :ref="lock"
+    p="4"
+    border="4px dashed"
+    rounded="lg"
+    border-color="gray.400"
+    d="inline-block"
+  >
+    <chakra.p mb="2">Inside focus trap</chakra.p>
+    <c-button @click="options.enabled = true" color-scheme="teal">
+      Enable focus lock
+    </c-button>
+    <c-button :ref="initialFocus" color-scheme="yellow" mx="2"
+      >Button 2</c-button
+    >
+    <c-button color-scheme="blue">Button 3</c-button>
+  </chakra.div>
+</template>
+
+<script lang="ts">
+import { useFocusLock, FocusLockOptions } from '@chakra-ui/c-focus-lock'
+import { defineComponent, reactive } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const options: FocusLockOptions = reactive({
+      enabled: true,
+      onActivate: () => {
+        console.log('focus lock ENABLED')
+      },
+      onDeactivate: () => {
+        console.log('focus lock DEACTIVATED')
+      },
+    })
+
+    const { lock, initialFocus } = useFocusLock(options)
+
+    return {
+      lock,
+      options,
+      initialFocus,
+    }
+  },
+})
+</script>
+
+
+```
+
+## Props
+These are the options for the `usePopper` composable. These properties are similar to the options listed in the [@popperjs/core](https://popper.js.org/docs/v2/) documentation.
+```ts
+export interface FocusLockOptions {
+  /**
+   * Determines whether the focus lock is active or inactive
+   * @default true
+   */
+  enabled: boolean
+  /**
+   * Invoked handler when focus-lock is activated
+   */
+  onActivate?: () => void
+  /**
+   * Invoked handler when focus-lock is deactivated
+   */
+  onDeactivate?: () => void
+  /**
+   * Invoked handler when focus-lock is activated.
+   *
+   * By default, an error will be thrown if the focus lock
+   * contains no elements in its tab order. With this
+   * option you can specify a fallback element to
+   * programmatically receive focus if no other
+   * tabbable elements are found.
+   */
+  fallbackFocus?: FocusTarget
+  /**
+   * Determines whether focus lock is activated when user clicks outside.
+   * @default true
+   */
+  clickOutsideDeactivates?: boolean | ((e: MouseEvent) => boolean)
+  persistentFocus?: boolean | ((e: MouseEvent) => boolean)
+  /**
+   * Determines whether to return focus to the previously focused element
+   * before the focus-trap was activated, after the focus trap has been deactivated.
+   */
+  returnFocus?: boolean
+  preventScroll?: boolean
+  escapeDeactivates?: boolean
+  delayInitialFocus?: boolean
+}
+```

docs/guides/component-guide.md

@@ -94,7 +94,7 @@ we advice to follow to deliver on the quality expectations.
 
 ### General
 
-- Ensure you check the `@chakra-ui/vue-hooks`, and `@chakra-ui/vue-utils` package to be
+- Ensure you check the `@chakra-ui/vue-composables`, and `@chakra-ui/vue-utils` package to be
   sure we don't already have the hook you're looking to create.
 - Leverage existing code, hook, or utils as much as possible.
 - Separate component logic from UI by writing hooks, and then writing the

package.json

@@ -8,8 +8,7 @@
   "workspaces": [
     "packages/*",
     "tooling/*",
-    "website",
-    "tests"
+    "website"
   ],
   "scripts": {
     "pkg": "manypkg run",
@@ -20,7 +19,7 @@
     "scaffold": "hygen generator",
     "release": "yarn changeset publish",
     "build": "lerna run build --no-private --stream",
-    "dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts",
+    "dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts --open",
     "playground:build": "yarn install && yarn build && yarn bootstrap && NODE_ENV=production vite build playground --config ./vite.config.ts",
     "cy:open": "cypress open-ct",
     "cy:run": "cypress run-ct --quiet",
@@ -55,6 +54,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/user-event": "^12.6.2",
     "@testing-library/vue": "^6.3.4",
+    "@types/body-scroll-lock": "^2.6.1",
     "@types/jest": "^26.0.20",
     "@types/jest-axe": "^3.5.1",
     "@types/lodash.camelcase": "^4.3.6",
@@ -70,10 +70,13 @@
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
-    "@vueuse/motion": "1.5.4",
     "@vueuse/core": "4.9.1",
+    "@vueuse/integrations": "^4.8.1",
+    "@vueuse/motion": "^1.5.4",
+    "aria-hidden": "^1.1.2",
     "axe-core": "^4.1.2",
     "babel-jest": "^26.6.3",
+    "body-scroll-lock": "^3.1.5",
     "change-case": "^4.1.1",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
@@ -82,6 +85,7 @@
     "css-get-unit": "^1.0.1",
     "csstype": "^3.0.5",
     "dequal": "^2.0.2",
+    "dom-focus-lock": "^1.0.4",
     "esbuild-jest": "^0.4.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.12.0",
@@ -93,6 +97,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^7.0.0",
     "feather-icons-paths": "^1.0.8",
+    "focus-trap": "^6.3.0",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.8",
     "hygen": "^6.0.4",
@@ -124,10 +129,14 @@
     "vue3-perfect-scrollbar": "^1.5.5"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@cypress/snapshot": "^2.1.7",
     "@cypress/vite-dev-server": "^1.2.6",
-    "@cypress/vue": "^3.0.1",
+    "@cypress/vue": "^3",
     "@vue/test-utils": "^2.0.0-rc.6",
-    "cypress": "^7.2.0"
+    "cypress": "^7.2.0",
+    "cypress-commands": "^1.1.0",
+    "cypress-plugin-tab": "^1.0.5",
+    "local-cypress": "^1.2.1"
   }
 }

packages/c-alert/examples/index.ts

@@ -2,4 +2,4 @@ export * as BaseAlert from './base-alert.vue'
 export * as WithAccent from './with-accent.vue'
 export * as WithIcon from './with-icon.vue'
 export * as WithStatus from './with-status.vue'
-export * as WithTitle from './with-title.vue'
+export * as WithTitle from './with-title.vue'

packages/c-alert/tests/c-alert.cy.tsx

@@ -5,27 +5,24 @@ import { CAlert, CAlertDescription, CAlertIcon, CAlertTitle } from '../src'
 describe('Alert Examples', () => {
   Object.entries(Examples).map(([name, example]) => {
     it(`renders ${name} successfully`, () => {
-      cy.mount(example.default)
-      .then(() => {})
-      .checkA11y()
+      cy.mount(h(() => <example.default></example.default>)).checkA11y()
     })
   })
 })
 
 it('contains the correct role', () => {
-  cy.mount(Examples.BaseAlert.default)
-    .then(() => {})
-    .get('[role=alert]')
-    .should('exist')
+  cy.mount(Examples.BaseAlert.default).get('[role=alert]').should('exist')
 })
 
 it('renders its children', () => {
   cy.mount(
-    <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
-      <CAlertIcon mr="2" />
-      <CAlertTitle> Info alert </CAlertTitle>
-      <CAlertDescription> Something just happened </CAlertDescription>
-    </CAlert>
+    h(() => (
+      <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
+        <CAlertIcon mr="2" />
+        <CAlertTitle> Info alert </CAlertTitle>
+        <CAlertDescription> Something just happened </CAlertDescription>
+      </CAlert>
+    ))
   )
     .get('[data-testid=alert]')
     .should('contain', 'Info alert')

packages/c-button/examples/button-group.ts

@@ -1 +1 @@
-export * as WithButtonGroup from './with-button-group.vue'
+export * as WithButtonGroup from './with-button-group.vue'

packages/c-button/examples/button.ts

@@ -4,4 +4,4 @@ export * as WithAttachedButtons from './with-attached-buttons.vue'
 export * as WithButtonSize from '../examples/with-button-size.vue'
 export * as WithButtonIcon from '../examples/with-button-icon.vue'
 export * as WithButtonVariants from '../examples/with-button-variants.vue'
-export * as WithLoadingStatus from '../examples/with-loading-status.vue'
+export * as WithLoadingStatus from '../examples/with-loading-status.vue'

packages/c-button/examples/index.ts

@@ -1,2 +1,2 @@
 export * as Button from './button'
-export * as ButtonGroup from './button-group'
+export * as ButtonGroup from './button-group'

packages/c-button/examples/with-button-variants.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <c-button mr="3" variant="luxury"> Solid </c-button>
     <c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
     <c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
     <c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>

packages/c-button/src/button-group.ts

@@ -34,9 +34,11 @@ const props = {
   ...vueThemingProps,
 }
 
-type ButtonGroupContext = ComputedRef<ThemingProps & {
-  isDisabled?: boolean
-}>
+type ButtonGroupContext = ComputedRef<
+  ThemingProps & {
+    isDisabled?: boolean
+  }
+>
 
 const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
   {
@@ -49,12 +51,14 @@ const CButtonGroup = defineComponent({
   name: 'CButtonGroup',
   props,
   setup(props, { attrs, slots }) {
-    ButtonGroupProvider(computed(() => ({
-      size: props.size,
-      colorScheme: props.colorScheme,
-      variant: props.variant,
-      isDisabled: props.isDisabled,
-    })))
+    ButtonGroupProvider(
+      computed(() => ({
+        size: props.size,
+        colorScheme: props.colorScheme,
+        variant: props.variant,
+        isDisabled: props.isDisabled,
+      }))
+    )
 
     const styles = computed(() => {
       let groupStyles: SystemStyleObject = {
@@ -77,9 +81,8 @@ const CButtonGroup = defineComponent({
 
       return groupStyles
     })
-
-    return () => {
 
+    return () => {
       return h(
         chakra('div', { label: 'button__group' }),
         {