Skip to content

Commit

Permalink
Merge pull request #947 from ooni/tailwind
Browse files Browse the repository at this point in the history
Replace styled-components with tailwind, upgrade ooni-components, format code with biome
  • Loading branch information
majakomel authored Aug 7, 2024
2 parents 6ccb162 + 6ef12a2 commit 93f2f03
Show file tree
Hide file tree
Showing 424 changed files with 9,721 additions and 12,514 deletions.
30 changes: 0 additions & 30 deletions .editorconfig

This file was deleted.

15 changes: 0 additions & 15 deletions .eslintrc.json

This file was deleted.

5 changes: 0 additions & 5 deletions .prettierrc

This file was deleted.

25 changes: 25 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -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/"]
}
}
48 changes: 22 additions & 26 deletions components/Badge.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,31 @@
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 { twMerge } from 'tailwind-merge'
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)`
display: inline-block;
border-radius: 4px;
padding: 4px 8px;
line-height: 16px;
font-size: 12px;
text-transform: uppercase;
background-color: ${(props) => props.bg || props.theme.colors.gray8};
border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
color: ${(props) => props.color || props.theme.colors.white};
letter-spacing: 1.25px;
font-weight: 600;
`
export const Badge = ({ className, ...props }) => {
return (
<div
className={twMerge(
'inline-block rounded py-1 px-2 leading-4 text-xs uppercase bg-gray-800 text-white font-semibold tracking-wide',
className,
)}
{...props}
/>
)
}

const TestGroupBadge = ({ testName, ...props }) => {
const { icon, groupName, color } = getTestMetadata(testName)

return (
<Badge bg={color} color="white" {...props}>
<Flex sx={{ gap: 1 }} alignItems="center">
<Text>{groupName}</Text>
<Badge style={{ backgroundColor: color }} {...props}>
<div className="flex gap-1 items-center">
<div>{groupName}</div>
{cloneElement(icon, { size: 12 })}
</Flex>
</div>
</Badge>
)
}
Expand All @@ -43,13 +39,13 @@ export const CategoryBadge = ({ categoryCode }) => {
}

return (
<Badge bg="#ffffff" borderColor={theme.colors.gray5} color={theme.colors.gray7}>
<Flex sx={{ gap: 1 }} alignItems="center">
<Box>
<Badge className="bg-white border border-gray-500 text-gray-700">
<div className="flex gap-1 items-center">
<div>
<FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
</Box>
</div>
{IconComponent && <IconComponent size={15} />}
</Flex>
</div>
</Badge>
)
}
Expand Down
20 changes: 7 additions & 13 deletions components/BlockText.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import styled from 'styled-components'
import { Box } from 'ooni-components'
const BlockText = ({ className, ...props }) => (
<div
className={`bg-gray-50 border-s-[10px] text-base border-blue-500 p-3 font-base ${className}`}
{...props}
/>
)

const BlockText = styled(Box)`
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
13 changes: 1 addition & 12 deletions components/ButtonSpinner.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,5 @@
import { ImSpinner8 } from 'react-icons/im'
import { keyframes, styled } from 'styled-components'

const spin = keyframes`
to {
transform: rotate(360deg);
}
`

const StyledSpinner = styled(ImSpinner8)`
animation: ${spin} 1s linear infinite;
`

const ButtonSpinner = () => <StyledSpinner />
const ButtonSpinner = () => <ImSpinner8 className="animate-spin" />

export default ButtonSpinner
33 changes: 14 additions & 19 deletions components/CallToActionBox.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
import NLink from 'next/link'
import { Box, Button, Flex, Heading, Text } from 'ooni-components'
import Link from 'next/link'
import { FormattedMessage } from 'react-intl'

const CallToActionBox = ({title, text}) => {
const CallToActionBox = ({ title, text }) => {
return (
<Flex p={3} bg='gray3' flexWrap='wrap' minHeight='180px'>
<Box mb={2}>
<Heading h={4} m={0}>
{title}
</Heading>
<Text fontSize={1}>
{text}
</Text>
</Box>
<NLink href='https://ooni.org/install'>
<Button>
<FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
</Button>
</NLink>
</Flex>
<div className="flex p-4 bg-gray-300 flex-wrap min-h-[180px]">
<div className="mb-2">
<h4>{title}</h4>
<div className="text-xl">{text}</div>
</div>
<Link href="https://ooni.org/install">
<button type="button" className="btn btn-primary">
<FormattedMessage id="Country.Overview.NoData.Button.InstallProbe" />
</button>
</Link>
</div>
)
}

export default CallToActionBox
export default CallToActionBox
125 changes: 66 additions & 59 deletions components/Chart.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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'
import { Box, Flex } from 'ooni-components'
import React, { useEffect, useMemo } from 'react'
import Link from 'next/link'
import { memo, useEffect, useMemo } from 'react'
import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md'
import { FormattedMessage, useIntl } from 'react-intl'
import { MATFetcher } from 'services/fetchers'
import useSWR from 'swr'
import { StyledHollowButton } from './SharedStyledComponents'

const swrOptions = {
revalidateOnFocus: false,
Expand All @@ -23,51 +23,55 @@ 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}}>
<Box>
{showMATButton &&
<NLink href={`/chart/mat?${queryToSearchParams}`}>
<StyledHollowButton>
{intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} <MdBarChart size={20} style={{verticalAlign: 'bottom'}} />
</StyledHollowButton>
</NLink>
}
</Box>
<Flex sx={{gap: 3}} flexWrap="wrap">
<NLink href={apiUrl}>
{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} />
</NLink>
</Flex>
</Flex>
<div className="flex mt-4 justify-between items-center flex-wrap gap-4">
{showMATButton && (
<Link href={`/chart/mat?${queryToSearchParams}`}>
<button type="button" className="btn btn-primary-hollow">
{intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '}
<MdBarChart size={20} style={{ verticalAlign: 'bottom' }} />
</button>
</Link>
)}
<div className="flex gap-4">
<Link className="inline-flex" href={apiUrl}>
{intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '}
<MdOutlineFileDownload size={20} />
</Link>
<Link className="inline-flex" href={`${apiUrl}&format=CSV`}>
{intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '}
<MdOutlineFileDownload size={20} />
</Link>
</div>
</div>
)
}

const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, setState}) {
const Chart = 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])

Expand All @@ -76,32 +80,35 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
return (
// <MATContextProvider key={name} test_name={name} {...queryParams}>
<MATContextProvider {...queryParams}>
<Flex flexDirection='column'>
<Box>
{(!chartData && !error) ? (
<FormattedMessage id="General.Loading" />
) : (
<>
<GridChart
data={chartData}
rowKeys={rowKeys}
rowLabels={rowLabels}
/>
{!!chartData?.size && <MATLink query={queryParams} />}
</>
)}
</Box>
{error &&
<DetailsBox collapsed={false} content={<>
<details>
<summary><span>Error: {error.message}</span></summary>
<Box as='pre'>
{JSON.stringify(error, null, 2)}
</Box>
</details>
</>}/>
}
</Flex>
<div className="flex flex-col">
{!chartData && !error ? (
<FormattedMessage id="General.Loading" />
) : (
<>
<GridChart
data={chartData}
rowKeys={rowKeys}
rowLabels={rowLabels}
/>
{!!chartData?.size && <MATLink query={queryParams} />}
</>
)}
{error && (
<DetailsBox
collapsed={false}
content={
<>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
</>
}
/>
)}
</div>
</MATContextProvider>
)
})
Expand Down
Loading

0 comments on commit 93f2f03

Please sign in to comment.