diff --git a/.changeset/bright-ladybugs-guess.md b/.changeset/bright-ladybugs-guess.md new file mode 100644 index 0000000..1f7f7b5 --- /dev/null +++ b/.changeset/bright-ladybugs-guess.md @@ -0,0 +1,5 @@ +--- +"saleor-app-emails-and-messages": patch +--- + +Fixed badly aligned Toggles. Now icon and label are centered diff --git a/.changeset/lucky-islands-love.md b/.changeset/lucky-islands-love.md new file mode 100644 index 0000000..d06351b --- /dev/null +++ b/.changeset/lucky-islands-love.md @@ -0,0 +1,17 @@ +--- +"@saleor/react-hook-form-macaw": patch +"saleor-app-emails-and-messages": patch +"saleor-app-data-importer": patch +"saleor-app-products-feed": patch +"@saleor/apps-shared": patch +"saleor-app-invoices": patch +"saleor-app-klaviyo": patch +"saleor-app-cms-v2": patch +"saleor-app-search": patch +"@saleor/apps-ui": patch +"saleor-app-slack": patch +"saleor-app-taxes": patch +"saleor-app-crm": patch +--- + +Updated Macaw UI to pre-106 diff --git a/.changeset/stale-readers-smash.md b/.changeset/stale-readers-smash.md new file mode 100644 index 0000000..9b578a6 --- /dev/null +++ b/.changeset/stale-readers-smash.md @@ -0,0 +1,5 @@ +--- +"@saleor/react-hook-form-macaw": patch +--- + +Updated Macaw UI bindings to reflect breaking changes in Select APIs diff --git a/apps/cms-v2/package.json b/apps/cms-v2/package.json index f4c0d09..5b57260 100644 --- a/apps/cms-v2/package.json +++ b/apps/cms-v2/package.json @@ -17,7 +17,7 @@ "@saleor/app-sdk": "0.41.1", "@saleor/apps-shared": "workspace:*", "@saleor/apps-ui": "workspace:*", - "@saleor/macaw-ui": "0.8.0-pre.95", + "@saleor/macaw-ui": "0.8.0-pre.106", "@saleor/react-hook-form-macaw": "workspace:*", "@sentry/nextjs": "7.55.2", "@tanstack/react-query": "^4.29.19", diff --git a/apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx b/apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx index 5f31c66..2a3096d 100644 --- a/apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx +++ b/apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx @@ -57,10 +57,12 @@ export const AddConnectionForm = (props: { control={control} name="channelSlug" label="Channel" - options={channels?.map((c) => ({ - value: c.slug, - label: c.name, - }))} + options={ + channels?.map((c) => ({ + value: c.slug, + label: c.name, + })) ?? [] + } /> changeValue(String(value))} options={[ diff --git a/apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx b/apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx index d27b0d0..e364be8 100644 --- a/apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx +++ b/apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx @@ -1,9 +1,9 @@ -import { Select } from "@saleor/macaw-ui/next"; import React from "react"; import { trpcClient } from "../../trpc/trpc-client"; import { Table } from "../../ui/table"; import { ChannelConfig } from "../channel-config"; import { useDashboardNotification } from "@saleor/apps-shared"; +import { Select } from "../../ui/_select"; const SelectProvider = (channelConfig: ChannelConfig) => { const { @@ -33,7 +33,7 @@ const SelectProvider = (channelConfig: ChannelConfig) => { return ( changeValue(String(value))} options={[ diff --git a/apps/taxes/src/modules/ui/_select.tsx b/apps/taxes/src/modules/ui/_select.tsx index 33219db..7150ebe 100644 --- a/apps/taxes/src/modules/ui/_select.tsx +++ b/apps/taxes/src/modules/ui/_select.tsx @@ -1,17 +1,24 @@ import { Select as _Select } from "@saleor/macaw-ui/next"; -type SelectProps = React.ComponentProps; +type SelectProps = Omit, "value" | "onChange"> & { + value: string | null; + onChange: (value: string) => void; +}; /** * The macaw-ui Select doesn't truncate the label text, so we need to override it. * @see: https://github.com/saleor/macaw-ui/issues/477 + * + * TODO: Migrate to react-hook-form-macaw bindings package */ -export const Select = (props: SelectProps) => { +export const Select = ({ value, ...props }: SelectProps) => { return ( <_Select {...props} __whiteSpace={"preline"} __overflow={"hidden"} __textOverflow={"ellipsis"} + value={props.options.find((option) => option.value === value) ?? null} + onChange={(value) => props.onChange(value.value)} /> ); }; diff --git a/packages/react-hook-form-macaw/.storybook/main.ts b/packages/react-hook-form-macaw/.storybook/main.ts index 5782429..288782b 100644 --- a/packages/react-hook-form-macaw/.storybook/main.ts +++ b/packages/react-hook-form-macaw/.storybook/main.ts @@ -11,13 +11,14 @@ export default { name: "@storybook/react-vite", options: {}, }, - staticDirs: [ - { - from: "../public", - to: "/assets", - }, - "./public", - ], + // This causes a build error TODO: + // staticDirs: [ + // { + // from: "../public", + // to: "/assets", + // }, + // "./public", + // ], features: { storyStoreV7: true, }, diff --git a/packages/react-hook-form-macaw/package.json b/packages/react-hook-form-macaw/package.json index 2c3aab6..c5b6a5d 100644 --- a/packages/react-hook-form-macaw/package.json +++ b/packages/react-hook-form-macaw/package.json @@ -12,7 +12,7 @@ }, "devDependencies": { "@babel/core": "^7.21.8", - "@saleor/macaw-ui": "0.8.0-pre.95", + "@saleor/macaw-ui": "0.8.0-pre.106", "@storybook/addon-actions": "^7.0.12", "@storybook/addon-essentials": "^7.0.12", "@storybook/addon-interactions": "^7.0.12", diff --git a/packages/react-hook-form-macaw/public/.gitkeep b/packages/react-hook-form-macaw/public/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/packages/react-hook-form-macaw/src/components/Combobox.stories.tsx b/packages/react-hook-form-macaw/src/components/Combobox.stories.tsx index 3ebdec7..bdc60b3 100644 --- a/packages/react-hook-form-macaw/src/components/Combobox.stories.tsx +++ b/packages/react-hook-form-macaw/src/components/Combobox.stories.tsx @@ -68,3 +68,10 @@ export const WithHelpText: Story = { helperText: "Helper text", }, }; + +export const NoValue: Story = { + ...ComboboxTemplate, + args: { + value: null, + }, +}; diff --git a/packages/react-hook-form-macaw/src/components/Combobox.tsx b/packages/react-hook-form-macaw/src/components/Combobox.tsx index eeaee63..df0b449 100644 --- a/packages/react-hook-form-macaw/src/components/Combobox.tsx +++ b/packages/react-hook-form-macaw/src/components/Combobox.tsx @@ -1,9 +1,14 @@ -import { Combobox as $Combobox, type ComboboxProps as $ComboboxProps } from "@saleor/macaw-ui/next"; +import { + Combobox as $Combobox, + type ComboboxProps as $ComboboxProps, + Option, +} from "@saleor/macaw-ui/next"; import { Control, Controller, FieldPath, FieldValues } from "react-hook-form"; -export type ComboboxProps = Omit<$ComboboxProps, "name"> & { +export type ComboboxProps = Omit<$ComboboxProps, "name"> & { name: FieldPath; control: Control; + options: Option[]; }; export function Combobox({ @@ -18,19 +23,24 @@ export function Combobox({ ( - <$Combobox - {...rest} - {...field} - options={options} - value={value || ""} - name={name} - required={required} - type={type} - error={!!error} - helperText={rest.helperText} - /> - )} + render={({ field: { value, onChange, ...field }, fieldState: { error } }) => { + return ( + <$Combobox + {...rest} + {...field} + options={options} + onChange={(option) => { + onChange(option.value); + }} + value={options.find((o: Option) => o.value === value) || null} + name={name} + required={required} + type={type} + error={!!error} + helperText={rest.helperText} + /> + ); + }} /> ); } diff --git a/packages/react-hook-form-macaw/src/components/Multiselect.tsx b/packages/react-hook-form-macaw/src/components/Multiselect.tsx index e477480..5cc2cad 100644 --- a/packages/react-hook-form-macaw/src/components/Multiselect.tsx +++ b/packages/react-hook-form-macaw/src/components/Multiselect.tsx @@ -1,15 +1,17 @@ import { Multiselect as $Multiselect, + Option, type MultiselectProps as $MultiselectProps, } from "@saleor/macaw-ui/next"; import { Control, Controller, FieldPath, FieldValues } from "react-hook-form"; export type MultiselectProps = Omit< - $MultiselectProps, + $MultiselectProps, "name" > & { name: FieldPath; control: Control; + options: Option[]; }; export function Multiselect({ @@ -24,12 +26,22 @@ export function Multiselect({ ( + render={({ field: { value, onChange, ...field }, fieldState: { error } }) => ( <$Multiselect {...rest} {...field} options={options} - value={value || []} + value={ + options.filter((o) => { + // TODO: Cant resolve array properly so casting needed + const v = (Array.isArray(value) ? value : [value]) as string[]; + + return v.includes(o.value); + }) || [] + } + onChange={(values) => { + onChange(values.map((v) => v.value)); + }} name={name} required={required} type={type} diff --git a/packages/react-hook-form-macaw/src/components/Select.stories.tsx b/packages/react-hook-form-macaw/src/components/Select.stories.tsx index 8200279..24583e5 100644 --- a/packages/react-hook-form-macaw/src/components/Select.stories.tsx +++ b/packages/react-hook-form-macaw/src/components/Select.stories.tsx @@ -68,3 +68,10 @@ export const WithHelpText: Story = { helperText: "Helper text", }, }; + +export const NoValue: Story = { + ...SelectTemplate, + args: { + value: null, + }, +}; diff --git a/packages/react-hook-form-macaw/src/components/Select.tsx b/packages/react-hook-form-macaw/src/components/Select.tsx index 3ed2e18..207101d 100644 --- a/packages/react-hook-form-macaw/src/components/Select.tsx +++ b/packages/react-hook-form-macaw/src/components/Select.tsx @@ -1,9 +1,16 @@ -import { Select as $Select, type SelectProps as $SelectProps } from "@saleor/macaw-ui/next"; +import { Select as $Select, type SelectProps as $SelectProps, Option } from "@saleor/macaw-ui/next"; import { Control, Controller, FieldPath, FieldValues } from "react-hook-form"; -export type SelectProps = Omit<$SelectProps, "name"> & { +export type SelectProps = Omit< + $SelectProps