{"id":19009298,"url":"https://github.com/textkernel/oneui","last_synced_at":"2025-04-22T22:47:08.350Z","repository":{"id":38361920,"uuid":"150244118","full_name":"textkernel/oneui","owner":"textkernel","description":"Textkernel OneUI library of reusable UI components","archived":false,"fork":false,"pushed_at":"2025-04-21T06:52:01.000Z","size":65984,"stargazers_count":11,"open_issues_count":13,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-21T07:44:43.418Z","etag":null,"topics":["javascript","react","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://textkernel.github.io/oneui/","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/textkernel.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,"zenodo":null}},"created_at":"2018-09-25T09:58:54.000Z","updated_at":"2025-04-21T06:50:34.000Z","dependencies_parsed_at":"2024-01-01T05:26:36.517Z","dependency_job_id":"9fe95480-7f38-4f0f-abc4-53487ea460f8","html_url":"https://github.com/textkernel/oneui","commit_stats":null,"previous_names":[],"tags_count":161,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textkernel%2Foneui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textkernel%2Foneui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textkernel%2Foneui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textkernel%2Foneui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/textkernel","download_url":"https://codeload.github.com/textkernel/oneui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250337909,"owners_count":21414102,"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":["javascript","react","typescript","ui-components"],"created_at":"2024-11-08T19:07:22.219Z","updated_at":"2025-04-22T22:47:08.334Z","avatar_url":"https://github.com/textkernel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Textkernel OneUI\n\n[![npm version](https://img.shields.io/npm/v/@textkernel/oneui.svg)](https://www.npmjs.com/package/@textkernel/oneui)\n![check](https://github.com/textkernel/oneui/actions/workflows/check.yml/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/textkernel/oneui/badge.svg?branch=master)](https://coveralls.io/github/textkernel/oneui?branch=master)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/textkernel/oneui.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/textkernel/oneui/context:javascript)\n![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/textkernel/oneui)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/@textkernel/oneui.svg)\n\n\u003e Library of reusable React components with theming support\n\n# Getting started\n\nFor live examples of all OneUI components, [click here](https://textkernel.github.io/oneui/).\n\n## Install with npm\n\nWithin your project’s frontend root, install the package from NPM. Make sure it’s marked as production dependency.\n\n```bash\n$ npm i '@textkernel/oneui'\n```\n\n## Set up boilerplate\n\n### Import OneUI base stylesheet\n\nIn your application main Javascript, make sure to import the OneUI base stylesheet. The base stylesheet includes the default OneUI theme.\n\n```javascript\nimport '@textkernel/oneui/dist/oneui.min.css';\n```\n\n### Assign base class to `\u003cbody\u003e`\n\nAssign the base class that has all font definitions to \u003cbody\u003e or to \u003chtml\u003e\n\n```html\n\u003cbody class=\"OneUI-body-text\"\u003e\n    ...\n\u003c/body\u003e\n```\n\n### Custom themes and browser support\n\nTo enable support for older browsers that don’t support CSS variables natively and to apply custom a theme, OneUI comes with a utility that takes on all of these responsibilities. See [Theming](#theming) for more on custom themes.\n\nTo apply a specific theme on top of the library components, the OneUI utility can be used to parse the provided theme file:\n\n```javascript\nimport OneUI from '@textkernel/oneui';\n\nOneUI.init({\n    themeURL: 'http://theme-cdn.com/my-theme.css',\n}).then(() =\u003e ReactDOM.render(\u003cMyApp /\u003e, document.getElementById('root')));\n```\n\nThe utility can take three optional arguments:\n\n-   `themeURL`: URL that provides the file containing the CSS variables that will be used instead of the default ones.\n-   `maxTime`: The maximum amount of time in milliseconds that the loader will wait to parse the external theme, otherwise it will fallback to the default library theme. By default, the timeout is set to 2000 milliseconds.\n-   `ponyfillOptions`: Allow the developer to override the default [css-vars-ponyfill](https://www.npmjs.com/package/css-vars-ponyfill) configuration.\n\n#### IE11 support\n\nOneUI relies on browser support for CSS variables. Support for older browsers such as IE11 can be enabled by using a polyfill. Using the previously mentioned utility will take care of it automatically.\n\n## Using components\n\n1. Import the desired UI component(s) from the library, e.g.:\n\n```javascript\nimport { Button } from '@textkernel/oneui';\n```\n\n2. Include the component on your page:\n\n```jsx\n\u003cButton type=\"submit\"\u003eThis is a button\u003c/Button\u003e\n```\n\n### Undocumented props\n\nPlease note that any properties that are not documented in the component prop types definition are applied to the top level HTML element unless mentioned otherwise. These undocumented props are also not described in Storybook.\n\n# Storybook\n\nOneUI comes with a Storybook of examples for all components. [Click here](https://textkernel.github.io/oneui/) to check it out.\n\nIn order to run it yourself locally...\n\n1. Make sure you have Storybook installed (globally):\n\n```bash\n$ npm i -g @storybook/cli\n```\n\n2. Within the OneUI root, run `npm run storybook`\n3. Go to http://localhost:9001 to check out examples of all OneUI components\n\n# Theming\n\nAll CSS variables (‘[custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)’) exposed by OneUI can be customized. A theme file is an additional stylesheet that consists of a reassignment of all variables with values that are different from their defaults. Theme files should not contain any CSS selectors or properties - only CSS variables and values, e.g.:\n\n```css\n--color-brand-50: red;\n--font-size-base: 12px;\n```\n\n# Contributing\n\n-   Did you find a bug or do you have a feature proposal? Please open a new issue.\n-   If your IDE does not support [EditorConfig](https://editorconfig.org/), please install a plugin (e.g. for VS Code).\n-   Please make sure to read the [developer guidelines](CONTRIBUTING.md) before contributing.\n\n# Copyright\n\nCode and documentation © 2020 Textkernel B.V.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftextkernel%2Foneui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftextkernel%2Foneui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftextkernel%2Foneui/lists"}