chore: reorganize ui packages

examples/storybook-5/.storybook/main.js

@@ -18,8 +18,8 @@ module.exports = {
     },  
   ],
   stories: [
-    '../../../core/editors/src/**/*.stories.(js|tsx|mdx)',
-    '../../../blocks/core/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/block-components/src/**/*.stories.(js|tsx|mdx)',
     '../src/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [

lerna.json

@@ -3,7 +3,7 @@
   "packages": [
     "core/**/*",
     "integrations/**/*",
-    "blocks/**/*"
+    "ui/**/*"
   ],
   "version": "0.6.0",
   "npmClient": "yarn",

package.json

@@ -78,7 +78,7 @@
     "packages": [
       "core/*",
       "integrations/*",
-      "blocks/*",
+      "ui/*",
       "examples/*"
     ]
   }

blocks/core/src/ControlsTable/ControlsTable.stories.tsx → ui/block-components/src/ControlsTable/ControlsTable.stories.tsx

@@ -10,7 +10,7 @@ import {
 import { ControlsTable } from './ControlsTable';
 
 export default {
-  title: 'Blocks/ControlsTable',
+  title: 'Blocks/Components/ControlsTable',
   component: ControlsTable,
 };
 

blocks/core/src/ControlsTable/PropEditorRow.tsx → ui/block-components/src/ControlsTable/PropEditorRow.tsx

@@ -10,7 +10,6 @@ import {
 } from '@component-controls/specification';
 import styled from '@emotion/styled';
 import { LoadedComponentControl } from '@component-controls/core';
-
 import { getPropertyEditor, PropertyEditor } from '@component-controls/editors';
 
 const StyledTR = styled.tr<{}>(({ theme }) => ({

blocks/core/src/Source/Source.stories.tsx → ui/block-components/src/Source/Source.stories.tsx

@@ -1,13 +1,28 @@
 import React from 'react';
+import shadesOfPurple from 'prism-react-renderer/themes/shadesOfPurple';
 import { Source, SourceProps } from './Source';
 
 export default {
-  title: 'Blocks/Source',
+  title: 'Blocks/Components/Source',
   component: Source,
 };
 
-export const simpleSource = ({ language, source, dark }: SourceProps) => {
-  return <Source language={language} source={source} dark={dark} />;
+const source = `export const sample = () => {
+  const [state, setState] = React.useState(false);
+  return (
+    <BooleanEditor
+      name="prop"
+      onChange={(name, newVal) => setState(newVal)}
+      prop={{ type: ControlTypes.BOOLEAN, value: state }}
+    />
+  );
+};`;
+export const simpleSource = ({ language, children, dark }: SourceProps) => {
+  return (
+    <Source language={language} dark={dark}>
+      {children}
+    </Source>
+  );
 };
 
 const languages: string[] = [
@@ -53,18 +68,11 @@ simpleSource.story = {
       children: {
         type: 'text',
         rows: 10,
-        value: `export const sample = () => {
-  const [state, setState] = React.useState(false);
-  return (
-    <BooleanEditor
-      name="prop"
-      onChange={(name, newVal) => setState(newVal)}
-      prop={{ type: ControlTypes.BOOLEAN, value: state }}
-    />
-  );
-};`,
+        value: source,
         data: null,
       },
     },
   },
 };
+
+export const theme = () => <Source theme={shadesOfPurple}>{source}</Source>;

blocks/core/src/StorySource/StorySource.stories.tsx → ui/block-components/src/StorySource/StorySource.stories.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { ControlTypes } from '@component-controls/specification';
-import { StorySource, SourceProps, themes } from './StorySource';
+import { StorySource, StorySourceProps, themes } from './StorySource';
 
 export default {
-  title: 'Blocks/StorySource',
+  title: 'Blocks/Components/StorySource',
   component: StorySource,
 };
 
-export const simpleSource = ({ language, children, theme }: SourceProps) => {
+export const simpleSource = ({
+  language,
+  children,
+  theme,
+}: StorySourceProps) => {
   return (
     <StorySource language={language} theme={theme}>
       {children}

ui/blocks-core/src/ControlsTable/PropEditorRow.tsx

@@ -0,0 +1,74 @@
+/** @jsx jsx */
+/* eslint react/jsx-key: 0 */
+import { jsx } from 'theme-ui';
+
+import React from 'react';
+import { Flex } from 'theme-ui';
+import {
+  SetControlValueFn,
+  ClickControlFn,
+} from '@component-controls/specification';
+import styled from '@emotion/styled';
+import { LoadedComponentControl } from '@component-controls/core';
+import { getPropertyEditor, PropertyEditor } from './node_modules/@component-controls/editors';
+
+const StyledTR = styled.tr<{}>(({ theme }) => ({
+  //@ts-ignore
+  ...theme?.styles?.tr,
+}));
+
+const StyledTD = styled.td<{}>(({ theme }) => ({
+  //@ts-ignore
+  ...theme?.styles?.td,
+}));
+
+const InvalidType = () => <span>Invalid Type</span>;
+
+interface PropertyEditorRowProps {
+  prop: LoadedComponentControl;
+  name: string;
+  storyId?: string;
+  setControlValue?: SetControlValueFn;
+  clickControl?: ClickControlFn;
+}
+
+export const PropertyEditorRow: React.FunctionComponent<PropertyEditorRowProps> = ({
+  prop,
+  name,
+  setControlValue,
+  clickControl,
+  storyId,
+}) => {
+  const InputType: PropertyEditor = getPropertyEditor(prop.type) || InvalidType;
+  const onChange = (propName: string, value: any) => {
+    if (setControlValue && storyId) {
+      setControlValue(storyId, propName, value);
+    }
+  };
+  const onClick = () => {
+    if (clickControl && storyId) {
+      clickControl(storyId, name);
+    }
+  };
+  return (
+    <StyledTR>
+      <StyledTD>{!prop.hideLabel ? prop.label || name : null}</StyledTD>
+      <StyledTD>
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            alignItems: 'left',
+            flexBasis: '100%',
+          }}
+        >
+          <InputType
+            prop={prop}
+            name={name}
+            onChange={onChange}
+            onClick={onClick}
+          />
+        </Flex>
+      </StyledTD>
+    </StyledTR>
+  );
+};

ui/blocks-core/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "../block-components/dist",
+    "rootDir": "../block-components/src",
+    "declaration": true,
+    "types": ["node", "jest"],
+    "typeRoots": ["../../node_modules/@types", "../block-components/node_modules/@types"]
+  },
+  "include": ["../block-components/src/**/*", "../block-components/src/typings.d.ts"],
+  "exclude": ["../block-components/node_modules/**"]
+}