fix: styled-components-web packages

closes #42
morfeojs · Jul 11, 2021 · 9f41713 · 9f41713
1 parent ae4697d
commit 9f41713
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git 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
@@ -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,15 +57,15 @@ 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' });
   }
 
   function getProps() {
     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
@@ -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
@@ -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');
+  });
 });