Use the SemanticChip

apps/emails-and-messages/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ["@saleor/apps-shared", "@saleor/react-hook-form-macaw"],
+  transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui", "@saleor/react-hook-form-macaw"],
 };
 
 const isSentryEnvAvailable =

apps/emails-and-messages/package.json

@@ -20,8 +20,9 @@
     "@monaco-editor/react": "^4.4.6",
     "@saleor/app-sdk": "0.38.0",
     "@saleor/apps-shared": "workspace:*",
+    "@saleor/apps-ui": "workspace:*",
     "@saleor/react-hook-form-macaw": "workspace:*",
-    "@saleor/macaw-ui": "0.8.0-pre.83",
+    "@saleor/macaw-ui": "0.8.0-pre.84",
     "@sendgrid/client": "^7.7.0",
     "@sendgrid/mail": "^7.7.0",
     "@sentry/nextjs": "^7.52.1",

apps/emails-and-messages/src/components/chip-text.tsx

@@ -1,30 +0,0 @@
-import { Text, Chip, ChipProps } from "@saleor/macaw-ui/next";
-
-const colorPropsMapping: Record<ChipProps["variant"], ChipProps["borderColor"]> = {
-  default: "neutralSubdued",
-  warning: "brandHighlight",
-  error: "criticalDefault",
-  success: "neutralDefault",
-};
-
-interface ChipTextProps {
-  variant?: "default" | "warning" | "error" | "success";
-  content: string;
-}
-
-export const ChipText = ({ variant = "default", content }: ChipTextProps) => {
-  const commonProps: ChipProps = {
-    __maxWidth: "max-content",
-    display: "flex",
-    borderStyle: "solid",
-    borderWidth: 1,
-  };
-
-  return (
-    <Chip {...commonProps} borderColor={colorPropsMapping[variant]}>
-      <Text color="textNeutralDefault" size="small" variant="caption">
-        {content}
-      </Text>
-    </Chip>
-  );
-};

apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, Text } from "@saleor/macaw-ui/next";
+import { SemanticChip } from "@saleor/apps-ui";
 import { BoxWithBorder } from "../../../components/box-with-border";
 import { BoxFooter } from "../../../components/box-footer";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { useRouter } from "next/router";
-import { ChipText } from "../../../components/chip-text";
 import Image from "next/image";
 import sendgrid from "../../../public/sendgrid.png";
 import smtp from "../../../public/smtp.svg";
@@ -107,10 +107,11 @@ export const MessagingProvidersBox = ({
             </Box>
 
             <Text>{configuration.name}</Text>
-            <ChipText
+            <Box __maxWidth="fit-content">
-              content={configuration.active ? "Active" : "Inactive"}
+              <SemanticChip variant={configuration.active ? "success" : "error"}>
-              variant={configuration.active ? "success" : "error"}
+                {configuration.active ? "Active" : "Inactive"}
-            />
+              </SemanticChip>
+            </Box>
             <Box display="flex" justifyContent="flex-end">
               <Button
                 variant="tertiary"

pnpm-lock.yaml

@@ -478,9 +478,12 @@ 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.83
+        specifier: 0.8.0-pre.84
-        version: 0.8.0-pre.83(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
       '@saleor/react-hook-form-macaw':
         specifier: workspace:*
         version: link:../../packages/react-hook-form-macaw
@@ -7768,38 +7771,6 @@ packages:
     transitivePeerDependencies:
       - '@types/react'
 
-  /@saleor/macaw-ui@0.8.0-pre.83(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-IMwN8a39ZqjHoO7P3pAQ6kWxqX5U4EhuOgunpR8QU0v6Tm5DfIeUmIr/3jwm5jQbYzZrNNgaboBJy7oCbJ/cUQ==}
-    engines: {node: '>=16 <19', pnpm: '>=8'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@dessert-box/react': 0.4.0(react@18.2.0)
-      '@floating-ui/react-dom-interactions': 0.5.0(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-accordion': 1.1.1(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-checkbox': 1.0.3(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.3(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dropdown-menu': 2.0.4(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popover': 1.0.5(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-radio-group': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-select': 1.2.1(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toggle': 1.0.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-tooltip': 1.0.5(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
-      '@vanilla-extract/css-utils': 0.1.3
-      clsx: 1.2.1
-      downshift: 6.1.12(react@18.2.0)
-      downshift7: /downshift@7.6.0(react@18.2.0)
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-inlinesvg: 3.0.1(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-    dev: false
-
   /@saleor/macaw-ui@0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-VkkMmr9wZhZHc/r0bP8PVbuDPc+tnhC4pKJMwW9fP4uhNcdTYkKUraPJUxXO6OYkxjyyQBzza3uY9d/7fw48gQ==}
     engines: {node: '>=16 <19', pnpm: '>=8'}