@eightshift/frontend-libs-tailwind 1.0.0

package/schemas/component.json

@@ -0,0 +1,240 @@
+{
+	"title": "JSON schema for Eightshift components",
+	"$schema": "http://json-schema.org/draft-04/schema#",
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"type": "string"
+		},
+		"componentName": {
+			"type": "string",
+			"pattern": "^[^\/][a-z0-9-]*$",
+			"description": "Unique identifier for the component."
+		},
+		"title": {
+			"type": "string",
+			"description": "User-facing name of the component."
+		},
+		"description": {
+			"type": "string",
+			"description": "A short description of the component."
+		},
+		"attributes": {
+			"type": "object",
+			"description": "Source of truth for data used within the component. Check https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/ for more details.",
+			"patternProperties": {
+				"[a-zA-Z]": {
+					"type": "object",
+					"properties": {
+						"type": {
+							"description": "The type indicates the type of data that is stored by the attribute. It does not indicate where the data is stored, which is defined by the source field.\n\nA type is required, unless an enum is provided. A type can be used with an enum.\n\nNote that the validity of an object is determined by your source. For an example, see the query details below.",
+							"oneOf": [
+								{
+									"type": "string",
+									"enum": [
+										"null",
+										"boolean",
+										"object",
+										"array",
+										"string",
+										"integer",
+										"number"
+									]
+								},
+								{
+									"type": "array",
+									"uniqueItems": true,
+									"items": {
+										"type": "string",
+										"enum": [
+											"null",
+											"boolean",
+											"object",
+											"array",
+											"string",
+											"integer",
+											"number"
+										]
+									}
+								}
+							]
+						},
+						"enum": {
+							"type": "array",
+							"description": "An attribute can be defined as one of a fixed set of values. This is specified by an enum, which contains an array of allowed values:",
+							"items": {
+								"oneOf": [
+									{
+										"type": "boolean"
+									},
+									{
+										"type": "number"
+									},
+									{
+										"type": "string"
+									}
+								]
+							}
+						},
+						"source": {
+							"type": "string",
+							"description": "Attribute sources are used to define how the attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.",
+							"enum": [
+								"attribute"
+							]
+						},
+						"attribute": {
+							"type": "string",
+							"description": "Use an attribute source to extract the value from an attribute in the markup. The attribute is specified by the attribute field, which must be supplied.\n\nExample: Extract the src attribute from an image found in the block's markup."
+						}
+					},
+					"required": [
+						"type"
+					]
+				}
+			},
+			"additionalProperties": false
+		},
+		"example": {
+			"type": "object",
+			"description": "Sample data to showcase the component.",
+			"properties": {
+				"attributes": {
+					"type": "object",
+					"description": "Set the attribues for the block example"
+				},
+				"innerBlocks": {
+					"type": "array",
+					"description": "Set the inner blocks that should be used within the block example. The blocks should be defined as a nested array like this: \n\n [ [ 'core/heading', { content: 'This is an Example' }, [] ] ]\n\n Where each block itself is an array that contains the block name, the block attributes, and the blocks inner blocks."
+				}
+			}
+		},
+		"components": {
+			"type": "object",
+			"description": "Defines components included in this component. Component attributes can be used with the 'props' function. Check https://eightshift.com/docs/basics/blocks-component-in-block/ for more info."
+		},
+		"options": {
+			"type": "object",
+			"description": "Defines common option definitions for attributes. Check https://eightshift.com/docs/basics/blocks-component-in-block/ for more info."
+		},
+		"tailwind": {
+			"type": "object",
+			"description": "Defines shared Tailwind configs for the component. 'base' sets the base classes for the main part of the component. The base is augmented by 'options' and 'combinations', if set. 'parts' can be used for static/supporting parts of the component.",
+			"properties": {
+				"base": {
+					"type": "object",
+					"description": "Base classes for the main part of the component.",
+					"properties": {
+						"twClasses": {
+							"type": "string",
+							"description": "Classnames to apply."
+						},
+						"twClassesEditor": {
+							"type": "string",
+							"description": "Editor-specific classnames to apply. Overrides 'twClasses'"
+						}
+					},
+					"minProperties": 1
+				},
+				"options": {
+					"type": "object",
+					"description": "Per-attribute classes, added to the base class. Key represents the attribute name.",
+					"additionalProperties": {
+						"$ref": "#/$defs/twOptionsEntry"
+					},
+					"minProperties": 1
+				},
+				"parts": {
+					"type": "object",
+					"description": "Stand-alone parts of the component, not affected by 'options' or 'combinations'. Key represents the part name.",
+					"additionalProperties": {
+						"$ref": "#/$defs/twPartEntry"
+					},
+					"minProperties": 1
+				},
+				"combinations": {
+					"type": "array",
+					"description": "Conditionally applied classes, depending on the set attribute values. Added to the base class.",
+					"items": {
+						"type": "object",
+						"properties": {
+							"attributes": {
+								"type": "object",
+								"description": "Attributes to check for the condition. Key is the attribute name, value is the attribute value (or an array of possible values) to check for.",
+								"patternProperties": {
+									"[a-zA-Z]": {
+										"anyOf": [
+											{
+												"type": "string",
+												"minLength": 1
+											},
+											{
+												"type": "array",
+												"items": {
+													"type": "string",
+													"minLength": 1
+												}
+											}
+										]
+									}
+								}
+							},
+							"twClasses": {
+								"type": "string",
+								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply."
+							},
+							"twClassesEditor": {
+								"type": "string",
+								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply."
+							}
+						},
+						"required": [
+							"attributes",
+							"twClasses"
+						]
+					},
+					"minLength": 1
+				}
+			},
+			"minProperties": 1
+		}
+	},
+	"required": [
+		"componentName",
+		"title"
+	],
+	"$defs": {
+		"twPartEntry": {
+			"type": "object",
+			"properties": {
+				"twClasses": {
+					"type": "string",
+					"description": "Classnames to apply."
+				},
+				"twClassesEditor": {
+					"type": "string",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'."
+				}
+			}
+		},
+		"twOptionsEntry": {
+			"type": "object",
+			"properties": {
+				"twClasses": {
+					"type": "object",
+					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply.",
+					"additionalProperties": {
+						"type": "string"
+					}
+				},
+				"twClassesEditor": {
+					"type": "object",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply.",
+					"additionalProperties": {
+						"type": "string"
+					}
+				}
+			}
+		}
+	}
+}

