-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(deps) resolve yarn warnings regarding unmet peer dependencies for…
… Redwood projects (#8874) Running `yarn install` in a Redwood project results in a wall of information, most of which are warnings about peer dependencies and unmet dependency version requirements. We (framework authors) put up with it but that's not the case for developers — best case they find the output warnings annoying (and hopefully don't miss important errors); worst case it turns people away from using Redwood. Some, but not all, warnings are from Redwood packages. Many are upstream. At this time, there is no known negative impact from these dependency warnings — i.e. ideally they would all be resolved, but doing so has diminishing returns and is an ongoing maintenance consideration. This PR silences warnings that are considered acceptable and resolves those that are not. (Note: contributions are welcome for anyone who'd like to completely resolve these warnings!) Lastly, warnings != errors. This PR does not touch errors (if/when applicable). Here's what `yarn install` will look like with changes from this PR  Nice, right?!? 🤯 There are two cases of warnings handled by this PR. Case 1) [YN0002 - MISSING_PEER_DEPENDENCY](https://yarnpkg.com/advanced/error-codes#yn0002---missing_peer_dependency) This PR silences these warnings using yarnrc `logFilters`. Important: devs can still inspect these warnings via `yarn explain peer-requirements` or by managing their projects' `logFilters` config. Case 2) [YN0060 - INCOMPATIBLE_PEER_DEPENDENCY](https://yarnpkg.com/advanced/error-codes#yn0060---incompatible_peer_dependency) Because this can only be resolved via the parent package, this PR moves the necessary package code into the respective Redwood Package, thus properly fixing the incompatibility. This PR breaks a CSS import in the a11y Template `layout.tsx.a11yTemplate`, which is used when anyone generates a layout component with the `--skipLink` command option: `yarn redwood generate layout <name> --skipLink` ```diff // web/src/layouts/MyLayout/MyLayout.{jsx|tsx} import { SkipNavLink, SkipNavContent } from '@redwoodjs/router' -import '@reach/skip-nav/styles.css' +import '@redwoodjs/router/skip-nav.css' ``` - [x] Update redwoodjs/docs/a11y - [ ] Codemode for layout component import change (might not be necessary as find+replace would work just fine) --------- Co-authored-by: Dominic Saadi <[email protected]>
- Loading branch information
1 parent
5a52156
commit ed07722
Showing
9 changed files
with
209 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/cli/src/commands/generate/layout/templates/layout.tsx.a11yTemplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /** | ||
| * Original code source https://github.com/reach/reach-ui | ||
| * https://github.com/reach/reach-ui/blob/dev/packages/skip-nav/styles.css | ||
| */ | ||
|
|
||
| :root { | ||
| --reach-skip-nav: 1; | ||
| } | ||
|
|
||
| [data-reach-skip-nav-link] { | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| width: 1px; | ||
| margin: -1px; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| } | ||
|
|
||
| [data-reach-skip-nav-link]:focus { | ||
| padding: 1rem; | ||
| position: fixed; | ||
| top: 10px; | ||
| left: 10px; | ||
| background: white; | ||
| z-index: 1; | ||
| width: auto; | ||
| height: auto; | ||
| clip: auto; | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| // Original Code Source https://github.com/reach/reach-ui | ||
| // Moving here to resolve unmet peer dependency issues related to React 18 | ||
| // If resolved, should consider reverting to @reach/skip-nav | ||
| // See: https://github.com/reach/reach-ui/issues/916 | ||
|
|
||
| import * as React from 'react' | ||
|
|
||
| //////////////////////////////////////////////////////////////////////////////// | ||
|
|
||
| // Original Code Source @reach/polymorphic | ||
| // https://github.com/reach/reach-ui/blob/dev/packages/polymorphic/src/reach-polymorphic.ts | ||
|
|
||
| type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2 | ||
|
|
||
| type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent< | ||
| Merge< | ||
| E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, | ||
| OwnProps & { as?: E } | ||
| > | ||
| > | ||
|
|
||
| interface ForwardRefComponent< | ||
| IntrinsicElementString, | ||
| OwnProps = {} | ||
| /* | ||
| * Extends original type to ensure built in React types play nice with | ||
| * polymorphic components still e.g. `React.ElementRef` etc. | ||
| */ | ||
| > extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> { | ||
| /* | ||
| * When `as` prop is passed, use this overload. Merges original own props | ||
| * (without DOM props) and the inferred props from `as` element with the own | ||
| * props taking precendence. | ||
| * | ||
| * We explicitly avoid `React.ElementType` and manually narrow the prop types | ||
| * so that events are typed when using JSX.IntrinsicElements. | ||
| */ | ||
| <As = IntrinsicElementString>( | ||
| props: As extends '' | ||
| ? { as: keyof JSX.IntrinsicElements } | ||
| : As extends React.ComponentType<infer P> | ||
| ? Merge<P, OwnProps & { as: As }> | ||
| : As extends keyof JSX.IntrinsicElements | ||
| ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }> | ||
| : never | ||
| ): React.ReactElement | null | ||
| } | ||
|
|
||
| //////////////////////////////////////////////////////////////////////////////// | ||
|
|
||
| // Original Code Source @reach/skip-nav | ||
| // https://github.com/reach/reach-ui/blob/dev/packages/skip-nav/src/reach-skip-nav.tsx | ||
|
|
||
| // The user may want to provide their own ID (maybe there are multiple nav | ||
| // menus on a page a use might want to skip at various points in tabbing?). | ||
| const defaultId = 'reach-skip-nav' | ||
|
|
||
| /** | ||
| * SkipNavLink | ||
| * | ||
| * Renders a link that remains hidden until focused to skip to the main content. | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavlink | ||
| */ | ||
| const SkipNavLink = React.forwardRef(function SkipNavLink( | ||
| { as: Comp = 'a', children = 'Skip to content', contentId, ...props }, | ||
| forwardedRef | ||
| ) { | ||
| const id = contentId || defaultId | ||
| return ( | ||
| <Comp | ||
| {...props} | ||
| ref={forwardedRef} | ||
| href={`#${id}`} | ||
| // TODO: Remove in 1.0 (kept for back compat) | ||
| data-reach-skip-link="" | ||
| data-reach-skip-nav-link="" | ||
| > | ||
| {children} | ||
| </Comp> | ||
| ) | ||
| }) as ForwardRefComponent<'a', SkipNavLinkProps> | ||
|
|
||
| /** | ||
| * @see Docs https://reach.tech/skip-nav#skipnavlink-props | ||
| */ | ||
| interface SkipNavLinkProps { | ||
| /** | ||
| * Allows you to change the text for your preferred phrase or localization. | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavlink-children | ||
| */ | ||
| children?: React.ReactNode | ||
| /** | ||
| * An alternative ID for `SkipNavContent`. If used, the same value must be | ||
| * provided to the `id` prop in `SkipNavContent`. | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavlink-contentid | ||
| */ | ||
| contentId?: string | ||
| } | ||
|
|
||
| SkipNavLink.displayName = 'SkipNavLink' | ||
|
|
||
| //////////////////////////////////////////////////////////////////////////////// | ||
|
|
||
| /** | ||
| * SkipNavContent | ||
| * | ||
| * Renders a div as the target for the link. | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavcontent | ||
| */ | ||
| const SkipNavContent = React.forwardRef(function SkipNavContent( | ||
| { as: Comp = 'div', id: idProp, ...props }, | ||
| forwardedRef | ||
| ) { | ||
| const id = idProp || defaultId | ||
| return ( | ||
| <Comp | ||
| {...props} | ||
| ref={forwardedRef} | ||
| id={id} | ||
| data-reach-skip-nav-content="" | ||
| /> | ||
| ) | ||
| }) as ForwardRefComponent<'div', SkipNavContentProps> | ||
|
|
||
| /** | ||
| * @see Docs https://reach.tech/skip-nav#skipnavcontent-props | ||
| */ | ||
| interface SkipNavContentProps { | ||
| /** | ||
| * You can place the `SkipNavContent` element as a sibling to your main | ||
| * content or as a wrapper. | ||
| * | ||
| * Keep in mind it renders a `div`, so it may mess with your CSS depending on | ||
| * where it’s placed. | ||
| * | ||
| * @example | ||
| * <SkipNavContent /> | ||
| * <YourMainContent /> | ||
| * // vs. | ||
| * <SkipNavContent> | ||
| * <YourMainContent/> | ||
| * </SkipNavContent> | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavcontent-children | ||
| */ | ||
| children?: React.ReactNode | ||
| /** | ||
| * An alternative ID. If used, the same value must be provided to the | ||
| * `contentId` prop in `SkipNavLink`. | ||
| * | ||
| * @see Docs https://reach.tech/skip-nav#skipnavcontent-id | ||
| */ | ||
| id?: string | ||
| } | ||
|
|
||
| SkipNavContent.displayName = 'SkipNavContent' | ||
|
|
||
| //////////////////////////////////////////////////////////////////////////////// | ||
| // Exports | ||
|
|
||
| export type { SkipNavContentProps, SkipNavLinkProps } | ||
| export { SkipNavLink, SkipNavContent } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters