SHARE
TWEET

Untitled

a guest Jun 20th, 2019 45 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function Template() {
  2.   const camelize = str =>
  3.     str.replace(/\W+(.)/g, (_match, chr) => chr.toUpperCase());
  4.   return {
  5.     userInputs: [
  6.       {
  7.         title: 'Enter the component name',
  8.         argumentName: 'name',
  9.         defaultValue: 'HomeComponent'
  10.       }
  11.     ],
  12.     template: [
  13.       {
  14.         type: 'folder',
  15.         name: inputs => `${camelize(inputs.name)}`,
  16.         children: [
  17.           {
  18.             type: 'file',
  19.             name: inputs => `${camelize(inputs.name)}.jsx`,
  20.             content: inputs => `import React from 'react';
  21. import PropTypes from 'prop-types';
  22. import { styled } from 'linaria/react';
  23. import { MediaQuery } from '../Layout';
  24. import './${camelize(inputs.name)}.less';
  25.  
  26. export const Styled${camelize(inputs.name)} = styled.h1\`
  27. font-size: 1rem;
  28. font-weight: 700;
  29. color: $\{props => (props.color ? props.color : 'var(--text-color)')};
  30. line-height: 1.2;
  31. margin-bottom: 18px;
  32. $\{MediaQuery.phone} {
  33.   font-size: 14px;
  34. }
  35. \`;
  36.  
  37. const ${camelize(inputs.name)} = (props) => (<Styled${camelize(
  38.               inputs.name
  39.             )}>{props.children}</Styled${camelize(inputs.name)}>)
  40.  
  41. ${camelize(inputs.name)}.propTypes = {
  42.   children: PropTypes.element
  43. };
  44.  
  45. export default ${camelize(inputs.name)};`
  46.           },
  47.           {
  48.             type: 'file',
  49.             name: inputs => `${camelize(inputs.name)}.less`,
  50.             content: inputs => `.${camelize(inputs.name)}{
  51. display: flex;
  52. }
  53. `
  54.           },
  55.           {
  56.             type: 'file',
  57.             name: inputs => `${camelize(inputs.name)}.stories.js`,
  58.             content: inputs => `import React from 'react';
  59. import { storiesOf } from '@storybook/react';
  60. import { action } from '@storybook/addon-actions';
  61. import ${camelize(inputs.name)} from './${camelize(inputs.name)}';
  62.  
  63. storiesOf('${camelize(inputs.name)}', module).add('default', () => (
  64.   <${camelize(inputs.name)}/>
  65. ));
  66.             `
  67.           }
  68.         ]
  69.       }
  70.     ]
  71.   };
  72. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top