feat: new package core-blocks

blocks/core/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

blocks/core/.eslintignore

@@ -0,0 +1 @@
+dist

blocks/core/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'docz-ts',
+}

blocks/core/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

blocks/core/README.md

@@ -0,0 +1 @@
+# Componnet Control Editors

blocks/core/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@component-controls/blocks-core",
+  "version": "0.6.0",
+  "description": "Core blocks for component controls",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development yarn build -w",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest --passWithNoTests"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "core/specification"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/core": "^0.6.0",
+    "@component-controls/editors": "^0.6.0",
+    "@component-controls/specification": "^0.6.0",
+    "copy-to-clipboard": "^3.2.1",
+    "global": "^4.3.2",
+    "polished": "^3.4.4",
+    "prism-react-renderer": "^1.0.2",
+    "qs": "^6.9.1",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-tabs": "^3.1.0",
+    "theme-ui": "^0.3.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^25.1.2",
+    "@types/qs": "^6.9.1",
+    "@types/react-tabs": "^2.3.1",
+    "@types/theme-ui": "^0.3.0",
+    "cross-env": "^5.2.1",
+    "docz-rollup": "^2.1.0",
+    "eslint": "^6.5.1",
+    "eslint-config-docz-ts": "^2.1.0",
+    "jest": "^24.9.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ]
+}

blocks/core/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from 'docz-rollup';
+
+export default config({
+  input: './src/index.ts',
+});

blocks/core/src/ActionBar/ActionBar.tsx

@@ -0,0 +1,86 @@
+import React, { FunctionComponent, MouseEvent } from 'react';
+import styled from '@emotion/styled';
+import { Theme } from 'theme-ui';
+
+interface ContainerProps {
+  zIndex?: number;
+}
+const Container = styled.div<ContainerProps>(
+  ({ theme, zIndex = 1 }: { theme: Theme } & ContainerProps) => ({
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    maxWidth: '100%',
+    display: 'flex',
+    background: theme?.colors?.background,
+    zIndex,
+  }),
+);
+
+interface ActionButtonProps {
+  disabled?: boolean;
+}
+export const ActionButton = styled.button<ActionButtonProps>(
+  ({ theme }: { theme: Theme } & ActionButtonProps) => ({
+    border: '0 none',
+    padding: '4px 10px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    color: theme?.colors?.text,
+    background: theme?.colors?.background,
+
+    fontSize: 12,
+    lineHeight: '16px',
+    fontWeight: 'bold',
+
+    borderTop: `1px solid ${theme?.colors?.muted}`,
+    borderLeft: `1px solid ${theme?.colors?.muted}`,
+    marginLeft: -1,
+
+    borderRadius: `4px 0 0 0`,
+
+    '&:not(:last-child)': { borderRight: `1px solid ${theme?.colors?.muted}` },
+    '& + *': {
+      borderLeft: `1px solid ${theme?.colors?.muted}`,
+      borderRadius: 0,
+    },
+
+    '&:focus': {
+      boxShadow: `${theme?.colors?.secondary} 0 -3px 0 0 inset`,
+      outline: '0 none',
+    },
+  }),
+  ({ disabled }) =>
+    disabled && {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+);
+ActionButton.displayName = 'ActionButton';
+
+export interface ActionItem {
+  title: string | JSX.Element;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}
+
+export interface ActionBarProps {
+  actionItems: ActionItem[];
+  zIndex?: number;
+}
+
+export const ActionBar: FunctionComponent<ActionBarProps> = ({
+  actionItems,
+  zIndex,
+  ...props
+}) => (
+  <Container zIndex={zIndex} {...props}>
+    {actionItems.map(({ title, onClick, disabled }, index: number) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <ActionButton key={index} onClick={onClick} disabled={disabled}>
+        {title}
+      </ActionButton>
+    ))}
+  </Container>
+);

blocks/core/src/ActionBar/index.ts

@@ -0,0 +1 @@
+export * from './ActionBar';

blocks/core/src/BlockContainer/index.ts

@@ -0,0 +1 @@
+export * from './BlockContainer';

core/editors/src/forms/ControlsTable/ControlEditorsTable.stories.tsx → blocks/core/src/ControlsTable/ControlsTable.stories.tsx

@@ -7,11 +7,11 @@ import {
   loadControls,
 } from '@component-controls/core';
 
