feat: add color picker (#763)

* feat: add control color picker * fix: improve property color’s outside click event * fix: align box visually with inputs * fix: remove color from property item state * refactor: remove state from color picker * fix: hide unchangeable color picker properties * fix: add proper padding in color picker
meetalva · Mar 27, 2019 · 023bad2 · 023bad2 · marionebl · Mar 27, 2019
1 parent bd0dd37
commit 023bad2
Show file tree

Hide file tree

Showing 27 changed files with 520 additions and 1,866 deletions.
diff --git a/packages/analyzer/src/typescript-react-analyzer/property-analyzer/create-enum-property.ts b/packages/analyzer/src/typescript-react-analyzer/property-analyzer/create-enum-property.ts
@@ -41,6 +41,7 @@ export function createEnumProperty(
 		description: '',
 		example: '',
 		group: '',
+		control: '',
 		hidden: false,
 		id: enumId,
 		inputType: Types.PatternPropertyInputType.Default,

diff --git a/packages/analyzer/src/typescript-react-analyzer/property-analyzer/property-analyzer.ts b/packages/analyzer/src/typescript-react-analyzer/property-analyzer/property-analyzer.ts
@@ -133,7 +133,8 @@ function createUnknownProperty(
 		propertyName: args.symbol.name,
 		required: false,
 		type: Types.PatternPropertyType.Unknown,
-		typeText: print(args.symbol.valueDeclaration)
+		typeText: print(args.symbol.valueDeclaration),
+		control: ''
 	};
 }
 
@@ -153,7 +154,8 @@ function createBooleanProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.Boolean
+		type: Types.PatternPropertyType.Boolean,
+		control: ''
 	};
 }
 
@@ -173,7 +175,8 @@ function createNumberProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.Number
+		type: Types.PatternPropertyType.Number,
+		control: ''
 	};
 }
 
@@ -197,7 +200,8 @@ function createStringProperty(
 			label: args.symbol.name,
 			propertyName: args.symbol.name,
 			required: false,
-			type: Types.PatternPropertyType.Asset
+			type: Types.PatternPropertyType.Asset,
+			control: ''
 		};
 	}
 
@@ -214,7 +218,8 @@ function createStringProperty(
 			label: args.symbol.name,
 			propertyName: args.symbol.name,
 			required: false,
-			type: Types.PatternPropertyType.Href
+			type: Types.PatternPropertyType.Href,
+			control: ''
 		};
 	}
 
@@ -230,7 +235,8 @@ function createStringProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.String
+		type: Types.PatternPropertyType.String,
+		control: ''
 	};
 }
 
@@ -254,7 +260,8 @@ function createEventHandlerProperty(
 		label: args.symbol.name,
 		propertyName: args.symbol.name,
 		required: false,
-		type: Types.PatternPropertyType.EventHandler
+		type: Types.PatternPropertyType.EventHandler,
+		control: ''
 	};
 }
 
@@ -274,6 +281,9 @@ function setPropertyMetaData(init: {
 	property.description = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'description') || '';
 	property.hidden = TypescriptUtils.hasJsDocTagFromSymbol(symbol, 'ignore');
 	property.group = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'group') || '';
