Merge pull request #16 from hivemq/feature/alert-types

Feature / Add alerts to theme

testing/src/App.tsx

@@ -1,6 +1,7 @@
 import { Box, ChakraBaseProvider, Heading } from '@chakra-ui/react'
 import { theme } from '../../theme/src/main'
 
+import { Alerts } from '@/views/Alerts.tsx'
 import { Buttons } from '@/views/Buttons'
 import { Colors } from '@/views/Colors'
 import { Headings } from '@/views/Headings'
@@ -10,29 +11,46 @@ import { SemanticColors } from '@/views/SemanticColors'
 function App() {
   return (
     <ChakraBaseProvider theme={theme}>
-      <Heading variant="h1">Colors</Heading>
-      <Box p={8}>
-        <Colors withText />
-      </Box>
-      <hr />
-      <Heading variant="h1">Semantic Colors</Heading>
-      <Box p={8}>
-        <SemanticColors withText />
-      </Box>
-      <hr />
-      <Heading variant="h1">Headings</Heading>
-      <Box p={8}>
-        <Headings />
-      </Box>
-      <hr />
-      <Heading variant="h1">Buttons</Heading>
-      <Box p={8}>
-        <Buttons />
-      </Box>
-      <hr />
-      <Heading variant="h1"> Links</Heading>
-      <Box p={8}>
-        <Links />
+      <Box pl={6} pt={6}>
+        <Heading variant="h1">Colors</Heading>
+        <Box p={8}>
+          <Colors withText />
+        </Box>
+        <hr />
+        <Heading variant="h1" pt={4}>
+          Semantic Colors
+        </Heading>
+        <Box p={8}>
+          <SemanticColors withText />
+        </Box>
+        <hr />
+        <Heading variant="h1" pt={4}>
+          Headings
+        </Heading>
+        <Box p={8}>
+          <Headings />
+        </Box>
+        <hr />
+        <Heading variant="h1" pt={4}>
+          Buttons
+        </Heading>
+        <Box p={8}>
+          <Buttons />
+        </Box>
+        <hr />
+        <Heading variant="h1" pt={4}>
+          Links
+        </Heading>
+        <Box p={8}>
+          <Links />
+        </Box>
+        <hr />
+        <Heading variant="h1" pt={4}>
+          Alerts
+        </Heading>
+        <Box p={8}>
+          <Alerts />
+        </Box>
       </Box>
     </ChakraBaseProvider>
   )

testing/src/views/Alerts.tsx

@@ -0,0 +1,43 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  HStack,
+  Heading,
+} from '@chakra-ui/react'
+
+export function Alerts() {
+  const variants: Array<'success' | 'error' | 'warning' | 'info'> = [
+    'success',
+    'error',
+    'warning',
+    'info',
+  ]
+
+  return (
+    <>
+      <HStack width="100%" gap={8} alignItems="start">
+        {variants.map((variant) => {
+          return (
+            <Box key={variant} p={2}>
+              <Heading variant="h2" mb={2}>
+                {variant.charAt(0).toUpperCase() + variant.slice(1)}
+              </Heading>
+              <Alert variant={variant} status={variant}>
+                <AlertIcon />
+                <Box flex="1">
+                  <AlertTitle>
+                    {variant.charAt(0).toUpperCase() + variant.slice(1)} Alert
+                  </AlertTitle>
+                  <AlertDescription>This is a {variant} alert.</AlertDescription>
+                </Box>
+              </Alert>
+            </Box>
+          )
+        })}
+      </HStack>
+    </>
+  )
+}

testing/src/views/Buttons.tsx

