{"id":18494942,"url":"https://github.com/qaware/scale-react-neutral","last_synced_at":"2025-05-14T02:33:07.720Z","repository":{"id":42511144,"uuid":"462260535","full_name":"qaware/scale-react-neutral","owner":"qaware","description":"Native React reimplementation of Telekom Scale Framework","archived":false,"fork":false,"pushed_at":"2023-01-07T23:09:50.000Z","size":3526,"stargazers_count":1,"open_issues_count":9,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-25T16:42:20.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qaware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-22T11:08:36.000Z","updated_at":"2022-02-22T13:13:15.000Z","dependencies_parsed_at":"2023-02-08T03:16:36.154Z","dependency_job_id":null,"html_url":"https://github.com/qaware/scale-react-neutral","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qaware%2Fscale-react-neutral","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qaware%2Fscale-react-neutral/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qaware%2Fscale-react-neutral/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qaware%2Fscale-react-neutral/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qaware","download_url":"https://codeload.github.com/qaware/scale-react-neutral/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239210498,"owners_count":19600547,"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-06T13:22:48.262Z","updated_at":"2025-02-16T23:26:52.995Z","avatar_url":"https://github.com/qaware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @qaware-oss/scale-react-neutral\n\nThis project aims to reimplement the web components of [Telekom Scale](https://github.com/telekom/scale) as dedicated\nreact components using the original css. This library replaces `@telekom/scale-components-react-neutral`.\n\n## Usage\n\nThe project is available in the central npm repository. Just add the following snippet to your package.json:\n\n```json\n\"dependencies\": {\n    \"@qaware-oss/scale-react-neutral\": \"^0.2.0\",\n}\n```\n\n\n### CSS\n\nIn your `index.tsx` or `App.tsx`, import the base css:\n\n```javascript\nimport '@qaware-oss/scale-react-neutral/dist/qaware-scale-react.css';\nimport '@telekom/scale-components-neutral/dist/scale-components/scale-components.css';\n```\n\n### Components\n\nIn your code import and use the components like this:\n\n```javascript\nimport {ScaleTextarea} from '@qaware-oss/scale-react-neutral';\n```\n\nThe source contains Storybook examples for every component, showing its usage. In general, the components attempt to\nmatch the original Scale API as closely as possible.\n\n### Build\n\nIf you want to build the project yourself, just run `npm install \u0026\u0026 npm run build`\n\n## Motivation\n\nThe Scale components are implemented as native web components. For using the components with react, auto generated\nwrapper components are provided. These wrapper components unfortunately suffer from some major drawbacks.\n\n### Missing reactivity\n\nReact components are expected to always react to the values provided by their parent component.\nAn `\u003cinput value=\"Foo\" /\u003e` must always display the value \"Foo\" regardless of user interaction.\n\nThe Scale react components do not behave this way. A Scale input `\u003cScaleTextField value=\"Foo\" \u003e` is still editable by\nthe user, i.e. its intrinsic state is not properly driven by the attributes given to it from the outside.\n\n### No integration into React event system\n\nThe Scale react components run on their own event system. Types used for event parameters are different from the default\nReact event types. Event bubbling does not work correctly, since the two event systems do not know of each other.\n\n### No support for react-router-dom\n\nInternal links in a typical React application are handled by react-router-dom, using `\u003cLink to=\"/\" /\u003e` elements. The\nscale react components only allow `\u003ca href=\"/\" /\u003e` elements. This forces the developer to convert react-router-dom links\nto regular hrefs, loosing some benefits of react-router-dom.\n\n### Components not managed by React\n\nWith the original Scale react-components, React only renders the web-component tag which is then hydrated by custom\nScale Javascript. React does not know about the externally rendered html code inside the web components in wipes the\ncode when the component is re-rendered by react. This can lead to serious performance issues where Scale web components\nare continuously re-rendered by React and then rehydrated by Scale.\n\n## Available components\n\n| **Regular Scale component** | **@qaware-oss/scale-react-neutral** | **Status** | **Remarks**                    |\n|-----------------------------|-------------------------------------|------------|--------------------------------|\n| scale-accordion             | ScaleAccordion                      | ✅          |                                |\n| scale-breadcrumb            | ScaleBreadcrumb                     | ✅          |                                |\n| scale-button                | ScaleButton                         | ✅          |                                |\n| scale-card                  | ScaleCard                           | ✅          |                                |\n| scale-checkbox-group        | -                                   | ❌          |                                |\n| scale-checkbox              | ScaleCheckbox                       | ✅          |                                |\n| scale-data-grid             | -                                   | ❌          |                                |\n| scale-date-picker           | -                                   | ❌          |                                |\n| scale-divider               | ScaleDivider                        | ✅          |                                |\n| scale-dropdown              | ScaleDropdown                       | ✅          |                                |\n| scale-menu-flyout           | -                                   | ❌          |                                |\n| scale-icon                  | ScaleIcon                           | ✅          |                                |\n| scale-link                  | ScaleLink                           | ✅          |                                |\n| scale-list                  | -                                   | ❌          |                                |\n| scale-modal                 | ScaleModal                          | ✅          |                                |\n| scale-pagination            | ScalePagination                     | ✅          |                                |\n| scale-progress-bar          | -                                   | ❌          |                                |\n| scale-radio-button-group    | -                                   | ❌          |                                |\n| scale-radio-button          | -                                   | ❌          |                                |\n| scale-rating-stars          | -                                   | ❌          |                                |\n| scale-sidebar-navigation    | -                                   | ❌          |                                |\n| scale-slider                | -                                   | ❌          |                                |\n| scale-switch                | ScaleSwitch                         | ✅          |                                |\n| scale-tab-nav               | -                                   | ❌          |                                |\n| scale-table                 | ScaleTable                          | ✅          |                                |\n| scale-tag                   | -                                   | ❌          |                                |\n| scale-text-area             | ScaleTextarea                       | ✅          |                                |\n| scale-text-field            | ScaleTextField                      | ✅          |                                |\n| scale-callout               | -                                   | ❌          |                                |\n| scale-notification-badge    | -                                   | ❌          |                                |\n| scale-notification-banner   | -                                   | ❌          |                                |\n| scale-notification-message  | -                                   |            | icons missing in scale-neutral |\n| scale-notification-toast    | -                                   |            | icons missing in scale-neutral |\n| scale-toggle-group          | -                                   | ❌          |                                |\n| scale-tooltip               | -                                   | ❌          |                                |\n\nIn addition, all icons from the neutral theme are available as react components.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqaware%2Fscale-react-neutral","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqaware%2Fscale-react-neutral","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqaware%2Fscale-react-neutral/lists"}