Merge pull request #5 from chakra-ui/component/alert

feat: Component/c-alert

Author: codebender828

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "postinstall": "yarn run lerna bootstrap",
-    "build": "lerna run build",
+    "build": "lerna run build --no-private --stream",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "scaffold": "hygen",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
@@ -22,6 +22,7 @@
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
     "system": "yarn workspace @chakra-ui/system-vue",
+    "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next"
   },
   "license": "MIT",

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

@@ -1,19 +1,9 @@
 <template>
-  <c-alert
-    font-weight="bold"
-    px="4"
-    py="3"
-    :bg="['yellow.300', 'blue.200']"
-    aria-role="alert"
-    rounded="md"
-  >
-    HELLO ALERT
-  </c-alert>
-  <p>Alert paragraph</p>
+  <c-alert> HELLO ALERT </c-alert>
 </template>
 
 <script lang="ts">
-import CAlert from '@chakra-ui/c-alert/src'
+import { CAlert } from '@chakra-ui/c-alert/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({

packages/c-alert/examples/with-accent.vue

@@ -0,0 +1,28 @@
+<template>
+  <c-alert status="success" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+  <c-alert variant="subtle" status="success" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+  <c-alert variant="left-accent" status="success" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+  <c-alert variant="top-accent" status="success" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+</template>
+
+<script lang="ts">
+import { CAlert, CAlertTitle, CAlertDescription } from '@chakra-ui/c-alert/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'WithAccentExample',
+  components: { CAlert, CAlertTitle, CAlertDescription },
+})
+</script>

packages/c-alert/examples/with-status.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-alert status="info" mb="3"> Info alert </c-alert>
+  <c-alert status="success" mb="3"> Success alert </c-alert>
+  <c-alert status="warning" mb="3"> Warning alert </c-alert>
+  <c-alert status="error" mb="3"> Error alert </c-alert>
+</template>
+
+<script lang="ts">
+import { CAlert } from '@chakra-ui/c-alert/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'WithStatusAlertExample',
+  components: { CAlert },
+})
+</script>

packages/c-alert/examples/with-title.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-alert status="info" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+</template>
+
+<script lang="ts">
+import { CAlert, CAlertTitle, CAlertDescription } from '@chakra-ui/c-alert/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'WithTitleExample',
+  components: { CAlert, CAlertTitle, CAlertDescription },
+})
+</script>

packages/c-alert/package.json

@@ -23,7 +23,7 @@
     "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
-    "@chakra-ui/vue-styled-system": "1.0.0",
+    "@chakra-ui/styled-system": "^1.4.1",
     "@chakra-ui/system-vue": "1.0.0",
     "@chakra-ui/vue-theme": "^1.0.0"
   }

packages/c-alert/src/alert.ts

@@ -0,0 +1,143 @@
+import { h, defineComponent, PropType, provide } from 'vue'
+import {
+  chakra,
+  ColorScheme,
+  DeepComponentThemeConfig,
+  ThemingProps,
+  useMultiStyleConfig,
+  provideComponentStyles,
+  useComponentStyles,
+  DOMElements,
+} from '@chakra-ui/system-vue'
+import { SystemStyleObject } from '@chakra-ui/styled-system'
+
+const STATUSES = {
+  info: {
+    colorScheme: 'blue' as ColorScheme,
+  },
+  success: {
+    colorScheme: 'green' as ColorScheme,
+  },
+  warning: {
+    colorScheme: 'orange' as ColorScheme,
+  },
+  error: {
+    colorScheme: 'red' as ColorScheme,
+  },
+}
+
+type AlertStatus = keyof typeof STATUSES
+export type AlertVariant = 'solid' | 'subtle' | 'left-accent' | 'top-accent'
+
+interface AlertState {
+  status: AlertStatus
+}
+
+/**
+ * CAlert component
+ *
+ * This is the container component for all Alert components.
+ * It also provides state and context to it's compound components
+ */
+export const CAlert = defineComponent({
+  name: 'CAlert',
+  props: {
+    as: {
+      type: [String, Object] as PropType<DOMElements>,
+      default: 'div',
+    },
+    status: {
+      type: [String] as PropType<AlertStatus>,
+      default: 'info',
+    },
+    colorScheme: {
+      type: [String] as PropType<ColorScheme>,
+    },
+    styleConfig: {
+      type: [Object] as PropType<DeepComponentThemeConfig>,
+    },
+    variant: {
+      type: [String] as PropType<AlertVariant>,
+      default: 'solid',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const colorScheme: ColorScheme =
+      props.colorScheme || STATUSES[props.status].colorScheme
+
+    const themingProps: ThemingProps = {
+      colorScheme,
+      variant: props.variant,
+    }
+    const styles = useMultiStyleConfig('Alert', themingProps)
+    const alertStyles: SystemStyleObject = {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      overflow: 'hidden',
+      ...styles.value.container,
+    }
+
+    provideComponentStyles('Alert', styles.value)
+    provide('$AlertState', { status: props.status } as AlertState)
+
+    return () =>
+      h(
+        chakra(props.as, 'alert'),
+        {
+          role: 'alert',
+          ...alertStyles,
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+/**
+ * CAlertTitle component
+ *
+ * The title component for alerts
+ */
+export const CAlertTitle = defineComponent({
+  name: 'CAlertTitle',
+  setup(_, { attrs, slots }) {
+    const styles = useComponentStyles('Alert')
+
+    return () =>
+      h(
+        chakra('div', 'alert__title'),
+        {
+          ...styles.title,
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+/**
+ * CAlertDescription component
+ *
+ * The description component for alerts
+ */
+export const CAlertDescription = defineComponent({
+  name: 'CAlertDescription',
+  setup(_, { attrs, slots }) {
+    const styles = useComponentStyles('Alert')
+
+    return () =>
+      h(
+        chakra('div', 'alert__description'),
+        {
+          ...styles.description,
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+// TODO: Add CAlertIcon component.
+// This should ne done after the icon component is created.

packages/c-alert/src/index.ts

@@ -1,26 +1 @@
-import { h, defineComponent, PropType } from 'vue'
-import { chakra } from '@chakra-ui/system-vue'
-import { DOMElements } from '@chakra-ui/system-vue/dist/types/system.utils'
-
-const CAlert = defineComponent({
-  name: 'CAlert',
-  props: {
-    as: {
-      type: [String, Object] as PropType<DOMElements>,
-      default: 'div',
-    },
-  },
-  setup(props, { slots, attrs }) {
-    return () =>
-      h(
-        chakra(props.as, 'alert'),
-        {
-          ...attrs,
-          role: 'alert',
-        },
-        slots
-      )
-  },
-})
-
-export default CAlert
+export * from './alert'

packages/c-theme-provider/src/index.ts

@@ -26,4 +26,3 @@ const CThemeProvider = defineComponent({
 })
 
 export default CThemeProvider
-export * from './theme.hooks'