Biome formatting

ooni · Mar 19, 2024 · fe91989 · fe91989
1 parent a437373
commit fe91989
Show file tree

Hide file tree

Showing 422 changed files with 8,914 additions and 8,471 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.prettierrc b/.prettierrc
diff --git a/Todo.md b/Todo.md
diff --git a/biome.json b/biome.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single"
+    }
+  },
+  "files": {
+    "ignore": [".next/", "scripts/", "public/"]
+  }
+}
diff --git a/components/Badge.js b/components/Badge.js
@@ -1,10 +1,10 @@
 import { Box, Flex, Text, theme } from 'ooni-components'
+import * as icons from 'ooni-components/icons'
 import PropTypes from 'prop-types'
 import { cloneElement } from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { getTestMetadata } from './utils'
-import * as icons from 'ooni-components/icons'
 
 // XXX replace what is inside of search/results-list.StyledResultTag
 export const Badge = styled(Box)`
@@ -15,7 +15,8 @@ export const Badge = styled(Box)`
   font-size: 12px;
   text-transform: uppercase;
   background-color: ${(props) => props.bg || props.theme.colors.gray8};
-  border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
+  border: ${(props) =>
+    props.borderColor ? `1px solid ${props.borderColor}` : 'none'};
   color: ${(props) => props.color || props.theme.colors.white};
   letter-spacing: 1.25px;
   font-weight: 600;
