feat: web styled-components package introduced

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 build
+__snapshots__
 
 # dependencies
 node_modules

apps/web-sandbox/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@morfeo/hooks": "^0.0.3",
     "@morfeo/web": "^0.0.3",
+    "@morfeo/styled-components-web": "^0.0.3",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",

apps/web-sandbox/src/App.tsx

@@ -1,13 +1,12 @@
 import { useState, useCallback, FC } from 'react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from '@morfeo/styled-components-web';
 import { theme, Component } from '@morfeo/web';
 import { useTheme, useStyles } from '@morfeo/hooks';
-import { customStyled } from './styled';
 import { darkTheme, lightTheme } from './theme';
 
 theme.set(lightTheme);
 
-const Button = customStyled('Button');
+const Button = styled.Button({});
 
 const StyledProvider: FC = ({ children }) => {
   const currentTheme = useTheme();

package.json

@@ -12,9 +12,9 @@
     "prettify": "npm run prettify:js && npm run prettify:ts",
     "prettify:js": "npx prettier --write \"**/*.js\"",
     "prettify:ts": "npx prettier --write \"**/*.ts\"",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test": "jest --updateSnapshot",
+    "test:watch": "jest --watch --updateSnapshot",
+    "test:coverage": "jest --coverage --updateSnapshot",
     "test:badges": "npm run test:coverage  && jest-coverage-badges",
     "publish": "npx lerna publish from-package --yes",
     "version": "npx lerna version patch --no-push --no-git-tag-version --conventional-commits"

packages/core/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "main": "build/index.js",
   "module": "build/index.js",
-  "types": "build/index",
-  "typings": "build/index",
+  "types": "src/index",
+  "typings": "src/index",
   "keywords": [
     "design",
     "system"

packages/core/src/parsers/parsers.ts

@@ -41,7 +41,6 @@ const ADDITIONAL_PARSERS = {
 const INITIAL_PARSERS = {
   ...DEFAULT_PARSERS,
   ...ADDITIONAL_PARSERS,
-  children: () => ({}),
 };
 
 type ParsersContext = {

packages/core/tests/parsers/components.test.ts

@@ -38,7 +38,7 @@ describe('components', () => {
       property: 'componentName',
       value: 'Button',
     });
-    expect(result.componentTag).not.toBeDefined();
+    expect((result as any).componentTag).not.toBeDefined();
   });
 
   test('should return the default components style', () => {

packages/core/tests/parsers/shadows.test.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@morfeo/spec';
 import { shadows } from '../../src/parsers/shadows';
-import { theme } from '../../src';
+import { parsers, theme } from '../../src';
 
 const THEME: Theme = {
   colors: {
@@ -55,6 +55,13 @@ describe('shadows', () => {
     });
   });
 
+  test('should generate the property `boxShadow` if the prop `shadow` is passed', () => {
+    const result = parsers.resolve({ style: { shadow: 'strong' } });
+    expect(result).toEqual({
+      boxShadow: '10px 10px 30px white',
+    });
+  });
+
   test('should generate the property `boxShadow` based on the light shadow', () => {
     const result = shadows({ property: 'boxShadow', value: 'light' });
     expect(result).toEqual({

packages/hooks/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "main": "build/index.js",
   "module": "build/index.js",
-  "types": "build/index",
-  "typings": "build/index",
+  "types": "src/index",
+  "typings": "src/index",
   "keywords": [
     "design",
     "system"
@@ -20,7 +20,7 @@
     "watch": "tsc -w"
   },
   "peerDependencies": {
-    "@morfeo/core": "^0.0.1",
+    "@morfeo/core": "^0.0.3",
     "react": "17.0.2",
     "react-dom": "^17.0.2"
   },

packages/native/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "main": "build/index.js",
   "module": "build/index.js",
-  "types": "build/index",
-  "typings": "build/index",
+  "types": "src/index",
+  "typings": "src/index",
   "keywords": [
     "design",
     "system",

packages/native/src/parsers/shadows.ts

@@ -1,6 +1,7 @@
 import {
-  parsers,
   theme,
+  parsers,
+  Style,
   Shadows,
   ParserParams,
   ShadowProperty,
@@ -43,17 +44,8 @@ export function shadowOffset({ value }) {
 }
 
 export function shadows({ value }: ParserParams<ShadowProperty>) {
-  if (
-    !theme ||
-    !theme.getSlice('shadows') ||
-    !theme.getValue('shadows', value as keyof Shadows)
-  ) {
-    return {};
-  }
-  const { color, offset, opacity, radius, elevation } = theme.getValue(
-    'shadows',
-    value as keyof Shadows,
-  );
+  const { color, offset, opacity, radius, elevation } =
+    theme.getValue('shadows', value as keyof Shadows) || {};
 
   return parsers.resolve({
     style: {
@@ -62,6 +54,6 @@ export function shadows({ value }: ParserParams<ShadowProperty>) {
       ...(offset ? { shadowOffset: offset } : {}),
       ...(radius ? { shadowRadius: radius } : {}),
       ...(opacity ? { shadowOpacity: opacity } : {}),
-    } as any,
+    } as Style,
   });
 }

packages/native/src/types/core.ts

@@ -1,20 +1,27 @@
 import { Color, Opacity, Space } from '@morfeo/core';
 import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
 
-type CustomNativeProperties = {
+type CustomNativeStyle = {
   shadowColor?: Color;
   shadowOffset?: Space;
-  shadowRadius?: number;
+  shadowRadius?: Space;
   shadowOpacity?: Opacity;
 };
 
+type CustomNativeProperties = {
+  shadowColor: 'colors';
+  shadowOffset: 'space';
+  shadowRadius: 'space';
+  shadowOpacity: 'opacities';
+};
+
 type NativeStyle = ViewStyle & ImageStyle & TextStyle;
 
-type NativeCustomStyle = Omit<NativeStyle, keyof CustomNativeProperties> &
-  CustomNativeProperties;
+type NativeCustomStyle = Omit<NativeStyle, keyof CustomNativeStyle> &
+  CustomNativeStyle;
 
 interface NativeShadowConfig {
-  elevation?: number;
+  elevation?: Space;
 }
 
 declare module '@morfeo/core' {

packages/native/tests/shadows.test.ts

@@ -0,0 +1,115 @@
+import { parsers, theme } from '../src';
+import { shadowOffset } from '../src/parsers';
+
+const THEME = {
+  colors: {
+    primary: 'black',
+    secondary: 'white',
+  },
+  space: {
+    s: 10,
+    m: 20,
+  },
+  sizes: {
+    l: 30,
+    xl: 40,
+  },
+  shadows: {
+    strong: {
+      color: 'primary',
+      offset: { height: 's', width: 's' },
+      opacity: 0.4,
+      radius: 30,
+    },
+    light: {
+      color: 'secondary',
+      offset: { width: 'xl' },
+      opacity: 0.4,
+      radius: 30,
+    },
+    medium: {
+      elevation: 2,
+      color: 'secondary',
+      offset: { height: 30 },
+      opacity: 0.4,
+    },
+    custom: {
+      color: 'not inside theme',
+      offset: undefined,
+    },
+    noOffset: {
+      offset: {},
+    },
+  },
+} as any;
+
+afterAll(() => {
+  theme.set(THEME);
+});
+
+describe('shadows', () => {
+  beforeAll(() => {
+    theme.set(THEME);
+  });
+  afterAll(() => {
+    theme.reset();
+  });
+
+  test('should generate the property `boxShadow` based on the strong shadow', () => {
+    const result = parsers.resolve({ style: { shadow: 'strong' } });
+    expect(result).toEqual({
+      shadowColor: 'black',
+      shadowOffset: { height: 10, width: 10 },
+      shadowOpacity: 0.4,
+      shadowRadius: 30,
+    });
+  });
+
+  test('should generate the property `shadow` based on the light shadow', () => {
+    const result = parsers.resolve({ style: { shadow: 'light' } });
+    expect(result).toEqual({
+      shadowColor: 'white',
+      shadowOffset: { height: 0, width: 40 },
+      shadowOpacity: 0.4,
+      shadowRadius: 30,
+    });
+  });
+
+  test('should generate the property `shadow` based on the medium shadow', () => {
+    const result = parsers.resolve({ style: { shadow: 'medium' } });
+    expect(result).toEqual({
+      elevation: 2,
+      shadowColor: 'white',
+      shadowOffset: { height: 30, width: 0 },
+      shadowOpacity: 0.4,
+    });
+  });
+
+  test('should return an empty object if the shadow is not found', () => {
+    const result = parsers.resolve({ style: { shadow: 'none' } });
+    expect(result).toEqual({});
+  });
+
+  test('should use custom colors if they are not inside the theme', () => {
+    const result = parsers.resolve({
+      style: { shadow: 'custom' as any },
+    });
+    expect(result).toEqual({
+      shadowColor: 'not inside theme',
+    });
+  });
+
+  test('should not put any value with any empty configuration', () => {
+    const result = parsers.resolve({
+      style: { shadow: 'noOffset' as any },
+    });
+    expect(result).toEqual({});
+  });
+
+  test('should return an empty object if `shadowOffset` is undefined', () => {
+    const result = shadowOffset({
+      value: undefined,
+    });
+    expect(result).toEqual({});
+  });
+});

packages/spec/package.json

@@ -9,8 +9,8 @@
   "license": "MIT",
   "main": "build/index.js",
   "module": "build/index.js",
-  "types": "build/index",
-  "typings": "build/index",
+  "types": "src/index",
+  "typings": "src/index",
   "keywords": [
     "design",
     "system"