feat(cli): adding theme file in the cli

CONTRIBUTING.md

@@ -55,6 +55,7 @@ packages
         │   │   ├─index.js
         │   │   ├─NewComponent.jsx
         │   │   └─NewComponent.test.jsx
+        │   ├─NewComponent.theme.js
         │   ├─index.js
         │   └─index.native.js
         ├─index.js
@@ -66,8 +67,7 @@ packages
 Currently we have 3 predefined themes `Corporate`, `EndUser` and `Gyms`, all
 of them follows the `BaseTheme` object.
 
-All components must follow the `theme` property to style it. Every component has
-his own file, you can find it at `/packages/yoga/src/Theme/themes/components`.
+Every component has its own `theme` file. You can find it in its own folder.
 
 When building a new component, make sure to add values like paddings, colors,
 margins, to the component theme file.

scripts/cli/creators/index.js

@@ -1,6 +1,7 @@
 const { createWebComponent, createNativeComponent } = require('./component');
 const { createWebTest, createNativeTest } = require('./test');
 const { createWebDoc, createNativeDoc } = require('./doc');
+const { createComponentTheme } = require('./theme');
 
 module.exports = {
   createWebComponent,
@@ -9,4 +10,5 @@ module.exports = {
   createNativeDoc,
   createWebTest,
   createNativeTest,
+  createComponentTheme,
 };

scripts/cli/creators/theme.js

@@ -0,0 +1,7 @@
+const { theme } = require('../templates');
+const { createFile } = require('../utils');
+
+const createComponentTheme = (name, { base }) =>
+  createFile(`${base}/${name}/${name}.theme.js`, theme(name));
+
+module.exports = { createComponentTheme };

scripts/cli/index.js

@@ -7,6 +7,7 @@ const {
   createNativeTest,
   createWebDoc,
   createNativeDoc,
+  createComponentTheme,
 } = require('./creators');
 
 const cli = ({ name, web, native }) => {
@@ -16,13 +17,15 @@ const cli = ({ name, web, native }) => {
     createWebComponent(name, paths);
     createWebTest(name, paths);
     createWebDoc(name, paths, 'web');
+    createComponentTheme(name, paths);
     editIndexFiles(name, paths, 'web');
   }
 
   if (native) {
     createNativeComponent(name, paths);
     createNativeTest(name, paths);
     createNativeDoc(name, paths, 'native');
+    createComponentTheme(name, paths);
     editIndexFiles(name, paths, 'native');
   }
 
@@ -33,6 +36,7 @@ const cli = ({ name, web, native }) => {
     createNativeComponent(name, paths);
     createNativeTest(name, paths);
     createNativeDoc(name, paths);
+    createComponentTheme(name, paths);
     editIndexFiles(name, paths);
   }
 };

scripts/cli/templates/component.js

@@ -6,7 +6,15 @@ export default ${name};
 const component = (name, type = 'web') => `import React from 'react';
 import styled from 'styled-components';
 
-const Styled${name} = styled.${type === 'web' ? 'div' : 'Text'}\`\`;
+const Styled${name} = styled.${type === 'web' ? 'div' : 'Text'}\`
+  \${({
+    theme: {
+      yoga: {
+        components: { ${name.toLowerCase()} },
+      },
+    },
+  }) => \`\`}
+\`;
 
 const ${name} = props => <Styled${name} {...props} />;
 

scripts/cli/templates/index.js

@@ -2,6 +2,7 @@ const { indexMdx, webMdx, nativeMdx } = require('./doc');
 const { componentIndex, component } = require('./component');
 const labNative = require('./labnative');
 const test = require('./test');
+const theme = require('./theme');
 
 module.exports = {
   indexMdx,
@@ -11,4 +12,5 @@ module.exports = {
   test,
   componentIndex,
   component,
+  theme,
 };

scripts/cli/templates/theme.js

@@ -0,0 +1,6 @@
+const theme = name => `const ${name} = () => ({});
+
+export default ${name};
+`;
+
+module.exports = theme;