feat(upgrades): Next 14 / RSC support

.circleci/config.yml

@@ -14,15 +14,17 @@ jobs:
             - v2-dependencies-{{ checksum "package.json" }}
             - v2-dependencies-
 
-      - run: yarn
+      - run: yarn global add pnpm
+
+      - run: pnpm i
 
       - save_cache:
           paths:
             - node_modules
           key: v2-dependencies-{{ checksum "package.json" }}
 
-      - run: yarn run lint
-      - run: yarn test -w 1 --coverage
+      - run: pnpm run lint
+      - run: pnpm test -w 1 --coverage
       - run: bash <(curl -s https://codecov.io/bash)
 
   build:
@@ -39,14 +41,14 @@ jobs:
             - v2-dependencies-{{ checksum "package.json" }}
             - v2-dependencies-
 
-      - run: yarn
+      - run: pnpm i
 
       - save_cache:
           paths:
             - node_modules
           key: v2-dependencies-{{ checksum "package.json" }}
 
-      - run: yarn run build
+      - run: pnpm run build
 workflows:
   version: 2
   build_and_test:

.github/workflows/publish.yml

@@ -14,13 +14,13 @@ jobs:
         with:
           node-version: 12
       - name: install
-        run: yarn install --check-files --frozen-lockfile
+        run: pnpm install --check-files --frozen-lockfile
       - name: lint
-        run: yarn lint
+        run: pnpm lint
       - name: lint
-        run: yarn test
+        run: pnpm test
       - name: build
-        run: yarn build
+        run: pnpm build
   publish:
     needs: build
     runs-on: ubuntu-latest
@@ -32,7 +32,7 @@ jobs:
           node-version: 12
           registry-url: https://registry.npmjs.org/
       - name: install
-        run: yarn install --check-files --frozen-lockfile
+        run: pnpm install --check-files --frozen-lockfile
       - name: set dist-tag
         run: |
           case "${{github.event.release.name}}" in
@@ -48,6 +48,6 @@ jobs:
       - name: publish
         run: |
           echo ">> dist-tag: ${{ env.r_tag }}"
-          yarn release --tag ${{ env.r_tag }}
+          pnpm release --tag ${{ env.r_tag }}
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -37,3 +37,6 @@ examples/**/.cache
 
 # Local Netlify folder
 .netlify
+
+.vscode
+*.tsbuildinfo

.travis.yml

@@ -16,7 +16,7 @@ branches:
     - master
 
 install:
-  - yarn
+  - pnpm i
 
 script:
-  - yarn run build
+  - pnpm build

components/link/__tests__/index.test.tsx

@@ -43,11 +43,4 @@ describe('Link', () => {
     expect(() => wrapper.unmount()).not.toThrow()
     errorSpy.mockRestore()
   })
-
-  it('an warning should be thrown when using the pure prop', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
-    mount(<Link pure />)
-    expect(errorSpy).toHaveBeenCalled()
-    errorSpy.mockRestore()
-  })
 })

components/popover/popover.tsx

@@ -41,20 +41,20 @@ type ExcludeTooltipProps = {
   placement: any
 }
 