package/schemas/globalManifest.json

@@ -0,0 +1,73 @@
+{
+	"title": "JSON schema for Eightshift global manifest",
+	"$schema": "http://json-schema.org/draft-04/schema#",
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"type": "string"
+		},
+		"namespace": {
+			"type": "string",
+			"pattern": "^[^\/][a-z0-9-]*$",
+			"description": "Unique string that groups all the blocks from the project. When combined with a block name, represents the fully qualified block name, e.g. 'eightshift-boilerplate/button'."
+		},
+		"background": {
+			"type": "string",
+			"pattern": "^#(?:[0-9a-fA-F]{3,4}){1,2}$",
+			"description": "Block icon background color. Can be overriden per-block."
+		},
+		"foreground": {
+			"type": "string",
+			"pattern": "^#(?:[0-9a-fA-F]{3,4}){1,2}$",
+			"description": "Block icon color. Can be overriden per-block."
+		},
+		"config": {
+			"type": "object",
+			"description": "Feature flags for core Frontend libs features.",
+			"properties": {
+				"useWrapper": {
+					"type": "boolean",
+					"description": "Set to 'false' to disable wrapper.",
+					"default": true
+				}
+			}
+		},
+		"globalVariables": {
+			"type": "object",
+			"description": "Project-specific configuration options.",
+			"properties": {
+				"breakpoints": {
+					"type": "object",
+					"description": "Breakpoints to use. Value should be in 'rem'!",
+					"properties": {
+						"mobile": {
+							"type": "integer",
+							"description": "Breakpoint value for mobile size."
+						},
+						"tablet": {
+							"type": "integer",
+							"description": "Breakpoint value for tablet size."
+						},
+						"desktop": {
+							"type": "integer",
+							"description": "Breakpoint value for desktop size."
+						},
+						"large": {
+							"type": "integer",
+							"description": "Breakpoint value for large size."
+						}
+					}
+				}
+			},
+			"required": [
+				"breakpoints"
+			]
+		}
+	},
+	"required": [
+		"namespace",
+		"background",
+		"foreground",
+		"globalVariables"
+	]
+}

package/schemas/variation.json

