Upgrade ooni-components

ooni · Jun 29, 2023 · 43a3717 · 43a3717
1 parent 209030f
commit 43a3717
Show file tree

Hide file tree

Showing 18 changed files with 593 additions and 1,294 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "prettier.semi": false,
+  "prettier.singleQuote": true
+}
diff --git a/components/Badge.js b/components/Badge.js
@@ -38,7 +38,7 @@ const TestGroupBadge = ({ testName, ...props }) => {
 export const CategoryBadge = ({ categoryCode }) => {
   let IconComponent
   try {
-    IconComponent = require(`ooni-components/dist/icons/CategoryCode${categoryCode}`).default
+    IconComponent = require(`ooni-components/icons/CategoryCode${categoryCode}`).default
   } catch {
     IconComponent = null
   }

diff --git a/components/Footer.js b/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Flex, Box, Container, Link } from 'ooni-components'
-import ExplorerLogo from 'ooni-components/components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
+import ExplorerLogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
 import { useIntl } from 'react-intl'
 import dayjs from 'dayjs'
 

diff --git a/components/NavBar.js b/components/NavBar.js
@@ -4,7 +4,7 @@ import NLink from 'next/link'
 import styled from 'styled-components'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { getLocalisedLanguageName } from 'utils/i18nCountries'
-import ExplorerLogo from 'ooni-components/components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
+import ExplorerLogo from 'ooni-components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
 import {
   Link,
   Flex,
@@ -102,7 +102,9 @@ export const NavBar = ({color}) => {
         >
           <Box style={{zIndex: 1}}>
             <NLink href='/' passHref>
-              <Link><ExplorerLogo height='26px' /></Link>
+              <Link>
+                <ExplorerLogo height='26px' />
+              </Link>
             </NLink>
           </Box>
           <Box mt={[2, 0]}>

diff --git a/components/aggregation/mat/ChartHeader.js b/components/aggregation/mat/ChartHeader.js
@@ -1,5 +1,5 @@
 import { Box, Flex, Heading, Text } from 'ooni-components'
-import OONILogo from 'ooni-components/components/svgs/logos/OONI-HorizontalMonochrome.svg'
+import OONILogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochrome.svg'
 import { useIntl } from 'react-intl'
 
 import { colorMap } from './colorMap'

diff --git a/components/aggregation/mat/Form.js b/components/aggregation/mat/Form.js
@@ -21,12 +21,6 @@ import { useRouter } from 'next/router'
 const DAY_GRAIN_THRESHOLD_IN_MONTHS = 12
 const WEEK_GRAIN_THRESHOLD_IN_MONTHS = 36
 
-export const StyledLabel = styled(Label).attrs({
-  my: 2,
-  color: 'blue5',
-})`
-`
-
 const messages = defineMessages({
   'measurement_start_day': {
     id: 'MAT.Form.Label.AxisOption.measurement_start_day',
@@ -253,12 +247,9 @@ export const Form = ({ onSubmit, query }) => {
       <ConfirmationModal show={showConfirmation} onConfirm={onConfirm} onCancel={onCancel} />
       <Flex my={2} alignItems='center' flexDirection={['column', 'row']}>
         <Box width={[1, 3/12]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='Search.Sidebar.Country' />
-          </StyledLabel>
           <Controller
             render={({field}) => (
-              <Select {...field} width={1}>
+              <Select {...field} label={intl.formatMessage({id: 'Search.Sidebar.Country'})} width={1}>
                 <option value=''>{intl.formatMessage({id: 'MAT.Form.AllCountries'})}</option>
                 {sortedCountries.map((c, idx) =>(
                   <option key={idx} value={c.iso3166_alpha2}>{c.localisedCountryName}</option>
@@ -270,15 +261,13 @@ export const Form = ({ onSubmit, query }) => {
           />
         </Box>
         <Box width={[1, 1/12]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='Search.Sidebar.ASN' />
-          </StyledLabel>
           <Controller
             name='probe_asn'
             control={control}
             render={({field}) => (
               <Input
                 placeholder='AS1234'
+                label={intl.formatMessage({id: 'Search.Sidebar.ASN'})}
                 {...field}
               />
             )}
@@ -287,31 +276,27 @@ export const Form = ({ onSubmit, query }) => {
         <Box width={[1, 2/12]} mx={[0, 2]}>
           <Flex>
             <Box width={1} mx={[0, 2]}>
-              <StyledLabel>
-                <FormattedMessage id='Search.Sidebar.From' />
-              </StyledLabel>
               <Controller
                 name='since'
                 control={control}
                 render={({field}) => (
                   <Input
                     {...field}
+                    label={intl.formatMessage({id: 'Search.Sidebar.From'})}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
                   />
                 )}
               />
             </Box>
             <Box width={1} mx={[0, 2]}>
-              <StyledLabel>
-                <FormattedMessage id='Search.Sidebar.Until' />
-              </StyledLabel>
               <Controller
                 name='until'
                 control={control}
                 render={({field}) => (
                   <Input
                     {...field}
+                    label={intl.formatMessage({id: 'Search.Sidebar.Until'})}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
                   />
@@ -328,14 +313,11 @@ export const Form = ({ onSubmit, query }) => {
           }
         </Box>
         <Box width={[1, 2/12]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='MAT.Form.Label.TimeGrain' />
-          </StyledLabel>
           <Controller
             name='time_grain'
             control={control}
             render={({field}) => (
-              <Select {...field} width={1}>
+              <Select {...field} label={intl.formatMessage({id: 'MAT.Form.Label.TimeGrain'})} width={1}>
                 {timeGrainOptions.map((option, idx) => (
                   <option key={idx} value={option}>{intl.formatMessage(messages[option])}</option>
                 ))}
@@ -344,14 +326,11 @@ export const Form = ({ onSubmit, query }) => {
           />
         </Box>
         <Box width={[1, 2/12]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='MAT.Form.Label.XAxis' />
-          </StyledLabel>
           <Controller
             name='axis_x'
             control={control}
             render={({field}) => (
-              <Select {...field} width={1}>
+              <Select {...field} label={intl.formatMessage({id: 'MAT.Form.Label.XAxis'})} width={1}>
                 {xAxisOptionsFiltered.map((option, idx) => (
                   <option key={idx} value={option}>{option.length > 0 ? intl.formatMessage(messages[option]) : option}</option>
                 ))}
@@ -360,14 +339,11 @@ export const Form = ({ onSubmit, query }) => {
           />
         </Box>
         <Box width={[1, 2/12]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='MAT.Form.Label.YAxis' />
-          </StyledLabel>
           <Controller
             name='axis_y'
             control={control}
             render={({field}) => (
-              <Select {...field} width={1}>
+              <Select {...field} label={intl.formatMessage({id: 'MAT.Form.Label.YAxis'})} width={1}>
                 {yAxisOptionsFiltered.map((option, idx) => (
                   <option key={idx} value={option}>{option.length > 0 ? intl.formatMessage(messages[option]) : option}</option>
                 ))}
@@ -378,14 +354,11 @@ export const Form = ({ onSubmit, query }) => {
       </Flex>
       <Flex my={2} flexDirection={['column', 'row']}>
         <Box width={[1, 1/5]} mx={[0, 2]}>
-          <StyledLabel>
-            <FormattedMessage id='Search.Sidebar.TestName' />
-          </StyledLabel>
           <Controller
             name='test_name'
             control={control}
             render={({field}) => (
-              <Select {...field} width={1}>
+              <Select {...field} label={intl.formatMessage({id: 'Search.Sidebar.TestName'})} width={1}>
                 <TestNameOptions includeAllOption={false} />
               </Select>
             )}
@@ -394,44 +367,37 @@ export const Form = ({ onSubmit, query }) => {
         {showWebConnectivityFilters &&
           <>
             <Box width={[1, 1/5]} mx={[0, 2]}>
-              <StyledLabel>
-                <FormattedMessage id='Search.Sidebar.Domain' />
-              </StyledLabel>
               <Controller
                 name='domain'
                 control={control}
                 render={({field}) => (
                   <Input
+                    label={intl.formatMessage({id: 'Search.Sidebar.Domain'})}
                     placeholder='twitter.com'
                     {...field}
                   />
                 )}
               />
             </Box>
             <Box width={[1, 1/5]} mx={[0, 2]}>
-              <StyledLabel>
-                <FormattedMessage id='Search.Sidebar.Input' />
-              </StyledLabel>
               <Controller
                 name='input'
                 control={control}
                 render={({field}) => (
                   <Input
+                    label={intl.formatMessage({id: 'Search.Sidebar.Input'})}
                     placeholder='https://fbcdn.net/robots.txt'
                     {...field}
                   />
                 )}
               />
             </Box>
             <Box width={[1, 1/5]} mx={[0, 2]}>
-              <StyledLabel>
-                <FormattedMessage id='Search.Sidebar.Categories' />
-              </StyledLabel>
               <Controller
                 name='category_code'
                 control={control}
                 render={({field}) => (
-                  <Select {...field}>
+                  <Select label={intl.formatMessage({id: 'Search.Sidebar.Categories'})} {...field}>
                     <option value="">{intl.formatMessage({id: 'MAT.Form.All'})}</option>
                     {categoryCodes
                       .sort((a, b) => a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0)

diff --git a/components/as/Form.js b/components/as/Form.js
@@ -5,7 +5,6 @@ import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
 import { format } from 'date-fns'
 
-import { StyledLabel } from '../aggregation/mat/Form'
 import DateRangePicker from '../DateRangePicker'
 
 const Form = ({ onSubmit, since, until }) => {
@@ -52,27 +51,27 @@ const Form = ({ onSubmit, since, until }) => {
         <Box width={[1, 1/5]}>
           <Flex>
             <Box width={2/3} mr={3}>
-              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.From'})}</StyledLabel>
               <Controller
                 name='since'
                 control={control}
                 render={({field}) => (
                   <Input
                     {...field}
+                    label={intl.formatMessage({id: 'Search.Sidebar.From'})}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
                   />
                 )}
               />
             </Box>
             <Box width={2/3} mr={3}>
-              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.Until'})}</StyledLabel>
               <Controller
                 name='until'
                 control={control}
                 render={({field}) => (
                   <Input
                     {...field}
+                    label={intl.formatMessage({id: 'Search.Sidebar.Until'})}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
                   />

diff --git a/components/dashboard/Form.js b/components/dashboard/Form.js
@@ -7,7 +7,6 @@ import dayjs from 'services/dayjs'
 import { format } from 'date-fns'
 import { getLocalisedRegionName } from '../../utils/i18nCountries'
 
-import { StyledLabel } from '../aggregation/mat/Form'
 import DateRangePicker from '../DateRangePicker'
 
 const tomorrow = dayjs.utc().add(1, 'day').format('YYYY-MM-DD')
@@ -95,7 +94,7 @@ export const Form = ({ onChange, query, availableCountries }) => {
     <form>
       <Flex alignItems={['center']} flexDirection={['column', 'row']}>
         <Box width={[1, 1/4]} mr={3} sx={{ zIndex: 2 }}>
-          <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.Country'})}</StyledLabel>
+          {intl.formatMessage({id: 'Search.Sidebar.Country'})}
           {<Controller
             render={({field}) => (
               <MultiSelect
@@ -113,13 +112,13 @@ export const Form = ({ onChange, query, availableCountries }) => {
         <Box width={[1, 1/5]}>
           <Flex>
             <Box width={1/2} mr={3}>
-              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.From'})}</StyledLabel>
               <Controller
                 name='since'
                 control={control}
                 render={({field}) => (
                   <Input
                     {...field}
+                    label={intl.formatMessage({id: 'Search.Sidebar.From'})}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}
                     name={field.name}
@@ -130,12 +129,12 @@ export const Form = ({ onChange, query, availableCountries }) => {
               />
             </Box>
             <Box width={1/2} mr={3}>
-              <StyledLabel>{intl.formatMessage({id: 'Search.Sidebar.Until'})}</StyledLabel>
               <Controller
                 name='until'
                 control={control}
                 render={({field}) => (
                   <Input
+                    label={intl.formatMessage({id: 'Search.Sidebar.Until'})}
                     {...field}
                     onFocus={() => setShowDatePicker(true)}
                     onKeyDown={() => setShowDatePicker(false)}