From 34f34b7bd098c73790b4b14b198c4242b568c842 Mon Sep 17 00:00:00 2001 From: Heather Buchel Date: Mon, 11 Apr 2022 19:27:59 -0400 Subject: [PATCH 01/11] fix: valid table DOM nesting for docs css styling tables (#1663) Co-authored-by: Heather Buchel --- docs/src/components/ComponentClassTable.tsx | 14 +++++++++----- docs/src/components/ComponentVariableTable.tsx | 5 ++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/src/components/ComponentClassTable.tsx b/docs/src/components/ComponentClassTable.tsx index 8a6c5c95977..bf18d6303d8 100644 --- a/docs/src/components/ComponentClassTable.tsx +++ b/docs/src/components/ComponentClassTable.tsx @@ -4,6 +4,8 @@ import { ComponentClassObject, View, TableRow, + TableBody, + TableHead, TableCell, } from '@aws-amplify/ui-react'; @@ -30,11 +32,13 @@ export const ComponentClassTable = ({ componentName }) => { return ( - - Class - Description - - {targetClasses} + + + Class + Description + + + {targetClasses}
 ); diff --git a/docs/src/components/ComponentVariableTable.tsx b/docs/src/components/ComponentVariableTable.tsx index a7682c63a12..203c86f4c51 100644 --- a/docs/src/components/ComponentVariableTable.tsx +++ b/docs/src/components/ComponentVariableTable.tsx @@ -4,6 +4,7 @@ import { View, TableRow, TableCell, + TableBody, useTheme, } from '@aws-amplify/ui-react'; @@ -51,7 +52,9 @@ export const ComponentVariableTable = ({ componentName }) => { return ( - {variableNames}
+ + {variableNames} +
); }; From 40e5e21aa47b8ad13b15ace4416170bb6076aef4 Mon Sep 17 00:00:00 2001 From: Joe Buono Date: Mon, 11 Apr 2022 20:14:06 -0400 Subject: [PATCH 02/11] docs(fix): improve responsiveness for Auth example (#1557) * replace Tabs with Expander * Update docs example to use Expander Co-authored-by: Joe Buono --- .../customization.labels-and-text.web.mdx | 31 +++++++++---------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/docs/src/pages/components/authenticator/customization.labels-and-text.web.mdx b/docs/src/pages/components/authenticator/customization.labels-and-text.web.mdx index 693bacdfb37..85f5060ea1e 100644 --- a/docs/src/pages/components/authenticator/customization.labels-and-text.web.mdx +++ b/docs/src/pages/components/authenticator/customization.labels-and-text.web.mdx @@ -1,15 +1,15 @@ import { Authenticator, Button } from '@aws-amplify/ui-react'; import { Example } from '@/components/Example'; -import { Tabs, TabItem } from '@aws-amplify/ui-react'; +import { Expander, ExpanderItem, Text } from '@aws-amplify/ui-react'; import { LabelsAndTextDemo } from './LabelsAndTextDemo'; Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components: - - - Compare the default labels below to those in the customized screens via the tabs above. + + Default Values} value="default-values"> + Compare the default labels here to those in the customized screens below. Because `I18n` manages global translations, customizing these will affect all translations of these strings (including those on this page!). @@ -17,9 +17,9 @@ Using the same techniques as [Internationalization (I18n)](#internationalization - - + + Sign In} value="sign-in"> ```js I18n.putVocabulariesForLanguage('en', { 'Sign In': 'Login', // Tab header @@ -35,10 +35,9 @@ Using the same techniques as [Internationalization (I18n)](#internationalization - - - + + Sign Up} value="sign-up"> ```js I18n.putVocabulariesForLanguage('en', { 'Create Account': 'Register', // Tab header @@ -53,10 +52,9 @@ Using the same techniques as [Internationalization (I18n)](#internationalization - - - + + Reset Password} value="reset-password"> ```js I18n.putVocabulariesForLanguage('en', { 'Reset your password': 'Forgot your password?', @@ -70,10 +68,9 @@ Using the same techniques as [Internationalization (I18n)](#internationalization - - - + + Setup TOTP} value="setup-totp"> ```js I18n.putVocabulariesForLanguage('en', { Loading: 'QR code would show here', @@ -87,5 +84,5 @@ Using the same techniques as [Internationalization (I18n)](#internationalization - - + + From a51ff7b5f9843ccdadd354ebd62e3239c18ccd1b Mon Sep 17 00:00:00 2001 From: William Lee <43682783+wlee221@users.noreply.github.com> Date: Tue, 12 Apr 2022 13:51:10 -0700 Subject: [PATCH 03/11] Use mount instead of shallow mount (#1674) --- packages/vue/__tests__/Authenticator.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue/__tests__/Authenticator.spec.ts b/packages/vue/__tests__/Authenticator.spec.ts index 13b8e3f3d14..92245cf2225 100644 --- a/packages/vue/__tests__/Authenticator.spec.ts +++ b/packages/vue/__tests__/Authenticator.spec.ts @@ -1,9 +1,9 @@ -import { shallowMount } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import { Authenticator } from '../dist'; describe('Authenticator', () => { it('Authenticator Exists', () => { - const wrapper = shallowMount(Authenticator); + const wrapper = mount(Authenticator); expect(wrapper).toBeTruthy(); }); From 5fb50121d994e5f1b5dd28fa82cefebcdc0615ae Mon Sep 17 00:00:00 2001 From: Shane Laymance Date: Tue, 12 Apr 2022 15:10:54 -0700 Subject: [PATCH 04/11] Remove block regarding peer dependencies (#1672) --- docs/src/pages/components/geo/react.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/docs/src/pages/components/geo/react.mdx b/docs/src/pages/components/geo/react.mdx index 7145308b038..ceb6c29a484 100644 --- a/docs/src/pages/components/geo/react.mdx +++ b/docs/src/pages/components/geo/react.mdx @@ -23,13 +23,6 @@ while using [maplibre-gl-js](https://maplibre.org/maplibre-gl-js-docs/api/) as t used as a replacement to `react-map-gl`'s [default map](https://visgl.github.io/react-map-gl/docs/api-reference/map) and supports the same functionality. -Install the required peer dependencies using your preferred package manager. Below, we use [Yarn](https://yarnpkg.com/) -as an example: - -```shell -yarn add maplibre-gl-js@1 react-map-gl -``` - You can import the `MapView` component with related styles and use it in your Amplify application without any additional configuration. From 1379a71dec3971fa4330b8228a0d01950fa6718b Mon Sep 17 00:00:00 2001 From: Scott Rees <6165315+reesscot@users.noreply.github.com> Date: Tue, 12 Apr 2022 16:45:59 -0700 Subject: [PATCH 05/11] fix: vue build in Node 17 (#1670) Fixes the following build error on the vue package when using Node 17: `Error loading 'tslib' helper library.` --- packages/vue/package.json | 2 +- yarn.lock | 90 ++++++++++++++++++++++++++------------- 2 files changed, 62 insertions(+), 30 deletions(-) diff --git a/packages/vue/package.json b/packages/vue/package.json index 1d4cd2d1373..d35b701561e 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -50,7 +50,7 @@ "babel-jest": "^26.3.1", "jest": "^26.6.3", "rimraf": "^3.0.2", - "rollup-plugin-typescript2": "^0.30.0", + "rollup-plugin-typescript2": "^0.31.2", "ts-jest": "^26.4.2", "typescript": "^4.4.2", "unplugin-vue-components": "^0.15.0", diff --git a/yarn.lock b/yarn.lock index 2d3ffecded4..8fca4af6b64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5038,7 +5038,7 @@ estree-walker "^1.0.1" picomatch "^2.2.2" -"@rollup/pluginutils@^4.1.0", "@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.1.2": +"@rollup/pluginutils@^4.1.1", "@rollup/pluginutils@^4.1.2": version "4.2.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08" integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA== @@ -6489,6 +6489,15 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== +"@yarn-tool/resolve-package@^1.0.40": + version "1.0.46" + resolved "https://registry.yarnpkg.com/@yarn-tool/resolve-package/-/resolve-package-1.0.46.tgz#db7354380e5ca7682294af59e5ab0f7fce640ac1" + integrity sha512-RJcBGTVywUqYGRtGkPSgJC/ozf0wK/xjUy66tXkbpL35U0o1oef4S0v23euxA/CiukqBWr2fRGtGY6FidESdTg== + dependencies: + pkg-dir "< 6 >= 5" + tslib "^2.3.1" + upath2 "^3.1.12" + "@yarnpkg/lockfile@1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31" @@ -6713,12 +6722,12 @@ ansi-html-community@0.0.8: ansi-html@0.0.8: version "0.0.8" - resolved "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.8.tgz#e969db193b12bcdfa6727b29ffd8882dc13cc501" + resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.8.tgz#e969db193b12bcdfa6727b29ffd8882dc13cc501" integrity sha512-QROYz1I1Kj+8bTYgx0IlMBpRSCIU+7GjbE0oH+KF7QKc+qSF8YAlIutN59Db17tXN70Ono9upT9Ht0iG93W7ug== ansi-regex@5.0.1, ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1, ansi-regex@^6.0.1: version "5.0.1" - resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== ansi-styles@^2.2.1: @@ -9513,7 +9522,7 @@ cssnano-preset-default@^4.0.8: cssnano-preset-simple@3.0.0, cssnano-preset-simple@^3.0.0: version "3.0.0" - resolved "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe" + resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe" integrity sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w== dependencies: caniuse-lite "^1.0.30001202" @@ -11765,7 +11774,7 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0: make-dir "^2.0.0" pkg-dir "^3.0.0" -find-cache-dir@^3.3.1: +find-cache-dir@^3.3.1, find-cache-dir@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b" integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig== @@ -11925,7 +11934,7 @@ front-matter@^4.0.2: dependencies: js-yaml "^3.13.1" -fs-extra@4.0.2, fs-extra@8.1.0, fs-extra@^10.0.0, fs-extra@^10.0.1, fs-extra@^5.0.0, fs-extra@^7.0.1, fs-extra@^8.1.0, fs-extra@^9.0.0, fs-extra@^9.1.0: +fs-extra@4.0.2, fs-extra@^10.0.0, fs-extra@^10.0.1, fs-extra@^5.0.0, fs-extra@^7.0.1, fs-extra@^8.1.0, fs-extra@^9.0.0, fs-extra@^9.1.0: version "10.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.1.tgz#27de43b4320e833f6867cc044bfce29fdf0ef3b8" integrity sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag== @@ -14495,7 +14504,7 @@ json-schema-traverse@^1.0.0: json-schema@0.4.0, json-schema@^0.4.0: version "0.4.0" - resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5" + resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5" integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA== json-stable-stringify-without-jsonify@^1.0.1: @@ -16659,7 +16668,7 @@ node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.1, node-fetch@^2.6.7: node-forge@1.3.0, node-forge@^0.10.0: version "1.3.0" - resolved "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz#37a874ea723855f37db091e6c186e5b67a01d4b2" + resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.0.tgz#37a874ea723855f37db091e6c186e5b67a01d4b2" integrity sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA== node-gyp@^7.1.0: @@ -17551,6 +17560,13 @@ path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2: resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53" integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM= +path-is-network-drive@^1.0.13: + version "1.0.13" + resolved "https://registry.yarnpkg.com/path-is-network-drive/-/path-is-network-drive-1.0.13.tgz#c9aa0183eb72c328aa83f43def93ddcb9d7ec4d4" + integrity sha512-Hg74mRN6mmXV+gTm3INjFK40ncAmC/Lo4qoQaSZ+GT3hZzlKdWQSqAjqyPeW0SvObP2W073WyYEBWY9d3wOm3A== + dependencies: + tslib "^2.3.1" + path-key@^2.0.0, path-key@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40" @@ -17571,6 +17587,13 @@ path-platform@~0.11.15: resolved "https://registry.yarnpkg.com/path-platform/-/path-platform-0.11.15.tgz#e864217f74c36850f0852b78dc7bf7d4a5721bf2" integrity sha1-6GQhf3TDaFDwhSt43Hv31KVyG/I= +path-strip-sep@^1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/path-strip-sep/-/path-strip-sep-1.0.10.tgz#2be4e789406b298af8709ff79af716134b733b98" + integrity sha512-JpCy+8LAJQQTO1bQsb/84s1g+/Stm3h39aOpPRBQ/paMUGVPPZChLTOTKHoaCkc/6sKuF7yVsnq5Pe1S6xQGcA== + dependencies: + tslib "^2.3.1" + path-to-regexp@0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" @@ -17675,6 +17698,13 @@ pirates@^4.0.1, pirates@^4.0.5: resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b" integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ== +"pkg-dir@< 6 >= 5": + version "5.0.0" + resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760" + integrity sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA== + dependencies: + find-up "^5.0.0" + pkg-dir@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3" @@ -18390,7 +18420,7 @@ prism-react-renderer@1.2.1: prismjs@^1.25.0, prismjs@~1.23.0: version "1.27.0" - resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA== process-nextick-args@^2.0.1, process-nextick-args@~2.0.0: @@ -19507,14 +19537,6 @@ resolve@1.19.0: is-core-module "^2.1.0" path-parse "^1.0.6" -resolve@1.20.0: - version "1.20.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" - integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== - dependencies: - is-core-module "^2.2.0" - path-parse "^1.0.6" - resolve@^1.1.4, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.21.0, resolve@^1.22.0, resolve@^1.3.2, resolve@^1.3.3, resolve@^1.4.0: version "1.22.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" @@ -19639,16 +19661,17 @@ rollup-plugin-terser@^7.0.2: serialize-javascript "^4.0.0" terser "^5.0.0" -rollup-plugin-typescript2@^0.30.0: - version "0.30.0" - resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.30.0.tgz#1cc99ac2309bf4b9d0a3ebdbc2002aecd56083d3" - integrity sha512-NUFszIQyhgDdhRS9ya/VEmsnpTe+GERDMmFo0Y+kf8ds51Xy57nPNGglJY+W6x1vcouA7Au7nsTgsLFj2I0PxQ== +rollup-plugin-typescript2@^0.31.2: + version "0.31.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.31.2.tgz#463aa713a7e2bf85b92860094b9f7fb274c5a4d8" + integrity sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q== dependencies: - "@rollup/pluginutils" "^4.1.0" - find-cache-dir "^3.3.1" - fs-extra "8.1.0" - resolve "1.20.0" - tslib "2.1.0" + "@rollup/pluginutils" "^4.1.2" + "@yarn-tool/resolve-package" "^1.0.40" + find-cache-dir "^3.3.2" + fs-extra "^10.0.0" + resolve "^1.20.0" + tslib "^2.3.1" rollup@2.38.4: version "2.38.4" @@ -21682,7 +21705,7 @@ trim-newlines@^3.0.0: trim@^0.0.3: version "0.0.3" - resolved "https://registry.npmjs.org/trim/-/trim-0.0.3.tgz#05243a47a3a4113e6b49367880a9cca59697a20b" + resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.3.tgz#05243a47a3a4113e6b49367880a9cca59697a20b" integrity sha512-h82ywcYhHK7veeelXrCScdH7HkWfbIT1D/CgYO+nmDarz3SGNssVBMws6jU16Ga60AJCRAvPV6w6RLuNerQqjg== trough@^1.0.0: @@ -21702,7 +21725,7 @@ ts-interface-checker@^0.1.9: ts-jest@^26.4.2, ts-jest@^26.5.6, ts-jest@^27.0.3: version "26.5.6" - resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35" + resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35" integrity sha512-rua+rCP8DxpA8b4DQD/6X2HQS8Zy/xzViVYfEs2OQu68tkCuKLV0Md8pmX55+W24uRIyAsf/BajRfxOs+R2MKA== dependencies: bs-logger "0.x" @@ -22407,6 +22430,15 @@ unzipper@^0.8.13: readable-stream "~2.1.5" setimmediate "~1.0.4" +upath2@^3.1.12: + version "3.1.12" + resolved "https://registry.yarnpkg.com/upath2/-/upath2-3.1.12.tgz#441b3dfbadde21731017bd1b7beb169498efd0a9" + integrity sha512-yC3eZeCyCXFWjy7Nu4pgjLhXNYjuzuUmJiRgSSw6TJp8Emc+E4951HGPJf+bldFC5SL7oBLeNbtm1fGzXn2gxw== + dependencies: + path-is-network-drive "^1.0.13" + path-strip-sep "^1.0.10" + tslib "^2.3.1" + upath@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" @@ -22846,7 +22878,7 @@ vscode-uri@^3.0.2, vscode-uri@^3.0.3: vscode-vue-languageservice@0.27.26, vscode-vue-languageservice@^0.27.0: version "0.27.26" - resolved "https://registry.npmjs.org/vscode-vue-languageservice/-/vscode-vue-languageservice-0.27.26.tgz#d20d2b526aa73d003d1329a451328374b9502e2c" + resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.27.26.tgz#d20d2b526aa73d003d1329a451328374b9502e2c" integrity sha512-Xui/YWho4f8OhaUVXYRFe27c4ZHXkZNlblQhh3/vU+TdhDxtcJ/4KK4IWVdotg8Oy0008XI1Ede8QS4zTylDsw== dependencies: "@volar/code-gen" "^0.27.24" From 34a19a541b4b733a6688a38a435423e9c607e918 Mon Sep 17 00:00:00 2001 From: Scott Rees <6165315+reesscot@users.noreply.github.com> Date: Tue, 12 Apr 2022 17:33:15 -0700 Subject: [PATCH 06/11] Type component tokens final (#1673) * feat: type theme component design tokens - part I (#1587) * feat: type theme component design tokens - Part II (#1593) * feat: type theme component design tokens - Part III (#1594) * feat: type theme component design tokens - Part IV (#1595) --- .changeset/beige-insects-return.md | 5 + docs/src/pages/components/card/react.mdx | 2 +- docs/src/pages/components/divider/react.mdx | 2 +- .../src/theme/__tests__/defaultTheme.test.ts | 16 +-- .../ui/src/theme/__tests__/overrides.test.ts | 16 +-- .../ui/src/theme/tokens/components/alert.ts | 42 +++++- .../theme/tokens/components/authenticator.ts | 65 ++++++++- .../ui/src/theme/tokens/components/badge.ts | 43 +++++- .../ui/src/theme/tokens/components/button.ts | 113 +++++++++++++++- .../ui/src/theme/tokens/components/card.ts | 28 +++- .../src/theme/tokens/components/checkbox.ts | 101 +++++++++++++- .../theme/tokens/components/checkboxField.ts | 17 ++- .../ui/src/theme/tokens/components/copy.ts | 30 ++++- .../tokens/components/countryCodeSelect.ts | 8 +- .../ui/src/theme/tokens/components/divider.ts | 35 ++++- .../src/theme/tokens/components/expander.ts | 96 ++++++++++++- .../ui/src/theme/tokens/components/field.ts | 26 +++- .../theme/tokens/components/fieldControl.ts | 106 ++++++++++++++- .../src/theme/tokens/components/fieldGroup.ts | 18 ++- .../theme/tokens/components/fieldMessages.ts | 25 +++- .../ui/src/theme/tokens/components/flex.ts | 19 ++- .../ui/src/theme/tokens/components/heading.ts | 26 +++- .../ui/src/theme/tokens/components/icon.ts | 9 +- .../ui/src/theme/tokens/components/image.ts | 16 ++- .../ui/src/theme/tokens/components/index.ts | 121 +++++++++++------ .../ui/src/theme/tokens/components/link.ts | 22 ++- .../ui/src/theme/tokens/components/loader.ts | 55 +++++++- .../ui/src/theme/tokens/components/menu.ts | 44 +++++- .../src/theme/tokens/components/pagination.ts | 67 ++++++++- .../tokens/components/phoneNumberField.ts | 1 - .../theme/tokens/components/placeholder.ts | 24 +++- .../ui/src/theme/tokens/components/radio.ts | 105 ++++++++++++++- .../ui/src/theme/tokens/components/rating.ts | 23 +++- .../ui/src/theme/tokens/components/select.ts | 51 ++++++- .../theme/tokens/components/selectField.ts | 8 +- .../theme/tokens/components/sliderField.ts | 82 ++++++++++- .../theme/tokens/components/stepperField.ts | 17 ++- .../theme/tokens/components/switchField.ts | 75 ++++++++++- .../ui/src/theme/tokens/components/table.ts | 87 +++++++++++- .../ui/src/theme/tokens/components/tabs.ts | 64 ++++++++- .../ui/src/theme/tokens/components/text.ts | 19 ++- .../theme/tokens/components/toggleButton.ts | 127 +++++++++++++++++- .../tokens/components/toggleButtonGroup.ts | 15 ++- packages/ui/src/theme/tokens/index.ts | 4 +- .../ui/src/theme/tokens/types/designToken.ts | 60 +++++++-- 45 files changed, 1822 insertions(+), 113 deletions(-) create mode 100644 .changeset/beige-insects-return.md delete mode 100644 packages/ui/src/theme/tokens/components/phoneNumberField.ts diff --git a/.changeset/beige-insects-return.md b/.changeset/beige-insects-return.md new file mode 100644 index 00000000000..ef9ed404cee --- /dev/null +++ b/.changeset/beige-insects-return.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui": patch +--- + +Type theme component design tokens diff --git a/docs/src/pages/components/card/react.mdx b/docs/src/pages/components/card/react.mdx index a3069e0cebf..01366f71820 100644 --- a/docs/src/pages/components/card/react.mdx +++ b/docs/src/pages/components/card/react.mdx @@ -156,6 +156,6 @@ _Using style props:_ ### Default theme -```js file=../../../../../packages/ui/src/theme/tokens/components/card.ts +```ts file=../../../../../packages/ui/src/theme/tokens/components/card.ts ``` diff --git a/docs/src/pages/components/divider/react.mdx b/docs/src/pages/components/divider/react.mdx index 092201e4816..a829a2de771 100644 --- a/docs/src/pages/components/divider/react.mdx +++ b/docs/src/pages/components/divider/react.mdx @@ -172,6 +172,6 @@ _Using style props:_ ### Default theme -```js file=../../../../../packages/ui/src/theme/tokens/components/divider.ts +```ts file=../../../../../packages/ui/src/theme/tokens/components/divider.ts ``` diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts index 34082c6e9f2..9c9d38485b8 100644 --- a/packages/ui/src/theme/__tests__/defaultTheme.test.ts +++ b/packages/ui/src/theme/__tests__/defaultTheme.test.ts @@ -128,7 +128,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); - --amplify-components-button-menu-border-width: 0; + --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); @@ -138,9 +138,9 @@ describe('@aws-amplify/ui', () => { --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); - --amplify-components-button-link-border-width: 0; - --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-background-color: transparent; + --amplify-components-button-link-border-color: transparent; + --amplify-components-button-link-border-width: var(--amplify-space-zero); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10); @@ -233,7 +233,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); - --amplify-components-countrycodeselect-height: 100%; + --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); @@ -318,9 +318,9 @@ describe('@aws-amplify/ui', () => { --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus); - --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus); + --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); - --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error); + --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); @@ -329,7 +329,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error); - --amplify-components-fieldgroup-gap: 0; + --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); @@ -402,7 +402,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; - --amplify-components-menu-gap: 0; + --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts index f8880ec9b07..ffe3b340d2f 100644 --- a/packages/ui/src/theme/__tests__/overrides.test.ts +++ b/packages/ui/src/theme/__tests__/overrides.test.ts @@ -162,7 +162,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); - --amplify-components-button-menu-border-width: 0; + --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); @@ -172,9 +172,9 @@ describe('@aws-amplify/ui', () => { --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); - --amplify-components-button-link-border-width: 0; - --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-background-color: transparent; + --amplify-components-button-link-border-color: transparent; + --amplify-components-button-link-border-width: var(--amplify-space-zero); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10); @@ -267,7 +267,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); - --amplify-components-countrycodeselect-height: 100%; + --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); @@ -352,9 +352,9 @@ describe('@aws-amplify/ui', () => { --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus); - --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus); + --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); - --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error); + --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); @@ -363,7 +363,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error); - --amplify-components-fieldgroup-gap: 0; + --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); @@ -436,7 +436,7 @@ describe('@aws-amplify/ui', () => { --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; - --amplify-components-menu-gap: 0; + --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); diff --git a/packages/ui/src/theme/tokens/components/alert.ts b/packages/ui/src/theme/tokens/components/alert.ts index a669ae7615d..afced5da77c 100644 --- a/packages/ui/src/theme/tokens/components/alert.ts +++ b/packages/ui/src/theme/tokens/components/alert.ts @@ -1,4 +1,44 @@ -export const alert = { +import { + AlignItemsValue, + BackgroundColorValue, + ColorValue, + DesignToken, + FontSizeValue, + FontWeightValue, + JustifyContentValue, + SpaceValue, +} from '../types/designToken'; + +interface AlertVariationTokens { + color: DesignToken; + backgroundColor: DesignToken; +} + +interface AlertIconTokens { + size: DesignToken; +} + +interface AlertHeadingTokens { + fontSize: DesignToken; + fontWeight: DesignToken; +} + +export interface AlertTokens { + alignItems: DesignToken; + justifyContent: DesignToken; + color: DesignToken; + backgroundColor: DesignToken; + paddingBlock: DesignToken; + paddingInline: DesignToken; + icon: AlertIconTokens; + heading: AlertHeadingTokens; + info: AlertVariationTokens; + error: AlertVariationTokens; + warning: AlertVariationTokens; + success: AlertVariationTokens; +} + +export const alert: AlertTokens = { // Default styles alignItems: { value: 'center' }, justifyContent: { value: 'space-between' }, diff --git a/packages/ui/src/theme/tokens/components/authenticator.ts b/packages/ui/src/theme/tokens/components/authenticator.ts index 395e15d7a0a..5083be05cfe 100644 --- a/packages/ui/src/theme/tokens/components/authenticator.ts +++ b/packages/ui/src/theme/tokens/components/authenticator.ts @@ -1,4 +1,67 @@ -export const authenticator = { +import { + DesignToken, + ColorValue, + SpaceValue, + BorderWidthValue, + BorderColorValue, + BackgroundColorValue, + BorderStyleValue, + BoxShadowValue, +} from '../types/designToken'; + +interface AuthenticatorModalTokens { + width: DesignToken; + height: DesignToken; + backgroundColor: DesignToken; + top: DesignToken; + left: DesignToken; +} + +interface AuthenticatorRouterTokens { + borderWidth: DesignToken; + borderStyle: DesignToken; + borderColor: DesignToken; + backgroundColor: DesignToken; + boxShadow: DesignToken; +} + +interface AuthenticatorFooterTokens { + paddingBottom: DesignToken; +} + +interface AuthenticatorFormTokens { + padding: DesignToken; +} + +interface AuthenticatorStateTokens { + inactive: { + backgroundColor: DesignToken; + }; +} + +interface AuthenticatorOrContainerTokens { + color: DesignToken; + orLine: { + backgroundColor: DesignToken; + }; +} + +interface AuthenticatorContainerToken { + widthMax: DesignToken; +} + +export interface AuthenticatorTokens { + maxWidth: DesignToken; + modal: AuthenticatorModalTokens; + container: AuthenticatorContainerToken; + router: AuthenticatorRouterTokens; + footer: AuthenticatorFooterTokens; + form: AuthenticatorFormTokens; + state: AuthenticatorStateTokens; + orContainer: AuthenticatorOrContainerTokens; +} + +export const authenticator: AuthenticatorTokens = { maxWidth: { value: '60rem' }, modal: { width: { value: '{space.relative.full}' }, diff --git a/packages/ui/src/theme/tokens/components/badge.ts b/packages/ui/src/theme/tokens/components/badge.ts index 5189d702e6c..39052b8e153 100644 --- a/packages/ui/src/theme/tokens/components/badge.ts +++ b/packages/ui/src/theme/tokens/components/badge.ts @@ -1,4 +1,45 @@ -export const badge = { +import { + BackgroundColorValue, + ColorValue, + DesignToken, + FontSizeValue, + FontWeightValue, + LineHeightValue, + RadiusValue, + SpaceValue, + TextAlignValue, +} from '../types/designToken'; + +interface BadgeVariationTokens { + backgroundColor: DesignToken; + color: DesignToken; +} + +interface BadgeSizeTokens { + fontSize: DesignToken; + paddingHorizontal: DesignToken; + paddingVertical: DesignToken; +} + +export interface BadgeTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + color: DesignToken; + error: BadgeVariationTokens; + fontSize: DesignToken; + fontWeight: DesignToken; + info: BadgeVariationTokens; + large: BadgeSizeTokens; + lineHeight: DesignToken; + paddingHorizontal: DesignToken; + paddingVertical: DesignToken; + small: BadgeSizeTokens; + success: BadgeVariationTokens; + textAlign: DesignToken; + warning: BadgeVariationTokens; +} + +export const badge: BadgeTokens = { // Default styles color: { value: '{colors.font.primary.value}' }, lineHeight: { value: 1 }, diff --git a/packages/ui/src/theme/tokens/components/button.ts b/packages/ui/src/theme/tokens/components/button.ts index 766aa711bcd..2d2c97cefce 100644 --- a/packages/ui/src/theme/tokens/components/button.ts +++ b/packages/ui/src/theme/tokens/components/button.ts @@ -1,4 +1,109 @@ -export const button = { +import { + AlignItemsValue, + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + ColorValue, + DesignToken, + FontSizeValue, + FontWeightValue, + JustifyContentValue, + LineHeightValue, + SpaceValue, + TransitionDurationValue, +} from '../types/designToken'; + +interface StateTokens { + color: DesignToken; + backgroundColor: DesignToken; + borderColor: DesignToken; +} + +interface StateWithShadowTokens extends StateTokens { + boxShadow: DesignToken; +} + +interface MenuStateDisabledTokens + extends Omit {} + +interface MenuStateTokens extends Omit {} + +interface PrimaryVariationTokens { + borderWidth: DesignToken; + borderStyle: DesignToken; + borderColor: DesignToken; + backgroundColor: DesignToken; + color: DesignToken; + _disabled: StateTokens; + _loading: StateTokens; + _hover: StateTokens; + _focus: StateWithShadowTokens; + _active: StateTokens; +} + +interface MenuVariationTokens { + borderWidth: DesignToken; + backgroundColor: DesignToken; + justifyContent: DesignToken; + _hover: MenuStateTokens; + _focus: MenuStateTokens; + _active: MenuStateTokens; + _disabled: MenuStateDisabledTokens; +} + +interface LinkVariationTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + borderWidth: DesignToken; + color: DesignToken; + _hover: StateTokens; + _focus: StateWithShadowTokens; + _active: StateTokens; + _disabled: StateTokens; + _loading: StateTokens; +} + +interface ButtonSizeTokens { + fontSize: DesignToken; + paddingBlockStart: DesignToken; + paddingBlockEnd: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; +} +export interface ButtonTokens { + fontWeight: DesignToken; + transitionDuration: DesignToken; + fontSize: DesignToken; + lineHeight: DesignToken; + paddingBlockStart: DesignToken; + paddingBlockEnd: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; + borderColor: DesignToken; + borderWidth: DesignToken; + borderStyle: DesignToken; + borderRadius: DesignToken; + color: DesignToken; + _hover: StateTokens; + _focus: StateWithShadowTokens; + _active: StateTokens; + _loading: StateTokens; + _disabled: StateTokens; + primary: PrimaryVariationTokens; + menu: MenuVariationTokens; + link: LinkVariationTokens; + small: ButtonSizeTokens; + large: ButtonSizeTokens; + loaderWrapper: { + alignItems: DesignToken; + gap: DesignToken; + }; +} + +export const button: ButtonTokens = { // shared styles fontWeight: { value: '{fontWeights.bold.value}' }, transitionDuration: { @@ -87,7 +192,7 @@ export const button = { }, menu: { - borderWidth: { value: 0 }, + borderWidth: { value: '{space.zero.value}' }, backgroundColor: { value: 'transparent' }, justifyContent: { value: 'start' }, // Focus and hover styles are identical for menu variation @@ -111,9 +216,9 @@ export const button = { }, link: { - borderWidth: { value: 0 }, - borderColor: { value: 'transparent' }, backgroundColor: { value: 'transparent' }, + borderColor: { value: 'transparent' }, + borderWidth: { value: '{space.zero.value}' }, color: { value: '{colors.font.interactive.value}' }, _hover: { borderColor: { value: 'transparent' }, diff --git a/packages/ui/src/theme/tokens/components/card.ts b/packages/ui/src/theme/tokens/components/card.ts index 018e99fd221..c424971f491 100644 --- a/packages/ui/src/theme/tokens/components/card.ts +++ b/packages/ui/src/theme/tokens/components/card.ts @@ -1,4 +1,30 @@ -export const card = { +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + DesignToken, + SpaceValue, +} from '../types/designToken'; + +interface CardVariationTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + borderWidth: DesignToken; + borderStyle: DesignToken; + borderColor: DesignToken; + boxShadow: DesignToken; +} + +export type CardTokens = CardVariationTokens & { + padding: DesignToken; + outlined: CardVariationTokens; + elevated: CardVariationTokens; +}; + +export const card: CardTokens = { backgroundColor: { value: '{colors.background.primary.value}' }, borderRadius: { value: '{radii.xs.value}' }, borderWidth: { value: '0' }, diff --git a/packages/ui/src/theme/tokens/components/checkbox.ts b/packages/ui/src/theme/tokens/components/checkbox.ts index 3e91d77988a..6f0926c416d 100644 --- a/packages/ui/src/theme/tokens/components/checkbox.ts +++ b/packages/ui/src/theme/tokens/components/checkbox.ts @@ -1,4 +1,103 @@ -export const checkbox = { +import { + AlignItemsValue, + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + ColorValue, + CursorValue, + DesignToken, + JustifyContentValue, + OpacityValue, + OutlineColorValue, + OutlineOffsetValue, + OutlineStyleValue, + OutlineWidthValue, + PositionValue, + SpaceValue, + TransformValue, + TransitionDurationValue, + TransitionPropertyValue, + TransitionTimingFunctionValue, +} from '../types/designToken'; + +interface DisableToken { + cursor: DesignToken; +} + +interface ButtonDisabledToken { + borderColor: DesignToken; +} +interface ButtonErrorFocusToken { + borderColor: DesignToken; + boxShadow: DesignToken; +} +interface ButtonErrorToken { + borderColor: DesignToken; + _focus: ButtonErrorFocusToken; +} +interface ButtonFocusToken { + outlineColor: DesignToken; + outlineStyle: DesignToken; + outlineWidth: DesignToken; + outlineOffset: DesignToken; + borderColor: DesignToken; + boxShadow: DesignToken; +} +interface BeforeToken { + width: DesignToken; + height: DesignToken; + borderWidth: DesignToken; + borderRadius: DesignToken; + borderStyle: DesignToken; + borderColor: DesignToken; +} +interface ButtonToken { + position: DesignToken; + alignItems: DesignToken; + justifyContent: DesignToken; + color: DesignToken; + before: BeforeToken; + _focus: ButtonFocusToken; + _disabled: ButtonDisabledToken; + _error: ButtonErrorToken; +} +interface IconCheckedDisabled { + backgroundColor: DesignToken; +} +interface IconCheckedToken { + opacity: DesignToken; + transform: DesignToken; + _disabled: IconCheckedDisabled; +} +interface IconToken { + backgroundColor: DesignToken; + borderRadius: DesignToken; + opacity: DesignToken; + transform: DesignToken; + transitionProperty: DesignToken; + transitionDuration: DesignToken; + transitionTimingFunction: DesignToken; + _checked: IconCheckedToken; +} +interface LabelDisabledToken { + color: DesignToken; +} +interface LabelToken { + _disabled: LabelDisabledToken; +} +export interface CheckboxTokens { + cursor: DesignToken; + alignItems: DesignToken; + _disabled: DisableToken; + button: ButtonToken; + icon: IconToken; + label: LabelToken; +} + +export const checkbox: CheckboxTokens = { cursor: { value: 'pointer' }, alignItems: { value: 'center' }, _disabled: { diff --git a/packages/ui/src/theme/tokens/components/checkboxField.ts b/packages/ui/src/theme/tokens/components/checkboxField.ts index 2089545e3e3..fe3ebcbe0da 100644 --- a/packages/ui/src/theme/tokens/components/checkboxField.ts +++ b/packages/ui/src/theme/tokens/components/checkboxField.ts @@ -1,4 +1,19 @@ -export const checkboxfield = { +import { + AlignContentValue, + AlignItemsValue, + DesignToken, + FlexDirectionValue, + JustifyContentValue, +} from '../types/designToken'; + +export interface CheckboxFieldTokens { + alignItems: DesignToken; + alignContent: DesignToken; + flexDirection: DesignToken; + justifyContent: DesignToken; +} + +export const checkboxfield: CheckboxFieldTokens = { alignItems: { value: 'flex-start' }, alignContent: { value: 'center' }, flexDirection: { value: 'column' }, diff --git a/packages/ui/src/theme/tokens/components/copy.ts b/packages/ui/src/theme/tokens/components/copy.ts index 0f96a05e836..787ae7c317b 100644 --- a/packages/ui/src/theme/tokens/components/copy.ts +++ b/packages/ui/src/theme/tokens/components/copy.ts @@ -1,4 +1,32 @@ -export const copy = { +import { + ColorValue, + DesignToken, + FontSizeValue, + SpaceValue, +} from '../types/designToken'; + +interface CopySVGFillTokens { + fill: DesignToken; +} + +interface CopySVGTokens { + path: CopySVGFillTokens; +} + +interface CopyToolTipTokens { + bottom: DesignToken; + color: DesignToken; + fontSize: DesignToken; +} + +export interface CopyTokens { + fontSize: DesignToken; + gap: DesignToken; + svg: CopySVGTokens; + toolTip: CopyToolTipTokens; +} + +export const copy: CopyTokens = { fontSize: { value: '{fontSizes.xs}' }, gap: { value: '{space.relative.medium}' }, diff --git a/packages/ui/src/theme/tokens/components/countryCodeSelect.ts b/packages/ui/src/theme/tokens/components/countryCodeSelect.ts index 675bf7fc202..4607b8215b0 100644 --- a/packages/ui/src/theme/tokens/components/countryCodeSelect.ts +++ b/packages/ui/src/theme/tokens/components/countryCodeSelect.ts @@ -1,5 +1,9 @@ -export const countrycodeselect = { +import { DesignToken, SpaceValue } from '../types/designToken'; +export interface CountryCodeSelectTokens { + height: DesignToken; +} +export const countrycodeselect: CountryCodeSelectTokens = { height: { - value: '100%', + value: '{space.relative.full.value}', }, }; diff --git a/packages/ui/src/theme/tokens/components/divider.ts b/packages/ui/src/theme/tokens/components/divider.ts index 920a8cbe2c6..4a5b2e0d5ea 100644 --- a/packages/ui/src/theme/tokens/components/divider.ts +++ b/packages/ui/src/theme/tokens/components/divider.ts @@ -1,4 +1,37 @@ -export const divider = { +import { + BackgroundColorValue, + BorderColorValue, + BorderStyleValue, + BorderWidthValue, + ColorValue, + DesignToken, + FontSizeValue, + OpacityValue, + SpaceValue, +} from '../types/designToken'; + +interface DividerSizeTokens { + borderWidth: DesignToken; +} + +interface DividerLabelTokens { + color: DesignToken; + paddingInline: DesignToken; + fontSize: DesignToken; + backgroundColor: DesignToken; +} + +export interface DividerTokens { + borderStyle: DesignToken; + borderColor: DesignToken; + borderWidth: DesignToken; + label: DividerLabelTokens; + small: DividerSizeTokens; + large: DividerSizeTokens; + opacity: DesignToken; +} + +export const divider: DividerTokens = { borderStyle: { value: 'solid' }, borderColor: { value: '{colors.border.primary.value}' }, borderWidth: { value: '{borderWidths.medium.value}' }, diff --git a/packages/ui/src/theme/tokens/components/expander.ts b/packages/ui/src/theme/tokens/components/expander.ts index a780418ef33..a25c72cee60 100644 --- a/packages/ui/src/theme/tokens/components/expander.ts +++ b/packages/ui/src/theme/tokens/components/expander.ts @@ -1,4 +1,98 @@ -export const expander = { +import { + AlignItemsValue, + AnimationDurationValue, + AnimationTimingFunctionValue, + BackgroundColorValue, + BorderRadiusValue, + BoxShadowValue, + ColorValue, + DesignToken, + DisplayValue, + JustifyContentValue, + RadiusValue, + SpaceValue, + TransitionDurationValue, + TransitionTimingFunctionValue, +} from '../types/designToken'; + +interface ExpanderItemFocusTokens { + boxShadow: DesignToken; +} + +interface ExpanderItemTokens { + marginTop: DesignToken; + boxShadow: DesignToken; + borderBottomLeftRadius: DesignToken; + borderBottomRightRadius: DesignToken; + borderTopLeftRadius: DesignToken; + borderTopRightRadius: DesignToken; + borderStartStartRadius: DesignToken; + borderStartEndRadius: DesignToken; + borderEndStartRadius: DesignToken; + borderEndEndRadius: DesignToken; + _focus: ExpanderItemFocusTokens; +} + +interface ExpanderHeaderTokens { + boxShadow: DesignToken; +} + +interface ExpanderTriggerTokens { + minHeight: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; + alignItems: DesignToken; + justifyContent: DesignToken; + _hover: ExpanderTriggerHoverTokens; +} + +interface ExpanderTriggerHoverTokens { + backgroundColor: DesignToken; +} + +interface ExpanderContentTokens { + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; + text: ExpanderContentTextTokens; + _open: ExpanderContentOpenTokens; + _closed: ExpanderContentClosedTokens; +} + +interface ExpanderContentTextTokens { + color: DesignToken; + paddingBlockStart: DesignToken; + paddingBlockEnd: DesignToken; +} + +interface ExpanderContentOpenTokens { + animationDuration: DesignToken; + animationTimingFunction: DesignToken; +} + +interface ExpanderContentClosedTokens { + animationDuration: DesignToken; + animationTimingFunction: DesignToken; +} + +interface ExpanderIconTokens { + transitionDuration: DesignToken; + transitionTimingFunction: DesignToken; +} + +export interface ExpanderTokens { + display: DesignToken; + backgroundColor: DesignToken; + borderRadius: DesignToken; + boxShadow: DesignToken; + width: DesignToken; + item: ExpanderItemTokens; + header: ExpanderHeaderTokens; + trigger: ExpanderTriggerTokens; + content: ExpanderContentTokens; + icon: ExpanderIconTokens; +} + +export const expander: ExpanderTokens = { display: { value: 'block' }, backgroundColor: { value: '{colors.white.value}' }, borderRadius: { value: '{radii.medium.value}' }, diff --git a/packages/ui/src/theme/tokens/components/field.ts b/packages/ui/src/theme/tokens/components/field.ts index 1d2de1d3791..72e1c6c2557 100644 --- a/packages/ui/src/theme/tokens/components/field.ts +++ b/packages/ui/src/theme/tokens/components/field.ts @@ -1,4 +1,28 @@ -export const field = { +import { + ColorValue, + DesignToken, + FontSizeValue, + GapValue, +} from '../types/designToken'; + +interface FieldSizeTokens { + gap: DesignToken; + fontSize: DesignToken; +} + +interface FieldLabelTokens { + color: DesignToken; +} + +export interface FieldTokens { + gap: DesignToken; + fontSize: DesignToken; + small: FieldSizeTokens; + large: FieldSizeTokens; + label: FieldLabelTokens; +} + +export const field: FieldTokens = { // default styles gap: { value: '{space.xs.value}' }, fontSize: { value: '{fontSizes.medium.value}' }, diff --git a/packages/ui/src/theme/tokens/components/fieldControl.ts b/packages/ui/src/theme/tokens/components/fieldControl.ts index a08ae088a2e..1addc5b1de6 100644 --- a/packages/ui/src/theme/tokens/components/fieldControl.ts +++ b/packages/ui/src/theme/tokens/components/fieldControl.ts @@ -1,4 +1,106 @@ -export const fieldcontrol = { +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderValue, + BorderWidthValue, + BoxShadowValue, + ColorValue, + CursorValue, + DesignToken, + FontSizeValue, + LineHeightValue, + OutlineColorValue, + OutlineOffsetValue, + OutlineStyleValue, + OutlineWidthValue, + SpaceValue, + TransitionDurationValue, +} from '../types/designToken'; + +interface FieldControlSizeTokens { + fontSize: DesignToken; + paddingBlockStart: DesignToken; + paddingBlockEnd: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; +} + +interface FieldControlFocusTokens { + borderColor: DesignToken; + boxShadow: DesignToken; +} + +interface FieldControlDisabledTokens { + color: DesignToken; + cursor: DesignToken; + borderColor: DesignToken; + backgroundColor: DesignToken; +} + +interface FieldControlErrorTokens { + borderColor: DesignToken; + _focus: FieldControlErrorFocusTokens; +} + +interface FieldControlErrorFocusTokens { + boxShadow: DesignToken; +} + +interface FieldControlQuietTokens { + borderStyle: DesignToken; + borderBlockEnd: DesignToken; + borderInlineStart: DesignToken; + borderInlineEnd: DesignToken; + borderBlockStart: DesignToken; + borderRadius: DesignToken; + _focus: FieldControlQuietFocusTokens; + _error: FieldControlQuietErrorTokens; +} + +interface FieldControlQuietFocusTokens { + borderBlockEndColor: DesignToken; + boxShadow: DesignToken; +} + +interface FieldControlQuietErrorTokens { + borderBlockEndColor: DesignToken; + _focus: FieldControlQuietErrorFocusTokens; +} + +interface FieldControlQuietErrorFocusTokens { + boxShadow: DesignToken; +} + +export interface FieldControlTokens { + borderStyle: DesignToken; + borderColor: DesignToken; + borderWidth: DesignToken; + borderRadius: DesignToken; + color: DesignToken; + paddingBlockStart: DesignToken; + paddingBlockEnd: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; + + fontSize: DesignToken; + lineHeight: DesignToken; + transitionDuration: DesignToken; + outlineColor: DesignToken; + outlineStyle: DesignToken; + outlineWidth: DesignToken; + outlineOffset: DesignToken; + + small: FieldControlSizeTokens; + large: FieldControlSizeTokens; + quiet: FieldControlQuietTokens; + _focus: FieldControlFocusTokens; + _disabled: FieldControlDisabledTokens; + _error: FieldControlErrorTokens; +} + +export const fieldcontrol: FieldControlTokens = { borderStyle: { value: 'solid' }, borderColor: { value: '{colors.border.primary.value}' }, borderWidth: { value: '{borderWidths.small.value}' }, @@ -72,6 +174,7 @@ export const fieldcontrol = { offsetX: '0px', offsetY: '1px', color: '{colors.border.focus.value}', + blurRadius: '0px', }, }, }, @@ -83,6 +186,7 @@ export const fieldcontrol = { offsetX: '0px', offsetY: '1px', color: '{colors.border.error.value}', + blurRadius: '0px', }, }, }, diff --git a/packages/ui/src/theme/tokens/components/fieldGroup.ts b/packages/ui/src/theme/tokens/components/fieldGroup.ts index 42c17c5028c..c50abb7f901 100644 --- a/packages/ui/src/theme/tokens/components/fieldGroup.ts +++ b/packages/ui/src/theme/tokens/components/fieldGroup.ts @@ -1,5 +1,19 @@ -export const fieldgroup = { - gap: { value: 0 }, +import { DesignToken, AlignItemsValue, GapValue } from '../types/designToken'; + +interface FieldGroupVerticalTokens { + alignItems: DesignToken; +} +interface FieldGroupOuterTokens { + alignItems: DesignToken; +} +export interface FieldGroupTokens { + gap: DesignToken; + vertical: FieldGroupVerticalTokens; + outer: FieldGroupOuterTokens; +} + +export const fieldgroup: FieldGroupTokens = { + gap: { value: '{space.zero.value}' }, vertical: { alignItems: { value: 'center' }, }, diff --git a/packages/ui/src/theme/tokens/components/fieldMessages.ts b/packages/ui/src/theme/tokens/components/fieldMessages.ts index 4f7bd3762af..9264602de21 100644 --- a/packages/ui/src/theme/tokens/components/fieldMessages.ts +++ b/packages/ui/src/theme/tokens/components/fieldMessages.ts @@ -1,4 +1,27 @@ -export const fieldmessages = { +import { + DesignToken, + ColorValue, + FontStyleValue, + FontSizeValue, +} from '../types/designToken'; + +interface FieldMessagesErrorTokens { + color: DesignToken; + fontSize: DesignToken; +} + +interface FieldMessagesDescriptionTokens { + color: DesignToken; + fontStyle: DesignToken; + fontSize: DesignToken; +} + +export interface FieldMessagesTokens { + error: FieldMessagesErrorTokens; + description: FieldMessagesDescriptionTokens; +} + +export const fieldmessages: FieldMessagesTokens = { error: { color: { value: '{colors.font.error.value}' }, fontSize: { value: '{fontSizes.small.value}' }, diff --git a/packages/ui/src/theme/tokens/components/flex.ts b/packages/ui/src/theme/tokens/components/flex.ts index 08768036847..6e53b7532e6 100644 --- a/packages/ui/src/theme/tokens/components/flex.ts +++ b/packages/ui/src/theme/tokens/components/flex.ts @@ -1,4 +1,21 @@ -export const flex = { +import { + AlignContentValue, + AlignItemsValue, + DesignToken, + FlexWrapValue, + GapValue, + JustifyContentValue, +} from '../types/designToken'; + +export interface FlexTokens { + gap: DesignToken; + justifyContent: DesignToken; + alignItems: DesignToken; + alignContent: DesignToken; + flexWrap: DesignToken; +} + +export const flex: FlexTokens = { gap: { value: '{space.medium.value}' }, justifyContent: { value: 'normal' }, alignItems: { value: 'stretch' }, diff --git a/packages/ui/src/theme/tokens/components/heading.ts b/packages/ui/src/theme/tokens/components/heading.ts index 18764b7910b..d5c0312b63d 100644 --- a/packages/ui/src/theme/tokens/components/heading.ts +++ b/packages/ui/src/theme/tokens/components/heading.ts @@ -1,4 +1,28 @@ -export const heading = { +import { + ColorValue, + DesignToken, + FontSizeValue, + FontWeightValue, + LineHeightValue, +} from '../types/designToken'; + +interface HeadingLevelTokens { + fontSize: DesignToken; + fontWeight: DesignToken; +} + +export interface HeadingTokens { + color: DesignToken; + lineHeight: DesignToken; + 1: HeadingLevelTokens; + 2: HeadingLevelTokens; + 3: HeadingLevelTokens; + 4: HeadingLevelTokens; + 5: HeadingLevelTokens; + 6: HeadingLevelTokens; +} + +export const heading: HeadingTokens = { color: { value: '{colors.font.primary.value}' }, lineHeight: { value: '{lineHeights.small.value}' }, diff --git a/packages/ui/src/theme/tokens/components/icon.ts b/packages/ui/src/theme/tokens/components/icon.ts index b1d603b8cfa..533f6f42aa1 100644 --- a/packages/ui/src/theme/tokens/components/icon.ts +++ b/packages/ui/src/theme/tokens/components/icon.ts @@ -1,4 +1,11 @@ -export const icon = { +import { DesignToken, LineHeightValue, SpaceValue } from '../types/designToken'; + +export interface IconTokens { + lineHeight: DesignToken; + height: DesignToken; +} + +export const icon: IconTokens = { lineHeight: { value: 1 }, height: { value: '1em' }, // Should match height of parent container font-size }; diff --git a/packages/ui/src/theme/tokens/components/image.ts b/packages/ui/src/theme/tokens/components/image.ts index 2dfc24b6d70..1c53cc5b274 100644 --- a/packages/ui/src/theme/tokens/components/image.ts +++ b/packages/ui/src/theme/tokens/components/image.ts @@ -1,4 +1,18 @@ -export const image = { +import { + DesignToken, + ObjectFitValue, + PositionValue, + SpaceValue, +} from '../types/designToken'; + +export interface ImageTokens { + maxWidth: DesignToken; + height: DesignToken; + objectFit: DesignToken; + objectPosition: DesignToken; +} + +export const image: ImageTokens = { maxWidth: { value: '100%' }, height: { value: 'auto' }, objectFit: { value: 'initial' }, diff --git a/packages/ui/src/theme/tokens/components/index.ts b/packages/ui/src/theme/tokens/components/index.ts index 0d0593ca238..c8b880e7d5e 100644 --- a/packages/ui/src/theme/tokens/components/index.ts +++ b/packages/ui/src/theme/tokens/components/index.ts @@ -1,42 +1,86 @@ -import { alert } from './alert'; -import { authenticator } from './authenticator'; -import { badge } from './badge'; -import { button } from './button'; -import { card } from './card'; -import { checkbox } from './checkbox'; -import { checkboxfield } from './checkboxField'; -import { copy } from './copy'; -import { countrycodeselect } from './countryCodeSelect'; -import { divider } from './divider'; -import { expander } from './expander'; -import { field } from './field'; -import { fieldcontrol } from './fieldControl'; -import { fieldgroup } from './fieldGroup'; -import { fieldmessages } from './fieldMessages'; -import { flex } from './flex'; -import { heading } from './heading'; -import { icon } from './icon'; -import { image } from './image'; -import { link } from './link'; -import { loader } from './loader'; -import { menu } from './menu'; -import { pagination } from './pagination'; -import { phonenumberfield } from './phoneNumberField'; -import { placeholder } from './placeholder'; -import { radio } from './radio'; -import { rating } from './rating'; -import { select } from './select'; -import { selectfield } from './selectField'; -import { sliderfield } from './sliderField'; -import { stepperfield } from './stepperField'; -import { switchfield } from './switchField'; -import { table } from './table'; -import { tabs } from './tabs'; -import { text } from './text'; -import { togglebutton } from './toggleButton'; -import { togglebuttongroup } from './toggleButtonGroup'; +import { AlertTokens, alert } from './alert'; +import { AuthenticatorTokens, authenticator } from './authenticator'; +import { badge, BadgeTokens } from './badge'; +import { button, ButtonTokens } from './button'; +import { card, CardTokens } from './card'; +import { checkbox, CheckboxTokens } from './checkbox'; +import { checkboxfield, CheckboxFieldTokens } from './checkboxField'; +import { copy, CopyTokens } from './copy'; +import { + countrycodeselect, + CountryCodeSelectTokens, +} from './countryCodeSelect'; +import { divider, DividerTokens } from './divider'; +import { expander, ExpanderTokens } from './expander'; +import { field, FieldTokens } from './field'; +import { fieldcontrol, FieldControlTokens } from './fieldControl'; +import { fieldgroup, FieldGroupTokens } from './fieldGroup'; +import { fieldmessages, FieldMessagesTokens } from './fieldMessages'; +import { flex, FlexTokens } from './flex'; +import { heading, HeadingTokens } from './heading'; +import { icon, IconTokens } from './icon'; +import { image, ImageTokens } from './image'; +import { link, LinkTokens } from './link'; +import { loader, LoaderTokens } from './loader'; +import { menu, MenuTokens } from './menu'; +import { pagination, PaginationTokens } from './pagination'; +import { placeholder, PlaceholderTokens } from './placeholder'; +import { radio, RadioTokens } from './radio'; +import { rating, RatingTokens } from './rating'; +import { select, SelectTokens } from './select'; +import { selectfield, SelectFieldTokens } from './selectField'; +import { sliderfield, SliderFieldTokens } from './sliderField'; +import { stepperfield, StepperFieldTokens } from './stepperField'; +import { switchfield, SwitchFieldTokens } from './switchField'; +import { table, TableTokens } from './table'; +import { tabs, TabsTokens } from './tabs'; +import { text, TextTokens } from './text'; +import { togglebutton, ToggleButtonTokens } from './toggleButton'; +import { + togglebuttongroup, + ToggleButtonGroupTokens, +} from './toggleButtonGroup'; + +export interface ComponentTokens { + alert: AlertTokens; + authenticator: AuthenticatorTokens; + badge: BadgeTokens; + button: ButtonTokens; + card: CardTokens; + checkbox: CheckboxTokens; + checkboxfield: CheckboxFieldTokens; + copy: CopyTokens; + countrycodeselect: CountryCodeSelectTokens; + divider: DividerTokens; + expander: ExpanderTokens; + field: FieldTokens; + fieldcontrol: FieldControlTokens; + fieldgroup: FieldGroupTokens; + fieldmessages: FieldMessagesTokens; + flex: FlexTokens; + heading: HeadingTokens; + icon: IconTokens; + image: ImageTokens; + link: LinkTokens; + loader: LoaderTokens; + menu: MenuTokens; + pagination: PaginationTokens; + placeholder: PlaceholderTokens; + radio: RadioTokens; + rating: RatingTokens; + select: SelectTokens; + selectfield: SelectFieldTokens; + sliderfield: SliderFieldTokens; + stepperfield: StepperFieldTokens; + switchfield: SwitchFieldTokens; + table: TableTokens; + tabs: TabsTokens; + text: TextTokens; + togglebutton: ToggleButtonTokens; + togglebuttongroup: ToggleButtonGroupTokens; +} -export const components = { +export const components: ComponentTokens = { alert, authenticator, badge, @@ -60,7 +104,6 @@ export const components = { loader, menu, pagination, - phonenumberfield, placeholder, radio, rating, diff --git a/packages/ui/src/theme/tokens/components/link.ts b/packages/ui/src/theme/tokens/components/link.ts index 582a8cc1455..403040ea42a 100644 --- a/packages/ui/src/theme/tokens/components/link.ts +++ b/packages/ui/src/theme/tokens/components/link.ts @@ -1,4 +1,24 @@ -export const link = { +import { ColorValue, DesignToken, FontSizeValue } from '../types/designToken'; + +interface LinkStateTokens { + color: DesignToken; +} + +interface LinkSizeTokens { + fontSize: DesignToken; +} + +export interface LinkTokens { + active: LinkStateTokens; + color: DesignToken; + focus: LinkStateTokens; + hover: LinkStateTokens; + large: LinkSizeTokens; + small: LinkSizeTokens; + visited: LinkStateTokens; +} + +export const link: LinkTokens = { active: { color: { value: '{colors.font.active.value}' }, }, diff --git a/packages/ui/src/theme/tokens/components/loader.ts b/packages/ui/src/theme/tokens/components/loader.ts index 4d96c8d90b9..c0bce4e21e5 100644 --- a/packages/ui/src/theme/tokens/components/loader.ts +++ b/packages/ui/src/theme/tokens/components/loader.ts @@ -1,4 +1,57 @@ -export const loader = { +import { + AnimationDurationValue, + ColorValue, + DesignToken, + FontSizeValue, + SpaceValue, + StrokeEmptyValue, + StrokeFilledValue, + StrokeLinecapValue, +} from '../types/designToken'; + +interface LoaderSizeTokens { + fontSize: DesignToken; + height: DesignToken; + width: DesignToken; +} + +interface LoaderLinearSizeTokens { + fontSize: DesignToken; + strokeWidth: DesignToken; +} + +interface LoaderLinearTokens { + width: DesignToken; + minWidth: DesignToken; + fontSize: DesignToken; + strokeWidth: DesignToken; + strokeFilled: DesignToken; + strokeEmpty: DesignToken; + strokeLinecap: DesignToken; + animationDuration: DesignToken; + small: LoaderLinearSizeTokens; + large: LoaderLinearSizeTokens; +} + +interface LoaderTextTokens { + fill: DesignToken; +} + +export interface LoaderTokens { + width: DesignToken; + height: DesignToken; + fontSize: DesignToken; + strokeEmpty: DesignToken; + strokeFilled: DesignToken; + strokeLinecap: DesignToken; + animationDuration: DesignToken; + small: LoaderSizeTokens; + large: LoaderSizeTokens; + linear: LoaderLinearTokens; + text: LoaderTextTokens; +} + +export const loader: LoaderTokens = { width: { value: '{fontSizes.medium.value}' }, height: { value: '{fontSizes.medium.value}' }, fontSize: { value: '{fontSizes.xs.value}' }, diff --git a/packages/ui/src/theme/tokens/components/menu.ts b/packages/ui/src/theme/tokens/components/menu.ts index ba2c539c52a..fd39fc3e37f 100644 --- a/packages/ui/src/theme/tokens/components/menu.ts +++ b/packages/ui/src/theme/tokens/components/menu.ts @@ -1,4 +1,44 @@ -export const menu = { +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + DesignToken, + FlexDirectionValue, + GapValue, + SpaceValue, +} from '../types/designToken'; + +interface MenuSizeTokens { + width: DesignToken; + height: DesignToken; +} + +interface MenuItemTokens { + minHeight: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; +} + +export interface MenuTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + borderWidth: DesignToken; + borderStyle: DesignToken; + borderColor: DesignToken; + boxShadow: DesignToken; + flexDirection: DesignToken; + gap: DesignToken; + maxWidth: DesignToken; + minWidth: DesignToken; + small: MenuSizeTokens; + large: MenuSizeTokens; + item: MenuItemTokens; +} + +export const menu: MenuTokens = { backgroundColor: { value: '{colors.white.value}' }, borderRadius: { value: '{radii.medium.value}' }, borderWidth: { value: '{borderWidths.small.value}' }, @@ -6,7 +46,7 @@ export const menu = { borderColor: { value: '{colors.border.primary.value}' }, boxShadow: { value: '{shadows.large.value}' }, flexDirection: { value: 'column' }, - gap: { value: 0 }, + gap: { value: '{space.zero.value}' }, maxWidth: { value: '30rem' }, minWidth: { value: '14rem' }, diff --git a/packages/ui/src/theme/tokens/components/pagination.ts b/packages/ui/src/theme/tokens/components/pagination.ts index d4a7c9f4bb0..563c7878396 100644 --- a/packages/ui/src/theme/tokens/components/pagination.ts +++ b/packages/ui/src/theme/tokens/components/pagination.ts @@ -1,4 +1,69 @@ -export const pagination = { +import { + AlignItemsValue, + BackgroundColorValue, + BorderRadiusValue, + ColorValue, + DesignToken, + FontSizeValue, + JustifyContentValue, + SpaceValue, + TransitionDurationValue, + TransitionPropertyValue, +} from '../types/designToken'; + +interface PaginationCurrentTokens { + alignItems: DesignToken; + justifyContent: DesignToken; + color: DesignToken; + fontSize: DesignToken; + backgroundColor: DesignToken; +} + +interface PaginationButtonTokens { + color: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; + transitionProperty: DesignToken; + transitionDuration: DesignToken; + hover: PaginationButtonHoverTokens; + disabled: PaginationButtonDisabledTokens; +} + +interface PaginationButtonHoverTokens { + backgroundColor: DesignToken; + color: DesignToken; +} +interface PaginationButtonDisabledTokens { + color: DesignToken; +} + +interface PaginationEllipsisTokens { + alignItems: DesignToken; + justifyContent: DesignToken; + paddingInlineStart: DesignToken; + paddingInlineEnd: DesignToken; +} + +interface PaginationItemContainerTokens { + marginLeft: DesignToken; + marginRight: DesignToken; +} + +interface PaginationItemSharedTokens { + height: DesignToken; + minWidth: DesignToken; + borderRadius: DesignToken; +} + +export interface PaginationTokens { + current: PaginationCurrentTokens; + button: PaginationButtonTokens; + ellipsis: PaginationEllipsisTokens; + itemContainer: PaginationItemContainerTokens; + itemShared: PaginationItemSharedTokens; +} + +export const pagination: PaginationTokens = { current: { alignItems: { value: 'center' }, justifyContent: { value: 'center' }, diff --git a/packages/ui/src/theme/tokens/components/phoneNumberField.ts b/packages/ui/src/theme/tokens/components/phoneNumberField.ts deleted file mode 100644 index 644755ec061..00000000000 --- a/packages/ui/src/theme/tokens/components/phoneNumberField.ts +++ /dev/null @@ -1 +0,0 @@ -export const phonenumberfield = {}; diff --git a/packages/ui/src/theme/tokens/components/placeholder.ts b/packages/ui/src/theme/tokens/components/placeholder.ts index 1885fafbeb6..ea1472caca0 100644 --- a/packages/ui/src/theme/tokens/components/placeholder.ts +++ b/packages/ui/src/theme/tokens/components/placeholder.ts @@ -1,4 +1,26 @@ -export const placeholder = { +import { + BorderRadiusValue, + ColorValue, + DesignToken, + SpaceValue, + TransitionDurationValue, +} from '../types/designToken'; + +interface PlaceholderSizeTokens { + height: DesignToken; +} + +export interface PlaceholderTokens { + borderRadius: DesignToken; + transitionDuration: DesignToken; + startColor: DesignToken; + endColor: DesignToken; + small: PlaceholderSizeTokens; + default: PlaceholderSizeTokens; + large: PlaceholderSizeTokens; +} + +export const placeholder: PlaceholderTokens = { borderRadius: { value: '{radii.small.value}' }, transitionDuration: { value: '{time.long.value}' }, diff --git a/packages/ui/src/theme/tokens/components/radio.ts b/packages/ui/src/theme/tokens/components/radio.ts index 506e7c27a74..74f01a34732 100644 --- a/packages/ui/src/theme/tokens/components/radio.ts +++ b/packages/ui/src/theme/tokens/components/radio.ts @@ -1,4 +1,107 @@ -export const radio = { +import { + AlignItemsValue, + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + BoxSizingValue, + ColorValue, + CursorValue, + DesignToken, + GapValue, + JustifyContentValue, + OutlineColorValue, + OutlineOffsetValue, + OutlineStyleValue, + OutlineWidthValue, + SpaceValue, + TransitionDurationValue, + TransitionPropertyValue, +} from '../types/designToken'; + +interface RadioDisabledTokens { + cursor: DesignToken; +} + +interface RadioButtonTokens { + alignItems: DesignToken; + justifyContent: DesignToken; + width: DesignToken; + height: DesignToken; + boxSizing: DesignToken; + borderWidth: DesignToken; + borderStyle: DesignToken; + borderRadius: DesignToken; + borderColor: DesignToken; + color: DesignToken; + backgroundColor: DesignToken; + transitionProperty: DesignToken; + transitionDuration: DesignToken; + outlineColor: DesignToken; + outlineStyle: DesignToken; + outlineWidth: DesignToken; + outlineOffset: DesignToken; + padding: DesignToken; + small: RadioButtonSizeTokens; + large: RadioButtonSizeTokens; + _checked: RadioButtonCheckedTokens; + _focus: RadioButtonFocusTokens; + _error: RadioButtonErrorTokens; + _disabled: RadioButtonDisabledTokens; +} + +interface RadioButtonSizeTokens { + width: DesignToken; + height: DesignToken; +} + +interface RadioButtonCheckedTokens { + color: DesignToken; + _disabled: RadioButtonCheckedDisabledTokens; +} +interface RadioButtonCheckedDisabledTokens { + color: DesignToken; +} + +interface RadioButtonFocusTokens { + borderColor: DesignToken; + boxShadow: DesignToken; +} + +interface RadioButtonErrorTokens { + borderColor: DesignToken; + _focus: RadioButtonErrorFocusTokens; +} + +interface RadioButtonErrorFocusTokens { + boxShadow: DesignToken; +} + +interface RadioButtonDisabledTokens { + borderColor: DesignToken; + backgroundColor: DesignToken; +} + +interface RadioLabelTokens { + _disabled: RadioLabelDisabledTokens; +} + +interface RadioLabelDisabledTokens { + color: DesignToken; +} + +export interface RadioTokens { + alignItems: DesignToken; + justifyContent: DesignToken; + gap: DesignToken; + _disabled: RadioDisabledTokens; + button: RadioButtonTokens; + label: RadioLabelTokens; +} + +export const radio: RadioTokens = { alignItems: { value: 'center' }, justifyContent: { value: 'flex-start' }, gap: { value: 'inherit' }, diff --git a/packages/ui/src/theme/tokens/components/rating.ts b/packages/ui/src/theme/tokens/components/rating.ts index 343ca603ec4..07f2ebb21f7 100644 --- a/packages/ui/src/theme/tokens/components/rating.ts +++ b/packages/ui/src/theme/tokens/components/rating.ts @@ -1,4 +1,25 @@ -export const rating = { +import { ColorValue, DesignToken, SpaceValue } from '../types/designToken'; + +interface RatingSizeTokens { + size: DesignToken; +} + +interface RatingFilledTokens { + color: DesignToken; +} + +interface RatingEmptyTokens { + color: DesignToken; +} + +export interface RatingTokens { + large: RatingSizeTokens; + default: RatingSizeTokens; + small: RatingSizeTokens; + filled: RatingFilledTokens; + empty: RatingEmptyTokens; +} +export const rating: RatingTokens = { large: { size: { value: '{fontSizes.xxxl.value}' } }, default: { size: { value: '{fontSizes.xl.value}' } }, small: { size: { value: '{fontSizes.small.value}' } }, diff --git a/packages/ui/src/theme/tokens/components/select.ts b/packages/ui/src/theme/tokens/components/select.ts index ca79964d09e..aa80c5d6af0 100644 --- a/packages/ui/src/theme/tokens/components/select.ts +++ b/packages/ui/src/theme/tokens/components/select.ts @@ -1,4 +1,53 @@ -export const select = { +import { + AlignItemsValue, + BackgroundColorValue, + CursorValue, + DesignToken, + DisplayValue, + FlexValue, + PointerEventsValue, + PositionValue, + SpaceValue, + TransformValue, + WhiteSpaceValue, +} from '../types/designToken'; + +interface SelectWrapperTokens { + flex: DesignToken; + display: DesignToken; + position: DesignToken; + cursor: DesignToken; +} + +interface SelectIconWrapperTokens { + alignItems: DesignToken; + position: DesignToken; + top: DesignToken; + right: DesignToken; + transform: DesignToken; + pointerEvents: DesignToken; +} + +interface SelectOptionTokens { + backgroundColor: DesignToken; +} + +interface SelectSizeTokens { + minWidth: DesignToken; +} + +export interface SelectTokens { + paddingInlineEnd: DesignToken; + wrapper: SelectWrapperTokens; + iconWrapper: SelectIconWrapperTokens; + option: SelectOptionTokens; + whiteSpace: DesignToken; + minWidth: DesignToken; + small: SelectSizeTokens; + large: SelectSizeTokens; +} + +export const select: SelectTokens = { paddingInlineEnd: { value: '{space.xxl.value}' }, // wrappers wrapper: { diff --git a/packages/ui/src/theme/tokens/components/selectField.ts b/packages/ui/src/theme/tokens/components/selectField.ts index cf83ac6e27c..89ad5e66014 100644 --- a/packages/ui/src/theme/tokens/components/selectField.ts +++ b/packages/ui/src/theme/tokens/components/selectField.ts @@ -1,4 +1,10 @@ -export const selectfield = { +import { DesignToken, FlexDirectionValue } from '../types/designToken'; + +export interface SelectFieldTokens { + flexDirection: DesignToken; +} + +export const selectfield: SelectFieldTokens = { flexDirection: { value: 'column', }, diff --git a/packages/ui/src/theme/tokens/components/sliderField.ts b/packages/ui/src/theme/tokens/components/sliderField.ts index cab15d8a584..7baa10762c8 100644 --- a/packages/ui/src/theme/tokens/components/sliderField.ts +++ b/packages/ui/src/theme/tokens/components/sliderField.ts @@ -1,4 +1,84 @@ -export const sliderfield = { +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + BorderStyleValue, + BorderWidthValue, + BoxShadowValue, + DesignToken, + SpaceValue, +} from '../types/designToken'; + +interface SliderFieldTrackTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + height: DesignToken; + minWidth: DesignToken; +} + +interface SliderFieldRangeTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + _disabled: SliderFieldRangeDisabledTokens; +} + +interface SliderFieldRangeDisabledTokens { + backgroundColor: DesignToken; +} + +interface SliderFieldThumbTokens { + width: DesignToken; + height: DesignToken; + backgroundColor: DesignToken; + boxShadow: DesignToken; + borderRadius: DesignToken; + borderWidth: DesignToken; + borderColor: DesignToken; + borderStyle: DesignToken; + _disabled: SliderFieldThumbDisabledTokens; + _hover: SliderFieldThumbHoverTokens; + _focus: SliderFieldThumbFocusTokens; +} + +interface SliderFieldThumbDisabledTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + boxShadow: DesignToken; +} + +interface SliderFieldThumbHoverTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; +} + +interface SliderFieldThumbFocusTokens { + boxShadow: DesignToken; +} + +interface SliderFieldSizeTokens { + track: SliderFieldSizeTrackTokens; + thumb: SliderFieldSizeThumbTokens; +} + +interface SliderFieldSizeTrackTokens { + height: DesignToken; +} + +interface SliderFieldSizeThumbTokens { + height: DesignToken; + width: DesignToken; +} + +export interface SliderFieldTokens { + paddingBlock: DesignToken; + track: SliderFieldTrackTokens; + range: SliderFieldRangeTokens; + thumb: SliderFieldThumbTokens; + small: SliderFieldSizeTokens; + large: SliderFieldSizeTokens; +} + +export const sliderfield: SliderFieldTokens = { paddingBlock: { value: '{space.xs.value}' }, // The track is the thin background of the slider diff --git a/packages/ui/src/theme/tokens/components/stepperField.ts b/packages/ui/src/theme/tokens/components/stepperField.ts index f6ca871dc0d..d6e77f19660 100644 --- a/packages/ui/src/theme/tokens/components/stepperField.ts +++ b/packages/ui/src/theme/tokens/components/stepperField.ts @@ -1,4 +1,19 @@ -export const stepperfield = { +import { + DesignToken, + FlexDirectionValue, + TextAlignValue, +} from '../types/designToken'; + +interface StepperFieldInputTokens { + textAlign: DesignToken; +} + +export interface StepperFieldTokens { + flexDirection: DesignToken; + input: StepperFieldInputTokens; +} + +export const stepperfield: StepperFieldTokens = { flexDirection: { value: 'column' }, input: { textAlign: { value: 'center' }, diff --git a/packages/ui/src/theme/tokens/components/switchField.ts b/packages/ui/src/theme/tokens/components/switchField.ts index 4d0c5413622..db0b284d612 100644 --- a/packages/ui/src/theme/tokens/components/switchField.ts +++ b/packages/ui/src/theme/tokens/components/switchField.ts @@ -1,4 +1,77 @@ -export const switchfield = { +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + DesignToken, + FontSizeValue, + OpacityValue, + ShadowValue, + SpaceValue, + TransformValue, + TransitionDurationValue, +} from '../types/designToken'; + +interface SwitchFieldDisabledTokens { + opacity: DesignToken; +} + +interface SwitchFieldFocusedTokens { + shadow: DesignToken; +} + +interface SwitchFieldSizeTokens { + fontSize: DesignToken; +} + +interface SwitchFieldLabelTokens { + padding: DesignToken; +} + +interface SwitchFieldThumbTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + borderRadius: DesignToken; + checked: SwitchFieldThumbCheckedTokens; + transition: SwitchFieldThumbTransitionTokens; + width: DesignToken; +} + +interface SwitchFieldThumbTransitionTokens { + duration: DesignToken; +} + +interface SwitchFieldThumbCheckedTokens { + transform: DesignToken; +} +interface SwitchFieldTrackTokens { + backgroundColor: DesignToken; + borderRadius: DesignToken; + checked: SwitchFieldTrackCheckedTokens; + height: DesignToken; + padding: DesignToken; + transition: SwitchFieldTrackTransitionTokens; + width: DesignToken; +} + +interface SwitchFieldTrackTransitionTokens { + duration: DesignToken; +} + +interface SwitchFieldTrackCheckedTokens { + backgroundColor: DesignToken; +} + +export interface SwitchFieldTokens { + disabled: SwitchFieldDisabledTokens; + focused: SwitchFieldFocusedTokens; + large: SwitchFieldSizeTokens; + small: SwitchFieldSizeTokens; + label: SwitchFieldLabelTokens; + thumb: SwitchFieldThumbTokens; + track: SwitchFieldTrackTokens; +} + +export const switchfield: SwitchFieldTokens = { // States disabled: { opacity: { value: '{opacities.60.value}' }, diff --git a/packages/ui/src/theme/tokens/components/table.ts b/packages/ui/src/theme/tokens/components/table.ts index 19c4ac115bf..2ff511d3b9c 100644 --- a/packages/ui/src/theme/tokens/components/table.ts +++ b/packages/ui/src/theme/tokens/components/table.ts @@ -1,4 +1,89 @@ -export const table = { +import { + BackgroundColorValue, + BorderCollapseValue, + BorderColorValue, + BorderStyleValue, + BorderWidthValue, + CaptionSideValue, + ColorValue, + DesignToken, + DisplayValue, + FontSizeValue, + FontWeightValue, + SpaceValue, + TextAlignValue, + VerticalAlignValue, + WordBreakValue, +} from '../types/designToken'; + +interface TableDefaultTokens { + display: DesignToken; + verticalAlign: DesignToken; +} + +interface TableRowTokens extends TableDefaultTokens { + hover: TableRowHoverTokens; + striped: TableRowStripedTokens; +} + +interface TableRowHoverTokens { + backgroundColor: DesignToken; +} + +interface TableRowStripedTokens { + backgroundColor: DesignToken; +} + +interface TableCellTokens extends TableDefaultTokens { + borderColor: DesignToken; + borderStyle: DesignToken; + borderWidth: DesignToken; + color: DesignToken; + fontSize: DesignToken; + fontWeight: DesignToken; + padding: DesignToken; + large: TableCellSizeTokens; + small: TableCellSizeTokens; +} + +interface TableHeaderTokens extends TableCellTokens {} + +interface TableDataTokens extends TableCellTokens {} + +interface TableCellSizeTokens { + fontSize: DesignToken; + padding: DesignToken; +} + +interface TableCaptionTokens { + captionSide: DesignToken; + color: DesignToken; + display: DesignToken; + fontSize: DesignToken; + textAlign: DesignToken; + wordBreak: DesignToken; + large: TableCaptionSizeTokens; + small: TableCaptionSizeTokens; +} + +interface TableCaptionSizeTokens { + fontSize: DesignToken; +} + +export interface TableTokens { + borderCollapse: DesignToken; + display: DesignToken; + width: DesignToken; + head: TableDefaultTokens; + body: TableDefaultTokens; + foot: TableDefaultTokens; + row: TableRowTokens; + header: TableHeaderTokens; + data: TableDataTokens; + caption: TableCaptionTokens; +} + +export const table: TableTokens = { /** * Default table styles */ diff --git a/packages/ui/src/theme/tokens/components/tabs.ts b/packages/ui/src/theme/tokens/components/tabs.ts index 09f90b73351..1f7001fc03a 100644 --- a/packages/ui/src/theme/tokens/components/tabs.ts +++ b/packages/ui/src/theme/tokens/components/tabs.ts @@ -1,4 +1,66 @@ -export const tabs = { +import { + BackgroundColorValue, + BorderColorValue, + BorderStyleValue, + BorderWidthValue, + ColorValue, + DesignToken, + FontSizeValue, + FontWeightValue, + GapValue, + SpaceValue, + TextAlignValue, + TransitionDurationValue, +} from '../types/designToken'; + +interface TabsItemTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + borderStyle: DesignToken; + borderWidth: DesignToken; + color: DesignToken; + fontSize: DesignToken; + fontWeight: DesignToken; + paddingVertical: DesignToken; + paddingHorizontal: DesignToken; + textAlign: DesignToken; + transitionDuration: DesignToken; + _hover: TabsItemHoverTokens; + _focus: TabsItemFocusTokens; + _active: TabsItemActiveTokens; + _disabled: TabsItemDisabledTokens; +} + +interface TabsItemHoverTokens { + color: DesignToken; +} + +interface TabsItemFocusTokens { + color: DesignToken; +} + +interface TabsItemActiveTokens { + color: DesignToken; + borderColor: DesignToken; + backgroundColor: DesignToken; +} + +interface TabsItemDisabledTokens { + color: DesignToken; + borderColor: DesignToken; + backgroundColor: DesignToken; +} + +export interface TabsTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + borderStyle: DesignToken; + borderWidth: DesignToken; + gap: DesignToken; + item: TabsItemTokens; +} + +export const tabs: TabsTokens = { backgroundColor: { value: 'transparent' }, borderColor: { value: '{colors.border.secondary.value}' }, borderStyle: { value: 'solid' }, diff --git a/packages/ui/src/theme/tokens/components/text.ts b/packages/ui/src/theme/tokens/components/text.ts index 943bd72fa81..9ec8c78798e 100644 --- a/packages/ui/src/theme/tokens/components/text.ts +++ b/packages/ui/src/theme/tokens/components/text.ts @@ -1,4 +1,21 @@ -export const text = { +import { ColorValue, DesignToken } from '../types/designToken'; + +interface TextVariationTokens { + color: DesignToken; +} + +export interface TextTokens { + color: DesignToken; + primary: TextVariationTokens; + secondary: TextVariationTokens; + tertiary: TextVariationTokens; + error: TextVariationTokens; + warning: TextVariationTokens; + success: TextVariationTokens; + info: TextVariationTokens; +} + +export const text: TextTokens = { // default styles color: { value: '{colors.font.primary.value}' }, diff --git a/packages/ui/src/theme/tokens/components/toggleButton.ts b/packages/ui/src/theme/tokens/components/toggleButton.ts index 399915a137a..0cb10350e58 100644 --- a/packages/ui/src/theme/tokens/components/toggleButton.ts +++ b/packages/ui/src/theme/tokens/components/toggleButton.ts @@ -1,4 +1,129 @@ -export const togglebutton = { +import { + BackgroundColorValue, + BorderColorValue, + BorderWidthValue, + BoxShadowValue, + ColorValue, + DesignToken, +} from '../types/designToken'; + +interface ToggleButtonHoverTokens { + backgroundColor: DesignToken; +} +interface ToggleButtonActiveTokens { + backgroundColor: DesignToken; +} +interface ToggleButtonFocusTokens { + borderColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonDisabledTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonPressedTokens { + color: DesignToken; + backgroundColor: DesignToken; + _hover: ToggleButtonPressedHoverTokens; +} + +interface ToggleButtonPressedHoverTokens { + backgroundColor: DesignToken; +} + +interface ToggleButtonPrimaryTokens { + backgroundColor: DesignToken; + borderWidth: DesignToken; + _focus: ToggleButtonPrimaryFocusTokens; + _hover: ToggleButtonPrimaryHoverTokens; + _disabled: ToggleButtonPrimaryDisabledTokens; + _pressed: ToggleButtonPrimaryPressedTokens; +} +interface ToggleButtonPrimaryFocusTokens { + borderColor: DesignToken; + backgroundColor: DesignToken; + boxShadow: DesignToken; + color: DesignToken; +} + +interface ToggleButtonPrimaryHoverTokens { + backgroundColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonPrimaryDisabledTokens { + backgroundColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonPrimaryDisabledTokens { + color: DesignToken; +} + +interface ToggleButtonPrimaryPressedTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; + color: DesignToken; + _focus: TogglButtonPrimaryPressedFocusTokens; + _hover: TogglButtonPrimaryPressedHoverTokens; +} + +interface TogglButtonPrimaryPressedFocusTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; +} +interface TogglButtonPrimaryPressedHoverTokens { + backgroundColor: DesignToken; + borderColor: DesignToken; +} + +interface ToggleButtonLinkTokens { + color: DesignToken; + _hover: ToggleButtonLinkHoverTokens; + _focus: ToggleButtonLinkFocusTokens; + _disabled: ToggleButtonLinkDisabledTokens; + _pressed: ToggleButtonLinkPressedTokens; +} +interface ToggleButtonLinkHoverTokens { + backgroundColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonLinkFocusTokens { + backgroundColor: DesignToken; + color: DesignToken; +} + +interface ToggleButtonLinkDisabledTokens { + color: DesignToken; +} + +interface ToggleButtonLinkPressedTokens { + backgroundColor: DesignToken; + color: DesignToken; + _hover: ToggleButtonLinkPressedHoverTokens; +} + +interface ToggleButtonLinkPressedHoverTokens { + backgroundColor: DesignToken; +} + +export interface ToggleButtonTokens { + borderColor: DesignToken; + color: DesignToken; + _hover: ToggleButtonHoverTokens; + _focus: ToggleButtonFocusTokens; + _active: ToggleButtonActiveTokens; + _disabled: ToggleButtonDisabledTokens; + _pressed: ToggleButtonPressedTokens; + primary: ToggleButtonPrimaryTokens; + link: ToggleButtonLinkTokens; +} + +export const togglebutton: ToggleButtonTokens = { borderColor: { value: '{colors.border.primary.value}' }, color: { value: '{colors.overlay.50.value}' }, _hover: { diff --git a/packages/ui/src/theme/tokens/components/toggleButtonGroup.ts b/packages/ui/src/theme/tokens/components/toggleButtonGroup.ts index 46364628629..2c6e25aede2 100644 --- a/packages/ui/src/theme/tokens/components/toggleButtonGroup.ts +++ b/packages/ui/src/theme/tokens/components/toggleButtonGroup.ts @@ -1,4 +1,17 @@ -export const togglebuttongroup = { +import { + AlignContentValue, + AlignItemsValue, + DesignToken, + JustifyContentValue, +} from '../types/designToken'; + +export interface ToggleButtonGroupTokens { + alignItems: DesignToken; + alignContent: DesignToken; + justifyContent: DesignToken; +} + +export const togglebuttongroup: ToggleButtonGroupTokens = { alignItems: { value: 'center' }, alignContent: { value: 'center' }, justifyContent: { value: 'flex-start' }, diff --git a/packages/ui/src/theme/tokens/index.ts b/packages/ui/src/theme/tokens/index.ts index e3da57ef743..397c399c04c 100644 --- a/packages/ui/src/theme/tokens/index.ts +++ b/packages/ui/src/theme/tokens/index.ts @@ -1,6 +1,6 @@ import { borderWidths, BorderWidths, WebBorderWidths } from './borderWidths'; import { colors, Colors, WebColors } from './colors'; -import { components } from './components'; +import { ComponentTokens, components } from './components'; import { fonts, Fonts, WebFonts } from './fonts'; import { fontSizes, FontSizes, WebFontSizes } from './fontSizes'; import { fontWeights, FontWeights, WebFontWeights } from './fontWeights'; @@ -23,7 +23,7 @@ import { time, Time, WebTime } from './time'; import { transforms, Transforms, WebTransforms } from './transforms'; export interface Tokens { - components: any; // TODO type this + components: ComponentTokens; borderWidths: BorderWidths; colors: Colors; fonts: Fonts; diff --git a/packages/ui/src/theme/tokens/types/designToken.ts b/packages/ui/src/theme/tokens/types/designToken.ts index 398a333319b..54c7257d162 100644 --- a/packages/ui/src/theme/tokens/types/designToken.ts +++ b/packages/ui/src/theme/tokens/types/designToken.ts @@ -43,23 +43,61 @@ export type WebDesignToken = { toString(): string; } & DesignToken; +export type AnimationDurationValue = string; +export type AnimationTimingFunctionValue = string; +export type AlignItemsValue = string; +export type AlignContentValue = string; +export type BackgroundColorValue = ColorValue; +export type BorderColorValue = ColorValue; +export type BorderCollapseValue = string; +export type BorderRadiusValue = RadiusValue; +export type BorderStyleValue = string; +export type BorderWidthValue = SpaceValue; +export type BorderValue = string; +export type BoxSizingValue = string; +export type BoxShadowValue = ShadowValue; +export type CaptionSideValue = string; export type ColorValue = string; -export type BorderWidthValue = string; -export type FontValue = string; +export type CursorValue = string; +export type DisplayValue = string; +export type FlexDirectionValue = string; +export type FlexValue = string; +export type FlexWrapValue = string; export type FontSizeValue = string; -export type FontWeightValue = number; -export type LineHeightValue = string; +export type FontStyleValue = string; +export type FontValue = string; +export type FontWeightValue = string | number; +export type GapValue = string; +export type JustifyContentValue = string; +export type LineHeightValue = string | number; +export type ObjectFitValue = string; export type OpacityValue = string; export type OutlineOffsetValue = string; export type OutlineWidthValue = string; +export type OutlineColorValue = string; +export type OutlineStyleValue = string; +export type PositionValue = string; +export type PointerEventsValue = string; export type RadiusValue = string; -export type ShadowValue = { - offsetX: string; - offsetY: string; - blurRadius: string; - spreadRadius?: string; - color: string; -}; +export type ShadowValue = + | { + offsetX: string; + offsetY: string; + blurRadius: string; + spreadRadius?: string; + color: string; + } + | string; +export type StrokeFilledValue = string; +export type StrokeEmptyValue = string; +export type StrokeLinecapValue = string; export type SpaceValue = string; +export type TextAlignValue = string; export type TimeValue = string; export type TransformValue = string; +export type TransitionDurationValue = string; +export type TransitionPropertyValue = string; +export type TransitionTimingFunctionValue = string; +export type VerticalAlignValue = string; +export type WhiteSpaceValue = string; +export type WordBreakValue = string; From 7beda1ea2e28f5de4beefa50f2032cef3e4870e1 Mon Sep 17 00:00:00 2001 From: jacoblogan Date: Wed, 13 Apr 2022 13:30:06 -0700 Subject: [PATCH 07/11] Remove hygen (#1681) * remove hygen dependency and templates foleder Co-authored-by: Jacob Logan --- .changeset/neat-drinks-develop.md | 5 + .../_templates/primitives/new/component.t | 11 - .../react/_templates/primitives/new/docs.t | 15 -- .../react/_templates/primitives/new/exports.t | 4 - .../react/_templates/primitives/new/readme.t | 4 - .../react/_templates/primitives/new/tests.t | 8 - .../react/_templates/primitives/new/types.t | 8 - packages/react/package.json | 4 +- yarn.lock | 232 +----------------- 9 files changed, 12 insertions(+), 279 deletions(-) create mode 100644 .changeset/neat-drinks-develop.md delete mode 100644 packages/react/_templates/primitives/new/component.t delete mode 100644 packages/react/_templates/primitives/new/docs.t delete mode 100644 packages/react/_templates/primitives/new/exports.t delete mode 100644 packages/react/_templates/primitives/new/readme.t delete mode 100644 packages/react/_templates/primitives/new/tests.t delete mode 100644 packages/react/_templates/primitives/new/types.t diff --git a/.changeset/neat-drinks-develop.md b/.changeset/neat-drinks-develop.md new file mode 100644 index 00000000000..c886d48f2e9 --- /dev/null +++ b/.changeset/neat-drinks-develop.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-react": patch +--- + +Remove hygen diff --git a/packages/react/_templates/primitives/new/component.t b/packages/react/_templates/primitives/new/component.t deleted file mode 100644 index e4aa01082b8..00000000000 --- a/packages/react/_templates/primitives/new/component.t +++ /dev/null @@ -1,11 +0,0 @@ ---- -to: src/primitives/<%= name %>/<%= name %>.tsx ---- -import * as React from 'react'; -import { <%= name %>Props } from "../types"; - -export const <%= name %>: React.FC<<%= name %>Props> = ({ children }) => { - return ( -
Hello!, I'm a <%= name %> component
- ); -}; diff --git a/packages/react/_templates/primitives/new/docs.t b/packages/react/_templates/primitives/new/docs.t deleted file mode 100644 index 1db6dd3737d..00000000000 --- a/packages/react/_templates/primitives/new/docs.t +++ /dev/null @@ -1,15 +0,0 @@ ---- -to: src/primitives/<%= name %>/docs.mdx ---- ---- -title: <%= name %> ---- - -## Installation - -``` -npm install @aws-amplify/ui-react -``` - -## Demo -<<%= h.capitalize(name) %>Demo /> diff --git a/packages/react/_templates/primitives/new/exports.t b/packages/react/_templates/primitives/new/exports.t deleted file mode 100644 index 22af37d0e0e..00000000000 --- a/packages/react/_templates/primitives/new/exports.t +++ /dev/null @@ -1,4 +0,0 @@ ---- -to: src/primitives/<%= name %>/index.ts ---- -export * from './<%= name %>'; diff --git a/packages/react/_templates/primitives/new/readme.t b/packages/react/_templates/primitives/new/readme.t deleted file mode 100644 index ae80c7a2ca3..00000000000 --- a/packages/react/_templates/primitives/new/readme.t +++ /dev/null @@ -1,4 +0,0 @@ ---- -to: src/primitives/<%= name %>/README.md ---- -# Amplify UI: <%= name %> diff --git a/packages/react/_templates/primitives/new/tests.t b/packages/react/_templates/primitives/new/tests.t deleted file mode 100644 index 579d7aa1df7..00000000000 --- a/packages/react/_templates/primitives/new/tests.t +++ /dev/null @@ -1,8 +0,0 @@ ---- -to: src/primitives/<%= name %>/__tests__/<%= name %>.test.tsx ---- -import { <%= name %> } from "../<%= name %>"; - -describe("<%= name %> component", () => { - /* Add your own component tests */ -}); diff --git a/packages/react/_templates/primitives/new/types.t b/packages/react/_templates/primitives/new/types.t deleted file mode 100644 index e9ab4c9afa4..00000000000 --- a/packages/react/_templates/primitives/new/types.t +++ /dev/null @@ -1,8 +0,0 @@ ---- -to: src/primitives/types/<%= name.toLowerCase() %>.ts ---- -import { BaseComponentProps } from "./base"; - -export interface <%= name %>Props extends BaseComponentProps { - /* Add your own properties */ -} diff --git a/packages/react/package.json b/packages/react/package.json index ec379bf152a..14f31e34c1a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -50,7 +50,6 @@ "build:icons": "yarn run clean:icons && node scripts/generateIcons.js", "clean": "rimraf dist node_modules", "clean:icons": "rimraf ./src/primitives/Icon/icons", - "primitives:new": "hygen primitives new", "lint": "tsc --noEmit && yarn eslint:primitives", "test": "yarn test:unit", "test:watch": "yarn test:unit:watch", @@ -69,8 +68,8 @@ "deepmerge": "4.2.2", "lodash": "4.17.21", "mapbox-gl": "npm:empty-npm-package@1.0.0", - "maplibre-gl-js-amplify": "1.2.3", "maplibre-gl": "1.15.2", + "maplibre-gl-js-amplify": "1.2.3", "qrcode": "1.5.0", "react-generate-context": "1.0.1", "react-map-gl": "7.0.10" @@ -100,7 +99,6 @@ "degit": "^2.8.4", "eslint": "^8.4.1", "eslint-plugin-react-hooks": "^4.3.0", - "hygen": "^6.1.0", "jest": "^27.0.4", "jest-matchmedia-mock": "^1.1.0", "react-router-dom": "^6.2.1", diff --git a/yarn.lock b/yarn.lock index 8fca4af6b64..864f817d5a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5585,7 +5585,7 @@ resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197" integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA== -"@types/node@*", "@types/node@>=10.0.0", "@types/node@^17.0.19": +"@types/node@*", "@types/node@>=10.0.0": version "17.0.22" resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.22.tgz#38b6c4b9b2f3ed9f2e376cce42a298fb2375251e" integrity sha512-8FwbVoG4fy+ykY86XCAclKZDORttqE5/s7dyWZKLXTdv3vRy5HozBEinG5IqhvPXXzIZEcTVbuHlQEI6iuwcmw== @@ -7056,11 +7056,6 @@ async-each@^1.0.1: resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf" integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== -async@0.9.x: - version "0.9.2" - resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" - integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0= - async@^2.6.2: version "2.6.3" resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" @@ -8064,14 +8059,6 @@ callsites@^3.0.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -camel-case@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73" - integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M= - dependencies: - no-case "^2.2.0" - upper-case "^1.1.1" - camel-case@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a" @@ -8230,7 +8217,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: +chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -8238,30 +8225,6 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -change-case@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e" - integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw== - dependencies: - camel-case "^3.0.0" - constant-case "^2.0.0" - dot-case "^2.1.0" - header-case "^1.0.0" - is-lower-case "^1.1.0" - is-upper-case "^1.1.0" - lower-case "^1.1.1" - lower-case-first "^1.0.0" - no-case "^2.3.2" - param-case "^2.1.0" - pascal-case "^2.0.0" - path-case "^2.1.0" - sentence-case "^2.1.0" - snake-case "^2.1.0" - swap-case "^1.1.0" - title-case "^2.1.0" - upper-case "^1.1.1" - upper-case-first "^1.1.0" - change-case@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12" @@ -8993,14 +8956,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= -constant-case@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46" - integrity sha1-QXV2TTidP6nI7NKRhu1gBSQ7akY= - dependencies: - snake-case "^2.1.0" - upper-case "^1.1.1" - constant-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1" @@ -10308,13 +10263,6 @@ domutils@^2.5.2, domutils@^2.8.0: domelementtype "^2.2.0" domhandler "^4.2.0" -dot-case@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee" - integrity sha1-NNzzf1Co6TwrO8qLt/uRVcfaO+4= - dependencies: - no-case "^2.2.0" - dot-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751" @@ -10428,13 +10376,6 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= -ejs@^3.1.6: - version "3.1.6" - resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.6.tgz#5bfd0a0689743bb5268b3550cceeebbc1702822a" - integrity sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw== - dependencies: - jake "^10.6.1" - electron-to-chromium@^1.3.723, electron-to-chromium@^1.4.84: version "1.4.88" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db" @@ -10975,13 +10916,6 @@ eslint-plugin-jsx-a11y@^6.4.1: language-tags "^1.0.5" minimatch "^3.0.4" -eslint-plugin-prettier@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0" - integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ== - dependencies: - prettier-linter-helpers "^1.0.0" - eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172" @@ -11572,11 +11506,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-diff@^1.1.2: - version "1.2.0" - resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" - integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== - fast-glob@^3.2.11, fast-glob@^3.2.4, fast-glob@^3.2.7, fast-glob@^3.2.9: version "3.2.11" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" @@ -11706,13 +11635,6 @@ file-uri-to-path@1.0.0: resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw== -filelist@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.2.tgz#80202f21462d4d1c2e214119b1807c1bc0380e5b" - integrity sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ== - dependencies: - minimatch "^3.0.4" - fill-range@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7" @@ -11927,13 +11849,6 @@ from2@^2.1.0: inherits "^2.0.1" readable-stream "^2.0.0" -front-matter@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5" - integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg== - dependencies: - js-yaml "^3.13.1" - fs-extra@4.0.2, fs-extra@^10.0.0, fs-extra@^10.0.1, fs-extra@^5.0.0, fs-extra@^7.0.1, fs-extra@^8.1.0, fs-extra@^9.0.0, fs-extra@^9.1.0: version "10.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.1.tgz#27de43b4320e833f6867cc044bfce29fdf0ef3b8" @@ -12532,14 +12447,6 @@ he@1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -header-case@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d" - integrity sha1-lTWXMZfBRLCWE81l0xfvGZY70C0= - dependencies: - no-case "^2.2.0" - upper-case "^1.1.3" - header-case@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063" @@ -12799,26 +12706,6 @@ husky@>=6: resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535" integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ== -hygen@^6.1.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/hygen/-/hygen-6.2.0.tgz#9f71af9218a1cb24f2c9f017a2594a6d61e6874f" - integrity sha512-5kma/nx7K+gJu8Q8kirkamUDb2TLvDJEiG/hfAL2Jt93SGrWEd0vWVEwaJW7qQylbIoT7gBVefrXZS2sYS8aag== - dependencies: - "@types/node" "^17.0.19" - chalk "^4.1.2" - change-case "^3.1.0" - debug "^4.3.3" - degit "^2.8.4" - ejs "^3.1.6" - enquirer "^2.3.6" - eslint-plugin-prettier "^4.0.0" - execa "^5.0.0" - front-matter "^4.0.2" - fs-extra "^10.0.0" - ignore-walk "^4.0.1" - inflection "^1.12.0" - yargs-parser "^21.0.0" - iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -12860,13 +12747,6 @@ ignore-walk@^3.0.3: dependencies: minimatch "^3.0.4" -ignore-walk@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-4.0.1.tgz#fc840e8346cf88a3a9380c5b17933cd8f4d39fa3" - integrity sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw== - dependencies: - minimatch "^3.0.4" - ignore@5.1.8: version "5.1.8" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" @@ -12973,11 +12853,6 @@ infer-owner@^1.0.3, infer-owner@^1.0.4: resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467" integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== -inflection@^1.12.0: - version "1.13.2" - resolved "https://registry.yarnpkg.com/inflection/-/inflection-1.13.2.tgz#15e8c797c6c3dadf31aa658f8df8a4ea024798b0" - integrity sha512-cmZlljCRTBFouT8UzMzrGcVEvkv6D/wBdcdKG7J1QH5cXjtU75Dm+P27v9EKu/Y43UYyCJd1WC4zLebRrC8NBw== - inflight@^1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" @@ -13417,13 +13292,6 @@ is-lambda@^1.0.1: resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5" integrity sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU= -is-lower-case@^1.1.0: - version "1.1.3" - resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393" - integrity sha1-fhR75HaNxGbbO/shzGCzHmrWk5M= - dependencies: - lower-case "^1.1.0" - is-map@^2.0.1, is-map@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" @@ -13640,13 +13508,6 @@ is-unicode-supported@^0.1.0: resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7" integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw== -is-upper-case@^1.1.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f" - integrity sha1-jQsfp+eTOh5YSDYA7H2WYcuvdW8= - dependencies: - upper-case "^1.1.0" - is-weakmap@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" @@ -13819,16 +13680,6 @@ istextorbinary@^2.2.1: editions "^2.2.0" textextensions "^2.5.0" -jake@^10.6.1: - version "10.8.4" - resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.4.tgz#f6a8b7bf90c6306f768aa82bb7b98bf4ca15e84a" - integrity sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA== - dependencies: - async "0.9.x" - chalk "^4.0.2" - filelist "^1.0.1" - minimatch "^3.0.4" - jasmine-core@^3.6.0: version "3.99.1" resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-3.99.1.tgz#5bfa4b2d76618868bfac4c8ff08bb26fffa4120d" @@ -15225,14 +15076,7 @@ loupe@^2.3.1: dependencies: get-func-name "^2.0.0" -lower-case-first@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1" - integrity sha1-5dp8JvKacHO+AtUrrJmA5ZIq36E= - dependencies: - lower-case "^1.1.2" - -lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2: +lower-case@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw= @@ -16637,7 +16481,7 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== -no-case@^2.2.0, no-case@^2.3.2: +no-case@^2.2.0: version "2.3.2" resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac" integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ== @@ -17368,13 +17212,6 @@ parallel-transform@^1.1.0: inherits "^2.0.3" readable-stream "^2.1.5" -param-case@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247" - integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc= - dependencies: - no-case "^2.2.0" - param-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5" @@ -17494,14 +17331,6 @@ parseurl@~1.3.2, parseurl@~1.3.3: resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== -pascal-case@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.1.tgz#2d578d3455f660da65eca18ef95b4e0de912761e" - integrity sha1-LVeNNFX2YNpl7KGO+VtODekSdh4= - dependencies: - camel-case "^3.0.0" - upper-case-first "^1.1.0" - pascal-case@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb" @@ -17525,13 +17354,6 @@ path-browserify@1.0.1, path-browserify@^1.0.0, path-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd" integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g== -path-case@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5" - integrity sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU= - dependencies: - no-case "^2.2.0" - path-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f" @@ -18358,13 +18180,6 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= -prettier-linter-helpers@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" - integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== - dependencies: - fast-diff "^1.1.2" - prettier@2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c" @@ -19959,14 +19774,6 @@ send@0.17.2: range-parser "~1.2.1" statuses "~1.5.0" -sentence-case@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.1.tgz#1f6e2dda39c168bf92d13f86d4a918933f667ed4" - integrity sha1-H24t2jnBaL+S0T+G1KkYkz9mftQ= - dependencies: - no-case "^2.2.0" - upper-case-first "^1.1.2" - sentence-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f" @@ -20251,13 +20058,6 @@ smartwrap@^1.2.3: wcwidth "^1.0.1" yargs "^15.1.0" -snake-case@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f" - integrity sha1-Qb2xtz8w7GagTU4srRt2OH1NbZ8= - dependencies: - no-case "^2.2.0" - snake-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" @@ -21224,14 +21024,6 @@ svgo@^2.7.0: picocolors "^1.0.0" stable "^0.1.8" -swap-case@^1.1.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3" - integrity sha1-w5IDpFhzhfrTyFCgvRvK+ggZdOM= - dependencies: - lower-case "^1.1.1" - upper-case "^1.1.1" - symbol-observable@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-3.0.0.tgz#eea8f6478c651018e059044268375c408c15c533" @@ -21536,7 +21328,7 @@ tinyqueue@^2.0.3: resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08" integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA== -title-case@^2.1.0, title-case@^2.1.1: +title-case@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa" integrity sha1-PhJyFtpY0rxb7PE3q5Ha46fNj6o= @@ -22457,13 +22249,6 @@ update-check@1.5.2: registry-auth-token "3.3.2" registry-url "3.1.0" -upper-case-first@^1.1.0, upper-case-first@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115" - integrity sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU= - dependencies: - upper-case "^1.1.1" - upper-case-first@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324" @@ -22471,7 +22256,7 @@ upper-case-first@^2.0.2: dependencies: tslib "^2.0.3" -upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3: +upper-case@^1.0.3: version "1.1.3" resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598" integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg= @@ -23597,11 +23382,6 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^21.0.0: - version "21.0.1" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35" - integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg== - yargs@^13.3.2: version "13.3.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" From 16dced7de5edc73c064b7ec4bddbefe586e98393 Mon Sep 17 00:00:00 2001 From: William Lee <43682783+wlee221@users.noreply.github.com> Date: Wed, 13 Apr 2022 13:32:58 -0700 Subject: [PATCH 08/11] fix(authenticator): Ensure setup has ran after refresh (#1679) * Add e2e for signing in after reload + sign out * Add non-reload test case * Run setup if it hasn't run yet * Create tender-parents-sniff.md --- .changeset/tender-parents-sniff.md | 5 +++++ .../sign-in-with-username.feature | 19 ++++++++++++++++++- .../ui/src/machines/authenticator/index.ts | 12 ++++++++++-- .../authenticator/stateMachine/context.ts | 1 + 4 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 .changeset/tender-parents-sniff.md diff --git a/.changeset/tender-parents-sniff.md b/.changeset/tender-parents-sniff.md new file mode 100644 index 00000000000..c75f81070d2 --- /dev/null +++ b/.changeset/tender-parents-sniff.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui": patch +--- + +fix(authenticator): Ensure machine setup runs after user signs in, refreshes, then signs out. diff --git a/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature b/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature index efee24111af..2286937fc3a 100644 --- a/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature +++ b/packages/e2e/features/ui/components/authenticator/sign-in-with-username.feature @@ -34,7 +34,7 @@ Feature: Sign In with Username Then I see "Sign out" @angular @react @vue - Scenario: Sign in with confirmed credentials then sign out + Scenario: Sign in with confirmed credentials, reload, sign out, then sign in again When I type my "username" with status "CONFIRMED" And I type my password And I click the "Sign in" button @@ -43,6 +43,23 @@ Feature: Sign In with Username Then I see "Sign out" And I click the "Sign out" button Then I see "Sign in" + And I type my "username" with status "CONFIRMED" + And I type my password + And I click the "Sign in" button + Then I see "Sign out" + + @angular @react @vue + Scenario: Sign in with confirmed credentials, sign out, then sign in again + When I type my "username" with status "CONFIRMED" + And I type my password + And I click the "Sign in" button + Then I see "Sign out" + And I click the "Sign out" button + Then I see "Sign in" + And I type my "username" with status "CONFIRMED" + And I type my password + And I click the "Sign in" button + Then I see "Sign out" # FORCE_CHANGE_PASSWORD tests are skipped as the temporary passwords used for these # test accounts will expire in Cognito. diff --git a/packages/ui/src/machines/authenticator/index.ts b/packages/ui/src/machines/authenticator/index.ts index 3bb23574e03..d57b43c0162 100644 --- a/packages/ui/src/machines/authenticator/index.ts +++ b/packages/ui/src/machines/authenticator/index.ts @@ -27,6 +27,7 @@ export function createAuthenticatorMachine() { config: {}, services: defaultServices, actorRef: undefined, + hasSetup: false, }, states: { // See: https://xstate.js.org/docs/guides/communication.html#invoking-promises @@ -48,7 +49,7 @@ export function createAuthenticatorMachine() { waitConfig: { on: { INIT: { - actions: 'configure', + actions: ['configure', 'setHasSetup'], target: 'applyConfig', }, }, @@ -170,7 +171,10 @@ export function createAuthenticatorMachine() { }, }, on: { - 'done.invoke.signOutActor': 'signIn', + 'done.invoke.signOutActor': [ + { target: 'setup', cond: 'shouldSetup' }, + { target: 'setup.goToInitialState' }, + ], }, }, authenticated: { @@ -331,6 +335,9 @@ export function createAuthenticatorMachine() { config, }; }), + setHasSetup: assign({ + hasSetup: true, + }), }, guards: { // guards for initial states @@ -343,6 +350,7 @@ export function createAuthenticatorMachine() { event.data?.intent === 'confirmSignUp', shouldRedirectToResetPassword: (_, event) => event.data?.intent === 'confirmPasswordReset', + shouldSetup: (context) => context.hasSetup === false, }, services: { getCurrentUser: (context, _) => context.services.getCurrentUser(), diff --git a/packages/ui/src/types/authenticator/stateMachine/context.ts b/packages/ui/src/types/authenticator/stateMachine/context.ts index a49db27068d..4d2b175fc97 100644 --- a/packages/ui/src/types/authenticator/stateMachine/context.ts +++ b/packages/ui/src/types/authenticator/stateMachine/context.ts @@ -39,6 +39,7 @@ export interface AuthContext { code?: string; mfaType?: AuthChallengeNames.SMS_MFA | AuthChallengeNames.SOFTWARE_TOKEN_MFA; actorDoneData?: Omit; // data returned from actors when they finish and reach their final state + hasSetup?: boolean; } /** From ef5a708170ff2b177e79a5e2d8c6ea2645ee453a Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Wed, 13 Apr 2022 13:58:23 -0700 Subject: [PATCH 09/11] chore(ui-react): updates to allow eslint react-hooks/rules-of-hooks set to error (#1666) --- .changeset/purple-flies-press.md | 12 ++ packages/react/.eslintrc.json | 2 +- packages/react/package.json | 3 +- .../ConfirmSignUp/ConfirmSignUp.tsx | 4 +- .../Authenticator/SetupTOTP/SetupTOTP.tsx | 52 +++---- .../Authenticator/SignIn/SignIn.tsx | 6 +- .../hooks/useAuthenticator/index.tsx | 27 ++-- .../useCustomComponents/defaultComponents.tsx | 22 ++- .../hooks/useCustomComponents/index.tsx | 5 +- .../src/components/Geo/MapView/index.tsx | 2 +- .../src/hooks/__tests__/useDataStore.test.ts | 133 +++++++++++++++++- .../src/hooks/useComposeRefsCallback.tsx | 29 ++-- packages/react/src/hooks/useControllable.ts | 57 ++++---- packages/react/src/types/PartialDeep.ts | 81 ----------- packages/react/src/types/Primitive.ts | 14 -- packages/react/src/types/index.ts | 1 - 16 files changed, 268 insertions(+), 182 deletions(-) create mode 100644 .changeset/purple-flies-press.md delete mode 100644 packages/react/src/types/PartialDeep.ts delete mode 100644 packages/react/src/types/Primitive.ts delete mode 100644 packages/react/src/types/index.ts diff --git a/.changeset/purple-flies-press.md b/.changeset/purple-flies-press.md new file mode 100644 index 00000000000..846afcfb21b --- /dev/null +++ b/.changeset/purple-flies-press.md @@ -0,0 +1,12 @@ +--- +"@aws-amplify/ui-react": patch +--- + +chore(ui-react): updates to allow eslint react-hooks/rules-of-hooks set to error +- update eslint 'rules-of-hooks/exhaustive-deps' from 'warning' to 'error' +- turn linting on for entire ui-react package +- add missing or update dep arrays as needed to satisfy 'rules-of-hooks/exhaustive-deps' +- add DefaultFooter component in SignIn +- add DefaultHeader component in ConfirmSignUp +- add DefaultComponents interface and remove PartialDeep and related files +- add useAuthenticatorService and error throw in useAuthenticator to prevent conditional hook calls diff --git a/packages/react/.eslintrc.json b/packages/react/.eslintrc.json index 9d9031a4760..dc461d39136 100644 --- a/packages/react/.eslintrc.json +++ b/packages/react/.eslintrc.json @@ -4,7 +4,7 @@ "extends": ["plugin:react-hooks/recommended"], "rules": { "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn" + "react-hooks/exhaustive-deps": "error" }, "parserOptions": { "ecmaVersion": "latest", diff --git a/packages/react/package.json b/packages/react/package.json index 14f31e34c1a..a2f558ae32f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -45,12 +45,11 @@ "build:ts": "rollup --config", "build:catalog": "ts-node scripts/generatePrimitivesCatalog.ts", "dev": "rollup --config --watch", - "eslint:primitives": "eslint ./src/primitives --ext .js,.ts,.tsx", "update:icons": "node scripts/updateIcons.js", "build:icons": "yarn run clean:icons && node scripts/generateIcons.js", "clean": "rimraf dist node_modules", "clean:icons": "rimraf ./src/primitives/Icon/icons", - "lint": "tsc --noEmit && yarn eslint:primitives", + "lint": "tsc --noEmit && yarn eslint ./src --ext .js,.ts,.tsx", "test": "yarn test:unit", "test:watch": "yarn test:unit:watch", "test:unit": "jest", diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx index 63047befd91..cd2502467ea 100644 --- a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx +++ b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx @@ -94,7 +94,7 @@ export function ConfirmSignUp() { ); } -ConfirmSignUp.Header = () => { +const DefaultHeader = () => { const { codeDeliveryDetails: { DeliveryMedium } = {} } = useAuthenticator( (context) => [context.codeDeliveryDetails] ); @@ -113,4 +113,6 @@ ConfirmSignUp.Header = () => { ); }; +ConfirmSignUp.Header = DefaultHeader; + ConfirmSignUp.Footer = (): JSX.Element => null; diff --git a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx index 497c31688ea..39196e891a4 100644 --- a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx +++ b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx @@ -2,7 +2,12 @@ import QRCode from 'qrcode'; import * as React from 'react'; import { Auth, Logger } from 'aws-amplify'; -import { getActorState, SignInState, translate } from '@aws-amplify/ui'; +import { + CognitoUserAmplify, + getActorState, + SignInState, + translate, +} from '@aws-amplify/ui'; import { Flex } from '../../../primitives/Flex'; import { Heading } from '../../../primitives/Heading'; @@ -36,34 +41,33 @@ export const SetupTOTP = (): JSX.Element => { // `user` hasn't been set on the top-level state yet, so it's only available from the signIn actor const actorState = getActorState(_state) as SignInState; - const { user } = actorState.context; - - const formOverrides = getActorState(_state).context?.formFields?.setupTOTP; - - const QROR = formOverrides?.['QR']; - - const generateQRCode = async (user): Promise => { - try { - const newSecretKey = await Auth.setupTOTP(user); - setSecretKey(newSecretKey); - const issuer = QROR?.totpIssuer ?? 'AWSCognito'; - const username = QROR?.totpUsername ?? user.username; - const totpCode = `otpauth://totp/${issuer}:${username}?secret=${newSecretKey}&issuer=${issuer}`; - const qrCodeImageSource = await QRCode.toDataURL(totpCode); - - setQrCode(qrCodeImageSource); - } catch (error) { - logger.error(error); - } finally { - setIsLoading(false); - } - }; + const { formFields, user } = actorState.context; + const { totpIssuer = 'AWSCognito', totpUsername = user.username } = + formFields?.setupTOTP?.QR; + + const generateQRCode = React.useCallback( + async (currentUser: CognitoUserAmplify): Promise => { + try { + const newSecretKey = await Auth.setupTOTP(currentUser); + setSecretKey(newSecretKey); + const totpCode = `otpauth://totp/${totpIssuer}:${totpUsername}?secret=${newSecretKey}&issuer=${totpIssuer}`; + const qrCodeImageSource = await QRCode.toDataURL(totpCode); + + setQrCode(qrCodeImageSource); + } catch (error) { + logger.error(error); + } finally { + setIsLoading(false); + } + }, + [totpIssuer, totpUsername] + ); React.useEffect(() => { if (!user) return; generateQRCode(user); - }, [user]); + }, [generateQRCode, user]); const copyText = (): void => { navigator.clipboard.writeText(secretKey); diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx index 516f3942590..a7c9cef8b67 100644 --- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx +++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx @@ -64,8 +64,7 @@ export function SignIn() { ); } -SignIn.Header = (): JSX.Element => null; -SignIn.Footer = () => { +const DefaultFooter = () => { const { toResetPassword } = useAuthenticator((context) => [ context.toResetPassword, ]); @@ -88,3 +87,6 @@ SignIn.Footer = () => { ); }; + +SignIn.Footer = DefaultFooter; +SignIn.Header = (): JSX.Element => null; diff --git a/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx b/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx index 30ab9e5b424..41c8df41b65 100644 --- a/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx +++ b/packages/react/src/components/Authenticator/hooks/useAuthenticator/index.tsx @@ -52,9 +52,15 @@ export const Provider = ({ children }) => { service: { send }, } = value; + const isListening = React.useRef(false); React.useEffect(() => { + if (isListening.current) { + return; + } + + isListening.current = true; return listenToAuthHub(send); - }, []); + }, [send]); return ( @@ -87,24 +93,27 @@ export type InternalAuthenticatorContext = { */ export type Selector = (context: AuthenticatorContext) => Array; -export const useAuthenticator = (selector?: Selector) => { +const useAuthenticatorService = () => { const { service } = React.useContext(AuthenticatorContext); if (!service) { - console.error( - 'No `Authenticator.Provider` was found above where `useAuthenticator` hook is. ' + - 'Please ensure you wrap your App with `Authenticator.Provider` like so: ' + - 'https://ui.docs.amplify.aws/components/authenticator#useauthenticator-hook' + throw new Error( + 'Please ensure you wrap your App with `Authenticator.Provider`.\nSee the `useAuthenticator` section on https://ui.docs.amplify.aws/components/authenticator.' ); - return null; } - const send = service.send; + return service; +}; + +export const useAuthenticator = (selector?: Selector) => { + const service = useAuthenticatorService(); + + const { send } = service; // send aliases are static and thus can be memoized const sendAliases = React.useMemo>( () => getSendEventAliases(send), - [service] + [send] ); const getFacade = (state: AuthMachineState) => { diff --git a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx index a566623ec4a..61e68eb2749 100644 --- a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx +++ b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx @@ -7,7 +7,27 @@ import { ConfirmSignIn } from '../../ConfirmSignIn/ConfirmSignIn'; import { ConfirmVerifyUser, VerifyUser } from '../../VerifyUser'; import { ConfirmResetPassword, ResetPassword } from '../../ResetPassword'; -export const defaultComponents = { +// use the very generic name of Components as this is a temporary interface and is not exported +interface Components { + Footer?: () => JSX.Element; + FormFields?: () => JSX.Element; + Header?: () => JSX.Element; +} + +export interface DefaultComponents extends Omit { + ConfirmSignIn?: Omit; + ConfirmSignUp?: Omit; + ConfirmResetPassword?: Omit; + ConfirmVerifyUser?: Omit; + ForceNewPassword?: Pick; + ResetPassword?: Omit; + SetupTOTP?: Omit; + SignIn?: Omit; + SignUp?: Components; + VerifyUser?: Omit; +} + +export const defaultComponents: DefaultComponents = { Header: (): JSX.Element => null, SignIn: { Header: SignIn.Header, diff --git a/packages/react/src/components/Authenticator/hooks/useCustomComponents/index.tsx b/packages/react/src/components/Authenticator/hooks/useCustomComponents/index.tsx index 31fbc7696d3..5fc53d7db2d 100644 --- a/packages/react/src/components/Authenticator/hooks/useCustomComponents/index.tsx +++ b/packages/react/src/components/Authenticator/hooks/useCustomComponents/index.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; -import { PartialDeep } from 'src/types'; -import { defaultComponents } from './defaultComponents'; +import { defaultComponents, DefaultComponents } from './defaultComponents'; export interface ComponentsProviderProps { - components?: PartialDeep; + components?: DefaultComponents; } export const CustomComponentsContext = diff --git a/packages/react/src/components/Geo/MapView/index.tsx b/packages/react/src/components/Geo/MapView/index.tsx index a5f05fced11..ea3347eb942 100644 --- a/packages/react/src/components/Geo/MapView/index.tsx +++ b/packages/react/src/components/Geo/MapView/index.tsx @@ -59,7 +59,7 @@ export const MapView = ({ setTransformRequest(() => amplifyTransformRequest); } })(); - }, []); + }, [amplifyConfig.geo?.amazon_location_service.region]); /** * The mapLib property is used by react-map-gl@v7 to override the underlying map library. The default library is diff --git a/packages/react/src/hooks/__tests__/useDataStore.test.ts b/packages/react/src/hooks/__tests__/useDataStore.test.ts index 2f63261207a..d304efe236f 100644 --- a/packages/react/src/hooks/__tests__/useDataStore.test.ts +++ b/packages/react/src/hooks/__tests__/useDataStore.test.ts @@ -1,6 +1,10 @@ import { DataStore, SortDirection } from '@aws-amplify/datastore'; import { renderHook } from '@testing-library/react-hooks'; -import { useDataStoreCollection, useDataStoreItem } from '../useDataStore'; +import { + useDataStoreBinding, + useDataStoreCollection, + useDataStoreItem, +} from '../useDataStore'; jest.mock('@aws-amplify/datastore'); @@ -8,6 +12,10 @@ const fakeModel: any = { id: 'FakeModel', }; +const nextFakeModel: any = { + id: 'nextFakeModel', +}; + const fakeItem = { fakeField: 'fake-value', }; @@ -35,10 +43,10 @@ describe('useDataStoreCollection', () => { expect(result.current.error).toBeUndefined(); }); - it('should set error if DataStore.query throws an error', async () => { + it('should set error if DataStore.observeQuery throws an error', async () => { const fakeError = new Error('Unexpected DataStore error'); const fakeDataStoreObserveQuery = jest.fn(() => ({ - subscribe: (onSuccess, onError) => { + subscribe: (_, onError) => { setTimeout(() => onError(fakeError), 500); return { unsubscribe: () => {} }; }, @@ -66,7 +74,7 @@ describe('useDataStoreCollection', () => { }); it('should return items on success', async () => { - const fakeItems = Array.from({ length: 100 }).map((f) => fakeItem); + const fakeItems = Array.from({ length: 100 }).map((_) => fakeItem); const fakePredicate = (p) => p.fieldName('eq', 'fake-value'); @@ -123,6 +131,32 @@ describe('useDataStoreCollection', () => { expect(unsubscribe).toHaveBeenCalled(); }); + + it('should only call DataStore.observeQuery once', () => { + const unsubscribe = jest.fn(); + const fakeDataStoreObserveQuery = jest.fn(() => ({ + subscribe: () => ({ unsubscribe }), + })); + + (DataStore.observeQuery as jest.Mock).mockImplementation( + fakeDataStoreObserveQuery + ); + + const { rerender } = renderHook( + (params) => useDataStoreCollection(params), + { + initialProps: { + model: fakeModel, + }, + } + ); + + expect(DataStore.observeQuery).toHaveBeenCalledTimes(1); + + rerender({ model: nextFakeModel }); + + expect(DataStore.observeQuery).toHaveBeenCalledTimes(1); + }); }); describe('useDataStoreItem', () => { @@ -193,4 +227,95 @@ describe('useDataStoreItem', () => { // Finally, check returned item expect(result.current.item).toBe(fakeItem); }); + + it('should only call DataStore.query once', async () => { + const fakeDataStoreQuery = jest.fn(() => Promise.resolve(fakeItem)); + (DataStore.query as jest.Mock).mockImplementation(fakeDataStoreQuery); + + const { rerender, waitForNextUpdate } = renderHook( + (props) => useDataStoreItem(props), + { + initialProps: { + model: fakeModel, + id: fakeId, + }, + } + ); + + // await fetch + await waitForNextUpdate(); + + expect(DataStore.query).toHaveBeenCalledTimes(1); + + rerender({ model: nextFakeModel, id: fakeId }); + + expect(DataStore.query).toHaveBeenCalledTimes(1); + }); +}); + +describe('useDataStoreBinding', () => { + afterEach(() => jest.clearAllMocks()); + + it('handles calls with type record in the happy path', async () => { + const fakeDataStoreQuery = jest.fn(() => Promise.resolve(fakeItem)); + (DataStore.query as jest.Mock).mockImplementation(fakeDataStoreQuery); + + const { result, waitForNextUpdate } = renderHook(() => + useDataStoreBinding({ + model: fakeModel, + id: fakeId, + type: 'record', + }) + ); + + // Check if DataStore.query was invoked with expected parameters + expect(fakeDataStoreQuery).toHaveBeenCalledWith(fakeModel, fakeId); + + // Trigger fetch + await waitForNextUpdate(); + + // Check if there's no errors and loading state is back to normal + expect(result.current.error).toBeUndefined(); + expect(result.current.isLoading).toBe(false); + + // Finally, check returned item + expect(result.current.item).toBe(fakeItem); + }); + + it('handles calls with type collection in the happy path', async () => { + const fakeItems = Array.from({ length: 100 }).map((_) => fakeItem); + + const fakePredicate = (p) => p.fieldName('eq', 'fake-value'); + + const fakePagination = { + limit: 100, + sort: (s) => s.rating(SortDirection.ASCENDING), + }; + + const fakeDataStoreObserveQuery = jest.fn(() => ({ + subscribe: (onSuccess) => { + setTimeout(() => onSuccess({ items: fakeItems }), 500); + return { unsubscribe: () => {} }; + }, + })); + + (DataStore.observeQuery as jest.Mock).mockImplementation( + fakeDataStoreObserveQuery + ); + + const { result, waitForNextUpdate } = renderHook(() => + useDataStoreBinding({ + model: fakeModel, + criteria: fakePredicate, + pagination: fakePagination, + type: 'collection', + }) + ); + + await waitForNextUpdate(); + + expect(result.current.isLoading).toBe(false); + expect(result.current.error).toBeUndefined(); + expect(result.current.items).toBe(fakeItems); + }); }); diff --git a/packages/react/src/hooks/useComposeRefsCallback.tsx b/packages/react/src/hooks/useComposeRefsCallback.tsx index 7aa88ff0236..da30b9e0d6b 100644 --- a/packages/react/src/hooks/useComposeRefsCallback.tsx +++ b/packages/react/src/hooks/useComposeRefsCallback.tsx @@ -5,23 +5,26 @@ export interface UseComposeRefsCallbackProps { internalRef: React.MutableRefObject; } -export type UseComposeRefsCallbackReturn = (node: RefType) => void; +export type UseComposeRefsCallback = (node: RefType) => void; /** * Creates ref callback to compose together external and internal refs */ -export const useComposeRefsCallback = ({ +export function useComposeRefsCallback({ externalRef, internalRef, -}: UseComposeRefsCallbackProps): UseComposeRefsCallbackReturn => { - return React.useCallback((node) => { - // Handle callback ref - if (typeof externalRef === 'function') { - externalRef(node); - } else if (externalRef != null) { - externalRef.current = node; - } +}: UseComposeRefsCallbackProps): UseComposeRefsCallback { + return React.useCallback( + (node) => { + // Handle callback ref + if (typeof externalRef === 'function') { + externalRef(node); + } else if (externalRef !== null) { + externalRef.current = node; + } - internalRef.current = node; - }, []); -}; + internalRef.current = node; + }, + [externalRef, internalRef] + ); +} diff --git a/packages/react/src/hooks/useControllable.ts b/packages/react/src/hooks/useControllable.ts index 555a5b577eb..8be324fb529 100644 --- a/packages/react/src/hooks/useControllable.ts +++ b/packages/react/src/hooks/useControllable.ts @@ -84,31 +84,38 @@ export function useControllable({ // The decision whether a component is controlled or uncontrolled is made on its first render and cannot be changed afterwards. const isControlled = React.useState(controlledValue !== undefined)[0]; - if (isDevelopment()) { - // Print a warning if the component switches between controlled and uncontrolled mode. - - React.useEffect(() => { - if (isControlled && handler === undefined) { - console.warn( - `${componentName}: You provided a \`${controlledProp}\` prop without an \`${changeHandler}\` handler. This will render a non-interactive component.` - ); - } - }, [handler, isControlled, componentName, changeHandler, controlledProp]); - - React.useEffect(() => { - const isControlledNow = controlledValue !== undefined; - if (isControlled !== isControlledNow) { - const initialMode = isControlled ? 'controlled' : 'uncontrolled'; - const modeNow = isControlledNow ? 'controlled' : 'uncontrolled'; - console.warn( - `${componentName}: A component tried to change ${initialMode} '${controlledProp}' property to be ${modeNow}. ` + - `This is not supported. Properties should not switch from ${initialMode} to ${modeNow} (or vice versa). ` + - `Decide between using a controlled or uncontrolled mode for the lifetime of the component. ` + - `More info: https://fb.me/react-controlled-components` - ); - } - }, [isControlled, controlledProp, componentName, controlledValue]); - } + const isDev = isDevelopment(); + + // Print a warning if the component switches between controlled and uncontrolled mode. + + React.useEffect(() => { + if (isDev && isControlled && handler === undefined) { + console.warn( + `${componentName}: You provided a \`${controlledProp}\` prop without an \`${changeHandler}\` handler. This will render a non-interactive component.` + ); + } + }, [ + handler, + isControlled, + componentName, + changeHandler, + controlledProp, + isDev, + ]); + + React.useEffect(() => { + const isControlledNow = controlledValue !== undefined; + if (isDev && isControlled !== isControlledNow) { + const initialMode = isControlled ? 'controlled' : 'uncontrolled'; + const modeNow = isControlledNow ? 'controlled' : 'uncontrolled'; + console.warn( + `${componentName}: A component tried to change ${initialMode} '${controlledProp}' property to be ${modeNow}. ` + + `This is not supported. Properties should not switch from ${initialMode} to ${modeNow} (or vice versa). ` + + `Decide between using a controlled or uncontrolled mode for the lifetime of the component. ` + + `More info: https://fb.me/react-controlled-components` + ); + } + }, [isControlled, controlledProp, componentName, controlledValue, isDev]); // This is the value that is used if the component is uncontrolled. const [valueState, setValue] = React.useState(defaultValue); diff --git a/packages/react/src/types/PartialDeep.ts b/packages/react/src/types/PartialDeep.ts deleted file mode 100644 index b3dae1c4093..00000000000 --- a/packages/react/src/types/PartialDeep.ts +++ /dev/null @@ -1,81 +0,0 @@ -// See: https://github.com/sindresorhus/type-fest/blob/main/source/primitive.d.ts -import { Primitive } from './Primitive'; - -/** -Create a type from another type with all keys and nested keys set to optional. - -Use-cases: -- Merging a default settings/config object with another object, the second object would be a deep partial of the default object. -- Mocking and testing complex entities, where populating an entire object with its keys would be redundant in terms of the mock or test. - -@example -``` -import {PartialDeep} from 'type-fest'; - -const settings: Settings = { - textEditor: { - fontSize: 14; - fontColor: '#000000'; - fontWeight: 400; - } - autocomplete: false; - autosave: true; -}; - -const applySavedSettings = (savedSettings: PartialDeep) => { - return {...settings, ...savedSettings}; -} - -settings = applySavedSettings({textEditor: {fontWeight: 500}}); -``` - -@category Utilities -*/ -export type PartialDeep = T extends Primitive - ? Partial - : T extends Map - ? PartialMapDeep - : T extends Set - ? PartialSetDeep - : T extends ReadonlyMap - ? PartialReadonlyMapDeep - : T extends ReadonlySet - ? PartialReadonlySetDeep - : T extends (...args: any[]) => unknown - ? T | undefined - : T extends object - ? T extends Array // Test for arrays/tuples, per https://github.com/microsoft/TypeScript/issues/35156 - ? ItemType[] extends T // Test for arrays (non-tuples) specifically - ? Array> // Recreate relevant array type to prevent eager evaluation of circular reference - : PartialObjectDeep // Tuples behave properly - : PartialObjectDeep - : unknown; - -/** -Same as `PartialDeep`, but accepts only `Map`s and as inputs. Internal helper for `PartialDeep`. -*/ -interface PartialMapDeep - extends Map, PartialDeep> {} - -/** -Same as `PartialDeep`, but accepts only `Set`s as inputs. Internal helper for `PartialDeep`. -*/ -interface PartialSetDeep extends Set> {} - -/** -Same as `PartialDeep`, but accepts only `ReadonlyMap`s as inputs. Internal helper for `PartialDeep`. -*/ -interface PartialReadonlyMapDeep - extends ReadonlyMap, PartialDeep> {} - -/** -Same as `PartialDeep`, but accepts only `ReadonlySet`s as inputs. Internal helper for `PartialDeep`. -*/ -interface PartialReadonlySetDeep extends ReadonlySet> {} - -/** -Same as `PartialDeep`, but accepts only `object`s as inputs. Internal helper for `PartialDeep`. -*/ -type PartialObjectDeep = { - [KeyType in keyof ObjectType]?: PartialDeep; -}; diff --git a/packages/react/src/types/Primitive.ts b/packages/react/src/types/Primitive.ts deleted file mode 100644 index 598e1300bf2..00000000000 --- a/packages/react/src/types/Primitive.ts +++ /dev/null @@ -1,14 +0,0 @@ -// See: https://github.com/sindresorhus/type-fest/blob/main/source/primitive.d.ts - -/** -Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive). -@category Basic -*/ -export type Primitive = - | null - | undefined - | string - | number - | boolean - | symbol - | bigint; diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts deleted file mode 100644 index bd8b7bf2cc6..00000000000 --- a/packages/react/src/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PartialDeep'; From ade008118f4dc5514ac89f156d7f5842792c24b0 Mon Sep 17 00:00:00 2001 From: jacoblogan Date: Wed, 13 Apr 2022 14:29:30 -0700 Subject: [PATCH 10/11] add a resolution for async (#1682) Co-authored-by: Jacob Logan --- package.json | 1 + yarn.lock | 11 ++--------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 08cf22df612..5b13669ebae 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "resolutions": { "ansi-regex": "5.0.1", "ansi-html": "0.0.8", + "async": "^3.2.2", "cssnano-preset-simple": "3.0.0", "fs-extra": "^10.0.0", "glob-parent": "^6.0.2", diff --git a/yarn.lock b/yarn.lock index 864f817d5a9..f93b89f7863 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7056,14 +7056,7 @@ async-each@^1.0.1: resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf" integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ== -async@^2.6.2: - version "2.6.3" - resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" - integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg== - dependencies: - lodash "^4.17.14" - -async@^3.2.0: +async@^2.6.2, async@^3.2.0, async@^3.2.2: version "3.2.3" resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9" integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g== @@ -15013,7 +15006,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@4.17.21, lodash@4.x, lodash@^4, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: +lodash@4.17.21, lodash@4.x, lodash@^4, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== From 1b78ac7c7ee96e91916ce45571613550d23578b9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 13 Apr 2022 15:15:59 -0700 Subject: [PATCH 11/11] Version Packages (#1677) Co-authored-by: github-actions[bot] --- .changeset/beige-insects-return.md | 5 ----- .changeset/neat-drinks-develop.md | 5 ----- .changeset/purple-flies-press.md | 12 ------------ .changeset/tender-parents-sniff.md | 5 ----- docs/package.json | 2 +- examples/angular/package.json | 2 +- examples/next/package.json | 2 +- examples/vue/package.json | 2 +- .../angular/projects/ui-angular/CHANGELOG.md | 7 +++++++ .../angular/projects/ui-angular/package.json | 4 ++-- packages/e2e/package.json | 2 +- packages/react/CHANGELOG.md | 17 +++++++++++++++++ packages/react/package.json | 4 ++-- packages/ui/CHANGELOG.md | 8 ++++++++ packages/ui/package.json | 2 +- packages/vue/CHANGELOG.md | 7 +++++++ packages/vue/package.json | 4 ++-- 17 files changed, 51 insertions(+), 39 deletions(-) delete mode 100644 .changeset/beige-insects-return.md delete mode 100644 .changeset/neat-drinks-develop.md delete mode 100644 .changeset/purple-flies-press.md delete mode 100644 .changeset/tender-parents-sniff.md diff --git a/.changeset/beige-insects-return.md b/.changeset/beige-insects-return.md deleted file mode 100644 index ef9ed404cee..00000000000 --- a/.changeset/beige-insects-return.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@aws-amplify/ui": patch ---- - -Type theme component design tokens diff --git a/.changeset/neat-drinks-develop.md b/.changeset/neat-drinks-develop.md deleted file mode 100644 index c886d48f2e9..00000000000 --- a/.changeset/neat-drinks-develop.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@aws-amplify/ui-react": patch ---- - -Remove hygen diff --git a/.changeset/purple-flies-press.md b/.changeset/purple-flies-press.md deleted file mode 100644 index 846afcfb21b..00000000000 --- a/.changeset/purple-flies-press.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -"@aws-amplify/ui-react": patch ---- - -chore(ui-react): updates to allow eslint react-hooks/rules-of-hooks set to error -- update eslint 'rules-of-hooks/exhaustive-deps' from 'warning' to 'error' -- turn linting on for entire ui-react package -- add missing or update dep arrays as needed to satisfy 'rules-of-hooks/exhaustive-deps' -- add DefaultFooter component in SignIn -- add DefaultHeader component in ConfirmSignUp -- add DefaultComponents interface and remove PartialDeep and related files -- add useAuthenticatorService and error throw in useAuthenticator to prevent conditional hook calls diff --git a/.changeset/tender-parents-sniff.md b/.changeset/tender-parents-sniff.md deleted file mode 100644 index c75f81070d2..00000000000 --- a/.changeset/tender-parents-sniff.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@aws-amplify/ui": patch ---- - -fix(authenticator): Ensure machine setup runs after user signs in, refreshes, then signs out. diff --git a/docs/package.json b/docs/package.json index 80e6139cf38..220016cfcc8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -16,7 +16,7 @@ "test": "$_ run build" }, "dependencies": { - "@aws-amplify/ui-react": "2.15.2", + "@aws-amplify/ui-react": "2.15.3", "@codesandbox/sandpack-react": "0.1.9", "@cucumber/gherkin": "^19.0.3", "@cucumber/messages": "^16.0.1", diff --git a/examples/angular/package.json b/examples/angular/package.json index 9e5739de833..b766a0889b7 100644 --- a/examples/angular/package.json +++ b/examples/angular/package.json @@ -21,7 +21,7 @@ "@angular/platform-browser": "~11.2.14", "@angular/platform-browser-dynamic": "~11.2.14", "@angular/router": "~11.2.14", - "@aws-amplify/ui-angular": "^2.3.9", + "@aws-amplify/ui-angular": "^2.3.10", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.11.3" diff --git a/examples/next/package.json b/examples/next/package.json index db8fed27a67..2d6adf7be1e 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -10,7 +10,7 @@ "lint": "next lint" }, "dependencies": { - "@aws-amplify/ui-react": "^2.15.2", + "@aws-amplify/ui-react": "^2.15.3", "@types/node": "^15.12.4", "@types/react": "^17.0.11", "next": "^11.1.3", diff --git a/examples/vue/package.json b/examples/vue/package.json index b3f730a896b..cf847ededd6 100644 --- a/examples/vue/package.json +++ b/examples/vue/package.json @@ -10,7 +10,7 @@ "start": "vite preview --port 3000" }, "dependencies": { - "@aws-amplify/ui-vue": "^2.3.9", + "@aws-amplify/ui-vue": "^2.3.10", "aws-amplify": "latest", "vue": "^3.0.5", "vue-router": "4" diff --git a/packages/angular/projects/ui-angular/CHANGELOG.md b/packages/angular/projects/ui-angular/CHANGELOG.md index 2191f8c0d28..831d9884cb3 100644 --- a/packages/angular/projects/ui-angular/CHANGELOG.md +++ b/packages/angular/projects/ui-angular/CHANGELOG.md @@ -1,5 +1,12 @@ # @aws-amplify/ui-angular +## 2.3.10 + +### Patch Changes + +- Updated dependencies [[`34a19a541`](https://github.com/aws-amplify/amplify-ui/commit/34a19a541b4b733a6688a38a435423e9c607e918), [`16dced7de`](https://github.com/aws-amplify/amplify-ui/commit/16dced7de5edc73c064b7ec4bddbefe586e98393)]: + - @aws-amplify/ui@3.6.3 + ## 2.3.9 ### Patch Changes diff --git a/packages/angular/projects/ui-angular/package.json b/packages/angular/projects/ui-angular/package.json index cecf7cd2225..9a14c939ea5 100644 --- a/packages/angular/projects/ui-angular/package.json +++ b/packages/angular/projects/ui-angular/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/ui-angular", - "version": "2.3.9", + "version": "2.3.10", "scripts": { "build": "yarn --cwd ../../ build", "dev": "yarn --cwd ../../ dev", @@ -19,7 +19,7 @@ }, "dependencies": { "@aws-amplify/ui-components": "^1.7.0", - "@aws-amplify/ui": "3.6.2", + "@aws-amplify/ui": "3.6.3", "@stencil/core": "2.8.0", "nanoid": "3.1.31", "qrcode": "1.5.0", diff --git a/packages/e2e/package.json b/packages/e2e/package.json index 923dd534845..49dd76a3eef 100644 --- a/packages/e2e/package.json +++ b/packages/e2e/package.json @@ -18,7 +18,7 @@ "stepDefinitions": "features" }, "devDependencies": { - "@aws-amplify/ui": "^3.6.2", + "@aws-amplify/ui": "^3.6.3", "aws-crt": "^1.10.6", "@testing-library/cypress": "^7.0.6", "@types/cypress-cucumber-preprocessor": "^4.0.0", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index f830ebe2a36..9e76301c17b 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,22 @@ # @aws-amplify/ui-react +## 2.15.3 + +### Patch Changes + +- [#1681](https://github.com/aws-amplify/amplify-ui/pull/1681) [`7beda1ea2`](https://github.com/aws-amplify/amplify-ui/commit/7beda1ea2e28f5de4beefa50f2032cef3e4870e1) Thanks [@jacoblogan](https://github.com/jacoblogan)! - Remove hygen + +* [#1666](https://github.com/aws-amplify/amplify-ui/pull/1666) [`ef5a70817`](https://github.com/aws-amplify/amplify-ui/commit/ef5a708170ff2b177e79a5e2d8c6ea2645ee453a) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui-react): updates to allow eslint react-hooks/rules-of-hooks set to error + - update eslint 'rules-of-hooks/exhaustive-deps' from 'warning' to 'error' + - turn linting on for entire ui-react package + - add missing or update dep arrays as needed to satisfy 'rules-of-hooks/exhaustive-deps' + - add DefaultFooter component in SignIn + - add DefaultHeader component in ConfirmSignUp + - add DefaultComponents interface and remove PartialDeep and related files + - add useAuthenticatorService and error throw in useAuthenticator to prevent conditional hook calls +* Updated dependencies [[`34a19a541`](https://github.com/aws-amplify/amplify-ui/commit/34a19a541b4b733a6688a38a435423e9c607e918), [`16dced7de`](https://github.com/aws-amplify/amplify-ui/commit/16dced7de5edc73c064b7ec4bddbefe586e98393)]: + - @aws-amplify/ui@3.6.3 + ## 2.15.2 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index a2f558ae32f..9adf1027f99 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/ui-react", - "version": "2.15.2", + "version": "2.15.3", "main": "dist/index.js", "module": "dist/esm/index.js", "exports": { @@ -56,7 +56,7 @@ "test:unit:watch": "jest --watch" }, "dependencies": { - "@aws-amplify/ui": "3.6.2", + "@aws-amplify/ui": "3.6.3", "@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9", "@radix-ui/react-accordion": "0.1.6", "@radix-ui/react-dropdown-menu": "0.1.6", diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index d23989db690..a1730e611d3 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @aws-amplify/ui +## 3.6.3 + +### Patch Changes + +- [#1673](https://github.com/aws-amplify/amplify-ui/pull/1673) [`34a19a541`](https://github.com/aws-amplify/amplify-ui/commit/34a19a541b4b733a6688a38a435423e9c607e918) Thanks [@reesscot](https://github.com/reesscot)! - Type theme component design tokens + +* [#1679](https://github.com/aws-amplify/amplify-ui/pull/1679) [`16dced7de`](https://github.com/aws-amplify/amplify-ui/commit/16dced7de5edc73c064b7ec4bddbefe586e98393) Thanks [@wlee221](https://github.com/wlee221)! - fix(authenticator): Ensure machine setup runs after user signs in, refreshes, then signs out. + ## 3.6.2 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 61e42400735..e71caec93c3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/ui", - "version": "3.6.2", + "version": "3.6.3", "main": "dist/index.js", "module": "dist/esm/index.js", "exports": { diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 8603355233b..e76091abe92 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -1,5 +1,12 @@ # @aws-amplify/ui-vue +## 2.3.10 + +### Patch Changes + +- Updated dependencies [[`34a19a541`](https://github.com/aws-amplify/amplify-ui/commit/34a19a541b4b733a6688a38a435423e9c607e918), [`16dced7de`](https://github.com/aws-amplify/amplify-ui/commit/16dced7de5edc73c064b7ec4bddbefe586e98393)]: + - @aws-amplify/ui@3.6.3 + ## 2.3.9 ### Patch Changes diff --git a/packages/vue/package.json b/packages/vue/package.json index d35b701561e..d07c53c06bc 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/ui-vue", - "version": "2.3.9", + "version": "2.3.10", "type": "module", "main": "dist/index.cjs", "module": "dist/index.js", @@ -34,7 +34,7 @@ "test:unit:watch": "jest --watch" }, "dependencies": { - "@aws-amplify/ui": "3.6.2", + "@aws-amplify/ui": "3.6.3", "@vueuse/core": "7.5.5", "@xstate/vue": "0.8.1", "qrcode": "1.5.0"