sap / fundamental-react Goto Github PK

View Code? Open in Web Editor NEW

187.0 20.0 78.0 122.02 MB

React implementation of the reusable component library designed in Fundamental Library Styles

Home Page: https://sap.github.io/fundamental-react

License: Apache License 2.0

HTML 0.18% JavaScript 98.67% CSS 0.08% Shell 0.25% SCSS 0.82%

open-source sap-fundamentals reactjs fundamentals react-components

fundamental-react's Introduction

Fundamental React

Description

The fundamental-react library is a set of React components built using SAP Fundamental Styles.

The 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.

API Reference

See Component Documentation for examples and API details.

Requirements

You will need to install Node and Node Package Manager.

Polyfills

Fundamental React requires a polyfill for:

You will need to add your own polyfills. See core-js for instructions.

Getting Started

For an existing react application, follow the steps below:

Install fundamental-react.
```
npm install fundamental-react
```
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.
Import components as needed. See Component Documentation for examples and API details.
```
import { MessageStrip } from 'fundamental-react/lib/MessageStrip';
```
or
```
import { MessageStrip } from 'fundamental-react';
```
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.
This project does not contain fonts and icons - they must be added to your project separately. Download Font 72 and SAP icons. After adding fonts and icons to your project, include the following in your css:

    @font-face {
        font-family: "72";
        src: url("path/to/fonts") format("woff"); /* Bold, Light, Regular available in woff and woff2 */
        font-weight: normal;
        font-style: normal;
    };

    @font-face {
        font-family: "SAP-icons";
        src: url("path/to/icons") format("woff"); /* available in woff, woff2 and ttf */
        font-weight: normal;
        font-style: normal;
    }

Additionally, edit your webpack configuration to load font and icon fonts - see file-loader.

All styles are based on rem units. Include the following in your CSS to ensure components are sized correctly:

    html {
        font-size: 16px;
    }

Versioning

The fundamental-react library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the main branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

The following circumstances will be considered a BREAKING change:

A component’s existing API is altered (with the exception of additions)
The existing underlying HTML markup of a component is altered
An existing unit test is altered to account for either of the above

The following circumstances will NOT be considered a BREAKING change:

Additions to a component’s API
Non-visual HTML attribute changes/additions (such as role, aria-*, data-*)
An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as role, aria-*, data-*)

CSS Modules

This library supports 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.

One way to use fundamental-react with hashed class names is to pass the library code through css-loader in your webpack config

// If you have an existing css rule
{
    test: /.css$/,
    exclude: [
        /node_modules\/fundamental-styles/
    ],
    use: [
        'style-loader',
        'css-loader'
    ]
},
// run css-loader with modules enabled for css files from fundamental-styles
{
    test: /.css$/,
    include: [
        /node_modules\/fundamental-styles/
    ],
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[local]-[sha1:hash:hex:6]'
                }
            }
        }
    ]
},

It'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].

Known Issues

Please see Issues.

Support

If you encounter an issue or want to request a feature, you can create an issue.

Contributing

If you want to contribute, please check the Contribution Guidelines. Also see our Developer Guide to Getting Started.

Similar Projects

Tips for fundamental-react project developers

For the MAC M1 user, to Set up your local dev environment, you need to run the project under node x86.

fundamental-react's People

Contributors

Stargazers

Watchers

Forkers

deepshikha02 chrismanciero shlomi-lachmish codesofra jdalbis mobot11 tanguyf jiawang1 magicmatatjahu pierrefritsch aerfio mattl75 mjaycub reenan laislodi joaopereirawd choiyj pragatic manasapatel jbadan liaswapna hertweckhr1 wwfalcon parostatkiem-zz rchrdchn sjanota kwiatekus acristh meganaconley dushyant markpalfreeman sydneymonis alvaroraminelli coding-my-passion bodhitreestudio eddiedu rodrigoeidelvein singh-mahendra athulvraj maylukas prsdthkr jackiewei benoron prasannacm jaysardhara dusansacha ibmdavid2019 mdhender i065450 justeban narenwagh jizusun rjstyles thomas-bruckner auryn31 justinjrussell huberv pp0001 ibibhu muthukkaruppan4695 alikgarai barbichou bojagi maxym-valor vita-meow qbalukom akucharska sajadmsnew arkinfescioglu megha-sketch wchrapka isabella232 mrcherry97 infinitexyy willigithy2002 caty1121 shkim samyak-9bit

