feat: chaos template config

chaos-design · Jul 24, 2023 · 5549b39 · 5549b39
1 parent 18ebb79
commit 5549b39
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 31 deletions.
diff --git a/packages/create-chaos/chaos-project/index.module.scss b/packages/create-chaos/chaos-project/index.module.scss
@@ -0,0 +1,3 @@
+.chaosProjectContainer {
+  // something here
+}
diff --git a/packages/create-chaos/chaos-project/index.tsx b/packages/create-chaos/chaos-project/index.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import c from 'classnames';
+
+import s from './index.module.scss';
+
+export interface ChaosProjectProps {
+  className?: string;
+}
+
+const ChaosProject = ({ className }: ChaosProjectProps) => {
+  const [counter, setCounter] = useState<number>(0);
+
+  return (
+    <div
+      className={c(s.chaosProjectContainer, className)}
+      onClick={() => {
+        setCounter((counter: number) => counter + 1);
+      }}
+    >
+      Counter: {counter}
+    </div>
+  );
+};
+
+export default ChaosProject;
diff --git a/packages/create-chaos/src/config.ts b/packages/create-chaos/src/config.ts
@@ -36,12 +36,12 @@ export const FRAMEWORKS: Framework[] = [
     variants: [
       {
         name: 'react-ts',
-        display: 'React TypeScript',
+        display: 'TypeScript Project',
         color: cyan,
       },
       {
         name: 'react-component-ts',
-        display: 'React Component',
+        display: 'Component',
         color: blue,
       },
     ],
@@ -58,7 +58,7 @@ export const FRAMEWORKS: Framework[] = [
       },
       {
         name: 'library-react-component-ts',
-        display: 'React Component Library',
+        display: 'React Component',
         color: magenta,
       },
     ],
@@ -84,7 +84,6 @@ export const FRAMEWORKS: Framework[] = [
         name: 'custom',
         display: 'Create By Custom ↗',
         color: yellow,
-        customCommand: 'npm create vite-create@latest TARGET_DIR',
       },
     ],
   },

diff --git a/packages/create-chaos/src/index.ts b/packages/create-chaos/src/index.ts
@@ -63,7 +63,7 @@ async function init() {
             !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
           name: 'overwrite',
           message: () =>
-            `${
+            `❗️${
               targetDir === '.'
                 ? 'Current directory'
                 : `Target directory "${targetDir}"`
@@ -102,7 +102,9 @@ async function init() {
             const frameworkColor = framework.color;
 
             return {
-              title: frameworkColor(framework.display || framework.name),
+              title: `🗂  ${frameworkColor(
+                framework.display || framework.name,
+              )}`,
               value: framework,
             };
           }),
@@ -117,7 +119,7 @@ async function init() {
               const variantColor = variant.color;
 
               return {
-                title: variantColor(variant.display || variant.name),
+                title: `📦 ${variantColor(variant.display || variant.name)}`,
                 value: variant.name,
               };
             }),

diff --git a/packages/create-chaos/src/utils.ts b/packages/create-chaos/src/utils.ts
@@ -81,7 +81,12 @@ export function pkgFromUserAgent(userAgent: string | undefined) {
 
 export function setupReactComponent(root: string, name: string) {
   editFile(path.resolve(root, 'index.tsx'), (content) => {
-    return content.replace(/ComponentName/g, kebabCase2UpperCamelCase(name));
+    return content
+      .replace(
+        /ComponentNameContainer/g,
+        `${kebabCase2CamelCase(name)}Container`,
+      )
+      .replace(/ComponentName/g, kebabCase2UpperCamelCase(name));
   });
 
   editFile(path.resolve(root, 'index.module.scss'), (content) => {

diff --git a/packages/create-chaos/template-react-component-ts/index.module.scss b/packages/create-chaos/template-react-component-ts/index.module.scss
@@ -1,22 +1,3 @@
-.ComponentName {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1966ff;
-  color: #fff;
-
-  cursor: pointer;
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: #646cff;
-  }
-
-  &:focus,
-  &:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
+.ComponentNameContainer {
+  // something here
 }
diff --git a/packages/create-chaos/template-react-component-ts/index.tsx b/packages/create-chaos/template-react-component-ts/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import c from 'classnames';
 
 import s from './index.module.scss';
@@ -12,7 +12,7 @@ const ComponentName = ({ className }: ComponentNameProps) => {
 
   return (
     <div
-      className={c(s.ComponentName, className)}
+      className={c(s.ComponentNameContainer, className)}
       onClick={() => {
         setCounter((counter: number) => counter + 1);
       }}