Remove transition setting from components

packages/builder/src/builderStore/store/frontend.js

@@ -305,7 +305,6 @@ export const getFrontendStore = () => {
           _id: uuid(),
           _component: definition.component,
           _styles: { normal: {}, hover: {}, active: {} },
-          _transition: "",
           _instanceName: `New ${definition.name}`,
           ...cloneDeep(props),
           ...extras,
@@ -508,15 +507,6 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
-      updateTransition: async transition => {
-        const selected = get(selectedComponent)
-        if (transition == null || transition === "") {
-          selected._transition = ""
-        } else {
-          selected._transition = transition
-        }
-        await store.actions.preview.saveSelected()
-      },
       updateProp: async (name, value) => {
         let component = get(selectedComponent)
         if (!name || !component) {

packages/builder/src/builderStore/store/screenTemplates/utils/Component.js

@@ -14,7 +14,6 @@ export class Component extends BaseStructure {
         active: {},
         selected: {},
       },
-      _transition: "",
       _instanceName: "",
       _children: [],
     }
@@ -40,11 +39,6 @@ export class Component extends BaseStructure {
     return this
   }
 
-  transition(transition) {
-    this._json._transition = transition
-    return this
-  }
-
   // Shorthand for custom props "type"
   type(type) {
     this._json.type = type

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -55,7 +55,6 @@
     if (routeError) return false
 
     draftScreen.props._instanceName = name
-    draftScreen.props._transition = "fade"
     draftScreen.props._component = baseComponent
     draftScreen.routing = { route, roleId }
 

packages/builder/src/components/design/PropertiesPanel/DesignView.svelte

@@ -8,7 +8,6 @@
   export let componentInstance = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
-  export let onUpdateTransition = () => {}
   export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
@@ -24,14 +23,6 @@
     { value: "active", text: "Active" },
   ]
 
-  const transitions = [
-    "none",
-    "fade",
-    "blur",
-    "fly",
-    "scale", // slide is hidden because it does not seem to result in any effect
-  ]
-
   const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("")
 
   $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
@@ -78,18 +69,6 @@
       {/if}
     </div>
   </div>
-  {#if componentDefinition?.transitionable}
-    <div class="transitions">
-      <Select
-        value={componentInstance._transition}
-        on:change={event => onUpdateTransition(event.detail)}
-        name="transition"
-        label="Transition"
-        options={transitions}
-        getOptionLabel={capitalize}
-      />
-    </div>
-  {/if}
 </div>
 
 <style>

packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte

@@ -18,7 +18,6 @@
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
-  const onUpdateTransition = store.actions.components.updateTransition
   const onResetStyles = store.actions.components.resetStyles
 
   function setAssetProps(name, value) {
@@ -64,7 +63,6 @@
         componentDefinition={definition}
         {onStyleChanged}
         {onCustomStyleChanged}
-        {onUpdateTransition}
         {onResetStyles}
       />
     </div>

packages/client/src/components/Component.svelte

@@ -54,7 +54,6 @@
     children: children.length,
     styles: { ...instance._styles, id, empty, interactive },
     empty,
-    transition: instance._transition,
     selected,
     props: componentProps,
     name,

packages/client/src/sdk.js

@@ -7,7 +7,6 @@ import {
   builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
-import transition from "./utils/transition"
 import { linkable } from "./utils/linkable"
 import { getAction } from "./utils/getAction"
 import Provider from "./components/Provider.svelte"
@@ -21,7 +20,6 @@ export default {
   screenStore,
   builderStore,
   styleable,
-  transition,
   linkable,
   getAction,
   Provider,

packages/client/src/utils/transition.js

@@ -1,16 +0,0 @@
-import { fade, blur, scale, fly } from "svelte/transition"
-
-// Default options
-const transitions = new Map([
-  ["fade", { tn: fade, opt: {} }],
-  ["blur", { tn: blur, opt: {} }],
-  // This one seems to not result in any effect
-  // ["slide", { tn: slide, opt: {} }],
-  ["scale", { tn: scale, opt: {} }],
-  ["fly", { tn: fly, opt: { y: 80 } }],
-])
-
-export default function transition(node, { type, options = {} }) {
-  const { tn, opt } = transitions.get(type) || { tn: () => {}, opt: {} }
-  return tn(node, { ...opt, ...options })
-}

packages/standard-components/manifest.json

@@ -5,7 +5,6 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": [],
     "settings": [
       {
@@ -63,7 +62,6 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": ["section"],
     "showSettingsBar": true,
     "settings": [
@@ -183,7 +181,6 @@
     "icon": "ColumnTwoB",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": ["Section"],
     "showEmptyState": false,
     "settings": [

packages/standard-components/src/Container.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable, transition } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let direction
@@ -17,7 +17,6 @@
 
 <div
   class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  in:transition={{ type: $component.transition }}
   use:styleable={$component.styles}
 >
   <slot />

packages/standard-components/src/Section.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, transition, builderStore } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let type = "mainSidebar"
@@ -31,7 +31,6 @@
 
 <div
   bind:clientWidth={containerWidth}
-  in:transition={{ type: $component.transition }}
   class="{type} columns-{columnsDependingOnSize}"
   use:styleable={$component.styles}
 >