Merge pull request #4 from roginfarrer/improve-theme-typing

Improve theme typing
system-props · Dec 3, 2020 · 3caac00 · 3caac00
2 parents 5d162a9 + e46ee6b
commit 3caac00
Show file tree

Hide file tree

Showing 41 changed files with 6,125 additions and 518 deletions.
diff --git a/examples/emotion/Box.tsx b/examples/emotion/Box.tsx
@@ -0,0 +1,39 @@
+import {
+  createSystem,
+  color,
+  PseudoProps,
+  AllSystemProps,
+  SystemProp,
+  border,
+  space,
+  layout,
+  position,
+  shadow,
+  background,
+  flexbox,
+  grid,
+  shouldForwardProp,
+} from 'system-props';
+import styled from '@emotion/styled';
+import * as CSS from 'csstype';
+
+const system = createSystem();
+
+interface BoxProps extends AllSystemProps, PseudoProps<AllSystemProps> {
+  transform?: SystemProp<CSS.Property.Transform>;
+}
+
+export const Box = styled('div', { shouldForwardProp })<BoxProps>(
+  system({
+    ...color,
+    ...border,
+    ...background,
+    ...flexbox,
+    ...grid,
+    ...shadow,
+    ...position,
+    ...layout,
+    ...space,
+    transform: true,
+  })
+);
diff --git a/examples/emotion/emotion.d.ts b/examples/emotion/emotion.d.ts
@@ -0,0 +1,6 @@
+import '@emotion/react';
+import { AppTheme } from './theme';
+
+declare module '@emotion/react' {
+  export interface Theme extends AppTheme {}
+}
diff --git a/examples/emotion/index.tsx b/examples/emotion/index.tsx
@@ -1,87 +1,34 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {
-  createSystem,
-  color,
-  ResponsiveProp,
-  PseudoProps,
-  SystemProps,
-  border,
-  space,
-  layout,
-  position,
-  shadow,
-  background,
-  flexbox,
-  grid,
-} from 'system-props';
-import styled from '@emotion/styled';
-import { ThemeProvider } from 'emotion-theming';
-import * as CSS from 'csstype';
-
-const theme = {
-  breakpoints: ['42em', '52em', '60em'],
-  space: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '28px', '32px'],
-  colors: {
-    gray: {
-      10: '#333',
-      20: '#666',
-      30: '#999',
-    },
-    blue: {
-      10: 'skyblue',
-      20: 'teal',
-      30: 'blue',
-    },
-  },
-} as const;
-
-const system = createSystem();
-
-interface BoxProps extends SystemProps, PseudoProps<SystemProps> {
-  transform?: ResponsiveProp<CSS.Property.Transform>;
-}
-
-const Box = styled.div<BoxProps>(
-  system({
-    ...color,
-    ...border,
-    ...background,
-    ...flexbox,
-    ...grid,
-    ...shadow,
-    ...position,
-    ...layout,
-    ...space,
-    transform: true,
-  })
-);
+import { ThemeProvider } from '@emotion/react';
+import { theme } from './theme';
+import { Box } from './Box';
 
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <Box
-        color="$blue.10"
-        bg={(t: typeof theme) => t.colors.gray[10]}
-        padding="$2 $8"
+        color="$blue10"
+        bg={(t) => t.colors.gray10}
+        padding="$2 $4"
         border="1px solid rgba(0, 0, 0, 0.1)"
-        mb="$6"
+        mb="$4"
         transform="rotate(1deg)"
       >
         Hello
       </Box>
-      <Box bg="$gray.20" marginTop="-$2" mb={4} padding="$2">
+      <Box bg="$gray20" marginTop="-$2" mb="$4" padding="$2">
         Welcome
       </Box>
       <Box
-        bg="blue.20"
+        bg="blue20"
         padding="$2"
-        boxShadow="0px 1px 3px $blue.10"
-        _hover={{ bg: 'blue.10' }}
+        boxShadow="0px 1px 3px $blue10"
+        _hover={{ bg: 'blue10' }}
       >
         Welcome
       </Box>
-      <Box p={4} bg="red">
+      <Box p="$4" bg="red">
         Welcome
       </Box>
     </ThemeProvider>

diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -8,18 +8,17 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
-    "emotion-theming": "^10.0.27",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "react": "^16",
     "react-dom": "^16",
-    "system-props": "../../dist"
+    "system-props": "latest"
   },
   "devDependencies": {
     "@types/react": "^16",
     "@types/react-dom": "^16",
     "csstype": "^3.0.5",
     "parcel": "^1.12.3",
-    "typescript": "^4.0.0"
+    "typescript": "^4.1.0"
   }
 }
diff --git a/examples/emotion/system-props.d.ts b/examples/emotion/system-props.d.ts
@@ -0,0 +1,6 @@
+import 'system-props';
+import { AppTheme } from './theme';
+
+declare module 'system-props' {
+  export interface Theme extends AppTheme {}
+}
diff --git a/examples/emotion/theme.ts b/examples/emotion/theme.ts
@@ -0,0 +1,45 @@
+export interface AppTheme {
+  colors: {
+    gray10: string;
+    gray20: string;
+    gray30: string;
+    blue10: string;
+    blue20: string;
+    blue30: string;
+  };
+  space: {
+    $0: string;
+    $1: string;
+    $2: string;
+    $3: string;
+    $4: string;
+  };
+  breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+  };
+}
+
+export const theme: AppTheme = {
+  colors: {
+    gray10: '#333',
+    gray20: '#666',
+    gray30: '#999',
+    blue10: 'skyblue',
+    blue20: 'teal',
+    blue30: 'blue',
+  },
+  space: {
+    $0: '0px',
+    $1: '4px',
+    $2: '8px',
+    $3: '12px',
+    $4: '16px',
+  },
+  breakpoints: {
+    small: '42em',
+    medium: '52em',
+    large: '60em',
+  },
+};
diff --git a/examples/emotion/tsconfig.json b/examples/emotion/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
+    "esModuleInterop": true,
     "target": "es5",
     "module": "commonjs",
     "jsx": "react",
@@ -13,10 +13,6 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "lib": ["es2015", "es2016", "dom"],
-    "types": ["node"],
-    "baseUrl": ".",
-    "paths": {
-      "system-props": ["../../dist/*"]
-    }
+    "types": ["node"]
   }
 }