Merge branch 'dev' into removeZenMode

Author: corwintines

.all-contributorsrc

@@ -10339,6 +10339,33 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "GDdark",
+      "name": "DongXi Huang",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15982894?v=4",
+      "profile": "https://github.com/GDdark",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "SurajAnand88",
+      "name": "Suraj Anand",
+      "avatar_url": "https://avatars.githubusercontent.com/u/120190623?v=4",
+      "profile": "https://surajanand88.github.io/portfolio/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "MwitahJob",
+      "name": "Mwitah ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/136892656?v=4",
+      "profile": "https://github.com/MwitahJob",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1617,6 +1617,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xx92"><img src="https://avatars.githubusercontent.com/u/133748557?v=4?s=100" width="100px;" alt="0xx92"/><br /><sub><b>0xx92</b></sub></a><br /><a href="#content-0xx92" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/altinocoelho"><img src="https://avatars.githubusercontent.com/u/92543849?v=4?s=100" width="100px;" alt="altinocoelho"/><br /><sub><b>altinocoelho</b></sub></a><br /><a href="#content-altinocoelho" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/viac92"><img src="https://avatars.githubusercontent.com/u/64146594?v=4?s=100" width="100px;" alt="viac92"/><br /><sub><b>viac92</b></sub></a><br /><a href="#content-viac92" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/GDdark"><img src="https://avatars.githubusercontent.com/u/15982894?v=4?s=100" width="100px;" alt="DongXi Huang"/><br /><sub><b>DongXi Huang</b></sub></a><br /><a href="#content-GDdark" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://surajanand88.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/120190623?v=4?s=100" width="100px;" alt="Suraj Anand"/><br /><sub><b>Suraj Anand</b></sub></a><br /><a href="#content-SurajAnand88" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/MwitahJob"><img src="https://avatars.githubusercontent.com/u/136892656?v=4?s=100" width="100px;" alt="Mwitah "/><br /><sub><b>Mwitah </b></sub></a><br /><a href="#content-MwitahJob" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -17,7 +17,6 @@
     "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
-    "@googleapis/calendar": "^6.0.0",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
@@ -56,7 +55,6 @@
     "gatsby-transformer-json": "^5.4.0",
     "gatsby-transformer-remark": "^6.4.0",
     "gatsby-transformer-sharp": "^5.4.0",
-    "googleapis": "^118.0.0",
     "htmr": "^1.0.2",
     "i18next": "^21.9.2",
     "is-relative-url": "^3.0.0",
@@ -125,8 +123,10 @@
   "scripts": {
     "postinstall": "yarn theme",
     "build": "gatsby build",
-    "build:lambda": "cross-env NODE_OPTIONS=--openssl-legacy-provider netlify-lambda build src/lambda --config=./webpack.lambda.js",
-    "build:10gb": "cross-env NODE_OPTIONS=--max-old-space-size=10240 gatsby build",
+    "build:lambda": "NODE_OPTIONS=--openssl-legacy-provider netlify-lambda build src/lambda --config=./webpack.lambda.js",
+    "build:10gb": "NODE_OPTIONS=--max-old-space-size=10240 gatsby build",
+    "build:lambda-cross-env": "cross-env NODE_OPTIONS=--openssl-legacy-provider netlify-lambda build src/lambda --config=./webpack.lambda.js",
+    "build:10gb-cross-env": "cross-env NODE_OPTIONS=--max-old-space-size=10240 gatsby build",
     "clean": "gatsby clean",
     "crowdin-clean": "rm -rf .crowdin && mkdir .crowdin",
     "crowdin-import": "ts-node src/scripts/crowdin-import.ts",

src/@chakra-ui/gatsby-plugin/components/Alert.ts

@@ -0,0 +1,93 @@
+import {
+  createMultiStyleConfigHelpers,
+  SystemStyleObject,
+} from "@chakra-ui/react"
+import { alertAnatomy } from "@chakra-ui/anatomy"
+import { alertDefaultTheme, defineMergeStyles } from "./components.utils"
+import { AlertStatusType } from "../../../components/Alert"
+
+const STATUS_COLORS: Record<
+  "solid" | "subtle",
+  Record<AlertStatusType, SystemStyleObject>
+> = {
+  solid: {
+    error: {
+      bg: "error.base",
+      color: "error.light",
+    },
+    info: {
+      bg: "body.medium",
+      color: "background.base",
+    },
+    warning: {
+      bg: "attention.base",
+      color: "attention.light",
+    },
+    success: {
+      bg: "success.base",
+      color: "success.light",
+    },
+  },
+  subtle: {
+    error: {
+      bg: "error.light",
+      color: "error.base",
+    },
+    info: {
+      bg: "background.highlight",
+      color: "body.base",
+    },
+    warning: {
+      bg: "attention.light",
+      color: "gray.700",
+    },
+    success: {
+      bg: "success.light",
+      color: "success",
+    },
+  },
+}
+
+const { baseStyle: alertBaseStyle } = alertDefaultTheme
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(alertAnatomy.keys)
+
+const baseStyleContainer = defineMergeStyles(alertBaseStyle?.container, {
+  justifyContent: "center",
+  gap: 2,
+})
+
+const baseStyleIcon = defineMergeStyles(alertBaseStyle?.icon, {
+  me: 2,
+})
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  icon: baseStyleIcon,
+})
+
+const variantSolid = definePartsStyle((props) => ({
+  container: {
+    ...STATUS_COLORS["solid"][props.status],
+  },
+}))
+
+const variantSubtle = definePartsStyle((props) => ({
+  container: {
+    ...STATUS_COLORS["subtle"][props.status],
+  },
+}))
+
+const variants = {
+  solid: variantSolid,
+  subtle: variantSubtle,
+}
+
+export const Alert = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: "solid",
+  },
+})

