chore: add create-component tool

packages/design-system/README.md

@@ -17,7 +17,13 @@ You need:
 
 Run:
 
-- `yarn storybook` to get started.
+- `yarn start:design-system` to get started.
+
+Need to make a new component?
+
+- `yarn create-component <atomic-type> <name>`
+  - This will create the skeleton files needed for a component.
+  - See below for atomic types.
 
 ## Atomic Design 101
 

packages/design-system/hack/create-component.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+// Usage: create-component.js <type> <kebab-name>
+
+const fs = require('fs');
+const path = require('path');
+const { camelCase, capitalCase, paramCase, pascalCase } = require('change-case');
+
+const baseDir = path.resolve(__dirname, '..');
+const types = ['atom', 'molecule', 'organism', 'template'];
+
+const componentType = process.argv[2];
+const name = process.argv[3];
+const forceReplace = process.argv[4] === '--force';
+
+if (!types.includes(componentType)) {
+  throw new Error(`Invalid component type: ${componentType}`);
+}
+
+const typeStoryGroup = `${componentType.replace(
+  /^[a-zA-Z]/,
+  componentType[0].toUpperCase()
+)}s`;
+
+const kebabCaseName = paramCase(name);
+const pascalCaseName = pascalCase(name);
+const camelCaseName = camelCase(name);
+const capitalCaseName = capitalCase(name);
+
+const componentRoot = `${baseDir}/${componentType}s/${kebabCaseName}`;
+
+if (fs.existsSync(componentRoot)) {
+  if (!forceReplace) {
+    throw new Error(
+      `Component already exists: ${pascalCaseName} in ${componentType}s/${kebabCaseName}`
+    );
+  }
+
+  console.log(`Removing existing component: ${pascalCaseName}`);
+  fs.rmSync(componentRoot, { recursive: true });
+}
+
+// Make base dir
+fs.mkdirSync(componentRoot);
+
+// Write index.ts
+const index_ts = `export * from './${pascalCaseName}';\n`;
+fs.writeFileSync(`${componentRoot}/index.ts`, index_ts, { encoding: 'utf8' });
+
+// Write component
+const component_tsx = `import { ${pascalCaseName}Styled } from './${pascalCaseName}.styled';\n\nexport const ${pascalCaseName} = () => (\n  <${pascalCaseName}Styled>${pascalCaseName}</${pascalCaseName}Styled>\n);\n`;
+fs.writeFileSync(`${componentRoot}/${pascalCaseName}.tsx`, component_tsx, {
+  encoding: 'utf8',
+});
+
+// Write styles
+const component_styled_ts = `import styled from 'styled-components';\nexport const ${pascalCaseName}Styled = styled.div\`\`;\n`;
+fs.writeFileSync(`${componentRoot}/${pascalCaseName}.styled.ts`, component_styled_ts, {
+  encoding: 'utf8',
+});
+
+// Write storybook
+const component_stories_tsx = `import { ${pascalCaseName} } from './${pascalCaseName}';\n\nexport default {\n  title: '${typeStoryGroup}/${capitalCaseName}',\n  component: ${pascalCaseName},\n};\n\nexport const ${camelCaseName} = (args) => <${pascalCaseName} {...args} />;\n`;
+fs.writeFileSync(
+  `${componentRoot}/${pascalCaseName}.stories.tsx`,
+  component_stories_tsx,
+  {
+    encoding: 'utf8',
+  }
+);
+
+// All done!
+console.log(`✨ Created ${componentType} '${name}'`);
+console.log(`Open it: ${path.resolve(componentRoot)}`);

packages/design-system/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "scripts": {
     "build": "build-storybook -o ../../dist/-/storybook",
+    "create-component": "node ./hack/create-component.js",
     "start": "start-storybook -p 6006"
   },
   "dependencies": {
@@ -42,6 +43,7 @@
     "@types/styled-components": "^5.1.11",
     "babel-loader": "8.1.0",
     "babel-plugin-styled-components": "^1.13.1",
+    "change-case": "^4.1.2",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   }

packages/design-system/templates/editor-utility/EditorUtility.stories.tsx

@@ -0,0 +1,8 @@
+import { EditorUtility } from './EditorUtility';
+
+export default {
+  title: 'Templates/Editor Utility',
+  component: EditorUtility,
+};
+
+export const editorUtility = (args) => <EditorUtility {...args} />;

packages/design-system/templates/editor-utility/EditorUtility.styled.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export const EditorUtilityStyled = styled.div``;

packages/design-system/templates/editor-utility/EditorUtility.tsx

@@ -0,0 +1,5 @@
+import { EditorUtilityStyled } from './EditorUtility.styled';
+
+export const EditorUtility = () => (
+  <EditorUtilityStyled>EditorUtility</EditorUtilityStyled>
+);

packages/design-system/templates/editor-utility/index.ts

@@ -0,0 +1 @@
+export * from './EditorUtility';