Skip to content

Instantly share code, notes, and snippets.

@chunkzer
Created August 6, 2021 01:46
Show Gist options
  • Select an option

  • Save chunkzer/dd9f63bb98dad547069eeb50f381ca65 to your computer and use it in GitHub Desktop.

Select an option

Save chunkzer/dd9f63bb98dad547069eeb50f381ca65 to your computer and use it in GitHub Desktop.
Create all the associated boilerplate with a new react component
// include node fs module
const fs = require('fs');
const { writeFile, mkdir } = fs;
const makeComponentBoilerPlayer = async (args) => {
const [,, name, filepath] = args;
const directoryName = `${filepath}${name}`
await mkdir(directoryName, () => null);
const componentFileName = `${filepath}${name}.tsx`;
const componentBoilerplate = `
import React from 'react';
import StyledComponents from './${name}Styled';
const {
Container,
} = StyledComponents;
const ${name} = () => {
return (
<Container />
);
};
export default ${name};
`;
await writeFile(componentFileName, componentBoilerplate, () => null);
const stylesFileName = `${filepath}${name}Styled.tsx`;
const stylesBoilerplate = `
import styled from 'styled-components/native';
const Container = styled.View\`\`;
const StyledComponents = {
Container,
};
export default StyledComponents;
`;
await writeFile(stylesFileName, stylesBoilerplate, () => null);
const storybookFileName = `${filepath}${name}.stories.tsx`;
const storiesBoilerplate = `
import React from 'react';
import ${name} from './${name}';
import { storiesOf } from '@storybook/react-native';
storiesOf('${name}', module)
.add('default', () => (
<${name} />
));
`;
await writeFile(storybookFileName, storiesBoilerplate, () => null);
};
makeComponentBoilerPlayer(process.argv);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment