diff --git a/apps/web/Components/Output/Results/index.jsx b/apps/web/Components/Output/Results/index.jsx index 7487274..8b835f0 100644 --- a/apps/web/Components/Output/Results/index.jsx +++ b/apps/web/Components/Output/Results/index.jsx @@ -1,21 +1,11 @@ import { elements, formatters, id, title, titles } from './config'; import { Container, Head } from '@/Components/Layout/Element'; import { useStore } from '@/stores/hooks'; -import { min } from '@/styles/mq'; import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; import styled from 'styled-components'; import { Text } from 'ui/elements'; -import { Box } from 'ui/grid'; - -const Grid = styled(Box)` - display: grid; - grid-template-columns: 1fr; - - ${min('tablet')} { - grid-template-columns: 1fr 1fr; - } -`; +import { Grid } from 'ui/grid'; const Wrapper = styled.div` margin-bottom: 18px; @@ -29,7 +19,7 @@ const Results = observer(() => { const values = !$process.has('Unlimited') ? elements.filter((x) => !x.startsWith('_')) : elements; return ( - + {values.map((valueName) => { const formatter = formatters[valueName]; const storeValue = resultsValues[valueName]; diff --git a/packages/ui/grid.ts b/packages/ui/grid.ts index dfebe96..20a04b5 100644 --- a/packages/ui/grid.ts +++ b/packages/ui/grid.ts @@ -1,2 +1,17 @@ +import type { Theme } from './utils'; +import { getStyles } from './utils'; +import styled from 'styled-components'; + export type { BoxProps, FlexProps } from 'rebass/styled-components'; export { Box, Flex } from 'rebass/styled-components'; + +type WithArrayType = { + [K in keyof T]: Array | T[K]; +}; + +export type GridProps = WithArrayType; + +export const Grid = styled.div` + display: grid; + ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)} +`; diff --git a/packages/ui/package.json b/packages/ui/package.json index 9deccc5..12a4962 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -22,6 +22,7 @@ "@ant-design/cssinjs": "^1.10.1", "@ant-design/icons": "^5.1.4", "antd": "^5.6.3", + "radash": "^11.0.0", "rebass": "^4.0.7", "styled-components": "^5.3.6", "use-debounce": "^9.0.3" diff --git a/packages/ui/utils.ts b/packages/ui/utils.ts new file mode 100644 index 0000000..28fa02b --- /dev/null +++ b/packages/ui/utils.ts @@ -0,0 +1,28 @@ +import { dash, omit } from 'radash'; + +export type Theme = { breakpoints: string[] }; +function min(breakpoint: string, style: string) { + return `@media (min-width: ${breakpoint}) + { + ${style} + }`; +} +export function getStyles(props: Record, theme: Theme) { + const cleanProps = omit(props, ['children']); + return (Object.keys(cleanProps) as Array).map((name) => { + const styleValues = cleanProps[name]; + if (Array.isArray(styleValues)) { + const [firstStyle, ...values] = styleValues; + return theme.breakpoints + .map((breakpoint, i) => { + if (!values[i]) return undefined; + const style = `${dash(name)}:${values[i]}`; + return min(breakpoint, style); + }) + .concat([`${dash(name)}:${firstStyle};`]) + .join(' '); + } + + return `${dash(name)}:${styleValues};`; + }); +} diff --git a/yarn.lock b/yarn.lock index 6bbf122..2ee2c61 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8796,6 +8796,11 @@ radash@^10.7.0: resolved "https://registry.yarnpkg.com/radash/-/radash-10.7.0.tgz#aaa164f9697a440d848b88323d51d1bc4f39608a" integrity sha512-dz5NUcGnvn080kKJnyPtqVnP4MWoiwp5qQhEQFK/qMJxCjffQd8tMR4cybxy6y5hupYa5UkSlJRSRY2F7GPBxQ== +radash@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/radash/-/radash-11.0.0.tgz#925698e94b554336fc159c253ac33a9a49881835" + integrity sha512-CRWxTFTDff0IELGJ/zz58yY4BDgyI14qSM5OLNKbCItJrff7m7dXbVF0kWYVCXQtPb3SXIVhXvAImH6eT7VLSg== + rambda@^7.1.0: version "7.5.0" resolved "https://registry.yarnpkg.com/rambda/-/rambda-7.5.0.tgz#1865044c59bc0b16f63026c6e5a97e4b1bbe98fe"