{"id":21497012,"url":"https://github.com/financial-times/origami","last_synced_at":"2026-02-26T12:10:10.256Z","repository":{"id":37432327,"uuid":"146879033","full_name":"Financial-Times/origami","owner":"Financial-Times","description":"Origami: FT's Design System","archived":false,"fork":false,"pushed_at":"2025-05-15T16:54:38.000Z","size":181030,"stargazers_count":64,"open_issues_count":184,"forks_count":14,"subscribers_count":86,"default_branch":"main","last_synced_at":"2025-05-15T17:48:54.222Z","etag":null,"topics":["origami"],"latest_commit_sha":null,"homepage":"https://origami.ft.com/","language":"JavaScript","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/Financial-Times.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-31T10:43:23.000Z","updated_at":"2025-05-15T16:53:48.000Z","dependencies_parsed_at":"2023-10-16T18:56:57.620Z","dependency_job_id":"ddbd3347-a06a-4b0f-8b76-2ba8724e1380","html_url":"https://github.com/Financial-Times/origami","commit_stats":{"total_commits":17265,"total_committers":250,"mean_commits":69.06,"dds":0.8137851143932813,"last_synced_commit":"b44821abd14339111c406d223d62edb3fa5b4c57"},"previous_names":[],"tags_count":1007,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Forigami","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Forigami/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Forigami/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Financial-Times%2Forigami/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Financial-Times","download_url":"https://codeload.github.com/Financial-Times/origami/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"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":["origami"],"created_at":"2024-11-23T16:20:31.690Z","updated_at":"2026-02-26T12:10:10.247Z","avatar_url":"https://github.com/Financial-Times.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Origami Component System\n\nWelcome to Origami!\n\nThis is the repository for the Origami o2 \u0026 o3 components, libraries, and apps that make\nup the Origami Component System.\n\n## Using Origami o3 in your project\n\nRead the [_o3 Getting Started_](docs/o3-getting-started.md) guide to use Origami o3 styles and components in your project.\n\n## Maintaining Origami o2 in your project\n\nLegacy documentation for using the o2 component system can be found in [docs/legacy-o2-docs](/docs/legacy-o2-docs/index.md).\n\n## Proposals\n\nIf you'd like to make a proposal for a new component or anything else, go ahead and [open an issue](https://github.com/Financial-Times/origami/issues/new).\n\n## Projects in this repository\n\nThis repository houses many projects of different kinds. Most of them have\nREADMEs of their own where you can learn more about them.\n\n### apps/storybook\n\n[Origami's storybook](./apps/storybook), served at \u003chttps://origami.ft.com/storybook/\u003e.\n\n### apps/website\n\n[Origami Design System](https://origami.ft.com/) documentation and usage guides.\n\n### components and libraries\n\nComponents and libraries that implement the FT's design system for the web.\n\n### presets\n\nPresets for development tools that make it easier to build consistent\ncomponents.\n\n### scripts\n\nScripts for maintenance of the repository itself\n\n### scripts/components\n\nDefault scripts used in component package.jsons for building and testing components.\n\n### tools\n\nTools used to build and test Origami components\n\n## Running Origami locally\n\nBelow are the steps to run and maintain this repository locally.\n\n### Requirements\n\nThere is some software you'll need on your computer in order to work with this\nrepo.\n\n#### volta\n\nWe use [volta](https://docs.volta.sh/guide/getting-started) to make sure everyone\nis using the same versions of node and npm.\n\n```shell\ncurl https://get.volta.sh | bash\n```\n\n#### git-lfs\n\nTo keep the repo speedy, we use [git-lfs](https://git-lfs.github.com/) to store\nbinary files like the images on the website.\n\n```shell\nbrew install git-lfs\ngit lfs install\n```\n\n#### entr\n\n[entr](https://eradman.com/entrproject/) is used in the component `watch` command for watching files\n\n```shell\nbrew install entr\n```\n\n#### rg\n\n[ripgrep](https://github.com/BurntSushi/ripgrep) is used in the component `watch` command for quickly choosing the files to watch for changes.\n\n```shell\nbrew install rg\n```\n\n### Quick start\n\n1. First, clone the repo\n\n   ```shell\n   git clone git@snoot.club:Financial-Times/origami.git\n   cd origami\n   ```\n\n2. Then npm install. This will install all the components into the root `node_modules`, allows all the components to [find one another](https://nodejs.org/api/modules.html#loading-from-node_modules-folders).\n\n   ```shell\n   npm install\n   ```\n\n3. Choose the appropriate command based on the project:\n\n   - For Origami's o2 components storybook, run the following command:\n\n     ```shell\n     npm run storybook\n     ```\n\n   - For Origami's o3 components storybook, run the following commands:\n\n     ```shell\n     npm run build-storybook -w apps/o3-storybook/\n     npm run storybook -w apps/o3-storybook/\n     ```\n\n   - For Origami Design System website, run the following command:\n\n     ```shell\n     npm run dev -w apps/website\n     ```\n\n### Developing components\n\n#### Setup\n\nFollow the [quick start guide](#quick-start) to get started developing components.\n\n#### Preview demos\n\n##### Storybook\n\nStorybook can be run locally with the `storybook` command.\n\n```shell\nnpm run storybook\n```\n\nTo view components in other brands in Storybook, set the `STORYBOOK_BRAND` environment variable with the brand.\n\n```shell\nSTORYBOOK_BRAND=internal npm run storybook\n```\n\nSome demos in Storybook are embedded through the Build Service, meaning that local changes will not appear on Storybook. This can be verified by inspecting the `*.story.ts` file for a component and seeing if the root element is an `iframe`. Local development for these components can still be achieved by using [legacy](#legacy) demos instead.\n\n##### Legacy\n\nComponent demos formerly on the Origami Registry have now been migrated to Storybook.\n\nThe legacy demos may be useful for development purposes where a demo in Storybook is sourced from Build Service as mentioned in the previous section. You can view these using the build and start commands:\n\n```shell\nnpm run build -w components/o-example\nnpm run start -w components/o-example\n```\n\nThis will generate demos for all brands that the component is configured to be a part of.\n\n###### Watch demos\n\nTo serve the demos, and have them automatically rebuild when the code changes you can use the `watch` command.\n\n```shell\nnpm run watch -w components/o-example\n```\n\n#### Setting brands\n\nSome components you create may only be part of one brand. We recommend you follow these guidelines when contributing branded components:\n\n##### Storybook\n\nStorybook component demos can be branded by introducing a brand sub-directory within the `stories` folder, and placing brand-specific stories within it. e.g:\n\n```\no-labels/\n    demos/\n    src/\n    stories/\n       core/\n           // Core brand stories go in this directory.\n           labels.stories.tsx\n           labels.scss\n       //Unbranded stories can be placed in the root of stories/\n       labels.stories.tsx\n       labels.scss\n```\n\n[o-labels](https://github.com/Financial-Times/origami/tree/main/components/o-labels/stories) provides a good example of this.\n\n##### Legacy\n\nLegacy Origami Registry component demos are branded through the `origami.json` manifest in the component's root directory. You can find how to use this file in the [Origami documentation](https://origami.ft.com/documentation/manifests/origami-json/#brands).\n\n#### Test\n\nRun tests for a given component with the npm `test` script.\n\n```shell\nnpm run test -w components/o-example\n```\n\nRun tests for all components with the npm `test` script.\n\n```shell\nnpm run test -w components\n```\n\n_Note: This will take a good amount of time when running on localhost._\n\nRun JavaScript tests in a browser using the `debug:js` script.\n\n```shell\nnpm run debug:js -w components/o-example\n```\n\nLint the code of a given component with the npm `lint` script.\n\n```shell\nnpm run lint -w components/o-example\n```\n\nRun linting for all components with the npm `test` script.\n\n```shell\nnpm run lint -w components\n```\n\n_Note: This will take a good amount of time when running on localhost._\n\n### Tips\n\n- If you're working on the storybook configuration and it starts acting weird\n  and not working, try running it without the cache:\n  `npm run storybook -- --no-manager-cache`\n\n## Chromatic\n\nOrigami implements visual regression tests for o3 components with Chromatic.\n\nMore details on how Chromatic can test Pull Requests can be found in the [Contribution notes](https://github.com/Financial-Times/origami/blob/main/CONTRIBUTING.md#pull-requests-and-visual-regression-tests).\n\n### Billing\n\nChromatic usage is calculated in snapshots. You can check on the current consumption of our monthly allowance by:\n\n- Logging into Chromatic\n- Click **Billing** in the left side menu\n\nHere you can see the current billing periods usage as well historical periods.\n\n#### Notifications\n\nAn alert has been set for when the snapshot usage reaches 42,500 (50% of the current 85,000 total).\n\nThe alert sends an email to the [#origami-notifcation](https://financialtimes.enterprise.slack.com/archives/C046BHSDZR9) channel.\n\n## Contributing\n\nIf you want to contribute, check out [CONTRIBUTING.md](./CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinancial-times%2Forigami","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinancial-times%2Forigami","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinancial-times%2Forigami/lists"}