sap / fundamental-react Goto Github PK

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

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

Pagination

Menu

DatePicker wraps Calendar and it allows to pass all Calendar's inputs. It would be good to document that and maybe add (an) example(s)

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

CORUI-6053

Create an npm package

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

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

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

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

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

Looking through the dependencies, it appears some of the dependencies can be moved to devDependencies and some can be moved to peerDependencies. Organizing dependencies properly can dramatically reduce the size of the package.

CORUI-5995

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

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.

Time Component

Inline Help

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

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

Please, refer to fundamental-ui component link Panel Component

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

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

CORUI-5996

Implement Navbar

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

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

Modal Component

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.

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.

Users should be able to navigate and interact with the components using the keyboard.

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

Fiori Fundamentals has a new version - v.1.4.0

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

Consider the classnames library for combining/compiling classes in component. The strength is two fold:

1. 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'

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

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

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

Popover

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

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

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

Create a strategy for automation/unit tests per components

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

CORUI-5993

Create and document a code style guide.

Any plans to use typescript or support it with typings ?

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.

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>
        );
    })
);

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",

Forms seem to be broken with the latest version of Fundamental-ui (1.2.2).