Refactor Link And Grid

packages/components/src/components/Grid/Grid.style.ts

@@ -1,23 +1,21 @@
-import { css } from "@emotion/core"
+import { StyleFn, makeStyles } from "../../utils";
 
 export type GridStyleProps = {
-  minItemWidth?: string | number
-  maxItemWidth?: string | number
-}
+	minItemWidth?: string | number;
+	maxItemWidth?: string | number;
+};
+const container: StyleFn = (_, { minItemWidth = "300", maxItemWidth }) => ({
+	display: "grid",
+	gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}px, ${maxItemWidth ? `${maxItemWidth}px` : "1fr"}))`,
+	gap: "30px",
+});
 
-export let makeStyles = ({
-  minItemWidth = "300",
-  maxItemWidth
-}: GridStyleProps) => {
-  return {
-    container: css`
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(${minItemWidth}px, ${maxItemWidth ? maxItemWidth + "px" : "1fr"}));
-      gap: 30px;
-    `,
-    item: css`
-      width: 100%;
-      cursor: pointer;
-    `,
-  }
-}
+const item: StyleFn = () => ({
+	cursor: "pointer",
+	width: "100%",
+});
+
+export const useCSS = (props: GridStyleProps) => ({
+	container: makeStyles([container])(props),
+	item: makeStyles([item])(props),
+});

packages/components/src/components/Grid/Grid.tsx

@@ -1,20 +1,20 @@
-import React from "react"
-import { makeStyles, GridStyleProps } from "./Grid.style"
+import React from "react";
+import { GridStyleProps, useCSS } from "./Grid.style";
 
 type SectionProps = {
-  items?: React.ReactNode[]
-  className?: string
-} & GridStyleProps
+	items?: React.ReactNode[];
+	className?: string;
+} & GridStyleProps;
 
-export default function Grid({
-  items = [],
-  className = "",
-  ...styleProps
-}: SectionProps) {
-  let styles = makeStyles(styleProps)
-  return (
-    <div css={styles.container} className={className}>
-      {items.map((item, index) => <div key={`grid-item-${index}`} css={styles.item}>{item}</div>)}
-    </div>
-  )
+export default function Grid({ items = [], className = "", ...styleProps }: SectionProps) {
+	let styles = useCSS(styleProps);
+	return (
+		<div css={styles.container} className={className}>
+			{items.map((item, index) => (
+				<div key={`grid-item-${index}`} css={styles.item}>
+					{item}
+				</div>
+			))}
+		</div>
+	);
 }

packages/components/src/components/Link/Link.style.ts

@@ -1,24 +1,23 @@
-import { css } from "@emotion/core"
-import { typography, colors } from "../../theme"
+import { typography, colors } from "../../theme";
+import { StyleFn, makeStyles } from "../../utils";
 
-export type CustomLinkStyleProps = {}
+export type CustomLinkStyleProps = {};
 
-export let makeStyles = ({}: CustomLinkStyleProps) => {
-
-  return {
-    regular: css`
-      font-family: ${typography.fonts.base};
-      font-size: ${typography.sizes.overhead};
-      color: ${colors.blue[400]};
-      text-decoration: none;
-      cursor: pointer;
-    `,
-    disabled: css`
-      font-family: ${typography.fonts.base};
-      font-size: ${typography.sizes.overhead};
-      color: ${colors.gray[200]};
-      text-decoration: none;
-      cursor: not-allowed;
-    `
-  }
-}
+const regular: StyleFn = () => ({
+	fontFamily: typography.fonts.base,
+	fontSize: typography.sizes.overhead,
+	color: colors.blue[400],
+	textDecoration: "none",
+	cursor: "pointer",
+});
+const disabled: StyleFn = () => ({
+	fontFamily: typography.fonts.base,
+	fontSize: typography.sizes.overhead,
+	color: colors.gray[200],
+	textDecoration: "none",
+	cursor: "not-allowed",
+});
+export const useCSS = (props: CustomLinkStyleProps) => ({
+	regular: makeStyles([regular])(props),
+	disabled: makeStyles([disabled])(props),
+});

packages/components/src/components/Link/Link.tsx

@@ -1,47 +1,48 @@
-import React, { ReactNode, ReactChild } from "react"
-import { Link } from "@reach/router"
-import { makeStyles, CustomLinkStyleProps } from "./Link.style"
+import React, { ReactNode, ReactChild } from "react";
+import { Link } from "@reach/router";
+import { CustomLinkStyleProps, useCSS } from "./Link.style";
 
 type CustomLinkProps = {
-  children: ReactChild
-  to: string
-  disabled?: boolean
-  className?: string
-  replace?: boolean
-  ref?: React.Ref<HTMLAnchorElement>
-  innerRef?: React.Ref<HTMLAnchorElement>
-  getProps?: any
-  state?: any
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-} & CustomLinkStyleProps
+	children: ReactChild;
+	to: string;
+	disabled?: boolean;
+	className?: string;
+	replace?: boolean;
+	ref?: React.Ref<HTMLAnchorElement>;
+	innerRef?: React.Ref<HTMLAnchorElement>;
+	getProps?: any;
+	state?: any;
+	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+} & CustomLinkStyleProps;
 
 export default function CustomLink({
-  children,
-  to = "",
-  disabled = false,
-  className = "",
-  replace = false,
-  ref = () => {},
-  innerRef = () => {},
-  getProps = () => {},
-  state = null,
-  onClick,
-  ...props
+	children,
+	to = "",
+	disabled = false,
+	className = "",
+	replace = false,
+	ref = () => {},
+	innerRef = () => {},
+	getProps = () => {},
+	state = null,
+	onClick,
+	...props
 }: CustomLinkProps) {
+	let styles = useCSS(props);
 
-  let styles = makeStyles(props)
-
-  if (disabled) return <label css={styles.disabled}>{children}</label>
-  return <Link
-    to={to}
-    css={styles.regular}
-    className={className}
-    replace={replace}
-    ref={ref}
-    innerRef={innerRef}
-    getProps={getProps}
-    state={state}
-  >
-    {children}
-  </Link>
+	if (disabled) return <label css={styles.disabled}>{children}</label>;
+	return (
+		<Link
+			to={to}
+			css={styles.regular}
+			className={className}
+			replace={replace}
+			ref={ref}
+			innerRef={innerRef}
+			getProps={getProps}
+			state={state}
+		>
+			{children}
+		</Link>
+	);
 }