fix: adding theme files to test-generator, and moving into subdirecto…

…ries

packages/test-generator/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { StudioComponent, StudioTheme } from '@amzn/amplify-ui-codegen-schema';
 import { StudioTemplateRendererManager, StudioTemplateRendererFactory } from '@amzn/studio-ui-codegen';
 import {
@@ -12,8 +11,7 @@ import {
 } from '@amzn/studio-ui-codegen-react';
 import path from 'path';
 import log from 'loglevel';
-
-import * as schemas from './lib';
+import { ComponentSchemas, ThemeSchemas } from './lib';
 
 Error.stackTraceLimit = Infinity;
 
@@ -25,54 +23,31 @@ const renderConfig: ReactRenderConfig = {
   script: ScriptKind.TSX,
 };
 
-const rendererFactory = new StudioTemplateRendererFactory(
+const componentRendererFactory = new StudioTemplateRendererFactory(
   (component: StudioComponent) => new AmplifyRenderer(component, renderConfig),
 );
 
+const themeRendererFactory = new StudioTemplateRendererFactory(
+  (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
+);
+
 const outputPathDir = path.resolve(path.join(__dirname, '..', 'ui-components'));
 const outputConfig: ReactOutputConfig = {
   outputPathDir,
 };
 
-const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
-
-const themeRendererManager = new StudioTemplateRendererManager(
-  new StudioTemplateRendererFactory((theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig)),
-  outputConfig,
-);
-
-const theme: StudioTheme = {
-  components: {
-    alert: {
-      backgroundColor: 'hsl(210, 5%, 90%)',
-      padding: '0.75rem 1rem',
-      info: {
-        backgroundColor: 'hsl(220, 85%, 85%)',
-      },
-      error: {
-        backgroundColor: 'hsl(0, 75%, 85%)',
-      },
-      warning: {
-        backgroundColor: 'hsl(30, 75%, 85%)',
-      },
-      success: {
-        backgroundColor: 'hsl(130, 75%, 85%)',
-      },
-    },
-  },
-};
+const rendererManager = new StudioTemplateRendererManager(componentRendererFactory, outputConfig);
+const themeRendererManager = new StudioTemplateRendererManager(themeRendererFactory, outputConfig);
 
 const decorateTypescriptWithMarkdown = (typescriptSource: string): string => {
   return `\`\`\`typescript jsx\n${typescriptSource}\n\`\`\``;
 };
 
-themeRendererManager.renderSchemaToTemplate(theme);
-
-Object.entries(schemas).forEach(([name, schema]) => {
+Object.entries(ComponentSchemas).forEach(([name, schema]) => {
   log.info(`# ${name}`);
   try {
     rendererManager.renderSchemaToTemplate(schema as any);
-    const buildRenderer = rendererFactory.buildRenderer(schema as any);
+    const buildRenderer = componentRendererFactory.buildRenderer(schema as any);
 
     const compOnly = buildRenderer.renderComponentOnly();
     log.info('## Component Only Output');
@@ -92,3 +67,18 @@ Object.entries(schemas).forEach(([name, schema]) => {
     log.error(err);
   }
 });
+
+Object.entries(ThemeSchemas).forEach(([name, schema]) => {
+  log.info(`# ${name}`);
+  try {
+    themeRendererManager.renderSchemaToTemplate(schema as any);
+    const buildRenderer = themeRendererFactory.buildRenderer(schema as any);
+
+    const component = buildRenderer.renderComponent();
+    log.info('## Theme Output');
+    log.info(decorateTypescriptWithMarkdown(component.componentText));
+  } catch (err) {
+    log.error(`${name} failed with error:`);
+    log.error(err);
+  }
+});

packages/test-generator/lib/components/index.ts

@@ -0,0 +1,14 @@
+export { default as BoxGolden } from './boxGolden.json';
+export { default as BoxTest } from './boxTest.json';
+export { default as ButtonGolden } from './buttonGolden.json';
+export { default as Concat } from './concatTest.json';
+export { default as Conditional } from './conditionalTest.json';
+export { default as CustomChild } from './customChild.json';
+export { default as DataBindingWithDataStore } from './dataBindingWithDataStore.json';
+export { default as ExposedAsTest } from './exposedAsTest.json';
+export { default as HeaderWithAction } from './headerWithAction.json';
+export { default as SampleCodeSnippet } from './sampleCodeSnippet.json';
+export { default as TextGolden } from './textGolden.json';
+export { default as CollectionWithBinding } from './collectionWithBinding.json';
+export { default as ComponentWithDataBinding } from './componentWithDataBinding.json';
+export { default as TextWithDataBinding } from './textWithDataBinding.json';

packages/test-generator/lib/index.ts

@@ -1,14 +1,2 @@
-export { default as BoxGolden } from './boxGolden.json';
-export { default as BoxTest } from './boxTest.json';
-export { default as ButtonGolden } from './buttonGolden.json';
-export { default as Concat } from './concatTest.json';
-export { default as Conditional } from './conditionalTest.json';
-export { default as CustomChild } from './customChild.json';
-export { default as DataBindingWithDataStore } from './dataBindingWithDataStore.json';
-export { default as ExposedAsTest } from './exposedAsTest.json';
-export { default as HeaderWithAction } from './headerWithAction.json';
-export { default as SampleCodeSnippet } from './sampleCodeSnippet.json';
-export { default as TextGolden } from './textGolden.json';
-export { default as CollectionWithBinding } from './collectionWithBinding.json';
-export { default as ComponentWithDataBinding } from './componentWithDataBinding.json';
-export { default as TextWithDataBinding } from './textWithDataBinding.json';
+export * as ComponentSchemas from './components';
+export * as ThemeSchemas from './themes';

packages/test-generator/lib/themes/exampleTheme.json

@@ -0,0 +1,52 @@
+{
+  "components": {
+    "alert": {
+      "backgroundColor": "hsl(210, 5%, 90%)",
+      "padding": "0.75rem 1rem",
+      "info": {
+        "backgroundColor": "hsl(220, 85%, 85%)"
+      },
+      "error": {
+        "backgroundColor": "hsl(0, 75%, 85%)"
+      },
+      "warning": {
+        "backgroundColor": "hsl(30, 75%, 85%)"
+      },
+      "success": {
+        "backgroundColor": "hsl(130, 75%, 85%)"
+      }
+    }
+  },
+  "borderWidths": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "breakpoints": {
+    "values": {
+      "base": 0,
+      "small": 30,
+      "medium": 48,
+      "large": 62,
+      "xl": 80,
+      "xxl": 96
+    },
+    "unit": "em",
+    "defaultBreakpoint": "base"
+  },
+  "testAllTypes": {
+    "null": null,
+    "string": "test",
+    "number": 10,
+    "boolean": {
+      "t": true,
+      "false": false
+    },
+    "object": {
+      "object": {
+        "test": "test"
+      },
+      "array": ["test"]
+    }
+  }
+}

packages/test-generator/lib/themes/index.ts

@@ -0,0 +1 @@
+export { default as ExampleTheme } from './exampleTheme.json';