Merge pull request #30 from chakra-ui/docs/landing-page

chore: improve landing page

Author: codebender828

.gitignore

@@ -96,4 +96,5 @@ dist
 .pnp.*
 
 # vscode history extension
-.history
+.history
+website/.vite-ssg-temp

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "johnsoncodehk.volar"
+  ]
+}

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "volar.tsPlugin": true
 }

docs/.vitepress/config.js

@@ -27,6 +27,7 @@ module.exports = {
     sidebar: {
       '/setup/': getSetupSidebar(),
       '/components/': getSetupSidebar(),
+      '/composables/': getSetupSidebar(),
       '/': getSetupSidebar()
     }
   }
@@ -52,6 +53,12 @@ function getSetupSidebar() {
         { text: 'CSS reset', link: '/components/css-reset' },
         { text: 'Visually hidden', link: '/components/visually-hidden' },
       ]
+    },
+    {
+      text: 'Composables',
+      children: [
+        { text: 'usePopper', link: '/composables/use-popper' }
+      ]
     }
   ]
 }
@@ -70,13 +77,5 @@ function getComponentsSidebar() {
         { text: 'Visually hidden', link: '/components/visually-hidden' },
       ]
     },
-    // {
-    //   text: 'Theme',
-    //   children: [
-    //     { text: 'Homepage', link: '/config/homepage' },
-    //     { text: 'Algolia Search', link: '/config/algolia-search' },
-    //     { text: 'Carbon Ads', link: '/config/carbon-ads' }
-    //   ]
-    // }
   ]
 }

docs/composables/use-popper.md