fundamental-react's Issues

fix gh-pages

test TravisCI integration

Migrate to Fiori Fundamentals v1.4.0

Fiori Fundamentals has a new version - v.1.4.0

Implement Popover Component

Popover

Implement Panel Component

Please, refer to fundamental-ui component link Panel Component

Refactor Search Input component

Search component needs refactoring so it can be used in the Shellbar.

Implement Localization Editor

Localization Editor is a new component (Fundamental-ui v 1.2.2)
Localization Editor

Implement Time Component

Time Component

review and update all .md files

review and update all .md files so they reflect the latest state of the repo

Refactor Action Bar

Add description in the header, back button, actions, mobile view.

Consider separating the library code from the examples (Playground)

Currently the library is mixed with the example page. The index.tsx for example both exports the components and bootstraps the demo application.

The storybook project (https://github.com/storybooks/storybook) does pretty much the same than what the Playground is designed for in my opinion.
Using Storybook, the documentation is written in so called stories. They are stored aside the components they describe and are then picked up by the storybook scripts. Additionally stoybook provides a UI that showcases the components and provides functionality such as event logging, knobs (changing props), responsive preview, generating the interface documentation from typescript code and much more.
Example:
React official storybook

When the library is published the stories can be easily filtered using a .npmignore file.

If you consider this a valid option I would be happy to provide an example for this project.

Example for a story:

import *  as React from 'react';
import { storiesOf } from '@storybook/react';

import { wInfo } from '../utils';
import { Tabs } from './tabs';
import { Tab } from './tab';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import { Story } from '../story';

const info = `
### Notes 
This control is used to navigate between frequently accessed, distinct content categories.
They allow for navigation between two or more content views.
When the header is clicked, the section's content is displayed.

### Do
* Use on content-heavy pages that would otherwise require a significant 
  amount of scrolling to access the various sections.
* Be concise on the navigation labels, ideally one or two words rather than a phrase.

### Usage
* Don’t use the Pivot to link to a new page.
* Don’t use the Pivot to link to hidden content.
~~~js
<Tabs />
~~~`;

(storiesOf('Components/Tabs', module) as any).addWithJSX(
    'Tabs',
    wInfo(info)(() => {
        return (
            <Story>
                <div>
                    <Tabs
                        onSelectTab={action('on-select-tab')}
                        selectedTab={
                            text('selectedTab', null) !== null && text('selectedTab', null) !== ''
                                ? text('selectedTab', null)
                                : undefined
                        }
                    >
                        <Tab key={'tab-1'} title={{id: 'dummy', defaultMessage: 'Tab 1'}}>
                            Content for Tab 1
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Tab 2'}}>
                            Content for Tab 2
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Disabled Tab'}} disabled={true}>
                            Content for Tab 2
                        </Tab>

                    </Tabs>

                    <h3>Tabs with icons</h3>
                    <Tabs
                        onSelectTab={action('on-select-tab')}
                        selectedTab={
                            text('selectedTab', null) !== null && text('selectedTab', null) !== ''
                                ? text('selectedTab', null)
                                : undefined
                        }
                    >
                        <Tab key={'tab-1'} title={{id: 'dummy', defaultMessage: 'Tab 1'}} icon={'sap-icon://edit'}>
                            Content for Tab 1
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Tab 2'}} icon={'sap-icon://list'}>
                            Content for Tab 2
                        </Tab>

                        <Tab
                            key={'tab-2'}
                            title={{id: 'dummy', defaultMessage: 'Tab 2'}}
                            icon={'sap-icon://error'}
                            iconColor={'Critical'}
                        >
                            Content for Tab 2
                        </Tab>

                        <Tab
                            key={'tab-2'}
                            title={{id: 'dummy', defaultMessage: 'Tab 2'}}
                            icon={'sap-icon://accept'}
                            iconColor={'Positive'}
                        >
                            Content for Tab 2
                        </Tab>
                    </Tabs>
                </div>
            </Story>
        );
    })
);

Add IE11 Support

SAP Concur will continue to support IE11 until Microsoft stops supporting IE11 (target date Oct 14, 2025)

we need to fundamental-react to support IE11 until then as well.

We will need to change this as well as their babel config, they are currently using the create-react-app base config.,

this will require ejecting from create-react-app

CORUI-6052

Migrate to the latest version of Fundamental-UI

Go through all implemented react components and make sure they are consistent with the latest version of Fundamental-UI (1.2.2)

update the documentation page(s)

Even though we will have new design of the playground soon, it would be great if our playground resembles more fundamental-ui and fundamental-ngx

Consider Global State (Redux)

Having a state outside the component tree will allow us to access it from anywhere in the application. There will be a single source of truth. This way the application can always take control over the components.

Automate publishing

Fundamental-react is not currently publishing to npm correctly, only publishing non-babel'd/non-webpack'd src/ directory.

Their build script builds a dist/ folder correctly. Get this published to npm

this would also include initing standard-version for automating versioning.

Documentation does not contain fundamental-react URI

Following the documentation in the readme takes you to this URL: https://sap.github.io/fundamental-react/

Navigating to a component's detail page (such as the action bar) will result in a URL like so: https://sap.github.io/actionBar

The URL should be https://sap.github.io/fundamental-react/actionBar

Also, navigating directly to the component's URL through the browser input results in a 404 - component details must be navigated to via the side nav

SAP-icons.woff error

I created a React application using create-react-app. I have installed node-sass and fundamental-ui using npm (npm install --save-dev node-sass) (npm install --save-dev fundamental-ui)

After I changed App.js file to import ./App.scss, renamed App.css file to App.scss and included the following imports:
@import '../node_modules/fundamental-ui/scss/icons';
@import '../node_modules/fundamental-ui/dist/fonts';
@import '../node_modules/fundamental-ui/scss/all.scss';

I get the following error when I do npm start to run my application

./src/App.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/App.scss)
Module not found: Can't resolve './SAP-icons.woff' in '/Users/i814935/git/ReactTutorial/fund-test/src'