@@ -43,7 +44,11 @@ export const CategoryBadge = ({ categoryCode }) => {
   }
 
   return (
-    <Badge bg="#ffffff" borderColor={theme.colors.gray5} color={theme.colors.gray7}>
+    <Badge
+      bg="#ffffff"
+      borderColor={theme.colors.gray5}
+      color={theme.colors.gray7}
+    >
       <Flex sx={{ gap: 1 }} alignItems="center">
         <Box>
           <FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />

diff --git a/components/BlockText.js b/components/BlockText.js
@@ -1,14 +1,14 @@
-import styled from 'styled-components'
 import { Box } from 'ooni-components'
+import styled from 'styled-components'
 
 const BlockText = styled(Box)`
-  background-color: ${props => props.theme.colors.gray0};
-  border-left: 10px solid ${props => props.theme.colors.blue5};
+  background-color: ${(props) => props.theme.colors.gray0};
+  border-left: 10px solid ${(props) => props.theme.colors.blue5};
 `
 
 BlockText.defaultProps = {
   p: 3,
   fontSize: 1,
 }
 
-export default BlockText
+export default BlockText
diff --git a/components/CallToActionBox.js b/components/CallToActionBox.js
@@ -2,22 +2,18 @@ import NLink from 'next/link'
 import { Box, Button, Flex, Heading, Text } from 'ooni-components'
 import { FormattedMessage } from 'react-intl'
 
-const CallToActionBox = ({title, text}) => {
+const CallToActionBox = ({ title, text }) => {
   return (
-    <Flex my={4} bg='gray3' flexWrap='wrap'>
+    <Flex my={4} bg="gray3" flexWrap="wrap">
       <Box width={1} mx={4} my={2}>
-        <Heading h={4}>
-          {title}
-        </Heading>
-        <Text fontSize={2}>
-          {text}
-        </Text>
+        <Heading h={4}>{title}</Heading>
+        <Text fontSize={2}>{text}</Text>
       </Box>
-      <Flex alignItems='center' mx={4} my={4} flexDirection={['column', 'row']}>
+      <Flex alignItems="center" mx={4} my={4} flexDirection={['column', 'row']}>
         <Box mr={4} mb={[3, 0]}>
-          <NLink href='https://ooni.org/install'>
+          <NLink href="https://ooni.org/install">
             <Button>
-              <FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
+              <FormattedMessage id="Country.Overview.NoData.Button.InstallProbe" />
             </Button>
           </NLink>
         </Box>
@@ -26,4 +22,4 @@ const CallToActionBox = ({title, text}) => {
   )
 }
 
-export default CallToActionBox
+export default CallToActionBox
diff --git a/components/Chart.js b/components/Chart.js
@@ -1,4 +1,6 @@
-import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/GridChart'
+import GridChart, {
+  prepareDataForGridChart,
+} from 'components/aggregation/mat/GridChart'
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { DetailsBox } from 'components/measurement/DetailsBox'
 import NLink from 'next/link'
@@ -23,51 +25,69 @@ export const MATLink = ({ query }) => {
   const showMATButton = !Array.isArray(query.test_name)
 
   return (
-    <Flex mt={3} justifyContent='space-between' alignItems='center' flexWrap="wrap" sx={{gap: 3}}>
+    <Flex
+      mt={3}
+      justifyContent="space-between"
+      alignItems="center"
+      flexWrap="wrap"
+      sx={{ gap: 3 }}
+    >
       <Box>
-        {showMATButton &&
+        {showMATButton && (
           <NLink href={`/chart/mat?${queryToSearchParams}`}>
             <StyledHollowButton>
-              {intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} <MdBarChart size={20} style={{verticalAlign: 'bottom'}} />
+              {intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '}
+              <MdBarChart size={20} style={{ verticalAlign: 'bottom' }} />
             </StyledHollowButton>
           </NLink>
-        }
+        )}
       </Box>
-      <Flex sx={{gap: 3}} flexWrap="wrap">
+      <Flex sx={{ gap: 3 }} flexWrap="wrap">
         <NLink href={apiUrl}>
-          {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
+          {intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '}
+          <MdOutlineFileDownload
+            style={{ verticalAlign: 'bottom' }}
+            size={20}
+          />
         </NLink>
         <NLink href={`${apiUrl}&format=CSV`}>
-          {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
+          {intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '}
+          <MdOutlineFileDownload
+            style={{ verticalAlign: 'bottom' }}
+            size={20}
+          />
         </NLink>
       </Flex>
     </Flex>
   )
 }
 
-const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, setState}) {
+const Chart = React.memo(function Chart({
+  testGroup = null,
+  queryParams = {},
+  setState,
+}) {
   const apiQuery = useMemo(() => {
     const qs = new URLSearchParams(queryParams).toString()
     return qs
   }, [queryParams])
 
-  const { data, error } = useSWR(
-    apiQuery,
-    MATFetcher,
-    swrOptions
-  )
+  const { data, error } = useSWR(apiQuery, MATFetcher, swrOptions)
 
   const [chartData, rowKeys, rowLabels] = useMemo(() => {
     if (!data) {
       return [null, 0]
     }
-    let chartData = data.data
+    const chartData = data.data
     const graphQuery = queryParams
-    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery)
+    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(
+      chartData,
+      graphQuery,
+    )
     return [reshapedData, rowKeys, rowLabels]
   }, [data, queryParams])
 
-  useEffect(()=> {
+  useEffect(() => {
     if (setState && data?.data) setState(data.data)
   }, [data, setState])
 
@@ -76,9 +96,9 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
   return (
     // <MATContextProvider key={name} test_name={name} {...queryParams}>
     <MATContextProvider {...queryParams}>
-      <Flex flexDirection='column'>
+      <Flex flexDirection="column">
         <Box>
-          {(!chartData && !error) ? (
+          {!chartData && !error ? (
             <FormattedMessage id="General.Loading" />
           ) : (
             <>
@@ -91,16 +111,21 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
             </>
           )}
         </Box>
-        {error &&
-          <DetailsBox collapsed={false} content={<>
-            <details>
-              <summary><span>Error: {error.message}</span></summary>
-              <Box as='pre'>
-                {JSON.stringify(error, null, 2)}
-              </Box>
-            </details>
-          </>}/>
-        }
+        {error && (
+          <DetailsBox
+            collapsed={false}
+            content={
+              <>
+                <details>
+                  <summary>
+                    <span>Error: {error.message}</span>
+                  </summary>
+                  <Box as="pre">{JSON.stringify(error, null, 2)}</Box>
+                </details>
+              </>
+            }
+          />
+        )}
       </Flex>
     </MATContextProvider>
   )

diff --git a/components/CollapseTrigger.js b/components/CollapseTrigger.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import styled from 'styled-components'
 import { MdExpandLess } from 'react-icons/md'
+import styled from 'styled-components'
 
 export const CollapseTrigger = styled(MdExpandLess)`
   cursor: pointer;
-  background-color: ${props => props.$bg || '#ffffff'};
+  background-color: ${(props) => props.$bg || '#ffffff'};
   border-radius: 50%;
-  transform: ${props => props.$open ? 'rotate(0deg)': 'rotate(180deg)'};
+  transform: ${(props) => (props.$open ? 'rotate(0deg)' : 'rotate(180deg)')};
   transition: transform 0.1s linear;
 `