feat: tabs to TS

packages/Hint/package.json

@@ -4,7 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/hint.cjs.js",
   "module": "dist/hint.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Modal/package.json

@@ -4,7 +4,7 @@
   "description": "Modal from Reakit with a really nice theme 👀",
   "main": "dist/modal.cjs.js",
   "module": "dist/modal.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Table/package.json

@@ -4,7 +4,7 @@
   "description": "Welcome UI - Table | Repaint html for table tr td... etc with a scrollable table",
   "main": "dist/table.cjs.js",
   "module": "dist/table.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Tabs/.npmignore

@@ -1,2 +1,3 @@
 /*
-!/dist/*.js
+!/dist/*.js
+!/dist/*.d.ts

packages/Tabs/ActiveBar.js → packages/Tabs/ActiveBar.tsx

@@ -1,12 +1,20 @@
 import React, { useLayoutEffect, useState } from 'react'
-import { any, oneOf, oneOfType, shape } from 'prop-types'
 import { useViewportSize } from '@welcome-ui/utils'
-
-import { COMPONENT_TYPE } from '../../utils/propTypes'
+import { TabStateReturn } from 'reakit/Tab'
 
 import * as S from './styles'
 
-function useActiveBarState(listRef, activeTab, orientation) {
+export interface ActiveBarStateReturn {
+  offset?: number
+  size?: number
+  orientation?: TabStateReturn['orientation']
+}
+
+function useActiveBarState(
+  listRef: React.MutableRefObject<HTMLElement>,
+  activeTab: HTMLElement,
+  orientation: TabStateReturn['orientation']
+): ActiveBarStateReturn {
   const [state, setState] = useState({})
   const { height: viewportHeight, width: viewportWidth } = useViewportSize()
   useLayoutEffect(() => {
@@ -38,15 +46,16 @@ function useActiveBarState(listRef, activeTab, orientation) {
   return state
 }
 
-export const ActiveBar = ({ activeTab, listRef, orientation }) => {
+export interface ActiveBarOptions {
+  activeTab: HTMLElement
+  listRef: React.MutableRefObject<undefined>
+}
+
+export type ActiveBarProps = Pick<TabStateReturn, 'orientation'> & ActiveBarOptions
+
+export const ActiveBar: React.FC<ActiveBarProps> = ({ activeTab, listRef, orientation }) => {
   const activeBar = useActiveBarState(listRef, activeTab, orientation)
   return <S.ActiveBar {...activeBar} />
 }
 
 ActiveBar.displayName = 'ActiveBar'
-
-ActiveBar.propTypes /* remove-proptypes */ = {
-  activeTab: oneOfType(COMPONENT_TYPE),
-  listRef: shape({ current: any }),
-  orientation: oneOf(['vertical', 'horizontal'])
-}

packages/Tabs/TabList.js → packages/Tabs/TabList.tsx

@@ -1,18 +1,23 @@
 import React, { cloneElement, forwardRef, useRef, useState } from 'react'
-import { node, oneOf, oneOfType } from 'prop-types'
-import { TabList as ReakitTabList } from 'reakit/Tab'
+import {
+  TabList as ReakitTabList,
+  TabListProps as ReakitTabListProps,
+  TabStateReturn
+} from 'reakit/Tab'
 import flattenChildren from 'react-flatten-children'
 import { useForkRef } from '@welcome-ui/utils'
-
-import { COMPONENT_TYPE } from '../../utils/propTypes'
+import { WuiProps } from '@welcome-ui/system'
 
 import { ActiveBar } from './ActiveBar'
 import * as S from './styles'
 
