Finish converting primitives-core to TS

emotion-js · Jul 10, 2022 · 0bc1e86 · 0bc1e86
1 parent 0fd304f
commit 0bc1e86
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 30 deletions.
diff --git a/packages/primitives-core/src/css.ts b/packages/primitives-core/src/css.ts
@@ -1,4 +1,5 @@
 import transform, { Style } from 'css-to-react-native'
+import { AbstractStyleSheet } from './types'
 import { interleave } from './utils'
 
 // this is for handleInterpolation
@@ -73,17 +74,6 @@ function handleInterpolation(
   lastType = type
 }
 
-type NamedStyles<T> = { [P in keyof T]: unknown }
-
-// This is based on the StyleSheet type from @types/react-native
-interface AbstractStyleSheet {
-  create<T extends NamedStyles<T> | NamedStyles<any>>(
-    styles: T | NamedStyles<T>
-  ): T
-
-  flatten(style?: unknown[]): unknown
-}
-
 // Use platform specific StyleSheet method for creating the styles.
 // This enables us to use the css``/css({}) in any environment (Native | Sketch | Web)
 export function createCss(StyleSheet: AbstractStyleSheet) {

diff --git a/packages/primitives-core/src/styled.js → packages/primitives-core/src/styled.ts b/packages/primitives-core/src/styled.js → packages/primitives-core/src/styled.ts
@@ -2,30 +2,35 @@ import * as React from 'react'
 import { interleave } from './utils'
 import { ThemeContext } from '@emotion/react'
 import { createCss } from './css'
+import { AbstractStyleSheet } from './types'
 
-let testOmitPropsOnComponent = prop => prop !== 'theme' && prop !== 'as'
+let testOmitPropsOnComponent = (prop: string) =>
+  prop !== 'theme' && prop !== 'as'
 
-/*
-type CreateStyledOptions = {
-  getShouldForwardProp: (cmp: React.ElementType) => (prop: string) => boolean
+interface CreateStyledOptions {
+  getShouldForwardProp(cmp: React.ElementType): (prop: string) => boolean
 }
 
-type StyledOptions = {
-  shouldForwardProp?: (prop: string) => boolean
+interface StyledOptions {
+  shouldForwardProp?(prop: string): boolean
+}
+
+type StyledProps = Record<string, unknown> & {
+  as?: React.ElementType
 }
-*/
 
 export function createStyled(
-  StyleSheet /*: Object */,
-  {
-    getShouldForwardProp = () => testOmitPropsOnComponent
-  } /*: CreateStyledOptions */ = {}
+  StyleSheet: AbstractStyleSheet,
+  options?: CreateStyledOptions
 ) {
+  const getShouldForwardProp =
+    options?.getShouldForwardProp ?? (() => testOmitPropsOnComponent)
+
   const css = createCss(StyleSheet)
 
   return function createEmotion(
-    component /*: React.ElementType */,
-    options /* ?: StyledOptions */
+    component: React.ElementType,
+    options?: StyledOptions
   ) {
     let shouldForwardProp =
       options && options.shouldForwardProp
@@ -35,8 +40,8 @@ export function createStyled(
       shouldForwardProp || getShouldForwardProp(component)
     let shouldUseAs = !defaultShouldForwardProp('as')
 
-    return function createStyledComponent(...rawStyles) {
-      let styles
+    return function createStyledComponent(...rawStyles: any[]) {
+      let styles: any[]
 
       if (rawStyles[0] == null || rawStyles[0].raw === undefined) {
         styles = rawStyles
@@ -45,7 +50,7 @@ export function createStyled(
       }
 
       // do we really want to use the same infra as the web since it only really uses theming?
-      let Styled = React.forwardRef((props, ref) => {
+      let Styled = React.forwardRef<unknown, StyledProps>((props, ref) => {
         const finalTag = (shouldUseAs && props.as) || component
 
         let mergedProps = props
@@ -62,7 +67,7 @@ export function createStyled(
             ? getShouldForwardProp(finalTag)
             : defaultShouldForwardProp
 
-        let newProps = {}
+        let newProps: Record<string, unknown> = {}
 
         for (let key in props) {
           if (shouldUseAs && key === 'as') continue
@@ -77,7 +82,8 @@ export function createStyled(
 
         return React.createElement(finalTag, newProps)
       })
-      Styled.withComponent = (newComponent /*: React.ElementType */) =>
+
+      ;(Styled as any).withComponent = (newComponent: React.ElementType) =>
         createEmotion(newComponent)(...styles)
 
       Styled.displayName = `emotion(${getDisplayName(component)})`
@@ -87,7 +93,9 @@ export function createStyled(
   }
 }
 
-const getDisplayName = primitive =>
+const getDisplayName = (
+  primitive: string | { displayName?: string; name?: string }
+) =>
   typeof primitive === 'string'
     ? primitive
     : primitive.displayName || primitive.name || 'Styled'
diff --git a/packages/primitives-core/src/types.ts b/packages/primitives-core/src/types.ts
@@ -0,0 +1,10 @@
+type NamedStyles<T> = { [P in keyof T]: unknown }
+
+// This is based on the StyleSheet type from @types/react-native
+export interface AbstractStyleSheet {
+  create<T extends NamedStyles<T> | NamedStyles<any>>(
+    styles: T | NamedStyles<T>
+  ): T
+
+  flatten(style?: unknown[]): unknown
+}