diff --git a/.changeset/afraid-eagles-joke.md b/.changeset/afraid-eagles-joke.md new file mode 100644 index 0000000..eb6ac4f --- /dev/null +++ b/.changeset/afraid-eagles-joke.md @@ -0,0 +1,5 @@ +--- +"saleor-app-cms-v2": patch +--- + +Extracted UI components and use shared package diff --git a/.changeset/afraid-wolves-shave.md b/.changeset/afraid-wolves-shave.md new file mode 100644 index 0000000..9a75215 --- /dev/null +++ b/.changeset/afraid-wolves-shave.md @@ -0,0 +1,5 @@ +--- +"saleor-app-search": patch +--- + +Implemented shared getApBaseUrl diff --git a/.changeset/dull-lobsters-relate.md b/.changeset/dull-lobsters-relate.md new file mode 100644 index 0000000..b8d5930 --- /dev/null +++ b/.changeset/dull-lobsters-relate.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-shared": minor +--- + +Added GraphQL Provider component that build client side graphql context diff --git a/.changeset/dull-mayflies-arrive.md b/.changeset/dull-mayflies-arrive.md new file mode 100644 index 0000000..63b1892 --- /dev/null +++ b/.changeset/dull-mayflies-arrive.md @@ -0,0 +1,5 @@ +--- +"saleor-app-segment": patch +--- + +Implemented ButtonsBox and SkeletonLayout from shared package. This should not have visual effect other than better looking Skeleton animation diff --git a/.changeset/fast-bobcats-sip.md b/.changeset/fast-bobcats-sip.md new file mode 100644 index 0000000..83e3d4a --- /dev/null +++ b/.changeset/fast-bobcats-sip.md @@ -0,0 +1,6 @@ +--- +"saleor-app-segment": patch +"saleor-app-search": patch +--- + +Replaced GraphQL provider with shared package diff --git a/.changeset/flat-apples-divide.md b/.changeset/flat-apples-divide.md new file mode 100644 index 0000000..bc8f5b9 --- /dev/null +++ b/.changeset/flat-apples-divide.md @@ -0,0 +1,5 @@ +--- +"saleor-app-search": patch +--- + +Replaced AppSections implementation with the shared package diff --git a/.changeset/late-cherries-sparkle.md b/.changeset/late-cherries-sparkle.md new file mode 100644 index 0000000..6560de7 --- /dev/null +++ b/.changeset/late-cherries-sparkle.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-ui": minor +--- + +Added two new components: ButtonsBox, which is a simple grid wrapper for horizontal buttons and SkeletonSection which composes Macaw Skeletons and make them looking more like a layout diff --git a/.changeset/olive-ducks-grow.md b/.changeset/olive-ducks-grow.md new file mode 100644 index 0000000..509016b --- /dev/null +++ b/.changeset/olive-ducks-grow.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-shared": patch +--- + +Removed ThemeProvider that was legacy for the older Macaw/Material UI diff --git a/.changeset/polite-cobras-relax.md b/.changeset/polite-cobras-relax.md new file mode 100644 index 0000000..ce22030 --- /dev/null +++ b/.changeset/polite-cobras-relax.md @@ -0,0 +1,6 @@ +--- +"saleor-app-segment": patch +"saleor-app-search": patch +--- + +Implemented ThemeSynchronizer from shared package diff --git a/.changeset/sharp-ducks-peel.md b/.changeset/sharp-ducks-peel.md new file mode 100644 index 0000000..98ebd3e --- /dev/null +++ b/.changeset/sharp-ducks-peel.md @@ -0,0 +1,5 @@ +--- +"@saleor/trpc": major +--- + +Introduced shared tRPC package. It contains reusable utils that are shared among apps diff --git a/.changeset/silly-geese-shout.md b/.changeset/silly-geese-shout.md new file mode 100644 index 0000000..dc87d50 --- /dev/null +++ b/.changeset/silly-geese-shout.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-ui": minor +--- + +Added Layout.AppSection and Layout.AppSectionCard components to build standard app layouts diff --git a/.changeset/slow-bears-own.md b/.changeset/slow-bears-own.md new file mode 100644 index 0000000..6b7d070 --- /dev/null +++ b/.changeset/slow-bears-own.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-shared": minor +--- + +Added getAppBaseUrl function that infers apps own URL diff --git a/.changeset/small-vans-rhyme.md b/.changeset/small-vans-rhyme.md new file mode 100644 index 0000000..2333d04 --- /dev/null +++ b/.changeset/small-vans-rhyme.md @@ -0,0 +1,5 @@ +--- +"saleor-app-segment": patch +--- + +Extracted some tRPC utilities to shared package diff --git a/.changeset/tender-cycles-float.md b/.changeset/tender-cycles-float.md new file mode 100644 index 0000000..aaedcb6 --- /dev/null +++ b/.changeset/tender-cycles-float.md @@ -0,0 +1,5 @@ +--- +"@saleor/apps-shared": minor +--- + +Added ThemeSynchronizer component that automatically syncs AppBridge and Macaw theme diff --git a/.changeset/wet-moles-admire.md b/.changeset/wet-moles-admire.md new file mode 100644 index 0000000..88d2881 --- /dev/null +++ b/.changeset/wet-moles-admire.md @@ -0,0 +1,5 @@ +--- +"saleor-app-search": patch +--- + +Fixed broken configuration form when legacy metadata was fetched diff --git a/.github/dependabot.yaml b/.github/dependabot.yaml index 90cac3c..871ddcf 100644 --- a/.github/dependabot.yaml +++ b/.github/dependabot.yaml @@ -33,6 +33,13 @@ updates: - package-ecosystem: "npm" directory: "/packages/react-hook-form-macaw" open-pull-requests-limit: 1 + schedule: + interval: "weekly" + commit-message: + prefix: "[skip ci]" + - package-ecosystem: "npm" + directory: "/packages/trpc" + open-pull-requests-limit: 1 schedule: interval: "weekly" commit-message: diff --git a/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx b/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx index 2d796fc..4db918c 100644 --- a/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx +++ b/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx @@ -6,26 +6,20 @@ import { Select } from "@saleor/react-hook-form-macaw"; import { useRouter } from "next/router"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { ButtonsBox } from "../ui/buttons-box"; import { ProvidersResolver } from "../providers/providers-resolver"; -import { Skeleton } from "../ui/skeleton"; +import { ButtonsBox, Layout, SkeletonLayout } from "@saleor/apps-ui"; const FormSchema = z.object({ connectionId: z.string().min(7), }); const EmptyState = () => ( - - No connections configured - Create a channel connection above to enable bulk synchronization. - + + + Bulk products synchronization + Create a channel connection above to enable bulk synchronization. + + ); export const BulkSyncSection = () => { @@ -42,7 +36,7 @@ export const BulkSyncSection = () => { }); if (!connections || !providers) { - return ; + return ; } if (connections.length === 0) { @@ -50,7 +44,7 @@ export const BulkSyncSection = () => { } return ( - + Bulk products synchronization @@ -88,6 +82,6 @@ export const BulkSyncSection = () => { - + ); }; diff --git a/apps/cms-v2/src/modules/bulk-sync/bulk-sync-view.tsx b/apps/cms-v2/src/modules/bulk-sync/bulk-sync-view.tsx index 9362690..a207b26 100644 --- a/apps/cms-v2/src/modules/bulk-sync/bulk-sync-view.tsx +++ b/apps/cms-v2/src/modules/bulk-sync/bulk-sync-view.tsx @@ -1,10 +1,8 @@ -import { Breadcrumbs } from "@saleor/apps-ui"; +import { Breadcrumbs, ButtonsBox, Layout } from "@saleor/apps-ui"; import { ArrowRightIcon, Box, Button, Text } from "@saleor/macaw-ui/next"; import { useEffect, useRef, useState } from "react"; import { ChannelProviderConnectionConfig, ProvidersConfig } from "../configuration"; import { AppHeader } from "../ui/app-header"; -import { AppSection } from "../ui/app-section"; -import { ButtonsBox } from "../ui/buttons-box"; import { useBulkSyncProductsState } from "./use-bulk-sync-products-state"; import { useFetchAllProducts } from "./use-fetch-all-products"; @@ -14,16 +12,19 @@ import { useDashboardNotification } from "@saleor/apps-shared"; const FetchProductsStep = (props: { onButtonClick(): void }) => { return ( - + + + + } + > Saleor products fetch Click the button to start fetching products from Saleor API After products are fetched, you will be able to upload them to the CMS - - - - + ); }; @@ -66,7 +67,7 @@ export const BulkSyncView = ({ const { products, finished: saleorProductsFetchFinished } = useFetchAllProducts( state === "fetching", - connection.channelSlug + connection.channelSlug, ); const { productsStatusList, setInitialProducts, setItemStatus, finished } = @@ -121,9 +122,14 @@ export const BulkSyncView = ({ ]} /> - { + heading="1. Fetch products" + sideContent={ + First pre-fetch all Product Variants from Saleor. Do not close the app. + } + > + {(() => { switch (state) { case "initial": { return ( @@ -149,33 +155,29 @@ export const BulkSyncView = ({ } } })()} - heading="1. Fetch products" - sideContent={ - First pre-fetch all Product Variants from Saleor. Do not close the app. - } - /> + {(state === "fetched" || state === "uploading") && productsStatusList && ( - Send listed variants to the CMS} - mainContent={ - - - Upload products - - {state === "fetched" && ( - - - Verify products below and click the button to start uploading. - - - - )} - - - } - /> + > + + + Upload products + + {state === "fetched" && ( + + + Verify products below and click the button to start uploading. + + + + )} + + + )} ); diff --git a/apps/cms-v2/src/modules/channel-provider-connection/add-connection-modal.tsx b/apps/cms-v2/src/modules/channel-provider-connection/add-connection-modal.tsx index 5d06717..6619980 100644 --- a/apps/cms-v2/src/modules/channel-provider-connection/add-connection-modal.tsx +++ b/apps/cms-v2/src/modules/channel-provider-connection/add-connection-modal.tsx @@ -1,5 +1,4 @@ import { Button, Text } from "@saleor/macaw-ui/next"; -import { ButtonsBox } from "../ui/buttons-box"; import { Modal } from "../ui/modal"; import { AddConnectionForm, @@ -7,7 +6,7 @@ import { AddConnectionFormSchema, } from "./add-connection-form"; import { trpcClient } from "../trpc/trpc-client"; -import { Skeleton } from "../ui/skeleton"; +import { ButtonsBox, SkeletonLayout } from "@saleor/apps-ui"; const defaultValues: AddConnectionFormSchema = { channelSlug: "", providerId: "" }; @@ -15,7 +14,7 @@ export const AddConnectionModal = (props: { onSuccess(): void; onClose(): void } const { data: providers } = trpcClient.providersConfigs.getAll.useQuery(); if (!providers) { - return ; + return ; } const { mutateAsync: addProviderMutate, isLoading } = diff --git a/apps/cms-v2/src/modules/channel-provider-connection/channels-provider-connection-list.tsx b/apps/cms-v2/src/modules/channel-provider-connection/channels-provider-connection-list.tsx index 65a8ada..3011953 100644 --- a/apps/cms-v2/src/modules/channel-provider-connection/channels-provider-connection-list.tsx +++ b/apps/cms-v2/src/modules/channel-provider-connection/channels-provider-connection-list.tsx @@ -1,35 +1,31 @@ import { useDashboardNotification } from "@saleor/apps-shared"; +import { ButtonsBox, Layout, SkeletonLayout } from "@saleor/apps-ui"; import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { useState } from "react"; import { trpcClient } from "../trpc/trpc-client"; -import { ButtonsBox } from "../ui/buttons-box"; -import { AddConnectionFormSchema } from "./add-connection-form"; import { AddConnectionModal } from "./add-connection-modal"; import { ChanelProviderConnectionsSectionHeader } from "./channel-provider-connections-section-header"; import { ConnectionsList } from "./connections-list"; -import { Skeleton } from "../ui/skeleton"; const NoConnections = (props: { onCreate(): void; enabled: boolean }) => ( - + No channels connected yet.{" "} {!props.enabled && "Ensure you have created a provider configuration that can be connected first."} - {props.enabled && ( - - - - )} ); export const ChannelProviderConnectionList = () => { const [dialogOpen, setDialogOpen] = useState(false); - const { data: connectionsData, refetch: refetchConnections } = - trpcClient.channelsProvidersConnection.fetchConnections.useQuery(); + const { + data: connectionsData, + refetch: refetchConnections, + isLoading, + } = trpcClient.channelsProvidersConnection.fetchConnections.useQuery(); const { mutate: removeConnection } = trpcClient.channelsProvidersConnection.removeConnection.useMutation({ @@ -45,19 +41,33 @@ export const ChannelProviderConnectionList = () => { const { data: providers } = trpcClient.providersConfigs.getAll.useQuery(); if (!providers) { - return ; + return ; } const handleDelete = (connectionId: string) => { removeConnection({ id: connectionId }); }; - if (!connectionsData) { - return Loading; + if (isLoading || !connectionsData) { + return ; } return ( - + 0 && ( + + + + ) + } + > {dialogOpen && ( { @@ -79,17 +89,6 @@ export const ChannelProviderConnectionList = () => { /> )} {connectionsData.length > 0 && } - {connectionsData.length > 0 && ( - - - - )} - + ); }; diff --git a/apps/cms-v2/src/modules/channel-provider-connection/connections-list.tsx b/apps/cms-v2/src/modules/channel-provider-connection/connections-list.tsx index 2dc76b0..7a6ca33 100644 --- a/apps/cms-v2/src/modules/channel-provider-connection/connections-list.tsx +++ b/apps/cms-v2/src/modules/channel-provider-connection/connections-list.tsx @@ -4,7 +4,7 @@ import React from "react"; import { trpcClient } from "../trpc/trpc-client"; import { ChanelProviderConnectionsSectionHeader } from "./channel-provider-connections-section-header"; import { ProvidersResolver } from "../providers/providers-resolver"; -import { Skeleton } from "../ui/skeleton"; +import { SkeletonLayout } from "@saleor/apps-ui"; export const ConnectionsList = (props: { onRemove(connectionId: string): void }) => { const { data } = trpcClient.channelsProvidersConnection.fetchConnections.useQuery(); @@ -12,7 +12,7 @@ export const ConnectionsList = (props: { onRemove(connectionId: string): void }) const { data: providers } = trpcClient.providersConfigs.getAll.useQuery(); if (!data || !providers) { - return ; + return ; } return ( diff --git a/apps/cms-v2/src/modules/providers-listing/providers-list.tsx b/apps/cms-v2/src/modules/providers-listing/providers-list.tsx index 0a0cf66..8a95078 100644 --- a/apps/cms-v2/src/modules/providers-listing/providers-list.tsx +++ b/apps/cms-v2/src/modules/providers-listing/providers-list.tsx @@ -5,8 +5,8 @@ import { ProvidersConfig } from "../configuration"; import { ProvidersResolver } from "../providers/providers-resolver"; import { trpcClient } from "../trpc/trpc-client"; -import { ButtonsBox } from "../ui/buttons-box"; -import { Skeleton } from "../ui/skeleton"; + +import { ButtonsBox, Layout, SkeletonLayout } from "@saleor/apps-ui"; const ProvidersTable = (props: { providers: ProvidersConfig.AnyFullShape[] }) => { const { push } = useRouter(); @@ -47,30 +47,45 @@ export const ProvidersList = () => { const { push } = useRouter(); if (!data) { - return ; + return ; } if (data.length === 0) { return ( - + + + + } + > No configurations yet + + ); + } + + return ( + - - ); - } - - return ( - + } + > {data.length && ( @@ -79,15 +94,6 @@ export const ProvidersList = () => { )} - - - - + ); }; diff --git a/apps/cms-v2/src/modules/providers/builder.io/builder-io-config-form.tsx b/apps/cms-v2/src/modules/providers/builder.io/builder-io-config-form.tsx index 1374e0f..ac416d9 100644 --- a/apps/cms-v2/src/modules/providers/builder.io/builder-io-config-form.tsx +++ b/apps/cms-v2/src/modules/providers/builder.io/builder-io-config-form.tsx @@ -7,9 +7,7 @@ import { useForm } from "react-hook-form"; import { BuilderIoProviderConfig, SaleorProviderFieldsMappingKeys } from "../../configuration"; import { printSaleorProductFields } from "../../configuration/print-saleor-product-fields"; import { trpcClient } from "../../trpc/trpc-client"; -import { ButtonsBox } from "../../ui/buttons-box"; -import { TextLink } from "@saleor/apps-ui"; -import { Skeleton } from "@/modules/ui/skeleton"; +import { ButtonsBox, SkeletonLayout, TextLink } from "@saleor/apps-ui"; type FormShape = Omit; const FormSchema = BuilderIoProviderConfig.Schema.Input.omit({ type: true }); @@ -207,7 +205,7 @@ const EditFormVariant = (props: { configId: string }) => { }); if (!data) { - return ; + return ; } if (data.type !== "builder.io") { diff --git a/apps/cms-v2/src/modules/providers/contentful/contentful-config-form.tsx b/apps/cms-v2/src/modules/providers/contentful/contentful-config-form.tsx index 1fe8551..4755191 100644 --- a/apps/cms-v2/src/modules/providers/contentful/contentful-config-form.tsx +++ b/apps/cms-v2/src/modules/providers/contentful/contentful-config-form.tsx @@ -9,8 +9,7 @@ import { useDashboardNotification } from "@saleor/apps-shared"; import { ContentfulProviderConfig } from "../../configuration/schemas/contentful-provider.schema"; import { printSaleorProductFields } from "../../configuration/print-saleor-product-fields"; import { zodResolver } from "@hookform/resolvers/zod"; -import { ButtonsBox } from "../../ui/buttons-box"; -import { TextLink } from "@saleor/apps-ui"; +import { ButtonsBox, TextLink } from "@saleor/apps-ui"; import { SaleorProviderFieldsMappingKeys } from "@/modules/configuration"; type FormSchema = Omit; diff --git a/apps/cms-v2/src/modules/providers/datocms/datocms-config-form.tsx b/apps/cms-v2/src/modules/providers/datocms/datocms-config-form.tsx index 81441f7..5d75d20 100644 --- a/apps/cms-v2/src/modules/providers/datocms/datocms-config-form.tsx +++ b/apps/cms-v2/src/modules/providers/datocms/datocms-config-form.tsx @@ -8,8 +8,8 @@ import React, { useEffect, useMemo } from "react"; import { useForm } from "react-hook-form"; import { printSaleorProductFields } from "../../configuration/print-saleor-product-fields"; import { trpcClient } from "../../trpc/trpc-client"; -import { ButtonsBox } from "../../ui/buttons-box"; import { DatocmsProviderConfig } from "@/modules/configuration/schemas/datocms-provider.schema"; +import { ButtonsBox } from "@saleor/apps-ui"; type FormShape = Omit; diff --git a/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx b/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx index 59b5339..90cef9a 100644 --- a/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx +++ b/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx @@ -9,8 +9,7 @@ import React from "react"; import { useForm } from "react-hook-form"; import { printSaleorProductFields } from "../../configuration/print-saleor-product-fields"; import { trpcClient } from "../../trpc/trpc-client"; -import { ButtonsBox } from "../../ui/buttons-box"; -import { TextLink } from "@saleor/apps-ui"; +import { ButtonsBox, TextLink } from "@saleor/apps-ui"; type FormShape = Omit; diff --git a/apps/cms-v2/src/modules/providers/strapi/strapi-config-form.tsx b/apps/cms-v2/src/modules/providers/strapi/strapi-config-form.tsx index 52fc192..016dbdc 100644 --- a/apps/cms-v2/src/modules/providers/strapi/strapi-config-form.tsx +++ b/apps/cms-v2/src/modules/providers/strapi/strapi-config-form.tsx @@ -7,8 +7,7 @@ import { useForm } from "react-hook-form"; import { SaleorProviderFieldsMappingKeys, StrapiProviderConfig } from "../../configuration"; import { printSaleorProductFields } from "../../configuration/print-saleor-product-fields"; import { trpcClient } from "../../trpc/trpc-client"; -import { ButtonsBox } from "../../ui/buttons-box"; -import { Skeleton } from "@/modules/ui/skeleton"; +import { ButtonsBox, SkeletonLayout } from "@saleor/apps-ui"; type FormShape = Omit; @@ -189,7 +188,7 @@ const EditFormVariant = (props: { configId: string }) => { }); if (!data) { - return ; + return ; } if (data.type !== "strapi") { diff --git a/apps/cms-v2/src/modules/trpc/trpc-context.ts b/apps/cms-v2/src/modules/trpc/trpc-context.ts index c2861ed..82354d7 100644 --- a/apps/cms-v2/src/modules/trpc/trpc-context.ts +++ b/apps/cms-v2/src/modules/trpc/trpc-context.ts @@ -1,10 +1,10 @@ import * as trpcNext from "@trpc/server/adapters/next"; import { SALEOR_AUTHORIZATION_BEARER_HEADER, SALEOR_API_URL_HEADER } from "@saleor/app-sdk/const"; import { inferAsyncReturnType } from "@trpc/server"; -import { getBaseUrl } from "@/modules/shared/get-base-url"; +import { getAppBaseUrl } from "@saleor/apps-shared"; export const createTrpcContext = async ({ res, req }: trpcNext.CreateNextContextOptions) => { - const baseUrl = getBaseUrl(req.headers); + const baseUrl = getAppBaseUrl(req.headers); return { token: req.headers[SALEOR_AUTHORIZATION_BEARER_HEADER] as string | undefined, diff --git a/apps/cms-v2/src/modules/ui/app-section.tsx b/apps/cms-v2/src/modules/ui/app-section.tsx deleted file mode 100644 index 1b0e830..0000000 --- a/apps/cms-v2/src/modules/ui/app-section.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next"; -import { ReactNode } from "react"; - -// todo move to shared -export const AppSection = ({ - heading, - sideContent, - mainContent, - includePadding = true, - ...props -}: PropsWithBox<{ - heading: string; - sideContent?: ReactNode; - mainContent: ReactNode; - includePadding?: boolean; -}>) => { - return ( - - - - {heading} - - {sideContent} - - - {mainContent} - - - ); -}; diff --git a/apps/cms-v2/src/modules/ui/skeleton.tsx b/apps/cms-v2/src/modules/ui/skeleton.tsx deleted file mode 100644 index 0c061e8..0000000 --- a/apps/cms-v2/src/modules/ui/skeleton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Box, BoxProps } from "@saleor/macaw-ui/next"; - -// TODO: Make it more generic, move to shared or contribute to macaw -const Section = (props: BoxProps) => { - return ( - - - - - - ); -}; - -export const Skeleton = { Section }; diff --git a/apps/cms-v2/src/pages/add-provider.tsx b/apps/cms-v2/src/pages/add-provider.tsx index 2a94b08..62fc997 100644 --- a/apps/cms-v2/src/pages/add-provider.tsx +++ b/apps/cms-v2/src/pages/add-provider.tsx @@ -1,7 +1,6 @@ import { CMSProviders } from "@/modules/providers/providers-registry"; import { AppHeader } from "@/modules/ui/app-header"; -import { AppSection } from "@/modules/ui/app-section"; -import { Breadcrumbs } from "@saleor/apps-ui"; +import { Breadcrumbs, Layout } from "@saleor/apps-ui"; import { Box, Button, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; import { useRouter } from "next/router"; @@ -16,14 +15,15 @@ const AddProviderPage: NextPage = () => { text="Connect CMS platforms to the App." breadcrumbs={[Add Provider]} /> - App allows to connect one or more CMS platforms. You can add more later. } - mainContent={ + > + { ))} - } - /> + + ); }; diff --git a/apps/cms-v2/src/pages/add-provider/[type].tsx b/apps/cms-v2/src/pages/add-provider/[type].tsx index 89e3cfc..649ec16 100644 --- a/apps/cms-v2/src/pages/add-provider/[type].tsx +++ b/apps/cms-v2/src/pages/add-provider/[type].tsx @@ -2,8 +2,7 @@ import { CMSType } from "@/modules/providers/providers-registry"; import { ProvidersResolver } from "@/modules/providers/providers-resolver"; import { AppHeader } from "@/modules/ui/app-header"; -import { AppSection } from "@/modules/ui/app-section"; -import { Breadcrumbs } from "@saleor/apps-ui"; +import { Breadcrumbs, Layout } from "@saleor/apps-ui"; import { Box, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; import { useRouter } from "next/router"; @@ -32,7 +31,7 @@ const AddProviderPage: NextPage = () => { ]} /> - @@ -40,8 +39,11 @@ const AddProviderPage: NextPage = () => { {provider.formSideInfo && {provider.formSideInfo}} } - mainContent={} - /> + > + + + + ); }; diff --git a/apps/cms-v2/src/pages/bulk-sync/[connection-id].tsx b/apps/cms-v2/src/pages/bulk-sync/[connection-id].tsx index 1bec1de..7eb23b4 100644 --- a/apps/cms-v2/src/pages/bulk-sync/[connection-id].tsx +++ b/apps/cms-v2/src/pages/bulk-sync/[connection-id].tsx @@ -1,10 +1,9 @@ import { BulkSyncView } from "@/modules/bulk-sync/bulk-sync-view"; import { trpcClient } from "@/modules/trpc/trpc-client"; +import { SkeletonLayout } from "@saleor/apps-ui"; import { NextPage } from "next"; import { useRouter } from "next/router"; import { z } from "zod"; -import { Text } from "@saleor/macaw-ui/next"; -import { Skeleton } from "@/modules/ui/skeleton"; const BulkSyncPage: NextPage = () => { const { query } = useRouter(); @@ -23,7 +22,7 @@ const BulkSyncPage: NextPage = () => { }, { enabled: !!parsedID, - } + }, ); const { @@ -36,7 +35,7 @@ const BulkSyncPage: NextPage = () => { }, { enabled: !!connection, - } + }, ); if ((providerFetched && !provider) || (connectionFetched && !connection)) { @@ -45,7 +44,7 @@ const BulkSyncPage: NextPage = () => { } if (connectionLoading || providerLoading) { - return ; + return ; } if (!(provider && connection)) { diff --git a/apps/cms-v2/src/pages/configuration.tsx b/apps/cms-v2/src/pages/configuration.tsx index bd9e7b7..3ac777a 100644 --- a/apps/cms-v2/src/pages/configuration.tsx +++ b/apps/cms-v2/src/pages/configuration.tsx @@ -2,7 +2,7 @@ import { BulkSyncSection } from "@/modules/bulk-sync/bulk-sync-section"; import { ChannelProviderConnectionList } from "@/modules/channel-provider-connection/channels-provider-connection-list"; import { ProvidersList } from "@/modules/providers-listing/providers-list"; import { AppHeader } from "@/modules/ui/app-header"; -import { AppSection } from "@/modules/ui/app-section"; +import { Layout } from "@saleor/apps-ui"; import { Box, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; @@ -10,7 +10,7 @@ const ConfigurationPage: NextPage = () => { return ( - { Configure one or more CMS providers to synchronize Saleor products. } - mainContent={} - /> - + + + { } - mainContent={} - /> - + + + @@ -44,8 +46,9 @@ const ConfigurationPage: NextPage = () => { Its recommended to run this flow initially, once app is configured. } - mainContent={} - /> + > + + ); }; diff --git a/apps/cms-v2/src/pages/edit-provider/[configId].tsx b/apps/cms-v2/src/pages/edit-provider/[configId].tsx index 9562223..fa4cc98 100644 --- a/apps/cms-v2/src/pages/edit-provider/[configId].tsx +++ b/apps/cms-v2/src/pages/edit-provider/[configId].tsx @@ -2,9 +2,7 @@ import { ProvidersResolver } from "@/modules/providers/providers-resolver"; import { trpcClient } from "@/modules/trpc/trpc-client"; import { AppHeader } from "@/modules/ui/app-header"; -import { AppSection } from "@/modules/ui/app-section"; -import { Skeleton } from "@/modules/ui/skeleton"; -import { Breadcrumbs } from "@saleor/apps-ui"; +import { Breadcrumbs, Layout, SkeletonLayout } from "@saleor/apps-ui"; import { Box, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; import { useRouter } from "next/router"; @@ -20,7 +18,7 @@ const EditProviderPage: NextPage = () => { }, { enabled: !!configId, - } + }, ); const provider = useMemo(() => { @@ -28,7 +26,7 @@ const EditProviderPage: NextPage = () => { }, [data]); if (isLoading) { - return ; + return ; } if (isFetched && !data) { @@ -38,7 +36,7 @@ const EditProviderPage: NextPage = () => { } if (!provider) { - return ; + return ; } const EditForm = ProvidersResolver.getEditProviderFormComponent(provider.type); @@ -53,13 +51,16 @@ const EditProviderPage: NextPage = () => { {data?.configName}, ]} /> - } sideContent={ {provider.formSideInfo && {provider.formSideInfo}} } - /> + > + + + + ); }; diff --git a/apps/search/src/components/AlgoliaConfigurationForm.tsx b/apps/search/src/components/AlgoliaConfigurationForm.tsx index 65765cb..083eb38 100644 --- a/apps/search/src/components/AlgoliaConfigurationForm.tsx +++ b/apps/search/src/components/AlgoliaConfigurationForm.tsx @@ -13,6 +13,7 @@ import { } from "../modules/configuration/configuration"; import { AlgoliaSearchProvider } from "../lib/algolia/algoliaSearchProvider"; import { trpcClient } from "../modules/trpc/trpc-client"; +import { Layout } from "@saleor/apps-ui"; export const AlgoliaConfigurationForm = () => { const { notifyError, notifySuccess } = useDashboardNotification(); @@ -76,56 +77,53 @@ export const AlgoliaConfigurationForm = () => { const isFormDisabled = isMutationLoading || isQueryLoading; return ( - -
- - - - - - - - - - - {credentialsValidationError && ( - - - Could not connect to Algolia. Please verify your credentials - - - )} - - - - - + - -
+ } + > + + + + + + + + + {credentialsValidationError && ( + + + Could not connect to Algolia. Please verify your credentials + + + )} + + ); }; diff --git a/apps/search/src/components/AlgoliaFieldsSelectionForm.tsx b/apps/search/src/components/AlgoliaFieldsSelectionForm.tsx index 0f4d84f..f598691 100644 --- a/apps/search/src/components/AlgoliaFieldsSelectionForm.tsx +++ b/apps/search/src/components/AlgoliaFieldsSelectionForm.tsx @@ -8,6 +8,7 @@ import { import { Controller, useForm } from "react-hook-form"; import { useEffect } from "react"; import { useDashboardNotification } from "@saleor/apps-shared"; +import { ButtonsBox, Layout } from "@saleor/apps-ui"; export const AlgoliaFieldsSelectionForm = () => { const { notifySuccess } = useDashboardNotification(); @@ -35,46 +36,46 @@ export const AlgoliaFieldsSelectionForm = () => { } return ( - -
{ - const selectedValues = Object.entries(values) - .filter(([key, selected]) => selected) - .map(([key]) => key); + { + const selectedValues = Object.entries(values) + .filter(([key, selected]) => selected) + .map(([key]) => key); - mutate({ - enabledAlgoliaFields: selectedValues, - }); - })} - > - - {AlgoliaRootFieldsKeys.map((field) => ( - - { - return ( - { - onChange(v); - }} - checked={value} - name={field} - > - {AlgoliaRootFieldsLabelsMap[field]} - - ); - }} - /> - - ))} - - - + mutate({ + enabledAlgoliaFields: selectedValues, + }); + })} + footer={ + - - -
+ + } + > + + {AlgoliaRootFieldsKeys.map((field) => ( + + { + return ( + { + onChange(v); + }} + checked={value} + name={field} + > + {AlgoliaRootFieldsLabelsMap[field]} + + ); + }} + /> + + ))} + + ); }; diff --git a/apps/search/src/components/AppSection.tsx b/apps/search/src/components/AppSection.tsx deleted file mode 100644 index c9a61e9..0000000 --- a/apps/search/src/components/AppSection.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next"; -import { ReactNode } from "react"; - -// todo move to shared -export const AppSection = ({ - heading, - sideContent, - mainContent, - includePadding = false, - ...props -}: PropsWithBox<{ - heading: string; - sideContent?: ReactNode; - mainContent: ReactNode; - includePadding?: boolean; -}>) => { - return ( - - - - {heading} - - {sideContent} - - - {mainContent} - - - ); -}; diff --git a/apps/search/src/components/ImportProductsToAlgolia.tsx b/apps/search/src/components/ImportProductsToAlgolia.tsx index 549bf50..90e6e1f 100644 --- a/apps/search/src/components/ImportProductsToAlgolia.tsx +++ b/apps/search/src/components/ImportProductsToAlgolia.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { AlgoliaSearchProvider } from "../lib/algolia/algoliaSearchProvider"; import { Products, useQueryAllProducts } from "./useQueryAllProducts"; import { trpcClient } from "../modules/trpc/trpc-client"; +import { Layout } from "@saleor/apps-ui"; const BATCH_SIZE = 100; @@ -63,7 +64,19 @@ export const ImportProductsToAlgolia = () => { }, [searchProvider, currentProductIndex, isAlgoliaImporting, products]); return ( - + + + + ) + } + __cursor={started ? "wait" : "auto"} + > {searchProvider && algoliaConfigured ? ( @@ -75,11 +88,6 @@ export const ImportProductsToAlgolia = () => { Do not close the app - its running client-side - - - ) : ( @@ -112,7 +120,7 @@ export const ImportProductsToAlgolia = () => { /> )} - + ); }; diff --git a/apps/search/src/components/IndicesSettings.tsx b/apps/search/src/components/IndicesSettings.tsx index 92f4492..660e0df 100644 --- a/apps/search/src/components/IndicesSettings.tsx +++ b/apps/search/src/components/IndicesSettings.tsx @@ -1,6 +1,6 @@ import { Box, Button, Text } from "@saleor/macaw-ui/next"; import React from "react"; -import { TextLink } from "@saleor/apps-ui"; +import { Layout, TextLink } from "@saleor/apps-ui"; import { useIndicesSetupMutation } from "../lib/useIndicesSetup"; import { trpcClient } from "../modules/trpc/trpc-client"; @@ -12,7 +12,19 @@ export const IndicesSettings = () => { algoliaConfiguration?.appConfig?.appId && algoliaConfiguration?.appConfig?.secretKey; return ( - + + + + } + > Performing this operation will update indices to use recommended settings: @@ -60,16 +72,7 @@ export const IndicesSettings = () => { Please note - if indices are already configured, this operation will overwrite settings mentioned above. - - - - + ); }; diff --git a/apps/search/src/lib/debug.ts b/apps/search/src/lib/debug.ts index 573c90d..41b2a76 100644 --- a/apps/search/src/lib/debug.ts +++ b/apps/search/src/lib/debug.ts @@ -2,5 +2,6 @@ import debugPkg from "debug"; /** * todo rewrite to pino logger + * @deprecated */ export const createDebug = (namespace: string) => debugPkg.debug(`app-search:${namespace}`); diff --git a/apps/search/src/lib/getBaseUrl.ts b/apps/search/src/lib/getBaseUrl.ts deleted file mode 100644 index cd52dcf..0000000 --- a/apps/search/src/lib/getBaseUrl.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Extracts the app's url from headers from the response. - */ -export const getBaseUrl = (headers: { [name: string]: string | string[] | undefined }): string => { - const { host, "x-forwarded-proto": xForwardedProto = "http" } = headers; - - const xForwardedProtos = Array.isArray(xForwardedProto) - ? xForwardedProto.join(",") - : xForwardedProto; - const protocols = xForwardedProtos.split(","); - // prefer https over other protocols - const protocol = protocols.find((el) => el === "https") || protocols[0]; - - return `${protocol}://${host}`; -}; diff --git a/apps/search/src/lib/theme-synchronizer.tsx b/apps/search/src/lib/theme-synchronizer.tsx deleted file mode 100644 index 3386f49..0000000 --- a/apps/search/src/lib/theme-synchronizer.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useAppBridge } from "@saleor/app-sdk/app-bridge"; -import { useTheme } from "@saleor/macaw-ui/next"; -import { useEffect } from "react"; - -// todo move to shared -export function ThemeSynchronizer() { - const { appBridgeState } = useAppBridge(); - const { setTheme } = useTheme(); - - useEffect(() => { - if (!setTheme || !appBridgeState?.theme) { - return; - } - - if (appBridgeState.theme === "light") { - setTheme("defaultLight"); - } - - if (appBridgeState.theme === "dark") { - setTheme("defaultDark"); - } - }, [appBridgeState?.theme, setTheme]); - - return null; -} diff --git a/apps/search/src/modules/configuration/configuration.router.ts b/apps/search/src/modules/configuration/configuration.router.ts index e7f6bae..b70d6c3 100644 --- a/apps/search/src/modules/configuration/configuration.router.ts +++ b/apps/search/src/modules/configuration/configuration.router.ts @@ -34,7 +34,9 @@ export const configurationRouter = router({ */ const data = await fetchLegacyConfiguration(settingsManager, domain); - config.setAlgoliaSettings(data); + if (data) { + config.setAlgoliaSettings(data); + } return config.getConfig(); } diff --git a/apps/search/src/modules/configuration/legacy-configuration.ts b/apps/search/src/modules/configuration/legacy-configuration.ts index d6f360b..cf4cff8 100644 --- a/apps/search/src/modules/configuration/legacy-configuration.ts +++ b/apps/search/src/modules/configuration/legacy-configuration.ts @@ -7,12 +7,18 @@ import { AppConfigurationFields } from "./configuration"; export const fetchLegacyConfiguration = async ( settingsManager: SettingsManager, domain: string, -) => { - const data: AppConfigurationFields = { - secretKey: (await settingsManager.get("secretKey", domain)) || "", - appId: (await settingsManager.get("appId", domain)) || "", - indexNamePrefix: (await settingsManager.get("indexNamePrefix", domain)) || "", - }; +): Promise => { + const secretKey = await settingsManager.get("secretKey", domain); + const appId = await settingsManager.get("appId", domain); + const indexNamePrefix = await settingsManager.get("indexNamePrefix", domain); - return data; + if (secretKey && appId) { + return { + appId, + secretKey, + indexNamePrefix, + }; + } + + return null; }; diff --git a/apps/search/src/pages/_app.tsx b/apps/search/src/pages/_app.tsx index 04b41d7..4ccc88b 100644 --- a/apps/search/src/pages/_app.tsx +++ b/apps/search/src/pages/_app.tsx @@ -3,12 +3,10 @@ import "@saleor/macaw-ui/next/style"; import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge"; import React from "react"; import { AppProps } from "next/app"; -import { GraphQLProvider } from "../providers/GraphQLProvider"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next"; -import { ThemeSynchronizer } from "../lib/theme-synchronizer"; import { Box, ThemeProvider } from "@saleor/macaw-ui/next"; -import { NoSSRWrapper } from "@saleor/apps-shared"; +import { GraphQLProvider, NoSSRWrapper, ThemeSynchronizer } from "@saleor/apps-shared"; import { trpcClient } from "../modules/trpc/trpc-client"; /** diff --git a/apps/search/src/pages/api/recreate-webhooks.ts b/apps/search/src/pages/api/recreate-webhooks.ts index 18ed41c..0617196 100644 --- a/apps/search/src/pages/api/recreate-webhooks.ts +++ b/apps/search/src/pages/api/recreate-webhooks.ts @@ -7,9 +7,8 @@ import { } from "../../domain/WebhookActivityToggler.service"; import { createLogger } from "../../lib/logger"; import { SettingsManager } from "@saleor/app-sdk/settings-manager"; -import { createGraphQLClient } from "@saleor/apps-shared"; +import { createGraphQLClient, getAppBaseUrl } from "@saleor/apps-shared"; import { Client } from "urql"; -import { getBaseUrl } from "../../lib/getBaseUrl"; import { isConfigured } from "../../lib/algolia/is-configured"; const logger = createLogger({ @@ -53,7 +52,7 @@ export const recreateWebhooksHandlerFactory = logger.debug(settings, "fetched settings"); - const baseUrl = getBaseUrl(req.headers); + const baseUrl = getAppBaseUrl(req.headers); const enableWebhooks = isConfigured({ configuration: { appId: appId, diff --git a/apps/search/src/providers/GraphQLProvider.tsx b/apps/search/src/providers/GraphQLProvider.tsx deleted file mode 100644 index 22b41d4..0000000 --- a/apps/search/src/providers/GraphQLProvider.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useAppBridge } from "@saleor/app-sdk/app-bridge"; -import { PropsWithChildren } from "react"; -import { Provider } from "urql"; - -import { createGraphQLClient } from "@saleor/apps-shared"; - -export function GraphQLProvider(props: PropsWithChildren<{}>) { - const { appBridgeState } = useAppBridge(); - const saleorApiUrl = appBridgeState?.saleorApiUrl!; - - if (!appBridgeState?.saleorApiUrl) { - return
; - } - - const client = createGraphQLClient({ - saleorApiUrl, - token: appBridgeState.token, - }); - - return ; -} diff --git a/apps/search/src/views/configuration/configuration.view.tsx b/apps/search/src/views/configuration/configuration.view.tsx index c274a04..2a0ca80 100644 --- a/apps/search/src/views/configuration/configuration.view.tsx +++ b/apps/search/src/views/configuration/configuration.view.tsx @@ -1,5 +1,5 @@ import { Box, Text } from "@saleor/macaw-ui/next"; -import { AppSection } from "../../components/AppSection"; +import { Layout } from "@saleor/apps-ui"; import { AlgoliaConfigurationForm } from "../../components/AlgoliaConfigurationForm"; import { ImportProductsToAlgolia } from "../../components/ImportProductsToAlgolia"; import { WebhooksStatus } from "../../components/WebhooksStatus"; @@ -20,17 +20,20 @@ export const ConfigurationView = () => { - } - mainContent={} - /> + > + + + + - } sideContent={ @@ -44,11 +47,14 @@ export const ConfigurationView = () => { } - /> - + + + + } + heading="Algolia fields filtering" sideContent={ @@ -60,30 +66,35 @@ export const ConfigurationView = () => { } - /> - + + + + } sideContent={ Perform initial index of all products in your Saleor database } - /> + > + + - } sideContent={ Sets up indices with recommended settings. } - /> + > + + ); }; diff --git a/apps/segment/next.config.js b/apps/segment/next.config.js index 5690d0c..5d20c5b 100644 --- a/apps/segment/next.config.js +++ b/apps/segment/next.config.js @@ -17,7 +17,8 @@ const nextConfig = () => { return { reactStrictMode: true, - transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui", "@saleor/react-hook-form-macaw"], + // TODO Infer names dynamically from disk + transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui", "@saleor/react-hook-form-macaw", "@saleor/trpc"], }; }; diff --git a/apps/segment/package.json b/apps/segment/package.json index eade2cb..f5b5e78 100644 --- a/apps/segment/package.json +++ b/apps/segment/package.json @@ -18,6 +18,7 @@ "@saleor/apps-ui": "workspace:*", "@saleor/macaw-ui": "0.8.0-pre.127", "@saleor/react-hook-form-macaw": "workspace:*", + "@saleor/trpc": "workspace:*", "@segment/analytics-node": "^1.1.0", "@sentry/nextjs": "7.55.2", "@tanstack/react-query": "^4.29.19", diff --git a/apps/segment/src/modules/configuration/segment-config-form/segment-config-form.tsx b/apps/segment/src/modules/configuration/segment-config-form/segment-config-form.tsx index 0bfc683..7e51eac 100644 --- a/apps/segment/src/modules/configuration/segment-config-form/segment-config-form.tsx +++ b/apps/segment/src/modules/configuration/segment-config-form/segment-config-form.tsx @@ -4,11 +4,9 @@ import { RootConfig } from "../schemas/root-config.schema"; import { z } from "zod"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; -import { TextLink } from "@saleor/apps-ui"; +import { ButtonsBox, Layout, SkeletonLayout, TextLink } from "@saleor/apps-ui"; import { Text } from "@saleor/macaw-ui/next"; -import { ButtonsBox } from "@/modules/ui/buttons-box"; import { trpcClient } from "@/modules/trpc/trpc-client"; -import { Skeleton } from "@/modules/ui/skeleton"; import { useDashboardNotification } from "@saleor/apps-shared"; const Schema = RootConfig.Schema.unwrap(); @@ -22,7 +20,15 @@ const SegmentConfigFormBase = (props: { values: Shape; onSubmit(values: Shape): }); return ( - + + + + } + as="form" + onSubmit={handleSubmit(props.onSubmit)} + > } /> - - - - + ); }; @@ -63,7 +66,7 @@ export const SegmentConfigForm = () => { }); if (isLoading) { - return ; + return ; } return ( diff --git a/apps/segment/src/modules/trpc/trpc-client.ts b/apps/segment/src/modules/trpc/trpc-client.ts index f4bc989..22fff73 100644 --- a/apps/segment/src/modules/trpc/trpc-client.ts +++ b/apps/segment/src/modules/trpc/trpc-client.ts @@ -1,42 +1,13 @@ -import { httpBatchLink } from "@trpc/client"; import { createTRPCNext } from "@trpc/next"; -import { SALEOR_API_URL_HEADER, SALEOR_AUTHORIZATION_BEARER_HEADER } from "@saleor/app-sdk/const"; +import { createHttpBatchLink } from "@saleor/trpc"; import { appBridgeInstance } from "../../pages/_app"; import { AppRouter } from "./trpc-app-router"; -function getBaseUrl() { - if (typeof window !== "undefined") return ""; - if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; - - return `http://localhost:${process.env.PORT ?? 3000}`; -} - export const trpcClient = createTRPCNext({ - config({ ctx }) { + config() { return { - links: [ - httpBatchLink({ - url: `${getBaseUrl()}/api/trpc`, - headers() { - const { token, saleorApiUrl } = appBridgeInstance?.getState() || {}; - - if (!token || !saleorApiUrl) { - console.error( - "Can't initialize tRPC client before establishing the App Bridge connection", - ); - throw new Error("Token and Saleor API URL unknown"); - } - return { - /** - * Attach headers from app to client requests, so tRPC can add them to context - */ - [SALEOR_AUTHORIZATION_BEARER_HEADER]: appBridgeInstance?.getState().token, - [SALEOR_API_URL_HEADER]: appBridgeInstance?.getState().saleorApiUrl, - }; - }, - }), - ], + links: [createHttpBatchLink(appBridgeInstance)], queryClientConfig: { defaultOptions: { queries: { refetchOnWindowFocus: false } } }, }; }, diff --git a/apps/segment/src/modules/trpc/trpc-server.ts b/apps/segment/src/modules/trpc/trpc-server.ts index fc5be26..9109e3b 100644 --- a/apps/segment/src/modules/trpc/trpc-server.ts +++ b/apps/segment/src/modules/trpc/trpc-server.ts @@ -1,5 +1,5 @@ import { initTRPC } from "@trpc/server"; -import { TrpcContext } from "./trpc-context"; +import { TrpcContext } from "@saleor/trpc"; import { Permission } from "@saleor/app-sdk/types"; import { ZodError } from "zod"; diff --git a/apps/segment/src/modules/ui/app-section.tsx b/apps/segment/src/modules/ui/app-section.tsx deleted file mode 100644 index 1b0e830..0000000 --- a/apps/segment/src/modules/ui/app-section.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next"; -import { ReactNode } from "react"; - -// todo move to shared -export const AppSection = ({ - heading, - sideContent, - mainContent, - includePadding = true, - ...props -}: PropsWithBox<{ - heading: string; - sideContent?: ReactNode; - mainContent: ReactNode; - includePadding?: boolean; -}>) => { - return ( - - - - {heading} - - {sideContent} - - - {mainContent} - - - ); -}; diff --git a/apps/segment/src/modules/ui/buttons-box.tsx b/apps/segment/src/modules/ui/buttons-box.tsx deleted file mode 100644 index 2295f69..0000000 --- a/apps/segment/src/modules/ui/buttons-box.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { BoxProps, Box } from "@saleor/macaw-ui/next"; - -export const ButtonsBox = (props: BoxProps) => { - return ; -}; diff --git a/apps/segment/src/modules/ui/skeleton.tsx b/apps/segment/src/modules/ui/skeleton.tsx deleted file mode 100644 index 25b1ad5..0000000 --- a/apps/segment/src/modules/ui/skeleton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Box, BoxProps } from "@saleor/macaw-ui/next"; - -/* - * TODO: Make it more generic, move to shared or contribute to macaw - * todo use macaw skeleton - */ -const Section = (props: BoxProps) => { - return ( - - - - - - ); -}; - -export const Skeleton = { Section }; diff --git a/apps/segment/src/pages/_app.tsx b/apps/segment/src/pages/_app.tsx index 78de7ba..798623c 100644 --- a/apps/segment/src/pages/_app.tsx +++ b/apps/segment/src/pages/_app.tsx @@ -1,11 +1,10 @@ -import { GraphQLProvider } from "@/modules/graphql/GraphQLProvider"; -import { ThemeSynchronizer } from "@/modules/theme/theme-synchronizer"; +import "@saleor/macaw-ui/next/style"; import { trpcClient } from "@/modules/trpc/trpc-client"; import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge"; import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next"; -import { NoSSRWrapper } from "@saleor/apps-shared"; +import { GraphQLProvider, NoSSRWrapper, ThemeSynchronizer } from "@saleor/apps-shared"; import { Box, ThemeProvider } from "@saleor/macaw-ui/next"; -import "@saleor/macaw-ui/next/style"; + import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { AppProps } from "next/app"; diff --git a/apps/segment/src/pages/api/trpc/[trpc].ts b/apps/segment/src/pages/api/trpc/[trpc].ts index c1d733c..7b764a2 100644 --- a/apps/segment/src/pages/api/trpc/[trpc].ts +++ b/apps/segment/src/pages/api/trpc/[trpc].ts @@ -1,6 +1,7 @@ import * as trpcNext from "@trpc/server/adapters/next"; -import { createTrpcContext } from "../../../modules/trpc/trpc-context"; + import { appRouter } from "../../../modules/trpc/trpc-app-router"; +import { createTrpcContext } from "@saleor/trpc"; export default trpcNext.createNextApiHandler({ router: appRouter, diff --git a/apps/segment/src/pages/configuration.tsx b/apps/segment/src/pages/configuration.tsx index 78f4dbf..843fe67 100644 --- a/apps/segment/src/pages/configuration.tsx +++ b/apps/segment/src/pages/configuration.tsx @@ -1,7 +1,7 @@ import { SegmentConfigForm } from "@/modules/configuration/segment-config-form/segment-config-form"; import { AppHeader } from "@/modules/ui/app-header"; -import { AppSection } from "@/modules/ui/app-section"; import { useAppBridge } from "@saleor/app-sdk/app-bridge"; +import { Layout } from "@saleor/apps-ui"; import { Box, Text } from "@saleor/macaw-ui/next"; import { NextPage } from "next"; @@ -19,12 +19,13 @@ const ConfigurationPage: NextPage = () => { return ( - Provide Segment credentials to allow sending events.} - mainContent={} - /> + > + + ); }; diff --git a/packages/shared/index.ts b/packages/shared/index.ts index 707b35a..77de641 100644 --- a/packages/shared/index.ts +++ b/packages/shared/index.ts @@ -1,5 +1,4 @@ export * from "./src/is-in-iframe"; -export * from "./src/macaw-theme-provider/macaw-theme-provider"; export * from "./src/no-ssr-wrapper"; export * from "./src/use-dashboard-notification"; export * from "./src/logger"; @@ -7,3 +6,6 @@ export * from "./src/saleor-version-compatibility-validator"; export * from "./src/create-graphql-client"; export * from "./src/metadata-manager"; export * from "./src/editor-js/editor-js-plaintext-renderer"; +export * from "./src/theme-synchronizer"; +export * from "./src/GraphQLProvider"; +export * from "./src/get-app-base-url"; diff --git a/packages/shared/package.json b/packages/shared/package.json index 79a6c0a..4c87d0a 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -27,7 +27,8 @@ "typescript": "5.1.6", "urql": "^4.0.4", "vite": "4.4.8", - "vitest": "0.34.1" + "vitest": "0.34.1", + "zod": "3.21.4" }, "main": "index.ts", "peerDependencies": { @@ -37,6 +38,7 @@ "pino-pretty": "^10.0.0", "react": "18.2.0", "react-dom": "18.2.0", - "urql": "^4.0.4" + "urql": "^4.0.4", + "zod": "3.21.4" } } diff --git a/apps/segment/src/modules/graphql/GraphQLProvider.tsx b/packages/shared/src/GraphQLProvider.tsx similarity index 89% rename from apps/segment/src/modules/graphql/GraphQLProvider.tsx rename to packages/shared/src/GraphQLProvider.tsx index 22b41d4..4607abf 100644 --- a/apps/segment/src/modules/graphql/GraphQLProvider.tsx +++ b/packages/shared/src/GraphQLProvider.tsx @@ -1,8 +1,7 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge"; import { PropsWithChildren } from "react"; import { Provider } from "urql"; - -import { createGraphQLClient } from "@saleor/apps-shared"; +import { createGraphQLClient } from "./create-graphql-client"; export function GraphQLProvider(props: PropsWithChildren<{}>) { const { appBridgeState } = useAppBridge(); diff --git a/apps/cms-v2/src/modules/shared/get-base-url.ts b/packages/shared/src/get-app-base-url.ts similarity index 72% rename from apps/cms-v2/src/modules/shared/get-base-url.ts rename to packages/shared/src/get-app-base-url.ts index e3b0677..438b033 100644 --- a/apps/cms-v2/src/modules/shared/get-base-url.ts +++ b/packages/shared/src/get-app-base-url.ts @@ -1,5 +1,9 @@ -// todo move to app sdk -export const getBaseUrl = (headers: { [name: string]: string | string[] | undefined }): string => { +/** + * TODO Consume this from App SDK + */ +export const getAppBaseUrl = (headers: { + [name: string]: string | string[] | undefined; +}): string => { const { host, "x-forwarded-proto": xForwardedProto = "http" } = headers; const xForwardedProtos = Array.isArray(xForwardedProto) diff --git a/packages/shared/src/macaw-theme-provider/macaw-theme-provider.tsx b/packages/shared/src/macaw-theme-provider/macaw-theme-provider.tsx deleted file mode 100644 index 116efb9..0000000 --- a/packages/shared/src/macaw-theme-provider/macaw-theme-provider.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { - dark, - light, - SaleorThemeColors, - ThemeProvider as MacawUIThemeProvider, -} from "@saleor/macaw-ui"; -import { PropsWithChildren } from "react"; -import { Theme } from "@material-ui/core/styles"; - -type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>; - -/** - * Temporary override of colors, to match new dashboard palette. - * Long term this will be replaced with Macaw UI 2.x with up to date design tokens - */ -const palettes: PalettesOverride = { - light: { - ...light, - background: { - default: "#fff", - paper: "#fff", - }, - }, - dark: { - ...dark, - background: { - default: "hsla(211, 42%, 14%, 1)", - paper: "hsla(211, 42%, 14%, 1)", - }, - }, -}; - -/** - * That's a hack required by Macaw-UI incompatibility with React@18 - */ -const ThemeProvider = MacawUIThemeProvider as React.FC< - PropsWithChildren<{ overrides?: Partial; ssr: boolean; palettes: PalettesOverride }> ->; - -type OuterProps = PropsWithChildren<{ themeOverrides?: Partial }>; - -/** - * This is theme provider for old Macaw. Will be removed with Macaw/next - */ -export const MacawThemeProvider = (props: OuterProps) => { - return ; -}; diff --git a/apps/segment/src/modules/theme/theme-synchronizer.tsx b/packages/shared/src/theme-synchronizer.tsx similarity index 100% rename from apps/segment/src/modules/theme/theme-synchronizer.tsx rename to packages/shared/src/theme-synchronizer.tsx diff --git a/packages/trpc/.eslintrc b/packages/trpc/.eslintrc new file mode 100644 index 0000000..5470783 --- /dev/null +++ b/packages/trpc/.eslintrc @@ -0,0 +1,4 @@ +{ + "root": true, + "extends": ["saleor"] +} diff --git a/packages/trpc/index.ts b/packages/trpc/index.ts new file mode 100644 index 0000000..10cb70c --- /dev/null +++ b/packages/trpc/index.ts @@ -0,0 +1,2 @@ +export * from "./src/context"; +export * from "./src/http-batch-link"; diff --git a/packages/trpc/package.json b/packages/trpc/package.json new file mode 100644 index 0000000..315ed31 --- /dev/null +++ b/packages/trpc/package.json @@ -0,0 +1,29 @@ +{ + "name": "@saleor/trpc", + "version": "0.0.0", + "scripts": { + "lint:fix": "eslint --fix ." + }, + "devDependencies": { + "@saleor/app-sdk": "0.41.1", + "eslint": "8.46.0", + "eslint-config-saleor": "workspace:*", + "next": "13.4.8", + "typescript": "5.1.6" + }, + "main": "index.ts", + "peerDependencies": { + "@saleor/app-sdk": "0.41.1", + "@saleor/apps-shared": "workspace:*", + "@tanstack/react-query": "^4.29.19", + "@trpc/client": "10.34.0", + "@trpc/next": "10.34.0", + "@trpc/react-query": "10.34.0", + "@trpc/server": "10.34.0", + "next": "13.3.0", + "pino": "^8.14.1", + "pino-pretty": "^10.0.0", + "react": "18.2.0", + "react-dom": "18.2.0" + } +} diff --git a/apps/segment/src/modules/trpc/trpc-context.ts b/packages/trpc/src/context.ts similarity index 55% rename from apps/segment/src/modules/trpc/trpc-context.ts rename to packages/trpc/src/context.ts index 44d2614..82354d7 100644 --- a/apps/segment/src/modules/trpc/trpc-context.ts +++ b/packages/trpc/src/context.ts @@ -1,22 +1,10 @@ import * as trpcNext from "@trpc/server/adapters/next"; import { SALEOR_AUTHORIZATION_BEARER_HEADER, SALEOR_API_URL_HEADER } from "@saleor/app-sdk/const"; import { inferAsyncReturnType } from "@trpc/server"; - -const getBaseUrl = (headers: { [name: string]: string | string[] | undefined }): string => { - const { host, "x-forwarded-proto": xForwardedProto = "http" } = headers; - - const xForwardedProtos = Array.isArray(xForwardedProto) - ? xForwardedProto.join(",") - : xForwardedProto; - const protocols = xForwardedProtos.split(","); - // prefer https over other protocols - const protocol = protocols.find((el) => el === "https") || protocols[0]; - - return `${protocol}://${host}`; -}; +import { getAppBaseUrl } from "@saleor/apps-shared"; export const createTrpcContext = async ({ res, req }: trpcNext.CreateNextContextOptions) => { - const baseUrl = getBaseUrl(req.headers); + const baseUrl = getAppBaseUrl(req.headers); return { token: req.headers[SALEOR_AUTHORIZATION_BEARER_HEADER] as string | undefined, diff --git a/packages/trpc/src/http-batch-link.ts b/packages/trpc/src/http-batch-link.ts new file mode 100644 index 0000000..9a3f6f6 --- /dev/null +++ b/packages/trpc/src/http-batch-link.ts @@ -0,0 +1,33 @@ +import { AppBridge } from "@saleor/app-sdk/app-bridge"; +import { SALEOR_API_URL_HEADER, SALEOR_AUTHORIZATION_BEARER_HEADER } from "@saleor/app-sdk/const"; +import { httpBatchLink } from "@trpc/client"; + +function getBaseUrl() { + if (typeof window !== "undefined") return ""; + // eslint-disable-next-line turbo/no-undeclared-env-vars + if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; + + // eslint-disable-next-line turbo/no-undeclared-env-vars + return `http://localhost:${process.env.PORT ?? 3000}`; +} + +export const createHttpBatchLink = (appBridgeInstance?: AppBridge) => { + return httpBatchLink({ + url: `${getBaseUrl()}/api/trpc`, + headers() { + const { token, saleorApiUrl } = appBridgeInstance?.getState() || {}; + + if (!token || !saleorApiUrl) { + console.error("Can't initialize tRPC client before establishing the App Bridge connection"); + throw new Error("Token and Saleor API URL unknown"); + } + return { + /** + * Attach headers from app to client requests, so tRPC can add them to context + */ + [SALEOR_AUTHORIZATION_BEARER_HEADER]: appBridgeInstance?.getState().token, + [SALEOR_API_URL_HEADER]: appBridgeInstance?.getState().saleorApiUrl, + }; + }, + }); +}; diff --git a/packages/trpc/turbo.json b/packages/trpc/turbo.json new file mode 100644 index 0000000..276a378 --- /dev/null +++ b/packages/trpc/turbo.json @@ -0,0 +1,9 @@ +{ + "extends": ["//"], + "$schema": "https://turbo.build/schema.json", + "pipeline": { + "build": { + "env": ["VERCEL_URL", "PORT"] + } + } +} diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 3849222..daf5098 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -1,3 +1,6 @@ export * from "./src/text-link"; export * from "./src/semantic-chip"; export * from "./src/breadcrumbs"; +export * from "./src/layout"; +export * from "./src/buttons-box"; +export * from "./src/skeleton-layout"; diff --git a/apps/cms-v2/src/modules/ui/buttons-box.tsx b/packages/ui/src/buttons-box.tsx similarity index 100% rename from apps/cms-v2/src/modules/ui/buttons-box.tsx rename to packages/ui/src/buttons-box.tsx diff --git a/packages/ui/src/example.tsx b/packages/ui/src/example.tsx deleted file mode 100644 index b4026c6..0000000 --- a/packages/ui/src/example.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Box } from "@saleor/macaw-ui/next"; -import { PropsWithChildren } from "react"; - -type ExampleProps = PropsWithChildren<{}>; - -export const Example = ({ children }: ExampleProps) => { - return {children}; -}; diff --git a/packages/ui/src/layout.tsx b/packages/ui/src/layout.tsx new file mode 100644 index 0000000..114e694 --- /dev/null +++ b/packages/ui/src/layout.tsx @@ -0,0 +1,78 @@ +import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next"; +import { ReactNode } from "react"; + +type AppSectionProps = PropsWithBox<{ + heading: ReactNode; + sideContent?: ReactNode; + includePadding?: boolean; + leftColumnWidthPx?: number; + maxWidthPx?: number; +}>; + +const AppSectionCard = ({ + children, + footer, + includePadding = true, + ...props +}: PropsWithBox<{ + footer?: ReactNode; + includePadding?: boolean; +}>) => { + return ( + + {children} + {footer && ( + + {footer} + + )} + + ); +}; + +const AppSection = ({ + heading, + sideContent, + includePadding = true, + leftColumnWidthPx = 400, + maxWidthPx = 1200, + children, + ...props +}: AppSectionProps) => { + return ( + + + + {heading} + + {sideContent} + + {children} + + ); +}; + +export const Layout = { + AppSection, + AppSectionCard, +}; diff --git a/packages/ui/src/skeleton-layout.tsx b/packages/ui/src/skeleton-layout.tsx new file mode 100644 index 0000000..bd78cdf --- /dev/null +++ b/packages/ui/src/skeleton-layout.tsx @@ -0,0 +1,17 @@ +import { Box, BoxProps, Skeleton as MacawSkeleton, SkeletonProps } from "@saleor/macaw-ui/next"; + +const Section = (props: BoxProps) => { + return ( + + + + + + ); +}; + +const Line = (props: SkeletonProps) => { + return ; +}; + +export const SkeletonLayout = { Section, Line }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26eedd0..0afbc27 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1188,6 +1188,9 @@ importers: '@saleor/react-hook-form-macaw': specifier: workspace:* version: link:../../packages/react-hook-form-macaw + '@saleor/trpc': + specifier: workspace:* + version: link:../../packages/trpc '@segment/analytics-node': specifier: ^1.1.0 version: 1.1.0 @@ -1760,6 +1763,58 @@ importers: vitest: specifier: 0.34.1 version: 0.34.1(jsdom@20.0.3) + zod: + specifier: 3.21.4 + version: 3.21.4 + + packages/trpc: + dependencies: + '@saleor/apps-shared': + specifier: workspace:* + version: link:../shared + '@tanstack/react-query': + specifier: ^4.29.19 + version: 4.29.19(react-dom@18.2.0)(react@18.2.0) + '@trpc/client': + specifier: 10.34.0 + version: 10.34.0(@trpc/server@10.34.0) + '@trpc/next': + specifier: 10.34.0 + version: 10.34.0(@tanstack/react-query@4.29.19)(@trpc/client@10.34.0)(@trpc/react-query@10.34.0)(@trpc/server@10.34.0)(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) + '@trpc/react-query': + specifier: 10.34.0 + version: 10.34.0(@tanstack/react-query@4.29.19)(@trpc/client@10.34.0)(@trpc/server@10.34.0)(react-dom@18.2.0)(react@18.2.0) + '@trpc/server': + specifier: 10.34.0 + version: 10.34.0 + pino: + specifier: ^8.14.1 + version: 8.14.1 + pino-pretty: + specifier: ^10.0.0 + version: 10.0.0 + react: + specifier: 18.2.0 + version: 18.2.0 + react-dom: + specifier: 18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@saleor/app-sdk': + specifier: 0.41.1 + version: 0.41.1(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) + eslint: + specifier: 8.46.0 + version: 8.46.0 + eslint-config-saleor: + specifier: workspace:* + version: link:../eslint-config-saleor + next: + specifier: 13.4.8 + version: 13.4.8(@babel/core@7.22.11)(react-dom@18.2.0)(react@18.2.0) + typescript: + specifier: 5.1.6 + version: 5.1.6 packages/ui: dependencies: @@ -2939,7 +2994,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@ampproject/remapping': 2.2.1 - '@babel/code-frame': 7.22.5 + '@babel/code-frame': 7.22.10 '@babel/generator': 7.22.9 '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.21.8) '@babel/helper-module-transforms': 7.22.9(@babel/core@7.21.8) @@ -5704,7 +5759,7 @@ packages: resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.22.5 + '@babel/code-frame': 7.22.10 '@babel/generator': 7.22.9 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-function-name': 7.22.5 @@ -5757,7 +5812,7 @@ packages: resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.22.5 + '@babel/code-frame': 7.22.10 '@babel/generator': 7.22.9 '@babel/helper-environment-visitor': 7.22.5 '@babel/helper-function-name': 7.22.5 @@ -10358,7 +10413,7 @@ packages: /@swc/helpers@0.5.1: resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==} dependencies: - tslib: 2.6.1 + tslib: 2.6.2 /@tanstack/query-core@4.29.19: resolution: {integrity: sha512-uPe1DukeIpIHpQi6UzIgBcXsjjsDaLnc7hF+zLBKnaUlh7jFE/A+P8t4cU4VzKPMFB/C970n/9SxtpO5hmIRgw==} @@ -12260,7 +12315,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001503 + caniuse-lite: 1.0.30001519 electron-to-chromium: 1.4.482 node-releases: 2.0.13 update-browserslist-db: 1.0.11(browserslist@4.21.9)