fix: typesafe

Temzasse · Dec 31, 2022 · b7deca1 · b7deca1
1 parent 02d8cf6
commit b7deca1
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 124 deletions.
diff --git a/src/internals/constants.ts b/src/internals/constants.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const COLOR_PROPERTIES = {
   backgroundColor: 'colors',
   border: 'colors',
@@ -117,7 +116,22 @@ export const DEFAULT_THEME_MAP = {
   ...Z_INDEX_PROPERTIES,
 };
 
-export const THEME_VALUES = {
+export type ThemeValues = {
+  borderStyles: null | string | object | number;
+  borderWidths: null | string | object | number;
+  colors: null | string | object | number;
+  fonts: null | string | object | number;
+  fontSizes: null | string | object | number;
+  fontWeights: null | string | object | number;
+  letterSpacings: null | string | object | number;
+  lineHeights: null | string | object | number;
+  radii: null | string | object | number;
+  sizes: null | string | object | number;
+  space: null | string | object | number;
+  zIndices: null | string | object | number;
+};
+
+export const THEME_VALUES: ThemeValues = {
   borderStyles: null,
   borderWidths: null,
   colors: null,
@@ -132,7 +146,14 @@ export const THEME_VALUES = {
   zIndices: null,
 };
 
-export const EMPTY_THEME = {
+export type StoredTheme = {
+  definition: {
+    __ID__: string;
+  } & ThemeValues;
+  values: ThemeValues;
+};
+
+export const EMPTY_THEME: StoredTheme = {
   definition: {
     __ID__: 'theme-0',
     ...THEME_VALUES,

diff --git a/src/internals/hooks.ts b/src/internals/hooks.ts
@@ -1,8 +1,7 @@
-// @ts-nocheck
 import { useMemo, useRef } from 'react';
 import { PixelRatio, useWindowDimensions } from 'react-native';
-import { resolveMediaRangeQueries } from './media';
-import { processStyleSheet } from './styles';
+import { resolveMediaRangeQueries, Media } from './media';
+import { processStyleSheet, ProcessedStyleSheetArgs } from './styles';
 import { getCompoundKey } from './utils';
 
 /**
@@ -15,7 +14,7 @@ import { getCompoundKey } from './utils';
  *   tablet: DeviceInfo.isTablet(),
  * }
  */
-export function useMediaQueries(media) {
+export function useMediaQueries(media: Media): string[] {
   const { width: windowWidth } = useWindowDimensions();
 
   return useMemo(() => {
@@ -28,20 +27,29 @@ export function useProcessedStyleSheet({
   media,
   activeMediaQueries,
   styleSheet,
-}) {
+}: ProcessedStyleSheetArgs) {
   return useMemo(() => {
     return processStyleSheet(styleSheet, media, activeMediaQueries);
   }, [styleSheet, activeMediaQueries]); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
+type UseVariantStylesArgs = {
+  props: any;
+  variants: any;
+  defaultVariants: Record<string, VariantValue>;
+  media: ProcessedStyleSheetArgs['media'];
+  styleSheet: ProcessedStyleSheetArgs['styleSheet'];
+  activeMediaQueries: ProcessedStyleSheetArgs['activeMediaQueries'];
+};
+
 export function useVariantStyles({
   props: _props,
   variants,
   defaultVariants,
   media,
   styleSheet,
   activeMediaQueries,
-}) {
+}: UseVariantStylesArgs) {
   // Only recalculate if the variant props have changed
   const props = useStableVariantProps(variants, _props);
 
@@ -75,7 +83,7 @@ export function useVariantStyles({
           // so that later ones overwrite earlier ones.
           if (activeMediaQueries.length > 0) {
             activeMediaQueries.forEach((mediaKey) => {
-              const value = propValue[`@${mediaKey}`];
+              const value = (propValue as VariantValue)[`@${mediaKey}`];
 
               if (value !== undefined && styleSheet[`${prop}_${value}`]) {
                 variantStyle = {
@@ -125,7 +133,13 @@ export function useCompoundVariantStyles({
 
 // Helpers ---------------------------------------------------------------------
 
-function variantPropsEqual(variants, props) {
+type VariantValue = { [key: string]: string } | string;
+type Optional<Value> = Value | undefined;
+
+function variantPropsEqual(
+  variants: Record<string, Optional<VariantValue>>,
+  props: Record<string, Optional<VariantValue>>
+): boolean {
   const variantKeys = Object.keys(variants);
   for (let i = 0; i < variantKeys.length; i++) {
     const key = variantKeys[i];
@@ -134,8 +148,11 @@ function variantPropsEqual(variants, props) {
   return true;
 }
 
-function useStableVariantProps(variants, props) {
-  const propsRef = useRef();
+function useStableVariantProps(
+  variants: Record<string, Optional<VariantValue>>,
+  props: Record<string, Optional<VariantValue>>
+) {
+  const propsRef = useRef<Record<string, Optional<VariantValue>>>();
 
   if (!propsRef.current || !variantPropsEqual(variants, propsRef.current)) {
     propsRef.current = props;