-import { ControlsEditorsTable } from './ControlEditorsTable';
+import { ControlsTable } from './ControlsTable';
 
 export default {
-  title: 'Table',
-  component: ControlsEditorsTable,
+  title: 'Blocks/ControlsTable',
+  component: ControlsTable,
 };
 
 export const simple = () => {
@@ -38,7 +38,7 @@ export const simple = () => {
   return (
     <>
       <h2>{`Hello, my name is ${controls.name.value}, and I am ${controls.age.value} years old.`}</h2>
-      <ControlsEditorsTable
+      <ControlsTable
         controls={controls as LoadedComponentControls}
         title="Example controls"
         storyId="1-11"
@@ -250,7 +250,7 @@ export const advanced = () => {
           When I am happy I look like this: <img src={images[0]} alt="happy" />
         </p>
       </div>
-      <ControlsEditorsTable
+      <ControlsTable
         controls={controls as LoadedComponentControls}
         title="Complex controls"
         storyId="1-12"

core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx → blocks/core/src/ControlsTable/ControlsTable.tsx

@@ -4,20 +4,39 @@ import styled from '@emotion/styled';
 import { Theme } from 'theme-ui';
 import qs from 'qs';
 import copy from 'copy-to-clipboard';
+import {
+  SetControlValueFn,
+  ClickControlFn,
+} from '@component-controls/specification';
 import {
   resetControlValues,
   getControlValues,
   LoadedComponentControls,
   LoadedComponentControl,
 } from '@component-controls/core';
 
-import { BlockContainer } from '../../blocks/BlockContainer/BlockContainer';
-import { Tab, Tabs, TabList, TabPanel } from '../../components/Tabs/Tabs';
-import { ControlsEditorsTableProps } from '../../editors/types';
-import { ActionBar } from '../../components/ActionBar/ActionBar';
+import { BlockContainer } from '../BlockContainer';
+import { Tab, Tabs, TabList, TabPanel } from '../Tabs';
+import { ActionBar } from '../ActionBar';
 
 import { PropertyEditorRow } from './PropEditorRow';
 
+export interface ExtraControlAction {
+  title: string;
+  onAction: (props: ControlsTableProps) => void;
+}
+
+export type ExtraControlActions = ExtraControlAction[];
+
+export interface ControlsTableProps {
+  title?: string;
+  storyId?: string;
+  controls?: LoadedComponentControls;
+  setControlValue?: SetControlValueFn;
+  clickControl?: ClickControlFn;
+  extraActions?: ExtraControlActions;
+}
+
 const StyleTable = styled.table<{}>(({ theme }) => ({
   '&&': {
     //@ts-ignore
@@ -52,7 +71,7 @@ const PropEditorsTitle = styled.div<{}>(({ theme }: { theme: Theme }) => ({
 
 const DEFAULT_GROUP_ID = 'Other';
 
-const PropGroupTable: FC<ControlsEditorsTableProps> = ({
+const PropGroupTable: FC<ControlsTableProps> = ({
   controls,
   storyId,
   setControlValue,
@@ -93,7 +112,7 @@ interface GroupedControlsType {
   [key: string]: LoadedComponentControls;
 }
 
-export const ControlsEditorsTable: FC<ControlsEditorsTableProps & {
+export const ControlsTable: FC<ControlsTableProps & {
   title?: string;
 }> = props => {
   const [copied, setCopied] = React.useState(false);

core/editors/src/forms/ControlsTable/PropEditorRow.tsx → blocks/core/src/ControlsTable/PropEditorRow.tsx

@@ -1,14 +1,13 @@
 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 } from '../../editors/prop-factory';
-import { FlexContainer } from '../../components/FlexContainer/FlexContainer';
-import { PropertyEditor } from '../../editors/types';
+import { getPropertyEditor, PropertyEditor } from '@component-controls/editors';
 
 const StyledTR = styled.tr<{}>(({ theme }) => ({
   //@ts-ignore
@@ -52,14 +51,20 @@ export const PropertyEditorRow: React.FunctionComponent<PropertyEditorRowProps>
     <StyledTR>
       <StyledTD>{!prop.hideLabel ? prop.label || name : null}</StyledTD>
       <StyledTD>
-        <FlexContainer align="left">
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            alignItems: 'left',
+            flexBasis: '100%',
+          }}
+        >
           <InputType
             prop={prop}
             name={name}
             onChange={onChange}
             onClick={onClick}
           />
-        </FlexContainer>
+        </Flex>
       </StyledTD>
     </StyledTR>
   );

blocks/core/src/ControlsTable/index.ts

@@ -0,0 +1 @@
+export { ControlsTable, ControlsTableProps } from './ControlsTable';

core/editors/src/blocks/Source/Source.stories.tsx → blocks/core/src/Source/Source.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Source, SourceProps, themes } from './Source';
 
 export default {
-  title: 'Components/Source',
+  title: 'Blocks/Source',
   component: Source,
 };
 

core/editors/src/blocks/Source/Source.tsx → blocks/core/src/Source/Source.tsx

@@ -18,8 +18,8 @@ import ultramin from 'prism-react-renderer/themes/ultramin';
 import vsDark from 'prism-react-renderer/themes/vsDark';
 import { Styled } from 'theme-ui';
 import copy from 'copy-to-clipboard';
-import { ActionBar } from '../../components/ActionBar/ActionBar';
-import { BlockContainer } from '../BlockContainer/BlockContainer';
+import { ActionBar } from '../ActionBar';
+import { BlockContainer } from '../BlockContainer';
 
 export type ThemeType =
   | 'nightowl-light'

blocks/core/src/Source/index.ts

@@ -0,0 +1 @@
+export * from './Source';