add Grid component

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 (
-    <Grid>
+    <Grid gridTemplateColumns={['1fr', '1fr 1fr']}>
       {values.map((valueName) => {
         const formatter = formatters[valueName];
         const storeValue = resultsValues[valueName];

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<T> = {
+  [K in keyof T]: Array<T[K]> | T[K];
+};
+
+export type GridProps = WithArrayType<HTMLDivElement['style']>;
+
+export const Grid = styled.div<GridProps>`
+  display: grid;
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
+`;

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"

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<T>(props: Record<string, T | T[]>, theme: Theme) {
+  const cleanProps = omit(props, ['children']);
+  return (Object.keys(cleanProps) as Array<keyof typeof props>).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};`;
+  });
+}

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"