src/@chakra-ui/gatsby-plugin/components/components.utils.ts

@@ -3,6 +3,7 @@ import { merge } from "lodash"
 
 const {
   Accordion: accordionDefaultTheme,
+  Alert: alertDefaultTheme,
   Avatar: avatarDefaultTheme,
   Badge: badgeDefaultTheme,
   Breadcrumb: breadcrumbDefaultTheme,
@@ -30,6 +31,7 @@ const {
 
 export {
   accordionDefaultTheme,
+  alertDefaultTheme,
   avatarDefaultTheme,
   badgeDefaultTheme,
   breadcrumbDefaultTheme,

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -1,3 +1,4 @@
+import { Alert } from "./Alert"
 import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Button } from "./Button"
@@ -28,6 +29,7 @@ import {
 
 export default {
   Accordion: accordionDefaultTheme,
+  Alert,
   Avatar,
   Badge,
   Breadcrumb: breadcrumbDefaultTheme,

src/api/calendarEvents.ts

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import Alert from "."
+import { Box, Flex, Text } from "@chakra-ui/react"
+
+type AlertType = typeof Alert
+
+const meta: Meta<AlertType> = {
+  title: "Molecules / Action Feedback / Alerts",
+  component: Alert,
+  decorators: [
+    (Story) => (
+      <Flex flexDir="column" gap={4} width="3xl">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<AlertType>
+
+const DEMO_DESC = "This is an alert to be used in the top of the content"
+
+const STATUSES = ["error", "success", "warning", "info"] as const
+
+export const StatusVariants: Story = {
+  args: {
+    description: DEMO_DESC,
+    onClose: () => {},
+  },
+  render: (args) => (
+    <>
+      {STATUSES.map((status) => (
+        <Alert key={status} status={status} {...args} />
+      ))}
+    </>
+  ),
+}
+
+export const ContentVariants: Story = {
+  args: {
+    description: DEMO_DESC,
+  },
+  render: (args) => (
+    <>
+      <Alert {...args} />
+      <Alert hasIcon={false} {...args} />
+      <Alert maxW="sm" onClose={() => {}} {...args} />
+    </>
+  ),
+}
+
+export const StyleVariants: Story = {
+  args: {
+    description: DEMO_DESC,
+    onClose: () => {},
+  },
+  argTypes: {
+    status: {
+      options: STATUSES,
+      control: {
+        type: "radio",
+      },
+    },
+  },
+  render: (args) => (
+    <>
+      <Box>
+        <Text>Solid</Text>
+        <Alert {...args} />
+      </Box>
+      <Box>
+        <Text>Subtle</Text>
+        <Alert variant="subtle" {...args} />
+      </Box>
+    </>
+  ),
+}

src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import {
+  Alert as ChakraAlert,
+  AlertDescription,
+  AlertIcon,
+  AlertProps as ChakraAlertProps,
+  AlertStatus,
+  CloseButton,
+  forwardRef,
+} from "@chakra-ui/react"
+
+export type AlertStatusType = Exclude<AlertStatus, "loading">
+
+interface AlertProps extends Omit<ChakraAlertProps, "status"> {
+  /**
+   * Should the alert icon show?
+   *
+   * @default true
+   */
+  hasIcon?: boolean
+  /**
+   * The description of the alert
+   */
+  description: string
+  status?: AlertStatusType
+  /**
+   * Function to handle closing of the Alert
+   *
+   * If this prop is present, a `CloseButton` component is rendered
+   */
+  onClose?: () => void
+}
+
+const Alert = forwardRef<AlertProps, "div">((props, ref) => {
+  const {
+    hasIcon = true,
+    description,
+    onClose,
+    status = "info",
+    ...rest
+  } = props
+
+  const isCloseable = !!onClose
+
+  const closeButtonStateStyles = {
+    borderRadius: "base",
+    _active: {
+      boxShadow: "none",
+      transform: "translate(0)",
+      transitionDuration: "20ms",
+    },
+  }
+
+  return (
+    <ChakraAlert ref={ref} position="relative" status={status} {...rest}>
+      <>
+        {hasIcon ? <AlertIcon ms={isCloseable ? "auto" : undefined} /> : null}
+        <AlertDescription>{description}</AlertDescription>
+        {isCloseable ? (
+          <CloseButton
+            onClick={onClose}
+            ms="auto"
+            {...closeButtonStateStyles}
+          />
+        ) : null}
+      </>
+    </ChakraAlert>
+  )
+})
+
+export default Alert