diff --git a/.eslintrc b/.eslintrc index d9a910ed..e8baaf02 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,11 +13,13 @@ }, "rules": { "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/naming-convention": "off", "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/no-explicit-any": "off", "import/no-cycle": "off", "import/prefer-default-export": "off", "jsx-a11y/accessible-emoji": "off", + "no-underscore-dangle": "off", "react/jsx-props-no-spreading": "off" }, "overrides": [ diff --git a/CHANGELOG.md b/CHANGELOG.md index 50761e41..f8e5beab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,30 @@ --> +## 0.1.0-alpha.4 (21 February, 2021) + +### Features + +- Added `Tab` component + +### Changes + +- Mixins on Flex, Grid, Header and Text have been aligned with the Box's behaviour, style props will overide the `sx` prop +- `getComponentStyles` renamed to `componentStylesMixin` +- `SxProps` renamed to `SxProp` +- Menus and Tooltips are now rendered inside Portals +- More components now have the `as` prop on their interfaces ([#38](https://github.com/spicy-ui/core/issues/38)) +- Added `color` types to Radio and Switch components + +### Bug Fixes + +- Fixed Menu in Stack having margin applied ([#39](https://github.com/spicy-ui/core/issues/39)) +- Fixed Tags `label` prop +- Fixed outline style on open Menus +- Fixed Stack not using `flexDir` and `flexDirection` ([#40](https://github.com/spicy-ui/core/issues/40)) +- Fixed Avatar images overflowing when a variant is set +- Fixed Badge line height issues + ## 0.1.0-alpha.3 (16 February, 2021) ### Features diff --git a/package-lock.json b/package-lock.json index 5e3469f2..104a34f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@spicy-ui/core", - "version": "0.1.0-alpha.3", + "version": "0.1.0-alpha.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2926,9 +2926,9 @@ } }, "@popperjs/core": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz", - "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==" + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.7.2.tgz", + "integrity": "sha512-3LC1/M2ZFcmDrSkD1byT/hZzoPehZkDucbDShLnZ+/Gwkr6CAxiQ2kWy1UtJeLGADe58hTWkx22YEHqjPGUKzw==" }, "@reach/router": { "version": "1.3.4", @@ -3014,7 +3014,8 @@ "@scarf/scarf": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz", - "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==" + "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==", + "dev": true }, "@sinonjs/commons": { "version": "1.8.2", @@ -3895,6 +3896,12 @@ "@types/unist": "*" } }, + "@types/history": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", + "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==", + "dev": true + }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -4095,6 +4102,27 @@ "@types/react": "*" } }, + "@types/react-router": { + "version": "5.1.11", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.11.tgz", + "integrity": "sha512-ofHbZMlp0Y2baOHgsWBQ4K3AttxY61bDMkwTiBOkPg7U6C/3UwwB5WaIx28JmSVi/eX3uFEMRo61BV22fDQIvg==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz", + "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==", + "dev": true, + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-syntax-highlighter": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz", @@ -4392,15 +4420,15 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.14.2.tgz", - "integrity": "sha512-mV9pmET4C2y2WlyHmD+Iun8SAEqkLahHGBkGqDVslHkmoj3VnxnGP4ANlwuxxfq1BsKdl/MPieDbohCEQgKrwA==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.1.tgz", + "integrity": "sha512-9LQRmOzBRI1iOdJorr4jEnQhadxK4c9R2aEAsm7WE/7dq8wkKD1suaV0S/JucTL8QlYUPU1y2yjqg+aGC0IQBQ==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.14.2", - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/typescript-estree": "4.14.2", + "@typescript-eslint/scope-manager": "4.15.1", + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/typescript-estree": "4.15.1", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" }, @@ -4546,33 +4574,32 @@ } }, "@typescript-eslint/scope-manager": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.14.2.tgz", - "integrity": "sha512-cuV9wMrzKm6yIuV48aTPfIeqErt5xceTheAgk70N1V4/2Ecj+fhl34iro/vIssJlb7XtzcaD07hWk7Jk0nKghg==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.15.1.tgz", + "integrity": "sha512-ibQrTFcAm7yG4C1iwpIYK7vDnFg+fKaZVfvyOm3sNsGAerKfwPVFtYft5EbjzByDJ4dj1WD8/34REJfw/9wdVA==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/visitor-keys": "4.14.2" + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/visitor-keys": "4.15.1" } }, "@typescript-eslint/types": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.14.2.tgz", - "integrity": "sha512-LltxawRW6wXy4Gck6ZKlBD05tCHQUj4KLn4iR69IyRiDHX3d3NCAhO+ix5OR2Q+q9bjCrHE/HKt+riZkd1At8Q==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.15.1.tgz", + "integrity": "sha512-iGsaUyWFyLz0mHfXhX4zO6P7O3sExQpBJ2dgXB0G5g/8PRVfBBsmQIc3r83ranEQTALLR3Vko/fnCIVqmH+mPw==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.14.2.tgz", - "integrity": "sha512-ESiFl8afXxt1dNj8ENEZT12p+jl9PqRur+Y19m0Z/SPikGL6rqq4e7Me60SU9a2M28uz48/8yct97VQYaGl0Vg==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.1.tgz", + "integrity": "sha512-z8MN3CicTEumrWAEB2e2CcoZa3KP9+SMYLIA2aM49XW3cWIaiVSOAGq30ffR5XHxRirqE90fgLw3e6WmNx5uNw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/visitor-keys": "4.14.2", + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/visitor-keys": "4.15.1", "debug": "^4.1.1", "globby": "^11.0.1", "is-glob": "^4.0.1", - "lodash": "^4.17.15", "semver": "^7.3.2", "tsutils": "^3.17.1" }, @@ -4653,12 +4680,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.14.2.tgz", - "integrity": "sha512-KBB+xLBxnBdTENs/rUgeUKO0UkPBRs2vD09oMRRIkj5BEN8PX1ToXV532desXfpQnZsYTyLLviS7JrPhdL154w==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.1.tgz", + "integrity": "sha512-tYzaTP9plooRJY8eNlpAewTOqtWW/4ff/5wBjNVaJ0S0wC4Gpq/zDVRTJa5bq2v1pCNQ08xxMCndcvR+h7lMww==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", + "@typescript-eslint/types": "4.15.1", "eslint-visitor-keys": "^2.0.0" } }, @@ -6286,6 +6313,16 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -8890,9 +8927,9 @@ } }, "eslint-plugin-jest": { - "version": "24.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz", - "integrity": "sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg==", + "version": "24.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.1.5.tgz", + "integrity": "sha512-FIP3lwC8EzEG+rOs1y96cOJmMVpdFNreoDJv29B5vIupVssRi8zrSY3QadogT0K3h1Y8TMxJ6ZSAzYUmFCp2hg==", "dev": true, "requires": { "@typescript-eslint/experimental-utils": "^4.0.1" @@ -9736,6 +9773,13 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "filelist": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", @@ -10092,9 +10136,9 @@ } }, "framer-motion": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-3.3.0.tgz", - "integrity": "sha512-bjUrwXfMJZ6D+HSMDiXbMGKmlWGnUux8HotWgORTZkdPTgKAndlRXjeC2ikCgNVo2ifmRvEla5ckP9JaZc7JKA==", + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-3.6.1.tgz", + "integrity": "sha512-sq3p8pKRyX3yi97X+ihALE1D1En2FjgEdBGk1Ng8J8MdycYesNdBK06LN875amFZ38umcRFdqFG1GQ0BEJ8eFQ==", "requires": { "@emotion/is-prop-valid": "^0.8.2", "framesync": "^5.0.0", @@ -10807,6 +10851,20 @@ "integrity": "sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==", "dev": true }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -14973,6 +15031,16 @@ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", "dev": true }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -15143,6 +15211,13 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "nan": { + "version": "2.14.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", + "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", + "dev": true, + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -16048,12 +16123,11 @@ } }, "polished": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.0.tgz", - "integrity": "sha512-y8IInTGHuwku7+O+wsJ7OOvNpJF7EPP/IDzF1uj9UJfEEKpMAfeq5gZ5UrtOksM7Jk4+hBAk6Ce8rFOOF4msZg==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.1.tgz", + "integrity": "sha512-4MZTrfPMPRLD7ac8b+2JZxei58zw6N1hFkdBDERif5Tlj19y3vPoPusrLG+mJIlPTGnUlKw3+yWz0BazvMx1vg==", "requires": { - "@babel/runtime": "^7.12.5", - "@scarf/scarf": "^1.1.0" + "@babel/runtime": "^7.12.5" } }, "popmotion": { @@ -17388,6 +17462,56 @@ "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==", "dev": true }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "dev": true, + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-sizeme": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.12.tgz", @@ -18013,6 +18137,12 @@ "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", "dev": true }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==", + "dev": true + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -19688,6 +19818,18 @@ "globrex": "^0.1.2" } }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==", + "dev": true + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", + "dev": true + }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", @@ -21012,6 +21154,12 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==", + "dev": true + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -21242,7 +21390,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "is-binary-path": { "version": "1.0.1", diff --git a/package.json b/package.json index 7a236787..31c5b7ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@spicy-ui/core", - "version": "0.1.0-alpha.3", + "version": "0.1.0-alpha.4", "description": "A themable and extensible React UI library, ready to use out of the box", "keywords": [ "react", @@ -43,13 +43,13 @@ "test": "tsdx test --passWithNoTests" }, "dependencies": { - "@popperjs/core": "^2.6.0", + "@popperjs/core": "^2.7.2", "@spicy-ui/styled-system": "0.0.1-alpha.3", "@types/styled-components": "^5.1.7", "deepmerge": "^4.2.2", "downshift": "^6.1.0", - "framer-motion": "^3.3.0", - "polished": "^4.1.0", + "framer-motion": "^3.6.1", + "polished": "^4.1.1", "react-fast-compare": "^3.2.0", "react-focus-lock": "^2.5.0", "react-icons": "^4.2.0", @@ -61,17 +61,19 @@ "@storybook/react": "^6.1.18", "@types/react": "^17.0.2", "@types/react-dom": "^17.0.1", + "@types/react-router-dom": "^5.1.7", "@typescript-eslint/eslint-plugin": "^4.15.1", "@typescript-eslint/parser": "^4.15.1", "eslint": "^7.20.0", "eslint-config-airbnb-typescript": "^12.3.1", - "eslint-plugin-jest": "^24.1.3", + "eslint-plugin-jest": "^24.1.5", "eslint-plugin-react-hooks": "^4.2.0", "prettier": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-json-view": "^1.21.1", "react-lorem-ipsum": "^1.4.9", + "react-router-dom": "^5.2.0", "react-uid": "^2.3.1", "rimraf": "^3.0.2", "styled-components": "^5.2.1", diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx index 06a748ba..ff103fc5 100644 --- a/src/components/Alert/Alert.stories.tsx +++ b/src/components/Alert/Alert.stories.tsx @@ -8,9 +8,9 @@ export default { component: Alert, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( - This is a alert + Hey you! Are you using Spicy UI yet? ); diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 85bdc23c..289f3e2d 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; import { ColorScales } from '../../theme'; -import { LiteralUnion } from '../../types'; +import { ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; export type AlertColors = ColorScales; -export interface AlertProps extends SxProps { - children?: React.ReactNode; +export interface AlertProps extends ChildrenProp, SxProp { /** Color of the alert. */ color?: LiteralUnion; } export const Alert = React.forwardRef((props, ref) => { - const { sx, children, color, ...rest } = props; + const { children, sx, color, ...rest } = props; const styles = useComponentStyles('Alert', props); diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index 1d089ba0..c577b029 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -8,7 +8,7 @@ export default { component: Avatar, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Sizes: Story = () => ( diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 45e5c55b..e2f62b78 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { HiOutlineUser } from 'react-icons/hi'; import { useImage } from '../../hooks'; -import { SxProps, useComponentStyles } from '../../system'; -import { LiteralUnion } from '../../types'; +import { SxProp, useComponentStyles } from '../../system'; +import { ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; import { Text } from '../Text'; @@ -38,8 +38,7 @@ export type AvatarSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; export type AvatarVariants = 'circle' | 'rounded' | 'square'; -export interface AvatarProps extends SxProps { - children?: React.ReactNode; +export interface AvatarProps extends ChildrenProp, SxProp { /** Function to overwrite getting avatar initials. */ getInitials?: (name: string) => string; /** The avatars fallback icon when the src is not loaded or specified. */ diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index dd2a7930..737db8da 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -7,7 +7,7 @@ export default { component: AvatarGroup, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( @@ -17,4 +17,6 @@ export const Simple: Story = (props) => ( ); -Simple.args = { max: 3 }; +Usage.args = { + max: 3, +}; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index c42a397d..7eb27f57 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,11 +1,11 @@ import { SpaceProps } from '@spicy-ui/styled-system'; import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; import { AvatarProps } from './Avatar'; -export interface AvatarGroupProps extends SxProps { - children?: React.ReactNode; +export interface AvatarGroupProps extends AsProp, ChildrenProp, SxProp { /** Border color of all avatars. */ borderColor?: string; /** Maximum number of avatars to show. */ diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index a9bd7398..ef0dd344 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -1,8 +1,7 @@ import { Meta, Story } from '@storybook/react'; import * as React from 'react'; import { uid } from 'react-uid'; -import { Badge, BadgeProps, BadgeVariants } from '..'; -import { BadgeColors } from './Badge'; +import { Avatar, Badge, BadgeColors, BadgeProps, BadgeVariants, Box, Flex, Text } from '..'; const badgeColors: BadgeColors[] = [ 'blueGray', @@ -38,7 +37,7 @@ export default { component: Badge, } as Meta; -export const Simple: Story = (props) => Success; +export const Usage: Story = (props) => Success; export const Colors: Story = (props) => ( @@ -70,3 +69,27 @@ export const Colors: Story = (props) => (
); + +export const Composition: Story = () => ( + + + + + Michael Scott + + New + + + Regional Manager + + +); + +export const FontSize: Story = () => ( + + Michael Scott + + New + + +); diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 62b98690..cafd7f31 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,16 +1,14 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; import { ColorScales } from '../../theme'; -import { LiteralUnion } from '../../types'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; export type BadgeColors = ColorScales; export type BadgeVariants = 'outline' | 'solid' | 'subtle'; -export interface BadgeProps extends SxProps { - children?: React.ReactNode; - as?: string | React.ComponentType; +export interface BadgeProps extends AsProp, ChildrenProp, SxProp { /** Color of the badge. */ color?: LiteralUnion; /** Variant of the badge. */ @@ -18,12 +16,12 @@ export interface BadgeProps extends SxProps { } export const Badge = React.forwardRef((props, ref) => { - const { children, sx, as, color, variant, ...rest } = props; + const { as, children, sx, color, variant, ...rest } = props; const styles = useComponentStyles('Badge', props); return ( - + {children} ); diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx index 5ca0117b..2540a8aa 100644 --- a/src/components/Box/Box.stories.tsx +++ b/src/components/Box/Box.stories.tsx @@ -7,4 +7,4 @@ export default { component: Box, } as Meta; -export const Simple: Story = (props) => A Box 📦; +export const Usage: Story = (props) => A Box 📦; diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 8c4308b2..50922536 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -1,8 +1,9 @@ import { shouldForwardProp } from '@spicy-ui/styled-system'; import styled from 'styled-components'; -import { allSystem, AllSystemProps, sxMixin, SxProps } from '../../system'; +import { allSystem, AllSystemProps, sxMixin, SxProp } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; -export interface BoxProps extends AllSystemProps, SxProps { +export interface BoxProps extends AsProp, ChildrenProp, AllSystemProps, SxProp { color?: any; } diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index b8c6a109..c750c49b 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -39,7 +39,7 @@ export default { component: Button, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Colors: Story = (props) => ( diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index d4a9af3c..472eb523 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,8 +1,8 @@ import { SpaceProps } from '@spicy-ui/styled-system'; import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; import { ColorScales } from '../../theme'; -import { LiteralUnion } from '../../types'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; import { Spinner } from '../Spinner'; @@ -31,9 +31,7 @@ export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg'; export type ButtonVariants = 'filled' | 'outlined' | 'ghost' | 'link' | 'unstyled'; -export interface ButtonProps extends React.ButtonHTMLAttributes, SxProps { - children?: React.ReactNode; - as?: string | React.ComponentType; +export interface ButtonProps extends React.ButtonHTMLAttributes, AsProp, ChildrenProp, SxProp { /** Space between the button icon and label. */ iconSpacing?: string; /** Icon shown before the button's label. */ @@ -64,9 +62,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes((props, ref) => { const { + as, children, sx, - as, iconSpacing, iconBefore, iconAfter, diff --git a/src/components/Button/IconButton.stories.tsx b/src/components/Button/IconButton.stories.tsx index 59b13bbd..6e70b4fb 100644 --- a/src/components/Button/IconButton.stories.tsx +++ b/src/components/Button/IconButton.stories.tsx @@ -8,7 +8,7 @@ export default { component: IconButton, } as Meta; -export const Simple: Story = (props) => } />; +export const Usage: Story = (props) => } />; export const Colors: Story = () => } />; diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index f7d05d09..8eac217d 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -35,12 +35,12 @@ export default { component: Checkbox, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isChecked, setIsChecked] = React.useState(false); return setIsChecked(Boolean(target.checked))} />; }; -Simple.args = { +Usage.args = { label: 'Checkbox', }; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index c2e80758..354fb5c8 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -32,17 +32,17 @@ export const Checkbox = React.forwardRef((props return ( {label && ( diff --git a/src/components/CloseButton/CloseButton.stories.tsx b/src/components/CloseButton/CloseButton.stories.tsx index 25df2c52..e3494284 100644 --- a/src/components/CloseButton/CloseButton.stories.tsx +++ b/src/components/CloseButton/CloseButton.stories.tsx @@ -7,4 +7,4 @@ export default { component: CloseButton, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; diff --git a/src/components/CloseButton/CloseButton.tsx b/src/components/CloseButton/CloseButton.tsx index b08cc586..025eccf7 100644 --- a/src/components/CloseButton/CloseButton.tsx +++ b/src/components/CloseButton/CloseButton.tsx @@ -1,16 +1,25 @@ import * as React from 'react'; import { HiX } from 'react-icons/hi'; +import { useComponentStyles } from '../../system'; import { IconButton, IconButtonProps } from '../Button'; -export interface CloseButtonProps extends IconButtonProps { +export interface CloseButtonProps extends Omit { + children?: never; /** Icon shown inside the close button. */ icon?: React.ReactElement; } export const CloseButton = React.forwardRef((props, ref) => { - const { icon = , ...rest } = props; + const { sx, icon = , ...rest } = props; - return ; + const styles = useComponentStyles('CloseButton', props); + + return ; }); +CloseButton.defaultProps = { + color: 'blackAlpha', + variant: 'ghost', +}; + CloseButton.displayName = 'CloseButton'; diff --git a/src/components/Code/Code.stories.tsx b/src/components/Code/Code.stories.tsx index f5bc47ad..635a3ec1 100644 --- a/src/components/Code/Code.stories.tsx +++ b/src/components/Code/Code.stories.tsx @@ -38,7 +38,7 @@ export default { component: Code, } as Meta; -export const Simple: Story = (props) => console.log('hello world!'); +export const Usage: Story = (props) => console.log('hello world!'); export const Colors: Story = (props) => (
diff --git a/src/components/Code/Code.tsx b/src/components/Code/Code.tsx index 447d42f8..dc89faf8 100644 --- a/src/components/Code/Code.tsx +++ b/src/components/Code/Code.tsx @@ -1,16 +1,14 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; import { ColorScales } from '../../theme'; -import { LiteralUnion } from '../../types'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; export type CodeColors = ColorScales; export type CodeVariants = 'outline' | 'solid' | 'subtle'; -export interface CodeProps extends SxProps { - children?: React.ReactNode; - as?: string | React.ComponentType; +export interface CodeProps extends AsProp, ChildrenProp, SxProp { /** Color of the code element. */ color?: LiteralUnion; /** Variant of the code element. */ @@ -18,12 +16,12 @@ export interface CodeProps extends SxProps { } export const Code = React.forwardRef((props, ref) => { - const { children, sx, as, color, variant, ...rest } = props; + const { as, children, sx, color, variant, ...rest } = props; const styles = useComponentStyles('Code', props); return ( - + {children} ); diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx index 16ad5fec..3e638ddf 100644 --- a/src/components/Container/Container.stories.tsx +++ b/src/components/Container/Container.stories.tsx @@ -7,7 +7,7 @@ export default { component: Container, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Container inner diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx index dc1d6011..91d611ab 100644 --- a/src/components/Container/Container.tsx +++ b/src/components/Container/Container.tsx @@ -3,14 +3,12 @@ import { useComponentStyles } from '../../system'; import { Box, BoxProps } from '../Box'; export interface ContainerProps extends BoxProps { - children?: React.ReactNode; - as?: string | React.ComponentType; /** If `true`, container will center its children. */ isCentered?: boolean; } export const Container = React.forwardRef((props, ref) => { - const { sx, as, children, isCentered, ...rest } = props; + const { as, children, sx, isCentered, ...rest } = props; const styles = useComponentStyles('Container', props); diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx index b5c8e4e2..336af2f1 100644 --- a/src/components/Divider/Divider.stories.tsx +++ b/src/components/Divider/Divider.stories.tsx @@ -7,7 +7,7 @@ export default { component: Divider, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Vertical: Story = () => ( diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 688ee0f1..9ebdf7eb 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; -import { LiteralUnion } from '../../types'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; export type DividerOrientation = 'horizontal' | 'vertical'; -export interface DividerProps extends SxProps { +export interface DividerProps extends AsProp, SxProp { /** Orientation of the divider. */ orientation?: LiteralUnion; } diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx index 2240aa30..0d5c141d 100644 --- a/src/components/Drawer/Drawer.stories.tsx +++ b/src/components/Drawer/Drawer.stories.tsx @@ -7,7 +7,7 @@ export default { component: Drawer, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); return ( diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx index ac8e5a17..1bd3fc25 100644 --- a/src/components/Drawer/Drawer.tsx +++ b/src/components/Drawer/Drawer.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import FocusLock from 'react-focus-lock'; import { useKeyPress } from '../../hooks'; -import { SxProps, useComponentStyles } from '../../system'; -import { LiteralUnion } from '../../types'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; import { Overlay } from '../Overlay'; @@ -43,7 +43,7 @@ const getAnchor = (anchor?: DrawerAnchor) => { } }; -export interface DrawerProps extends SxProps { +export interface DrawerProps extends AsProp, ChildrenProp, SxProp { isOpen: boolean; onClose?: () => void; anchor?: DrawerAnchor; @@ -55,8 +55,8 @@ export interface DrawerProps extends SxProps { export const Drawer: React.FC = (props) => { const { - sx, children, + sx, isOpen, onClose, anchor, diff --git a/src/components/Flex/Flex.stories.tsx b/src/components/Flex/Flex.stories.tsx index 1d3e58b3..3d08386e 100644 --- a/src/components/Flex/Flex.stories.tsx +++ b/src/components/Flex/Flex.stories.tsx @@ -7,7 +7,7 @@ export default { component: Flex, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Box 1 diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx index e099f5f8..d4b93bf4 100644 --- a/src/components/Flex/Flex.tsx +++ b/src/components/Flex/Flex.tsx @@ -5,7 +5,7 @@ import { BoxProps } from '../Box'; export interface FlexProps extends BoxProps, ExtendedFlexboxProps {} -export const Flex = styled.div.withConfig({ shouldForwardProp })(allSystem, extendedFlexbox, sxMixin); +export const Flex = styled.div.withConfig({ shouldForwardProp })(sxMixin, allSystem, extendedFlexbox); Flex.defaultProps = { display: 'flex', diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index 532c4fc7..30b29f3e 100644 --- a/src/components/Grid/Grid.stories.tsx +++ b/src/components/Grid/Grid.stories.tsx @@ -7,7 +7,7 @@ export default { component: Grid, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Box 1 @@ -29,7 +29,7 @@ export const Simple: Story = (props) => ( ); -Simple.args = { +Usage.args = { gap: 4, templateColumns: 'repeat(6, 1fr)', }; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 0428cfe3..349d8714 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -5,7 +5,7 @@ import { BoxProps } from '../Box'; export interface GridProps extends BoxProps, ExtendedGridProps {} -export const Grid = styled.div.withConfig({ shouldForwardProp })(allSystem, extendedGrid, sxMixin); +export const Grid = styled.div.withConfig({ shouldForwardProp })(sxMixin, allSystem, extendedGrid); Grid.defaultProps = { display: 'grid', diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx index 7baf059e..f7a16473 100644 --- a/src/components/Heading/Heading.stories.tsx +++ b/src/components/Heading/Heading.stories.tsx @@ -10,7 +10,7 @@ export default { component: Heading, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( The quick brown fox jumped over the lazy dog. ); diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx index e5f7ca24..b68b516e 100644 --- a/src/components/Heading/Heading.tsx +++ b/src/components/Heading/Heading.tsx @@ -1,21 +1,20 @@ import { shouldForwardProp } from '@spicy-ui/styled-system'; import styled from 'styled-components'; -import { allSystem, AllSystemProps, getComponentStyles, sxMixin, SxProps } from '../../system'; -import { LiteralUnion } from '../../types'; +import { allSystem, AllSystemProps, componentStylesMixin, sxMixin, SxProp } from '../../system'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; -export interface HeadingProps extends AllSystemProps, SxProps { +export interface HeadingProps extends AsProp, ChildrenProp, AllSystemProps, SxProp { color?: string; - children?: React.ReactNode; - /** Text variant. */ + /** Variant of the heading. */ variant?: LiteralUnion; } export const Heading = styled.p.withConfig({ shouldForwardProp })( - getComponentStyles('Heading'), - allSystem, + componentStylesMixin('Heading'), sxMixin, + allSystem, ); Heading.defaultProps = { diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx index ac6ae58f..9f29dbf1 100644 --- a/src/components/Image/Image.stories.tsx +++ b/src/components/Image/Image.stories.tsx @@ -7,8 +7,8 @@ export default { component: Image, } as Meta; -export const Simple: Story = (props) => ; -Simple.args = { +export const Usage: Story = (props) => ; +Usage.args = { src: 'https://source.unsplash.com/random/256x256?mountain', alt: 'Random unsplash image', }; diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index 2cb4a1b9..1359e9d4 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { useImage } from '../../hooks/useImage'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; import { Box } from '../Box'; -export interface ImageProps extends React.ImgHTMLAttributes, SxProps { +export interface ImageProps extends React.ImgHTMLAttributes, SxProp { /** Fallback component for the image. This is shown when the image is loading. */ fallback?: React.ReactElement; /** Fallback src image. If you intend to use this instead of a component, it's advised to use a data src. */ @@ -19,21 +19,11 @@ export const Image = React.forwardRef((props, ref) const styles = useComponentStyles('Image', props); - const shared = { - ref, - sx: styles, - ...rest, - }; - if (status !== 'loaded') { - if (fallback) { - return fallback; - } - - return ; + return fallback || ; } - return ; + return ; }); Image.displayName = 'Image'; diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index f18cfc0c..a0141204 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -8,7 +8,7 @@ export default { component: Input, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( action('onChange')(target.value)} /> ); diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 912bbaeb..e4e43657 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; -import { LiteralUnion } from '../../types'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; type InputSizes = 'xs' | 'sm' | 'md' | 'lg'; @@ -9,8 +9,9 @@ type InputVariants = 'outlined' | 'filled' | 'underlined' | 'unstyled'; export interface InputProps extends Omit, 'width' | 'height' | 'size'>, - SxProps { - as?: string | React.ComponentType; + AsProp, + ChildrenProp, + SxProp { /** If `true`, the input will be disabled. */ isDisabled?: boolean; /** If `true`, the input will be marked as invalid. */ @@ -26,12 +27,20 @@ export interface InputProps } export const Input = React.forwardRef((props, ref) => { - const { children, sx, isDisabled, isInvalid, isReadOnly, isRequired, size, variant, ...rest } = props; + const { as, children, sx, isDisabled, isInvalid, isReadOnly, isRequired, size, variant, ...rest } = props; const styles = useComponentStyles('Input', props); return ( - + {children} ); diff --git a/src/components/Kbd/Kbd.stories.tsx b/src/components/Kbd/Kbd.stories.tsx index d5116f75..6e418a36 100644 --- a/src/components/Kbd/Kbd.stories.tsx +++ b/src/components/Kbd/Kbd.stories.tsx @@ -1,13 +1,13 @@ import { Meta, Story } from '@storybook/react'; import * as React from 'react'; -import { Text, Kbd, KbdProps } from '..'; +import { Kbd, KbdProps, Text } from '..'; export default { title: 'Kbd', component: Kbd, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( ctrl + shift + v diff --git a/src/components/Kbd/Kbd.tsx b/src/components/Kbd/Kbd.tsx index 10fe2843..5cdcf029 100644 --- a/src/components/Kbd/Kbd.tsx +++ b/src/components/Kbd/Kbd.tsx @@ -1,19 +1,17 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; -export interface KbdProps extends SxProps { - children?: React.ReactNode; - as?: string | React.ComponentType; -} +export interface KbdProps extends AsProp, ChildrenProp, SxProp {} export const Kbd = React.forwardRef((props, ref) => { - const { children, sx, as, ...rest } = props; + const { as, children, sx, ...rest } = props; const styles = useComponentStyles('Kbd', props); return ( - + {children} ); diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index 76d483fc..8a0633fe 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -7,4 +7,4 @@ export default { component: Link, } as Meta; -export const Simple: Story = (props) => 🌶️ Spicy UI; +export const Usage: Story = (props) => 🌶️ Spicy UI; diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 2e2d2e22..5962f0d0 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -1,15 +1,19 @@ import { sfp } from '@spicy-ui/styled-system'; import * as React from 'react'; import styled from 'styled-components'; -import { getComponentStyles, sxMixin, SxProps } from '../../system'; +import { componentStylesMixin, sxMixin, SxProp } from '../../system'; import { ColorScales } from '../../theme'; -import { LiteralUnion } from '../../types'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; export type LinkColors = ColorScales; export type LinkUnderlineBehaviour = 'default' | 'none' | 'hover'; -export interface LinkProps extends SxProps, Partial> { +export interface LinkProps + extends Partial>, + AsProp, + ChildrenProp, + SxProp { /** Color of the link. */ color?: LiteralUnion; /** Hover color of the link. */ @@ -42,7 +46,7 @@ export const Link = styled.a })) .withConfig({ shouldForwardProp: sfp(['color', 'hoverColor', 'isDisabled', 'isExternal', 'underlineBehaviour']), - })(getComponentStyles('Link'), sxMixin); + })(componentStylesMixin('Link'), sxMixin); Link.defaultProps = { underlineBehaviour: 'hover', diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 08c82513..de2e1c31 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -3,19 +3,15 @@ import { Meta, Story } from '@storybook/react'; import * as React from 'react'; import { HiChevronDown } from 'react-icons/hi'; import { uid } from 'react-uid'; -import { Avatar, Box, Button, Flex, Menu, MenuDivider, MenuHeader, MenuItem, MenuProps, Text } from '..'; +import { Avatar, Box, Button, Flex, Menu, MenuDivider, MenuHeader, MenuItem, MenuProps, Stack, Text } from '..'; export default { title: 'Menu', component: Menu, - subcomponents: { - MenuHeader, - MenuDivider, - MenuItem, - }, + subcomponents: { MenuHeader, MenuDivider, MenuItem }, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( }>Open}> View @@ -59,7 +55,7 @@ export const InternalState: Story = (props) => ( ); export const CustomItems: Story = (props) => ( - <> + }> @@ -90,7 +86,6 @@ export const CustomItems: Story = (props) => ( 🏃‍♂️ - }>Menu}> {[ { text: 'Cut', kdb: 'Ctrl + X' }, @@ -107,5 +102,5 @@ export const CustomItems: Story = (props) => ( ))} - + ); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 13d58869..76f5c97d 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -1,9 +1,11 @@ import { motion, Variants } from 'framer-motion'; import * as React from 'react'; import styled from 'styled-components'; -import { sxMixin, SxProps, useComponentStyles } from '../../system'; +import { PopperProps, usePopper } from '../../hooks'; +import { sxMixin, SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { runIfFn } from '../../util'; -import { PopperProps, usePopper } from '../Popper'; +import { Portal } from '../Portal'; const Motion = styled(motion.div)(sxMixin); @@ -20,7 +22,7 @@ const variants: Variants = { }, }; -export interface MenuProps extends PopperProps, SxProps { +export interface MenuProps extends PopperProps, AsProp, ChildrenProp, SxProp { trigger: ((props: { isOpen: boolean }) => React.ReactElement) | React.ReactElement; children: ((props: { isOpen: boolean }) => React.ReactElement) | React.ReactNode; isFullWidth?: boolean; @@ -28,8 +30,8 @@ export interface MenuProps extends PopperProps, SxProps { export const Menu: React.FC = (props) => { const { - sx, children, + sx, trigger, closeOnBlur, closeOnEsc, @@ -57,17 +59,24 @@ export const Menu: React.FC = (props) => { return ( <> - {React.cloneElement(runIfFn(trigger, { isOpen }), { ...triggerProps, onClick: onToggle })} - - {runIfFn(children, { isOpen })} - + {React.cloneElement(runIfFn(trigger, { isOpen }), { + ...triggerProps, + onClick: onToggle, + onKeyDown: ({ key }: React.KeyboardEvent) => (key === 'Enter' ? onToggle : undefined), + })} + + + {runIfFn(children, { isOpen })} + + ); }; diff --git a/src/components/Menu/MenuDivider.tsx b/src/components/Menu/MenuDivider.tsx index b15f5353..44888db6 100644 --- a/src/components/Menu/MenuDivider.tsx +++ b/src/components/Menu/MenuDivider.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { getComponentStyles, sxMixin, SxProps } from '../../system'; +import { componentStylesMixin, sxMixin, SxProp } from '../../system'; -export const MenuDivider = styled.div(getComponentStyles('MenuDivider'), sxMixin); +export const MenuDivider = styled.div(componentStylesMixin('MenuDivider'), sxMixin); MenuDivider.displayName = 'MenuDivider'; diff --git a/src/components/Menu/MenuHeader.tsx b/src/components/Menu/MenuHeader.tsx index 8ae89c11..054ef456 100644 --- a/src/components/Menu/MenuHeader.tsx +++ b/src/components/Menu/MenuHeader.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { getComponentStyles, sxMixin, SxProps } from '../../system'; +import { componentStylesMixin, sxMixin, SxProp } from '../../system'; -export const MenuHeader = styled.div(getComponentStyles('MenuHeader'), sxMixin); +export const MenuHeader = styled.div(componentStylesMixin('MenuHeader'), sxMixin); MenuHeader.displayName = 'MenuHeader'; diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 786a7e9a..89bfaeef 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { getComponentStyles, sxMixin, SxProps } from '../../system'; +import { componentStylesMixin, sxMixin, SxProp } from '../../system'; -export const MenuItem = styled.div(getComponentStyles('MenuItem'), sxMixin); +export const MenuItem = styled.div(componentStylesMixin('MenuItem'), sxMixin); MenuItem.displayName = 'MenuItem'; diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 21e6a3ad..eae0889c 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/src/components/Modal/Modal.stories.tsx @@ -12,7 +12,7 @@ export default { subcomponents: { ModalHeader, ModalBody, ModalFooter, ModalCloseButton }, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); return ( @@ -35,7 +35,9 @@ export const Simple: Story = (props) => { ); }; -Simple.args = { closeOnOverlayClick: true }; +Usage.args = { + closeOnOverlayClick: true, +}; export const AsAlertDialog: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 38177257..8bdbfdee 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import FocusLock from 'react-focus-lock'; import { useKeyPress } from '../../hooks'; -import { SxProps, useComponentStyles } from '../../system'; -import { LiteralUnion } from '../../types'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp, LiteralUnion } from '../../types'; import { Box } from '../Box'; import { Overlay } from '../Overlay'; @@ -21,7 +21,7 @@ export type ModalSize = | '6xl' | 'full'; -export interface ModalProps extends SxProps { +export interface ModalProps extends AsProp, ChildrenProp, SxProp { isOpen: boolean; onClose?: () => void; size?: LiteralUnion; @@ -31,7 +31,7 @@ export interface ModalProps extends SxProps { } export const Modal: React.FC = (props) => { - const { sx, children, size, isOpen, closeOnEsc, closeOnOverlayClick, disableFocusTrap, onClose, ...rest } = props; + const { children, sx, isOpen, onClose, size, closeOnEsc, closeOnOverlayClick, disableFocusTrap, ...rest } = props; useKeyPress('Escape', () => { if (isOpen && closeOnEsc && onClose) { @@ -74,8 +74,8 @@ export const Modal: React.FC = (props) => { }; Modal.defaultProps = { - size: 'md', closeOnOverlayClick: true, + size: 'md', }; Modal.displayName = 'Modal'; diff --git a/src/components/Modal/ModalBody.tsx b/src/components/Modal/ModalBody.tsx index 49389c1a..8bade980 100644 --- a/src/components/Modal/ModalBody.tsx +++ b/src/components/Modal/ModalBody.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; -export interface ModalBodyProps extends SxProps {} +export interface ModalBodyProps extends AsProp, ChildrenProp, SxProp {} export const ModalBody: React.FC = (props) => { - const { sx, children, ...rest } = props; + const { children, sx, ...rest } = props; const styles = useComponentStyles('ModalBody', props); diff --git a/src/components/Modal/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton.tsx index d853b474..3451adcc 100644 --- a/src/components/Modal/ModalCloseButton.tsx +++ b/src/components/Modal/ModalCloseButton.tsx @@ -5,7 +5,7 @@ import { CloseButton, CloseButtonProps } from '../CloseButton'; export interface ModalCloseButtonProps extends CloseButtonProps {} export const ModalCloseButton: React.FC = (props) => { - const { sx, children, ...rest } = props; + const { sx, ...rest } = props; const styles = useComponentStyles('ModalCloseButton', props); diff --git a/src/components/Modal/ModalFooter.tsx b/src/components/Modal/ModalFooter.tsx index ba529543..a59e966b 100644 --- a/src/components/Modal/ModalFooter.tsx +++ b/src/components/Modal/ModalFooter.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; -export interface ModalFooterProps extends SxProps {} +export interface ModalFooterProps extends AsProp, ChildrenProp, SxProp {} export const ModalFooter: React.FC = (props) => { - const { sx, children, ...rest } = props; + const { children, sx, ...rest } = props; const styles = useComponentStyles('ModalFooter', props); diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx index 04368943..43a4b1a7 100644 --- a/src/components/Modal/ModalHeader.tsx +++ b/src/components/Modal/ModalHeader.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { SxProps, useComponentStyles } from '../../system'; +import { SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; -export interface ModalHeaderProps extends SxProps {} +export interface ModalHeaderProps extends AsProp, ChildrenProp, SxProp {} export const ModalHeader: React.FC = (props) => { - const { sx, children, ...rest } = props; + const { children, sx, ...rest } = props; const styles = useComponentStyles('ModalHeader', props); diff --git a/src/components/Overlay/Overlay.stories.tsx b/src/components/Overlay/Overlay.stories.tsx index a62d3cc0..dbb2a4dd 100644 --- a/src/components/Overlay/Overlay.stories.tsx +++ b/src/components/Overlay/Overlay.stories.tsx @@ -7,7 +7,7 @@ export default { component: Overlay, } as Meta; -export const Simple: Story = () => { +export const Usage: Story = () => { const [isOpen, setIsOpen] = React.useState(false); return ( diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx index 81804691..eb871350 100644 --- a/src/components/Overlay/Overlay.tsx +++ b/src/components/Overlay/Overlay.tsx @@ -1,7 +1,8 @@ import { motion, Variants } from 'framer-motion'; import * as React from 'react'; import styled from 'styled-components'; -import { sxMixin, SxProps, useComponentStyles } from '../../system'; +import { sxMixin, SxProp, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Portal } from '../Portal'; const Motion = styled(motion.div)(sxMixin); @@ -18,14 +19,13 @@ const variants: Variants = { transition: { duration: 0.2 }, }, }; -export interface OverlayProps extends SxProps { - children: React.ReactNode; +export interface OverlayProps extends AsProp, ChildrenProp, SxProp { isOpen: boolean; onClick?: React.MouseEventHandler; } export const Overlay: React.FC = (props) => { - const { sx, children, isOpen, onClick, ...rest } = props; + const { children, sx, isOpen, onClick, ...rest } = props; const style = useComponentStyles('Overlay', props); diff --git a/src/components/Popper/index.ts b/src/components/Popper/index.ts deleted file mode 100644 index 55ddf893..00000000 --- a/src/components/Popper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './usePopper'; diff --git a/src/components/Portal/Portal.stories.tsx b/src/components/Portal/Portal.stories.tsx index 9eef04b0..71e34a39 100644 --- a/src/components/Portal/Portal.stories.tsx +++ b/src/components/Portal/Portal.stories.tsx @@ -8,7 +8,7 @@ export default { component: Portal, } as Meta; -export const Simple: Story = () => ( +export const Usage: Story = () => ( I'm a box inside a portal! diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index 34a2eaea..9948bc07 100644 --- a/src/components/Portal/Portal.tsx +++ b/src/components/Portal/Portal.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import { ChildrenProp } from '../../types'; -export interface PortalProps { - children: React.ReactNode; -} +export interface PortalProps extends ChildrenProp {} export const Portal: React.FC = ({ children }) => { const [ready, setReady] = React.useState(false); diff --git a/src/components/Progress/Circular.tsx b/src/components/Progress/Circular.tsx index 4bfa9b37..2806bb5e 100644 --- a/src/components/Progress/Circular.tsx +++ b/src/components/Progress/Circular.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import styled from 'styled-components'; import { sxMixin, useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; const Svg = styled.svg(sxMixin); const Circle = styled.circle(sxMixin); -export interface CircularProgressProps { +export interface CircularProgressProps extends AsProp, ChildrenProp { angle?: number; - children?: React.ReactNode; color?: string; isCapRound?: boolean; isIndeterminate?: boolean; diff --git a/src/components/Progress/Horizontal.tsx b/src/components/Progress/Horizontal.tsx index 0c35d2a2..eb9180e2 100644 --- a/src/components/Progress/Horizontal.tsx +++ b/src/components/Progress/Horizontal.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { useComponentStyles } from '../../system'; +import { AsProp, ChildrenProp } from '../../types'; import { Box } from '../Box'; -import { ProgressAnimation, progressKeyframe } from './Animation'; +import { ProgressAnimation, progressKeyframe } from './styled'; -export interface HorizontalProgressProps { - children?: React.ReactNode; +export interface HorizontalProgressProps extends AsProp, ChildrenProp { color?: string; isCapRound?: boolean; isIndeterminate?: boolean; diff --git a/src/components/Progress/Progress.stories.tsx b/src/components/Progress/Progress.stories.tsx index 677d0609..9b1faafd 100644 --- a/src/components/Progress/Progress.stories.tsx +++ b/src/components/Progress/Progress.stories.tsx @@ -8,7 +8,9 @@ export default { } as Meta; export const Horizontal: Story = (props) => ; -Horizontal.args = { value: 43 }; +Horizontal.args = { + value: 43, +}; export const WithHorizontalInner: Story = (props) => { const { value = 0, min = 0, max = 100 } = props; @@ -22,7 +24,9 @@ export const WithHorizontalInner: Story = (props) => { ); }; -WithHorizontalInner.args = { value: 43 }; +WithHorizontalInner.args = { + value: 43, +}; export const Circular: Story = (props) => ; Circular.args = { diff --git a/src/components/Progress/Animation.tsx b/src/components/Progress/styled.tsx similarity index 100% rename from src/components/Progress/Animation.tsx rename to src/components/Progress/styled.tsx diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx index 8508a27f..9b808249 100644 --- a/src/components/Radio/Radio.stories.tsx +++ b/src/components/Radio/Radio.stories.tsx @@ -35,12 +35,12 @@ export default { component: Radio, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isChecked, setIsChecked] = React.useState(false); return setIsChecked(Boolean(target.checked))} />; }; -Simple.args = { +Usage.args = { label: 'Radio', }; diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx index ce66ee5c..f45d270c 100644 --- a/src/components/Radio/Radio.tsx +++ b/src/components/Radio/Radio.tsx @@ -1,16 +1,24 @@ import * as React from 'react'; import { useComponentStyles } from '../../system'; +import { ColorScales } from '../../theme'; import { LiteralUnion } from '../../types'; import { Box } from '../Box'; import { Text } from '../Text'; -type RadioSizes = 'xs' | 'sm' | 'md' | 'lg'; +export type RadioColors = ColorScales; + +export type RadioSizes = 'xs' | 'sm' | 'md' | 'lg'; export interface RadioProps extends Omit, 'width' | 'height' | 'size'> { + /** Radio label. */ label?: string; + /** If `true`, the radio will be disabled. */ isDisabled?: boolean; + /** If `true`, the radio will be marked as invalid. */ isInvalid?: boolean; - color?: string; + /** Color of the radio. */ + color?: LiteralUnion; + /** Size of the checkbox. */ size?: LiteralUnion; } @@ -24,17 +32,17 @@ export const Radio = React.forwardRef((props, ref) return ( {label && ( diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx index 2b1f06e1..0d6d05e3 100644 --- a/src/components/Select/Select.stories.tsx +++ b/src/components/Select/Select.stories.tsx @@ -25,7 +25,7 @@ export default { component: Select, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [value, setValue] = React.useState | null>(null); return