Ui components/form

package.json

@@ -40,11 +40,13 @@
   "devDependencies": {
     "@types/jest": "^20.0.7",
     "@types/node": "^8.9.5",
+    "@types/puppeteer": "1.12.4",
     "codecov": "^1.0.1",
     "compression-webpack-plugin": "^1.1.3",
     "cypress": "^3.2.0",
     "husky": "^1.3.1",
     "jest": "^22.4.3",
+    "jest-config": "24.8.0",
     "json-loader": "^0.5.7",
     "lerna": "^3.13.1",
     "rimraf": "^2.6.2",

packages/amplify-ui-components/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/amplify-ui-components/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+www
+.stencil
+../../node_modules

packages/amplify-ui-components/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    '@typescript-eslint/no-empty-interface': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-unused-vars': 0
+  },
+};

packages/amplify-ui-components/.gitignore

@@ -0,0 +1,27 @@
+dist/
+www/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+aws-exports.*

packages/amplify-ui-components/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+www
+.stencil

packages/amplify-ui-components/.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'avoid',
+};

packages/amplify-ui-components/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-knobs/register';

packages/amplify-ui-components/.storybook/config.ts

@@ -0,0 +1,14 @@
+import { configure, addDecorator } from '@storybook/html';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withA11y } from '@storybook/addon-a11y';
+
+addDecorator(withKnobs);
+addDecorator(withA11y);
+
+const req = require.context('../src/components', true, /.stories.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

packages/amplify-ui-components/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script type="module" src="/build/amplify-ui-components.esm.js"></script>
+<script nomodule src="/build/amplify-ui-components.js"></script>
+<link href="/build/amplify-ui-components.css" rel="stylesheet" />

packages/amplify-ui-components/.storybook/webpack.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = ({ config, mode }) => {
+  config = Object.assign(
+    {
+      module: {
+        rules: []
+      },
+      plugins: []
+    },
+    config || {}
+  );
+
+  return config;
+};

packages/amplify-ui-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/amplify-ui-components/Readme.md

@@ -0,0 +1,72 @@
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# Stencil Component Starter
+
+This is a starter project for building a standalone Web Component using Stencil.
+
+Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+
+# Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new web component using Stencil, clone this repo to a new directory:
+
+```bash
+git clone https://github.com/ionic-team/stencil-component-starter.git my-component
+cd my-component
+git remote rm origin
+```
+
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
+
+
+## Using this component
+
+### Script tag
+
+- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
+- Put a script tag similar to this `<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### Node Modules
+- Run `npm install my-component --save`
+- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### In a stencil-starter app
+- Run `npm install my-component --save`
+- Add an import to the npm packages `import my-component;`
+- Then you can use the element anywhere in your template, JSX, html etc

packages/amplify-ui-components/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@aws-amplify/ui-components",
+  "version": "0.0.1",
+  "description": "Stencil Component Starter",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "unpkg": "dist/ionic.js",
+  "types": "dist/types/components.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "lint": "eslint --ext .js,.ts,.tsx .",
+    "format": "eslint --fix --ext .js,.ts,.tsx .",
+    "pretest": "npm run lint",
+    "test": "stencil test --spec --e2e --screenshot",
+    "test:update-screenshot": "stencil test --spec --e2e --screenshot --update-screenshot",
+    "test:watch": "stencil test --spec --e2e --watchAll",
+    "stencil": "stencil build --docs-readme",
+    "stencil:watch": "stencil build --dev --watch",
+    "start": "stencil build --dev --watch --serve",
+    "storybook": "start-storybook -s ./www",
+    "build-with-test": "npm run clean && npm test && npm run stencil",
+    "build": "npm run clean && npm run stencil",
+    "build:watch": "npm run clean && npm run stencil:watch",
+    "clean": "rimraf dist .stencil"
+  },
+  "dependencies": {
+    "emotion": "^10.0.9"
+  },
+  "devDependencies": {
+    "@stencil/core": "^1.2.3",
+    "@stencil/state-tunnel": "^1.0.1",
+    "@storybook/addon-a11y": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/html": "^5.1.9",
+    "@storybook/theming": "^5.1.8",
+    "@types/jest": "24.0.15",
+    "@types/node": "^12.6.3",
+    "@types/webpack": "^4.4.35",
+    "@types/webpack-env": "^1.14.0",
+    "@typescript-eslint/eslint-plugin": "^1.12.0",
+    "@typescript-eslint/parser": "^1.12.0",
+    "babel-loader": "^8.0.6",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "husky": "^2.4.1",
+    "jest": "24.8.0",
+    "jest-cli": "24.8.0",
+    "prettier": "^1.17.1",
+    "puppeteer": "1.17.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run test"
+    }
+  },
+  "peerDependencies": {},
+  "license": "Apache-2.0"
+}

packages/amplify-ui-components/screenshot/.gitignore

@@ -0,0 +1,3 @@
+images
+builds
+compare.html

packages/amplify-ui-components/src/common/constants.ts

@@ -0,0 +1,10 @@
+// Classnames
+export const AMPLIFY_UI_BUTTON = 'amplify-ui-button';
+export const AMPLIFY_UI_SECTION = 'amplify-ui-section';
+export const AMPLIFY_UI_SECTION_HEADER = 'amplify-ui-section-header';
+export const AMPLIFY_UI_HINT = 'amplify-ui-hint';
+export const AMPLIFY_UI_LABEL = 'amplify-ui-label';
+export const AMPLIFY_UI_LINK = 'amplify-ui-link';
+export const AMPLIFY_UI_FORM_FIELD = 'amplify-ui-form-field';
+export const AMPLIFY_UI_SCENE = 'amplify-ui-scene';
+export const AMPLIFY_UI_SCENE_LOADING = 'amplify-ui-scene-loading';

packages/amplify-ui-components/src/common/helpers.ts

@@ -0,0 +1,4 @@
+import { cx } from 'emotion';
+
+// TODO: rename
+export const styleNuker = (override: boolean, cn: string, ecn: string): string => override ? cn : cx(cn, ecn);