diff --git a/.storybook/components/CodeExample/CodeExample.tsx b/.storybook/components/CodeExample/CodeExample.tsx index e290d5d8f87..fa2ecb92283 100644 --- a/.storybook/components/CodeExample/CodeExample.tsx +++ b/.storybook/components/CodeExample/CodeExample.tsx @@ -31,6 +31,7 @@ interface Props { const imports: Record = { react: React, 'styled-components': styled, + 'react-router-dom': require('react-router-dom'), '@toptal/picasso': require('@components'), '@toptal/picasso/lab': require('@components/lab'), '@toptal/picasso/utils': require('@components/utils'), diff --git a/package.json b/package.json index 481233c5c37..9192e0595f1 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "downshift": "^3.2.10", "notistack": "^0.8.9", "react-deprecate": "^0.1.0", + "react-router-dom": "^5.0.1", "react-truncate": "^2.4.0" }, "devDependencies": { @@ -80,6 +81,7 @@ "@types/puppeteer": "^1.12.4", "@types/react": "^16.8.19", "@types/react-dom": "^16.8.4", + "@types/react-router-dom": "^4.3.4", "@types/react-truncate": "^2.3.3", "@types/storybook__react": "^4.0.0", "@types/styled-components": "^4.1.15", diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 3ec2ed0bbdd..41241fe8785 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -27,13 +27,8 @@ interface Props extends StandardProps, AnchorHTMLAttributes { /** * The component used for the root node. * Either a string to use a DOM element or a component. - * - * Currently doesn't support `button` value because of broken typings, - * it's already fixed at `4.0.0-beta.2` - * Please, remove this comment after upgrade */ as?: ElementType - /** Either it's a regular link or an _action_ */ variant?: VariantType /** Indicates the order of receiving focus. If not set will not receive focus. */ diff --git a/src/components/Link/story/Routing.example.tsx b/src/components/Link/story/Routing.example.tsx new file mode 100644 index 00000000000..4eb98eec84a --- /dev/null +++ b/src/components/Link/story/Routing.example.tsx @@ -0,0 +1,67 @@ +import React, { ComponentProps } from 'react' +import { Link as PicassoLink } from '@toptal/picasso' +import { + Link as RouterLink, + Route, + Switch, + LinkProps as RouterLinkProps, + BrowserRouter +} from 'react-router-dom' + +type PicassoRouterLink = RouterLinkProps & ComponentProps + +// eslint-disable-next-line react/display-name +const Link = React.forwardRef( + function Link(props, ref) { + // eslint-disable-next-line react/jsx-props-no-spreading + return + } +) + +function Index() { + return

Home

+} + +function About() { + return

About

+} + +function Users() { + return

Users

+} + +const RoutingExample = () => { + return ( + +
+ + + + + + + +
+ + ) +} + +export default RoutingExample diff --git a/src/components/Link/story/index.jsx b/src/components/Link/story/index.jsx index f88acdae30c..2a631bb9589 100644 --- a/src/components/Link/story/index.jsx +++ b/src/components/Link/story/index.jsx @@ -18,3 +18,8 @@ page .addExample('Link/story/Underline.example.jsx', 'Underline') .addExample('Link/story/FontSize.example.jsx', 'Font Size') .addExample('Link/story/Invert.example.jsx', 'Invert') + .addExample('Link/story/Routing.example.tsx', { + title: 'Routing', + description: + 'An example how to use picasso Link with ReactRouter Link component' + }) // picasso-skip-visuals diff --git a/yarn.lock b/yarn.lock index 49a3aa8aeb6..3dd2951e7a3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1265,7 +1265,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4": +"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== @@ -1868,7 +1868,7 @@ dependencies: "@babel/runtime" "^7.2.0" -"@material-ui/lab@3.0.0-alpha.30": +"@material-ui/lab@^3.0.0-alpha.30": version "3.0.0-alpha.30" resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-3.0.0-alpha.30.tgz#c6c64d0ff2b28410a09e4009f3677499461f3df8" integrity sha512-d8IXbkQO92Ln7f/Tzy8Q5cLi/sMWH/Uz1xrOO5NKUgg42whwyCuoT9ErddDPFNQmPi9d1C7A5AG8ONjEAbAIyQ== @@ -3168,6 +3168,11 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/history@*": + version "4.7.2" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220" + integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q== + "@types/istanbul-lib-coverage@*": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -3256,6 +3261,23 @@ "@types/prop-types" "*" "@types/react" "*" +"@types/react-router-dom@^4.3.4": + version "4.3.4" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.4.tgz#63a7a8558129d2f4ff76e4bdd099bf4b98e25a0d" + integrity sha512-xrwaWHpnxKk/TTRe7pmoGy3E4SyF/ojFqNfFJacw7OLdfLXRvGfk4r/XePVaZNVfeJzL8fcnNilPN7xOdJ/vGw== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.0.3.tgz#855a1606e62de3f4d69ea34fb3c0e50e98e964d5" + integrity sha512-j2Gge5cvxca+5lK9wxovmGPgpVJMwjyu5lTA/Cd6fLGoPq7FXcUE1jFkEdxeyqGGz8VfHYSHCn5Lcn24BzaNKA== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-transition-group@^2.0.8": version "2.0.16" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.16.tgz#2dcb9e396ab385ee19c4af1c9caa469a14cd042f" @@ -7926,6 +7948,18 @@ highlight.js@~9.12.0: version "9.12.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" +history@^4.9.0: + version "4.9.0" + resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca" + integrity sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA== + dependencies: + "@babel/runtime" "^7.1.2" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^0.4.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -7938,7 +7972,7 @@ hoist-non-react-statics@^2.3.1: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" -hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" dependencies: @@ -10152,7 +10186,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" dependencies: @@ -10598,6 +10632,15 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" +mini-create-react-context@^0.3.0: + version "0.3.2" + resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189" + integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw== + dependencies: + "@babel/runtime" "^7.4.0" + gud "^1.0.0" + tiny-warning "^1.0.2" + mini-css-extract-plugin@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0" @@ -12081,6 +12124,13 @@ 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" +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30= + dependencies: + isarray "0.0.1" + path-type@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73" @@ -13260,6 +13310,35 @@ react-resize-detector@^4.0.5: raf-schd "^4.0.0" resize-observer-polyfill "^1.5.1" +react-router-dom@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be" + integrity sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA== + dependencies: + "@babel/runtime" "^7.1.2" + history "^4.9.0" + loose-envify "^1.3.1" + prop-types "^15.6.2" + react-router "5.0.1" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react-router@5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f" + integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg== + dependencies: + "@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.3.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" + react-source-render@^3.0.0-5: version "3.0.0-5" resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-3.0.0-5.tgz#0fa93493b3c2909f7c264bfc41db9957696e599b" @@ -13911,6 +13990,11 @@ resolve-global@1.0.0, resolve-global@^1.0.0: dependencies: global-dirs "^0.1.1" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + integrity sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg== + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -15362,11 +15446,16 @@ tiny-emitter@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" +tiny-invariant@^1.0.2: + version "1.0.6" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" + integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== + tiny-relative-date@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07" -tiny-warning@^1.0.2: +tiny-warning@^1.0.0, tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -15894,6 +15983,11 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0: dependencies: builtins "^1.0.3" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + integrity sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw== + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"