feat: output theme file

[dpilch]

Output ./ui-components/theme.tsx based on a input theme JSON file.

See snapshots for example output.

To test I used create react app with typescript.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import withTheme from './ui-components/theme';  // add theme provider
import { Button } from '@aws-amplify/ui-react'; 
import '@aws-amplify/ui-react/styles.css'; // add default themes

function App() {
 return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Button >Test</Button>
    </div>
  );
}

export default withTheme(App); // wrap App with theme
```Output `./ui-components/theme.tsx` based on a input theme JSON file.

See snapshots for example output.


To test I used create react app with typescript.

```js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import withTheme from './ui-components/theme';  // add theme provider
import { Button } from '@aws-amplify/ui-react'; 
import '@aws-amplify/ui-react/styles.css'; // add default themes

function App() {
 return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Button >Test</Button>
    </div>
  );
}

export default withTheme(App); // wrap App with theme

I generated a theme with the following JSON input.

{ "components": { "button": { "borderWidth": "40px" } } }

And we can see the styles were applied to the button.

Screen Shot 2021-09-27 at 3.45.54 PM.png.pdf

(Only PDF upload was working for me ¯\_(ツ)_/¯ )

[dpilch]

This is how theme is defined in amplify-ui. See https://github.com/aws-amplify/amplify-ui/blob/main/packages/react/src/theming/types.ts#L3-L7

[dpilch]

Copied from amplify-ui for now. We will need to add amplify-ui as a dependency in the future.

[alharris-at]

Could you just add the dependency on amplify-ui now instead of hard-coding more files? I'd rather that we don't need to come back and revisit these tasks down the road if it isn't necessary.

[dpilch]

Yes, we can do this now. Before we were still operating under not importing amplify-ui

[dpilch]

I'll look into why the amplify-category-studio tests are failing.

[dpilch]

Unit tests on amplify-category-study are passing now. It was due to an issue with amplify-category-studio dependencies: https://github.com/johnpc/amplify-category-studio/commit/698be368874958063cd12ab007d674c15b607ab7

[alharris-at]

Should this be using the default provided in react-studio-template-renderer-helper?

[dpilch]

Yes, will update.

[alharris-at]

I'd recommend dropping a comment on how this fn was generated (as discussed, using something like https://ts-ast-viewer.com) or adding a section on this to the README so it's a bit clearer how the construction of these packages is working.

[dpilch]

I'll work on cleaning this up.

[alharris-at]

Can probably lose this line, and just reference the import on line 66

[dpilch]

Fixed