Cn x ship it cleanup

sample-extension-external-iframe/.eslintrc.js

@@ -10,10 +10,6 @@ module.exports = {
   parserOptions: { project: './tsconfig.json', tsconfigRootDir: __dirname },
   plugins: ['@typescript-eslint', 'react-hooks', 'jsx-a11y'],
   rules: {
-    // Temporary until we can import types from the SDK lib
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unsafe-member-access': 'off',
-
     'no-console': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/naming-convention': 'off',

sample-extension-external-iframe/config/global-dependencies/ub-shared.ts

@@ -1,4 +1,4 @@
-import type { Ub } from 'smart-builder-sdk';
+import type { Ub } from '@unbounce/smart-builder-sdk';
 
 declare global {
   interface ExtendedWindow {
@@ -13,8 +13,6 @@ declare global {
 }
 
 export const {
-  Schema,
-  component,
   section,
   registerComponent,
   registerSection,

sample-extension-external-iframe/manifest.ts

@@ -1,9 +1,9 @@
-import type { Manifest } from 'smart-builder-sdk';
+import type { Manifest } from '@unbounce/smart-builder-sdk';
 
 const manifest: Manifest = {
   appId: '@external/helloAgainWorld',
   version: '0.1',
-  type: 'enhancement',
+  type: 'utility',
   name: 'Hello World',
   isBeta: true,
   isSwappable: true,

sample-extension-external-iframe/package.json

@@ -58,7 +58,6 @@
     "eslint-plugin-unicorn": "^32.0.1",
     "express": "^4.17.1",
     "jest": "^27.3.1",
-    "msw": "^0.47.4",
     "nodemon": "3.0.1",
     "prettier": "^2.3.0",
     "svg-url-loader": "^7.1.1",
@@ -71,9 +70,9 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "semver": "^7.5.4",
-    "simple-update-notifier": "^2.0.0",
-    "smart-builder-sdk": "https://app-assets-unbounce-com.s3.amazonaws.com/content-smart-builder-apps/smart-builder-sdk/smart-builder-sdk-1.0.0-beta.90.tgz",
     "styled-components": "^5.3.3"
+  },
+  "dependencies": {
+    "@unbounce/smart-builder-sdk": "^1.0.136"
   }
 }

sample-extension-external-iframe/src/calendly/calendly-viewer.test.tsx

@@ -28,6 +28,7 @@ const renderCalendlyComponent = () => {
         },
       }}
       dispatch={mockFunction}
+      entityDispatch={jest.fn()}
       isSelected={false}
       entityId={''}
       mode={{

sample-extension-external-iframe/src/calendly/calendly-viewer.tsx

@@ -1,6 +1,6 @@
+import type { ComponentProps } from '@unbounce/smart-builder-sdk';
+import { Button, getAfterFormSubmitScript, Script } from '@unbounce/smart-builder-sdk';
 import React from 'react';
-import type { ComponentProps } from 'smart-builder-sdk';
-import { Button, getAfterFormSubmitScript, Script } from 'smart-builder-sdk';
 
 import manifest from '../../manifest';
 import { EmptyActions, EmptyState, StyledImage, Wrapper } from '../styled';

sample-extension-external-iframe/src/calendly/index.tsx

@@ -1,6 +1,5 @@
+import { ControlButton, Schema, WithControls, bundle } from '@unbounce/smart-builder-sdk';
 import React from 'react';
-import { ControlButton, WithControls } from 'smart-builder-sdk';
-import { component, Schema } from 'ub-shared';
 
 import { CalendlyControlComponent } from '../control';
 import { CogIcon } from '../icons/cog-icon';
@@ -19,14 +18,26 @@ const CalendlyComponentWithControls = WithControls(CalendlyViewer, [
   },
 ]);
 
-export const Component = component({
+const spacingSchema = {
+  paddingTop: { breakpointSpecific: true },
+  paddingBottom: { breakpointSpecific: true },
+  paddingLeft: { breakpointSpecific: true },
+  paddingRight: { breakpointSpecific: true },
+};
+
+export const Component = bundle({
   componentTypeId: 'helloAgainWorld',
   displayName: 'helloAgainWorld',
   schema: Schema.object({
     username: Schema.string(),
     height: Schema.number().default(580),
     trackConversion: Schema.formUrl(),
+    openContainerLayout: Schema.newStyle({
+      display: { breakpointSpecific: true },
+      width: { breakpointSpecific: true },
+      ...spacingSchema,
+    }).default({ width: 'auto' }),
   }),
   Component: CalendlyComponentWithControls,
-  tags: ['swappable', 'conversion', 'newControls', 'isFullWidth', 'isFullHeight'],
+  tags: ['swappable', 'conversion', 'isFullWidth', 'isFullHeight'],
 });

sample-extension-external-iframe/src/control/index.test.tsx

@@ -61,6 +61,7 @@ const renderCalendlyControl = (username: string) => {
         },
       }}
       dispatch={mockDispatch}
+      entityDispatch={jest.fn()}
       isSelected={true}
       entityId={''}
       mode={{

sample-extension-external-iframe/src/control/index.tsx

@@ -1,6 +1,6 @@
+import { Button, ComponentProps, Tooltip } from '@unbounce/smart-builder-sdk';
 import React, { useState } from 'react';
 import { HelpIcon } from 'smart-builder-components';
-import { Button, ComponentProps, Tooltip } from 'smart-builder-sdk';
 
 import {
   Container,

sample-extension-external-iframe/src/control/input.tsx

@@ -1,5 +1,5 @@
+import { InputField } from '@unbounce/smart-builder-sdk';
 import React from 'react';
-import { InputField } from 'smart-builder-sdk';
 import styled from 'styled-components';
 
 import { InputProps } from '../types';

sample-extension-external-iframe/src/styled.ts

@@ -1,4 +1,4 @@
-import { colors, fontSize, spacing, Toggle } from 'smart-builder-sdk';
+import { colors, fontSize, spacing, Toggle } from '@unbounce/smart-builder-sdk';
 import styled from 'styled-components';
 
 export const Wrapper = styled.div<{ configured: boolean; customHeight: number }>`

sample-extension-external-iframe/tsconfig.json

@@ -22,7 +22,6 @@
     "typeRoots": ["./node_modules/@types"],
     "declaration": false,
     "resolveJsonModule": true,
-    "keyofStringsOnly": true,
     "esModuleInterop": true,
     "noUnusedLocals": true,
     "moduleResolution": "node"

sample-extension-external-iframe/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = (env) => ({
   entry: {
@@ -36,6 +37,7 @@ module.exports = (env) => ({
       },
     ],
   },
+  plugins: [new webpack.ProvidePlugin({ process: 'process/browser' })],
   resolve: {
     extensions: ['.js', '.tsx', '.ts'],
     alias: {
@@ -48,6 +50,6 @@ module.exports = (env) => ({
     react: 'react',
     'react-dom': 'reactDom',
     'styled-components': 'styled',
-    'smart-builder-sdk': 'smartBuilderSdk',
+    '@emotion/react': '@emotion/react',
   },
 });

sample-extension/.eslintrc.js

@@ -10,10 +10,6 @@ module.exports = {
   parserOptions: { project: './tsconfig.json', tsconfigRootDir: __dirname },
   plugins: ['@typescript-eslint', 'react-hooks', 'jsx-a11y'],
   rules: {
-    // Temporary until we can import types from the SDK lib
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unsafe-member-access': 'off',
-
     'no-console': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/naming-convention': 'off',

sample-extension/config/global-dependencies/ub-shared.ts

@@ -1,4 +1,4 @@
-import type { Ub } from 'smart-builder-sdk';
+import type { Ub } from '@unbounce/smart-builder-sdk';
 
 declare global {
   interface ExtendedWindow {

sample-extension/manifest.ts

@@ -1,9 +1,9 @@
-import type { Manifest } from 'smart-builder-sdk';
+import type { Manifest } from '@unbounce/smart-builder-sdk';
 
 const manifest: Manifest = {
   appId: '@external/helloWorld',
   version: '0.1',
-  type: 'enhancement',
+  type: 'utility',
   name: 'Hello World',
   isBeta: true,
   isSwappable: true,