{"id":19773946,"url":"https://github.com/badoo/styleguide","last_synced_at":"2025-10-04T12:37:07.719Z","repository":{"id":38426186,"uuid":"174998202","full_name":"badoo/styleguide","owner":"badoo","description":"Badoo styleguide used to develop UI components for the Web and React Native","archived":false,"fork":false,"pushed_at":"2023-03-08T20:10:19.000Z","size":1430,"stargazers_count":10,"open_issues_count":12,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-09T02:22:44.323Z","etag":null,"topics":["react","react-native","sass","styleguide"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/badoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-11T12:45:08.000Z","updated_at":"2022-10-17T20:12:21.000Z","dependencies_parsed_at":"2024-06-21T18:54:59.788Z","dependency_job_id":"a1bc0f0d-8bda-4bc6-a1b7-f26eb1c56383","html_url":"https://github.com/badoo/styleguide","commit_stats":{"total_commits":388,"total_committers":15,"mean_commits":"25.866666666666667","dds":"0.46649484536082475","last_synced_commit":"5adfb22ccaa9b219a566637665bc6ee5e8902fb6"},"previous_names":[],"tags_count":93,"template":false,"template_full_name":null,"purl":"pkg:github/badoo/styleguide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badoo%2Fstyleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badoo%2Fstyleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badoo%2Fstyleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badoo%2Fstyleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badoo","download_url":"https://codeload.github.com/badoo/styleguide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badoo%2Fstyleguide/sbom","scorecard":{"id":222940,"data":{"date":"2025-08-11","repo":{"name":"github.com/badoo/styleguide","commit":"5adfb22ccaa9b219a566637665bc6ee5e8902fb6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 1/10 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/add-preview.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/add-preview.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/add-preview.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/add-preview.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/add-preview.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/add-preview.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reviewdog.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/reviewdog.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reviewdog.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/reviewdog.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/reviewdog.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/reviewdog.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/reviewdog.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/reviewdog.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/reviewdog.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/badoo/styleguide/reviewdog.yml/master?enable=pin","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   4 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/add-preview.yml:1","Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Warn: no topLevel permission defined: .github/workflows/reviewdog.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":7,"reason":"SAST tool detected but not run on all commits","details":["Info: SAST configuration detected: CodeQL","Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"46 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T03:01:39.907Z","repository_id":38426186,"created_at":"2025-08-17T03:01:39.907Z","updated_at":"2025-08-17T03:01:39.907Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278315185,"owners_count":25966774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","sass","styleguide"],"created_at":"2024-11-12T05:11:34.629Z","updated_at":"2025-10-04T12:37:07.700Z","avatar_url":"https://github.com/badoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Badoo Styleguide\n\n[![npm version](https://badge.fury.io/js/badoo-styleguide.svg)](https://badge.fury.io/js/badoo-styleguide)\n\n**[Work in progress](#to-do)**: This is a styleguide used by the frontend team in [Bumble](https://team.bumble.com/), at the moment we are in the process of open sourcing it. Just working out some issues, cleaning up the API and adding documentation.\n\n## Table of contents\n\n- [Getting started](#getting-started)\n- [How to define and document components](#how-to-define-and-document-components)\n- [Examples](#examples)\n- [Visual helpers](#visual-helpers)\n- [Debugging](#debugging)\n- [ToDo](#to-do)\n\n## Getting started\n\n### run styleguide as npm executable\n\n```bash\nnpx badoo-styleguide --dev\n```\n\n### Create a styleguide config\n\nCreate a file called `styleguide.config.js` in your project (The name doesn't really matter).\n\nAdd the following content to the file\n\n```js\nmodule.exports = {\n    /**\n     * Set it to true if you want to set all StyleguideDeviceFrame components as iframes\n     * @optional\n     */\n    setDeviceFramesAsIframes: false,\n\n    /**\n     * Set it to true if you want to resize sandboxes with the resize handle\n     * @optional\n     */\n    hasResizableSandbox: false,\n\n    /**\n     * This function will apply provided actions during render of component\n     * @optional\n     */\n    actionOnRender() {\n        // eslint-disable-next-line no-undef\n        if (document \u0026 !document.querySelector('body').classList) {\n            // eslint-disable-next-line no-undef\n            document.querySelector('body').classList.add('test')\n        }\n    },\n\n    /**\n     * Set it to true if you want to handle reset css \u0026 and default minimal css\n     * for styleguide outside of project\n     * equals to both noDefaultStyleguideStyles \u0026 noDefaultStyleguideStyles\n     * set to true\n     * @optional\n     */\n    noDefaultGlobalStyles: false,\n\n    /**\n     * Set it to true if you want to switch off default Styleguide\n     * minimal style reset.\n     * @optional\n     */\n    noDefaultStyleguideStyles: false,\n\n    /**\n     * Set it to true if you want to switch off normalize used for reset\n     * of styles\n     * @optional\n     */\n    noDefaultNormalize: false,\n\n    /**\n     * Set it to true if you want to get rid of some common flacky tests in VRT\n     * @optional\n     */\n    useStylesForVRT: false,\n\n    /**\n     * Min-width for the sandbox wrapper (number | string)\n     * default – 320\n     * @optional\n     */\n    sandboxMinWidth: 320,\n\n    /**\n     * Max-width for the sandbox wrapper (number | string)\n     * default – 960\n     * @optional\n     */\n    sandboxMaxWidth: '100%',\n\n    /**\n     * This function will supply babel config object directly to babel-loader\n     * for list of options, please refer to https://babeljs.io/docs/en/config-files\n     * @optional\n     * @returns Object\n     */\n    getBabelConfig() {\n        return {...};\n    }\n\n    /**\n     * This function will supply options directly to babel/parser\n     * for list of options, please refer to https://babeljs.io/docs/en/babel-parser\n     * @optional\n     * @returns Array\u003cString\u003e\n     */\n    getBabelParserOptions() {\n        return ['classProperties'];\n    },\n\n    /**\n     * Set it to true if you need to apply babel-loader with config to typecsript code\n     * @optional\n     */\n    applyBabelToTypescriptCode: true,\n\n    /**\n     * Set not standart path fot tsconfig for the project\n     * default – undefined, resolves to path.resolve(process.cwd(), './tsconfig.json');\n     * @optional\n     */\n\n    tsConfigPath: path.resolve(process.cwd(), './tsconfig-new.json');\n\n    /**\n     * This function will tell the styleguide if the component being included\n     * is a specification/example component\n     * @optional\n     */\n    isSpecificationPath(componentMeta, path) {\n        return path.indexOf(`${componentMeta.fileNameWithoutPrefix}.spec`) !== -1;\n    },\n\n    /**\n     * This function allows to set up global objects\n     * in browser environment\n     * @optional\n     */\n    browserSetup() {\n        window.parameters = true;\n    }\n\n    /**\n     * This function returns element, which will be used for wrapping\n     * of the sandboxes content. This element can be used for introducing\n     * different extra features: context providers, props, controls\n     * @optional\n     * @returns {Component}\n     */\n    getComponentWrapper() {\n        return require('MyComponent');\n    },\n\n    /**\n     * Returns an array of all the sections in the styleguide\n     * @returns Array\u003cObject\u003e\n     */\n    getSections() {\n        return [\n            {\n                name: 'MyComponentSection',\n                components: [\n                    require('MyComponent'),\n                ],\n            },\n        ];\n    },\n\n    /**\n     * This function sets public path for the app. It is useful for handling subdirectories\n     * in browser environment\n     * @optional\n     * @returns String\n     */\n    getPublicPath() {\n        return '/';\n    }\n\n    // Return an array of all folders, where\n    // we need to look for components\n    getComponentRoots({ path }) {\n        return [\n            path.resolve(cwd, 'src')\n        ];\n    },\n\n    // This method provide list of exceptions for loaders\n    getExceptionForLoaders({ path }) {\n        return {\n            jsLoader: path.resolve(cwd, 'src'),\n            tsLoader: /src/,\n            tsExtraLoader: /__tests__/,\n        };\n    },\n\n    /**\n     * Returns the webpack loaders list for usage before component props eevaluation\n     * @param {string} path - The \"path\" node module to help you resolve any paths\n     * @returns Array\u003cObject, string\u003e\n     */\n\n    getLoadersForComponents({ path }) {\n        return ['babel-loader'];\n    },\n\n    /**\n     * Returns the webpack configuration for your module setup\n     * @param {string} path - The \"path\" node module to help you resolve any paths\n     * @returns Object\n     */\n    getWebpackConfig({ path }) {\n        const cwd = path.resolve(__dirname, '.');\n\n        // Any custom webpack configuration you need, this will be merged\n        // using webpack-merge\n        return {\n            resolve: {\n                modules: [\n                    path.resolve(cwd, 'src/'),\n                    path.resolve(cwd, 'node_modules/'),\n                ],\n            }\n        };\n    }\n}\n```\n\n### Running and compiling\n\nThe styleguide can be run as a local dev server or be compiled if you want to serve it from another host.\n\n#### Running\n\n```npx badoo-styleguide --config=PATH_TO_STYLEGUIDE_CONFIG.js```\n\n**Note:** Styleguide benefits from caching results of initial build. It makes all subsequents recompilations much faster.\n\n#### Compiling\n\n```npx badoo-styleguide --config=PATH_TO_STYLEGUIDE_CONFIG.js --buildDir=dist/```\n\nOr add it to your package.json \"scripts\" section\n\n```json\n{\n    \"scripts\": {\n        \"styleguide\": \"badoo-styleguide --config=PATH_TO_STYLEGUIDE_CONFIG.js\",\n        \"styleguide:compile\": \"badoo-styleguide --config=PATH_TO_STYLEGUIDE_CONFIG.js --buildDir=dist/\"\n    }\n}\n```\n\nThe buildDir parameter switches off webpack-server and caching.\n\n**Note:** The buildDir is resolved relative to where you ran \"yarn\" from\n\n## How to define and document components\n\nLoaders `js-component` and `ts-component` use `react-docgen` for documentation generation. We check for all exported definitions in files from `getSections` components section. Firstly, we look for the the filename (any filename case or convention), comparing it to the found definitions. If we don't have any definition, we use fallback for the first found definition (previous behaviour). Please use `--debug` for showing these fallbacks in console.\n\nthis is example of how to set component in section in config:\n\n```js\nmodule.exports = {\n    // part of config\n    getSections() {\n        return [\n            {\n                name: 'MyComponentSection',\n                components: [\n                    require('MyComponent'),\n                ],\n            },\n        ];\n    },\n};\n```\n\nthis is a code of component:\n\n```js\ninterface MyComponentProps {\n    name: string;\n}\n\nconst MyComponent: React.FunctionComponent\u003cMyComponentProps\u003e = props =\u003e {\n    const { name } = props;\n\n    return \u003cdiv\u003eThe name is {name}!\u003c/div\u003e;\n};\n\nexport default MyComponent;\n```\n\n## Examples\n\n* [Basic example](https://github.com/badoo/styleguide/tree/master/examples/basic)\n* [Typescript project example](https://github.com/badoo/styleguide/tree/master/examples/typescript)\n\n## Visual helpers\n\nVisual helpers for visual regression tests are available in separate package [@bumble/styleguide-visual-helpers](https://www.npmjs.com/package/@bumble/styleguide-visual-helpers). In nearest major release direct export of `src/visual-helpers` from this package will be removed.\n\n## Debugging\n\nPass `--debug` flag to the command line to get additional debug information.\n\n```bash\nyarn badoo-styleguide --config=PATH_TO_STYLEGUIDE_CONFIG.js --debug\n```\n\n## To Do\n\n* [ ] Branding/Logo\n* [ ] Simplify configuration needed\n* [ ] Add example projects\n* [ ] Explain the philosophy/goals/anti-goals/tradeoffs/pros/cons/roadmap behind inventing another styleguide\n* [ ] Add Travis builds\n* [ ] Add contribution guide\n* [ ] Consider splitting out into styleguide/react and styleguide/react-native to reduce npm dependencies needed upon installation\n* [ ] Move dependencies which are used strictly for development into devDependencies\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadoo%2Fstyleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadoo%2Fstyleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadoo%2Fstyleguide/lists"}