Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added React-Native templates #29

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions bin/react-generate.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const TEST_UTIL = 'tUtil';
const LOADABLE = 'loadable';
const INJECT_SAGA = 'injectSaga';

const generator = path.join(__dirname, '../generators/index.js');
const generator = path.join(__dirname, '../generators/react/index.js');
const plopGen = ['--plopfile', generator];

const [, , ...args] = process.argv;
Expand Down Expand Up @@ -155,7 +155,7 @@ switch (commandLineArgs[0]) {
`Creating a component by specifying path and name: react-generate gcon src/app Button\n` +
`Creating a container by specifying path and name: react-generate gcom src/app HomePage\n` +
`Generate test for all components in directory: react-generate --all component src/app/components\n` +
`Generate test for all containers in directory: react-generate --all containers src/app/containers`,
`Generate test for all containers in directory: react-generate --all container src/app/containers`,
);
break;
case '--all':
Expand All @@ -177,8 +177,12 @@ switch (commandLineArgs[0]) {
shell.cd(cwd);
directories.forEach(component => {
if (!_.includes(component, '.')) {
shell.exec(
shell.echo(`Component name: ${component}`);
childProcess.execSync(
`react-generate gtcomf ${_.drop(commandLineArgs)} ${component}`,
{
...stdioInherit,
},
);
}
});
Expand All @@ -188,11 +192,11 @@ switch (commandLineArgs[0]) {
shell.cd(`./${commandLineArgs[1]}`);
directories = shell.ls();
shell.cd(cwd);
directories.forEach(component => {
if (!_.includes(component, '.')) {
shell.echo(`Component name: ${component}`);
directories.forEach(container => {
if (!_.includes(container, '.')) {
shell.echo(`Container name: ${container}`);
childProcess.execSync(
`react-generate gtconf ${_.drop(commandLineArgs)} ${component}`,
`react-generate gtconf ${_.drop(commandLineArgs)} ${container}`,
{
...stdioInherit,
},
Expand Down
214 changes: 214 additions & 0 deletions bin/react-native-generate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
#! /usr/bin/env node
const shell = require('shelljs');
const fs = require('fs');
const childProcess = require('child_process');
const process = require('process');
const _ = require('lodash');
const path = require('path');

const COMPONENT = 'component';
const CONTAINER = 'container';
const WEBPACK_BASE_BABEL = 'webpackBaseBabel';
const TEST_UTIL = 'tUtil';
const INJECT_SAGA = 'injectSaga';

const generator = path.join(__dirname, '../generators/react-native/index.js');
const plopGen = ['--plopfile', generator];

const [, , ...args] = process.argv;
let commandLineArgs = args.toString().split(',');
const stdioInherit = { stdio: 'inherit' };

function execShell(commandArray) {
childProcess.execFileSync(
path.join(__dirname, '../node_modules/.bin/plop'),
commandArray,
{ ...stdioInherit },
);
}

// validate input
if (!commandLineArgs[0]) {
shell.exec(
`echo Sorry! react-native-generate requires an argument to be passed. Run react-native-generate --help for more details`,
);
return;
}

// get the type of generator
shell.env.GENERATOR_TYPE = _.includes(commandLineArgs[0], 't')
? 'existing'
: 'new';
let directoryName = 'react-native-template';
switch (commandLineArgs[0]) {
case 'init':
shell.exec(
`git clone https://github.com/wednesday-solutions/react-native-template`,
);
shell.cd(process.cwd());
if (commandLineArgs[1]) {
shell.exec(`mkdir ${commandLineArgs[1]}`);
fs.rename(`react-native-template`, commandLineArgs[1], err => {
if (err) {
throw new Error('Error while renaming');
}
});
directoryName = commandLineArgs[1];
const json = path.join(__dirname, '../node_modules/.bin/json');

shell.exec(
`${json} -I -f ${directoryName}/package.json -e "this.name='${directoryName}'"`,
);
shell.exec(
`${json} -I -f ${directoryName}/package.json -e "this.homepage='""'"`,
);
shell.exec(
`${json} -I -f ${directoryName}/package.json -e "this.author='""'"`,
);
shell.exec(
`${json} -I -f ${directoryName}/package.json -e "this.repository='{}'"`,
);

commandLineArgs = _.drop(commandLineArgs);
}
shell.cd(directoryName);
shell.exec(`git remote remove origin`);
execShell([
'-f',
...plopGen,
WEBPACK_BASE_BABEL,
..._.drop(commandLineArgs),
]);
shell.exec(`npm run initialize`);
break;
case 'gt':
execShell(plopGen);
break;
case 'gtcom':
execShell([...plopGen, COMPONENT, ..._.drop(commandLineArgs)]);
break;
case 'gtcon':
execShell([...plopGen, CONTAINER, ..._.drop(commandLineArgs)]);
break;
case 'gtf':
execShell(['-f', ...plopGen, ..._.drop(commandLineArgs)]);
break;
case 'gtcomf':
execShell(['-f', ...plopGen, COMPONENT, ..._.drop(commandLineArgs)]);
break;
case 'gtconf':
execShell(['-f', ...plopGen, CONTAINER, ..._.drop(commandLineArgs)]);
break;
case 'g':
execShell([...plopGen, ..._.drop(commandLineArgs)]);
break;
case 'gcom':
execShell([...plopGen, COMPONENT, ..._.drop(commandLineArgs)]);
break;
case 'gcon':
execShell([...plopGen, CONTAINER, ..._.drop(commandLineArgs)]);
break;
case 'gf':
execShell(['-f', ...plopGen, ..._.drop(commandLineArgs)]);
break;
case 'gcomf':
execShell(['-f', ...plopGen, COMPONENT, ..._.drop(commandLineArgs)]);
break;
case 'gconf':
execShell(['-f', ...plopGen, CONTAINER, ..._.drop(commandLineArgs)]);
break;
case 'gtutil':
execShell(['-f', ...plopGen, TEST_UTIL, ..._.drop(commandLineArgs)]);
break;
case 'ginjectsaga':
execShell(['-f', ...plopGen, INJECT_SAGA, ..._.drop(commandLineArgs)]);
break;
case '--help':
shell.echo(
`Generate tests for existing and new react native components\n\n` +
`init: Create a new react native application\n` +
`gt: Creating a test for a container or component\n` +
`gtf: Forcefully creating a test for a container or component\n` +
`gtcom: Creating a test for an existing component\n` +
`gtcomf: Forcefully creating a test for an existing component\n` +
`gtcon: Creating a test for an existing container\n` +
`gtconf : Forcefully creating a test for an existing component\n` +
`g: Creating a container or component\n` +
`gf: Forcefully creating a container or component\n` +
`gcom: Creating a component\n` +
`gcomf: Forcefully creating a component\n` +
`gcon: Creating a container\n` +
`gconf: Forcefully creating a container\n` +
`--all: Adding tests for all existing containers or components.\n` +
`gtutil: Create a test util file with some test utility functions.\n` +
`ginjectsaga: Create an injector for sagas that work with hooks.\n\n` +
`-------\n\n` +
`Creating a test by specifying type, path and name: react-native-generate gt component src/app Button\n` +
`Creating a test for an existing component by specifying path and name: react-native-generate gtcon src/app Button\n` +
`Creating a test for an existing container by specifying path and name: react-native-generate gtcom src/app HomePage\n` +
`Creating a component/container by specifying type, path and name: react-native-generate g component src/app Button\n` +
`Creating a component by specifying path and name: react-native-generate gcon src/app Button\n` +
`Creating a container by specifying path and name: react-native-generate gcom src/app HomePage\n` +
`Generate test for all components in directory: react-native-generate --all component src/app/components\n` +
`Generate test for all containers in directory: react-native-generate --all containers src/app/containers`,
);
break;
case '--all':
{
commandLineArgs = _.drop(commandLineArgs);
if (!commandLineArgs[0] || !commandLineArgs[1] || commandLineArgs[2]) {
shell.exec(
`echo Sorry! react-native-generate --all requires 2 commandLineArgs to be passed. Run react-native-generate --help for more details`,
);
return;
}
let cwd;
let directories;
switch (commandLineArgs[0]) {
case COMPONENT:
cwd = shell.exec('pwd').stdout;
shell.cd(`./${commandLineArgs[1]}`);
directories = shell.ls();
shell.cd(cwd);
directories.forEach(component => {
if (!_.includes(component, '.')) {
shell.echo(`Component name: ${component}`);
childProcess.execSync(
`react-native-generate gtcomf ${_.drop(
commandLineArgs,
)} ${component}`,
{
...stdioInherit,
},
);
}
});
break;
case CONTAINER:
cwd = shell.exec('pwd').stdout;
shell.cd(`./${commandLineArgs[1]}`);
directories = shell.ls();
shell.cd(cwd);
directories.forEach(container => {
if (!_.includes(container, '.')) {
shell.echo(`Container name: ${container}`);
childProcess.execSync(
`react-native-generate gtconf ${_.drop(
commandLineArgs,
)} ${container}`,
{
...stdioInherit,
},
);
}
});
break;
default:
shell.exec(`echo ${commandLineArgs[0]} is not a valid argument`);
}
}
break;
default:
shell.exec(`echo Sorry ${commandLineArgs[0]} is not a valid command`);
break;
}
32 changes: 32 additions & 0 deletions generators/react-native/component/index.js.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
*
* {{ properCase name }}
*
*/

{{#if memo}}
import React, { memo } from 'react'
{{else}}
import React from 'react'
{{/if}}
import { View, Text } from 'react-native';
// import PropTypes from 'prop-types'
// import styled from 'styled-components'

import { FormattedMessage as T } from 'react-intl'

function {{ properCase name }}() {
return (
<View>
<Text><T id={'{{lowerCase name}}'} /></Text>
</View>
)
}

{{ properCase name }}.propTypes = {}

{{#if memo}}
export default memo({{ properCase name }})
{{else}}
export default {{ properCase name }}
{{/if}}
16 changes: 16 additions & 0 deletions generators/react-native/component/stories.js.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
*
* Stories for {{ properCase name }}
*
* @see https://github.com/storybookjs/storybook
*
*/

import React from 'react'
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native'
import { text } from '@storybook/addon-knobs'
import {{ properCase name }} from '../index'


storiesOf('{{properCase name}}').add('simple', () =><View><{{properCase name}} id={text('id', '{{properCase name}}')}/></View>)
18 changes: 18 additions & 0 deletions generators/react-native/component/test.js.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
*
* Tests for {{ properCase name }}
*
*/

import React from 'react'
// import { fireEvent } from '@testing-library/dom'
import { renderWithIntl } from '@utils/testUtils'
import {{ properCase name }} from '../index'

describe('<{{ properCase name }} />', () => {

it('should render and match the snapshot', () => {
const { baseElement } = renderWithIntl(<{{ properCase name }} />)
expect(baseElement).toMatchSnapshot()
})
})
62 changes: 62 additions & 0 deletions generators/react-native/container/index.js.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/**
*
* {{properCase name }}
*
*/

{{#if memo}}
import React, { memo } from 'react'
{{else}}
import React from 'react'
{{/if}}
import { View, Text } from 'react-native';
// import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { injectIntl } from 'react-intl'
import { FormattedMessage as T } from 'react-intl'
{{#if wantActionsAndReducer}}
import { createStructuredSelector } from 'reselect'
{{/if}}
import { compose } from 'redux'
{{#if wantActionsAndReducer}}
import makeSelect{{properCase name}} from './selectors'
{{/if}}

export function {{ properCase name }}() {

return (
<View>
<Text><T id={'{{properCase name}}'} /></Text>
</View>
)
}

{{ properCase name }}.propTypes = {
}

{{#if wantActionsAndReducer}}
const mapStateToProps = createStructuredSelector({
{{ camelCase name }}: makeSelect{{properCase name}}(),
})
{{/if}}

function mapDispatchToProps(dispatch) {
return {
dispatch,
}
}

{{#if wantActionsAndReducer}}
const withConnect = connect(mapStateToProps, mapDispatchToProps)
{{else}}
const withConnect = connect(null, mapDispatchToProps)
{{/if}}

export default compose(
withConnect,
{{#if memo}}
memo,
{{/if}}
)({{ properCase name }})

export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }})
Loading