diff --git a/.changeset/curvy-pugs-retire.md b/.changeset/curvy-pugs-retire.md new file mode 100644 index 0000000..937aded --- /dev/null +++ b/.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. diff --git a/apps/taxes/next.config.js b/apps/taxes/next.config.js index dd29bb3..2fa335c 100644 --- a/apps/taxes/next.config.js +++ b/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( diff --git a/apps/taxes/package.json b/apps/taxes/package.json index 402213e..5b1d722 100644 --- a/apps/taxes/package.json +++ b/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", diff --git a/apps/taxes/turbo.json b/apps/taxes/turbo.json index 03a43c6..2d085d7 100644 --- a/apps/taxes/turbo.json +++ b/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" ] } } diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 8e7235a..3849222 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -1,2 +1,3 @@ export * from "./src/text-link"; export * from "./src/semantic-chip"; +export * from "./src/breadcrumbs"; diff --git a/packages/ui/package.json b/packages/ui/package.json index c2a24d6..82e1e87 100644 --- a/packages/ui/package.json +++ b/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 ." diff --git a/packages/ui/src/breadcrumbs.module.css b/packages/ui/src/breadcrumbs.module.css new file mode 100644 index 0000000..54a4262 --- /dev/null +++ b/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; +} diff --git a/packages/ui/src/breadcrumbs.tsx b/packages/ui/src/breadcrumbs.tsx new file mode 100644 index 0000000..a14e29b --- /dev/null +++ b/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 ( + + + {href && !isLast ? ( + + {children} + + ) : ( + children + )} + + + ); +}; + +export type BreadcrumbsProps = PropsWithBox<{}>; + +export const Breadcrumbs = ({ children, ...p }: BreadcrumbsProps) => { + return ( + + ); +}; + +Breadcrumbs.Item = BreadcrumbsItem; diff --git a/packages/ui/src/example.tsx b/packages/ui/src/example.tsx new file mode 100644 index 0000000..b4026c6 --- /dev/null +++ b/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 {children}; +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bef324d..170aca2 100644 --- a/pnpm-lock.yaml +++ b/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 - version: 0.37.3(next@13.3.0)(react-dom@18.2.0)(react@18.2.0) + specifier: ^0.38.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'}