IBX-10158: Adjust transform props

packages/components/src/internal/partials/BaseInput/BaseInput.tsx

@@ -9,7 +9,6 @@ const INPUT_ID_PREFIX = 'ids-input-';
 
 const BaseInput = ({
     name,
-    type,
     disabled = false,
     error = false,
     extraClasses = '',
@@ -18,6 +17,7 @@ const BaseInput = ({
     required = false,
     size = 'medium',
     title = '',
+    type = 'text',
     value = '',
 }: BaseInputProps) => {
     const componentGeneratedNumberId = useGenerateSimpleNumberId();

packages/components/src/internal/partials/BaseInput/BaseInput.types.ts

@@ -28,8 +28,8 @@ interface BaseInputPropsProps extends BaseComponentAttributes {
 }
 
 interface BaseInputVisibleProps extends BaseInputPropsProps {
-    type: Exclude<BaseInputTypesType, 'hidden'>;
     required: boolean;
+    type?: Exclude<BaseInputTypesType, 'hidden'>;
     extraInputAttrs?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputVisibleProps>;
 }
 

src/storybook/addons/framework-selector/FrameworkSelectorDecorator.tsx

@@ -21,7 +21,12 @@ interface IframeMethods {
 }
 type IframeMessageData = IframeResize | IframeMethods;
 
-const getStoryId = (kind: string) => kind.replace('components/src/', '').toLowerCase();
+const camelCaseToSnakeCase = (str: string) => str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
+const getStoryId = (kind: string) => {
+    const storyId = kind.replace('components/src/', '');
+
+    return camelCaseToSnakeCase(storyId);
+};
 const getIframeSrc = (id: string, args: argsType) => {
     const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;
 
@@ -36,14 +41,15 @@ const getIframeSrc = (id: string, args: argsType) => {
             return accumulator;
         }
 
+        const propertyFinalName = camelCaseToSnakeCase(propertyName);
         let propertyFinalValue = propertyValue;
 
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         if (React.isValidElement(propertyValue)) {
             propertyFinalValue = renderToString(propertyValue);
         }
 
-        return { ...accumulator, [propertyName]: propertyFinalValue };
+        return { ...accumulator, [propertyFinalName]: propertyFinalValue };
         /* eslint-enable @typescript-eslint/no-unsafe-assignment */
     }, {});
     const storyPropertiesStringified = JSON.stringify(storyProperties);
@@ -61,35 +67,40 @@ const FrameworkSelectorDecorator = (
 ): Renderer['storyResult'] | React.JSX.Element => {
     const [globals] = useGlobals();
     const [args] = useArgs();
+    const iframeWrapperRef = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const { id, title }: { id: string; title: string } = context;
     const renderTwigSelector = () => {
         const storyId = getStoryId(title);
         const twigUrl = getIframeSrc(storyId, args);
 
         return (
-            <iframe
-                className="twig-preview"
-                id={`twig-preview-${id}`}
-                ref={iframeRef}
-                src={twigUrl}
-                style={{
-                    border: 0,
-                }}
-                title={storyId}
-            />
+            <div ref={iframeWrapperRef} style={{ overflow: 'hidden' }}>
+                <iframe
+                    className="twig-preview"
+                    id={`twig-preview-${id}`}
+                    key={twigUrl}
+                    ref={iframeRef}
+                    src={twigUrl}
+                    style={{
+                        border: 0,
+                    }}
+                    title={storyId}
+                />
+            </div>
         );
     };
     const handleIframeEvent = (event: MessageEvent<IframeMessageData>) => {
         const { data, source }: { data: IframeMessageData; source: MessageEventSource | null } = event;
 
-        if (iframeRef.current === null || source !== iframeRef.current.contentWindow) {
+        if (iframeWrapperRef.current === null || iframeRef.current === null || source !== iframeRef.current.contentWindow) {
             return;
         }
 
         if (data.width && data.height) {
             iframeRef.current.style.width = `${data.width.toString()}px`;
             iframeRef.current.style.height = `${data.height.toString()}px`;
+            iframeWrapperRef.current.style.height = `${data.height.toString()}px`;
         }
 
         if (data.method) {