Integration between Figma and Storybook (#488)

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Not released
 
+- Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488)
+- Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487)
+
 ## 1.5
 
 ### 1.5.0-alpha.4 (2022-10-14)

packages/react-ui/package.json

@@ -47,6 +47,7 @@
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
     "@storybook/react": "^6.5.12",
+    "storybook-addon-designs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.0",

packages/react-ui/storybook/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    'storybook-addon-designs'
+  ]
 };

packages/react-ui/storybook/.storybook/preview.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core';
 import { cartoThemeOptions } from '../../src/theme/carto-theme';
 
@@ -59,5 +60,6 @@ export const parameters = {
         ]
       ]
     }
-  }
+  },
+  decorators: [withDesign]
 };

packages/react-ui/storybook/stories/common/Button.stories.js

@@ -33,6 +33,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1303%3A26362'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/ButtonGroup.stories.js

@@ -39,6 +39,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1180%3A28045'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Checkbox.stories.js

@@ -26,6 +26,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27131'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Palette.stories.js

@@ -12,6 +12,12 @@ const options = {
         options: ['primary', 'secondary', 'error', 'warning', 'info', 'success']
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8786%3A6248'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Radio.stories.js

@@ -28,6 +28,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27543'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Select.stories.js

@@ -43,6 +43,12 @@ const options = {
         type: 'boolean'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A26139'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Slider.stories.js

@@ -128,6 +128,12 @@ const options = {
         type: ['func', 'string']
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A24517'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Switch.stories.js

@@ -21,6 +21,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27889'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Text-field.stories.js

@@ -33,6 +33,12 @@ const options = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A19069'
+    }
   }
 };
 export default options;
@@ -289,6 +295,18 @@ Small.argTypes = disabledControlsArgTypes;
 
 export const Multiline = MultilineTemplate.bind({});
 Multiline.args = { value: 'Hello world\nwith multiple lines' };
+Multiline.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604'
+  }
+};
 
 export const MultilineSmall = MultilineTemplate.bind({});
 MultilineSmall.args = { value: 'Hello world\nwith multiple lines', size: 'small' };
+MultilineSmall.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604'
+  }
+};

packages/react-ui/storybook/stories/common/ToggleButton.stories.js

@@ -29,6 +29,12 @@ const options = {
         type: 'boolean'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Tooltip.stories.js

@@ -40,6 +40,12 @@ const options = {
         type: 'boolean'
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/common/Typography.stories.js

@@ -25,6 +25,12 @@ const options = {
         ]
       }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64695'
+    }
   }
 };
 export default options;

packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js

@@ -50,6 +50,10 @@ const options = {
       source: {
         type: 'auto'
       }
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1159%3A24236'
     }
   }
 };

yarn.lock

@@ -1474,6 +1474,21 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@figspec/components@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da"
+  integrity sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig==
+  dependencies:
+    lit "^2.1.3"
+
+"@figspec/react@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.2.tgz#56dbd409ac420f754eda41ecfeb89f41bb8bd48d"
+  integrity sha512-BG6TTySyyDPDeER1oHNNj7+UYu7NzXwqJM6Z2utJtvGGk/Vn4NzrSdDU+HVp04o0kDEEJd5hJbFgkH3uzqimPQ==
+  dependencies:
+    "@figspec/components" "^1.0.0"
+    "@lit-labs/react" "^1.0.2"
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
@@ -2470,6 +2485,16 @@
     npmlog "^4.1.2"
     write-file-atomic "^3.0.3"
 
+"@lit-labs/react@^1.0.2":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.0.9.tgz#0703ed89fcdfd2766bc71c18ccb6b06c4bbe6019"
+  integrity sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w==
+
+"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.4.0":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.1.tgz#3f587eec5708692135bc9e94cf396130604979f3"
+  integrity sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==
+
 "@loaders.gl/3d-tiles@^3.2.5":
   version "3.2.10"
   resolved "https://registry.yarnpkg.com/@loaders.gl/3d-tiles/-/3d-tiles-3.2.10.tgz#325d000eb9a219fc43b7127bc1e794446504c7a1"
@@ -4928,6 +4953,11 @@
   resolved "https://registry.yarnpkg.com/@types/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#896e94ce99b653e886a9b925e9dc12c92af7b1ae"
   integrity sha512-AQ6zewa0ucLJvtUi5HsErbOFKAcQfRLt9zFLlUOvcXBy2G36a+ZDpCHSGdzJVUD8aNURtIjh9aSjCStNMRCcRQ==
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/uglify-js@*":
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.1.tgz#5e889e9e81e94245c75b6450600e1c5ea2878aea"
@@ -12321,6 +12351,30 @@ listr2@^3.2.2:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+lit-element@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b"
+  integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.2.0"
+
+lit-html@^2.2.0, lit-html@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.4.0.tgz#b510430f39a56ec959167ed1187241a4e3ab1574"
+  integrity sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.1.3:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.4.0.tgz#e33a0f463e17408f6e7f71464e6a266e60a5bb77"
+  integrity sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==
+  dependencies:
+    "@lit/reactive-element" "^1.4.0"
+    lit-element "^3.2.0"
+    lit-html "^2.4.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -16443,6 +16497,13 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022"
   integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==
 
+storybook-addon-designs@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz#3505a08fdb5a755c970c047470749622db52a1cc"
+  integrity sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==
+  dependencies:
+    "@figspec/react" "^1.0.0"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"