From 9f417138f21bd433783d8e95b922d391ced089e9 Mon Sep 17 00:00:00 2001
From: mauroerta <mauro.erta@gmail.com>
Date: Sun, 11 Jul 2021 15:35:49 +0200
Subject: [PATCH] fix: styled-components-web packages

closes #42
---
 apps/web-sandbox/src/components/Button.tsx           |  4 +++-
 packages/core/src/theme/components.ts                |  8 +++++---
 packages/styled-components-web/src/styled.ts         | 12 +++++-------
 packages/styled-components-web/tests/styled.test.tsx |  6 ++++++
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/web-sandbox/src/components/Button.tsx b/apps/web-sandbox/src/components/Button.tsx
index 1f7350ef..d3e6a654 100644
--- a/apps/web-sandbox/src/components/Button.tsx
+++ b/apps/web-sandbox/src/components/Button.tsx
@@ -1,3 +1,5 @@
 import styled from '@morfeo/styled-components-web';
 
-export const Button = styled.Button({});
+export const Button = styled.button({
+  componentName: 'Button',
+});
diff --git a/packages/core/src/theme/components.ts b/packages/core/src/theme/components.ts
index b0f3dc62..101a80c1 100644
--- a/packages/core/src/theme/components.ts
+++ b/packages/core/src/theme/components.ts
@@ -1,7 +1,9 @@
-import { Component, ComponentConfig, Variant } from '@morfeo/spec';
+import { Component, ComponentConfig, Style, Variant } from '@morfeo/spec';
 import { deepMerge } from '../utils';
 import theme from './theme';
 
+type ComponentStyle = Omit<ComponentConfig, 'variants'>;
+
 type GetConfigProperty<C extends Component> = {
   name: C;
   variant?: Variant<C>;
@@ -55,7 +57,7 @@ export function component<C extends Component>(name: C, variant?: Variant<C>) {
     return getConfig({ name, variant, property: 'tag' });
   }
 
-  function getStyle() {
+  function getStyle(): Style {
     return getConfig({ name, variant, property: 'style' });
   }
 
@@ -63,7 +65,7 @@ export function component<C extends Component>(name: C, variant?: Variant<C>) {
     return getConfig({ name, variant, property: 'props' });
   }
 
-  function getVariants() {
+  function getVariants(): Record<Variant<C>, ComponentStyle> {
     return getConfig({ name, property: 'variants' });
   }
 
diff --git a/packages/styled-components-web/src/styled.ts b/packages/styled-components-web/src/styled.ts
index ad61f06c..697882e7 100644
--- a/packages/styled-components-web/src/styled.ts
+++ b/packages/styled-components-web/src/styled.ts
@@ -1,4 +1,4 @@
-import { parsers, theme, Theme, Style, Component } from '@morfeo/react';
+import { parsers, component, Theme, Style, Component } from '@morfeo/react';
 import styled, { ThemedStyledFunction } from 'styled-components';
 import { MorfeoStyled, ComponentTag } from './types';
 
@@ -18,11 +18,9 @@ export function attributesParser<P extends Style>(
   props: P,
   componentName: Component,
 ) {
-  const {
-    tag: componentTag,
-    props: componentProps = {},
-    variants = {},
-  } = theme.getValue('components', componentName);
+  const { tag: componentTag, props: componentProps = {} } =
+    component(componentName).get() || {};
+  const variants = component(componentName).getVariants();
   const variant = props.variant || componentProps.variant;
   if (!variant || !variants || !variants[variant]) {
     return {
@@ -50,7 +48,7 @@ function getDisplayName(componentName: string, variant?: string) {
 }
 
 const morfeoStyledHandler: MorfeoStyled = ((tag: ComponentTag) => {
-  const { tag: themeTag } = theme.getValue('components', tag as any) || {};
+  const { tag: themeTag } = component(tag as any).get() || {};
   const componentTag = themeTag || tag;
   const styledFunction =
     (styled[componentTag] as ThemedStyledFunction<
diff --git a/packages/styled-components-web/tests/styled.test.tsx b/packages/styled-components-web/tests/styled.test.tsx
index 00d5870c..42452edc 100644
--- a/packages/styled-components-web/tests/styled.test.tsx
+++ b/packages/styled-components-web/tests/styled.test.tsx
@@ -101,4 +101,10 @@ describe('morfeoStyled', () => {
     const tree = renderer.create(<Incomplete />).toJSON();
     expect(tree).toHaveProperty('type', 'div');
   });
+
+  test('should create a component if the specified tag is valid but not related to a theme component', () => {
+    const RegularButton = morfeoStyled.button({});
+    const tree = renderer.create(<RegularButton />).toJSON();
+    expect(tree).toHaveProperty('type', 'button');
+  });
 });