+	property.control = TypescriptUtils.getJsDocValueFromSymbol(symbol, 'control') || '';
+
+	// TODO
 
 	switch (property.type) {
 		case 'enum':

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,46 +1,48 @@
 {
-    "name": "@meetalva/components",
-    "version": "1.0.0",
-    "description": "Alva UI components",
-    "scripts": {
-      "check:dependencies": "alva-dependencies -i feather-icons"
-    },
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/meetalva/alva.git"
-    },
-    "author": {
-      "email": "hey@meetalva.io",
-      "name": "Meet Alva Team",
-      "url": "https://meetalva.io/"
-    },
-    "license": "MIT",
-    "bugs": {
-      "url": "https://github.com/meetalva/alva/issues"
-    },
-    "devDependencies": {
-      "@meetalva/tools": "1.0.0",
-      "dependency-check": "^3.3.0",
-      "react-testing-library": "5.4.0",
-      "ts-jest": "^23.10.5",
-      "ts-loader": "4.4.1"
-    },
-    "dependencies": {
-      "@types/color": "^3.0.0",
-      "@types/feather-icons": "4.7.0",
-      "@types/react": "16.7.18",
-      "@types/react-dom": "16.0.7",
-      "@types/react-textarea-autosize": "4.3.3",
-      "@types/styled-components": "4.0.3",
-      "color": "3.0.0",
-      "feather-icons": "4.7.3",
-      "react": "16.7.0",
-      "react-dom": "16.4.2",
-      "react-feather": "^1.1.5",
-      "react-select": "2.0.0-beta.6",
-      "react-textarea-autosize": "7.0.4",
-      "tag-hoc": "1.0.0",
-      "styled-components": "4.0.3"
-    },
-    "homepage": "https://meetalva.github.io/"
-  }
+  "name": "@meetalva/components",
+  "version": "1.0.0",
+  "description": "Alva UI components",
+  "scripts": {
+    "check:dependencies": "alva-dependencies -i feather-icons"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meetalva/alva.git"
+  },
+  "author": {
+    "email": "hey@meetalva.io",
+    "name": "Meet Alva Team",
+    "url": "https://meetalva.io/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/meetalva/alva/issues"
+  },
+  "devDependencies": {
+    "@meetalva/tools": "1.0.0",
+    "dependency-check": "^3.3.0",
+    "react-testing-library": "5.4.0",
+    "ts-jest": "^23.10.5",
+    "ts-loader": "4.4.1"
+  },
+  "dependencies": {
+    "@types/color": "^3.0.0",
+    "@types/feather-icons": "4.7.0",
+    "@types/react": "16.7.18",
+    "@types/react-color": "^2.14.1",
+    "@types/react-dom": "16.0.7",
+    "@types/react-textarea-autosize": "4.3.3",
+    "@types/styled-components": "4.0.3",
+    "color": "3.0.0",
+    "feather-icons": "4.7.3",
+    "react": "16.7.0",
+    "react-color": "^2.17.0",
+    "react-dom": "16.4.2",
+    "react-feather": "^1.1.5",
+    "react-select": "2.0.0-beta.6",
+    "react-textarea-autosize": "7.0.4",
+    "styled-components": "4.0.3",
+    "tag-hoc": "1.0.0"
+  },
+  "homepage": "https://meetalva.github.io/"
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -36,6 +36,7 @@ export * from './property-input';
 export * from './property-item';
 export * from './property-item-asset';
 export * from './property-item-boolean';
+export * from './property-item-color';
 export * from './property-item-number';
 export * from './property-item-radiogroup';
 export * from './property-item-select';

diff --git a/packages/components/src/property-input/index.tsx b/packages/components/src/property-input/index.tsx
@@ -106,6 +106,8 @@ export interface PropertyInputProps {
 	className?: string;
 	onBlur?: React.FocusEventHandler<HTMLInputElement>;
 	onChange?: React.ChangeEventHandler<HTMLInputElement>;
+	onFocus?: React.FocusEventHandler<HTMLInputElement>;
+	onClick?: React.MouseEventHandler;
 	placeholder?: string;
 	type?: PropertyInputType;
 	value?: string;
@@ -124,6 +126,8 @@ export const PropertyInput: React.SFC<PropertyInputProps> = props => (
 			list={props.list}
 			onChange={props.onChange}
 			onBlur={props.onBlur}
+			onFocus={props.onFocus}
+			onClick={props.onClick}
 			type={props.type}
 			value={props.value || ''}
 			placeholder={props.placeholder}

diff --git a/packages/components/src/property-item-color/index.tsx b/packages/components/src/property-item-color/index.tsx
@@ -0,0 +1 @@
+export * from './property-item-color';
diff --git a/packages/components/src/property-item-color/pattern.json b/packages/components/src/property-item-color/pattern.json
@@ -0,0 +1,7 @@
+{
+	"name": "property-item-number",
+	"displayName": "Property Item: Number",
+	"description": "Input field for number values",
+	"version": "1.0.0",
+	"tags": ["property"]
+}