@@ -0,0 +1,83 @@
+{
+	"title": "JSON schema for Eightshift block variations",
+	"$schema": "http://json-schema.org/draft-04/schema#",
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"type": "string"
+		},
+		"active": {
+			"type": "boolean",
+			"description": "Set to 'false' if you don't want the variation to be registered.",
+			"default": true
+		},
+		"parentName": {
+			"type": "string",
+			"pattern": "^[^\/][a-z0-9-]*$",
+			"description": "Fully qualified block name of the block this is a varation of."
+		},
+		"name": {
+			"type": "string",
+			"pattern": "^[^\/][a-z0-9-]*$",
+			"description": "Unique identifier of the variation."
+		},
+		"title": {
+			"type": "string",
+			"description": "Display mame of the variation, shown in the Inserter, Sidebar, ..."
+		},
+		"icon": {
+			"type": "object",
+			"description": "Icon to identify the variation, shown in various places within the Block editor.",
+			"properties": {
+				"background": {
+					"type": "string",
+					"description": "Variation icon background color. If not set, value from Global manifest is used."
+				},
+				"foreground": {
+					"type": "string",
+					"description": "Variation icon color. If not set, value from Global manifest is used."
+				},
+				"src": {
+					"type": "string",
+					"description": "Icon source, can be either Eightshift icons ('es-' prefix), SVG strings, or Dashicon name."
+				}
+			},
+			"additionalProperties": false
+		},
+		"description": {
+			"type": "string",
+			"description": "A short description of the variation, shown in a couple of places in the Block editor, e.g. options sidebar."
+		},
+		"attributes": {
+			"type": "object",
+			"description": "Attributes to set for the block variation. These attributes are merged with the parent block attributes. If the attribute is already set in the parent block, the value from the parent block is used."
+		},
+		"innerBlocks": {
+			"type": "array",
+			"description": "Inner blocks to include."
+		},
+		"example": {
+			"type": "object",
+			"description": "Data for the variation preview, shown in the Inserter when hovering over variation names.",
+			"properties": {
+				"attributes": {
+					"type": "object",
+					"description": "Preview attributes."
+				},
+				"innerBlocks": {
+					"type": "array",
+					"description": "Preview inner blocks. Should be defined as a nested array that contains the block name, attributes object, and optionally inner blocks, e.g.: \n\n [ [ 'core/heading', { content: 'This is an Example' }, [] ] ]"
+				}
+			}
+		},
+		"scope": {
+			"type": "array",
+			"description": "Scope where the variations is shown."
+		}
+	},
+	"required": [
+		"parentName",
+		"name",
+		"title"
+	]
+}

package/scripts/components/block-inserter.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { Inserter } from '@wordpress/block-editor';
+import { Button } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { clsx } from '@eightshift/ui-components/utilities';
+
+/**
+ * A replacement for the default Gutenberg inserter, whose styling can vary between WP versions.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} props.clientId - Client ID of the block in which the inserter belongs.
+ * @param {boolean|string|JSX.Element} [props.label] - Label of the inserter.
+ * @param {boolean} [props.small] - If `true`, the button's size is reduced, perfect for added visual separation in hierarchical InnerBlocks.
+ * @param {string} [props.className] - Additional classes to add to the control base.
+ * @param {boolean} [props.prioritizePatterns] - Whether to show patterns before blocks in the inserter.
+ *
+ * @returns {JSX.Element} The BlockInserter component.
+ *
+ * @example
+ * <InnerBlocks renderAppender={() => <BlockInserter />} />
+ *
+ * @preserve
+ */
+export const BlockInserter = (props) => {
+	const {
+		clientId,
+		label,
+		small = false,
+		className,
+		prioritizePatterns = false,
+	} = props;
+
+	return (
+		<Inserter
+			rootClientId={clientId}
+			prioritizePatterns={prioritizePatterns}
+			__experimentalIsQuick
+			isAppender
+			isQuick
+			renderToggle={(appenderProps) => {
+				const {
+					onToggle,
+					disabled,
+					hasSingleBlockType,
+					blockTitle,
+				} = appenderProps;
+
+				let labelText = label;
+
+				if (label === true) {
+					labelText = sprintf(__('Add %s', 'eightshift-frontend-libs'), hasSingleBlockType ? blockTitle : __('a block', 'eightshift-frontend-libs'));
+				}
+
+				return (
+					<Button
+						onPress={onToggle}
+						disabled={disabled}
+						icon={icons.add}
+						size={small ? 'small' : 'default'}
+						className={clsx(className, 'es-uic-font-sans')}
+					>
+						{labelText}
+					</Button>
+				)
+			}}
+		/>
+	);
+};