Commit 1874b2bb authored by Caner Candan's avatar Caner Candan

Merge branch 'mobx-upgrade' into 'master'

Mobx upgrade

See merge request !303
parents 4b764ea5 b5859b2c
Pipeline #20239893 passed with stage
in 7 minutes and 19 seconds
......@@ -2,9 +2,9 @@
import { configure, setAddon } from '@storybook/react'
import infoAddon, { setDefaults } from '@storybook/addon-info'
import { useStrict } from 'mobx'
import { configure as configureMobX } from 'mobx'
useStrict(true)
configureMobX({ enforceActions: true })
// addon-info
setDefaults({
......
......@@ -18,8 +18,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -17,7 +17,7 @@
"@4geit/rct-swagger-client-store": "^1.87.5",
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router": "^4.x",
......
# include /dist to `npm publish`
!/dist
# @4geit/rct-assembler-component [![npm version](//badge.fury.io/js/@4geit%2Frct-assembler-component.svg)](//badge.fury.io/js/@4geit%2Frct-assembler-component)
---
pick components and assemble them together
## Demo
A live storybook is available to see how the component looks like @ http://react-packages.ws3.4ge.it
## Installation
1. A recommended way to install ***@4geit/rct-assembler-component*** is through [npm](//www.npmjs.com/[email protected]/rct-assembler-component) package manager using the following command:
```bash
npm i @4geit/rct-assembler-component --save
```
Or use `yarn` using the following command:
```bash
yarn add @4geit/rct-assembler-component
```
2. Depending on where you want to use the component you will need to import the class `RctAssemblerComponent` to your project JS file as follows:
```js
import RctAssemblerComponent from '@4geit/rct-assembler-component'
```
For instance if you want to use this component in your `App.js` component, you can use the RctAssemblerComponent component in the JSX code as follows:
```js
import React from 'react'
// ...
import RctAssemblerComponent from '@4geit/rct-assembler-component'
// ...
const App = () => (
<div className="App">
<RctAssemblerComponent />
</div>
)
```
## AngularJS
`rct-assembler-component` also supports integration in an AngularJS app, therefore you can call the AngularJS component directive into your AngularJS app and it will appears properly, you can have more details about its AngularJS integration [here](./src/index.ng.js).
Here are the steps you need to follow to get the component working on your AngularJS app:
* install the component thanks to npm as shown above
* add the following tag to the main `index.html` file of your app:
```html
<script src="node_modules/@4geit/rct-ng-vendor/dist/index.ng.js"></script>
<script src="node_modules/@4geit/rct-assembler-component/dist/index.ng.js"></script>
```
* inject the component AngularJS module to your app module as below:
```js
angular
.module('app', ['rct-assembler-component'])
// ...
```
* use the component directive where ever you want to add the component in your app as follow:
```html
<rct-assembler-component></rct-assembler-component>
```
{
"name": "@4geit/rct-assembler-component",
"version": "1.0.0",
"description": "pick components and assemble them together",
"main": "dist/index.js",
"ng:main": "dist/index.ng.js",
"src:module": "src/index.js",
"src:ng:module": "src/index.ng.js",
"bugs": {
"url": "https://gitlab.com/4geit/react-packages/issues"
},
"homepage": "https://gitlab.com/4geit/react-packages/tree/master/packages/rct-assembler-component#README",
"keywords": [],
"author": "Caner Candan <[email protected]>",
"license": "MIT",
"dependencies": {
"angular": "^1.5.x",
"debug": "^3.x",
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router-dom": "^4.x",
"react-test-renderer": "^16.x",
"typeface-roboto": "^0.x"
},
"devDependencies": {
"@4geit/rct-common-store": "^1.x",
"@4geit/rct-swagger-client-store": "^1.x",
"@storybook/addon-storyshots": "^3.x",
"@storybook/react": "^3.x",
"@storybook/addon-centered": "^3.x",
"@storybook/addon-info": "^3.x"
},
"publishConfig": {
"access": "public"
}
}
export { default } from './rct-assembler.component'
import React from 'react'
import angular from 'angular'
import { react2angular } from 'react2angular'
import { Provider } from 'mobx-react'
import RctAssemblerComponent from './rct-assembler.component'
const stores = {
// TBD
}
const RctAssemblerComponentWrapper = () => (
<Provider {...stores} >
<RctAssemblerComponent />
</Provider>
)
export default angular
.module('rct-assembler-component', [])
.component('rctAssemblerComponent', react2angular(RctAssemblerComponentWrapper))
.name
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import buildDebug from 'debug'
// eslint-disable-next-line no-unused-vars
import { inject, observer } from 'mobx-react'
import { withStyles } from 'material-ui/styles'
import withWidth from 'material-ui/utils/withWidth'
import './rct-assembler.component.css'
const debug = buildDebug('react-packages:packages:rct-assembler-component')
// eslint-disable-next-line no-unused-vars
@withStyles(theme => ({
// root: {
// [theme.breakpoints.down('md')]: {
// width: '100%',
// },
// },
// TBD
}))
@withWidth()
// @inject('xyzStore')
@observer
export default class RctAssemblerComponent extends Component {
static propTypes = {
// eslint-disable-next-line react/forbid-prop-types, react/no-unused-prop-types
classes: PropTypes.object.isRequired,
// eslint-disable-next-line react/no-unused-prop-types
width: PropTypes.string.isRequired,
// TBD
}
static defaultProps = {
// TBD
}
render() {
debug('render()')
// const { ... } = this.props
return (
<p>
RctAssemblerComponent works!
</p>
)
}
}
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Provider, inject, observer } from 'mobx-react'
import { BrowserRouter } from 'react-router-dom'
import { storiesOf } from '@storybook/react'
import centered from '@storybook/addon-centered'
import { withInfo } from '@storybook/addon-info'
import commonStore from '@4geit/rct-common-store'
import swaggerClientStore from '@4geit/rct-swagger-client-store'
// import xyzStore from '@4geit/rct-xyz-store'
import RctAssemblerComponent from './rct-assembler.component'
const stores = {
commonStore,
swaggerClientStore,
// xyzStore,
}
@inject('swaggerClientStore', 'commonStore')
@observer
class App extends Component {
static propTypes = {
// eslint-disable-next-line react/forbid-prop-types
children: PropTypes.any.isRequired,
}
async componentWillMount() {
try {
await swaggerClientStore.buildClient({
apiUrl: process.env.STORYBOOK_API_URL || 'http://localhost:10010/v1',
})
await swaggerClientStore.buildClientWithToken({
token: process.env.STORYBOOK_TOKEN,
})
const {
body: {
token, _id, id, ...fields
},
} = await swaggerClientStore.client.apis.Account.account()
commonStore.setToken(token)
commonStore.setUser({ ...fields })
commonStore.setAppLoaded()
} catch (err) {
// eslint-disable-next-line no-console
console.error(err)
}
}
render() {
const { children } = this.props
if (commonStore.appLoaded) {
return (
<div>
{ children }
</div>
)
}
return (
<div>Loading...</div>
)
}
}
storiesOf('RctAssemblerComponent', module)
.addDecorator(centered)
.add('simple usage', withInfo()(() => (
<BrowserRouter>
<Provider {...stores}>
<App>
<RctAssemblerComponent />
</App>
</Provider>
</BrowserRouter>
)))
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'
import { createShallow, createMount } from 'material-ui/test-utils'
import initStoryshots from '@storybook/addon-storyshots'
// import xyzStore from '@4geit/rct-xyz-store'
import RctAssemblerComponent from './rct-assembler.component'
const stores = {
// xyzStore,
}
if (!process.env.DISABLE_STORYSHOTS) {
initStoryshots({
storyKindRegex: /^RctAssemblerComponent$/,
})
}
const shallow = createShallow({ untilSelector: 'div' })
const mount = createMount()
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(
<Provider {...stores} >
<RctAssemblerComponent />
</Provider>,
div,
)
})
// it('renders correctly', () => {
// const wrapper = mount(<RctAssemblerComponent {...stores} />)
// expect(wrapper).toMatchSnapshot()
// })
it('shallow-renders correctly', () => {
const wrapper = shallow(<RctAssemblerComponent {...stores} />)
expect(wrapper).toMatchSnapshot()
})
......@@ -17,7 +17,7 @@
"@4geit/rct-swagger-client-store": "^1.87.5",
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router": "^4.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -20,8 +20,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,7 +16,7 @@
"@4geit/rct-swagger-client-store": "^1.87.5",
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"moment": "^2.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -18,8 +18,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,7 +16,7 @@
"@4geit/rct-swagger-client-store": "^1.87.5",
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router-dom": "^4.x",
......
......@@ -19,8 +19,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,7 +16,7 @@
"@4geit/rct-swagger-client-store": "^1.87.5",
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router": "^4.x",
......
......@@ -17,8 +17,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.17",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"rc-slider": "^8.4.0",
"react": "^16.x",
......
......@@ -19,8 +19,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -17,8 +17,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"moment": "2.18.1",
"prop-types": "^15.x",
"react": "^16.x",
......
......@@ -14,7 +14,7 @@
"dependencies": {
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router-dom": "^4.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -16,8 +16,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",
"prop-types": "^15.x",
"react": "^16.x",
"react-dom": "^16.x",
......
......@@ -14,7 +14,7 @@
"dependencies": {
"debug": "^3.x",
"enzyme": "^3.x",
"mobx": "^3.x",
"mobx": "^4.x",
"react": "^16.x",
"react-dom": "^16.x",
"react-router": "^4.x",
......
......@@ -18,8 +18,8 @@
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"mobx": "^4.x",
"mobx-react": "^5.x",