@@ -0,0 +1,73 @@
+# usePopper
+
+The **`usePopper`** hook is an internal hook for Chakra UI Vue used to encapsulate `@popperjs/core` into an extendable composable hook.
+
+## Import
+
+```bash
+import { usePopper } from "@chakra-ui/c-popper"
+```
+
+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>
+    <c-button :ref="reference" @click="toggleIsOpen">Testing</c-button>
+    <div v-if="isOpen" :ref="popper" style="padding: 20px; background: red">
+      <div
+        data-popper-arrow=""
+        style="--popper-arrow-size: 10px; background: yellow"
+      />
+      Popper
+    </div>
+  </chakra.div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { usePopper } from '@chakra-ui/c-popper'
+import { CButton } from '@chakra-ui/c-button'
+import { useToggle } from '@vueuse/core'
+
+export default defineComponent({
+  components: { CButton },
+  setup() {
+    const [isOpen, toggleIsOpen] = useToggle(true)
+
+    const { reference, popper } = usePopper({
+      gutter: 16,
+      placement: 'right-end',
+    })
+
+    return {
+      isOpen,
+      toggleIsOpen,
+      reference,
+      popper,
+    }
+  },
+})
+</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 UsePopperOptions {
+  offset?: [x: number, y: number]
+  gutter?: number
+  preventOverflow?: boolean
+  flip?: boolean
+  matchWidth?: boolean
+  boundary?: 'clippingParents' | 'scrollParent' | HTMLElement
+  eventListeners?: boolean | { scroll?: boolean; resize?: boolean }
+  arrowPadding?: number
+  strategy?: 'absolute' | 'fixed'
+  placement?: Placement
+  modifiers?: Array<Modifier<any, any>>
+}
+```

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest/dist',
   },
-  transformIgnorePatterns: ['/node_modules/(?!lodash.)'],
+  transformIgnorePatterns: ['/node_modules/(?!@popperjs/.*|lodash.)'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     '@chakra-ui/vue-test-utils': '<rootDir>/packages/test-utils/src/index.ts',
@@ -11,10 +11,9 @@ module.exports = {
     '@chakra-ui/vue-test-utils/dist/cjs/snapshot-serializer.js',
   ],
   testMatch: ['**/**/*.test.(js|jsx|ts|tsx)'],
-  testEnvironmentOptions: { resources: 'usable' },
   globals: {
     'ts-jest': {
-      babelConfig: 'babel.config.js',
+      tsconfig: 'tsconfig.json',
     },
   },
 }

package.json

@@ -6,7 +6,8 @@
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "Jonathan Bakebwa codebender828@gmail.com",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "website"
   ],
   "scripts": {
     "postinstall": "yarn bootstrap",
@@ -20,6 +21,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
+    "website": "yarn workspace @chakra-ui/vue-docs",
     "core": "yarn workspace @chakra-ui/vue-next",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "system": "yarn workspace @chakra-ui/vue-system",
@@ -34,7 +36,8 @@
     "c-reset": "yarn workspace @chakra-ui/c-reset",
     "c-spinner": "yarn workspace @chakra-ui/c-spinner",
     "c-badge": "yarn workspace @chakra-ui/c-badge",
-    "c-portal": "yarn workspace @chakra-ui/c-portal"
+    "c-portal": "yarn workspace @chakra-ui/c-portal",
+    "c-popper": "yarn workspace @chakra-ui/c-popper"
   },
   "license": "MIT",
   "private": true,
@@ -102,18 +105,22 @@
     "@chakra-ui/styled-system": "^1.4.1",
     "@emotion/css": "^11.1.3",
     "@emotion/server": "^11.0.0",
+    "@popperjs/core": "^2.8.4",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/lodash.kebabcase": "^4.1.6",
     "@types/lodash.mergewith": "^4.6.6",
     "@types/tinycolor2": "^1.4.2",
+    "@vueuse/motion": "^1.4.4",
     "change-case": "^4.1.1",
     "css-get-unit": "^1.0.1",
     "csstype": "^3.0.5",
+    "dequal": "^2.0.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
     "object-assign": "^4.1.1",
     "react": "^17.0.1",
-    "tinycolor2": "^1.4.2"
+    "tinycolor2": "^1.4.2",
+    "vue": "^3.0.5"
   }
 }

packages/c-flex/src/flex.ts

@@ -1,50 +1,52 @@
 import { h, defineComponent, PropType, reactive } from 'vue'
+import type CSS from 'csstype'
 import { chakra, DOMElements, ThemingProps } from '@chakra-ui/vue-system'
-import { SystemStyleObject } from '@chakra-ui/styled-system'
+
+type ArrayOrStringProp<T> = T | T[]
 
 export interface FlexProps {
   /**
    * Shorthand for `alignItems` style prop
    * @type SystemStyleObject["alignItems"]
    * SystemStyleObject because prop can be String, Array or Object
    */
-  align?: SystemStyleObject['alignItems']
+  align?: ArrayOrStringProp<CSS.Properties['alignItems']>
 
   /**
    * Shorthand for `justifyContent` style prop
    * @type SystemStyleObject["justifyContent"]
    */
-  justify?: SystemStyleObject['justifyContent']
+  justify?: ArrayOrStringProp<CSS.Properties['justifyContent']>
 
   /**
    * Shorthand for `flexWrap` style prop
    * @type SystemStyleObject["flexWrap"]
    */
-  wrap?: SystemStyleObject['flexWrap']
+  wrap?: ArrayOrStringProp<CSS.Properties['flexWrap']>
 
   /**
    * Shorthand for `flexDirection` style prop
    * @type SystemStyleObject["flexDirection"]
    */
-  direction?: SystemStyleObject['flexDirection']
+  direction?: ArrayOrStringProp<CSS.Properties['flexDirection']>
 
   /**
    * Shorthand for `flexBasis` style prop
    * @type SystemStyleObject["flexBasis"]
    */
-  basis?: SystemStyleObject['flexBasis']
+  basis?: ArrayOrStringProp<CSS.Properties['flexBasis']>
 
   /**
    * Shorthand for `flexGrow` style prop
    * @type SystemStyleObject["flexGrow"]
    */
-  grow?: SystemStyleObject['flexGrow']
+  grow?: ArrayOrStringProp<CSS.Properties['flexGrow']>
 
   /**
    * Shorthand for `flexShrink` style prop
    * @type SystemStyleObject["flexShrink"]
    */
-  shrink?: SystemStyleObject['flexShrink']
+  shrink?: ArrayOrStringProp<CSS.Properties['flexShrink']>
 }
 
 const CFlex = defineComponent({

packages/c-popper/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/vue-popper
+
+Position engine for vue bult on popperjs core
+
+## Installation
+
+```sh
+yarn add @chakra-ui/vue-popper
+# or
+npm i @chakra-ui/vue-popper
+```

packages/c-popper/examples/motion.utils.ts

@@ -0,0 +1,33 @@
+export const variants = {
+  initial: {
+    opacity: 0,
+  },
+  enter: {
+    opacity: 1,
+  },
+  leave: {
+    opacity: 0,
+  },
+}
+
+export const innerVariants = {
+  initial: {
+    scale: 0.9,
+    opacity: 0,
+  },
+  enter: {
+    scale: 1,
+    opacity: 1,
+    transition: {
+      scale: {
+        type: 'spring',
+        damping: 5,
+        stiffness: 550,
+      },
+    },
+  },
+  leave: {
+    scale: 0.9,
+    opacity: 0,
+  },
+}