refactor: remove studio term (#257)

aws-amplify · Nov 26, 2021 · 4c82035 · 4c82035
1 parent b6fc75e
commit 4c82035
Show file tree

Hide file tree

Showing 105 changed files with 679 additions and 596 deletions.
diff --git a/README.md b/README.md
@@ -23,20 +23,20 @@ Amplify Codegen UI supports component generation in Node or a browser environmen
 ```js
 import {
   AmplifyRenderer,
-  StudioTemplateRendererFactory,
-  StudioTemplateRendererManager,
+  FrontendManagerTemplateRendererFactory,
+  FrontendManagerTemplateRendererManager,
 } from '@aws-amplify/codegen-ui-react';
 
 const renderConfig = {};
 const outputConfig = {
   outputPathDir: './src/ui-components';
 };
 
-const componentRendererFactory = new StudioTemplateRendererFactory(
+const componentRendererFactory = new FrontendManagerTemplateRendererFactory(
   (component) => new AmplifyRenderer(component, renderConfig),
 );
 
-const rendererManager = new StudioTemplateRendererManager(componentRendererFactory, outputConfig);
+const rendererManager = new FrontendManagerTemplateRendererManager(componentRendererFactory, outputConfig);
 
 const component = {
   id: '1234-5678-9010',
@@ -56,21 +56,21 @@ rendererManager.renderSchemaToTemplate(component);
 
 ```js
 import {
-  ReactThemeStudioTemplateRenderer,
-  StudioTemplateRendererFactory,
-  StudioTemplateRendererManager,
+  ReactThemeFrontendManagerTemplateRenderer,
+  FrontendManagerTemplateRendererFactory,
+  FrontendManagerTemplateRendererManager,
 } from '@aws-amplify/codegen-ui-react';
 
 const renderConfig = {};
 const outputConfig = {
   outputPathDir: './src/ui-components';
 };
 
-const themeRendererFactory = new StudioTemplateRendererFactory(
-  (theme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
+const themeRendererFactory = new FrontendManagerTemplateRendererFactory(
+  (theme) => new ReactThemeFrontendManagerTemplateRenderer(theme, renderConfig),
 );
 
-const themeRendererManager = new StudioTemplateRendererManager(themeRendererFactory, outputConfig);
+const themeRendererManager = new FrontendManagerTemplateRendererManager(themeRendererFactory, outputConfig);
 
 const theme = {
   id: '1234-5678-9010',
@@ -120,21 +120,21 @@ themeRendererManager.renderSchemaToTemplate(theme);
 
 ```js
 import {
-  ReactIndexStudioTemplateRenderer,
-  StudioTemplateRendererFactory,
-  StudioTemplateRendererManager,
+  ReactIndexFrontendManagerTemplateRenderer,
+  FrontendManagerTemplateRendererFactory,
+  FrontendManagerTemplateRendererManager,
 } from '@aws-amplify/codegen-ui-react';
 
 const renderConfig = {};
 const outputConfig = {
   outputPathDir: './src/ui-components',
 };
 
-const indexRendererFactory = new StudioTemplateRendererFactory(
-  (components) => new ReactIndexStudioTemplateRenderer(components, renderConfig),
+const indexRendererFactory = new FrontendManagerTemplateRendererFactory(
+  (components) => new ReactIndexFrontendManagerTemplateRenderer(components, renderConfig),
 );
 
-const indexRendererManager = new StudioTemplateRendererManager(indexRendererFactory, outputConfig);
+const indexRendererManager = new FrontendManagerTemplateRendererManager(indexRendererFactory, outputConfig);
 
 const components = [
   {
@@ -190,7 +190,7 @@ const { importsText, compText } = new AmplifyRenderer(component, renderConfig).r
 #### Themes
 
 ```js
-import { ReactThemeStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';
+import { ReactThemeFrontendManagerTemplateRenderer } from '@aws-amplify/codegen-ui-react';
 
 const renderConfig = {};
 
@@ -235,13 +235,13 @@ const theme = {
   ],
 };
 
-const { componentText } = new ReactThemeStudioTemplateRenderer(theme, renderConfig).renderComponent();
+const { componentText } = new ReactThemeFrontendManagerTemplateRenderer(theme, renderConfig).renderComponent();
 ```
 
 #### `index.js` File
 
 ```js
-import { ReactIndexStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';
+import { ReactIndexFrontendManagerTemplateRenderer } from '@aws-amplify/codegen-ui-react';
 
 const renderConfig = {};
 const components = [
@@ -267,7 +267,7 @@ const components = [
   },
 ];
 
-const { componentText } = new ReactIndexStudioTemplateRenderer(components, renderConfig);
+const { componentText } = new ReactIndexFrontendManagerTemplateRenderer(components, renderConfig);
 ```
 
 ### Config

diff --git a/...ts__/studio-ui-codegen-react.test.ts.snap → ...end-manager-ui-codegen-react.test.ts.snap b/...ts__/studio-ui-codegen-react.test.ts.snap → ...end-manager-ui-codegen-react.test.ts.snap
@@ -749,7 +749,7 @@ export default function ComplexTest2(
           padding=\\"0px 0px 0px 0px\\"
           backgroundColor=\\"rgb(255,0,0)\\"
           position=\\"relative\\"
-          src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/153x289?text=Amplify+FrontendManager+is+Awesome!\\"
           height=\\"125px\\"
           {...getOverrideProps(overrides, \\"Flex.Flex[0].View[0]\\")}
         ></View>
@@ -758,7 +758,7 @@ export default function ComplexTest2(
           padding=\\"0px 0px 0px 0px\\"
           backgroundColor=\\"rgb(219.30000364780426,255,0)\\"
           position=\\"relative\\"
-          src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/153x289?text=Amplify+FrontendManager+is+Awesome!\\"
           height=\\"122px\\"
           {...getOverrideProps(overrides, \\"Flex.Flex[0].View[1]\\")}
         ></View>
@@ -825,7 +825,7 @@ export default function ComplexTest3(
         padding=\\"0px 0px 0px 0px\\"
         backgroundColor=\\"rgb(196.00000351667404,196.00000351667404,196.00000351667404)\\"
         position=\\"relative\\"
-        src=\\"https://via.placeholder.com/430x452?text=Amplify+Studio+is+Awesome!\\"
+        src=\\"https://via.placeholder.com/430x452?text=Amplify+FrontendManager+is+Awesome!\\"
         height=\\"69px\\"
         {...getOverrideProps(overrides, \\"Flex.View[0]\\")}
       ></View>
@@ -892,7 +892,7 @@ export default function ComplexTest4(
           backgroundColor: \\"rgb(255,153.00000607967377,0)\\",
           top: \\"1px\\",
           left: \\"203px\\",
-          src: \\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\",
+          src: \\"https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!\\",
           width: \\"120px\\",
           position: \\"absolute\\",
           height: \\"122px\\",
@@ -902,7 +902,7 @@ export default function ComplexTest4(
           backgroundColor: \\"rgb(255,0,0)\\",
           top: \\"0px\\",
           left: \\"0px\\",
-          src: \\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\",
+          src: \\"https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!\\",
           width: \\"122px\\",
           position: \\"absolute\\",
           height: \\"123px\\",
@@ -966,7 +966,7 @@ export default function ComplexTest4(
           backgroundColor=\\"rgb(35.699965953826904,0,255)\\"
           top=\\"0px\\"
           left=\\"0px\\"
-          src=\\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!\\"
           width=\\"122px\\"
           position=\\"absolute\\"
           height=\\"123px\\"
@@ -977,7 +977,7 @@ export default function ComplexTest4(
           backgroundColor=\\"rgb(0,255,25.49997568130493)\\"
           top=\\"1px\\"
           left=\\"203px\\"
-          src=\\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!\\"
           width=\\"120px\\"
           position=\\"absolute\\"
           height=\\"122px\\"
@@ -1023,7 +1023,7 @@ export default function ComplexTest5(
         padding=\\"0px 0px 0px 0px\\"
         backgroundColor=\\"rgb(35.699965953826904,0,255)\\"
         position=\\"relative\\"
-        src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
+        src=\\"https://via.placeholder.com/240x120?text=Amplify+FrontendManager+is+Awesome!\\"
         height=\\"120px\\"
         {...getOverrideProps(overrides, \\"Flex.View[0]\\")}
       ></View>
@@ -1032,7 +1032,7 @@ export default function ComplexTest5(
         padding=\\"0px 0px 0px 0px\\"
         backgroundColor=\\"rgb(0,255,25.49997568130493)\\"
         position=\\"relative\\"
-        src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
+        src=\\"https://via.placeholder.com/240x120?text=Amplify+FrontendManager+is+Awesome!\\"
         height=\\"120px\\"
         {...getOverrideProps(overrides, \\"Flex.View[1]\\")}
       ></View>
@@ -1156,7 +1156,7 @@ export default function ComplexTest7(
         top=\\"0px\\"
         borderRadius=\\"45px\\"
         left=\\"254.15074157714844px\\"
-        src=\\"https://via.placeholder.com/401x192?text=Amplify+Studio+is+Awesome!\\"
+        src=\\"https://via.placeholder.com/401x192?text=Amplify+FrontendManager+is+Awesome!\\"
         width=\\"150.84925842285156px\\"
         position=\\"absolute\\"
         height=\\"196px\\"
@@ -1184,7 +1184,7 @@ export default function ComplexTest7(
         top=\\"0px\\"
         borderRadius=\\"27px\\"
         left=\\"0px\\"
-        src=\\"https://via.placeholder.com/401x192?text=Amplify+Studio+is+Awesome!\\"
+        src=\\"https://via.placeholder.com/401x192?text=Amplify+FrontendManager+is+Awesome!\\"
         width=\\"169.42330932617188px\\"
         position=\\"absolute\\"
         height=\\"189.0880126953125px\\"
@@ -1241,7 +1241,7 @@ export default function ComplexTest8(
           padding=\\"0px 0px 0px 0px\\"
           backgroundColor=\\"rgb(219.30000364780426,255,0)\\"
           position=\\"relative\\"
-          src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/472x723?text=Amplify+FrontendManager+is+Awesome!\\"
           height=\\"119px\\"
           {...getOverrideProps(overrides, \\"Flex.Flex[0].View[0]\\")}
         ></View>
@@ -1250,7 +1250,7 @@ export default function ComplexTest8(
           padding=\\"0px 0px 0px 0px\\"
           backgroundColor=\\"rgb(255,0,0)\\"
           position=\\"relative\\"
-          src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
+          src=\\"https://via.placeholder.com/472x723?text=Amplify+FrontendManager+is+Awesome!\\"
           height=\\"124px\\"
           {...getOverrideProps(overrides, \\"Flex.Flex[0].View[1]\\")}
         ></View>

diff --git a/...act-studio-template-renderer.test.ts.snap → ...nd-manager-template-renderer.test.ts.snap b/...act-studio-template-renderer.test.ts.snap → ...nd-manager-template-renderer.test.ts.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReactStudioTemplateRenderer renderSampleCodeSnippet component with name 1`] = `
+exports[`ReactFrontendManagerTemplateRenderer renderSampleCodeSnippet component with name 1`] = `
 Object {
   "compText": "<MyText />",
   "importsText": "import { MyText } from \\"./ui-components\\";
 ",
 }
 `;
 
-exports[`ReactStudioTemplateRenderer renderSampleCodeSnippet component without name 1`] = `
+exports[`ReactFrontendManagerTemplateRenderer renderSampleCodeSnippet component without name 1`] = `
 Object {
   "compText": "<unknown_component_name />",
   "importsText": "import { unknown_component_name } from \\"./ui-components\\";

diff --git a/packages/codegen-ui-react/lib/__tests__/__utils__/mock-classes.ts b/packages/codegen-ui-react/lib/__tests__/__utils__/mock-classes.ts
@@ -14,9 +14,9 @@
   limitations under the License.
  */
 import { JsxFragment, factory } from 'typescript';
-import { ReactStudioTemplateRenderer } from '../../react-studio-template-renderer';
+import { ReactFrontendManagerTemplateRenderer } from '../../react-frontend-manager-template-renderer';
 
-export class MockTemplateRenderer extends ReactStudioTemplateRenderer {
+export class MockTemplateRenderer extends ReactFrontendManagerTemplateRenderer {
   renderJsx(): JsxFragment {
     return factory.createJsxFragment(factory.createJsxOpeningFragment(), [], factory.createJsxJsxClosingFragment());
   }

diff --git a/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/primitives.test.ts b/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/primitives.test.ts
@@ -13,13 +13,13 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { StudioComponent } from '@aws-amplify/codegen-ui';
+import { FrontendManagerComponent } from '@aws-amplify/codegen-ui';
 import { assertASTMatchesSnapshot } from '../__utils__/snapshot-helpers';
 
 import { AmplifyRenderer } from '../../amplify-ui-renderers/amplify-renderer';
 import Primitive from '../../primitive';
 
-function testPrimitive(component: StudioComponent) {
+function testPrimitive(component: FrontendManagerComponent) {
   const renderedComponent = new AmplifyRenderer(component, {}).renderJsx(component);
   assertASTMatchesSnapshot(renderedComponent);
 }

diff --git a/...__tests__/studio-ui-codegen-react.test.ts → ...frontend-manager-ui-codegen-react.test.ts b/...__tests__/studio-ui-codegen-react.test.ts → ...frontend-manager-ui-codegen-react.test.ts
@@ -13,23 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { StudioTemplateRendererFactory, StudioComponent, StudioTheme } from '@aws-amplify/codegen-ui';
+import {
+  FrontendManagerTemplateRendererFactory,
+  FrontendManagerComponent,
+  FrontendManagerTheme,
+} from '@aws-amplify/codegen-ui';
 import fs from 'fs';
 import { join } from 'path';
 import { ModuleKind, ScriptTarget, ScriptKind, ReactRenderConfig } from '..';
 import { AmplifyRenderer } from '../amplify-ui-renderers/amplify-renderer';
-import { ReactThemeStudioTemplateRenderer } from '../react-theme-studio-template-renderer';
+import { ReactThemeFrontendManagerTemplateRenderer } from '../react-theme-frontend-manager-template-renderer';
 
-function loadSchemaFromJSONFile(jsonSchemaFile: string): StudioComponent {
+function loadSchemaFromJSONFile(jsonSchemaFile: string): FrontendManagerComponent {
   return JSON.parse(
-    fs.readFileSync(join(__dirname, 'studio-ui-json', `${jsonSchemaFile}.json`), 'utf-8'),
-  ) as StudioComponent;
+    fs.readFileSync(join(__dirname, 'frontend-manager-ui-json', `${jsonSchemaFile}.json`), 'utf-8'),
+  ) as FrontendManagerComponent;
 }
 
-function loadThemeFromJSONFile(jsonThemeFile: string): StudioTheme {
+function loadThemeFromJSONFile(jsonThemeFile: string): FrontendManagerTheme {
   return JSON.parse(
-    fs.readFileSync(join(__dirname, 'studio-ui-json', `${jsonThemeFile}.json`), 'utf-8'),
-  ) as StudioTheme;
+    fs.readFileSync(join(__dirname, 'frontend-manager-ui-json', `${jsonThemeFile}.json`), 'utf-8'),
+  ) as FrontendManagerTheme;
 }
 
 function generateWithAmplifyRenderer(
@@ -38,8 +42,8 @@ function generateWithAmplifyRenderer(
   isSampleCodeSnippet = false,
 ): { componentText: string; declaration?: string } {
   const schema = loadSchemaFromJSONFile(jsonSchemaFile);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (component: StudioComponent) => new AmplifyRenderer(component, renderConfig),
+  const rendererFactory = new FrontendManagerTemplateRendererFactory(
+    (component: FrontendManagerComponent) => new AmplifyRenderer(component, renderConfig),
   );
   if (isSampleCodeSnippet) {
     return { componentText: rendererFactory.buildRenderer(schema).renderSampleCodeSnippet().compText };
@@ -49,8 +53,8 @@ function generateWithAmplifyRenderer(
 
 function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderConfig = {}): string {
   const theme = loadThemeFromJSONFile(jsonFile);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
+  const rendererFactory = new FrontendManagerTemplateRendererFactory(
+    (theme: FrontendManagerTheme) => new ReactThemeFrontendManagerTemplateRenderer(theme, renderConfig),
   );
   return rendererFactory.buildRenderer(theme).renderComponent().componentText;
 }

diff --git a/...ests__/studio-ui-json/builtInIconset.json → ...ntend-manager-ui-json/builtInIconset.json b/...ests__/studio-ui-json/builtInIconset.json → ...ntend-manager-ui-json/builtInIconset.json
diff --git a/..._tests__/studio-ui-json/buttonGolden.json → ...rontend-manager-ui-json/buttonGolden.json b/..._tests__/studio-ui-json/buttonGolden.json → ...rontend-manager-ui-json/buttonGolden.json
diff --git a/...i-json/childComponentWithDataBinding.json → ...i-json/childComponentWithDataBinding.json b/...i-json/childComponentWithDataBinding.json → ...i-json/childComponentWithDataBinding.json
diff --git a/...dComponentWithDataBoundConcatenation.json → ...dComponentWithDataBoundConcatenation.json b/...dComponentWithDataBoundConcatenation.json → ...dComponentWithDataBoundConcatenation.json
diff --git a/...hildComponentWithStaticConcatenation.json → ...hildComponentWithStaticConcatenation.json b/...hildComponentWithStaticConcatenation.json → ...hildComponentWithStaticConcatenation.json
diff --git a/...studio-ui-json/collectionWithBinding.json → ...anager-ui-json/collectionWithBinding.json b/...studio-ui-json/collectionWithBinding.json → ...anager-ui-json/collectionWithBinding.json
diff --git a/...ui-json/collectionWithBindingAndSort.json → ...ui-json/collectionWithBindingAndSort.json b/...ui-json/collectionWithBindingAndSort.json → ...ui-json/collectionWithBindingAndSort.json
diff --git a/...-json/collectionWithBindingItemsName.json → ...-json/collectionWithBindingItemsName.json b/...-json/collectionWithBindingItemsName.json → ...-json/collectionWithBindingItemsName.json
diff --git a/...ollectionWithBindingWithoutPredicate.json → ...ollectionWithBindingWithoutPredicate.json b/...ollectionWithBindingWithoutPredicate.json → ...ollectionWithBindingWithoutPredicate.json
diff --git a/...dio-ui-json/collectionWithoutBinding.json → ...ger-ui-json/collectionWithoutBinding.json b/...dio-ui-json/collectionWithoutBinding.json → ...ger-ui-json/collectionWithoutBinding.json
diff --git a/..._tests__/studio-ui-json/complexTest1.json → ...rontend-manager-ui-json/complexTest1.json b/..._tests__/studio-ui-json/complexTest1.json → ...rontend-manager-ui-json/complexTest1.json
diff --git a/..._tests__/studio-ui-json/complexTest2.json → ...rontend-manager-ui-json/complexTest2.json b/..._tests__/studio-ui-json/complexTest2.json → ...rontend-manager-ui-json/complexTest2.json
@@ -22,7 +22,7 @@
                 "value": "relative"
               },
               "src": {
-                "value": "https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!"
+                "value": "https://via.placeholder.com/153x289?text=Amplify+FrontendManager+is+Awesome!"
               },
               "height": {
                 "value": "125px"
@@ -47,7 +47,7 @@
                 "value": "relative"
               },
               "src": {
-                "value": "https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!"
+                "value": "https://via.placeholder.com/153x289?text=Amplify+FrontendManager+is+Awesome!"
               },
               "height": {
                 "value": "122px"

diff --git a/..._tests__/studio-ui-json/complexTest3.json → ...rontend-manager-ui-json/complexTest3.json b/..._tests__/studio-ui-json/complexTest3.json → ...rontend-manager-ui-json/complexTest3.json
@@ -60,7 +60,7 @@
             "value": "relative"
           },
           "src": {
-            "value": "https://via.placeholder.com/430x452?text=Amplify+Studio+is+Awesome!"
+            "value": "https://via.placeholder.com/430x452?text=Amplify+FrontendManager+is+Awesome!"
           },
           "height": {
             "value": "69px"

diff --git a/..._tests__/studio-ui-json/complexTest4.json → ...rontend-manager-ui-json/complexTest4.json b/..._tests__/studio-ui-json/complexTest4.json → ...rontend-manager-ui-json/complexTest4.json
@@ -22,7 +22,7 @@
                 "value": "0px"
               },
               "src": {
-                "value": "https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!"
+                "value": "https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!"
               },
               "width": {
                 "value": "122px"
@@ -53,7 +53,7 @@
                 "value": "203px"
               },
               "src": {
-                "value": "https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!"
+                "value": "https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!"
               },
               "width": {
                 "value": "120px"
@@ -132,7 +132,7 @@
             "backgroundColor": "rgb(255,153.00000607967377,0)",
             "top": "1px",
             "left": "203px",
-            "src": "https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!",
+            "src": "https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!",
             "width": "120px",
             "position": "absolute",
             "height": "122px"
@@ -142,7 +142,7 @@
             "backgroundColor": "rgb(255,0,0)",
             "top": "0px",
             "left": "0px",
-            "src": "https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!",
+            "src": "https://via.placeholder.com/323x123?text=Amplify+FrontendManager+is+Awesome!",
             "width": "122px",
             "position": "absolute",
             "height": "123px"