Skip to content

Commit

Permalink
feat: migrate to biome for linting & formatting (refinedev#5682)
Browse files Browse the repository at this point in the history
* feat: install biome, update scripts, remove eslint, prettier packages

* feat: add biome config, update gitignore

* feat: add vscode suggestion

* feat: update CI lint scripts

* fix: update lint:ci script and master push workflow

* feat: manually disable a11y rules

* feat: add biome-reporter script and lint rule reports

* docs: add biome section to contributing guide

* feat: remove eslint config

* feat: update extensions & contributing doc

* chore: update prettier config

* fix: cli snapshots

* chore: update .editorconfig
  • Loading branch information
BatuhanW authored Feb 26, 2024
1 parent 3311e59 commit 4d7bb1b
Show file tree
Hide file tree
Showing 82 changed files with 14,081 additions and 2,271 deletions.
34 changes: 34 additions & 0 deletions .biome/a11y/noAriaHiddenOnFocusable
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@

> [email protected] biome
> biome lint .

./packages/inferencer/src/inferencers/antd/code-viewer.tsx:73:25 lint/a11y/noAriaHiddenOnFocusable FIXABLE ━━━━━━━━━━

! Disallow aria-hidden="true" from being set on focusable elements.

71 │ >
72 │ <CodeHighlight code={code} />
> 73 │ <textarea
│ ^^^^^^^^^
> 74 │ ref={inputRef}
...
> 86 │ }}
> 87 │ />
│ ^^
88 │ <Button
89 │ style={{

i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.

i Unsafe fix: Remove the aria-hidden attribute from the element.

75 75 │ defaultValue={(code ?? "").replace(/\\n/g, "\r\n")}
76 76 │ id="code-input"
77 │ - ····························aria-hidden="true"
78 │ - ····························style={{
77 │ + ····························style={{
79 78 │ padding: 0,
80 79 │ margin: 0,


Checked 6953 file(s) in 519ms
27 changes: 27 additions & 0 deletions .biome/a11y/noAutofocus
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

> [email protected] biome
> biome lint .

./packages/core/src/components/pages/login/index.tsx:54:37 lint/a11y/noAutofocus FIXABLE ━━━━━━━━━━

! Avoid the autoFocus attribute.

52 │ spellCheck={false}
53 │ autoCapitalize="off"
> 54 │ autoFocus
│ ^^^^^^^^^
55 │ required
56 │ value={username}

i Unsafe fix: Remove the autoFocus attribute.

52 52 │ spellCheck={false}
53 53 │ autoCapitalize="off"
54 │ - ····································autoFocus
55 │ - ····································required
54 │ + ····································required
56 55 │ value={username}
57 56 │ onChange={(e) =>


Checked 6953 file(s) in 544ms
41 changes: 41 additions & 0 deletions .biome/a11y/noBlankTarget
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@

> [email protected] biome
> biome lint .

./documentation/src/components/blog/promotion/index.js:11:57 lint/a11y/noBlankTarget FIXABLE ━━━━━━━━━━

! Avoid using target="_blank" without rel="noreferrer".

9 │ <div>
10 │ {" "}
> 11 │ <a href="https://s.refine.dev/new-blog" target="_blank">
│ ^^^^^^^^^^^^^^^
12 │ refine.new
13 │ </a>{" "}

i Opening external links in new tabs without rel="noreferrer" is a security risk. See the explanation for more details.

i Safe fix: Add the rel="noreferrer" attribute.

11 │ ················<a·href="https://s.refine.dev/new-blog"·target="_blank"·rel="noreferrer">
│ +++++++++++++++++

./documentation/src/components/blog/promotion/index.js:40:63 lint/a11y/noBlankTarget FIXABLE ━━━━━━━━━━

! Avoid using target="_blank" without rel="noreferrer".

38 │ <br />
39 │ Try{" "}
> 40 │ <a href="https://github.com/refinedev/refine" target="_blank">
│ ^^^^^^^^^^^^^^^
41 │ refine
42 │ </a>{" "}

i Opening external links in new tabs without rel="noreferrer" is a security risk. See the explanation for more details.

i Safe fix: Add the rel="noreferrer" attribute.

40 │ ················<a·href="https://github.com/refinedev/refine"·target="_blank"·rel="noreferrer">
│ +++++++++++++++++

Checked 6953 file(s) in 534ms
101 changes: 101 additions & 0 deletions .biome/a11y/noNoninteractiveElementToInteractiveRole
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@

> [email protected] biome
> biome lint .

./documentation/src/refine-theme/common-tabs.tsx:73:21 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━

! The HTML element li is non-interactive and should not have an interactive role.

71 │ {tabValues.map(({ value, label, attributes }) => (
72 │ <li
> 73 │ role="tab"
│ ^^^^^^^^^^
74 │ tabIndex={selectedValue === value ? 0 : -1}
75 │ aria-selected={selectedValue === value}

i Replace li with a div or a span.

i Unsafe fix: Remove the role attribute.

71 71 │ {tabValues.map(({ value, label, attributes }) => (
72 72 │ <li
73 │ - ····················role="tab"
74 │ - ····················tabIndex={selectedValue·===·value·?·0·:·-1}
73 │ + ····················tabIndex={selectedValue·===·value·?·0·:·-1}
75 74 │ aria-selected={selectedValue === value}
76 75 │ key={value}


./examples/app-crm/src/routes/quotes/components/status-indicator/index.tsx:78:9 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━

! The HTML element svg is non-interactive and should not have an interactive role.

76 │ }) => (
77 │ <svg
> 78 │ role="button"
│ ^^^^^^^^^^^^^
79 │ onClick={() => props.onClick()}
80 │ className={cn(styles.button, styles.first)}

i Replace svg with a div or a span.

i Unsafe fix: Remove the role attribute.

76 76 │ }) => (
77 77 │ <svg
78 │ - ········role="button"
79 │ - ········onClick={()·=>·props.onClick()}
78 │ + ········onClick={()·=>·props.onClick()}
80 79 │ className={cn(styles.button, styles.first)}
81 80 │ xmlns="http://www.w3.org/2000/svg"


./examples/app-crm/src/routes/quotes/components/status-indicator/index.tsx:104:9 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━

! The HTML element svg is non-interactive and should not have an interactive role.

102 │ }) => (
103 │ <svg
> 104 │ role="button"
│ ^^^^^^^^^^^^^
105 │ onClick={() => props.onClick()}
106 │ className={cn(styles.button, styles.second)}

i Replace svg with a div or a span.

i Unsafe fix: Remove the role attribute.

102 102 │ }) => (
103 103 │ <svg
104 │ - ········role="button"
105 │ - ········onClick={()·=>·props.onClick()}
104 │ + ········onClick={()·=>·props.onClick()}
106 105 │ className={cn(styles.button, styles.second)}
107 106 │ xmlns="http://www.w3.org/2000/svg"


./examples/app-crm/src/routes/quotes/components/status-indicator/index.tsx:130:9 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━

! The HTML element svg is non-interactive and should not have an interactive role.

128 │ }) => (
129 │ <svg
> 130 │ role="button"
│ ^^^^^^^^^^^^^
131 │ onClick={() => props.onClick()}
132 │ className={cn(styles.button, styles.third)}

i Replace svg with a div or a span.

i Unsafe fix: Remove the role attribute.

128 128 │ }) => (
129 129 │ <svg
130 │ - ········role="button"
131 │ - ········onClick={()·=>·props.onClick()}
130 │ + ········onClick={()·=>·props.onClick()}
132 131 │ className={cn(styles.button, styles.third)}
133 132 │ xmlns="http://www.w3.org/2000/svg"


Checked 6953 file(s) in 516ms
73 changes: 73 additions & 0 deletions .biome/a11y/noNoninteractiveTabindex
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@

> [email protected] biome
> biome lint .

./examples/store/src/components/ui/Sidebar/Sidebar.tsx:45:13 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━

! The HTML element div is non-interactive. Do not use tabIndex.

43 │ ref={sidebarRef}
44 │ onKeyDown={onKeyDownSidebar}
> 45 │ tabIndex={1}
│ ^^^^^^^^^^^^
46 │ >
47 │ <div className="absolute inset-0 overflow-hidden">

i Adding non-interactive elements to the keyboard navigation flow can confuse users.

i Unsafe fix: Remove the tabIndex attribute.

43 43 │ ref={sidebarRef}
44 44 │ onKeyDown={onKeyDownSidebar}
45 │ - ············tabIndex={1}
46 45 │ >
47 46 │ <div className="absolute inset-0 overflow-hidden">


./documentation/src/refine-theme/common-codeblock-string.tsx:122:29 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━

! The HTML element pre is non-interactive. Do not use tabIndex.

120 │ {({ className, tokens, getLineProps, getTokenProps }) => (
121 │ <pre
> 122 │ tabIndex={0}
│ ^^^^^^^^^^^^
123 │ ref={wordWrap.codeBlockRef}
124 │ className={clsx(

i Adding non-interactive elements to the keyboard navigation flow can confuse users.

i Unsafe fix: Remove the tabIndex attribute.

120 120 │ {({ className, tokens, getLineProps, getTokenProps }) => (
121 121 │ <pre
122 │ - ····························tabIndex={0}
123 │ - ····························ref={wordWrap.codeBlockRef}
122 │ + ····························ref={wordWrap.codeBlockRef}
124 123 │ className={clsx(
125 124 │ className,


./examples/blog-react-aria/src/components/Header.tsx:19:13 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━

! The HTML element div is non-interactive. Do not use tabIndex.

17 │ display: "block",
18 │ }}
> 19 │ tabIndex={0}
│ ^^^^^^^^^^^^
20 │ >
21 │ <div

i Adding non-interactive elements to the keyboard navigation flow can confuse users.

i Unsafe fix: Remove the tabIndex attribute.

17 17 │ display: "block",
18 18 │ }}
19 │ - ············tabIndex={0}
20 19 │ >
21 20 │ <div


Checked 6953 file(s) in 536ms
30 changes: 30 additions & 0 deletions .biome/a11y/noPositiveTabindex
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

> [email protected] biome
> biome lint .

./examples/store/src/components/ui/Sidebar/Sidebar.tsx:45:22 lint/a11y/noPositiveTabindex FIXABLE ━━━━━━━━━━

! Avoid positive values for the tabIndex prop.

43 │ ref={sidebarRef}
44 │ onKeyDown={onKeyDownSidebar}
> 45 │ tabIndex={1}
│ ^^^
46 │ >
47 │ <div className="absolute inset-0 overflow-hidden">

i Elements with a positive tabIndex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.

i Use only 0 and -1 as tabIndex values. Avoid using tabIndex values greater than 0 and CSS properties that can change the order of focusable HTML elements.

i Unsafe fix: Replace the tableIndex prop value with 0.

43 43 │ ref={sidebarRef}
44 44 │ onKeyDown={onKeyDownSidebar}
45 │ - ············tabIndex={1}
45 │ + ············tabIndex="0"
46 46 │ >
47 47 │ <div className="absolute inset-0 overflow-hidden">


Checked 6953 file(s) in 540ms
Loading

0 comments on commit 4d7bb1b

Please sign in to comment.