feat(scaleable): add scaleable props to each component (#531)

* feat(scaleable): add scaleable props to each component

* chore(scaleable): update the exported type

* feat: apply scaleable to components

chore: remove with-default

test: improve testcase for scaleable

chore: resolve test warning

ci: upgrade nodejs to latest lts

docs: fix type error in document site

* docs: update documents to be compatible with scaleable

chore: fix build errors

* chore: remove all size-related attributes

docs: improve guide document

* docs: add scaleable documentation

test: update snapshots

chore: remove unused

* feat: add scaleable to grid components

* docs: improve docs

* test: update snapshots

* fix(grid): fix basic component props

components/user/index.ts

@@ -1,6 +1,9 @@
 import User from './user'
 import UserLink from './user-link'
 
-User.Link = UserLink
+export type UserComponentType = typeof User & {
+  Link: typeof UserLink
+}
+;(User as UserComponentType).Link = UserLink
 
-export default User
+export default User as UserComponentType

components/user/user-link.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Link from '../link'
-import withDefaults from '../utils/with-defaults'
 
 interface Props {
   href?: string
@@ -12,26 +11,36 @@ const defaultProps = {
 }
 
 type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
-export type UserLinkProps = Props & typeof defaultProps & NativeAttrs
+export type UserLinkProps = Props & NativeAttrs
 
 const UserLink = React.forwardRef<
   HTMLAnchorElement,
   React.PropsWithChildren<UserLinkProps>
->(({ href, className, children, ...props }, ref: React.Ref<HTMLAnchorElement>) => {
-  return (
-    <div className={className} {...props}>
-      <Link ref={ref} href={href} color target="_blank" rel="noopener">
-        {children}
-      </Link>
-      <style jsx>{`
-        div :global(a:hover) {
-          opacity: 0.7;
-        }
-      `}</style>
-    </div>
-  )
-})
+>(
+  (
+    {
+      href,
+      className,
+      children,
+      ...props
+    }: React.PropsWithChildren<UserLinkProps> & typeof defaultProps,
+    ref: React.Ref<HTMLAnchorElement>,
+  ) => {
+    return (
+      <div className={className} {...props}>
+        <Link ref={ref} href={href} color target="_blank" rel="noopener">
+          {children}
+        </Link>
+        <style jsx>{`
+          div :global(a:hover) {
+            opacity: 0.7;
+          }
+        `}</style>
+      </div>
+    )
+  },
+)
 
-const MemoUserLink = React.memo(UserLink)
-
-export default withDefaults(MemoUserLink, defaultProps)
+UserLink.defaultProps = defaultProps
+UserLink.displayName = 'GeistUserLink'
+export default UserLink

components/user/user.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import Avatar from '../avatar'
 import useTheme from '../use-theme'
-import UserLink from './user-link'
+import useScaleable, { withScaleable } from '../use-scaleable'
 
 interface Props {
   name: ReactNode | string
@@ -16,9 +16,9 @@ const defaultProps = {
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
-export type UserProps = Props & typeof defaultProps & NativeAttrs
+export type UserProps = Props & NativeAttrs
 
-const User: React.FC<React.PropsWithChildren<UserProps>> = ({
+const UserComponent: React.FC<React.PropsWithChildren<UserProps>> = ({
   src,
   text,
   name,
@@ -26,12 +26,13 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   className,
   altText,
   ...props
-}) => {
+}: React.PropsWithChildren<UserProps> & typeof defaultProps) => {
   const theme = useTheme()
-
+  const { SCALES, getScaleableProps } = useScaleable()
+  const scale = getScaleableProps('scale') as number | undefined
   return (
     <div className={`user ${className}`} {...props}>
-      <Avatar src={src} text={text} size={32} alt={altText} />
+      <Avatar src={src} scale={scale} text={text} alt={altText} />
       <div className="names">
         <span className="name">{name}</span>
         <span className="social">{children}</span>
@@ -40,14 +41,19 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
       <style jsx>{`
         .user {
           display: inline-flex;
-          padding: 0 ${theme.layout.gapHalf};
           justify-content: center;
           align-items: center;
-          width: max-content;
           max-width: 100%;
+          --user-font-size: ${SCALES.font(1)};
+          font-size: var(--user-font-size);
+          width: ${SCALES.width(1, 'max-content')};
+          height: ${SCALES.height(1, 'auto')};
+          padding: ${SCALES.pt(0)} ${SCALES.pr(0.5)} ${SCALES.pb(0)} ${SCALES.pl(0.5)};
+          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
         }
 
         .names {
+          font-size: inherit;
           margin-left: ${theme.layout.gapHalf};
           display: inline-flex;
           flex-direction: column;
@@ -55,9 +61,9 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
         }
 
         .name {
-          font-size: 0.89rem;
+          font-size: calc(0.89 * var(--user-font-size));
           color: ${theme.palette.accents_8};
-          line-height: 1.1rem;
+          line-height: 1.1em;
           text-transform: capitalize;
           font-weight: 500;
           max-width: 15rem;
@@ -66,7 +72,7 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
         }
 
         .social {
-          font-size: 0.75rem;
+          font-size: calc(0.75 * var(--user-font-size));
           color: ${theme.palette.accents_6};
         }
 
@@ -82,13 +88,7 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   )
 }
 
-type MemoUserComponent<P = {}> = React.NamedExoticComponent<P> & {
-  Link: typeof UserLink
-}
-type ComponentProps = Partial<typeof defaultProps> &
-  Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs
-
-User.defaultProps = defaultProps
-
-export default React.memo(User) as MemoUserComponent<ComponentProps>
+UserComponent.defaultProps = defaultProps
+UserComponent.displayName = 'GeistUser'
+const User = withScaleable(UserComponent)
+export default User