{"id":4200,"date":"2024-04-13T13:17:20","date_gmt":"2024-04-13T11:17:20","guid":{"rendered":"https:\/\/juannunezblasco.es\/como-crear-libreria-componentes-react-storybook\/"},"modified":"2024-05-08T20:59:16","modified_gmt":"2024-05-08T18:59:16","slug":"como-crear-libreria-componentes-react-storybook","status":"publish","type":"post","link":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/","title":{"rendered":"How to create a component library with React and StoryBook [REPO]"},"content":{"rendered":"\n

In the next post, we are going to do a step-by-step tutorial to implement a component library for React using Storybook and Rollup. I have deployed the project on GitHub Pages to share the final result with you:<\/p>\n\n

https:\/\/juannunezblasco.github.io\/react-rollup-storybook-library-starter\/<\/a><\/p>\n\n

We will cover everything from initial setup to publishing and distribution of the library. If you’re looking for a complete guide to creating and maintaining your own React component library, you’re in the right place.<\/p>\n\n

You can see the complete project on GitHub:<\/p>\n\n

https:\/\/github.com\/juannunezblasco\/react-rollup-storybook-library-starter<\/a><\/p>\n\n

What is Storybooks<\/h2>\n\n

Storybook is a tool that allows developers to build components in isolation, making it easy to evaluate and test each component individually.<\/p>\n\n

It also allows the creation of interactive, visual documentation for components, making it easier for other developers (and yourself later) to understand how each component works.<\/p>\n\n

Additionally, Storybook offers a large number of plugins to expand its functionality, so it can be customized to meet the specific needs of your project.<\/p>\n\n

The ultimate goal is to have a library of components that all members of your team use.<\/p>\n\n

This will increase the productivity of your company, while improving the consistency of your application design.<\/p>\n\n

Components to create in our library<\/h2>\n\n

We will create two simple components as a test that every application needs: a button and a form input.<\/p>\n\n

\/\/ Button.tsx\n\nimport React from \"react\";\nimport \".\/Button.scss\";\n\nexport interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>{\n  label: string;\n}\n\nconst Button = ({label, ...others}: ButtonProps) => {\n  return <button {...others}>{label}<\/button>;\n};\n\nexport default Button;\n<\/code><\/pre>\n\n
\/\/ Input.tsx\n\nimport React from \"react\";\nimport \".\/Input.scss\";\nimport { Input, InputProps } from \"antd\";\n\nexport interface InputTextProps extends InputProps {\n    \/**\n     * \n     *\/\n}\n\nconst InputText:React.FC<InputTextProps> = (props: InputTextProps) => {\n  return <Input type=\"text\" {...props} \/>;\n};\n\nexport default InputText;\n<\/code><\/pre>\n\n
Each of our components will have the same folder structure:<\/p>\n\n
  • \/tests : files with our tests<\/li>
  • Button.css: styles we apply<\/li>
  • Button.stories.tsx \u2013 StoryBook-specific implementation<\/li>
  • Button.tsx \u2013 React native component<\/li>
  • index.ts: barrel file where we export the component.<\/li><\/ul>\n\n
    We are going to analyze the file with the StoryBook implementation because the rest is not much of a mystery.<\/p>\n\n
    \/\/ Button.stories.tsx\n\nimport { StoryFn, Meta } from \"@storybook\/react\";\nimport React from \"react\";\nimport Button, { ButtonProps } from \".\/Button\";\n\n\/\/ More on default export: <https:\/\/storybook.js.org\/docs\/react\/writing-stories\/introduction#default-export>\nconst ExportDefault: Meta<typeof Button> = {\n  title: \"ReactComponentLibrary\/Button\",\n  component: Button,\n};\n\n\/\/ More on component templates: <https:\/\/storybook.js.org\/docs\/react\/writing-stories\/introduction#using-args>\nconst Template: StoryFn<typeof Button> = (args) => <Button {...args} \/>;\n\nexport const HelloWorld: StoryFn<ButtonProps> = Template.bind({});\n\/\/ More on args: <https:\/\/storybook.js.org\/docs\/react\/writing-stories\/args>\nHelloWorld.args = {\n  label: \"Save\",\n};\n\nexport const ClickMe: StoryFn<ButtonProps> = Template.bind({});\nClickMe.args = {\n  label: \"Click me!\",\n};\n\nexport default ExportDefault;\n\n<\/code><\/pre>\n\n
    The ExportDefault constant is where we include the title and component itself. We type it with the StoryBook interface including our component as a generic.<\/p>\n\n
    Then we create a template of our components by passing the properties to the component with the spread operator.<\/p>\n\n
    Based on this template we will build all the variations of our components by modifying their arguments. These will be the ones that we will see reflected in our component library.<\/p>\n\n
    Rollup.js Configuration<\/h2>\n\n
    Rollup.js is a JavaScript module bundling tool that compiles small pieces of code into something larger and more complex, like a library or application.<\/p>\n\n
    It allows us to create JavaScript modules that can be imported and used in other projects.<\/p>\n\n
    Rollup.js is especially useful for use with libraries and frameworks like React due to its effectiveness in removing dead code and its efficiency in loading modules.<\/p>\n\n
    \/\/ rollup.config.js\nimport terser from '@rollup\/plugin-terser';\nimport resolve from \"@rollup\/plugin-node-resolve\";\nimport commonjs from \"@rollup\/plugin-commonjs\";\nimport typescript from \"@rollup\/plugin-typescript\";\nimport dts from \"rollup-plugin-dts\";\nimport postcss from \"rollup-plugin-postcss\";\nimport peerDepsExternal from 'rollup-plugin-peer-deps-external';\n\nimport pkg from \".\/package.json\" assert { type: 'json' };\n\nexport default [\n\t{\n\t\tinput: 'src\/index.ts',\n\t\toutput: [\n\t\t\t{\n\t\t\t\tfile: pkg.main,\n\t\t\t\tformat: 'cjs',\n\t\t\t\tsourcemap: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\tfile: pkg.module,\n\t\t\t\tformat: \"esm\",\n\t\t\t\tsourcemap: true,\n\t\t\t},\n\t\t\t\/* {\n\t\t\t\tfile: 'dist\/bundle.min.js',\n\t\t\t\tformat: 'iife',\n\t\t\t\tname: 'version',\n\t\t\t\tplugins: [terser()]\n\t\t\t} *\/\n\t\t],\n\t\tplugins: [\n\t\t\tpeerDepsExternal(),\n\t\t\tresolve(),\n\t\t\tcommonjs(),\n\t\t\ttypescript({ tsconfig: \".\/tsconfig.json\" }),\n\t\t\tpostcss(),\n\t\t\tterser()\n\t\t]\n\t},\n\t{\n\t\tinput: \"dist\/esm\/types\/index.d.ts\",\n\t\toutput: [{ file: \"dist\/index.d.ts\", format: \"esm\" }],\n\t\tplugins: [dts()],\n\t\texternal: [\/\\\\.(css|less|scss)$\/],\n\t},\n];\n<\/code><\/pre>\n\n
    For example, in this case we make a configuration so that the library supports the implementation using CommonJS and the modern Javascript standard ES6 and later.<\/p>\n\n
    The commented object would generate a version of the package that can be run directly in a browser without the need for a loaded module. Lo incluyo para que lo tengas en cuenta, pero para el caso que nos ocupa no nos interesa.<\/p>\n\n
    I include it so that you take it into account, but for the case at hand we are not interested.<\/h2>\n\n
    First of all we have to configure the package.json.<\/p>\n\n
    {\n  \"name\": \"@juannunezblasco\/react-rollup-storybook-library-starter\",\n  \"version\": \"0.1.0\",\n  \"description\": \"Template and quick-starter to create modern React libraries using Rollup.\",\n  \"main\": \"dist\/cjs\/bundle.js\",\n  \"module\": \"dist\/esm\/bundle.js\",\n  \"types\": \"dist\/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"rimraf dist && rollup -c\",\n    \"dev\": \"rollup -c -w\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint src\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build-storybook\": \"storybook build\",\n    \"predeploy-storybook\": \"npm run build-storybook\",\n    \"deploy-storybook\": \"gh-pages -d storybook-static\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https:\/\/github.com\/juannunezblasco\/react-rollup-storybook-library-starter.git\"\n  },\n  \"author\": \"juannunezblasco\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"react-template\",\n    \"react-library\",\n    \"typescript\",\n    \"react\",\n    \"template\"\n  ],\n  \"bugs\": {\n    \"url\": \"<https:\/\/github.com\/juannunezblasco\/react-rollup-storybook-library-starter\/issues>\"\n  },\n  \"homepage\": \"<https:\/\/juannunezblasco.github.io\/react-rollup-storybook-library-starter>\",\n  \"peerDependencies\": {\n    \"antd\": \"^5.4.0\",\n    \"react\": \">=16.8.0\",\n    \"react-dom\": \">=16.8.0\"\n  },\n  \"devDependencies\": {\n    ...\n  }\n}\n<\/code><\/pre>\n\n
    We include all the information related to our package:<\/p>\n\n
    • Name<\/li>
    • Description<\/li>
    • Repository<\/li>
    • Routes<\/li>
    • Keywords: relevant if it is a public package.<\/li>
    • etc.<\/li><\/ul>\n\n
      Like peerDependencies, which represent the dependencies that we expect to find in the application that will use our package.<\/p>\n\n
      Once our configuration is finished we can publish our package to npm:<\/p>\n\n
      npm publish\n<\/code><\/pre>\n\n
      Conclusions<\/h2>\n\n
      I recommend you follow the instructions that I have left in the README.dm to clone the repository and test the implementation.<\/p>\n\n
      If it has been helpful to you, share it on your social networks.<\/p>\n","protected":false},"excerpt":{"rendered":"
      In the next post, we are going to do a step-by-step tutorial to implement a component library for React using Storybook and Rollup. I have […]<\/p>\n","protected":false},"author":1,"featured_media":4115,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[75,74],"tags":[],"acf":[],"yoast_head":"\nHow to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web\" \/>\n<meta property=\"og:description\" content=\"In the next post, we are going to do a step-by-step tutorial to implement a component library for React using Storybook and Rollup. I have […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/\" \/>\n<meta property=\"og:site_name\" content=\"J - Desarrollo Aplicaciones Web\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-13T11:17:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-08T18:59:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan N\u00fa\u00f1ez Blaco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/juannunezblasco.es\/#organization\",\"name\":\"J - Desarrollo Aplicaciones Web\",\"url\":\"https:\/\/juannunezblasco.es\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png\",\"contentUrl\":\"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png\",\"width\":512,\"height\":513,\"caption\":\"J - Desarrollo Aplicaciones Web\"},\"image\":{\"@id\":\"https:\/\/juannunezblasco.es\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/juannunezblasco.es\/#website\",\"url\":\"https:\/\/juannunezblasco.es\/\",\"name\":\"J - Desarrollo Aplicaciones Web\",\"description\":\"Dise\u00f1o y desarrollos de productos digitales a medida\",\"publisher\":{\"@id\":\"https:\/\/juannunezblasco.es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/juannunezblasco.es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg\",\"contentUrl\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg\",\"width\":1260,\"height\":630,\"caption\":\"How to create a component library with React and StoryBook\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage\",\"url\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/\",\"name\":\"How to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web\",\"isPartOf\":{\"@id\":\"https:\/\/juannunezblasco.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage\"},\"datePublished\":\"2024-04-13T11:17:20+00:00\",\"dateModified\":\"2024-05-08T18:59:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/juannunezblasco.es\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a component library with React and StoryBook [REPO]\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage\"},\"author\":{\"@id\":\"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29\"},\"headline\":\"How to create a component library with React and StoryBook [REPO]\",\"datePublished\":\"2024-04-13T11:17:20+00:00\",\"dateModified\":\"2024-05-08T18:59:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage\"},\"wordCount\":621,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/juannunezblasco.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg\",\"articleSection\":[\"Design System\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29\",\"name\":\"Juan N\u00fa\u00f1ez Blaco\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/juannunezblasco.es\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g\",\"caption\":\"Juan N\u00fa\u00f1ez Blaco\"},\"description\":\"Full Stack Developer\",\"sameAs\":[\"https:\/\/juannunezblasco.es\"],\"url\":\"https:\/\/juannunezblasco.es\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/","og_locale":"en_US","og_type":"article","og_title":"How to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web","og_description":"In the next post, we are going to do a step-by-step tutorial to implement a component library for React using Storybook and Rollup. I have […]","og_url":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/","og_site_name":"J - Desarrollo Aplicaciones Web","article_published_time":"2024-04-13T11:17:20+00:00","article_modified_time":"2024-05-08T18:59:16+00:00","og_image":[{"width":1260,"height":630,"url":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan N\u00fa\u00f1ez Blaco","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/juannunezblasco.es\/#organization","name":"J - Desarrollo Aplicaciones Web","url":"https:\/\/juannunezblasco.es\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/#logo","inLanguage":"en-US","url":"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png","contentUrl":"http:\/\/juannunezblasco.local\/content\/uploads\/2022\/02\/logo-jnb-positivo.png","width":512,"height":513,"caption":"J - Desarrollo Aplicaciones Web"},"image":{"@id":"https:\/\/juannunezblasco.es\/#logo"}},{"@type":"WebSite","@id":"https:\/\/juannunezblasco.es\/#website","url":"https:\/\/juannunezblasco.es\/","name":"J - Desarrollo Aplicaciones Web","description":"Dise\u00f1o y desarrollos de productos digitales a medida","publisher":{"@id":"https:\/\/juannunezblasco.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/juannunezblasco.es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage","inLanguage":"en-US","url":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg","contentUrl":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg","width":1260,"height":630,"caption":"How to create a component library with React and StoryBook"},{"@type":"WebPage","@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage","url":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/","name":"How to create a component library with React and StoryBook [REPO] | J - Desarrollo Aplicaciones Web","isPartOf":{"@id":"https:\/\/juannunezblasco.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage"},"datePublished":"2024-04-13T11:17:20+00:00","dateModified":"2024-05-08T18:59:16+00:00","breadcrumb":{"@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/juannunezblasco.es\/en\/"},{"@type":"ListItem","position":2,"name":"How to create a component library with React and StoryBook [REPO]"}]},{"@type":"Article","@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#article","isPartOf":{"@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage"},"author":{"@id":"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29"},"headline":"How to create a component library with React and StoryBook [REPO]","datePublished":"2024-04-13T11:17:20+00:00","dateModified":"2024-05-08T18:59:16+00:00","mainEntityOfPage":{"@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#webpage"},"wordCount":621,"commentCount":0,"publisher":{"@id":"https:\/\/juannunezblasco.es\/#organization"},"image":{"@id":"https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/juannunezblasco.es\/content\/uploads\/2024\/04\/react-design-system.jpg","articleSection":["Design System","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/juannunezblasco.es\/en\/como-crear-libreria-componentes-react-storybook\/#respond"]}]},{"@type":"Person","@id":"https:\/\/juannunezblasco.es\/#\/schema\/person\/31582cd4a29af7055b4c3b0508601b29","name":"Juan N\u00fa\u00f1ez Blaco","image":{"@type":"ImageObject","@id":"https:\/\/juannunezblasco.es\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23b8417ac4b489153038755511de438e?s=96&d=mm&r=g","caption":"Juan N\u00fa\u00f1ez Blaco"},"description":"Full Stack Developer","sameAs":["https:\/\/juannunezblasco.es"],"url":"https:\/\/juannunezblasco.es\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4200"}],"collection":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/comments?post=4200"}],"version-history":[{"count":2,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4200\/revisions"}],"predecessor-version":[{"id":4213,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/posts\/4200\/revisions\/4213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/media\/4115"}],"wp:attachment":[{"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/media?parent=4200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/categories?post=4200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juannunezblasco.es\/en\/wp-json\/wp\/v2\/tags?post=4200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}