Merge branch 'dev' into fonts

Author: nhsz

package.json

@@ -26,12 +26,16 @@
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
+    "@types/hast": "^3.0.0",
     "@types/node": "^20.4.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.45.0",
     "eslint-config-next": "^13.4.10",
+    "image-size": "^1.0.2",
     "polished": "^4.2.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "unified": "^10.0.0",
+    "unist-util-visit": "^5.0.0"
   }
 }

src/@chakra-ui/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/components/Avatar.ts

@@ -0,0 +1,93 @@
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+  getToken,
+} from "@chakra-ui/react"
+import { avatarAnatomy } from "@chakra-ui/anatomy"
+import { avatarDefaultTheme, defineMergeStyles } from "./components.utils"
+import { pick } from "lodash"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(avatarAnatomy.keys)
+
+const { baseStyle: defaultBaseStyle, sizes: defaultSizes } = avatarDefaultTheme
+
+const $border = cssVar("avatar-border-color", "transparent")
+const $mlBySize = cssVar("ml-by-size")
+
+const baseStyleContainer = defineStyle((props) => {
+  const primaryLowContrast = getToken(
+    "colors",
+    "primary.lowContrast"
+  )(props.theme)
+
+  return defineMergeStyles(defaultBaseStyle?.(props).container, {
+    [$border.variable]: "transparent",
+    borderWidth: "1px",
+    "&:hover, [data-peer]:hover ~ &": {
+      boxShadow: `0.15em 0.15em 0 ${primaryLowContrast}`,
+    },
+    _focus: {
+      outline: "4px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: "-1px",
+    },
+    _active: {
+      [$border.variable]: "colors.primary.hover",
+      boxShadow: "none",
+      "& img": {
+        opacity: 0.7,
+      },
+    },
+    "[role='group'] &": {
+      [$border.variable]: "colors.background.base",
+      _notLast: {
+        marginLeft: $mlBySize.reference,
+      },
+    },
+  })
+})
+
+const baseStyleExessLabel = defineStyle((props) =>
+  defineMergeStyles(defaultBaseStyle?.(props).excessLabel, {
+    bg: "body.base",
+    color: "background.base",
+    ms: $mlBySize.reference,
+  })
+)
+
+const baseStyle = definePartsStyle((props) => ({
+  container: baseStyleContainer(props),
+  excessLabel: baseStyleExessLabel(props),
+}))
+
+const USED_SIZES = ["xs", "sm", "md", "lg"] as const
+
+const pickedDefaultSizes: { [k in (typeof USED_SIZES)[number]]?: object } =
+  pick(defaultSizes, ...USED_SIZES)
+
+const sizes = defineMergeStyles(pickedDefaultSizes, {
+  xs: {
+    group: {
+      [$mlBySize.variable]: "space.-1",
+    },
+    excessLabel: {
+      fontSize: "0.563rem",
+    },
+  },
+  sm: {
+    group: {
+      [$mlBySize.variable]: "space.-2",
+    },
+    excessLabel: {
+      fontSize: "sm",
+    },
+  },
+})
+
+export const Avatar = defineMultiStyleConfig({
+  baseStyle,
+  // @ts-expect-error
+  sizes,
+})

src/@chakra-ui/components/Badge.ts

@@ -0,0 +1,43 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { badgeDefaultTheme, defineMergeStyles } from "./components.utils"
+
+const { baseStyle: defaultBaseStyle } = badgeDefaultTheme
+
+const baseStyle = defineMergeStyles(defaultBaseStyle, {
+  borderRadius: "base",
+  border: "1px solid",
+  borderColor: "transparent",
+  fontWeight: "initial",
+  py: 1,
+  px: 2,
+  textTransform: "uppercase",
+})
+
+const variantSecondary = defineStyle({
+  borderColor: "primary100",
+  color: "text",
+})
+
+const variantSolid = defineStyle({
+  color: "black300",
+  background: "primary100",
+})
+
+export const Badge = defineStyleConfig({
+  baseStyle,
+  variants: {
+    solid: variantSolid,
+    secondary: variantSecondary,
+  },
+  sizes: {
+    sm: {
+      py: 0,
+    },
+    lg: {
+      px: 3,
+    },
+  },
+  defaultProps: {
+    variant: "solid",
+  },
+})

src/@chakra-ui/components/Checkbox.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
+import { checkboxAnatomy } from "@chakra-ui/anatomy"
+import {
+  checkboxDefaultTheme,
+  commonInputTriggerStyles,
+  defineMergeStyles,
+} from "./components.utils"
+
+const { sizes: defaultSizes } = checkboxDefaultTheme
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(checkboxAnatomy.keys)
+
+const { commonContainerProps, commonControlProps, commonLabelProps } =
+  commonInputTriggerStyles
+
+const checkboxMdSize = defaultSizes?.md
+
+const baseStyleControl = defineMergeStyles(
+  checkboxMdSize?.control,
+  commonControlProps,
+  {
+    boxSize: "var(--checkbox-size)", // Comes from default theme
+    borderRadius: "sm",
+  }
+)
+
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
+
+const baseStyleIcon = defineStyle({
+  boxSize: 2,
+})
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  icon: baseStyleIcon,
+})
+
+export const Checkbox = defineMultiStyleConfig({
+  baseStyle,
+})