Skip to content

Generate React components for use in an AWS Amplify project.

License

Apache-2.0, Unknown licenses found

Licenses found

Apache-2.0
LICENSE
Unknown
license-header.js
Notifications You must be signed in to change notification settings

aws-amplify/amplify-codegen-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
May 2, 2023
Nov 30, 2023
Feb 25, 2022
Feb 15, 2024
Jun 26, 2024
Jun 25, 2024
Sep 2, 2021
Nov 29, 2023
Sep 2, 2021
Mar 17, 2023
Nov 3, 2021
Jul 19, 2023
Nov 16, 2021
Jul 1, 2021
Jun 26, 2024
Feb 25, 2022
Feb 25, 2022
Oct 18, 2021
Feb 25, 2022
Dec 7, 2021
Feb 15, 2024
Sep 19, 2022
Jun 26, 2024
Nov 1, 2021
Jun 25, 2024
Feb 14, 2024
Jul 10, 2023
Nov 4, 2021

AWS Amplify


Amplify Codegen UI

GitHub Discord Build CircleCI Language grade: JavaScript codecov Open Bugs Feature Requests

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