-export type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps>
+export type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps | "content">
 
 const PopoverComponent: React.FC<React.PropsWithChildren<PopoverProps>> = ({
   content,
   children,
   trigger,
   placement,
-  initialVisible,
   portalClassName,
-  disableItemsAutoClose,
-  onVisibleChange,
   visible: customVisible,
+  initialVisible = defaultProps.initialVisible,
+  disableItemsAutoClose = defaultProps.disableItemsAutoClose,
+  onVisibleChange = defaultProps.onVisibleChange,
   ...props
-}: React.PropsWithChildren<PopoverProps> & typeof defaultProps) => {
+}) => {
   const { SCALES } = useScale()
   const [visible, setVisible] = useState<boolean>(initialVisible)
   const textNode = useMemo(() => getReactNode(content), [content])

components/select/select.tsx

@@ -171,7 +171,7 @@ const SelectComponent = React.forwardRef<SelectRef, React.PropsWithChildren<Sele
       const [, optionChildren] = pickChildByProps(children, 'value', value)
       return React.Children.map(optionChildren, child => {
         if (!React.isValidElement(child)) return null
-        const el = React.cloneElement(child, { preventAllEvents: true })
+        const el = React.cloneElement(child, { preventAllEvents: true } as any)
         if (!multiple) return el
         return (
           <SelectMultipleValue

components/shared/css-transition.tsx

@@ -64,7 +64,8 @@ const CssTransition: React.FC<React.PropsWithChildren<CssTransitionProps>> = ({
   }, [visible, renderable])
   if (!React.isValidElement(children) || !renderable) return null
 
-  return React.cloneElement(children, {
+  // TODO: handle portals
+  return React.cloneElement(children as React.ReactElement, {
     ...props,
     className: `${children.props.className} ${className} ${classes}`,
   })

components/slider/slider.tsx

@@ -106,7 +106,7 @@ const SliderComponent: React.FC<React.PropsWithChildren<SliderProps>> = ({
   }
 
   const updateValue = useCallback(
-    offset => {
+    (offset: number) => {
       const currentValue = getValue(max, min, step, offset, sideWidthRef.current)
       setValue(currentValue)
       onChange && onChange(currentValue)

components/table/table-body.tsx

@@ -25,7 +25,7 @@ const defaultProps = {
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>
-export type TableBodyProps<TableDataItem> = Props<TableDataItem> & NativeAttrs
+export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs
 
 const TableBody = <TableDataItem extends TableDataItemBase>({
   data,

components/table/table-cell.tsx

@@ -36,7 +36,7 @@ const TableCell = <TableDataItem extends TableDataItemBase>({
 
         return (
           <td
-            key={`row-td-${index}-${column.prop}`}
+            key={`row-td-${index}-${String(column.prop)}`}
             onClick={() => onCellClick && onCellClick(currentRowValue, rowIndex, index)}
             className={column.className}>
             <div className="cell">

components/table/table-column.tsx

@@ -8,7 +8,7 @@ const defaultProps = {
   render: () => {},
 }
 
-export type TableColumnProps<TableDataItem> = {
+export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
   prop: keyof TableDataItem
   label?: string
   width?: number
@@ -29,7 +29,7 @@ const TableColumn = <TableDataItem extends TableDataItemBase>(
   } = columnProps as React.PropsWithChildren<TableColumnProps<TableDataItem>> &
     typeof defaultProps
   const { updateColumn } = useTableContext<TableDataItem>()
-  const safeProp = `${prop}`.trim()
+  const safeProp = `${String(prop)}`.trim()
   if (!safeProp) {
     useWarning('The props "prop" is required.', 'Table.Column')
   }

components/table/table-context.ts

@@ -1,7 +1,7 @@
 import React from 'react'
-import { TableAbstractColumn } from './table-types'
+import { TableAbstractColumn, TableDataItemBase } from './table-types'
 
-export interface TableConfig<T> {
+export interface TableConfig<T extends TableDataItemBase> {
   columns: Array<TableAbstractColumn<T>>
   updateColumn: (column: TableAbstractColumn<T>) => void
 }
@@ -13,5 +13,5 @@ const defaultContext = {
 
 export const TableContext = React.createContext<TableConfig<any>>(defaultContext)
 
-export const useTableContext = <T>(): TableConfig<T> =>
+export const useTableContext = <T extends TableDataItemBase>(): TableConfig<T> =>
   React.useContext<TableConfig<T>>(TableContext)

components/table/table-head.tsx

@@ -13,9 +13,9 @@ const defaultProps = {
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>
-export type TableHeadProps<TableDataItem> = Props<TableDataItem> & NativeAttrs
+export type TableHeadProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs
 
-const makeColgroup = <TableDataItem,>(
+const makeColgroup = <TableDataItem extends TableDataItemBase>(
   width: number,
   columns: Array<TableAbstractColumn<TableDataItem>>,
 ) => {
@@ -51,7 +51,7 @@ const TableHead = <TableDataItem extends TableDataItemBase>(
       <thead>
         <tr>
           {columns.map((column, index) => (
-            <th key={`table-th-${column.prop}-${index}`} className={column.className}>
+            <th key={`table-th-${String(column.prop)}-${index}`} className={column.className}>
               <div className="thead-box">{column.label}</div>
             </th>
           ))}

components/table/table-types.ts

@@ -8,7 +8,7 @@ export type TableColumnRender<Item extends TableDataItemBase> = (
   rowIndex: number,
 ) => JSX.Element | void
 
-export type TableAbstractColumn<TableDataItem> = {
+export type TableAbstractColumn<TableDataItem extends TableDataItemBase> = {
   prop: keyof TableDataItem
   label: React.ReactNode | string
   className: string

components/use-scale/__tests__/scale.test.tsx

@@ -19,7 +19,7 @@ describe('UseScale', () => {
   })
 
   it('should work correctly with HOC', () => {
-    const wrapper: React.FC<{ width: string }> = ({ width, children }) => (
+    const wrapper: React.FC<React.PropsWithChildren<{ width: string }>> = ({ width, children }) => (
       <ScaleComponent width={width}>{children}</ScaleComponent>
     )
     const { result, rerender } = renderHook<{ width: string }, ScaleConfig>(
@@ -40,7 +40,7 @@ describe('UseScale', () => {
   })
 
   it('should work correctly with SCALES', () => {
-    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (
+    const wrapper: React.FC<React.PropsWithChildren<ScaleProps>> = ({ children, ...props }) => (
       <ScaleComponent {...props}>{children}</ScaleComponent>
     )
     const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {
@@ -73,7 +73,7 @@ describe('UseScale', () => {
   })
 
   it('aliases should be allowed', () => {
-    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (
+    const wrapper: React.FC<React.PropsWithChildren<ScaleProps>> = ({ children, ...props }) => (
       <ScaleComponent {...props}>{children}</ScaleComponent>
     )
     const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {
@@ -103,7 +103,7 @@ describe('UseScale', () => {
   })
 
   it('should work correctly with different unit', () => {
-    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (
+    const wrapper: React.FC<React.PropsWithChildren<ScaleProps>> = ({ children, ...props }) => (
       <ScaleComponent {...props}>{children}</ScaleComponent>
     )
     const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {
@@ -122,7 +122,7 @@ describe('UseScale', () => {
   })
 
   it('should work correctly with multiple values', () => {
-    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (
+    const wrapper: React.FC<React.PropsWithChildren<ScaleProps>> = ({ children, ...props }) => (
       <ScaleComponent {...props}>{children}</ScaleComponent>
     )
     const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {

components/use-scale/with-scale.tsx

@@ -13,7 +13,7 @@ const reduceScaleCoefficient = (scale: number) => {
 const withScale = <T, P = {}>(
   Render: React.ComponentType<P & { ref?: React.Ref<T> }>,
 ) => {
-  const ScaleFC = forwardRef<T, P & ScaleProps>(({ children, ...props }, ref) => {
+  const ScaleFC = forwardRef<T, P & React.PropsWithChildren<ScaleProps>>(({ children, ...props }, ref) => {
     const { layout } = useTheme()
     const {
       paddingLeft,

components/utils/use-context-state/create-geist-context.tsx

@@ -8,7 +8,7 @@ import useContextState, {
 } from './use-context-state'
 import { capitalize } from '../collections'
 
-const makeVirtualValues = <S,>(values: S): ContextStates<S> => {
+const makeVirtualValues = <S extends Record<string, unknown>>(values: S): ContextStates<S> => {
   const keys = Object.keys(values) as Array<keyof S>
   const handlers = keys.reduce<ContextHandler<S>>((pre, current) => {
     const updateHandler = {

components/utils/use-default-props.ts

@@ -7,12 +7,12 @@ const useDefaultProps = <T extends Record<string | number, any>, D extends Parti
   const defaultKeys: Array<keyof T> = Object.keys(defaultProps || {})
 
   for (const propsName of propsKeys) {
-    nextProps[propsName] = props[propsName] as T[keyof T]
+    nextProps[propsName] = props[propsName]
   }
 
   for (const defaultName of defaultKeys) {
     if (props[defaultName] === undefined) {
-      nextProps[defaultName] = defaultProps[defaultName] as T[keyof T]
+      nextProps[defaultName] = defaultProps[defaultName] as unknown as T[keyof T]
     }
   }
   return nextProps as T & Required<D>

lib/components/customization/codes.tsx

@@ -7,7 +7,7 @@ import CopyIcon from 'components/snippet/snippet-icon'
 import makeCodeTheme from 'lib/components/playground/code-theme'
 import { Text, Spacer, useTheme, Code, useToasts, Themes, useClipboard } from 'components'
 
-export const getDeepDifferents = <T,>(source: T, target: T): T => {
+export const getDeepDifferents = <T extends Record<string, any>>(source: T, target: T): T => {
   if (!isObject(target) || !isObject(source)) return target
 
   const sourceKeys = Object.keys(source) as Array<keyof T>

lib/components/mdx-widgets/hybrid-code.tsx

@@ -37,9 +37,7 @@ const extractFileName = (
         return !!r
       },
     )
-    return React.cloneElement(child, {
-      children: withoutSpaceAndNull,
-    })
+    return React.cloneElement(child, {}, withoutSpaceAndNull)
   })
   return {
     children: next,

lib/components/mdx-widgets/hybrid-link.tsx

@@ -3,7 +3,7 @@ import NextLink from 'next/link'
 import { Link, LinkProps } from 'components'
 import { useRouter } from 'next/router'
 
-export type HybridLinkProps = LinkProps
+export type HybridLinkProps = Omit<LinkProps, "color">
 
 const HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => {
   const isRelativeUrl = !/^([a-z0-9]*:|.{0})\/\/.*$/gim.test(href)

lib/components/search/search-items.tsx

@@ -19,7 +19,7 @@ export type SearchItemsProps = {
   displayHoverHighlight?: boolean
 }
 
-export type SearchItemsRef = HTMLUListElement & {
+export interface SearchItemsRef extends HTMLUListElement {
   closeHighlight: () => void
 }
 
@@ -35,11 +35,17 @@ const SearchItems = React.forwardRef<
     const { rect, setRect } = useRect()
     const ref = useRef<HTMLUListElement | null>(null)
     const [displayHighlight, setDisplayHighlight] = useState<boolean>(false)
-    useImperativeHandle(outRef, () =>
-      Object.assign(ref.current, {
-        closeHighlight: () => setDisplayHighlight(false),
-      }),
-    )
+    useImperativeHandle(outRef, () => {
+      if (ref.current) {
+        Object.assign(ref.current, {
+          closeHighlight: () => setDisplayHighlight(false),
+        })
+
+        return ref.current as SearchItemsRef
+      }
+
+      return null
+    })
 
     const hoverHandler = (event: MouseEvent<HTMLButtonElement>) => {
       if (preventHoverHighlightSync) return