{"id":19714442,"url":"https://github.com/diplodoc-platform/components","last_synced_at":"2026-02-16T14:15:51.052Z","repository":{"id":37798835,"uuid":"259930868","full_name":"diplodoc-platform/components","owner":"diplodoc-platform","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-25T09:02:10.000Z","size":8505,"stargazers_count":12,"open_issues_count":25,"forks_count":23,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-04-25T09:47:47.946Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://diplodoc-platform.github.io/components/","language":"TypeScript","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/diplodoc-platform.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":"AUTHORS","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-04-29T13:20:42.000Z","updated_at":"2025-04-25T09:04:18.000Z","dependencies_parsed_at":"2023-02-16T21:31:29.339Z","dependency_job_id":"ed2320e1-cd47-4340-b411-39f0ed39fa73","html_url":"https://github.com/diplodoc-platform/components","commit_stats":null,"previous_names":["diplodoc-platform/components","yandex-cloud/docs-components"],"tags_count":154,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diplodoc-platform%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diplodoc-platform%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diplodoc-platform%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diplodoc-platform%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diplodoc-platform","download_url":"https://codeload.github.com/diplodoc-platform/components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251569665,"owners_count":21610600,"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","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":[],"created_at":"2024-11-11T22:32:06.794Z","updated_at":"2026-02-16T14:15:51.045Z","avatar_url":"https://github.com/diplodoc-platform.png","language":"TypeScript","readme":"[![NPM version](https://img.shields.io/npm/v/@diplodoc/components.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/components) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://diplodoc-platform.github.io/components)\n\n# YFM Docs Components\n\nКомпоненты для Yandex Flavored Markdown Documentation.\n\n## Installation\n\n`npm i @diplodoc/components`\n\n## Usage\n\nAppend js\n\n```js\n// In most cases append transform runtime\nimport \"@doc-tools/transform/dist/js/yfm.js\";\n\nimport {createRoot} from 'react-dom/client';\nimport {ThemeProvider} from '@gravity-ui/uikit';\n\n// configure components\nimport {configure as configureUikit} from '@gravity-ui/uikit';\nimport {configure as configureDocs} from '@diplodoc/components';\n\nconfigureUikit({lang: 'ru'});\n\n// can be reconfigured in any moment\nconfigureDocs({\n    lang: 'ru',\n    // optionally configure allowed translations\n    loc: {ru, en, tr, ...}\n})\n\n// The theme must be applied. To do that wrap your app in ThemeProvider\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n    \u003cThemeProvider theme=\"light\"\u003e\n        \u003cApp /\u003e\n    \u003c/ThemeProvider\u003e,\n);\n```\n\nAppend css\n\n```css\n/*project.css*/\n\n/*Append components styles*/\n@import '@diplodoc/components';\n\n/*Append components theme*/\n@import '@diplodoc/components/themes/common';\n\n/*In most cases append transform styles*/\n@import '@doc-tools/transform/dist/css/yfm.css';\n```\n\n## Development\n\nTo build the project correctly you need to install `python@2`.\nVisit [python.org/downloads](https://www.python.org/downloads/release/python-2718/) to get the latest version.\n\nInstall Dependencies\n\n```shell\nnpm ci\ncd demo \u0026\u0026 npm ci\n```\n\nTo start the development server with storybook run the following:\n\n```shell\nnpm run dev\n```\n\n## Testing\n\nWe use [Playwright](https://playwright.dev/docs/intro) for testing.\n\n### Running tests in Docker\n\n**Note:** Tests run in Docker container to ensure consistent screenshots across different operating systems (Mac, Linux, Windows).\n\nAll tests:\n\n```bash\nnpm run playwright:docker\n```\n\nSingle test:\n\n```bash\n./playwright/playwright-docker.sh 'npm run playwright -- src/components/YourComponent/__tests__/YourComponent.spec.ts'\n```\n\nSeveral sets of test files from different folders:\n\n```bash\n./playwright/playwright-docker.sh 'npm run playwright -- src/components/Component1/__tests__ src/components/Component2/__tests__'\n```\n\nUpdate snapshots:\n\n```bash\nnpm run playwright:docker:update\n```\n\nClear Docker cache (if you have issues with dependencies):\n\n```bash\nnpm run playwright:docker:clear-cache\n```\n\n### Running tests on Windows\n\n```bash\nnpm run playwright:docker:windows\n```\n\nThese commands run storybook server before tests.\n\nIf storybook server is already running, playwright will use it for tests and won't run another server.\n\n### Test reports\n\nTo see test reports run:\n\n```bash\nnpx playwright show-report\n```\n\n### Writing and updating tests\n\nAll tests are in `./__tests__` folder.\n\n`**.spec.ts` files contain test code.\nTo write or change tests use [Playwright documentation](https://playwright.dev/docs/intro).\n\nFor screenshot testing you need write page URL in your test file. You need page **without storybook panel**.\n\n![Page with storybook panel](.github/assets/page-with-storybook-panel.png)\nOpen page without storybook panel in new tab by using 'Open canvas in new tab' button and **use that URL in tests.**\n\n![Page without storybook panel](.github/assets/page-without-storybook-panel.png)\n\nAfter running tests playwright will create folder for snapshots (if it didn't exist).\n\n`**.__screenshots__` folders contain screenshots which are used for comparison with test screenshots.\n\nIf reference screenshot is incorrect you can update it:\n\n```bash\nnpm run playwright:docker:update\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiplodoc-platform%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiplodoc-platform%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiplodoc-platform%2Fcomponents/lists"}