-function useTrackActiveTabs(state, children) {
-  const [activeTab, setActiveTab] = useState(null)
+function useTrackActiveTabs(
+  state: Pick<TabStateReturn, 'selectedId'>,
+  children: React.ReactNode
+): [ReturnType<typeof flattenChildren>, HTMLElement] {
+  const [activeTab, setActiveTab] = useState<HTMLElement>(null)
 
-  const tabs = flattenChildren(children).map(child => {
+  const tabs = flattenChildren(children).map((child: React.ReactElement) => {
     if (child.props.id === state.selectedId) {
       return cloneElement(child, { ref: setActiveTab })
     }
@@ -21,11 +26,16 @@ function useTrackActiveTabs(state, children) {
   return [tabs, activeTab]
 }
 
-export const TabList = forwardRef((props, ref) => {
+export type TabListProps = React.HTMLAttributes<HTMLDivElement> &
+  Pick<TabStateReturn, 'orientation' | 'selectedId'> &
+  ReakitTabListProps &
+  WuiProps
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>((props, ref) => {
   const { as, children, orientation, ...rest } = props
   const listRef = useRef()
   const listForkedRef = useForkRef(ref, listRef)
-  const [tabs, activeTab] = useTrackActiveTabs(rest, children)
+  const [tabs, activeTab] = useTrackActiveTabs({ selectedId: rest.selectedId }, children)
 
   return (
     <ReakitTabList orientation={orientation} ref={listForkedRef} {...rest}>
@@ -42,9 +52,3 @@ export const TabList = forwardRef((props, ref) => {
 })
 
 TabList.displayName = 'TabList'
-
-TabList.propTypes /* remove-proptypes */ = {
-  as: oneOfType(COMPONENT_TYPE),
-  children: node,
-  orientation: oneOf(['vertical', 'horizontal'])
-}

packages/Tabs/TabPanel.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import {
+  TabPanel as ReakitTabPanel,
+  TabPanelProps as ReakitTabPanelProps,
+  TabStateReturn
+} from 'reakit/Tab'
+import { WuiProps } from '@welcome-ui/system'
+
+import * as S from './styles'
+
+export type TabPanelProps = React.HTMLAttributes<HTMLDivElement> &
+  Pick<TabStateReturn, 'orientation'> &
+  ReakitTabPanelProps &
+  WuiProps
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {
+  const { as, children, orientation, tabId, ...rest } = props
+  return (
+    <ReakitTabPanel ref={ref} tabId={tabId} {...rest}>
+      {tabPanelProps => (
+        <S.TabPanel as={as} orientation={orientation} {...tabPanelProps}>
+          {children}
+        </S.TabPanel>
+      )}
+    </ReakitTabPanel>
+  )
+})
+
+TabPanel.displayName = 'TabPanel'

packages/Tabs/index.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react'
+import { Tab as ReakitTab, TabProps as ReakitTabProps } from 'reakit/Tab'
+import { WuiProps } from '@welcome-ui/system'
+
+import { TabList } from './TabList'
+import { TabPanel } from './TabPanel'
+import * as S from './styles'
+
+export type TabProps = React.HTMLAttributes<HTMLButtonElement> & ReakitTabProps & WuiProps
+
+export const TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
+  const { as, children, id, ...rest } = props
+  return (
+    <ReakitTab id={id} ref={ref} {...rest}>
+      {tabProps => (
+        <S.Tab as={as} {...tabProps}>
+          {children}
+        </S.Tab>
+      )}
+    </ReakitTab>
+  )
+})
+
+TabComponent.displayName = 'Tab'
+
+export const Tab = Object.assign(TabComponent, { List: TabList, Panel: TabPanel })
+
+export { useTabState } from 'reakit/Tab'

packages/Tabs/package.json

@@ -4,6 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/tabs.cjs.js",
   "module": "dist/tabs.es.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Tabs/rollup.config.js

@@ -1,3 +1,3 @@
 import { getRollupConfig } from '../../rollup.config.js'
 
-export default getRollupConfig({ pwd: __dirname })
+export default getRollupConfig({ pwd: __dirname, ts: true })

packages/Tabs/styles.js → packages/Tabs/styles.ts

@@ -1,6 +1,9 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 import { system } from '@welcome-ui/system'
+import { TabStateReturn } from 'reakit/Tab'
+
+import { ActiveBarStateReturn } from './ActiveBar'
 
 export const TabList = styled.div`
   position: relative;
@@ -52,7 +55,7 @@ export const Tab = styled.button`
   }
 `
 
-export const TabPanel = styled.div(
+export const TabPanel = styled.div<Pick<TabStateReturn, 'orientation'>>(
   ({ orientation }) => css`
     ${orientation === 'vertical' ? th('tabs.panel.vertical') : th('tabs.panel.horizontal')};
   `
@@ -74,7 +77,7 @@ const activeBarVerticalStyles = ({ offset = 0, size = 0 }) => css`
   transform: translateY(${offset}px);
 `
 
-export const ActiveBar = styled.span(
+export const ActiveBar = styled.span<ActiveBarStateReturn>(
   ({ orientation, ...rest }) => css`
     position: absolute;
     ${orientation === 'vertical' ? activeBarVerticalStyles(rest) : activeBarHorizontalStyles(rest)}

packages/Textarea/package.json

@@ -4,7 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/textarea.cjs.js",
   "module": "dist/textarea.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Tooltip/package.json

@@ -4,7 +4,7 @@
   "description": "welcome-ui: A tooltip component",
   "main": "dist/tooltip.cjs.js",
   "module": "dist/tooltip.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Utils/package.json

@@ -4,7 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/utils.cjs.js",
   "module": "dist/utils.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",

packages/Utils/use-fork-ref.ts

@@ -1,9 +1,6 @@
-import React, { useMemo } from 'react'
+import { ForwardedRef, useMemo } from 'react'
 
-export function setRef(
-  ref: React.MutableRefObject<unknown> | ((value: unknown) => void),
-  value: unknown
-): void {
+export function setRef(ref: ForwardedRef<unknown>, value: unknown): void {
   if (typeof ref === 'function') {
     ref(value)
   } else if (ref) {
@@ -12,8 +9,8 @@ export function setRef(
 }
 
 export function useForkRef(
-  refA: React.MutableRefObject<unknown>,
-  refB: React.MutableRefObject<unknown>
+  refA: ForwardedRef<unknown>,
+  refB: ForwardedRef<unknown>
 ): (instance: unknown) => void {
   /**
    * This will create a new function if the ref props change and are defined.

packages/VariantIcon/package.json

@@ -4,7 +4,7 @@
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
   "main": "dist/variant-icon.cjs.js",
   "module": "dist/variant-icon.es.js",
-  "types": "dist/index.d.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",