{"id":13516478,"url":"https://github.com/SAP/fundamental-react","last_synced_at":"2025-03-31T06:31:07.329Z","repository":{"id":33273350,"uuid":"147861935","full_name":"SAP/fundamental-react","owner":"SAP","description":"React implementation of the reusable component library designed in Fundamental Library Styles","archived":false,"fork":false,"pushed_at":"2025-03-24T14:05:26.000Z","size":124393,"stargazers_count":190,"open_issues_count":81,"forks_count":77,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-03-31T04:01:40.604Z","etag":null,"topics":["fundamentals","open-source","react-components","reactjs","sap-fundamentals"],"latest_commit_sha":null,"homepage":"https://sap.github.io/fundamental-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2018-09-07T18:43:00.000Z","updated_at":"2025-03-26T06:13:58.000Z","dependencies_parsed_at":"2024-01-13T19:26:29.556Z","dependency_job_id":"33622c88-6c3f-46cf-80e8-45ae296b3606","html_url":"https://github.com/SAP/fundamental-react","commit_stats":{"total_commits":1845,"total_committers":67,"mean_commits":27.53731343283582,"dds":0.6634146341463414,"last_synced_commit":"2fd739e162619931f3a6857f2da6f7d07058f2a5"},"previous_names":[],"tags_count":634,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP","download_url":"https://codeload.github.com/SAP/fundamental-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429459,"owners_count":20775805,"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":["fundamentals","open-source","react-components","reactjs","sap-fundamentals"],"created_at":"2024-08-01T05:01:22.594Z","updated_at":"2025-03-31T06:31:07.284Z","avatar_url":"https://github.com/SAP.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Fundamental React\n\n[![REUSE status](https://api.reuse.software/badge/github.com/SAP/fundamental-react)](https://api.reuse.software/info/github.com/SAP/fundamental-react)\n[![npm version](https://badge.fury.io/js/fundamental-react.svg)](//www.npmjs.com/package/fundamental-react)\n[![Minified Size](https://badgen.net/bundlephobia/min/fundamental-react)](https://bundlephobia.com/result?p=fundamental-react)\t\n[![Minzipped Size](https://badgen.net/bundlephobia/minzip/fundamental-react)](https://bundlephobia.com/result?p=fundamental-react)\n[![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=main)](https://travis-ci.org/SAP/fundamental-react)\n[![Coverage Status](https://coveralls.io/repos/github/SAP/fundamental-react/badge.svg?branch=main)](https://coveralls.io/github/SAP/fundamental-react?branch=main)\n[![Slack](https://img.shields.io/badge/slack-ui--fundamentals-blue.svg?logo=slack)](https://join.slack.com/t/ui-fundamentals/shared_invite/enQtNTIzOTU0Mzc2NTc5LWQzZWI5MWFhYjE5OTc4YzliN2JhOTc1ZjQxZTg1YjZiMWZiYzRkNjMwYzgyMmFkYmNhZDVjMWE5MDIzOWEzMmM)\n\n\u003ca href=\"https://www.netlify.com\"\u003e\n  \u003cimg src=\"https://www.netlify.com/img/global/badges/netlify-light.svg\" alt=\"Deploys by Netlify\" /\u003e\n\u003c/a\u003e\n\n## Description\n\nThe `fundamental-react` library is a set of [React](https://reactjs.org/) components built using [SAP Fundamental Styles](https://sap.github.io/fundamental-styles/).\n\nThe Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.\n\n## API Reference\n\nSee [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.\n\n## Requirements\n\nYou will need to install [Node and Node Package Manager](https://www.npmjs.com/get-npm).\n\n## Polyfills\n\nFundamental React requires a polyfill for:\n- [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)\n- [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)\n- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n\nYou will need to add your own polyfills. See [core-js](https://github.com/zloirock/core-js#commonjs-api) for instructions.\n\n## Getting Started\n\nFor an existing react application, follow the steps below:\n\n1. Install `fundamental-react`.\n\n    ```javascript\n    npm install fundamental-react\n    ```\n\n1. All components are currently packaged together with their respective `css`, you will need to edit your webpack configuration to handle these files. See [css-loader](https://github.com/webpack-contrib/css-loader).\n\n1. Import components as needed. See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.\n    ```javascript\n    import { MessageStrip } from 'fundamental-react/lib/MessageStrip';\n    ```\n    or\n    ```javascript\n    import { MessageStrip } from 'fundamental-react';\n    ```\n\n    \u003e **NOTE:** Importing from specific component is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.\n\n\n1. This project does not contain fonts and icons - they must be added to your project separately. Download [Font 72](https://experience.sap.com/fiori-design-web/downloads/#download-font-72) and [SAP icons](https://experience.sap.com/fiori-design-web/downloads/#sap-icon-font). After adding fonts and icons to your project, include the following in your css:\n\n```css\n    @font-face {\n        font-family: \"72\";\n        src: url(\"path/to/fonts\") format(\"woff\"); /* Bold, Light, Regular available in woff and woff2 */\n        font-weight: normal;\n        font-style: normal;\n    };\n\n    @font-face {\n        font-family: \"SAP-icons\";\n        src: url(\"path/to/icons\") format(\"woff\"); /* available in woff, woff2 and ttf */\n        font-weight: normal;\n        font-style: normal;\n    }\n```\n\nAdditionally, edit your webpack configuration to load font and icon fonts - see [file-loader](https://webpack.js.org/loaders/file-loader/).\n\nAll styles are based on `rem` units. Include the following in your CSS to ensure components are sized correctly:\n\n```css\n    html {\n        font-size: 16px;\n    }\n```\n\n## Versioning\n\nThe `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the `[MAJOR].[MINOR].[PATCH]` numbering system (also known as `[BREAKING].[FEATURE].[FIX]`).\n\nMerges to the `main` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ `[MAJOR].[MINOR].[PATCH]-rc.[RC]`).\n\nThe following circumstances will be considered a **BREAKING** change:\n* A component’s existing API is altered (with the exception of additions)\n* The existing underlying HTML markup of a component is altered\n* An existing unit test is altered to account for either of the above\n\nThe following circumstances will NOT be considered a **BREAKING** change:\n* Additions to a component’s API\n* Non-visual HTML attribute changes/additions (such as `role`, `aria-*`, `data-*`)\n* An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as `role`, `aria-*`, `data-*`)\n\n## CSS Modules\n\nThis library supports [css-modules](https://github.com/css-modules/css-modules). The motivation for this support is to be able to include multiple versions or instances of fundamental styles on the same page without collisions in styles.  This can be useful if you have a page using fundamental-ngx alongside fundamental-react, for example.\n\nOne way to use fundamental-react with hashed class names is to pass the library code through css-loader in your webpack config\n\n```js\n// If you have an existing css rule\n{\n    test: /.css$/,\n    exclude: [\n        /node_modules\\/fundamental-styles/\n    ],\n    use: [\n        'style-loader',\n        'css-loader'\n    ]\n},\n// run css-loader with modules enabled for css files from fundamental-styles\n{\n    test: /.css$/,\n    include: [\n        /node_modules\\/fundamental-styles/\n    ],\n    use: [\n        'style-loader',\n        {\n            loader: 'css-loader',\n            options: {\n                modules: {\n                    localIdentName: '[local]-[sha1:hash:hex:6]'\n                }\n            }\n        }\n    ]\n},\n```\n\nIt's important to include `[local]` in the localIdentName which keeps the class name in the hash. This is because some of the style rules in fundamental-styles reference the name of the class, like `[class*=level]`.\n\n## Known Issues\n\nPlease see [Issues](https://github.com/SAP/fundamental-react/issues).\n\n## Support\n\nIf you encounter an issue or want to request a feature, you can [create an issue](https://github.com/SAP/fundamental-react/issues/new).\n\n## Contributing\n\nIf you want to contribute, please check the [SAP Contribution Guidelines](https://github.com/SAP/.github/blob/main/CONTRIBUTING.md), the [Contribution Guidelines](https://github.com/SAP/fundamental-react/blob/main/.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide).\n\n## Similar Projects\n\n-   [Angular implementation of SAP Fundamental Styles](https://github.com/SAP/fundamental-ngx)\n-   [Vue implementation of SAP Fundamental Styles](https://github.com/SAP/fundamental-vue)\n\n##  Tips for fundamental-react project developers\n For the MAC M1 user, to Set up your local dev environment, you need to run the project under node x86.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP%2Ffundamental-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSAP%2Ffundamental-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP%2Ffundamental-react/lists"}