feat: ✨ add basic breadcrumbs component (#470)

* feat: ✨ add empty packages/ui

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

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

* add app sdk

* feat: ✨ add basic breadcrumbs component

* refactor: ♻️ simplify breadcrumbs api

* Update packages/ui/src/breadcrumbs.tsx

Co-authored-by: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>

* refactor: 🔥 next-env.d.ts

* refactor: ♻️ address breadcrumbs feedback

* chore: 🔥 remove eslint disable

* build: 👷 add changeset

---------

Co-authored-by: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>

.changeset/curvy-pugs-retire.md

@@ -0,0 +1,5 @@
+---
+"@saleor/apps-ui": minor
+---
+
+Adds shared Breadcrumbs component. Each breadcrumbs item can be rendered with or without the href. The last item is automatically rendered without the href and with distinct styles.

apps/taxes/next.config.js

@@ -17,7 +17,7 @@ const config = {
   experimental: {
     esmExternals: true,
   },
-  transpilePackages: ["@saleor/apps-shared"],
+  transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui"],
 };
 
 module.exports = withSentryConfig(

apps/taxes/package.json

@@ -22,6 +22,7 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@saleor/app-sdk": "0.38.0",
     "@saleor/apps-shared": "workspace:*",
+    "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.45.0",
     "@tanstack/react-query": "^4.19.1",

apps/taxes/turbo.json

@@ -12,7 +12,10 @@
         "VERCEL_URL",
         "REST_APL_ENDPOINT",
         "REST_APL_TOKEN",
-        "ALLOWED_DOMAIN_PATTERN"
+        "ALLOWED_DOMAIN_PATTERN",
+        "SENTRY_AUTH_TOKEN",
+        "SENTRY_PROJECT",
+        "SENTRY_ORG"
       ]
     }
   }

packages/ui/index.ts

@@ -1,2 +1,3 @@
 export * from "./src/text-link";
 export * from "./src/semantic-chip";
+export * from "./src/breadcrumbs";

packages/ui/package.json

@@ -9,13 +9,13 @@
     "next": "^13.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@saleor/app-sdk": "0.37.3"
+    "@saleor/app-sdk": "^0.38.0"
   },
   "peerDependencies": {
     "next": "^13.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@saleor/app-sdk": "0.37.3"
+    "@saleor/app-sdk": "^0.38.0"
   },
   "scripts": {
     "lint:fix": "eslint --fix ."

packages/ui/src/breadcrumbs.module.css

@@ -0,0 +1,16 @@
+.link {
+  color: inherit;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+/* add / separator for .breadcrumbs children */
+
+.breadcrumbs > *:not(:last-child)::after {
+  content: "/";
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  font-size: inherit;
+}

packages/ui/src/breadcrumbs.tsx

@@ -0,0 +1,58 @@
+import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next";
+import Link from "next/link";
+import React from "react";
+import styles from "./breadcrumbs.module.css";
+
+export type BreadcrumbsItemProps = PropsWithBox<{
+  href?: string;
+  isLast?: boolean;
+}>;
+
+const BreadcrumbsItem = ({ children, href, isLast = false, ...p }: BreadcrumbsItemProps) => {
+  return (
+    <Box fontSize="titleMedium" as="li" {...p}>
+      <Text
+        __fontSize={"inherit"}
+        variant="title"
+        color={isLast ? "textNeutralDefault" : "textNeutralSubdued"}
+      >
+        {href && !isLast ? (
+          <Link className={styles.link} href={href}>
+            {children}
+          </Link>
+        ) : (
+          children
+        )}
+      </Text>
+    </Box>
+  );
+};
+
+export type BreadcrumbsProps = PropsWithBox<{}>;
+
+export const Breadcrumbs = ({ children, ...p }: BreadcrumbsProps) => {
+  return (
+    <nav aria-label="breadcrumb">
+      <Box
+        className={styles.breadcrumbs}
+        alignItems={"center"}
+        display={"flex"}
+        padding={0}
+        margin={0}
+        style={{ listStyle: "none" }}
+        as="ol"
+        {...p}
+      >
+        {React.Children.map(children, (child, index) => {
+          const isLast = index === React.Children.count(children) - 1;
+
+          return React.cloneElement(child as React.ReactElement<BreadcrumbsItemProps>, {
+            isLast,
+          });
+        })}
+      </Box>
+    </nav>
+  );
+};
+
+Breadcrumbs.Item = BreadcrumbsItem;

packages/ui/src/example.tsx

@@ -0,0 +1,8 @@
+import { Box } from "@saleor/macaw-ui/next";
+import { PropsWithChildren } from "react";
+
+type ExampleProps = PropsWithChildren<{}>;
+
+export const Example = ({ children }: ExampleProps) => {
+  return <Box>{children}</Box>;
+};

pnpm-lock.yaml

@@ -1514,6 +1514,9 @@ importers:
       '@saleor/apps-shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@saleor/apps-ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@saleor/macaw-ui':
         specifier: ^0.7.2
         version: 0.7.2(@material-ui/core@4.12.4)(@material-ui/icons@4.11.3)(@material-ui/lab@4.0.0-alpha.61)(@types/react@18.0.27)(react-dom@18.2.0)(react-helmet@6.1.0)(react@18.2.0)
@@ -1737,8 +1740,8 @@ importers:
   packages/ui:
     devDependencies:
       '@saleor/app-sdk':
-        specifier: 0.37.3
+        specifier: ^0.38.0
-        version: 0.37.3(next@13.3.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.38.0(next@13.3.0)(react-dom@18.2.0)(react@18.2.0)
       '@saleor/macaw-ui':
         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)
@@ -5556,6 +5559,28 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@saleor/app-sdk@0.38.0(next@13.3.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JS/E3YODFHc+1DI+PczbV8jB09nLwzdQcwNs681RlwvR3JUC892hdBYYRdBKG5lauAcr4IxKw1IbrsxJKngtWA==}
+    peerDependencies:
+      next: '>=12'
+      react: '>=17'
+      react-dom: '>=17'
+    dependencies:
+      '@changesets/cli': 2.26.0
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      graphql: 16.6.0
+      jose: 4.11.4
+      next: 13.3.0(@babel/core@7.21.4)(react-dom@18.2.0)(react@18.2.0)
+      raw-body: 2.5.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      retes: 0.33.0
+      uuid: 8.3.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@saleor/macaw-ui@0.7.2(@material-ui/core@4.12.4)(@material-ui/icons@4.11.3)(@material-ui/lab@4.0.0-alpha.61)(@types/react@18.0.14)(react-dom@18.2.0)(react-helmet@6.1.0)(react@18.2.0):
     resolution: {integrity: sha512-Fli7fhTWuHu7q2CzxwTUpB4x9HYaxHSAzCLZLA23VY1ieIWbCxbsXadMiMGWp/nuYitswMr6JXMm+1SDe9K8LQ==}
     engines: {node: '>=16 <19'}