@@ -11,7 +11,7 @@ export function Buttons() {
           return (
             <Box key={variant}>
               <Heading variant="h2" mb={2}>
-                {variant}{' '}
+                {variant}
               </Heading>
               {sizes.map((size) => {
                 return (

theme/package.json

@@ -10,9 +10,7 @@
     "module": "./dist/index.es.js",
     "types": "./dist/index.es.d.ts"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm build:types && pnpm build:lib",
     "build:lib": "vite build",

theme/src/components/alerts.ts

@@ -0,0 +1,156 @@
+import { alertAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  alertAnatomy.keys,
+)
+
+const success = definePartsStyle({
+  container: {
+    background: 'background.bg-success.light',
+    borderColor: 'border.border-success-strong.light',
+    color: 'text.text-success.light',
+    _dark: {
+      background: 'background.bg-success.dark',
+      borderColor: 'border.border-success-strong.dark',
+      color: 'text.text-success.dark',
+    },
+  },
+  icon: {
+    color: 'icon.icon-success.light',
+    _dark: {
+      color: 'icon.icon-success.dark',
+    },
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  description: {
+    color: 'text.text-success.light',
+    _dark: {
+      color: 'text.text-success.dark',
+    },
+  },
+})
+
+const error = definePartsStyle({
+  container: {
+    background: 'background.bg-error.light',
+    borderColor: 'border.border-error-strong.light',
+    color: 'text.text-error.light',
+    _dark: {
+      background: 'background.bg-error.dark',
+      borderColor: 'border.border-error-strong.dark',
+      color: 'text.text-error.dark',
+    },
+  },
+  icon: {
+    color: 'icon.icon-error.light',
+    _dark: {
+      color: 'icon.icon-error.dark',
+    },
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  description: {
+    color: 'text.text-error.light',
+    _dark: {
+      color: 'text.text-error.dark',
+    },
+  },
+})
+
+const warning = definePartsStyle({
+  container: {
+    background: 'background.bg-warning.light',
+    borderColor: 'border.border-warning-strong.light',
+    color: 'text.text-warning.light',
+    _dark: {
+      background: 'background.bg-warning.dark',
+      borderColor: 'border.border-warning-strong.dark',
+      color: 'text.text-warning.dark',
+    },
+  },
+  icon: {
+    color: 'icon.icon-warning.light',
+    _dark: {
+      color: 'icon.icon-warning.dark',
+    },
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  description: {
+    color: 'text.text-warning.light',
+    _dark: {
+      color: 'text.text-warning.dark',
+    },
+  },
+})
+
+const info = definePartsStyle({
+  container: {
+    background: 'background.bg-info.light',
+    borderColor: 'border.border-info-strong.light',
+    color: 'text.text-info.light',
+    _dark: {
+      background: 'background.bg-info.dark',
+      borderColor: 'border.border-info-strong.dark',
+      color: 'text.text-info.dark',
+    },
+  },
+  icon: {
+    color: 'icon.icon-info.light',
+    _dark: {
+      color: 'icon.icon-info.dark',
+    },
+  },
+  title: {
+    fontWeight: 'bold',
+  },
+  description: {
+    color: 'text.text-info.light',
+    _dark: {
+      color: 'text.text-info.dark',
+    },
+  },
+})
+
+const variants = {
+  success,
+  error,
+  warning,
+  info,
+}
+
+const baseStyle = definePartsStyle({
+  container: {
+    borderRadius: 'md',
+    borderWidth: '1px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    padding: '1rem',
+  },
+  icon: {
+    marginRight: '0.5rem',
+    width: '24px',
+  },
+  title: {
+    marginRight: '0.5rem',
+    fontWeight: 'bold',
+  },
+  description: {
+    flex: 1,
+  },
+})
+
+export const alertTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'info',
+    size: 'md',
+  },
+})

theme/src/components/link.ts

@@ -18,7 +18,7 @@ export const linkTheme = defineStyleConfig({
     _hover: {
       cursor: 'pointer !important',
     },
-    color: 'blue.500',
+    color: 'text.text-accent-strong.light',
   },
   variants,
 })

theme/src/main.ts

@@ -1,9 +1,10 @@
-import { type StyleFunctionProps, extendBaseTheme } from '@chakra-ui/react'
 import { mode } from '@chakra-ui/theme-tools'
+import { alertTheme } from './components/alerts'
 import { buttonTheme } from './components/button'
 import { headingTheme } from './components/headings'
 import { linkTheme } from './components/link'
 
+import { type StyleFunctionProps, extendBaseTheme } from '@chakra-ui/react'
 import * as colors from './foundations/colors'
 import semanticColors from './style-guide/computedSemanticColors'
 
@@ -27,6 +28,7 @@ export const components = {
   Button: buttonTheme,
   Heading: headingTheme,
   Link: linkTheme,
+  Alert: alertTheme,
 } as const
 
 export const theme = extendBaseTheme({