djkato/saleor-apps-redis_apl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update macaw-ui version (#541)

Browse source 
* Bump macaw version

* Add changeset

* CRM update spacing mapping

* Update spacing mapping for invoices app

* Update products feed spacing mapping

* Fix accordion in webhook status, add trigger button

* Update search spacing mapping

* Improve the changelog message

* Update spacing mapping in EAM app
This commit is contained in:
Krzysztof Wolski 2023-06-09 11:42:40 +02:00 committed by GitHub
parent a8834a11fe
commit 928c727c35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
65 changed files with 163 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.changeset/three-hats-attack.md Normal file
View file

@ -0,0 +1,11 @@
---
"@saleor/react-hook-form-macaw": patch
"saleor-app-emails-and-messages": patch
"saleor-app-products-feed": patch
"saleor-app-invoices": patch
"saleor-app-search": patch
"@saleor/apps-ui": patch
"saleor-app-crm": patch
---
Updated @saleor/macaw-ui to 0.8.0-pre.95. This version introduces change in spacing scale, so there may be slight changes in spacing

2
apps/crm/package.json
View file

@ -15,7 +15,7 @@
"@mailchimp/mailchimp_marketing": "^3.0.80", "@mailchimp/mailchimp_marketing": "^3.0.80",
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "workspace:*", "@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@sentry/nextjs": "^7.52.1", "@sentry/nextjs": "^7.52.1",
"@tanstack/react-query": "^4.28.0", "@tanstack/react-query": "^4.28.0",
"@trpc/client": "^10.18.0", "@trpc/client": "^10.18.0",

2
apps/crm/src/modules/mailchimp/auth/mailchimp-auth-section/mailchimp-auth-section.tsx
View file

@ -13,7 +13,7 @@ export const MailchimpAuthSection = () => {
return ( return (
<Section display="flex" flexDirection="column"> <Section display="flex" flexDirection="column">
<Text as="p" marginBottom={8}> <Text as="p" marginBottom={5}>
You need to connect Mailchimp with Saleor CRM App. Click button below and authorize the App. You need to connect Mailchimp with Saleor CRM App. Click button below and authorize the App.
</Text> </Text>
<form method="POST" action="/api/auth/mailchimp/oauth"> <form method="POST" action="/api/auth/mailchimp/oauth">

2
apps/crm/src/modules/mailchimp/config-sections/connection-status/connection-status.tsx
View file

@ -3,7 +3,7 @@ import { Section } from "../../../ui/section/section";
export const ConnectionStatus = (props: PropsWithBox<{ status: "error" | "ok" }>) => ( export const ConnectionStatus = (props: PropsWithBox<{ status: "error" | "ok" }>) => (
<Section {...props}> <Section {...props}>
<Text variant="title" size="small" as="p" marginBottom={4}> <Text variant="title" size="small" as="p" marginBottom={1.5}>
Connection status Connection status
</Text> </Text>
{props.status === "ok" && <Text color="textBrandDefault">Connected</Text>} {props.status === "ok" && <Text color="textBrandDefault">Connected</Text>}

6
apps/crm/src/modules/mailchimp/config-sections/instructions/instructions.tsx
View file

@ -5,10 +5,10 @@ import { useLocalStorage } from "usehooks-ts";
import { TextLink } from "../../../ui/text-link/text-link"; import { TextLink } from "../../../ui/text-link/text-link";
import { useAppBridge } from "@saleor/app-sdk/app-bridge"; import { useAppBridge } from "@saleor/app-sdk/app-bridge";
const Paragraph = (props: TextProps) => <Text marginBottom={5} as="p" {...props} />; const Paragraph = (props: TextProps) => <Text marginBottom={2} as="p" {...props} />;
const Heading = (props: TextProps) => ( const Heading = (props: TextProps) => (
<Text as="h2" variant="heading" marginBottom={4} marginTop={12} {...props} /> <Text as="h2" variant="heading" marginBottom={1.5} marginTop={9} {...props} />
); );
const getGraphiqlExampleQueryPlaygroundUrl = (apiUrl = "https://demo.saleor.io/graphql/") => const getGraphiqlExampleQueryPlaygroundUrl = (apiUrl = "https://demo.saleor.io/graphql/") =>
@ -30,7 +30,7 @@ export const Instructions = (props: PropsWithBox<{}>) => {
justifyContent="space-between" justifyContent="space-between"
onClick={() => setInstructionsVisible((v) => !v)} onClick={() => setInstructionsVisible((v) => !v)}
> >
<Text as="h1" variant="title" size="small" marginBottom={12}> <Text as="h1" variant="title" size="small" marginBottom={9}>
Instructions Instructions
</Text> </Text>
<Button <Button

6
apps/crm/src/modules/mailchimp/config-sections/mailchimp-lists/mailchimp-lists.tsx
View file

@ -28,7 +28,7 @@ export const MailchimpLists = (props: PropsWithBox<{}>) => {
case "loading": { case "loading": {
return ( return (
<Wrapper {...props}> <Wrapper {...props}>
<Text as="p" marginTop={4}> <Text as="p" marginTop={1.5}>
Loading lists... Loading lists...
</Text> </Text>
</Wrapper> </Wrapper>
@ -43,14 +43,14 @@ export const MailchimpLists = (props: PropsWithBox<{}>) => {
<List.Item <List.Item
disabled disabled
key={listItem.id} key={listItem.id}
paddingY={4} paddingY={1.5}
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent="space-between" justifyContent="space-between"
> >
<Text>{listItem.name}</Text> <Text>{listItem.name}</Text>
<Text variant="caption"> <Text variant="caption">
<Box __display="inline-block" marginRight={2}> <Box __display="inline-block" marginRight={0.5}>
<Chip size="small">ID</Chip> <Chip size="small">ID</Chip>
</Box> </Box>
{listItem.id} {listItem.id}

2
apps/crm/src/modules/mailchimp/config-sections/remove-mailchimp-config/remove-mailchimp-config.tsx
View file

@ -18,7 +18,7 @@ export const RemoveMailchimpConfig = (props: ComponentProps<typeof Box>) => {
<Text color="textCriticalDefault" variant="title" size="small"> <Text color="textCriticalDefault" variant="title" size="small">
Remove configuration Remove configuration
</Text> </Text>
<Text as="p" marginY={8}> <Text as="p" marginY={5}>
This operation will remove saved Mailchimp token from App database. You will be able to This operation will remove saved Mailchimp token from App database. You will be able to
connect it again. <br /> connect it again. <br />
It will not disconnect CRM App in Mailchimp - you can do it in the{" "} It will not disconnect CRM App in Mailchimp - you can do it in the{" "}

10
apps/crm/src/modules/mailchimp/config-sections/webhook-configuration/webhook-configuration.tsx
View file

@ -99,20 +99,20 @@ export const WebhookConfiguration = (props: ComponentProps<typeof Box>) => {
return ( return (
<Section {...props}> <Section {...props}>
<Text as="h1" variant="title" size="small" marginBottom={4}> <Text as="h1" variant="title" size="small" marginBottom={1.5}>
Configure webhooks Configure webhooks
</Text> </Text>
<Text color="textNeutralSubdued" as="p" marginBottom={8}> <Text color="textNeutralSubdued" as="p" marginBottom={5}>
Each time customer is created, it will be added to selected audience list in Mailchimp Each time customer is created, it will be added to selected audience list in Mailchimp
</Text> </Text>
<Box display="flex" gap={4} flexDirection="column"> <Box display="flex" gap={1.5} flexDirection="column">
<Checkbox onCheckedChange={handleCheckboxChange} checked={localState.selected}> <Checkbox onCheckedChange={handleCheckboxChange} checked={localState.selected}>
<Text marginRight="auto">Enable customers sync</Text> <Text marginRight="auto">Enable customers sync</Text>
</Checkbox> </Checkbox>
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Text <Text
color={localState?.selected ? "textNeutralDefault" : "textNeutralDisabled"} color={localState?.selected ? "textNeutralDefault" : "textNeutralDisabled"}
marginRight={4} marginRight={1.5}
variant="caption" variant="caption"
> >
Sync to the Mailchimp list: Sync to the Mailchimp list:
@ -131,7 +131,7 @@ export const WebhookConfiguration = (props: ComponentProps<typeof Box>) => {
/> />
</Box> </Box>
</Box> </Box>
<Box marginTop={8} display="flex" justifyContent="flex-end"> <Box marginTop={5} display="flex" justifyContent="flex-end">
<Button disabled={webhookConfigMutation.status === "loading"} onClick={handleSaveButton}> <Button disabled={webhookConfigMutation.status === "loading"} onClick={handleSaveButton}>
{webhookConfigMutation.isLoading ? "Saving..." : "Save"} {webhookConfigMutation.isLoading ? "Saving..." : "Save"}
</Button> </Button>

12
apps/crm/src/modules/mailchimp/views/mailchimp-config-view/mailchimp-config-view.tsx
View file

@ -9,7 +9,7 @@ import { ConnectionStatus } from "../../config-sections/connection-status/connec
import { Instructions } from "../../config-sections/instructions/instructions"; import { Instructions } from "../../config-sections/instructions/instructions";
const header = ( const header = (
<Box marginBottom={12}> <Box marginBottom={9}>
<Text as="h1" variant="title" size="large"> <Text as="h1" variant="title" size="large">
Mailchimp Mailchimp
</Text> </Text>
@ -40,7 +40,7 @@ export const MailchimpConfigView = () => {
return ( return (
<div> <div>
{header} {header}
<Box marginBottom={12} display="flex" justifyContent="space-between" gap={12}> <Box marginBottom={9} display="flex" justifyContent="space-between" gap={9}>
<ConnectionStatus status="error" __flex="0 1 50%" /> <ConnectionStatus status="error" __flex="0 1 50%" />
</Box> </Box>
</div> </div>
@ -51,14 +51,14 @@ export const MailchimpConfigView = () => {
return ( return (
<div> <div>
{header} {header}
<Instructions marginBottom={12} /> <Instructions marginBottom={9} />
<Box marginBottom={12} display="flex" justifyContent="space-between" gap={12}> <Box marginBottom={9} display="flex" justifyContent="space-between" gap={9}>
<ConnectionStatus status="ok" __flex="0 1 50%" /> <ConnectionStatus status="ok" __flex="0 1 50%" />
<MailchimpLists __flex="0 1 50%" /> <MailchimpLists __flex="0 1 50%" />
</Box> </Box>
<WebhookConfiguration marginBottom={12} /> <WebhookConfiguration marginBottom={9} />
<SaleorCustomersSync marginBottom={12} /> <SaleorCustomersSync marginBottom={9} />
<RemoveMailchimpConfig /> <RemoveMailchimpConfig />
</div> </div>
); );

2
apps/crm/src/modules/providers/providers-list/providers-list.tsx
View file

@ -59,7 +59,7 @@ export const ProvidersList = ({ className, onProviderClick, activeProvider, ...p
<li className={styles.item}> <li className={styles.item}>
<Box> <Box>
<TextLink href="https://github.com/saleor/apps/discussions/categories/integrations-features"> <TextLink href="https://github.com/saleor/apps/discussions/categories/integrations-features">
<Box display="flex" gap={4}> <Box display="flex" gap={1.5}>
<MarketplaceIcon /> <MarketplaceIcon />
<Text color="inherit">Request integration</Text> <Text color="inherit">Request integration</Text>
</Box> </Box>

12
apps/crm/src/modules/saleor-customers-sync/saleor-customers-sync.tsx
View file

@ -9,10 +9,10 @@ import { MailchimpListPicker } from "../mailchimp/mailchimp-list-picker/mailchim
const RootSection = ({ children, ...props }: ComponentProps<typeof Box>) => { const RootSection = ({ children, ...props }: ComponentProps<typeof Box>) => {
return ( return (
<Section {...props}> <Section {...props}>
<Text as="h1" variant="title" size="small" marginBottom={4}> <Text as="h1" variant="title" size="small" marginBottom={1.5}>
Bulk sync Bulk sync
</Text> </Text>
<Text color="textNeutralSubdued" as="p" marginBottom={8}> <Text color="textNeutralSubdued" as="p" marginBottom={5}>
Scan Saleor customers and send them to Mailchimp Scan Saleor customers and send them to Mailchimp
</Text> </Text>
{children} {children}
@ -42,11 +42,11 @@ export const SaleorCustomersSync = (props: ComponentProps<typeof Box>) => {
if (!enabled) { if (!enabled) {
return ( return (
<RootSection {...props}> <RootSection {...props}>
<Box display="flex" marginBottom={6} gap={4}> <Box display="flex" marginBottom={3} gap={1.5}>
<WarningIcon /> <WarningIcon />
<Text as="p">Do not leave the app while indexing</Text> <Text as="p">Do not leave the app while indexing</Text>
</Box> </Box>
<Box display="flex" justifyContent="flex-end" gap={4} alignItems="center"> <Box display="flex" justifyContent="flex-end" gap={1.5} alignItems="center">
<Text variant="caption">Sync to the Mailchimp list:</Text> <Text variant="caption">Sync to the Mailchimp list:</Text>
<MailchimpListPicker <MailchimpListPicker
onChange={(_, value) => { onChange={(_, value) => {
@ -83,7 +83,7 @@ export const SaleorCustomersSync = (props: ComponentProps<typeof Box>) => {
return ( return (
<RootSection {...props}> <RootSection {...props}>
{totalCustomersCount && ( {totalCustomersCount && (
<Box display="flex" gap={4} alignItems="center" marginBottom={8}> <Box display="flex" gap={1.5} alignItems="center" marginBottom={5}>
<progress <progress
style={{ style={{
height: 30, height: 30,
@ -97,7 +97,7 @@ export const SaleorCustomersSync = (props: ComponentProps<typeof Box>) => {
)} )}
{done && ( {done && (
<Box> <Box>
<Text as="p" marginBottom={4}> <Text as="p" marginBottom={1.5}>
Fetched customers from Saleor Fetched customers from Saleor
</Text> </Text>
{status === "loading" && <Text as="p">Sending customer to Mailchimp in progress...</Text>} {status === "loading" && <Text as="p">Sending customer to Mailchimp in progress...</Text>}

2
apps/crm/src/modules/ui/app-columns-layout/app-columns-layout.module.css
View file

@ -2,7 +2,7 @@
display: grid; display: grid;
grid-template-columns: 280px auto 280px; grid-template-columns: 280px auto 280px;
align-items: start; align-items: start;
gap: var(--mu-space-12); gap: 40px;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

2
apps/crm/src/modules/ui/section/section.tsx
View file

@ -5,7 +5,7 @@ type Props = PropsWithBox<{}>;
export const Section = (props: Props) => { export const Section = (props: Props) => {
return ( return (
<Box <Box
padding={8} padding={5}
borderColor="neutralHighlight" borderColor="neutralHighlight"
borderWidth={1} borderWidth={1}
borderStyle="solid" borderStyle="solid"

2
apps/crm/src/pages/_app.tsx
View file

@ -53,7 +53,7 @@ function NextApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWi
<ThemeSynchronizer /> <ThemeSynchronizer />
<RoutePropagator /> <RoutePropagator />
<AppBridgeStorageSetter /> <AppBridgeStorageSetter />
<Box padding={8}> <Box padding={5}>
<Component {...pageProps} /> <Component {...pageProps} />
</Box> </Box>
</ThemeProvider> </ThemeProvider>

4
apps/crm/src/pages/configuration/mailchimp/oauth-success.tsx
View file

@ -19,10 +19,10 @@ const MailchimpOauthSuccessPage: NextPageWithLayoutOverwrite = () => {
return ( return (
<Box> <Box>
<Text variant="title" as="h1" marginBottom={4}> <Text variant="title" as="h1" marginBottom={1.5}>
Success Success
</Text> </Text>
<Text as="p" marginBottom={4}> <Text as="p" marginBottom={1.5}>
Successfully authorized Mailchimp as {email} Successfully authorized Mailchimp as {email}
</Text> </Text>
<Text>Will redirect soon...</Text> <Text>Will redirect soon...</Text>

4
apps/crm/src/pages/configuration/providers/[[...provider]].tsx
View file

@ -32,8 +32,8 @@ const ProvidersPage: NextPage = () => {
return ( return (
<div> <div>
<p>Connect Saleor clients database with your favourite CRM platform.</p> <p>Connect Saleor clients database with your favorite CRM platform.</p>
<AppColumnsLayout marginTop={12}> <AppColumnsLayout marginTop={9}>
<ProvidersList <ProvidersList
onProviderClick={(provider) => { onProviderClick={(provider) => {
router.push(`/configuration/providers/${provider}`); router.push(`/configuration/providers/${provider}`);

2
apps/emails-and-messages/package.json
View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "workspace:*", "@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*", "@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/react-hook-form-macaw": "workspace:*", "@saleor/react-hook-form-macaw": "workspace:*",
"@sendgrid/client": "^7.7.0", "@sendgrid/client": "^7.7.0",
"@sendgrid/mail": "^7.7.0", "@sendgrid/mail": "^7.7.0",

2
apps/emails-and-messages/src/components/basic-layout.tsx
View file

@ -9,7 +9,7 @@ interface BasicLayoutProps {
export const BasicLayout = ({ children, breadcrumbs, isLoading = false }: BasicLayoutProps) => { export const BasicLayout = ({ children, breadcrumbs, isLoading = false }: BasicLayoutProps) => {
return ( return (
<Box padding={10} display="grid" gap={13}> <Box padding={7} display="grid" gap={10}>
{breadcrumbs?.length && ( {breadcrumbs?.length && (
<Breadcrumbs> <Breadcrumbs>
{breadcrumbs.map((breadcrumb) => ( {breadcrumbs.map((breadcrumb) => (

2
apps/emails-and-messages/src/components/section-with-description.tsx
View file

@ -7,7 +7,7 @@ interface SectionWithDescriptionProps {
} }
export const SectionWithDescription = (props: SectionWithDescriptionProps) => { export const SectionWithDescription = (props: SectionWithDescriptionProps) => {
return ( return (
<Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={6}> <Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={3}>
<Box> <Box>
<Text variant="heading" as="h2"> <Text variant="heading" as="h2">
{props.title} {props.title}

2
apps/emails-and-messages/src/components/ui-defaults.ts
View file

@ -1 +1 @@
export const defaultPadding = 6; export const defaultPadding = 3;

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

@ -20,7 +20,7 @@ const NoExistingConfigurations = () => {
}; };
return ( return (
<BoxWithBorder padding={10} display="grid" alignItems="center" justifyContent="center"> <BoxWithBorder padding={7} display="grid" alignItems="center" justifyContent="center">
<Text>No providers configured yet</Text> <Text>No providers configured yet</Text>
<Button onClick={redirectToProvidersSelection}>Add first provider</Button> <Button onClick={redirectToProvidersSelection}>Add first provider</Button>
</BoxWithBorder> </BoxWithBorder>
@ -54,7 +54,7 @@ export const MessagingProvidersBox = ({
if (loading) { if (loading) {
return ( return (
<BoxWithBorder padding={10} display="grid" alignItems="center" justifyContent="center"> <BoxWithBorder padding={7} display="grid" alignItems="center" justifyContent="center">
<Text>Loading</Text> <Text>Loading</Text>
</BoxWithBorder> </BoxWithBorder>
); );

2
apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx
View file

@ -56,7 +56,7 @@ export const ApiConnectionSection = ({ configuration }: ApiConnectionSectionProp
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
label="API Key" label="API Key"
name="apiKey" name="apiKey"

2
apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx
View file

@ -65,7 +65,7 @@ export const SendgridBasicInformationSection = ({
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
label="Configuration name" label="Configuration name"
control={control} control={control}

2
apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx
View file

@ -59,7 +59,7 @@ export const SendgridSenderSection = ({ configuration }: SendgridSenderSectionPr
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
{sendersChoices?.length ? ( {sendersChoices?.length ? (
<Combobox <Combobox
name="sender" name="sender"

2
apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx
View file

@ -66,7 +66,7 @@ export const SmtpBasicInformationSection = ({
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
name="name" name="name"
label="Configuration name" label="Configuration name"

2
apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx
View file

@ -58,7 +58,7 @@ export const SmtpSection = ({ configuration }: SmtpSectionProps) => {
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
label="Host" label="Host"
helperText="Server host that will be connected." helperText="Server host that will be connected."

2
apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx
View file

@ -55,7 +55,7 @@ export const SmtpSenderSection = ({ configuration }: SmtpSenderSectionProps) =>
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
label="Email" label="Email"
name="senderEmail" name="senderEmail"

2
apps/emails-and-messages/src/pages/configuration/choose-provider.tsx
View file

@ -24,7 +24,7 @@ const ChooseProviderPage: NextPage = () => {
</Box> </Box>
</Box> </Box>
<SectionWithDescription title="Choose provider"> <SectionWithDescription title="Choose provider">
<Box display="grid" gridTemplateColumns={2} gap={6}> <Box display="grid" gridTemplateColumns={2} gap={3}>
<ProviderSelectionBox <ProviderSelectionBox
providerName="Sendgrid" providerName="Sendgrid"
providerDescription="Use dynamic templates created in Sendgrid dashboard to send messages. Event data will be forwarded to Sendgrid." providerDescription="Use dynamic templates created in Sendgrid dashboard to send messages. Event data will be forwarded to Sendgrid."

2
apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx
View file

@ -65,7 +65,7 @@ const NewSendgridConfigurationPage: NextPage = () => {
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Controller <Controller
name="name" name="name"
control={control} control={control}

2
apps/emails-and-messages/src/pages/configuration/smtp/[configurationId]/event/[eventType].tsx
View file

@ -81,7 +81,7 @@ const EditSmtpEventPage: NextPage = () => {
{ name: eventType }, { name: eventType },
]} ]}
> >
<Box display="flex" flexDirection="column" gap={13}> <Box display="flex" flexDirection="column" gap={10}>
<Text as="p"> <Text as="p">
Edit template for {eventType} event. You can learn more about MJML{" "} Edit template for {eventType} event. You can learn more about MJML{" "}
<TextLink href="https://mjml.io/" newTab={true}> <TextLink href="https://mjml.io/" newTab={true}>

2
apps/emails-and-messages/src/pages/configuration/smtp/new.tsx
View file

@ -72,7 +72,7 @@ const NewSmtpConfigurationPage: NextPage = () => {
}); });
})} })}
> >
<Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}> <Box padding={defaultPadding} display="flex" flexDirection="column" gap={7}>
<Input <Input
control={control} control={control}
name="name" name="name"

2
apps/invoices/package.json
View file

@ -15,7 +15,7 @@
"@hookform/resolvers": "^3.1.0", "@hookform/resolvers": "^3.1.0",
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "workspace:*", "@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@sentry/nextjs": "^7.36.0", "@sentry/nextjs": "^7.36.0",
"@tanstack/react-query": "^4.24.4", "@tanstack/react-query": "^4.24.4",
"@trpc/client": "^10.10.0", "@trpc/client": "^10.10.0",

6
apps/invoices/src/modules/app-configuration/ui/address-form.tsx
View file

@ -62,7 +62,7 @@ export const AddressForm = (props: Props & InnerFormProps) => {
return props.onSubmit(data); return props.onSubmit(data);
})} })}
> >
<Box display={"grid"} gap={6} marginBottom={12}> <Box display={"grid"} gap={3} marginBottom={9}>
{fieldsBlock1.map((fieldName) => ( {fieldsBlock1.map((fieldName) => (
<Controller <Controller
key={fieldName} key={fieldName}
@ -84,7 +84,7 @@ export const AddressForm = (props: Props & InnerFormProps) => {
/> />
))} ))}
<Box display={"grid"} gridTemplateColumns={2} gap={6}> <Box display={"grid"} gridTemplateColumns={2} gap={3}>
{fieldsBlock2.map((fieldName) => ( {fieldsBlock2.map((fieldName) => (
<Controller <Controller
key={fieldName} key={fieldName}
@ -128,7 +128,7 @@ export const AddressForm = (props: Props & InnerFormProps) => {
/> />
))} ))}
</Box> </Box>
<Box display={"grid"} justifyContent={"flex-end"} gap={4} gridAutoFlow={"column"}> <Box display={"grid"} justifyContent={"flex-end"} gap={1.5} gridAutoFlow={"column"}>
<Button <Button
variant="tertiary" variant="tertiary"
onClick={(e) => { onClick={(e) => {

8
apps/invoices/src/modules/app-configuration/views/app-config.view.tsx
View file

@ -13,18 +13,18 @@ export const AppConfigView = () => {
display={"grid"} display={"grid"}
justifyContent={"space-between"} justifyContent={"space-between"}
__gridTemplateColumns={"400px 400px"} __gridTemplateColumns={"400px 400px"}
gap={13} gap={10}
__marginBottom={"200px"} __marginBottom={"200px"}
> >
<Box> <Box>
<Text as={"h1"} variant={"hero"} marginBottom={8}> <Text as={"h1"} variant={"hero"} marginBottom={5}>
Configuration Configuration
</Text> </Text>
<Text as={"p"} marginBottom={4}> <Text as={"p"} marginBottom={1.5}>
The Invoices App will generate invoices for each order, for which{" "} The Invoices App will generate invoices for each order, for which{" "}
<code>INVOICE_REQUESTED</code> event will be triggered <code>INVOICE_REQUESTED</code> event will be triggered
</Text> </Text>
<Text as={"p"} marginBottom={4}> <Text as={"p"} marginBottom={1.5}>
By default it will use{" "} By default it will use{" "}
<a <a
href={"#"} href={"#"}

4
apps/invoices/src/modules/app-configuration/views/channel-config.view.tsx
View file

@ -21,7 +21,7 @@ export const ChannelConfigView = () => {
return ( return (
<Box> <Box>
<Box __marginBottom={"100px"}> <Box __marginBottom={"100px"}>
<Box marginBottom={8} display={"flex"} alignItems={"center"}> <Box marginBottom={5} display={"flex"} alignItems={"center"}>
<Text color={"textNeutralSubdued"}>Configuration</Text> <Text color={"textNeutralSubdued"}>Configuration</Text>
<ChevronRightIcon color={"textNeutralSubdued"} /> <ChevronRightIcon color={"textNeutralSubdued"} />
<Text color={"textNeutralSubdued"}>Edit channel</Text> <Text color={"textNeutralSubdued"}>Edit channel</Text>
@ -35,7 +35,7 @@ export const ChannelConfigView = () => {
mainContent={<ConnectedAddressForm channelSlug={channel as string} />} mainContent={<ConnectedAddressForm channelSlug={channel as string} />}
sideContent={ sideContent={
<Box> <Box>
<Text marginBottom={8} as={"p"}> <Text marginBottom={5} as={"p"}>
Set custom billing address for <Text variant={"bodyStrong"}>{channel}</Text> channel. Set custom billing address for <Text variant={"bodyStrong"}>{channel}</Text> channel.
</Text> </Text>
<Button <Button

4
apps/invoices/src/modules/channels/ui/per-channel-config-list.tsx
View file

@ -80,7 +80,7 @@ export const PerChannelConfigList = () => {
return ( return (
<Box> <Box>
<Box display={"grid"} gridTemplateColumns={3} marginBottom={8}> <Box display={"grid"} gridTemplateColumns={3} marginBottom={5}>
<Text color={"textNeutralSubdued"} variant={"caption"} size={"small"}> <Text color={"textNeutralSubdued"} variant={"caption"} size={"small"}>
Channel Channel
</Text> </Text>
@ -93,7 +93,7 @@ export const PerChannelConfigList = () => {
key={channel.id} key={channel.id}
display={"grid"} display={"grid"}
gridTemplateColumns={3} gridTemplateColumns={3}
paddingY={4} paddingY={1.5}
borderBottomStyle={"solid"} borderBottomStyle={"solid"}
borderBottomWidth={1} borderBottomWidth={1}
borderColor={"neutralHighlight"} borderColor={"neutralHighlight"}

6
apps/invoices/src/modules/shop-info/ui/default-shop-address.tsx
View file

@ -8,7 +8,7 @@ const Wrapper = ({ children }: PropsWithChildren<{}>) => {
return ( return (
<Box> <Box>
<Box display={"flex"} justifyContent={"space-between"} marginBottom={8}> <Box display={"flex"} justifyContent={"space-between"} marginBottom={5}>
<Text variant={"heading"}>Default address of the shop</Text> <Text variant={"heading"}>Default address of the shop</Text>
<Button <Button
size={"small"} size={"small"}
@ -35,7 +35,7 @@ export const DefaultShopAddress = () => {
if (error) { if (error) {
return ( return (
<Wrapper> <Wrapper>
<Text marginBottom={4} color={"textCriticalDefault"}> <Text marginBottom={1.5} color={"textCriticalDefault"}>
Error while fetching shop address Error while fetching shop address
</Text> </Text>
<Button onClick={() => refetch()}>Fetch again</Button> <Button onClick={() => refetch()}>Fetch again</Button>
@ -57,7 +57,7 @@ export const DefaultShopAddress = () => {
<Text as={"p"} variant={"bodyStrong"}> <Text as={"p"} variant={"bodyStrong"}>
No default address set No default address set
</Text> </Text>
<Text as={"p"} size={"small"} marginBottom={4}> <Text as={"p"} size={"small"} marginBottom={1.5}>
Set default shop address or channel overrides Set default shop address or channel overrides
</Text> </Text>
<Text as={"p"} color={"textCriticalDefault"}> <Text as={"p"} color={"textCriticalDefault"}>

6
apps/invoices/src/modules/ui/AppSection.tsx
View file

@ -15,9 +15,9 @@ export const AppSection = ({
includePadding?: boolean; includePadding?: boolean;
}>) => { }>) => {
return ( return (
<Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={13} {...props}> <Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={10} {...props}>
<Box> <Box>
<Text as="h2" variant={"heading"} size={"large"} marginBottom={4}> <Text as="h2" variant={"heading"} size={"large"} marginBottom={1.5}>
{heading} {heading}
</Text> </Text>
{sideContent} {sideContent}
@ -26,7 +26,7 @@ export const AppSection = ({
borderStyle={"solid"} borderStyle={"solid"}
borderColor={"neutralPlain"} borderColor={"neutralPlain"}
borderWidth={1} borderWidth={1}
padding={includePadding ? 8 : 0} padding={includePadding ? 5 : 0}
borderRadius={4} borderRadius={4}
> >
{mainContent} {mainContent}

2
apps/invoices/src/pages/_app.tsx
View file

@ -49,7 +49,7 @@ function NextApp({ Component, pageProps: { session, ...pageProps } }: AppPropsWi
<ThemeProvider defaultTheme="defaultLight"> <ThemeProvider defaultTheme="defaultLight">
<ThemeSynchronizer /> <ThemeSynchronizer />
<RoutePropagator /> <RoutePropagator />
<Box padding={8} __maxWidth={1440}> <Box padding={5} __maxWidth={1440}>
<Component {...pageProps} /> <Component {...pageProps} />
</Box> </Box>
</ThemeProvider> </ThemeProvider>

2
apps/products-feed/package.json
View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "workspace:*", "@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*", "@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/react-hook-form-macaw": "workspace:*", "@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "^7.52.1", "@sentry/nextjs": "^7.52.1",
"@tanstack/react-query": "^4.24.2", "@tanstack/react-query": "^4.24.2",

13
apps/products-feed/src/modules/app-configuration/channels-config-accordion.tsx
View file

@ -41,10 +41,10 @@ const ChannelConfigForm = ({ channelSlug, ...props }: PropsWithBox<{ channelSlug
})} })}
as={"form"} as={"form"}
display={"grid"} display={"grid"}
gap={6} gap={3}
{...props} {...props}
> >
<Text variant={"heading"} as={"h2"} marginBottom={4}> <Text variant={"heading"} as={"h2"} marginBottom={1.5}>
Configure channel URLs Configure channel URLs
</Text> </Text>
<Input <Input
@ -80,7 +80,7 @@ export const ChannelsConfigAccordion = () => {
} }
return ( return (
<Accordion display={"grid"} gap={8}> <Accordion display={"grid"} gap={5}>
{data?.map((channel) => ( {data?.map((channel) => (
<Accordion.Item <Accordion.Item
key={channel.id} key={channel.id}
@ -88,15 +88,16 @@ export const ChannelsConfigAccordion = () => {
borderColor={"neutralHighlight"} borderColor={"neutralHighlight"}
borderWidth={1} borderWidth={1}
borderBottomStyle={"solid"} borderBottomStyle={"solid"}
paddingBottom={8} paddingBottom={5}
> >
<Accordion.Trigger> <Accordion.Trigger>
<Text>{channel.name}</Text> <Text>{channel.name}</Text>
<Accordion.TriggerButton />
</Accordion.Trigger> </Accordion.Trigger>
<Accordion.Content> <Accordion.Content>
<ChannelConfigForm margin={8} channelSlug={channel.slug} /> <ChannelConfigForm margin={5} channelSlug={channel.slug} />
<Divider /> <Divider />
<FeedPreviewCard channelSlug={channel.slug} margin={8} marginTop={12} /> <FeedPreviewCard channelSlug={channel.slug} margin={5} marginTop={9} />
</Accordion.Content> </Accordion.Content>
</Accordion.Item> </Accordion.Item>
))} ))}

4
apps/products-feed/src/modules/app-configuration/feed-preview-card.tsx
View file

@ -22,7 +22,7 @@ export const FeedPreviewCard = ({ channelSlug, ...props }: PropsWithBox<FeedPrev
return ( return (
<Box {...props}> <Box {...props}>
<Text variant={"heading"} as={"h2"} marginBottom={4}> <Text variant={"heading"} as={"h2"} marginBottom={1.5}>
Test your feed Test your feed
</Text> </Text>
<Input <Input
@ -35,7 +35,7 @@ export const FeedPreviewCard = ({ channelSlug, ...props }: PropsWithBox<FeedPrev
/> />
<Box display={"flex"} justifyContent={"flex-end"}> <Box display={"flex"} justifyContent={"flex-end"}>
<Button variant="secondary" onClick={() => openUrlInNewTab(googleFeedUrl)} marginTop={6}> <Button variant="secondary" onClick={() => openUrlInNewTab(googleFeedUrl)} marginTop={3}>
Open feed in a new tab Open feed in a new tab
</Button> </Button>
</Box> </Box>

4
apps/products-feed/src/modules/app-configuration/s3-configuration-form.tsx
View file

@ -26,7 +26,7 @@ export const S3ConfigurationForm = (props: Props) => {
<Box <Box
as={"form"} as={"form"}
display={"flex"} display={"flex"}
gap={8} gap={5}
flexDirection={"column"} flexDirection={"column"}
onSubmit={handleSubmit((data) => { onSubmit={handleSubmit((data) => {
props.onSubmit(data); props.onSubmit(data);
@ -58,7 +58,7 @@ export const ConnectedS3ConfigurationForm = () => {
const { mutate } = trpcClient.appConfiguration.setS3BucketConfiguration.useMutation({ const { mutate } = trpcClient.appConfiguration.setS3BucketConfiguration.useMutation({
onSuccess() { onSuccess() {
notifySuccess("Success", "Updated S3 configration"); notifySuccess("Success", "Updated S3 configuration");
}, },
onError() { onError() {
notifyError("Error", "Failed to update, please refresh and try again"); notifyError("Error", "Failed to update, please refresh and try again");

2
apps/products-feed/src/modules/category-mapping/construct-category-breadcrumbs.tsx
View file

@ -11,7 +11,7 @@ export const CategoryBreadcrumbs = (props: { category: CategoryWithMappingFragme
const breadcrumbs = constructCategoryBreadcrumbs(props.category); const breadcrumbs = constructCategoryBreadcrumbs(props.category);
return ( return (
<Box display={"flex"} marginBottom={3}> <Box display={"flex"} marginBottom={1}>
{breadcrumbs.map((category, index) => { {breadcrumbs.map((category, index) => {
const isLast = index === breadcrumbs.length - 1; const isLast = index === breadcrumbs.length - 1;

2
apps/products-feed/src/modules/category-mapping/ui/category-mapping-form.tsx
View file

@ -52,7 +52,7 @@ export const CategoryMappingForm = ({
})} })}
> >
<CategoryBreadcrumbs category={category} /> <CategoryBreadcrumbs category={category} />
<Box display={"flex"} gap={8} __width={"100%"}> <Box display={"flex"} gap={5} __width={"100%"}>
<Controller <Controller
control={control} control={control}
name="googleCategoryId" name="googleCategoryId"

6
apps/products-feed/src/modules/category-mapping/ui/category-mapping-preview.tsx
View file

@ -25,7 +25,7 @@ export const CategoryMappingPreview = () => {
return ( return (
<Box> <Box>
<Text marginBottom={8} as={"h2"} variant={"heading"}> <Text marginBottom={5} as={"h2"} variant={"heading"}>
Mapped categories Mapped categories
</Text> </Text>
{categories! {categories!
@ -34,11 +34,11 @@ export const CategoryMappingPreview = () => {
return ( return (
<Box <Box
key={category.id} key={category.id}
marginBottom={4} marginBottom={1.5}
borderBottomStyle={"solid"} borderBottomStyle={"solid"}
borderColor={"neutralHighlight"} borderColor={"neutralHighlight"}
borderWidth={1} borderWidth={1}
paddingBottom={4} paddingBottom={1.5}
> >
<CategoryBreadcrumbs category={category} /> <CategoryBreadcrumbs category={category} />
<GoogleCategory categoryId={category.googleCategoryId!} /> <GoogleCategory categoryId={category.googleCategoryId!} />

2
apps/products-feed/src/modules/category-mapping/ui/category-mapping.tsx
View file

@ -18,7 +18,7 @@ export const CategoryMapping = () => {
return ( return (
<Box> <Box>
{categories!.map((category) => ( {categories!.map((category) => (
<CategoryMappingForm category={category} key={category.id} marginBottom={8} /> <CategoryMappingForm category={category} key={category.id} marginBottom={5} />
))} ))}
</Box> </Box>
); );

6
apps/products-feed/src/modules/ui/app-section.tsx
View file

@ -15,9 +15,9 @@ export const AppSection = ({
includePadding?: boolean; includePadding?: boolean;
}>) => { }>) => {
return ( return (
<Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={13} {...props}> <Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={10} {...props}>
<Box> <Box>
<Text as="h2" variant={"heading"} size={"large"} marginBottom={4}> <Text as="h2" variant={"heading"} size={"large"} marginBottom={1.5}>
{heading} {heading}
</Text> </Text>
{sideContent} {sideContent}
@ -26,7 +26,7 @@ export const AppSection = ({
borderStyle={"solid"} borderStyle={"solid"}
borderColor={"neutralPlain"} borderColor={"neutralPlain"}
borderWidth={1} borderWidth={1}
padding={includePadding ? 8 : 0} padding={includePadding ? 5 : 0}
borderRadius={4} borderRadius={4}
> >
{mainContent} {mainContent}

2
apps/products-feed/src/modules/ui/paragraph.tsx
View file

@ -1,3 +1,3 @@
import { Text, TextProps } from "@saleor/macaw-ui/next"; import { Text, TextProps } from "@saleor/macaw-ui/next";
export const Paragraph = (props: TextProps) => <Text as={"p"} marginBottom={4} {...props} />; export const Paragraph = (props: TextProps) => <Text as={"p"} marginBottom={1.5} {...props} />;

2
apps/products-feed/src/pages/_app.tsx
View file

@ -30,7 +30,7 @@ function NextApp({ Component, pageProps }: AppProps) {
<ThemeSynchronizer /> <ThemeSynchronizer />
<RoutePropagator /> <RoutePropagator />
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Box padding={13}> <Box padding={10}>
<Component {...pageProps} /> <Component {...pageProps} />
</Box> </Box>
</QueryClientProvider> </QueryClientProvider>

2
apps/products-feed/src/pages/categories.tsx
View file

@ -6,7 +6,7 @@ import { Box } from "@saleor/macaw-ui/next";
const CategoriesPage: NextPage = () => { const CategoriesPage: NextPage = () => {
return ( return (
<Box> <Box>
<Breadcrumbs marginBottom={8}> <Breadcrumbs marginBottom={5}>
<Breadcrumbs.Item href={"/"}>Configuration</Breadcrumbs.Item> <Breadcrumbs.Item href={"/"}>Configuration</Breadcrumbs.Item>
<Breadcrumbs.Item>Categories Mapping</Breadcrumbs.Item> <Breadcrumbs.Item>Categories Mapping</Breadcrumbs.Item>
</Breadcrumbs> </Breadcrumbs>

4
apps/products-feed/src/pages/configuration.tsx
View file

@ -18,7 +18,7 @@ const ConfigurationPage: NextPage = () => {
return ( return (
<Box> <Box>
<Box __marginBottom="100px"> <Box __marginBottom="100px">
<Text variant={"hero"} size={"medium"} as={"h1"} marginBottom={8}> <Text variant={"hero"} size={"medium"} as={"h1"} marginBottom={5}>
Configuration Configuration
</Text> </Text>
<Paragraph> <Paragraph>
@ -119,7 +119,7 @@ const ConfigurationPage: NextPage = () => {
<Box> <Box>
<CategoryMappingPreview /> <CategoryMappingPreview />
<Box display={"flex"} justifyContent={"flex-end"}> <Box display={"flex"} justifyContent={"flex-end"}>
<Button marginTop={8} onClick={() => push("/categories")}> <Button marginTop={5} onClick={() => push("/categories")}>
Map categories Map categories
</Button> </Button>
</Box> </Box>

2
apps/products-feed/src/pages/index.tsx
View file

@ -23,7 +23,7 @@ const IndexPage: NextPage = () => {
return ( return (
<div> <div>
<Text variant={"hero"} as={"h1"} marginBottom={8}> <Text variant={"hero"} as={"h1"} marginBottom={5}>
Saleor Product Feed Saleor Product Feed
</Text> </Text>
<Text as={"p"}>This is Saleor App that allows product feed generation</Text> <Text as={"p"}>This is Saleor App that allows product feed generation</Text>

2
apps/search/package.json
View file

@ -16,7 +16,7 @@
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "workspace:*", "@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*", "@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "^0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/react-hook-form-macaw": "workspace:*", "@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "^7.46.0", "@sentry/nextjs": "^7.46.0",
"@types/debug": "^4.1.7", "@types/debug": "^4.1.7",

12
apps/search/src/components/AlgoliaConfigurationForm.tsx
View file

@ -92,8 +92,8 @@ export const AlgoliaConfigurationForm = () => {
return ( return (
<Box> <Box>
<form onSubmit={onFormSubmit}> <form onSubmit={onFormSubmit}>
<Box padding={8}> <Box padding={5}>
<Box marginBottom={8}> <Box marginBottom={5}>
<Input <Input
control={control} control={control}
name="appId" name="appId"
@ -103,7 +103,7 @@ export const AlgoliaConfigurationForm = () => {
helperText="Usually 10 characters, e.g. XYZAAABB00" helperText="Usually 10 characters, e.g. XYZAAABB00"
/> />
</Box> </Box>
<Box marginBottom={8} key={"secret"} /* todo why is this "key" here? */> <Box marginBottom={5} key={"secret"} /* todo why is this "key" here? */>
<Input <Input
control={control} control={control}
name="secretKey" name="secretKey"
@ -124,7 +124,7 @@ export const AlgoliaConfigurationForm = () => {
/> />
{credentialsValidationError && ( {credentialsValidationError && (
<Box marginTop={8}> <Box marginTop={5}>
<Text color={"textCriticalDefault"}> <Text color={"textCriticalDefault"}>
Could not connect to Algolia. Please verify your credentials Could not connect to Algolia. Please verify your credentials
</Text> </Text>
@ -132,9 +132,9 @@ export const AlgoliaConfigurationForm = () => {
)} )}
</Box> </Box>
<Divider margin={0} marginTop={8} /> <Divider margin={0} marginTop={5} />
<Box paddingX={8} paddingY={6} display={"flex"} justifyContent={"flex-end"}> <Box paddingX={5} paddingY={3} display={"flex"} justifyContent={"flex-end"}>
<Button disabled={isFormDisabled} type="submit" variant="primary"> <Button disabled={isFormDisabled} type="submit" variant="primary">
{isFormDisabled ? "Loading..." : "Save"} {isFormDisabled ? "Loading..." : "Save"}
</Button> </Button>

6
apps/search/src/components/AppSection.tsx
View file

@ -15,9 +15,9 @@ export const AppSection = ({
includePadding?: boolean; includePadding?: boolean;
}>) => { }>) => {
return ( return (
<Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={13} {...props}> <Box as="section" __gridTemplateColumns={"400px auto"} display={"grid"} gap={10} {...props}>
<Box> <Box>
<Text as="h2" variant={"heading"} size={"large"} marginBottom={4}> <Text as="h2" variant={"heading"} size={"large"} marginBottom={1.5}>
{heading} {heading}
</Text> </Text>
{sideContent} {sideContent}
@ -26,7 +26,7 @@ export const AppSection = ({
borderStyle={"solid"} borderStyle={"solid"}
borderColor={"neutralPlain"} borderColor={"neutralPlain"}
borderWidth={1} borderWidth={1}
padding={includePadding ? 8 : 0} padding={includePadding ? 5 : 0}
borderRadius={4} borderRadius={4}
> >
{mainContent} {mainContent}

6
apps/search/src/components/ImportProductsToAlgolia.tsx
View file

@ -66,13 +66,13 @@ export const ImportProductsToAlgolia = () => {
<Box __cursor={started ? "wait" : "auto"}> <Box __cursor={started ? "wait" : "auto"}>
{searchProvider && algoliaConfigured ? ( {searchProvider && algoliaConfigured ? (
<Box> <Box>
<Text variant={"heading"} as={"p"} marginBottom={4}> <Text variant={"heading"} as={"p"} marginBottom={1.5}>
Importing products & variants Importing products & variants
</Text> </Text>
<Text as={"p"}> <Text as={"p"}>
Trigger initial indexing for products catalogue. It can take few minutes.{" "} Trigger initial indexing for products catalogue. It can take few minutes.{" "}
</Text> </Text>
<Text marginBottom={8} variant={"bodyStrong"}> <Text marginBottom={5} variant={"bodyStrong"}>
Do not close the app - its running client-side Do not close the app - its running client-side
</Text> </Text>
<Box display={"flex"} justifyContent={"flex-end"}> <Box display={"flex"} justifyContent={"flex-end"}>
@ -83,7 +83,7 @@ export const ImportProductsToAlgolia = () => {
</Box> </Box>
) : ( ) : (
<Box> <Box>
<Text variant={"heading"} as={"p"} color={"textCriticalDefault"} marginBottom={4}> <Text variant={"heading"} as={"p"} color={"textCriticalDefault"} marginBottom={1.5}>
App not configured App not configured
</Text> </Text>
<Text>Configure Algolia first</Text> <Text>Configure Algolia first</Text>

4
apps/search/src/components/MainInstructions.tsx
View file

@ -7,10 +7,10 @@ const SALEOR_EVENTS_DOCS_URL =
export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => { export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => {
return ( return (
<Box {...props}> <Box {...props}>
<Text as="p" marginBottom={4}> <Text as="p" marginBottom={1.5}>
To configure the App, fill in your Algolia settings to enable products indexing. To configure the App, fill in your Algolia settings to enable products indexing.
</Text> </Text>
<Text as="p" marginBottom={4}> <Text as="p" marginBottom={1.5}>
Once the App is configured, you will be able to perform initial index of your existing Once the App is configured, you will be able to perform initial index of your existing
Saleor database. Saleor database.
</Text> </Text>

25
apps/search/src/components/WebhooksStatus.tsx
View file

@ -12,10 +12,8 @@ export const WebhooksStatus = () => {
return ( return (
<Box> <Box>
<Accordion display={"grid"} gap={4}> <Accordion display={"grid"} gap={1.5}>
{webhooksData.map((webhook) => { {webhooksData.map((webhook) => {
const Trigger = webhook.isActive ? Box : Accordion.Trigger;
const failedEventDeliveries = webhook.eventDeliveries?.edges?.filter( const failedEventDeliveries = webhook.eventDeliveries?.edges?.filter(
(e) => e.node.status === EventDeliveryStatusEnum.Failed (e) => e.node.status === EventDeliveryStatusEnum.Failed
); );
@ -30,15 +28,11 @@ export const WebhooksStatus = () => {
borderColor={"neutralPlain"} borderColor={"neutralPlain"}
borderBottomWidth={1} borderBottomWidth={1}
> >
<Trigger paddingBottom={4}> <Accordion.Trigger paddingBottom={1.5}>
<Box <Box width={"100%"} display={"flex"} gap={2} alignItems={"center"}>
width={"100%"} <Text size={"small"} flexGrow="1">
display={"grid"} {webhook.asyncEvents[0].name}
gridTemplateColumns={2} </Text>
gap={4}
alignItems={"center"}
>
<Text size={"small"}>{webhook.asyncEvents[0].name}</Text>
{webhook.isActive ? ( {webhook.isActive ? (
<SemanticChip marginLeft={"auto"} size={"small"} variant={"success"}> <SemanticChip marginLeft={"auto"} size={"small"} variant={"success"}>
ACTIVE ACTIVE
@ -48,10 +42,11 @@ export const WebhooksStatus = () => {
DISABLED DISABLED
</SemanticChip> </SemanticChip>
)} )}
<Accordion.TriggerButton />
</Box> </Box>
</Trigger> </Accordion.Trigger>
<Accordion.Content> <Accordion.Content>
<Box marginY={6}> <Box marginY={3}>
<Text variant={"bodyStrong"}>Delivery attempts</Text> <Text variant={"bodyStrong"}>Delivery attempts</Text>
{!hasFailedDeliveries ? ( {!hasFailedDeliveries ? (
<Box> <Box>
@ -65,7 +60,7 @@ export const WebhooksStatus = () => {
<Box <Box
display={"grid"} display={"grid"}
gridTemplateColumns={3} gridTemplateColumns={3}
gap={3} gap={1}
key={attempt.node.id} key={attempt.node.id}
> >
<Text display={"block"} size={"small"}> <Text display={"block"} size={"small"}>

2
apps/search/src/components/WebhooksStatusInstructions.tsx
View file

@ -7,7 +7,7 @@ export const WebhooksStatusInstructions = () => {
if (webhooksData && webhooksData.some((w) => !w.isActive)) { if (webhooksData && webhooksData.some((w) => !w.isActive)) {
return ( return (
<> <>
<Text as={"p"} marginBottom={4}> <Text as={"p"} marginBottom={1.5}>
Check status of registered webhooks. Check status of registered webhooks.
</Text> </Text>
<Text as={"p"} color={"iconCriticalDefault"}> <Text as={"p"} color={"iconCriticalDefault"}>

2
apps/search/src/pages/_app.tsx
View file

@ -33,7 +33,7 @@ function NextApp({ Component, pageProps }: AppProps) {
<ThemeSynchronizer /> <ThemeSynchronizer />
<RoutePropagator /> <RoutePropagator />
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Box padding={13}> <Box padding={10}>
<Component {...pageProps} /> <Component {...pageProps} />
</Box> </Box>
</QueryClientProvider> </QueryClientProvider>

12
apps/search/src/views/configuration/configuration.view.tsx
View file

@ -2,7 +2,6 @@ import { Box, Text } from "@saleor/macaw-ui/next";
import { AppSection } from "../../components/AppSection"; import { AppSection } from "../../components/AppSection";
import { AlgoliaConfigurationForm } from "../../components/AlgoliaConfigurationForm"; import { AlgoliaConfigurationForm } from "../../components/AlgoliaConfigurationForm";
import { ImportProductsToAlgolia } from "../../components/ImportProductsToAlgolia"; import { ImportProductsToAlgolia } from "../../components/ImportProductsToAlgolia";
import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
import { WebhooksStatus } from "../../components/WebhooksStatus"; import { WebhooksStatus } from "../../components/WebhooksStatus";
import { MainInstructions } from "../../components/MainInstructions"; import { MainInstructions } from "../../components/MainInstructions";
import { WebhooksStatusInstructions } from "../../components/WebhooksStatusInstructions"; import { WebhooksStatusInstructions } from "../../components/WebhooksStatusInstructions";
@ -11,15 +10,14 @@ import { TextLink } from "@saleor/apps-ui";
const ALGOLIA_DASHBOARD_TOKENS_URL = "https://www.algolia.com/account/api-keys/all"; const ALGOLIA_DASHBOARD_TOKENS_URL = "https://www.algolia.com/account/api-keys/all";
export const ConfigurationView = () => { export const ConfigurationView = () => {
const { appBridge } = useAppBridge();
return ( return (
<Box display="flex" flexDirection="column" gap={10}>
<Box> <Box>
<Text variant={"hero"} size={"medium"} as={"h1"}> <Text variant={"hero"} size={"medium"} as={"h1"}>
Configuration Configuration
</Text> </Text>
<MainInstructions marginTop={4} __marginBottom={"100px"} /> <MainInstructions marginTop={1.5} />
</Box>
<AppSection <AppSection
includePadding includePadding
heading="Webhooks status" heading="Webhooks status"
@ -28,12 +26,11 @@ export const ConfigurationView = () => {
/> />
<AppSection <AppSection
marginTop={13}
heading="Algolia settings" heading="Algolia settings"
mainContent={<AlgoliaConfigurationForm />} mainContent={<AlgoliaConfigurationForm />}
sideContent={ sideContent={
<Box> <Box>
<Text as="p" marginBottom={4}> <Text as="p" marginBottom={1.5}>
Provide Algolia settings.{" "} Provide Algolia settings.{" "}
</Text> </Text>
<Text> <Text>
@ -47,7 +44,6 @@ export const ConfigurationView = () => {
/> />
<AppSection <AppSection
includePadding includePadding
marginTop={13}
heading="Index products" heading="Index products"
mainContent={<ImportProductsToAlgolia />} mainContent={<ImportProductsToAlgolia />}
sideContent={ sideContent={

2
packages/react-hook-form-macaw/package.json
View file

@ -12,7 +12,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.21.8", "@babel/core": "^7.21.8",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@storybook/addon-actions": "^7.0.12", "@storybook/addon-actions": "^7.0.12",
"@storybook/addon-essentials": "^7.0.12", "@storybook/addon-essentials": "^7.0.12",
"@storybook/addon-interactions": "^7.0.12", "@storybook/addon-interactions": "^7.0.12",

2
packages/ui/package.json
View file

@ -10,7 +10,7 @@
}, },
"devDependencies": { "devDependencies": {
"@saleor/app-sdk": "0.39.1", "@saleor/app-sdk": "0.39.1",
"@saleor/macaw-ui": "0.8.0-pre.84", "@saleor/macaw-ui": "0.8.0-pre.95",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"eslint-config-saleor": "workspace:*", "eslint-config-saleor": "workspace:*",

36
pnpm-lock.yaml
View file

@ -177,8 +177,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/shared version: link:../../packages/shared
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
'@sentry/nextjs': '@sentry/nextjs':
specifier: ^7.52.1 specifier: ^7.52.1
version: 7.52.1(next@13.3.0)(react@18.2.0) version: 7.52.1(next@13.3.0)(react@18.2.0)
@ -461,8 +461,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/ui version: link:../../packages/ui
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
'@saleor/react-hook-form-macaw': '@saleor/react-hook-form-macaw':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/react-hook-form-macaw version: link:../../packages/react-hook-form-macaw
@ -636,8 +636,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/shared version: link:../../packages/shared
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
'@sentry/nextjs': '@sentry/nextjs':
specifier: ^7.36.0 specifier: ^7.36.0
version: 7.36.0(next@13.3.0)(react@18.2.0) version: 7.36.0(next@13.3.0)(react@18.2.0)
@ -1029,8 +1029,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/ui version: link:../../packages/ui
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
'@saleor/react-hook-form-macaw': '@saleor/react-hook-form-macaw':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/react-hook-form-macaw version: link:../../packages/react-hook-form-macaw
@ -1180,8 +1180,8 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../packages/ui version: link:../../packages/ui
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: ^0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
'@saleor/react-hook-form-macaw': '@saleor/react-hook-form-macaw':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/react-hook-form-macaw version: link:../../packages/react-hook-form-macaw
@ -1619,8 +1619,8 @@ importers:
specifier: ^7.21.8 specifier: ^7.21.8
version: 7.21.8 version: 7.21.8
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
'@storybook/addon-actions': '@storybook/addon-actions':
specifier: ^7.0.12 specifier: ^7.0.12
version: 7.0.12(react-dom@18.2.0)(react@18.2.0) version: 7.0.12(react-dom@18.2.0)(react@18.2.0)
@ -1756,8 +1756,8 @@ importers:
specifier: 0.39.1 specifier: 0.39.1
version: 0.39.1(next@13.3.0)(react-dom@18.2.0)(react@18.2.0) version: 0.39.1(next@13.3.0)(react-dom@18.2.0)(react@18.2.0)
'@saleor/macaw-ui': '@saleor/macaw-ui':
specifier: 0.8.0-pre.84 specifier: 0.8.0-pre.95
version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0) version: 0.8.0-pre.95(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
'@types/react': '@types/react':
specifier: ^18.0.27 specifier: ^18.0.27
version: 18.0.38 version: 18.0.38
@ -7595,8 +7595,8 @@ packages:
transitivePeerDependencies: transitivePeerDependencies:
- '@types/react' - '@types/react'
/@saleor/macaw-ui@0.8.0-pre.84(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0): /@saleor/macaw-ui@0.8.0-pre.95(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-VkkMmr9wZhZHc/r0bP8PVbuDPc+tnhC4pKJMwW9fP4uhNcdTYkKUraPJUxXO6OYkxjyyQBzza3uY9d/7fw48gQ==} resolution: {integrity: sha512-9J8OZa7DPxhsmfvJ923msZ3cvpvF6SeaUO/y4Fm2PI283UBMiruHDlYASCcBSeCMnaMWkiWGGusaTWrwnkDAwQ==}
engines: {node: '>=16 <19', pnpm: '>=8'} engines: {node: '>=16 <19', pnpm: '>=8'}
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0
@ -7627,8 +7627,8 @@ packages:
- '@types/react' - '@types/react'
dev: false dev: false
/@saleor/macaw-ui@0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0): /@saleor/macaw-ui@0.8.0-pre.95(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-VkkMmr9wZhZHc/r0bP8PVbuDPc+tnhC4pKJMwW9fP4uhNcdTYkKUraPJUxXO6OYkxjyyQBzza3uY9d/7fw48gQ==} resolution: {integrity: sha512-9J8OZa7DPxhsmfvJ923msZ3cvpvF6SeaUO/y4Fm2PI283UBMiruHDlYASCcBSeCMnaMWkiWGGusaTWrwnkDAwQ==}
engines: {node: '>=16 <19', pnpm: '>=8'} engines: {node: '>=16 <19', pnpm: '>=8'}
peerDependencies: peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0