Skip to content

Commit

Permalink
Upgrade from @Material UI to @mui components (#30)
Browse files Browse the repository at this point in the history
* update 1

* update 2

* update 3

* update 4

* update 5

* update

* update

* update

* Update CHANGELOG.md

* update

* Update Popover.jsx

* Update Popover.jsx

* Update demo.ete.js

* update

* update

* update

* update

Co-authored-by: Gal Havivi <gal.havivi@oath.com>
  • Loading branch information
galhavivi and Gal Havivi authored Nov 21, 2021
1 parent 965b261 commit b8f39a5
Show file tree
Hide file tree
Showing 169 changed files with 2,439 additions and 1,783 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@

Changes that have landed in master but are not yet released.

### react-components

* Update @material-ui to @mui. [Issue 29](https://github.com/galhavivi/cofi/issues/29)

### documentation

* Update docusaurus version. [Issue 27](https://github.com/galhavivi/cofi/issues/27)
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ JavaScript Form class which manage fields and data manipulations. [More info](fo

Supplies 3 products to manage forms in [react](https://reactjs.org) applications. [More info](react-overview.html)
- React Form & Field components based on Form class.
- Common components for usage such as Text, Number, Select and more, based on [Material UI](https://material-ui.com/)
- Common components for usage such as Text, Number, Select and more, based on [Material UI](https://mui.com/)
- Layout components to build form pages / peaces with the same UI / UX experience such as Item component which contain header, sections,
footer actions and menu actions.

Expand Down
2,929 changes: 1,912 additions & 1,017 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/documentation/docs/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ JavaScript Form class which manage fields and data manipulations. [More info](fo

Supplies 3 products to manage forms in [react](https://reactjs.org) applications. [More info](react-overview.html)
- React Form & Field components based on Form class.
- Common components for usage such as Text, Number, Select and more, based on [Material UI](https://material-ui.com/)
- Common components for usage such as Text, Number, Select and more, based on [Material UI](https://mui.com/)
- Layout components to build form pages / peaces with the same UI / UX experience such as Item component which contain header, sections,
footer actions and menu actions.

Expand Down Expand Up @@ -150,7 +150,7 @@ Cofi is fully documented:

- `Form Class` - that defined in `@cofi/form` is only using `lodash` as a third-party dependency (it could have been implemented without any dependency but there is no need to reinvent the wheel).
- `React Form Component` - that defined in `@cofi/react-form` is only using `@cofi/form` as a dependency.
- `React Components and Layout` - using [React Material UI](https://material-ui.com/) as underline components.
- `React Components and Layout` - using [React Material UI](https://mui.com/) as underline components.

### Small Package Size

Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/docs/more-technologies.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Cofi is built mainly with these amazing open sources:
- [Puppeteer](https://pptr.dev/)
- [React](https://reactjs.org/)
- [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
- [Material UI](https://material-ui.com/)
- [Material UI](https://mui.com/)
- [Docusaurus](https://docusaurus.io/)
- [React Styleguidist](https://react-styleguidist.js.org/)
- [Styled Components](https://styled-components.com/)
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/docs/more-test.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ Example - component Input using [toCofi](react-components#tocofi) hoc
```javascript
/* Input.js */
import { toCofi } from '@cofi/react-components/utils';
import Input from '@material-ui/core/Input';
import Input from '@mui/material/Input';

export const mapper = ({ value = '', disabled = false, state = {}, onValueChange }) => ({
type: state.type
Expand Down
18 changes: 9 additions & 9 deletions packages/documentation/docs/react-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_label: Components

Unified api components - a set of stateless / stateful components that use the same set of props, and render real components inside (for instance - TextInput ).
Components are rendered in a generic way using [FieldView](react-field.html#field-view) component render function.
These components can serve as a mapping layer between Cofi form and other internal components (such as [Material UI](https://material-ui.com/) components).
These components can serve as a mapping layer between Cofi form and other internal components (such as [Material UI](https://mui.com/) components).
Props include a number of callbacks that notify a change, such as `onValueChange`.

## Stateless Vs Stateful Components
Expand Down Expand Up @@ -38,7 +38,7 @@ Simple Example

```javascript
import React from 'react';
import Input from '@material-ui/core/Input';
import Input from '@mui/material/Input';

export default ({ value = '', state = {}, onValueChange }) => <Input
value={value}
Expand Down Expand Up @@ -92,15 +92,15 @@ export default ({ value = [] state, disabled, invalid, onValueChange, onStateCha

### toCofi

To use existing components library in a form (such as [Material UI](https://material-ui.com/)) -
To use existing components library in a form (such as [Material UI](https://mui.com/)) -
a map from the Cofi component generic props to the existing component props is needed.

Example - using react functional component

```javascript
/* Input.js */
import React from 'react';
import Input from '@material-ui/core/Input';
import Input from '@mui/material/Input';

export default ({ value = '', state = {}, disabled = false, onValueChange }) => <Input
type={state.type}
Expand All @@ -116,7 +116,7 @@ Example - using toCofi HOC
```javascript
/* Input.js */
import { toCofi } from '@cofi/react-components/utils';
import Input from '@material-ui/core/Input';
import Input from '@mui/material/Input';

export const mapper = ({ value = '', disabled = false, state = {}, onValueChange }) => ({
type: state.type
Expand Down Expand Up @@ -151,15 +151,15 @@ We plan to keep `@cofi/react-component` as generic as possible. We also define a
- Define the resource under the resources object (i.e resources.myExtraData = () => {})
- Consume Cofi's context in the component, and get the resource from `context.resources[props.state.resourceId]`

In our common components we used [Material UI](https://material-ui.com/) as our base components.
If your app uses [Material UI](https://material-ui.com/) along with [styled components](https://www.styled-components.com/)
like we did in our form and layout demos, you will need to wrap your app's Root component with `StylesProvider` of [Material UI](https://material-ui.com/)
In our common components we used [Material UI](https://mui.com/) as our base components.
If your app uses [Material UI](https://mui.com/) along with [styled components](https://www.styled-components.com/)
like we did in our form and layout demos, you will need to wrap your app's Root component with `StylesProvider` of [Material UI](https://mui.com/)
in order to fix their class names collision that causing ui to break.

Example form our demos:

```javascript
import { createGenerateClassName, StylesProvider } from '@material-ui/styles';
import { createGenerateClassName, StylesProvider } from '@mui/styles';

const generateClassName = createGenerateClassName({
productionPrefix: 'cofi-react-form-demos',
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/docs/react-form.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ Example

```javascript
import React from 'react';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import { FormContext } from '@cofi/react-form';

export default class SaveButton extends React.Component {
Expand Down Expand Up @@ -213,7 +213,7 @@ Example
```javascript
import React from 'react';
import { Field, FormContext, createForm } from '@cofi/react-form';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import form from '../form'; // object of { model, resources }

class MyComponent extends React.Component {
Expand Down Expand Up @@ -249,7 +249,7 @@ Example
```javascript
import React, { useCallback } from 'react';
import { Field, withForm, createForm } from '@cofi/react-form';
import Button from '@material-ui/core/Button';
import Button from '@mui/material/Button';
import service from '../service';
import form from '../form'; // object of { model, resources }

Expand Down
1 change: 0 additions & 1 deletion packages/documentation/website/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/documentation/website/pages/en/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class Index extends React.Component {
components for usage such as Select, TextInput and more.
Components maps their generic Cofi's props to actual UI components props,
which are based on
<Link href="https://material-ui.com/" target="_blank">Material UI</Link>
<Link href="https://mui.com/" target="_blank">Material UI</Link>
components.
</Feature>
<Feature title="Layouts">
Expand Down
13 changes: 8 additions & 5 deletions packages/react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,17 @@
"react-dom": "^16.3.0"
},
"dependencies": {
"@date-io/date-fns": "^1.3.12",
"@cofi/react-layout": "^1.0.0",
"@material-ui/core": "^4.1.2",
"@material-ui/icons": "^4.0.2",
"@material-ui/pickers": "^3.1.2",
"styled-components": "^5.3.3",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.1.0",
"@mui/material": "^5.1.0",
"@mui/styles": "^5.1.0",
"@mui/lab": "^5.0.0-alpha.55",
"@date-io/date-fns": "^1.3.12",
"date-fns": "^2.8.1",
"dateformat": "^3.0.3",
"styled-components": "^5.3.3",
"react-json-editor-ajrm": "^2.5.13",
"react-select": "^3.0.8"
},
Expand Down
23 changes: 23 additions & 0 deletions packages/react-components/src/lib/Wrapper.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import { createGenerateClassName, StylesProvider } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

// fixes issue in prod of css conflicts when using material ui + styled components
const generateClassName = createGenerateClassName({ productionPrefix: 'react-app' });


const theme = createTheme({
// palette: {
// primary: {
// main: colors.blue[700],
// },
// secondary: {
// main: colors.blue[700],
// },
// },
});

export default ({ children }) => (<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</StylesProvider>);

4 changes: 2 additions & 2 deletions packages/react-components/src/lib/edit/Checkbox/Checkbox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

import React from 'react';
import PropTypes from 'prop-types';
import CheckboxInternal from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CheckboxInternal from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

/**
* Represent a boolean value
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { isEqual, cloneDeep, noop } from 'lodash';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import SearchInput from '../SearchInput';

const itemShape = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
import IconButton from '@material-ui/core/IconButton';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@mui/material/Paper';
import InputBase from '@mui/material/InputBase';
import SearchIcon from '@mui/icons-material/Search';
import IconButton from '@mui/material/IconButton';
import { withStyles } from '@mui/styles';
import { noop } from 'lodash';

const styles = {
Expand Down
20 changes: 9 additions & 11 deletions packages/react-components/src/lib/edit/DatePicker/DatePicker.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
* Licensed under the terms of the MIT license. See LICENSE file in project root for terms.
*/

import React from 'react';
// import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DatePicker as InternalDatePicker } from '@material-ui/pickers';
import PropTypes from 'prop-types';
import * as React from 'react';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import { DatePicker as InternalDatePicker } from '@mui/lab';
import Styled from './DatePicker.styled';

/**
* Represent a Date object
Expand Down Expand Up @@ -40,19 +41,16 @@ export default class DatePicker extends React.Component {

render() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<InternalDatePicker
autoOk={true}
clearable={true}
disableFuture={true}
format={this.props.state.format || DatePicker.defaultProps.state.format}
renderInput={(props) => <Styled.TextField {...props} />}
value={this.props.value}
format={this.props.state.format || DatePicker.defaultProps.state.format}
disabled={this.props.disabled}
placeholder={this.props.state.placeholder}
error={this.props.invalid}
onChange={this.onChange}
/>
</MuiPickersUtilsProvider>
</LocalizationProvider>
);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* Copyright 2021, Gal Havivi
* Licensed under the terms of the MIT license. See LICENSE file in project root for terms.
*/

import styled from 'styled-components';
import InternalTextField from '@mui/material/TextField';

export const TextField = styled(InternalTextField)`
width: 100%;
input {
padding-top: 5px;
padding-bottom: 4px;
padding-left: 0;
}
fieldset {
border-radius: 0;
border-top: 0;
border-right: 0;
border-left: 0;
}
`;

export default {
TextField,
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
* Licensed under the terms of the MIT license. See LICENSE file in project root for terms.
*/

import React from 'react';
// import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DateTimePicker as InternalDateTimePicker } from '@material-ui/pickers';
import { DateTimePicker as InternalDateTimePicker } from '@mui/lab';
import PropTypes from 'prop-types';

import * as React from 'react';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import Styled from './DateTimePicker.styled';

/**
* Represent a Date object
*
Expand Down Expand Up @@ -38,23 +39,20 @@ export default class DateTimePicker extends React.Component {

render() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<InternalDateTimePicker
autoOk={true}
clearable={true}
disableFuture={true}
format={this.props.state.format || DateTimePicker.defaultProps.state.format}
renderInput={(props) => <Styled.TextField {...props} />}
value={this.props.value}
format={this.props.state.format || DateTimePicker.defaultProps.state.format}
disabled={this.props.disabled}
error={this.props.invalid}
onChange={this.onChange}
/>
</MuiPickersUtilsProvider>
</LocalizationProvider>
);
}

onChange = (value) => {
this.props.onValueChange(value);
};
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* Copyright 2021, Gal Havivi
* Licensed under the terms of the MIT license. See LICENSE file in project root for terms.
*/

import styled from 'styled-components';
import InternalTextField from '@mui/material/TextField';

export const TextField = styled(InternalTextField)`
width: 100%;
input {
padding-top: 5px;
padding-bottom: 4px;
padding-left: 0;
}
fieldset {
border-radius: 0;
border-top: 0;
border-right: 0;
border-left: 0;
}
`;

export default {
TextField,
};
Loading

0 comments on commit b8f39a5

Please sign in to comment.