Versions being used:
"fundamental-ui": "^1.2.2",
"node-sass": "^4.9.4",

Implement Inline Help Component

Inline Help

Implement Modal Component

Modal Component

Add Typechecking With PropTypes for all components

It's good to have built-in validators that can be used to make sure the data that components receive is valid.

Implement Multi Input

Multi Input is a new component (Fundamental-ui v 1.2.2)
Multi Input

Transition to fiori-fundamentals v1.3.1

Fundamental-ui has been renamed to fiori-fundamentals and a new version has been released (v1.3.1). Some of the components need code refactoring. The changes will be implemented in a feature branch and later merged in develop.

make a library for all the components

The current repo doesn't expose the components as a library so they cannot be used in other projects.

Typescript Support

Any plans to use typescript or support it with typings ?

Consider destructing and spreading props in our components

Destructing and spreading props in our components will allow the user to add additional properties and classes to our components. Here's an example

Enable ESLint

add lint rules used by SAP Concur
setup Travis to fail build on Lint error
document how devs can use lint locally.

CORUI-6053

Implement Pagination Component

Pagination

Implement Menu Component

Implement Combobox Input

Combobox Input is a new component (Fundamental-ui v 1.2.2)
Combobox Input

Migrate to Fiori-Fundamentals v.1.3.2

Install the latest version of Fiori-Fundamentals (1.3.2) and test for breaking changes.

Implement Time Picker Component

Time Picker Component.
This issue is related to Issue#2

automation/unit test POC

Create a strategy for automation/unit tests per components

Implement Shellbar

Remove react router as a dependency

This should allow consumers to use React-Router 4 which will allow for greater code splitting of applications.

CORUI-5993

update versions of the libraries in package.json

create an npm package

Create an npm package

Breadcrumb , Side Navigation and Mega Menu – accept url and routerLinks

Breadcrumb , Side Navigation and Mega Menu should be able to accept url and routerLinks.

Add tree shaking

Update library to be tree-shakable. https://webpack.js.org/guides/tree-shaking/

CORUI-5996

Implement Status Indicator for Label

Status Indicator for Label - Status Indicator Label with build in status icons, Status Indicator Label with any icons, Status Indicator Label with semantic colors.

Refactor Dropdown

Dropdown – to be composed of “menu” and “popover” components.

Init code coverage output to Travis

Travis claims that code coverage is run, but there is no output to look at.

it is possible that this simply requires a flag, or that we need to eject from create-react-app

CORUI-6061

It has robust support for pretty much any format you want to use for passing in classes. Single static, an array of 'maybe there maybe not', and an object of 'if the key:value is true, show, otherwise dont'
This decouples the conditional props for classes from the classnames itself, which would be a plus in case things change in the prop API, since it wouldn't force the css to adjust.