Pre-publish checkout-ui-extensions: brought over public packages, re-generated docs

package.json

@@ -61,6 +61,7 @@
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/experimental-utils": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
-    "typescript": "^4.1.0"
+    "typescript": "^4.1.0",
+    "@quilted/react-testing": "^0.3.7"
   }
 }

packages/checkout-ui-extensions-react/package.json

@@ -17,12 +17,11 @@
       "esnext": "./index.esnext",
       "import": "./index.mjs",
       "require": "./index.js"
-    },
-    "./": "./"
+    }
   },
   "dependencies": {
-    "@remote-ui/async-subscription": "^2.1.7",
-    "@remote-ui/react": "^4.3.0",
+    "@remote-ui/async-subscription": "^2.1.9",
+    "@remote-ui/react": "^4.5.0",
     "@shopify/checkout-ui-extensions": "^0.15.0",
     "@types/react": ">=17.0.0 <18.0.0"
   },
@@ -36,7 +35,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^5.5.3",
-    "@quilted/react-testing": "^0.3.7",
+    "@quilted/react-testing": "^0.4.10",
     "@types/faker": "^5.5.9",
     "react": "^17.0.0"
   }

packages/checkout-ui-extensions-react/src/components/Banner/Banner.ts

@@ -1,4 +1,9 @@
 import {Banner as BaseBanner} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type BannerProps = ReactPropsFromRemoteComponentType<typeof BaseBanner>;
 
 export const Banner = createRemoteReactComponent(BaseBanner);

packages/checkout-ui-extensions-react/src/components/Banner/index.ts

@@ -1 +1,2 @@
 export {Banner} from './Banner';
+export type {BannerProps} from './Banner';

packages/checkout-ui-extensions-react/src/components/BlockLayout/BlockLayout.ts

@@ -1,4 +1,11 @@
 import {BlockLayout as BaseBlockLayout} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type BlockLayoutProps = ReactPropsFromRemoteComponentType<
+  typeof BaseBlockLayout
+>;
 
 export const BlockLayout = createRemoteReactComponent(BaseBlockLayout);

packages/checkout-ui-extensions-react/src/components/BlockLayout/examples/basic-blocklayout.example.tsx

