Update macaw-ui version (#541)

* 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

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

View file

@ -15,7 +15,7 @@
"@mailchimp/mailchimp_marketing": "^3.0.80",
"@saleor/app-sdk": "0.39.1",
"@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",
"@tanstack/react-query": "^4.28.0",
"@trpc/client": "^10.18.0",

View file

@ -13,7 +13,7 @@ export const MailchimpAuthSection = () => {
return (
<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.
</Text>
<form method="POST" action="/api/auth/mailchimp/oauth">

View file

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

View file

@ -5,10 +5,10 @@ import { useLocalStorage } from "usehooks-ts";
import { TextLink } from "../../../ui/text-link/text-link";
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) => (
<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/") =>
@ -30,7 +30,7 @@ export const Instructions = (props: PropsWithBox<{}>) => {
justifyContent="space-between"
onClick={() => setInstructionsVisible((v) => !v)}
>
<Text as="h1" variant="title" size="small" marginBottom={12}>
<Text as="h1" variant="title" size="small" marginBottom={9}>
Instructions
</Text>
<Button

View file

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

View file

@ -18,7 +18,7 @@ export const RemoveMailchimpConfig = (props: ComponentProps<typeof Box>) => {
<Text color="textCriticalDefault" variant="title" size="small">
Remove configuration
</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
connect it again. <br />
It will not disconnect CRM App in Mailchimp - you can do it in the{" "}

View file

@ -99,20 +99,20 @@ export const WebhookConfiguration = (props: ComponentProps<typeof Box>) => {
return (
<Section {...props}>
<Text as="h1" variant="title" size="small" marginBottom={4}>
<Text as="h1" variant="title" size="small" marginBottom={1.5}>
Configure webhooks
</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
</Text>
<Box display="flex" gap={4} flexDirection="column">
<Box display="flex" gap={1.5} flexDirection="column">
<Checkbox onCheckedChange={handleCheckboxChange} checked={localState.selected}>
<Text marginRight="auto">Enable customers sync</Text>
</Checkbox>
<Box display="flex" alignItems="center">
<Text
color={localState?.selected ? "textNeutralDefault" : "textNeutralDisabled"}
marginRight={4}
marginRight={1.5}
variant="caption"
>
Sync to the Mailchimp list:
@ -131,7 +131,7 @@ export const WebhookConfiguration = (props: ComponentProps<typeof 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}>
{webhookConfigMutation.isLoading ? "Saving..." : "Save"}
</Button>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "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:*",
"@sendgrid/client": "^7.7.0",
"@sendgrid/mail": "^7.7.0",

View file

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

View file

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

View file

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

View file

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

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
label="API Key"
name="apiKey"

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
label="Configuration name"
control={control}

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 ? (
<Combobox
name="sender"

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
name="name"
label="Configuration name"

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
label="Host"
helperText="Server host that will be connected."

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
label="Email"
name="senderEmail"

View file

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

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
name="name"
control={control}

View file

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

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
control={control}
name="name"

View file

@ -15,7 +15,7 @@
"@hookform/resolvers": "^3.1.0",
"@saleor/app-sdk": "0.39.1",
"@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",
"@tanstack/react-query": "^4.24.4",
"@trpc/client": "^10.10.0",

View file

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

View file

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

View file

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

View file

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

View file

@ -8,7 +8,7 @@ const Wrapper = ({ children }: PropsWithChildren<{}>) => {
return (
<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>
<Button
size={"small"}
@ -35,7 +35,7 @@ export const DefaultShopAddress = () => {
if (error) {
return (
<Wrapper>
<Text marginBottom={4} color={"textCriticalDefault"}>
<Text marginBottom={1.5} color={"textCriticalDefault"}>
Error while fetching shop address
</Text>
<Button onClick={() => refetch()}>Fetch again</Button>
@ -57,7 +57,7 @@ export const DefaultShopAddress = () => {
<Text as={"p"} variant={"bodyStrong"}>
No default address set
</Text>
<Text as={"p"} size={"small"} marginBottom={4}>
<Text as={"p"} size={"small"} marginBottom={1.5}>
Set default shop address or channel overrides
</Text>
<Text as={"p"} color={"textCriticalDefault"}>

View file

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

View file

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

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "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:*",
"@sentry/nextjs": "^7.52.1",
"@tanstack/react-query": "^4.24.2",

View file

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

View file

@ -22,7 +22,7 @@ export const FeedPreviewCard = ({ channelSlug, ...props }: PropsWithBox<FeedPrev
return (
<Box {...props}>
<Text variant={"heading"} as={"h2"} marginBottom={4}>
<Text variant={"heading"} as={"h2"} marginBottom={1.5}>
Test your feed
</Text>
<Input
@ -35,7 +35,7 @@ export const FeedPreviewCard = ({ channelSlug, ...props }: PropsWithBox<FeedPrev
/>
<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
</Button>
</Box>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,3 +1,3 @@
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} />;

View file

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

View file

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

View file

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

View file

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

View file

@ -16,7 +16,7 @@
"@saleor/app-sdk": "0.39.1",
"@saleor/apps-shared": "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:*",
"@sentry/nextjs": "^7.46.0",
"@types/debug": "^4.1.7",

View file

@ -92,8 +92,8 @@ export const AlgoliaConfigurationForm = () => {
return (
<Box>
<form onSubmit={onFormSubmit}>
<Box padding={8}>
<Box marginBottom={8}>
<Box padding={5}>
<Box marginBottom={5}>
<Input
control={control}
name="appId"
@ -103,7 +103,7 @@ export const AlgoliaConfigurationForm = () => {
helperText="Usually 10 characters, e.g. XYZAAABB00"
/>
</Box>
<Box marginBottom={8} key={"secret"} /* todo why is this "key" here? */>
<Box marginBottom={5} key={"secret"} /* todo why is this "key" here? */>
<Input
control={control}
name="secretKey"
@ -124,7 +124,7 @@ export const AlgoliaConfigurationForm = () => {
/>
{credentialsValidationError && (
<Box marginTop={8}>
<Box marginTop={5}>
<Text color={"textCriticalDefault"}>
Could not connect to Algolia. Please verify your credentials
</Text>
@ -132,9 +132,9 @@ export const AlgoliaConfigurationForm = () => {
)}
</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">
{isFormDisabled ? "Loading..." : "Save"}
</Button>

View file

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

View file

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

View file

@ -7,10 +7,10 @@ const SALEOR_EVENTS_DOCS_URL =
export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => {
return (
<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.
</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
Saleor database.
</Text>

View file

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

View file

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

View file

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

View file

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

View file

@ -12,7 +12,7 @@
},
"devDependencies": {
"@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-essentials": "^7.0.12",
"@storybook/addon-interactions": "^7.0.12",

View file

@ -10,7 +10,7 @@
},
"devDependencies": {
"@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-dom": "^18.0.10",
"eslint-config-saleor": "workspace:*",

View file

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