Commits (161)
{
"presets": ["react-app"],
"plugins": ["transform-decorators-legacy"]
"presets": ["react-app", "es2015"],
"plugins": ["transform-decorators-legacy", "transform-class-properties"]
}
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
configure({ adapter: new Adapter() });
'use strict';
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/tutorial-webpack.html
module.exports = {
process(src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
},
};
......@@ -22,7 +22,7 @@ PropVal.propTypes = {
maxPropArrayLength: PropTypes.number,
maxPropStringLength: PropTypes.number,
val: PropTypes.any,
};
}
function loadStories() {
require('../stories')
......
// load the default config generator.
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')
const { exec, execSync } = require('child_process')
// const { exec, execSync } = require('child_process')
const Dotenv = require('dotenv-webpack')
const path = require('path')
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env)
// console.log(config)
const { bail, plugins } = config
// add dotenv files
plugins.push(new Dotenv({ path: path.resolve('.env.local') }))
plugins.push(new Dotenv({ path: path.resolve('.env') }))
if (bail) {
execSync('yarn build', { stdio: [0, 1, 2] })
} else {
exec('yarn watch', { stdio: [0, 1, 2] })
}
// disabled since we are rather using `module` package.json property
// if (bail) {
// execSync('yarn build', { stdio: [0, 1, 2] })
// } else {
// exec('yarn watch', { stdio: [0, 1, 2] })
// }
return config
}
......@@ -43,8 +43,8 @@ yarn
4. (Optional), you can also skip typing the author name and email each time that you want to create a package/project by adding those lines in your `~/.bashrc` file:
```bash
export AUTHOR_NAME="Master Peace"
export AUTHOR_EMAIL="master.peace@provider.xyz"
export AUTHOR_NAME="John Doe"
export AUTHOR_EMAIL="john.doe@provider.xyz"
```
* `<AUTHOR_NAME>`: the name of the author stored in the `package.json` generated when creating a new package/project.
......@@ -171,3 +171,19 @@ yarn storybook
```
and get access to it through http://localhost:6006
## Test environment
You can run the entire test environment by running the command line:
```bash
yarn test
```
You can also enable some debug messages by using the `DEBUG` environment variable as follow:
```bash
DEBUG="react-packages:*" yarn test
```
All the debug message are prefixed by `react-packages:`.
{
"lerna": "2.0.0",
"version": "1.55.0",
"version": "1.78.0",
"npmClient": "yarn",
"useWorkspaces": true
}
......@@ -29,18 +29,26 @@
"babel-cli": "^6.x",
"babel-core": "^6.x",
"babel-plugin-transform-decorators-legacy": "^1.x",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-app": "^3.x",
"babel-runtime": "^6.x",
"chalk": "^2.x",
"css-loader": "^0.x",
"custom-react-scripts": "^0.x",
"debug": "^3.1.0",
"dotenv-webpack": "^1.5.4",
"enzyme": "^3.x",
"enzyme-adapter-react-15": "^1.0.2",
"enzyme-to-json": "^3.x",
"identity-obj-proxy": "^3.0.0",
"jest": "^21.x",
"lerna": "^2.x",
"lodash": "^4.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"react": "^15.x",
"react-dom": "^15.x",
"react-props-decorators": "^0.x",
"react-test-renderer": "^15.x",
"storybook-addon-specifications": "^2.x",
"style-loader": "^0.x",
......@@ -52,12 +60,35 @@
"create-new-project": "bash ./scripts/create-new-project.sh",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"build": "yarn webpack",
"watch": "yarn webpack -- -w",
"create-links": "node ./scripts/create-links.js",
"link-to-project": "node ./scripts/link-to-project.js"
"build": "webpack",
"watch": "webpack -w",
"test": "jest --watch"
},
"workspaces": [
"packages/*"
]
],
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy",
"typeface-roboto": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/.jest/config.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"testMatch": [
"<rootDir>/packages/**/__tests__/**/*.js?(x)",
"<rootDir>/packages/**/?(*.)(spec|test).js?(x)",
"<rootDir>/tests/**/?(*.)(spec|test).js?(x)"
],
"transform": {
"^.+\\.(js|jsx)$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!\\@4geit[/\\\\]).+\\.(js|jsx)$"
]
}
}
# include /dist to `npm publish`
!/dist
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.78.0"></a>
# [1.78.0](https://gitlab.com/4geit/react-packages/compare/v1.77.0...v1.78.0) (2017-10-21)
### Features
* **test:** add test environment with jest ([34a9b47](https://gitlab.com/4geit/react-packages/commit/34a9b47))
<a name="1.76.0"></a>
# [1.76.0](https://gitlab.com/4geit/react-packages/compare/v1.75.2...v1.76.0) (2017-10-19)
### Bug Fixes
* **account store:** handle on change ([200b3ce](https://gitlab.com/4geit/react-packages/commit/200b3ce))
* **account store:** minor fix ([8c83937](https://gitlab.com/4geit/react-packages/commit/8c83937))
### Features
* **Account Component:** add handleOnChange method to update account fields on changes ([37d531b](https://gitlab.com/4geit/react-packages/commit/37d531b))
* **Account store:** Add Update method ([c175cfc](https://gitlab.com/4geit/react-packages/commit/c175cfc))
<a name="1.75.0"></a>
# [1.75.0](https://gitlab.com/4geit/react-packages/compare/v1.74.1...v1.75.0) (2017-10-16)
### Bug Fixes
* **account:** minor fix ([6bc9ea3](https://gitlab.com/4geit/react-packages/commit/6bc9ea3))
* **account component:** minor fix ([2fc342c](https://gitlab.com/4geit/react-packages/commit/2fc342c))
* **account component:** minor fix ([03e2809](https://gitlab.com/4geit/react-packages/commit/03e2809))
* **account component:** minor fix ([bbdcf35](https://gitlab.com/4geit/react-packages/commit/bbdcf35))
* **account store:** minor fix ([0ba9547](https://gitlab.com/4geit/react-packages/commit/0ba9547))
* **storybook:** store user info ([4a39bc3](https://gitlab.com/4geit/react-packages/commit/4a39bc3))
### Features
* **Account Store:** create fetchData method to get user info ([461c460](https://gitlab.com/4geit/react-packages/commit/461c460))
<a name="1.74.0"></a>
# [1.74.0](https://gitlab.com/4geit/react-packages/compare/v1.73.0...v1.74.0) (2017-10-12)
### Bug Fixes
* **account component:** minor fix ([3ac2ad9](https://gitlab.com/4geit/react-packages/commit/3ac2ad9))
### Features
* **AccountBox:** Add user textfields ([67fb588](https://gitlab.com/4geit/react-packages/commit/67fb588))
<a name="1.72.0"></a>
# [1.72.0](https://gitlab.com/4geit/react-packages/compare/v1.71.0...v1.72.0) (2017-10-12)
### Features
* **account componenet:** create component ([aaeed01](https://gitlab.com/4geit/react-packages/commit/aaeed01))
# @4geit/rct-account-component [![npm version](//badge.fury.io/js/@4geit%2Frct-account-component.svg)](//badge.fury.io/js/@4geit%2Frct-account-component)
---
account component used as reusable package
## 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-account-component*** is through [npm](//www.npmjs.com/search?q=@4geit/rct-account-component) package manager using the following command:
```bash
npm i @4geit/rct-account-component --save
```
Or use `yarn` using the following command:
```bash
yarn add @4geit/rct-account-component
```
2. Depending on where you want to use the component you will need to import the class `RctAccountComponent` to your project JS file as follows:
```js
import RctAccountComponent from '@4geit/rct-account-component'
```
For instance if you want to use this component in your `App.js` component, you can use the RctAccountComponent component in the JSX code as follows:
```js
import React from 'react'
// ...
import RctAccountComponent from '@4geit/rct-account-component'
// ...
const App = () => (
<div className="App">
<RctAccountComponent/>
</div>
)
```
{
"name": "@4geit/rct-account-component",
"version": "1.78.0",
"description": "account component used as reusable package",
"main": "dist/index.js",
"module": "src/index.js",
"bugs": {
"url": "https://gitlab.com/4geit/react-packages/issues"
},
"homepage": "https://gitlab.com/4geit/react-packages/tree/master/packages/rct-account-component#README",
"keywords": [],
"author": "Fabian Starke <fabian@starke.fr>",
"license": "MIT",
"dependencies": {
"enzyme": "^3.x",
"material-ui": "next",
"material-ui-icons": "^1.0.0-beta.14",
"mobx": "^3.x",
"mobx-react": "^4.x",
"prop-types": "^15.x",
"react": "^15.x",
"react-dom": "^15.x",
"react-props-decorators": "^0.x",
"react-router-dom": "^4.x",
"react-test-renderer": "^15.x",
"typeface-roboto": "^0.x"
},
"devDependencies": {
"webpack": "^3.x"
},
"publishConfig": {
"access": "public"
}
}
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `<withStyles(withTheme(withWidth(inject-RctAccountComponent-with-accountStore-commonStore))) />`;
export { default } from './rct-account.component'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { propTypes, defaultProps } from 'react-props-decorators'
import { observable, action, toJS } from 'mobx'
import { inject, observer } from 'mobx-react'
import buildDebug from 'debug'
import { withStyles } from 'material-ui/styles'
import withWidth from 'material-ui/utils/withWidth'
import classNames from 'classnames'
import Card, { CardHeader, CardContent, CardActions } from 'material-ui/Card'
import Button from 'material-ui/Button'
import Typography from 'material-ui/Typography'
import TextField from 'material-ui/TextField'
import Grid from 'material-ui/Grid'
import AccountBoxIcon from 'material-ui-icons/AccountBox'
import { FormControlLabel } from 'material-ui/Form'
import './rct-account.component.css'
const debug = buildDebug('react-packages:packages:rct-account-component')
@withStyles(theme => ({
// root: {
// [theme.breakpoints.down('md')]: {
// width: '100%',
// },
// },
// TBD
}))
@withWidth()
// @inject('xyzStore')
@inject('accountStore', 'commonStore')
@observer
@propTypes({
cardWidth: PropTypes.string,
})
@defaultProps({
})
export default class RctAccountComponent extends Component {
handleAccountChange(event) {
this.props.accountStore.setBodyField(event.target.name, event.target.value)
}
handleUpdate = () => {
const { updateOperationId, itemId, accountStore } = this.props
accountStore.userUpdate({ updateOperationId, itemId, })
}
render() {
const { cardWidth } = this.props
const { user } = this.props.commonStore
debug('user: %O', user)
if (!user) {
return (
<Typography>Loading...</Typography>
)
}
const { firstname, lastname, email, password, company, phone, address: { street, city, state, postcode, country } } = user
debug(firstname)
return (
<div style={{
width: cardWidth ? cardWidth : '100%',
}} >
<Card>
<CardHeader
style={{
backgroundColor:'#2196f3',
color: 'white'
}}
title="My Account"
avatar={ <AccountBoxIcon/> }
/>
<CardContent>
<Typography type="body1" gutterBottom>
Fill out the fields above with your information.
</Typography>
<div>
<TextField
label="Email"
type="email"
id="email"
name="email"
value={email}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
<div>
<TextField
label="Password"
type="password"
id="password"
name="password"
value={password}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
/>
</div>
<div>
<TextField
label="Firstname"
type="firstname"
id="firstname"
name="firstname"
value={firstname}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
<div>
<TextField
label="Lastname"
type="lastname"
id="lastname"
name="lastname"
value={lastname}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
<div>
<TextField
label="Company"
type="company"
id="company"
name="company"
value={company}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
<div>
<TextField
label="Street"
type="street"
id="street"
name="street"
value={street}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
<TextField
label="State"
type="state"
id="state"
name="state"
value={state}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
<TextField
label="Postcode"
type="postcode"
id="postcode"
name="postcode"
value={postcode}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
<TextField
label="Country"
type="country"
id="country"
name="country"
value={country}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
<div>
<TextField
label="Phone"
type="phone"
id="phone"
name="phone"
value={phone}
onChange={ this.handleAccountChange.bind(this) }
fullWidth={true}
required={true}
autoFocus={true}
/>
</div>
</CardContent>
<CardActions>
<Grid container justify="center">
<Grid item>
<Button
raised
color="primary"
type="submit"
>Update</Button>
</Grid>
</Grid>
</CardActions>
</Card>
</div>
)
}
}
import React from 'react'
import ReactDOM from 'react-dom'
import { inject, Provider } from 'mobx-react'
import { shallow } from 'enzyme'
import accountStore from '@4geit/rct-account-store'
import commonStore from '@4geit/rct-common-store'
import RctAccountComponent from './rct-account.component'
const stores = {
accountStore,
commonStore,
}
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(
<Provider { ...stores } >
<RctAccountComponent />
</Provider>
, div)
})
it('renders correctly', () => {
const wrapper = shallow(
<Provider { ...stores } >
<RctAccountComponent />
</Provider>
)
expect(wrapper).toMatchSnapshot()
})
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd',
},
externals: [
/^\@4geit\/[a-zA-Z\-0-9]+$/,
/^autosuggest\-highlight\/[a-zA-Z\-0-9]+$/,
/^babel\-runtime\/[a-zA-Z\-0-9]+$/,
'classnames',
'fbjs',
'keycode',
'material-ui',
/^material\-ui\/[a-zA-Z\-0-9]+$/,
/^material\-ui\/[a-zA-Z\-0-9]+\/[a-zA-Z\-0-9]+$/,
'material-ui-icons',
/^material-ui-icons\/[a-zA-Z\-0-9]+$/,
'mobx',
'mobx-react',
'prop-types',
'react',
/^react\-[a-zA-Z\-0-9]+$/,
'recompose',
/^recompose\/[a-zA-Z\-0-9]$/,
'swagger-client',
'typeface-roboto',
],
module: {
rules: [
// js and jsx
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react-app'],
plugins: ['transform-decorators-legacy'],
}
}
},
// css
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
# include /dist to `npm publish`
!/dist
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="1.78.0"></a>
# [1.78.0](https://gitlab.com/4geit/react-packages/compare/v1.77.0...v1.78.0) (2017-10-21)
### Features
* **test:** add test environment with jest ([34a9b47](https://gitlab.com/4geit/react-packages/commit/34a9b47))
<a name="1.76.0"></a>
# [1.76.0](https://gitlab.com/4geit/react-packages/compare/v1.75.2...v1.76.0) (2017-10-19)
### Bug Fixes
* **account store:** handle on change ([200b3ce](https://gitlab.com/4geit/react-packages/commit/200b3ce))
* **account store:** minor fix ([1a24fbc](https://gitlab.com/4geit/react-packages/commit/1a24fbc))
* **account store:** minor fix ([8c83937](https://gitlab.com/4geit/react-packages/commit/8c83937))
### Features
* **Account store:** Add Update method ([c175cfc](https://gitlab.com/4geit/react-packages/commit/c175cfc))
<a name="1.75.0"></a>
# [1.75.0](https://gitlab.com/4geit/react-packages/compare/v1.74.1...v1.75.0) (2017-10-16)
### Features
* **Account Store:** create fetchData method to get user info ([461c460](https://gitlab.com/4geit/react-packages/commit/461c460))
<a name="1.74.0"></a>
# [1.74.0](https://gitlab.com/4geit/react-packages/compare/v1.73.0...v1.74.0) (2017-10-12)
### Features
* **AccountBox:** Add user textfields ([67fb588](https://gitlab.com/4geit/react-packages/commit/67fb588))
<a name="1.73.0"></a>
# [1.73.0](https://gitlab.com/4geit/react-packages/compare/v1.72.0...v1.73.0) (2017-10-12)
### Features
* **account store:** create package account store ([44f1e7c](https://gitlab.com/4geit/react-packages/commit/44f1e7c))