@@ -4,12 +4,12 @@ render('Checkout::Dynamic::Render', () => <App />);
 
 function App() {
   return (
-    <BlockLayout rows={['auto', '200px']}>
+    <BlockLayout rows={['auto', 200]}>
       <View border="base" padding="base">
-        View
+        auto
       </View>
       <View border="base" padding="base">
-        View
+        200
       </View>
     </BlockLayout>
   );

packages/checkout-ui-extensions-react/src/components/BlockLayout/index.ts

@@ -1 +1,2 @@
 export {BlockLayout} from './BlockLayout';
+export type {BlockLayoutProps} from './BlockLayout';

packages/checkout-ui-extensions-react/src/components/BlockSpacer/BlockSpacer.ts

@@ -1,4 +1,11 @@
 import {BlockSpacer as BaseBlockSpacer} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type BlockSpacerProps = ReactPropsFromRemoteComponentType<
+  typeof BaseBlockSpacer
+>;
 
 export const BlockSpacer = createRemoteReactComponent(BaseBlockSpacer);

packages/checkout-ui-extensions-react/src/components/BlockSpacer/index.ts

@@ -1 +1,2 @@
 export {BlockSpacer} from './BlockSpacer';
+export type {BlockSpacerProps} from './BlockSpacer';

packages/checkout-ui-extensions-react/src/components/BlockStack/BlockStack.ts

@@ -1,4 +1,11 @@
 import {BlockStack as BaseBlockStack} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type BlockStackProps = ReactPropsFromRemoteComponentType<
+  typeof BaseBlockStack
+>;
 
 export const BlockStack = createRemoteReactComponent(BaseBlockStack);

packages/checkout-ui-extensions-react/src/components/BlockStack/index.ts

@@ -1 +1,2 @@
 export {BlockStack} from './BlockStack';
+export type {BlockStackProps} from './BlockStack';

packages/checkout-ui-extensions-react/src/components/Button/Button.ts

@@ -1,4 +1,9 @@
 import {Button as BaseButton} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type ButtonProps = ReactPropsFromRemoteComponentType<typeof BaseButton>;
 
 export const Button = createRemoteReactComponent(BaseButton);

packages/checkout-ui-extensions-react/src/components/Button/index.ts

@@ -1 +1,2 @@
 export {Button} from './Button';
+export type {ButtonProps} from './Button';

packages/checkout-ui-extensions-react/src/components/CalloutBanner/CalloutBanner.ts

@@ -1,4 +1,11 @@
 import {CalloutBanner as BaseCalloutBanner} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type CalloutBannerProps = ReactPropsFromRemoteComponentType<
+  typeof BaseCalloutBanner
+>;
 
 export const CalloutBanner = createRemoteReactComponent(BaseCalloutBanner);

packages/checkout-ui-extensions-react/src/components/CalloutBanner/index.ts

@@ -1 +1,2 @@
 export {CalloutBanner} from './CalloutBanner';
+export type {CalloutBannerProps} from './CalloutBanner';

packages/checkout-ui-extensions-react/src/components/Checkbox/Checkbox.ts

@@ -1,4 +1,11 @@
 import {Checkbox as BaseCheckbox} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type CheckboxProps = ReactPropsFromRemoteComponentType<
+  typeof BaseCheckbox
+>;
 
 export const Checkbox = createRemoteReactComponent(BaseCheckbox);

packages/checkout-ui-extensions-react/src/components/Checkbox/index.ts

@@ -1 +1,2 @@
 export {Checkbox} from './Checkbox';
+export type {CheckboxProps} from './Checkbox';

packages/checkout-ui-extensions-react/src/components/Choice/Choice.ts

@@ -1,4 +1,9 @@
 import {Choice as BaseChoice} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type ChoiceProps = ReactPropsFromRemoteComponentType<typeof BaseChoice>;
 
 export const Choice = createRemoteReactComponent(BaseChoice);

packages/checkout-ui-extensions-react/src/components/Choice/index.ts

@@ -1 +1,2 @@
 export {Choice} from './Choice';
+export type {ChoiceProps} from './Choice';

packages/checkout-ui-extensions-react/src/components/ChoiceList/index.ts

@@ -1 +1,2 @@
 export {ChoiceList} from './ChoiceList';
+export type {ChoiceListProps} from '@shopify/checkout-ui-extensions';

packages/checkout-ui-extensions-react/src/components/Divider/Divider.ts

@@ -1,4 +1,11 @@
 import {Divider as BaseDivider} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type DividerProps = ReactPropsFromRemoteComponentType<
+  typeof BaseDivider
+>;
 
 export const Divider = createRemoteReactComponent(BaseDivider);

packages/checkout-ui-extensions-react/src/components/Divider/index.ts

@@ -1 +1,2 @@
 export {Divider} from './Divider';
+export type {DividerProps} from './Divider';

packages/checkout-ui-extensions-react/src/components/Form/Form.ts

@@ -1,4 +1,9 @@
 import {Form as BaseForm} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type FormProps = ReactPropsFromRemoteComponentType<typeof BaseForm>;
 
 export const Form = createRemoteReactComponent(BaseForm);

packages/checkout-ui-extensions-react/src/components/Form/index.ts

@@ -1 +1,2 @@
 export {Form} from './Form';
+export type {FormProps} from './Form';

packages/checkout-ui-extensions-react/src/components/Grid/Grid.ts

@@ -1,4 +1,9 @@
 import {Grid as BaseGrid} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type GridProps = ReactPropsFromRemoteComponentType<typeof BaseGrid>;
 
 export const Grid = createRemoteReactComponent(BaseGrid);

packages/checkout-ui-extensions-react/src/components/Grid/examples/basic-grid.example.tsx

@@ -4,24 +4,24 @@ render('Checkout::Dynamic::Render', () => <App />);
 
 function App() {
   return (
-    <Grid columns={['20%', 'fill']} rows={['auto', '300px', '100px']}>
+    <Grid columns={['20%', 'fill']} rows={['auto', 300, 100]}>
       <View border="base" padding="base">
         20% / auto
       </View>
       <View border="base" padding="base">
         fill / auto
       </View>
       <View border="base" padding="base">
-        20% / 300px
+        20% / 300
       </View>
       <View border="base" padding="base">
-        fill / 300px
+        fill / 300
       </View>
       <View border="base" padding="base">
-        20% / 100px
+        20% / 100
       </View>
       <View border="base" padding="base">
-        fill / 100px
+        fill / 100
       </View>
     </Grid>
   );

packages/checkout-ui-extensions-react/src/components/Grid/index.ts

@@ -1 +1,2 @@
 export {Grid} from './Grid';
+export type {GridProps} from './Grid';

packages/checkout-ui-extensions-react/src/components/GridItem/GridItem.ts

@@ -1,4 +1,11 @@
 import {GridItem as BaseGridItem} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type GridItemProps = ReactPropsFromRemoteComponentType<
+  typeof BaseGridItem
+>;
 
 export const GridItem = createRemoteReactComponent(BaseGridItem);

packages/checkout-ui-extensions-react/src/components/GridItem/index.ts

@@ -1 +1,2 @@
 export {GridItem} from './GridItem';
+export type {GridItemProps} from './GridItem';

packages/checkout-ui-extensions-react/src/components/Heading/Heading.ts

@@ -1,4 +1,11 @@
 import {Heading as BaseHeading} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type HeadingProps = ReactPropsFromRemoteComponentType<
+  typeof BaseHeading
+>;
 
 export const Heading = createRemoteReactComponent(BaseHeading);

packages/checkout-ui-extensions-react/src/components/Heading/index.ts

@@ -1 +1,2 @@
 export {Heading} from './Heading';
+export type {HeadingProps} from './Heading';

packages/checkout-ui-extensions-react/src/components/HeadingGroup/HeadingGroup.ts

@@ -1,4 +1,11 @@
 import {HeadingGroup as BaseHeadingGroup} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type HeadingGroupProps = ReactPropsFromRemoteComponentType<
+  typeof BaseHeadingGroup
+>;
 
 export const HeadingGroup = createRemoteReactComponent(BaseHeadingGroup);

packages/checkout-ui-extensions-react/src/components/HeadingGroup/index.ts

@@ -1 +1,2 @@
 export {HeadingGroup} from './HeadingGroup';
+export type {HeadingGroupProps} from './HeadingGroup';

packages/checkout-ui-extensions-react/src/components/Icon/Icon.ts

@@ -1,4 +1,9 @@
 import {Icon as BaseIcon} from '@shopify/checkout-ui-extensions';
-import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export type IconProps = ReactPropsFromRemoteComponentType<typeof BaseIcon>;
 
 export const Icon = createRemoteReactComponent(BaseIcon);

packages/checkout-ui-extensions-react/src/components/Icon/index.ts

@@ -1 +1,2 @@
 export {Icon} from './Icon';
+export type {IconProps} from './Icon';