From 5769e7bc3140c9a0393adc487e9f77cba491bb9f Mon Sep 17 00:00:00 2001
From: tomoya <tomoya.ton@gmail.com>
Date: Tue, 5 May 2020 03:25:40 +0900
Subject: [PATCH 1/2] Display undefined string if value is undefined

---
 example/src/Box/Box.stories.tsx       | 2 +-
 src/__snapshots__/index.test.tsx.snap | 8 ++++++--
 src/components/Matrix/Matrix.tsx      | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/example/src/Box/Box.stories.tsx b/example/src/Box/Box.stories.tsx
index 3ff93a6..a1ae4fc 100644
--- a/example/src/Box/Box.stories.tsx
+++ b/example/src/Box/Box.stories.tsx
@@ -9,7 +9,7 @@ export default {
       pattern: {
         bg: ['white', 'blue', 'red', 'yellow'],
         width: [1, '50%', 256],
-        p: [1, 2, 3],
+        p: [undefined, 2, 3],
       },
     },
   },
diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap
index 5c55bd5..dd9d171 100644
--- a/src/__snapshots__/index.test.tsx.snap
+++ b/src/__snapshots__/index.test.tsx.snap
@@ -246,7 +246,9 @@ Array [
                         <styled.span>
                           <span
                             className="sc-AxirZ HanLJ"
-                          />
+                          >
+                            undefined
+                          </span>
                         </styled.span>
                       </div>
                     </styled.div>
@@ -478,7 +480,9 @@ Array [
                         <styled.span>
                           <span
                             className="sc-AxirZ HanLJ"
-                          />
+                          >
+                            undefined
+                          </span>
                         </styled.span>
                       </div>
                     </styled.div>
diff --git a/src/components/Matrix/Matrix.tsx b/src/components/Matrix/Matrix.tsx
index 7196b16..8cf3bac 100644
--- a/src/components/Matrix/Matrix.tsx
+++ b/src/components/Matrix/Matrix.tsx
@@ -31,7 +31,7 @@ export const Matrix: React.FC<MatrixProps> = ({ component, propsPattern, origina
               return (
                 <Box key={key}>
                   <Box mb={2}>
-                    <Text fontWeight="bold">{key}</Text>: <Text>{value}</Text>
+                    <Text fontWeight="bold">{key}</Text>: <Text>{value ?? 'undefined'}</Text>
                   </Box>
                 </Box>
               );

From 3f80c3e4a535db2d91c763684548f3c491d5b570 Mon Sep 17 00:00:00 2001
From: tomoya <tomoya.ton@gmail.com>
Date: Tue, 5 May 2020 03:26:44 +0900
Subject: [PATCH 2/2] Remove unnecessary block

---
 src/components/Matrix/Matrix.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Matrix/Matrix.tsx b/src/components/Matrix/Matrix.tsx
index 8cf3bac..d6671fa 100644
--- a/src/components/Matrix/Matrix.tsx
+++ b/src/components/Matrix/Matrix.tsx
@@ -27,15 +27,13 @@ export const Matrix: React.FC<MatrixProps> = ({ component, propsPattern, origina
           width={3 / 10}
         >
           <Box bg="#eeeeee" p={2} width={128}>
-            {Object.entries(props).map(([key, value]) => {
-              return (
-                <Box key={key}>
-                  <Box mb={2}>
-                    <Text fontWeight="bold">{key}</Text>: <Text>{value ?? 'undefined'}</Text>
-                  </Box>
+            {Object.entries(props).map(([key, value]) => (
+              <Box key={key}>
+                <Box mb={2}>
+                  <Text fontWeight="bold">{key}</Text>: <Text>{value ?? 'undefined'}</Text>
                 </Box>
-              );
-            })}
+              </Box>
+            ))}
           </Box>
           <Box m={2} overflow="hidden">
             <Component {...originalProps} {...props} />