feat: web sandbox improvement

apps/web-sandbox/package.json

@@ -13,13 +13,13 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "react-scripts": "4.0.3",
-    "styled-components": "^5.2.3",
     "web-vitals": "^1.1.1",
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.2.3"
   },
   "scripts": {
     "start": "react-scripts start",

apps/web-sandbox/src/App.tsx

@@ -7,6 +7,7 @@ const lightTheme = {
   colors: {
     primary: 'white',
     secondary: 'black',
+    danger: 'red',
   },
   radii: {
     m: '10px',
@@ -39,7 +40,7 @@ const lightTheme = {
         height: 'm',
         width: 'm',
         bg: {
-          md: 'red',
+          md: 'danger',
           lg: 'primary',
         },
         color: 'secondary',
@@ -111,6 +112,16 @@ const StyledProvider: React.FC = ({ children }) => {
   return <ThemeProvider theme={currentTheme}>{children}</ThemeProvider>;
 };
 
+function getStyle(component: Component, variant?: string) {
+  const { style, variants } = theme.getValue('components', component);
+
+  if (variant && variants && variants[variant]) {
+    return JSON.stringify(variants[variant], undefined, 2);
+  }
+
+  return JSON.stringify(style, undefined, 2);
+}
+
 function App() {
   const [light, setLight] = React.useState(true);
 
@@ -119,6 +130,21 @@ function App() {
     setLight(prev => !prev);
   }, [light]);
 
+  const containerStyle = parsers.resolve({
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      height: '100%' as any,
+    },
+  });
+
+  const codeStyle = parsers.resolve({
+    style: { color: 'primary', display: 'block', py: 's' },
+  });
+
   return (
     <StyledProvider>
       <div
@@ -134,9 +160,18 @@ function App() {
           } as any,
         })}
       >
-        <Button onClick={onClick}>{light ? `🌙` : `☀️`}</Button>
-        <Button variant="primary">Primary variant</Button>
-        <Button variant="round">Round variant</Button>
+        <div style={containerStyle}>
+          <Button onClick={onClick}>{light ? `🌙` : `☀️`}</Button>
+          <pre style={codeStyle}>{getStyle('Button')}</pre>
+        </div>
+        <div style={containerStyle}>
+          <Button variant="primary">Primary variant</Button>
+          <pre style={codeStyle}>{getStyle('Button', 'primary')}</pre>
+        </div>
+        <div style={containerStyle}>
+          <Button variant="round">Round variant</Button>
+          <pre style={codeStyle}>{getStyle('Button', 'round')}</pre>
+        </div>
       </div>
     </StyledProvider>
   );

apps/web-sandbox/src/styled.tsx

@@ -0,0 +1,38 @@
+// import React from 'react';
+// import scStyled, { StyledInterface } from 'styled-components';
+// import { Component, theme, parsers, Style, Theme } from '@morfeo/web';
+
+// const customStyled = (tag: keyof StyledInterface) => {
+//   const callback = <P extends Style & { theme: Theme }>({
+//     theme: styledTheme,
+//     ...style
+//   }: P) => scStyled[tag](parsers.resolve({ style }));
+
+//   const styledKeys = Object.keys(scStyled) as (keyof StyledInterface)[];
+
+//   for (let tag of styledKeys) {
+//     callback[tag] = callback(tag);
+//   }
+
+//   return callback;
+// };
+
+// export function themeComponent(component: Component) {
+//   const { components } = theme.get();
+//   const config = components[component];
+//   const tag = config.style.componentTag || component;
+
+//   return (props: Style = {}) => {
+//     const variant = props.variant;
+//     const variantTag =
+//       variant && config.variants ? config.variants[variant].componentTag : tag;
+
+//     const Component = customStyled(variantTag || tag) as React.FC<Style>;
+
+//     return <Component {...props} />;
+//   };
+// }
+
+// export default customStyled;
+
+export const TEST = {};

package.json

@@ -14,12 +14,13 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:badges": "npm run test:coverage  && jest-coverage-badges"
+    "test:badges": "npm run test:coverage  && jest-coverage-badges",
+    "publish": "npx lerna publish from-package --yes"
   },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",