diff --git a/.changeset/wet-laws-explain.md b/.changeset/wet-laws-explain.md new file mode 100644 index 0000000000..11413feed0 --- /dev/null +++ b/.changeset/wet-laws-explain.md @@ -0,0 +1,6 @@ +--- +'@shopify/ui-extensions-react': patch +'@shopify/ui-extensions': patch +--- + +Add new remote-dom components for Admin diff --git a/packages/ui-extensions-react/src/surfaces/admin.ts b/packages/ui-extensions-react/src/surfaces/admin.ts index 669f012748..4de9bdd9f3 100644 --- a/packages/ui-extensions-react/src/surfaces/admin.ts +++ b/packages/ui-extensions-react/src/surfaces/admin.ts @@ -1,5 +1,4 @@ export {extend, extension} from '@shopify/ui-extensions/admin'; -export * from './admin/components'; export * from './admin/hooks'; export {render, reactExtension} from './admin/render'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts deleted file mode 100644 index 258fbdddc4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components.ts +++ /dev/null @@ -1,85 +0,0 @@ -export {AdminAction} from './components/AdminAction/AdminAction'; -export type {AdminActionProps} from './components/AdminAction/AdminAction'; -export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction'; -export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction'; -export {AdminBlock} from './components/AdminBlock/AdminBlock'; -export type {AdminBlockProps} from './components/AdminBlock/AdminBlock'; -export {Badge} from './components/Badge/Badge'; -export type {BadgeProps} from './components/Badge/Badge'; -export {Banner} from './components/Banner/Banner'; -export type {BannerProps} from './components/Banner/Banner'; -export {BlockStack} from './components/BlockStack/BlockStack'; -export type {BlockStackProps} from './components/BlockStack/BlockStack'; -export {Box} from './components/Box/Box'; -export type {BoxProps} from './components/Box/Box'; -export {Button} from './components/Button/Button'; -export type {ButtonProps} from './components/Button/Button'; -export {Checkbox} from './components/Checkbox/Checkbox'; -export type {CheckboxProps} from './components/Checkbox/Checkbox'; -export {ChoiceList} from './components/ChoiceList/ChoiceList'; -export type {ChoiceListProps} from './components/ChoiceList/ChoiceList'; -export {ColorPicker} from './components/ColorPicker/ColorPicker'; -export type {ColorPickerProps} from './components/ColorPicker/ColorPicker'; -export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; -export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate'; -export {DatePicker} from './components/DatePicker/DatePicker'; -export type {DatePickerProps} from './components/DatePicker/DatePicker'; -export {DateField} from './components/DateField/DateField'; -export type {DateFieldProps} from './components/DateField/DateField'; -export {Divider} from './components/Divider/Divider'; -export type {DividerProps} from './components/Divider/Divider'; -export {EmailField} from './components/EmailField/EmailField'; -export type {EmailFieldProps} from './components/EmailField/EmailField'; -export {Form} from './components/Form/Form'; -export type {FormProps} from './components/Form/Form'; -export {FunctionSettings} from './components/FunctionSettings/FunctionSettings'; -export type { - FunctionSettingsProps, - FunctionSettingsError, -} from './components/FunctionSettings/FunctionSettings'; -export {Heading} from './components/Heading/Heading'; -export type {HeadingProps} from './components/Heading/Heading'; -export {HeadingGroup} from './components/HeadingGroup/HeadingGroup'; -export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup'; -export {Icon} from './components/Icon/Icon'; -export type {IconProps} from './components/Icon/Icon'; -export {Image} from './components/Image/Image'; -export type {ImageProps} from './components/Image/Image'; -export {InlineStack} from './components/InlineStack/InlineStack'; -export type {InlineStackProps} from './components/InlineStack/InlineStack'; -export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; -export type {InternalCustomerSegmentTemplateProps} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate'; -export {Link} from './components/Link/Link'; -export type {LinkProps} from './components/Link/Link'; -export {MoneyField} from './components/MoneyField/MoneyField'; -export type {MoneyFieldProps} from './components/MoneyField/MoneyField'; -export {NumberField} from './components/NumberField/NumberField'; -export type {NumberFieldProps} from './components/NumberField/NumberField'; -export {Paragraph} from './components/Paragraph/Paragraph'; -export type {ParagraphProps} from './components/Paragraph/Paragraph'; -export {PasswordField} from './components/PasswordField/PasswordField'; -export type {PasswordFieldProps} from './components/PasswordField/PasswordField'; -export {Pressable} from './components/Pressable/Pressable'; -export type {PressableProps} from './components/Pressable/Pressable'; -export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator'; -export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator'; -export {Section} from './components/Section/Section'; -export type {SectionProps} from './components/Section/Section'; -export {Select} from './components/Select/Select'; -export type { - OptionDescription, - OptionGroupDescription, - OptionGroupProps, - OptionProps, - SelectProps, -} from './components/Select/Select'; -export {Text} from './components/Text/Text'; -export type {TextProps} from './components/Text/Text'; -export {TextArea} from './components/TextArea/TextArea'; -export type {TextAreaProps} from './components/TextArea/TextArea'; -export {TextField} from './components/TextField/TextField'; -export type {TextFieldProps} from './components/TextField/TextField'; -export {URLField} from './components/URLField/URLField'; -export type {URLFieldProps} from './components/URLField/URLField'; -export {InternalLocationList} from './components/InternalLocationList/InternalLocationList'; -export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts deleted file mode 100644 index 7134a86e09..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/AdminAction.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {AdminActionProps} from '@shopify/ui-extensions/admin'; - -export const AdminAction = createRemoteComponent('ui-admin-action'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts deleted file mode 100644 index 69e548e094..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminBlock/AdminBlock.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {AdminBlockProps} from '@shopify/ui-extensions/admin'; - -export const AdminBlock = createRemoteComponent('ui-admin-block'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts b/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts deleted file mode 100644 index cfbd27f3ea..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {AdminPrintActionProps} from '@shopify/ui-extensions/admin'; - -export const AdminPrintAction = createRemoteComponent('ui-admin-print-action'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts deleted file mode 100644 index 051fc1ed8c..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/Badge.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {BadgeProps} from '@shopify/ui-extensions/admin'; - -export const Badge = createRemoteComponent('ui-badge'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx index 33dfa4e89d..319af1dfac 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Badge/examples/basic-badge.example.tsx @@ -1,13 +1,10 @@ -import {render, Badge} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Badge, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ( - - Fulfilled - - ); + return Fulfilled; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts deleted file mode 100644 index 728a34947a..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/Banner.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {BannerProps} from '@shopify/ui-extensions/admin'; - -export const Banner = createRemoteComponent('ui-banner'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx deleted file mode 100644 index 8db34382e4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Banner/examples/basic-banner.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - Banner, - Paragraph, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - console.log('dismissed banner')}> - Your store may be affected - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts deleted file mode 100644 index fb4d04559b..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/BlockStack.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {BlockStackProps} from '@shopify/ui-extensions/admin'; - -export const BlockStack = createRemoteComponent('ui-block-stack'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx deleted file mode 100644 index b2c2a1dab7..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/BlockStack/examples/basic-blockstack.example.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { - render, - BlockStack, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - <>Child 1 - <>Child 2 - <>Child 3 - <>Child 4 - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts deleted file mode 100644 index b5a8afb606..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/Box.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {BoxProps} from '@shopify/ui-extensions/admin'; - -export const Box = createRemoteComponent('ui-box'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx index 30be051844..18ee89ba8b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Box/examples/basic-box.example.tsx @@ -1,11 +1,10 @@ -import {render, Box} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Box, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ( - - Box - - ); + return Box; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts deleted file mode 100644 index 931634df80..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/Button.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ButtonProps} from '@shopify/ui-extensions/admin'; - -export const Button = createRemoteComponent('ui-button'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx index 93fcdd8f25..68b88bf041 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx @@ -1,6 +1,7 @@ -import {render, Button} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); +import { + reactExtension, + Button, +} from '@shopify/ui-extensions-react/admin'; function App() { return ( @@ -13,3 +14,8 @@ function App() { ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts deleted file mode 100644 index 0fc14909ac..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/Checkbox.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {CheckboxProps} from '@shopify/ui-extensions/admin'; - -export const Checkbox = createRemoteComponent('ui-checkbox'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx index 40644d7324..e068d63390 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Checkbox/examples/basic-checkbox.example.tsx @@ -1,6 +1,9 @@ -import {render, Checkbox} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Checkbox, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { return ( diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts deleted file mode 100644 index 4aa60d67b4..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/ChoiceList.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ChoiceListProps} from '@shopify/ui-extensions/admin'; - -export const ChoiceList = createRemoteComponent('ui-choice-list'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx deleted file mode 100644 index f34899efed..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ChoiceList/examples/basic-choicelist.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import {render, ChoiceList} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - ); -} \ No newline at end of file diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts deleted file mode 100644 index 375de0137a..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/ColorPicker.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ColorPickerProps} from '@shopify/ui-extensions/admin'; - -export const ColorPicker = createRemoteComponent('ui-color-picker'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx deleted file mode 100644 index bddc087269..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ColorPicker/examples/basic-colorpicker.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - render, - ColorPicker, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - { - console.log({value}); - }} - /> - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts deleted file mode 100644 index 8110f65782..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {CustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin'; - -export const CustomerSegmentTemplate = createRemoteComponent( - 'ui-customer-segment-template', -); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts deleted file mode 100644 index c56494551d..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/DateField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {DateFieldProps} from '@shopify/ui-extensions/admin'; - -export const DateField = createRemoteComponent('ui-date-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx deleted file mode 100644 index 13542e0195..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/basic-datefield.example.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { - render, - DateField, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = useState('2023-11-08') - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx deleted file mode 100644 index 3e2914e80d..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/multiple-datefield.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DateField, - type Selected, -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState(['2023-11-08']); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx deleted file mode 100644 index 8519b66dbb..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DateField/examples/range-datefield.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DateField, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState({start: '2023-11-08', end: '2023-11-10' }); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts deleted file mode 100644 index 21f3cdbfeb..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/DatePicker.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {DatePickerProps} from '@shopify/ui-extensions/admin'; - -export const DatePicker = createRemoteComponent('ui-date-picker'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx deleted file mode 100644 index 4f36fd9329..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/basic-datepicker.example.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -import { - render, - DatePicker, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = useState('2023-11-08') - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx deleted file mode 100644 index c5dbf58921..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/multiple-datepicker.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { - render, - DatePicker, - type Selected, -} from '@shopify/ui-extensions-react/admin'; - - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState(['2023-11-08']); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx deleted file mode 100644 index 209fe39f68..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/DatePicker/examples/range-datepicker.example.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { - render, - DatePicker, - type Selected -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - const [selected, setSelected] = React.useState({start: '2023-11-08', end: '2023-11-10' }); - - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts deleted file mode 100644 index a26fac0e38..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/Divider.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {DividerProps} from '@shopify/ui-extensions/admin'; - -export const Divider = createRemoteComponent('ui-divider'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx index 902ab9478f..dc5fe92ab9 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-divider.example.tsx @@ -1,18 +1,22 @@ import React from 'react'; import { - render, + reactExtension, Divider, - BlockStack, + Stack, + reactExtension, } from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); - function App() { return ( - + <>First text <>Second Text - + ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts deleted file mode 100644 index 6c3b7de33c..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/EmailField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {EmailFieldProps} from '@shopify/ui-extensions/admin'; - -export const EmailField = createRemoteComponent('ui-email-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx deleted file mode 100644 index 2b4cdff6bf..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, EmailField} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts deleted file mode 100644 index d62ad110e5..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/Form.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {FormProps} from '@shopify/ui-extensions/admin'; - -export const Form = createRemoteComponent('ui-form'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx deleted file mode 100644 index c6d445ed83..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { - reactExtension, - Form, - TextField, -} from '@shopify/ui-extensions-react/admin'; - -export default reactExtension("admin.product-details.block.render", () => ); - -function App() { - const [value, setValue] = useState(""); - const [error, setError] = useState(''); - - const onSubmit = useCallback( - async () => { - // API call to save the values - const res = await fetch('/save', {method:'POST', body: JSON.stringify({name: value})}); - if (!res.ok) { - const json = await res.json(); - const errors = json.errors.join(','); - setError(errors); - } - }, - [value] - ); - - const onReset = useCallback(async () => { - // Reset to initial value - setValue('') - // Clear errors - setError('') - }, []); - - const onInput = useCallback((nameValue) => { - if (!nameValue) { - setError("Please enter a name."); - } - }, []) - - // Field values can only be updated on change when using Remote UI. - const onChange = useCallback((nameValue) => { - setValue(nameValue); - }, []) - - - return ( -
- - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts b/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts deleted file mode 100644 index 4aadb0e056..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type { - FunctionSettingsProps, - FunctionSettingsError, -} from '@shopify/ui-extensions/admin'; - -export const FunctionSettings = createRemoteComponent('ui-functipo'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts deleted file mode 100644 index b6e6d73b61..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/Heading.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {HeadingProps} from '@shopify/ui-extensions/admin'; - -export const Heading = createRemoteComponent('ui-heading'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx index b03a114e76..67f1979fc1 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx @@ -1,6 +1,9 @@ -import {render, Heading} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Heading, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { return Store name; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts deleted file mode 100644 index 7f6f45c247..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/HeadingGroup.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {HeadingGroupProps} from '@shopify/ui-extensions/admin'; - -export const HeadingGroup = createRemoteComponent('ui-heading-group'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx deleted file mode 100644 index 7bcaef3901..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - render, - HeadingGroup, - Heading, - } from '@shopify/ui-extensions-react/admin'; - - render('Playground', () => ); - - function App() { - return ( - <> - Heading <h1> - - - Heading <h2> - - - Heading <h3> - - - - ); - } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts deleted file mode 100644 index c50233a7c3..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/Icon.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {IconProps} from '@shopify/ui-extensions/admin'; - -export const Icon = createRemoteComponent('ui-icon'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx index a3e8089a44..7ec7d6114b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx @@ -1,7 +1,10 @@ -import {render, Icon} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Icon, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { - return ; + return ; } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts deleted file mode 100644 index 82b47d2918..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/Image.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ImageProps} from '@shopify/ui-extensions/admin'; - -export const Image = createRemoteComponent('ui-image'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx index 43dc6f5ea5..bfea056f14 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx @@ -1,9 +1,18 @@ -import {render, Image} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); +import { + reactExtension, + Image, +} from '@shopify/ui-extensions-react/admin'; function App() { return ( - Pickaxe + Pickaxe ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts deleted file mode 100644 index 140cc12bf6..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/InlineStack.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {InlineStackProps} from '@shopify/ui-extensions/admin'; - -export const InlineStack = createRemoteComponent('ui-inline-stack'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts deleted file mode 100644 index 74b94026cd..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin'; - -export const InternalCustomerSegmentTemplate = createRemoteComponent( - 'ui-internal-customer-segment-template', -); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts deleted file mode 100644 index 557356e83e..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {InternalLocationListProps} from '@shopify/ui-extensions/admin'; - -export const InternalLocationList = createRemoteComponent( - 'ui-internal-location-list', -); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts deleted file mode 100644 index bda27989cb..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/Link.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {LinkProps} from '@shopify/ui-extensions/admin'; - -export const Link = createRemoteComponent('ui-link'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx index 73b437853c..6bc65d3e1b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/app-link.example.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { - render, + reactExtension, Link, } from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - function App() { return ( - - Link to app path - + Link to app path ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx index 0f4c6af283..764c09d70b 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/external-link.example.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { - render, + reactExtension, Link, } from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - function App() { return ( @@ -14,3 +11,8 @@ function App() { ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx index 822ae7bdc9..4b74a2750a 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/relative-link.example.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { - render, + reactExtension, Link, } from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - function App() { return ( @@ -14,3 +11,8 @@ function App() { ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx index f10a0e5ade..f73b37296e 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Link/examples/shopify-section-link.example.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { - render, + reactExtension, Link, } from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - function App() { return ( @@ -14,3 +11,8 @@ function App() { ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts deleted file mode 100644 index f176a02a64..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/MoneyField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {MoneyFieldProps} from '@shopify/ui-extensions/admin'; - -export const MoneyField = createRemoteComponent('ui-money-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx deleted file mode 100644 index bdd46cdcde..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/MoneyField/examples/basic-moneyfield.example.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {render, MoneyField} from '@shopify/ui-extensions-react/admin'; -import {useState} from 'react'; - -render('Playground', () => ); - -function App() { - const [value, setValue] = useState({ amount: 100, currencyCode: 'USD' }); - - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts deleted file mode 100644 index 3f44e86e6c..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/NumberField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {NumberFieldProps} from '@shopify/ui-extensions/admin'; - -export const NumberField = createRemoteComponent('ui-number-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx deleted file mode 100644 index 65dd16ea34..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, NumberField} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ; -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx new file mode 100644 index 0000000000..aaefd39e51 --- /dev/null +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Option/examples/basic-option.example.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + reactExtension, + Option, + Select, +} from '@shopify/ui-extensions-react/admin'; + +const options = [ + { + value: '1', + label: 'Australia', + }, + { + value: '2', + label: 'Canada', + }, + { + value: '3', + label: 'France', + }, + { + value: '4', + label: 'Japan', + }, + { + value: '5', + label: 'Nigeria', + }, + { + value: '6', + label: 'United States', + }, +]; + +function App() { + const [value, setValue] = React.useState('2'); + return ( + + ); +} + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts deleted file mode 100644 index d727b8839a..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/Paragraph.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ParagraphProps} from '@shopify/ui-extensions/admin'; - -export const Paragraph = createRemoteComponent('ui-paragraph'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx index 022b4c2db6..4a3c2c962a 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Paragraph/examples/basic-paragraph.example.tsx @@ -1,16 +1,26 @@ import { - render, - BlockStack, - Paragraph, + reactExtension, + Paragraph, + Stack, + Text, } from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); - function App() { - return ( - - Name: - Jane Doe - - ) + return ( + + + Name: + Jane Doe + + + ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts deleted file mode 100644 index 68f167a407..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/PasswordField.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {PasswordFieldProps} from '@shopify/ui-extensions/admin'; - -export const PasswordField = createRemoteComponent('ui-password-field'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx deleted file mode 100644 index a2ca1d62e7..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - render, - BlockStack, - TextField, - PasswordField -} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return ( - - - - - ) -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts deleted file mode 100644 index fcca37defb..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/Pressable.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {PressableProps} from '@shopify/ui-extensions/admin'; - -export const Pressable = createRemoteComponent('ui-pressable'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx deleted file mode 100644 index 67efde16b8..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Pressable/examples/basic-pressable.example.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - reactExtension, - Icon, - InlineStack, - Pressable, - Text, -} from '@shopify/ui-extensions-react/admin'; - -reactExtension('Playground', () => ); - -function Extension() { - return ( - - - Go to Apps Dashboard - - - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts deleted file mode 100644 index b10c177190..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin'; - -export const ProgressIndicator = createRemoteComponent('ui-progress-indicator'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx deleted file mode 100644 index 8b4968f5e9..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { - reactExtension, - ProgressIndicator, -} from '@shopify/ui-extensions-react/admin'; - -reactExtension('Playground', () => ); - -function App() { - return ( - - ); -} diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts deleted file mode 100644 index 6cc484c553..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/Section.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {SectionProps} from '@shopify/ui-extensions/admin'; - -export const Section = createRemoteComponent('ui-section'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-section.example.tsx similarity index 70% rename from packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx rename to packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-section.example.tsx index 45538063f5..9030c1e16f 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-Section.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Section/examples/basic-section.example.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { - render, + reactExtension, Section, } from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - function App() { return (
@@ -14,3 +11,8 @@ function App() {
); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts deleted file mode 100644 index 9f0b79f156..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/Select.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type { - SelectProps, - OptionDescription, - OptionGroupDescription, - OptionGroupProps, - OptionProps, -} from '@shopify/ui-extensions/admin'; - -export const Select = createRemoteComponent('ui-select'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx index f9cec98b9a..d28013aa63 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Select/examples/basic-select.example.tsx @@ -1,45 +1,56 @@ import React from 'react'; import { - render, + reactExtension, + Option, Select, } from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +const options = [ + { + value: '1', + label: 'Australia', + }, + { + value: '2', + label: 'Canada', + }, + { + value: '3', + label: 'France', + }, + { + value: '4', + label: 'Japan', + }, + { + value: '5', + label: 'Nigeria', + }, + { + value: '6', + label: 'United States', + }, +]; function App() { const [value, setValue] = React.useState('2'); - return ( ); } +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx similarity index 61% rename from packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx rename to packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx index d9fb203f83..e606b4cd8e 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/InlineStack/examples/basic-inlinestack.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Stack/examples/basic-stack.example.tsx @@ -1,18 +1,21 @@ import React from 'react'; import { - render, - InlineStack, + reactExtension, + Stack, } from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); - function App() { return ( - + <>Child 1 <>Child 2 <>Child 3 <>Child 4 - + ); } + +export default reactExtension( + 'Playground', + () => , +); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts b/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts deleted file mode 100644 index 8f040b4fce..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/Text.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {TextProps} from '@shopify/ui-extensions/admin'; - -export const Text = createRemoteComponent('ui-text'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx index eee51ee386..71aa4abfd3 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx @@ -1,12 +1,20 @@ -import {render, Text, BlockStack} from '@shopify/ui-extensions-react/admin'; +import { + reactExtension, + Text, + Stack, +} from '@shopify/ui-extensions-react/admin'; -render('Playground', () => ); +reactExtension('Playground', () => ); function App() { return ( - + Name: Jane Doe - + ); } diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts deleted file mode 100644 index a9f53e617f..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/TextArea.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createRemoteComponent} from '../util'; - -export type {TextAreaProps} from '@shopify/ui-extensions/admin'; - -export const TextArea = createRemoteComponent('ui-text-area'); diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx b/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx deleted file mode 100644 index d135155076..0000000000 --- a/packages/ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import {render, TextArea} from '@shopify/ui-extensions-react/admin'; - -render('Playground', () => ); - -function App() { - return