fix: ensure props are available

elastic · May 10, 2024 · e144ec5 · e144ec5
1 parent 01bfb67
commit e144ec5
Showing 1 changed file with 91 additions and 86 deletions.
diff --git a/.storybook/addons/code-snippet/decorator/jsx_decorator.tsx b/.storybook/addons/code-snippet/decorator/jsx_decorator.tsx
@@ -63,7 +63,7 @@ function simplifyNodeForStringify(node: ReactNode): ReactNode {
 
     // remove inner fragments
     if (
-      updatedNode.props.children &&
+      updatedNode.props?.children &&
       !Array.isArray(updatedNode.props.children) &&
       isFragment(updatedNode.props.children)
     ) {
@@ -76,99 +76,104 @@ function simplifyNodeForStringify(node: ReactNode): ReactNode {
       };
     }
 
-    const updatedProps = Object.keys(updatedNode.props).reduce<{
-      [key: string]: any;
-    }>((acc, cur) => {
-      // resolve css Emotion object back to css prop
-      // ensures tokens are output as is and note resolved
-      if (cur === 'css') {
-        if (typeof updatedNode.props[cur] === 'function') {
-          const styles = updatedNode.props[cur]?.(euiTheme);
-          const fnString = String(updatedNode.props[cur]);
-
-          const regex = /return \{([\S\s]*?)(;)$/gm;
-          const matches = fnString.match(regex);
-
-          if (matches) {
-            const rules = matches[0]
-              .replace('return {\n', '')
-              .replace(/(\/\/)([\S\s]*?)$/g, '')
-              .replaceAll(' ', '')
-              .replaceAll('\n', '')
-              .split(',');
-
-            const cssStyles = rules.reduce((acc, cur) => {
-              const [property, value] = cur.split(':');
-              const isToken = value.match('euiTheme') != null;
-
-              acc[property] = isToken
-                ? `{{${value}}}`
-                : value.replaceAll("'", '');
-
-              return acc;
-            }, {} as Record<string, any>);
-
-            acc[cur] = {
-              ...acc.style,
-              ...cssStyles,
-            };
-
-            return acc;
-          }
-
-          acc[cur] = {
-            ...acc.style,
-            ...styles,
-          };
-        }
-
-        if (typeof updatedNode.props[cur] === 'object' && !Array.isArray(cur)) {
-          const styles: string[] = updatedNode.props[cur].styles
-            .replace(';};', '};')
-            .split(';');
-
-          const styleRules = styles.reduce((acc, cur) => {
-            if (cur && !cur.startsWith(':') && !cur.startsWith('label')) {
-              const [property, value] = cur.split(':');
-              const propertyName = camelCase(property);
-
-              acc[propertyName] = value;
-            } else if (cur.startsWith(':')) {
-              const string = cur.replace('{', ';').replace('}', '');
-              const [property, propertyValue] = string.split(';');
-              const [key, value] = propertyValue.split(':');
+    const updatedProps = updatedNode.props
+      ? Object.keys(updatedNode.props).reduce<{
+          [key: string]: any;
+        }>((acc, cur) => {
+          // resolve css Emotion object back to css prop
+          // ensures tokens are output as is and note resolved
+          if (cur === 'css') {
+            if (typeof updatedNode.props[cur] === 'function') {
+              const styles = updatedNode.props[cur]?.(euiTheme);
+              const fnString = String(updatedNode.props[cur]);
+
+              const regex = /return \{([\S\s]*?)(;)$/gm;
+              const matches = fnString.match(regex);
+
+              if (matches) {
+                const rules = matches[0]
+                  .replace('return {\n', '')
+                  .replace(/(\/\/)([\S\s]*?)$/g, '')
+                  .replaceAll(' ', '')
+                  .replaceAll('\n', '')
+                  .split(',');
+
+                const cssStyles = rules.reduce((acc, cur) => {
+                  const [property, value] = cur.split(':');
+                  const isToken = value.match('euiTheme') != null;
+
+                  acc[property] = isToken
+                    ? `{{${value}}}`
+                    : value.replaceAll("'", '');
+
+                  return acc;
+                }, {} as Record<string, any>);
+
+                acc[cur] = {
+                  ...acc.style,
+                  ...cssStyles,
+                };
+
+                return acc;
+              }
+
+              acc[cur] = {
+                ...acc.style,
+                ...styles,
+              };
+            }
 
-              acc[property] = {
-                [key]: value,
+            if (
+              typeof updatedNode.props[cur] === 'object' &&
+              !Array.isArray(cur)
+            ) {
+              const styles: string[] = updatedNode.props[cur].styles
+                .replace(';};', '};')
+                .split(';');
+
+              const styleRules = styles.reduce((acc, cur) => {
+                if (cur && !cur.startsWith(':') && !cur.startsWith('label')) {
+                  const [property, value] = cur.split(':');
+                  const propertyName = camelCase(property);
+
+                  acc[propertyName] = value;
+                } else if (cur.startsWith(':')) {
+                  const string = cur.replace('{', ';').replace('}', '');
+                  const [property, propertyValue] = string.split(';');
+                  const [key, value] = propertyValue.split(':');
+
+                  acc[property] = {
+                    [key]: value,
+                  };
+                }
+
+                return acc;
+              }, {} as Record<string, any>);
+
+              acc[cur] = {
+                ...acc.style,
+                ...styleRules,
               };
             }
 
             return acc;
-          }, {} as Record<string, any>);
-
-          acc[cur] = {
-            ...acc.style,
-            ...styleRules,
-          };
-        }
-
-        return acc;
-      }
+          }
 
-      if (cur === 'style') {
-        return (acc[cur] = {
-          // prevent resolving style attribute
-          style: {
-            ...acc[cur],
-            ...updatedNode.props[cur],
-          },
-        });
-      }
+          if (cur === 'style') {
+            return (acc[cur] = {
+              // prevent resolving style attribute
+              style: {
+                ...acc[cur],
+                ...updatedNode.props[cur],
+              },
+            });
+          }
 
-      acc[cur] = simplifyNodeForStringify(updatedNode.props[cur]);
+          acc[cur] = simplifyNodeForStringify(updatedNode.props[cur]);
 
-      return acc;
-    }, {} as Record<string, any>);
+          return acc;
+        }, {} as Record<string, any>)
+      : {};
 
     return {
       ...updatedNode,