fix(lib): make the translatable property optional (#375)

* make the translatable property optional

* adjust the sandbox to consider the translatable property as optional

Author: demetriusfeijoo

packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts

@@ -51,7 +51,7 @@ export const createFieldPlugin: CreateFieldPlugin = ({
   const origin =
     host === 'plugin-sandbox.storyblok.com'
       ? 'https://plugin-sandbox.storyblok.com'
-      : 'https://plugins.storyblok.com'
+      : 'https://app.storyblok.com'
 
   const postToContainer = (message: unknown) => {
     try {

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts

@@ -35,6 +35,7 @@ export const createPluginMessageListener: CreatePluginMessageListener = (
       handlePluginMessage(event.data, uid, callbacks)
     }
   }
+
   window.addEventListener('message', handleEvent, false)
 
   return () => {

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.ts

@@ -17,7 +17,7 @@ export const handlePluginMessage = (
     return
   }
 
-  // TODO check origin https://plugins.storyblok.com/ in production mode, * in dev mode
+  // TODO check origin https://app.storyblok.com/ in production mode, * in dev mode
 
   if (data.uid !== uid) {
     // Not intended for this field plugin

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/FieldPluginSchema.ts

@@ -6,7 +6,7 @@ import { hasKey } from '../../../utils'
 export type FieldPluginSchema = {
   field_type: string
   options: FieldPluginOption[]
-  translatable: boolean
+  translatable?: boolean
 }
 
 export type FieldPluginOption = { name: string; value: string }
@@ -23,5 +23,5 @@ export const isFieldPluginSchema = (it: unknown): it is FieldPluginSchema =>
   hasKey(it, 'options') &&
   Array.isArray(it.options) &&
   it.options.every(isFieldPluginOption) &&
-  hasKey(it, 'translatable') &&
-  typeof it.translatable === 'boolean'
+  (!hasKey(it, 'translatable') ||
+    (hasKey(it, 'translatable') && typeof it.translatable === 'boolean'))

packages/sandbox/src/components/TranslatableCheckbox.tsx

@@ -2,7 +2,7 @@ import { Checkbox, FormControl, FormLabel } from '@mui/material'
 import { FunctionComponent } from 'react'
 
 export const TranslatableCheckbox: FunctionComponent<{
-  isTranslatable: boolean
+  isTranslatable: boolean | undefined
   setTranslatable: (value: boolean) => void
 }> = (props) => {
   return (
@@ -13,7 +13,7 @@ export const TranslatableCheckbox: FunctionComponent<{
           alignSelf: 'flex-start',
         }}
         aria-describedby="translatable-checkbox"
-        value={props.isTranslatable}
+        value={props.isTranslatable ?? false}
         onChange={(e) => props.setTranslatable(e.target.checked)}
       />
     </FormControl>