Merge pull request #12 from chakra-ui/feat/css-reset

Feat/css reset and button

Author: codebender828

README.md

@@ -14,15 +14,38 @@ yarn install
 yarn build
 ```
 
+### Bootstrap and link packages
+```bash
+yarn bootstrap
+```
+
 ### Component playground (based on vite)
 ```bash
 yarn dev
 ```
 
+## Development Guide
+### 1. Creating new components
+Chakra UI Vue uses [hygen](https://www.hygen.io/) to generate new components. The component templates can be found in the `_templates/generator/component` directory
+
+```bash
+yarn hygen component --name <COMPONENT_NAME> --description="MY_COMPONENT_DESCRIPTION"
+```
+
+This creates a new package with the name `<COMPONENT_NAME>` with some basic sanity tests.
+
+After creating your new package, run `yarn workspace @chakra-ui/COMPONENT_NAME && yarn bootstrap` to build and link your component in the monorepo.
+
+Run `yarn dev` to view your new component in the playground.
+
+**Additional notes:**
+Add a script for your package workspace in the `package.json` file.
+
 ### Major todos:
 - [ ] Documentation (to be based on Nuxt 3)
 - [ ] Accessibility JS hooks (Documented in Roadmap)
 
+
 #### Contributors' note:
 Hi!
 

_templates/generator/component/package.json.ejs.t

@@ -10,18 +10,19 @@ 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",
-  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
-  "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"
     }
   },
+  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  
   "publishConfig": {
     "access": "public"
   },

package.json

@@ -27,7 +27,8 @@
     "system": "yarn workspace @chakra-ui/vue-system",
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
-    "test-utils": "yarn workspace @chakra-ui/vue-test-utils"
+    "test-utils": "yarn workspace @chakra-ui/vue-test-utils",
+    "c-reset": "yarn workspace @chakra-ui/c-reset"
   },
   "license": "MIT",
   "private": true,

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

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <c-button class="my-other-class"> Base button ◻️ </c-button>
+    <c-button mr="3" color-scheme="blue"> Base button</c-button>
+    <c-button mr="3" color-scheme="green"> Base button</c-button>
+    <c-button mr="3" color-scheme="orange"> Base button</c-button>
+    <c-button mr="3" color-scheme="pink"> Base button</c-button>
   </div>
 </template>
 
 <script lang="ts">
-import CButton from '@chakra-ui/c-button/src'
+import { CButton } from '@chakra-ui/c-button/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({

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

@@ -0,0 +1,15 @@
+<template>
+  <c-button mr="3" size="xs" color-scheme="teal"> Tiny button </c-button>
+  <c-button mr="3" size="sm" color-scheme="teal"> Small button </c-button>
+  <c-button mr="3" size="md" color-scheme="teal"> Medium button </c-button>
+  <c-button mr="3" size="lg" color-scheme="teal"> Large button </c-button>
+</template>
+
+<script lang="ts">
+import { CButton } from '@chakra-ui/c-button/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { CButton },
+})
+</script>

packages/c-button/package.json

@@ -16,9 +16,14 @@
     "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"
+    "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": "*"
   }
 }

packages/c-button/src/button.ts

@@ -0,0 +1,105 @@
+import { h, defineComponent, PropType, computed } from 'vue'
+import {
+  chakra,
+  DOMElements,
+  useStyleConfig,
+  ThemingProps,
+} from '@chakra-ui/vue-system'
+import {
+  SystemCSSProperties,
+  SystemStyleObject,
+} from '@chakra-ui/styled-system'
+import { Colors } from '@chakra-ui/vue-theme/dist/types/foundations/colors'
+import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
+import { dataAttr } from '@chakra-ui/vue-utils'
+
+type ButtonTypes = 'button' | 'reset' | 'submit'
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg'
+export type ButtonVariants =
+  | 'subtle'
+  | 'solid'
+  | 'outline'
+  | 'ghost'
+  | 'link'
+  | string
+
+const props = {
+  as: {
+    type: String as PropType<DOMElements>,
+    default: 'button',
+  },
+  isLoading: Boolean as PropType<boolean>,
+  isActive: Boolean as PropType<boolean>,
+  isDisabled: Boolean as PropType<boolean>,
+  loadingText: String as PropType<string>,
+  isFullWidth: Boolean as PropType<boolean>,
+  type: String as PropType<ButtonTypes>,
+  leftIcon: String as PropType<string>,
+  rightIcon: String as PropType<string>,
+  colorScheme: String as PropType<keyof Colors>,
+  variant: {
+    type: String as PropType<ButtonVariants>,
+    default: 'solid',
+  },
+  size: {
+    type: String as PropType<ButtonSizes>,
+    default: 'md',
+  },
+  styleConfig: String as PropType<ComponentThemeConfig>,
+
+  /** Not sure if the SystemCSSProperties is the right prop type for this */
+  iconSpacing: {
+    type: [String, Number, Array] as PropType<
+      SystemCSSProperties['marginRight']
+    >,
+    default: '0.5rem',
+  },
+}
+
+/** TODO: How to get component props in typescript */
+
+const CButton = defineComponent({
+  name: 'CButton',
+  props,
+  setup(props, { attrs, slots }) {
+    const themingProps = computed<ThemingProps>(() => ({
+      colorScheme: props.colorScheme,
+      variant: props.variant,
+      size: props.size,
+      styleConfig: props.styleConfig,
+    }))
+
+    const styles = useStyleConfig('Button', themingProps.value)
+
+    const buttonStyles: SystemStyleObject = {
+      display: 'inline-flex',
+      appearance: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'all 250ms',
+      userSelect: 'none',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      outline: 'none',
+      width: props.isFullWidth ? '100%' : 'auto',
+      ...styles.value,
+    }
+
+    return () =>
+      h(
+        chakra(props.as, 'button'),
+        {
+          disabled: props.isDisabled || props.isLoading,
+          type: props.as === 'button' ? undefined : props.type,
+          dataActive: dataAttr(props.isActive),
+          dataLoading: dataAttr(props.isLoading),
+          ...buttonStyles,
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+export default CButton

packages/c-button/src/index.ts

@@ -1,24 +1 @@
-import { h, defineComponent, PropType } from 'vue'
-import { chakra, DOMElements } from '@chakra-ui/vue-system'
-
-const CButton = defineComponent({
-  name: 'CButton',
-  props: {
-    as: {
-      type: String as PropType<DOMElements>,
-      default: 'button',
-    },
-  },
-  setup(_, { attrs, slots }) {
-    return () =>
-      h(
-        chakra('button', 'button'),
-        {
-          ...attrs,
-        },
-        slots
-      )
-  },
-})
-
-export default CButton
+export { default as CButton } from './button'

packages/c-button/tests/__snapshots__/c-button.test.ts.snap

@@ -3,7 +3,9 @@
 exports[`should render properly 1`] = `
 <DocumentFragment>
   <button
-    class="chakra-button css-0"
-  />
+    class="chakra-button css-myeq6i"
+  >
+    Happy button
+  </button>
 </DocumentFragment>
 `;

packages/c-button/tests/c-button.test.ts

@@ -1,7 +1,39 @@
-import { render } from '../../test-utils/src'
-import CButton from '../src'
+import { render, userEvent } from '../../test-utils/src'
+import { CButton } from '../src'
+
+const renderComponent = (props?: any) => {
+  const base = {
+    components: {
+      CButton,
+    },
+    template: '<CButton>Happy button</CButton>',
+    ...props,
+  }
+  return render(base)
+}
 
 it('should render properly', () => {
-  const { asFragment } = render(CButton)
+  const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should be in the DOM', () => {
+  const { baseElement } = renderComponent()
+  expect(baseElement).toBeInTheDocument()
+})
+
+it('should emit click event on click', async () => {
+  const handleClick = jest.fn()
+  const { getByTestId } = renderComponent({
+    template:
+      '<c-button data-testid="button" @click="handleClick">Happy button</c-button>',
+    setup() {
+      return {
+        handleClick,
+      }
+    },
+  })
+
+  await userEvent.click(getByTestId('button'))
+  expect(handleClick).toHaveBeenCalled()
+})