From f4f84d45f254e4313266b53335e9bc2c889a1efd Mon Sep 17 00:00:00 2001
From: Stivali <stivaliserna08@gmail.com>
Date: Thu, 1 Sep 2022 15:03:19 +0200
Subject: [PATCH 1/2] feat(packages/sui-studio): Add new param to use explicit
 import

---
 packages/sui-studio/README.md                 |  8 ++++
 .../sui-studio/bin/sui-studio-generate.js     | 39 ++++++++++++-------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/sui-studio/README.md b/packages/sui-studio/README.md
index 37f50821f..c3ca49cc9 100644
--- a/packages/sui-studio/README.md
+++ b/packages/sui-studio/README.md
@@ -46,6 +46,14 @@ Use `-C path` or `--context path` parameter to generate the component with a giv
 $ npx sui-studio generate house window -C ./myCustomContext.js
 ```
 
+#### Explicit import
+
+Use `-E` or `--explicit` parameter to generate a component in a file with its same name and an index re-export.
+
+```sh
+$ npx sui-studio generate house window -E
+```
+
 ### Use new compiler
 
 We're migrating to `swc` so you could generate the new component with the expected `prepare` field by using the flag `--swc` or `-W`.
diff --git a/packages/sui-studio/bin/sui-studio-generate.js b/packages/sui-studio/bin/sui-studio-generate.js
index 2ac276faa..5048f4950 100755
--- a/packages/sui-studio/bin/sui-studio-generate.js
+++ b/packages/sui-studio/bin/sui-studio-generate.js
@@ -17,6 +17,7 @@ program
   .option('-P, --prefix <prefix>', 'add prefix for this component')
   .option('-S, --scope <scope>', 'add scope for this component')
   .option('-W, --swc', 'Use the new SWC compiler', false)
+  .option('-E, --explicit', 'Use explicit import', false)
   .on('--help', () => {
     console.log('  Examples:')
     console.log('')
@@ -52,6 +53,7 @@ const componentInPascal = toPascalCase(
 const COMPONENT_DIR = `/components/${category}/${component}/`
 const COMPONENT_PATH = `${BASE_DIR}${COMPONENT_DIR}`
 const COMPONENT_ENTRY_JS_POINT_FILE = `${COMPONENT_PATH}src/index.js`
+const COMPONENT_JS_POINT_FILE = `${COMPONENT_PATH}src/${componentInPascal}.js`
 const COMPONENT_PACKAGE_JSON_FILE = `${COMPONENT_PATH}package.json`
 const COMPONENT_PACKAGE_GITIGNORE_FILE = `${COMPONENT_PATH}.gitignore`
 const COMPONENT_PACKAGE_NPMIGNORE_FILE = `${COMPONENT_PATH}.npmignore`
@@ -66,7 +68,7 @@ const COMPONENT_CONTEXT_FILE = `${DEMO_DIR}context.js`
 const TEST_DIR = `${COMPONENT_PATH}/test/`
 const COMPONENT_TEST_FILE = `${TEST_DIR}index.test.js`
 
-const {context, scope, prefix = 'sui', swc} = program.opts()
+const {context, scope, prefix = 'sui', swc, explicit} = program.opts()
 const packageScope = scope ? `@${scope}/` : ''
 const packageCategory = category ? `${toKebabCase(category)}-` : ''
 const packageName = `${packageScope}${prefix}-${packageCategory}${toKebabCase(
@@ -139,6 +141,25 @@ describe${context ? '.context.default' : ''}('${componentInPascal}', ${
 })
 `
 
+const componentTemplate = `// import PropTypes from 'prop-types'
+
+export default function ${componentInPascal}() {
+  return (
+    <div className="${prefix}-${componentInPascal}">
+      <h1>${componentInPascal}</h1>
+    </div>
+  )
+}
+
+${componentInPascal}.displayName = '${componentInPascal}'
+${componentInPascal}.propTypes = {}
+`
+
+const explicitImportTemplate = `import ${componentInPascal} from './${componentInPascal}.js'
+
+export default ${componentInPascal}
+`
+
 const defaultContext = `module.exports = {
   default: {
     i18n: {
@@ -225,21 +246,11 @@ test
 
   writeFile(
     COMPONENT_ENTRY_JS_POINT_FILE,
-    `// import PropTypes from 'prop-types'
-
-export default function ${componentInPascal}() {
-  return (
-    <div className="${prefix}-${componentInPascal}">
-      <h1>${componentInPascal}</h1>
-    </div>
-  )
-}
-
-${componentInPascal}.displayName = '${componentInPascal}'
-${componentInPascal}.propTypes = {}
-`
+    explicit ? explicitImportTemplate : componentTemplate
   ),
 
+  explicit && writeFile(COMPONENT_JS_POINT_FILE, componentTemplate),
+
   writeFile(
     COMPONENT_ENTRY_SCSS_POINT_FILE,
     `@import '~@s-ui/theme/lib/index';

From eb94d33dd4a23a86a628fbf0c1edaefe1105d22f Mon Sep 17 00:00:00 2001
From: Stivali <stivaliserna08@gmail.com>
Date: Fri, 2 Sep 2022 11:25:44 +0200
Subject: [PATCH 2/2] feat(packages/sui-studio): Refactor naming for explicit
 import file variable

---
 packages/sui-studio/bin/sui-studio-generate.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sui-studio/bin/sui-studio-generate.js b/packages/sui-studio/bin/sui-studio-generate.js
index 5048f4950..5363d176e 100755
--- a/packages/sui-studio/bin/sui-studio-generate.js
+++ b/packages/sui-studio/bin/sui-studio-generate.js
@@ -53,7 +53,7 @@ const componentInPascal = toPascalCase(
 const COMPONENT_DIR = `/components/${category}/${component}/`
 const COMPONENT_PATH = `${BASE_DIR}${COMPONENT_DIR}`
 const COMPONENT_ENTRY_JS_POINT_FILE = `${COMPONENT_PATH}src/index.js`
-const COMPONENT_JS_POINT_FILE = `${COMPONENT_PATH}src/${componentInPascal}.js`
+const EXPLICIT_COMPONENT_JS_POINT_FILE = `${COMPONENT_PATH}src/${componentInPascal}.js`
 const COMPONENT_PACKAGE_JSON_FILE = `${COMPONENT_PATH}package.json`
 const COMPONENT_PACKAGE_GITIGNORE_FILE = `${COMPONENT_PATH}.gitignore`
 const COMPONENT_PACKAGE_NPMIGNORE_FILE = `${COMPONENT_PATH}.npmignore`
@@ -249,7 +249,7 @@ test
     explicit ? explicitImportTemplate : componentTemplate
   ),
 
-  explicit && writeFile(COMPONENT_JS_POINT_FILE, componentTemplate),
+  explicit && writeFile(EXPLICIT_COMPONENT_JS_POINT_FILE, componentTemplate),
 
   writeFile(
     COMPONENT_ENTRY_SCSS_POINT_FILE,