Add SemanticChip shared component (#471)

* feat: ✨ add empty packages/ui

* feat: ⚗️ move taxes app-grid to packages/ui

* build: ⬆️ upgrade macaw-ui in packages/ui

* build: ⬆️ upgrade macaw even harder

* add app sdk

* Fix app-sdk version

* Add SemanticChip

* update lock

---------

Co-authored-by: Adrian Pilarczyk <adrianpilarczyk314@gmail.com>

.changeset/afraid-eagles-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@saleor/apps-ui": minor
+---
+
+Added SemanticChip component that wraps MacawUI Chip with semantic variants: error, warning, success & default

.changeset/new-readers-teach.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-search": minor
+---
+
+Replaced custom Chip implementation with SemanticChip from shared package

apps/search/package.json

@@ -19,7 +19,8 @@
     "@hookform/resolvers": "^3.1.0",
     "@saleor/app-sdk": "0.37.3",
     "@saleor/apps-shared": "workspace:*",
-    "@saleor/macaw-ui": "0.8.0-pre.84",
+    "@saleor/apps-ui": "workspace:*",
+    "@saleor/macaw-ui": "^0.8.0-pre.84",
     "@sentry/nextjs": "^7.46.0",
     "@types/debug": "^4.1.7",
     "@urql/exchange-auth": "^1.0.0",

apps/search/src/components/WebhooksStatus.tsx

@@ -1,6 +1,7 @@
 import { Accordion, Box, Chip, Text } from "@saleor/macaw-ui/next";
 import { EventDeliveryStatusEnum } from "../../generated/graphql";
 import { useWebhooksStatus } from "../lib/useWebhooksStatus";
+import { SemanticChip } from "@saleor/apps-ui";
 
 export const WebhooksStatus = () => {
   const { data: webhooksData } = useWebhooksStatus();
@@ -38,23 +39,15 @@ export const WebhooksStatus = () => {
                   alignItems={"center"}
                 >
                   <Text size={"small"}>{webhook.asyncEvents[0].name}</Text>
-                  <Chip
-                    padding={2}
-                    marginLeft={"auto"}
-                    size={"small"}
-                    backgroundColor={
-                      webhook.isActive ? "decorativeSurfaceSubdued2" : "surfaceCriticalSubdued"
-                    }
-                  >
-                    <Text
-                      color={webhook.isActive ? "text2Decorative" : "textCriticalSubdued"}
-                      textTransform={"uppercase"}
-                      margin={3}
-                      variant={"caption"}
-                    >
-                      {webhook.isActive ? "Active" : "Disabled"}
-                    </Text>
-                  </Chip>
+                  {webhook.isActive ? (
+                    <SemanticChip marginLeft={"auto"} size={"small"} variant={"success"}>
+                      ACTIVE
+                    </SemanticChip>
+                  ) : (
+                    <SemanticChip marginLeft={"auto"} size={"small"} variant={"error"}>
+                      DISABLED
+                    </SemanticChip>
+                  )}
                 </Box>
               </Trigger>
               <Accordion.Content>

packages/ui/index.ts

@@ -1,3 +1 @@
-/*
- * * export components from here
- */
+export * from "./src/semantic-chip";

packages/ui/src/semantic-chip.tsx

@@ -0,0 +1,53 @@
+import { BoxProps, Chip, ChipProps, Text, TextProps } from "@saleor/macaw-ui/next";
+
+const colorPropsBorderMapping: Record<ChipProps["variant"], BoxProps["borderColor"]> = {
+  default: "neutralSubdued",
+  warning: "criticalDefault",
+  error: "criticalDefault",
+  success: "neutralDefault",
+};
+
+const colorPropsTextMapping: Record<ChipProps["variant"], BoxProps["color"]> = {
+  default: "textNeutralPlain",
+  warning: "textCriticalDefault",
+  error: "textCriticalDefault",
+  success: "text2Decorative",
+};
+
+const colorPropsBgMapping: Record<ChipProps["variant"], BoxProps["backgroundColor"]> = {
+  default: "surfaceNeutralHighlight",
+  warning: "surfaceNeutralHighlight",
+  error: "surfaceCriticalSubdued",
+  success: "decorativeSurfaceSubdued2",
+};
+
+interface ChipTextProps extends ChipProps {
+  variant?: "default" | "warning" | "error" | "success";
+  innerTextProps?: TextProps;
+}
+
+export const SemanticChip = ({
+  variant = "default",
+  children,
+  size,
+  innerTextProps,
+  ...props
+}: ChipTextProps) => {
+  return (
+    <Chip
+      backgroundColor={colorPropsBgMapping[variant]}
+      borderColor={colorPropsBorderMapping[variant]}
+      size={size}
+      {...props}
+    >
+      <Text
+        color={colorPropsTextMapping[variant]}
+        size={size}
+        variant={"caption"}
+        {...innerTextProps}
+      >
+        {children}
+      </Text>
+    </Chip>
+  );
+};

pnpm-lock.yaml

@@ -1233,8 +1233,11 @@ importers:
       '@saleor/apps-shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@saleor/apps-ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@saleor/macaw-ui':
-        specifier: 0.8.0-pre.84
+        specifier: ^0.8.0-pre.84
         version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
       '@sentry/nextjs':
         specifier: ^7.46.0