{"id":13422614,"url":"https://github.com/ccontrols/component-controls","last_synced_at":"2025-07-12T15:34:58.824Z","repository":{"id":37273951,"uuid":"239012707","full_name":"ccontrols/component-controls","owner":"ccontrols","description":"A next-generation tool to create blazing-fast documentation sites.","archived":false,"fork":false,"pushed_at":"2022-12-15T16:43:25.000Z","size":123540,"stargazers_count":81,"open_issues_count":16,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-04T08:41:29.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://component-controls.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ccontrols.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-07T20:02:34.000Z","updated_at":"2025-01-20T02:22:33.000Z","dependencies_parsed_at":"2023-01-29T03:45:31.081Z","dependency_job_id":null,"html_url":"https://github.com/ccontrols/component-controls","commit_stats":null,"previous_names":[],"tags_count":276,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccontrols%2Fcomponent-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccontrols%2Fcomponent-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccontrols%2Fcomponent-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccontrols%2Fcomponent-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ccontrols","download_url":"https://codeload.github.com/ccontrols/component-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244066180,"owners_count":20392406,"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-07-30T23:00:48.860Z","updated_at":"2025-03-17T16:10:56.595Z","avatar_url":"https://github.com/ccontrols.png","language":"TypeScript","readme":"# Table of contents\n\n-   [About](#about)\n-   [Showcase sites](#showcase-sites)\n    -   [1. documentation](#1-documentation)\n    -   [2. grommet-controls](#2-grommet-controls)\n    -   [3. theme-ui design system](#3-theme-ui-design-system)\n    -   [4. starter projects](#4-starter-projects)\n-   [Motivation](#motivation)\n-   [Inspiration](#inspiration)\n-   [Roadmap](#roadmap)\n\n# About\n\n`component-controls` is a next-generation tool to help create blazing-fast documentation sites for your libraries and components.\n\nUsing [MDX](https://mdxjs.com) or javascript to author documentation files, the sites can be generated with highly-optimized site generators as [gatsby](https://www.gatsbyjs.com) or [nextjs](https://nextjs.org).\n\nBefore starting, take a look at our blog post [gatsby vs nextjs vs storybook](https://component-controls.com/blogs/gatsby-vs-nextjs-vs-storybook) comparison for generating static documentation sites.\n\n# Showcase sites\n\n## 1. documentation\n\nWe believe in the practice of dogfooding, thus we have created the full documentation sites for component-controls using - well, component-controls. Everything from blog posts, tutorials, author profiles to auto-generated component documentation, and testing pages.\n\n-   [built with gatsby](https://component-controls.com/) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/gatsby)\n\n-   [built with nextjs](https://nextjs.component-controls.com/) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/nextjs)\n\n-   [built with webpack 4](https://webpack.component-controls.com/) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/react-webpack)\n\n-   [built with webpack 5](https://webpack5.component-controls.com/) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/react-webpack-5)\n\n-   [built with storybook 6 without addon-docs](https://storybook.component-controls.com) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/storybook-6-no-docs)\n\n-   [built with storybook 6](https://components-storybook-6.netlify.app/) - [source](https://github.com/ccontrols/component-controls/tree/master/examples/storybook-6)\n\n## 2. grommet-controls\n\nThis site shows how to create documentation for a custom react UI component library\n\n[grommet-controls](https://grommet-controls.netlify.app) - [source](https://github.com/atanasster/grommet-controls)\n\n## 3. theme-ui design system\n\nThis site showcases creating documentation sites for [third-party libraries](https://component-controls.com/tutorial/getting-started/external-libraries), that are installed in the `node_modules` folder of your project\n\n[theme-ui design system](https://theme-ui-design-system.netlify.app) - [source](https://github.com/ccontrols/theme-ui-design-system)\n\n## 4. starter projects\n\nA collection of simple starter projects, showcasing how to create an MDX pure documentation page, and MDX custom documentation page with a component interactive `story` and, an ESM javascript page that automatically creates component documentation.\n\n[built with gatsby](https://gatsby-controls-starter.netlify.app) - [source](https://github.com/ccontrols/gatsby-controls-starter)\n\n[built with nextjs](https://nextjs-controls-starter.netlify.app) - [source](https://github.com/ccontrols/nextjs-controls-starter)\n\n[built with webpack 4](https://webpack-controls-starter.netlify.app) - [source](https://github.com/ccontrols/webpack-controls-starter)\n\n[built with webpack 5](https://webpack-5-controls-starter.netlify.app) - [source](https://github.com/ccontrols/webpack-5-controls-starter)\n\n[built with storybook 5](https://storybook-5-controls-starter.netlify.app/?path=/story/first-page--page) - [source](https://github.com/ccontrols/storybook-5-controls-starter)\n\n[built with storybook 6](https://storybook-6-controls-starter.netlify.app) - [source](https://github.com/ccontrols/storybook-6-controls-starter)\n\n# Motivation\n\n-   Create a components development environment with testing as a first-class feature.\n-   Provide out-of-the-box documentation experience with markdown pages for home page, blogging, and general project documentation.\n-   Use smart \"super-bundlers\" (gatsby, nextjs) to build compact and fast documentation sites.\n-   Decouple the user interface from the loading of the 'stories' = modular design.\n-   Do not modify the source files (both story and component files) at instrumentation-time as much as possible to avoid random build/run-time errors. The exception is only where necessary, ie instrumenting coverage or performance profiling probes.\n-   Ability to document \"external\" component libraries, living in a separate package from the \"stories\" package.\n-   Built-in [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) instrumentation module.\n-   Create and support open declarative story formats.\n\n# Inspiration\n\nMany developments have contributed to the creation of `component-controls`, a few of them are:\n\n-   [storybook](https://storybook.js.org) is the original component development system that helps teams to design, develop, and test components. The strong support for testing and the creation of an open [Component Story Format](https://github.com/storybookjs/csf) was an inspiration, as well as the [Storybook Addon Knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs) for providing configurable component properties.\n\n-   [docz](https://www.docz.site) has a beautiful architecture and introduced non-proprietary [gatsby](https://www.gatsbyjs.org) build engine. This monorepo was also heavily influenced by the `docz` project repository structure.\n\n-   [docusaurus](https://docusaurus.io) creates very clean and effective UX for documentation websites. Provides excellent options for project blogging, versioning, translation, and algolia-powered search.\n\n-   [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) advancements have been greatly responsible for making possible the parsing and analysis features of this library.\n\n-   [theme-ui](https://theme-ui.com) is the driving force for standardizing `react` theming and design systems. `theme-ui` is used by our project as the theming and components founding block.\n\n-   [mdx](https://mdxjs.com) is driving the adoption of JSX in Markdown and allows writing rich, interactive documentation pages.\n\n# Roadmap\n\n-   [x] Core packages\n-   [x] Support ESM and MDX stories format\n-   [x] Instrumentation packages\n-   [x] UI Libraries\n-   [x] Storybook integration with addon-docs\n-   [x] Storybook integration without addon-docs (replace all storybook loaders)\n-   [x] Standalone webpack compiler API\n-   [x] HMR\n-   [x] Gatsby standalone app/static app builder\n-   [x] Nextjs standalone app/static app builder\n-   [x] Integrated testing facilites\n-   [x] Design tokens componnets to document design systems\n-   [x] Support frontmatter MDX declarations\n-   [ ] Multiple frameworks support (Vue, Angular, tbd)\n-   [ ] Coverage and performance profiling instrumentation\n","funding_links":[],"categories":["Dev Tools","Static Site Generator \u0026 Documentation Generator \u0026 Blogging","TypeScript"],"sub_categories":["Miscellaneous","Parallax"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccontrols%2Fcomponent-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fccontrols%2Fcomponent-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccontrols%2Fcomponent-controls/lists"}