feat: all css props mapped and styled components package improved

apps/native-sandbox/src/App.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { SafeAreaView, View, LogBox } from 'react-native';
-import { theme, Style } from '@morfeo/native';
+import { SafeAreaView, LogBox } from 'react-native';
+import { theme, parsers, Style } from '@morfeo/native';
 import { useTheme, useStyle } from '@morfeo/hooks';
-import { ThemeProvider } from 'styled-components/native';
+import styled, { ThemeProvider } from 'styled-components/native';
 import { defaultTheme } from './theme';
 import { Button } from './components';
 
 LogBox.ignoreAllLogs();
 
-theme.set(defaultTheme);
+theme.set(defaultTheme as any);
 
-const Box: React.FC<Style> = ({ children, ...props }) => {
-  const style = useStyle(props);
-  return <View style={style}>{children}</View>;
-};
+const Box = styled.View<Style>(style => parsers.resolve({ style }) as any);
 
 const StyleProvider: React.FC = ({ children }) => {
   const currentTheme = useTheme();
@@ -27,10 +24,6 @@ const App = () => {
     justifyContent: 'center',
   });
 
-  const shadowStyle = useStyle({
-    shadow: 'strong',
-  });
-
   return (
     <StyleProvider>
       <SafeAreaView style={safeAreaStyle}>
@@ -41,7 +34,7 @@ const App = () => {
           flexDirection="row"
           justifyContent="space-evenly"
         >
-          <Button style={shadowStyle}>Default</Button>
+          <Button>Default</Button>
           <Button variant="primary">Primary</Button>
           <Button variant="round" color="white">
             Round

apps/native-sandbox/src/components/Button.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Style, ResolvedStyle } from '@morfeo/native';
-import { withTypography } from './Typography';
 import { Pressable } from 'react-native';
+import { Style, ResolvedStyle } from '@morfeo/native';
 import { useStyle } from '@morfeo/hooks';
+import { withTypography } from './Typography';
 
 type Props = Style & {
   style?: ResolvedStyle;
@@ -13,11 +13,13 @@ export const Button: React.FC<Props> = ({
   children,
   textStyle = {},
   color,
+  style,
   ...props
 }) => {
-  const style = useStyle(props);
+  const defaultStyle = useStyle(props);
+
   return (
-    <Pressable style={style}>
+    <Pressable style={[style, defaultStyle]}>
       {withTypography(children, { ...textStyle, color })}
     </Pressable>
   );

apps/native-sandbox/src/theme/components/button.ts

@@ -4,7 +4,7 @@ export const button = {
     height: 'm',
     bg: 'white',
     borderRadius: 's',
-    borderWidth: 'xxs',
+    shadow: 'strong',
     borderColor: 'grey',
     alignSelf: 'center',
     alignItems: 'center',

apps/native-sandbox/src/theme/theme.ts

@@ -1,3 +1,4 @@
+import { Theme } from '@morfeo/native';
 import { button, typography } from './components';
 import { colors } from './colors';
 import { space } from './space';
@@ -22,4 +23,4 @@ export const defaultTheme = {
     Button: button,
     Typography: typography,
   },
-} as any;
+} as const;

apps/native-sandbox/src/types.d.ts

@@ -1,7 +1,11 @@
 import { colors } from './theme/colors';
+import { defaultTheme } from './theme';
 
 type LocalColors = typeof colors;
+type LocalComponents = typeof defaultTheme.components;
 
 declare module '@morfeo/native' {
   export interface Colors extends LocalColors {}
+
+  export interface Components extends LocalComponents {}
 }

apps/web-sandbox/src/App.tsx

@@ -1,10 +1,10 @@
 import { useState, useCallback, FC } from 'react';
 import styled, { ThemeProvider } from '@morfeo/styled-components-web';
-import { theme, Component } from '@morfeo/web';
+import { theme, Component, Components } from '@morfeo/web';
 import { useTheme, useStyles } from '@morfeo/hooks';
 import { darkTheme, lightTheme } from './theme';
 
-theme.set(lightTheme);
+theme.set(lightTheme as any);
 
 const Button = styled.Button({});
 
@@ -14,7 +14,10 @@ const StyledProvider: FC = ({ children }) => {
   return <ThemeProvider theme={currentTheme}>{children}</ThemeProvider>;
 };
 
-function getStyle(component: Component, variant?: string) {
+function getStyle<C extends Component = Component>(
+  component: C,
+  variant?: keyof Components['Button']['variants'],
+) {
   const { style, variants } = theme.getValue('components', component);
 
   if (variant && variants && variants[variant]) {

apps/web-sandbox/src/theme.ts

@@ -48,6 +48,10 @@ export const lightTheme = {
           color: 'primary',
         },
       },
+      props: {
+        'aria-label': 'button',
+        type: 'submit',
+      },
       variants: {
         primary: {
           bg: 'secondary',
@@ -64,7 +68,7 @@ export const lightTheme = {
       },
     },
   },
-} as any;
+};
 
 export const darkTheme = {
   colors: {

apps/web-sandbox/src/types.d.ts

@@ -0,0 +1,7 @@
+import { lightTheme } from './theme';
+
+type LocalComponents = typeof lightTheme.components;
+
+declare module '@morfeo/web' {
+  export interface Components extends LocalComponents {}
+}