Need additional functionality

Amplify Codegen UI

Generate React components for use in an AWS Amplify project.

Usage

Amplify Codegen UI supports component generation in Node or a browser environment.

Generate in Node

Components

import {
  AmplifyRenderer,
  StudioTemplateRendererFactory,
  StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';

const renderConfig = {};
const outputConfig = {
  outputPathDir: './src/ui-components';
};

const componentRendererFactory = new StudioTemplateRendererFactory(
  (component) => new AmplifyRenderer(component, renderConfig),
);

const rendererManager = new StudioTemplateRendererManager(componentRendererFactory, outputConfig);

const component = {
  id: '1234-5678-9010',
  componentType: 'Text',
  name: 'TextPrimitive',
  properties: {
    label: {
      value: 'Hello world',
    },
  },
};

rendererManager.renderSchemaToTemplate(component);

Themes

import {
  ReactThemeStudioTemplateRenderer,
  StudioTemplateRendererFactory,
  StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';

const renderConfig = {};
const outputConfig = {
  outputPathDir: './src/ui-components';
};

const themeRendererFactory = new StudioTemplateRendererFactory(
  (theme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
);

const themeRendererManager = new StudioTemplateRendererManager(themeRendererFactory, outputConfig);

const theme = {
  id: '1234-5678-9010',
  name: 'MyTheme',
  values: [
    {
      key: 'tokens',
      value: {
        children: [
          {
            key: 'colors',
            value: {
              children: [
                {
                  key: 'font',
                  value: {
                    children: [
                      {
                        key: 'primary',
                        value: {
                          children: [
                            {
                              key: 'value',
                              value: {
                                value: '#008080',
                              },
                            },
                          ],
                        },
                      },
                    ],
                  },
                },
              ],
            },
          },
        ],
      },
    },
  ],
};

themeRendererManager.renderSchemaToTemplate(theme);

`index.js` File

import {
  ReactIndexStudioTemplateRenderer,
  StudioTemplateRendererFactory,
  StudioTemplateRendererManager,
} from '@aws-amplify/codegen-ui-react';

const renderConfig = {};
const outputConfig = {
  outputPathDir: './src/ui-components',
};

const indexRendererFactory = new StudioTemplateRendererFactory(
  (components) => new ReactIndexStudioTemplateRenderer(components, renderConfig),
);

const indexRendererManager = new StudioTemplateRendererManager(indexRendererFactory, outputConfig);

const components = [
  {
    id: '1234-5678-9010',
    componentType: 'Text',
    name: 'MyHelloWorld',
    properties: {
      label: {
        value: 'Hello world!',
      },
    },
  },
  {
    id: '1234-5678-9012',
    componentType: 'Text',
    name: 'MyCodegen',
    properties: {
      label: {
        value: 'Codegen!',
      },
    },
  },
];

indexRendererManager.renderSchemaToTemplate(components);

Generate in Browser

When generating components in the browser, components will not be written to the file system.

Components

import { AmplifyRenderer } from '@aws-amplify/codegen-ui-react';

const renderConfig = {};

const component = {
  id: '1234-5678-9010',
  componentType: 'Text',
  name: 'TextPrimitive',
  properties: {
    label: {
      value: 'Hello world',
    },
  },
};

const { importsText, compText } = new AmplifyRenderer(component, renderConfig).renderComponentOnly();

Themes

import { ReactThemeStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';

const renderConfig = {};

const theme = {
  id: '1234-5678-9010',
  name: 'MyTheme',
  values: [
    {
      key: 'tokens',
      value: {
        children: [
          {
            key: 'colors',
            value: {
              children: [
                {
                  key: 'font',
                  value: {
                    children: [
                      {
                        key: 'primary',
                        value: {
                          children: [
                            {
                              key: 'value',
                              value: {
                                value: '#008080',
                              },
                            },
                          ],
                        },
                      },
                    ],
                  },
                },
              ],
            },
          },
        ],
      },
    },
  ],
};

const { componentText } = new ReactThemeStudioTemplateRenderer(theme, renderConfig).renderComponent();

`index.js` File

import { ReactIndexStudioTemplateRenderer } from '@aws-amplify/codegen-ui-react';

const renderConfig = {};
const components = [
  {
    id: '1234-5678-9010',
    componentType: 'Text',
    name: 'MyHelloWorld',
    properties: {
      label: {
        value: 'Hello world!',
      },
    },
  },
  {
    id: '1234-5678-9012',
    componentType: 'Text',
    name: 'MyCodegen',
    properties: {
      label: {
        value: 'CodeGen',
      },
    },
  },
];

const { componentText } = new ReactIndexStudioTemplateRenderer(components, renderConfig);

Config

Output Config

outputPathDir (Required)

The directory generated components are written to.

const outputConfig = {
  outputPathDir: './src/ui-components',
};

Render Config

script

The script kind (JSX, TSX, etc.) of generated components.

Default: TSX Allowed: TSX, JSX, JS

import { ScriptKind } from '@aws-amplify/codegen-ui-react';

const renderConfig = {
  script: ScriptKind.JSX,
};

target

The EcmaScript version (ES2016, ESNext, etc.) of generated components.

Default: ES2015 Allowed: ES3, ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ESNext

import { ScriptTarget } from '@aws-amplify/codegen-ui-react';

const renderConfig = {
  target: ScriptTaget.ESNext,
};

module

The JavaScript module system of generated components.

Default: CommonJS Allowed: CommonJS, ESNext

import { ScriptTarget } from '@aws-amplify/codegen-ui-react';

const renderConfig = {
  module: ModuleKind.ESNext,
};

renderTypeDeclarations

Generate the type declaration files (.d.ts) for components.

Default: false Allowed: false, true

Rendering type declarations will negatively affect performance. Only generate type declarations if necessary.

Not supported in browser environments.

const renderConfig = {
  renderTypeDeclarations: true,
};

Contributing

CONTRIBUTING.md

	private buildThemeObject(): ObjectLiteralExpression {
	return factory.createObjectLiteralExpression(
	[
	factory.createPropertyAssignment(
	factory.createIdentifier('name'),
	factory.createStringLiteral(this.component.name),
	),
	]
	.concat(this.buildThemeValues(this.component.values))
	.concat(this.buildThemeOverrides(this.component.overrides)),
	true,
	);
	}

aws-amplify / amplify-codegen-ui Goto Github PK

amplify-codegen-ui's Introduction

Amplify Codegen UI

Usage

Generate in Node

Components

Themes

index.js File

Generate in Browser

Components

Themes

index.js File

Config

Output Config

outputPathDir (Required)

Render Config

script

target

module

renderTypeDeclarations

Contributing

amplify-codegen-ui's People

Contributors

Stargazers

Watchers

Forkers

amplify-codegen-ui's Issues

How did you install the Amplify CLI?

If applicable, what version of Node.js are you using?

Amplify CLI Version

What operating system are you using?

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

Describe the bug

Expected behavior

Reproduction steps

Project Identifier

Log output

Additional information

Before submitting, please confirm:

Recommend Projects

Recommend Topics

Recommend Org

`index.js` File

`index.js` File