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/note/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,13 +3,17 @@
 exports[`Note should render correctly 1`] = `
 "<div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>note<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #eaeaea;
           color: #000;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -20,7 +24,7 @@ exports[`Note should render correctly 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div>"
 `;
@@ -28,13 +32,17 @@ exports[`Note should render correctly 1`] = `
 exports[`Note should work with different styles 1`] = `
 "<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
         .note {
-          padding: calc(8pt / 2) calc(16pt / 2);
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #666;
           color: #666;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -45,17 +53,21 @@ exports[`Note should work with different styles 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #0070f3;
           color: white;
           background-color: #0070f3;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -66,17 +78,21 @@ exports[`Note should work with different styles 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #000;
           color: #fff;
           background-color: #000;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -87,28 +103,7 @@ exports[`Note should work with different styles 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
-        }
-      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
-        .note {
-          padding: calc(8pt / 2) calc(16pt / 2);
-          font-size: 14px;
-          line-height: 1.8;
-          border: 1px solid #000;
-          color: #fff;
-          background-color: #000;
-          border-radius: 5px;
-        }
-
-        .note :global(p) {
-          margin: 0;
-        }
-
-        .label {
-          text-transform: uppercase;
-          user-select: none;
-          line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div></div>"
 `;
@@ -116,13 +111,17 @@ exports[`Note should work with different styles 1`] = `
 exports[`Note should work with different types 1`] = `
 "<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #666;
           color: #666;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -133,17 +132,21 @@ exports[`Note should work with different types 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #0070f3;
           color: #0070f3;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -154,17 +157,21 @@ exports[`Note should work with different types 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #f5a623;
           color: #f5a623;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -175,17 +182,21 @@ exports[`Note should work with different types 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
         .note {
-          padding: 8pt 16pt;
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid #e00;
           color: #e00;
           background-color: #fff;
           border-radius: 5px;
+          font-size: calc(0.875 * 16px);
+          width: auto;
+          height: auto;
+          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)
+            calc(1.32 * 16px);
+          margin: 0 0 0 0;
         }
 
         .note :global(p) {
@@ -196,7 +207,7 @@ exports[`Note should work with different types 1`] = `
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: 4pt;
+          padding-right: 0.38em;
         }
       </style></div></div>"
 `;

components/note/__tests__/index.test.tsx

@@ -35,16 +35,11 @@ describe('Note', () => {
   it('should work with different styles', () => {
     const wrapper = mount(
       <div>
-        <Note type="secondary" small>
-          secondary
-        </Note>
+        <Note type="secondary">secondary</Note>
         <Note type="success" filled>
           success
         </Note>
         <Note filled>warning</Note>
-        <Note filled small>
-          error
-        </Note>
       </div>,
     )
     expect(wrapper.html()).toMatchSnapshot()

components/note/note.tsx

@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react'
 import useTheme from '../use-theme'
-import withDefaults from '../utils/with-defaults'
 import { NormalTypes } from '../utils/prop-types'
 import { GeistUIThemes } from '../themes/presets'
+import useScaleable, { withScaleable } from '../use-scaleable'
 
 interface Props {
   type?: NormalTypes
   label?: string | boolean
-  small?: boolean
   filled?: boolean
   className?: string
 }
@@ -15,13 +14,12 @@ interface Props {
 const defaultProps = {
   type: 'default' as NormalTypes,
   label: 'note' as string | boolean,
-  small: false,
   filled: false,
   className: '',
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
-export type NoteProps = Props & typeof defaultProps & NativeAttrs
+export type NoteProps = Props & NativeAttrs
 
 const getStatusColor = (type: NormalTypes, filled: boolean, theme: GeistUIThemes) => {
   const colors: { [key in NormalTypes]?: string } = {
@@ -46,23 +44,20 @@ const getStatusColor = (type: NormalTypes, filled: boolean, theme: GeistUIThemes
   }
 }
 
-export const Note: React.FC<React.PropsWithChildren<NoteProps>> = ({
+export const NoteComponent: React.FC<React.PropsWithChildren<NoteProps>> = ({
   children,
   type,
   label,
   filled,
-  small,
   className,
   ...props
-}) => {
+}: React.PropsWithChildren<NoteProps> & typeof defaultProps) => {
   const theme = useTheme()
+  const { SCALES } = useScaleable()
   const { color, borderColor, bgColor } = useMemo(
     () => getStatusColor(type, filled, theme),
     [type, filled, theme],
   )
-  const padding = small
-    ? `calc(${theme.layout.gapHalf} / 2) calc(${theme.layout.gap} / 2)`
-    : `${theme.layout.gapHalf} ${theme.layout.gap}`
 
   return (
     <div className={`note ${className}`} {...props}>
@@ -75,13 +70,17 @@ export const Note: React.FC<React.PropsWithChildren<NoteProps>> = ({
 
       <style jsx>{`
         .note {
-          padding: ${padding};
-          font-size: 14px;
           line-height: 1.8;
           border: 1px solid ${borderColor};
           color: ${color};
           background-color: ${bgColor};
           border-radius: ${theme.layout.radius};
+          font-size: ${SCALES.font(0.875)};
+          width: ${SCALES.width(1, 'auto')};
+          height: ${SCALES.height(1, 'auto')};
+          padding: ${SCALES.pt(0.667)} ${SCALES.pr(1.32)} ${SCALES.pb(0.667)}
+            ${SCALES.pl(1.32)};
+          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
         }
 
         .note :global(p) {
@@ -92,13 +91,14 @@ export const Note: React.FC<React.PropsWithChildren<NoteProps>> = ({
           text-transform: uppercase;
           user-select: none;
           line-height: 1.5;
-          padding-right: ${theme.layout.gapQuarter};
+          padding-right: 0.38em;
         }
       `}</style>
     </div>
   )
 }
 
-const MemoNote = React.memo(Note)
-
-export default withDefaults(MemoNote, defaultProps)
+NoteComponent.defaultProps = defaultProps
+NoteComponent.displayName = 'GeistNote'
+const Note = withScaleable(NoteComponent)
+export default Note