@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/map/components/map-options.js

@@ -0,0 +1,557 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, FileSelector } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	Button,
+	Repeater,
+	RepeaterItem,
+	Notice,
+	InputField,
+	Menu,
+	MenuItem,
+	RichLabel,
+	MenuSeparator,
+	Spacer,
+	HStack,
+	NumberPicker,
+	Toggle,
+	Expandable,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { truncateMiddle } from '@eightshift/ui-components/utilities';
+import manifest from '../manifest.json';
+
+export const MapOptions = ({ attributes, setAttributes }) => {
+	const mapLayers = checkAttr('mapLayers', attributes, manifest);
+	const mapCenterLat = checkAttr('mapCenterLat', attributes, manifest);
+	const mapCenterLon = checkAttr('mapCenterLon', attributes, manifest);
+	const mapZoom = checkAttr('mapZoom', attributes, manifest);
+	const mapInteractions = checkAttr('mapInteractions', attributes, manifest);
+	const mapControls = checkAttr('mapControls', attributes, manifest);
+
+	const layerTypes = {
+		openStreetMap: {
+			icon: icons.mapLayer,
+			title: __('OpenStreetMap', '%g_textdomain%'),
+			hasSeparator: true,
+		},
+		vectorJson: {
+			icon: icons.mapLayerJson,
+			title: __('Vector map', '%g_textdomain%'),
+			subtitle: __('with JSON styles', '%g_textdomain%'),
+			hasSeparator: true,
+		},
+		mapBoxVector: {
+			icon: icons.mapLayerVector,
+			title: __('Mapbox map', '%g_textdomain%'),
+			subtitle: __('Vector tiles', '%g_textdomain%'),
+		},
+		mapBoxRaster: {
+			icon: icons.mapLayerRaster,
+			title: __('Mapbox map', '%g_textdomain%'),
+			subtitle: __('Raster tiles', '%g_textdomain%'),
+			hasSeparator: true,
+		},
+		mapTilerVector: {
+			icon: icons.mapLayerVector,
+			title: __('MapTiler tiles', '%g_textdomain%'),
+			subtitle: __('Vector - XYZ (PBF)', '%g_textdomain%'),
+		},
+		mapTilerRasterXyz: {
+			icon: icons.mapLayerRaster,
+			title: __('MapTiler map/tiles', '%g_textdomain%'),
+			subtitle: __('Raster - XYZ', '%g_textdomain%'),
+		},
+		mapTilerRasterJson: {
+			icon: icons.mapLayerRaster,
+			title: __('MapTiler map/tiles', '%g_textdomain%'),
+			subtitle: __('Raster - JSON', '%g_textdomain%'),
+			hasSeparator: true,
+		},
+		geoJson: { icon: icons.fileMetadata, title: __('GeoJSON', '%g_textdomain%') },
+	};
+
+	return (
+		<>
+			<Repeater
+				icon={icons.layers}
+				label={__('Layers', '%g_textdomain%')}
+				items={mapLayers}
+				onChange={(value) => setAttributes({ [getAttrKey('mapLayers', attributes, manifest)]: value })}
+				addButton={({ addItem, disabled }) => (
+					<Menu
+						triggerIcon={icons.add}
+						triggerProps={{ size: 'small', disabled: disabled }}
+					>
+						{Object.entries(layerTypes).map(([value, { icon, title, subtitle, hasSeparator }]) => {
+							return (
+								<>
+									<MenuItem
+										key={value}
+										icon={icon}
+										onClick={() => {
+											addItem({
+												type: value,
+												hidden: false,
+											});
+										}}
+									>
+										<RichLabel
+											label={title}
+											subtitle={subtitle}
+										/>
+									</MenuItem>
+
+									{hasSeparator && <MenuSeparator />}
+								</>
+							);
+						})}
+					</Menu>
+				)}
+			>
+				{(layer) => {
+					const { type, apiKey, geoJsonUrl, geoJsonId, styleUrl, hidden, updateData } = layer;
+
+					const needsApiKey = [
+						'mapBoxVector',
+						'mapBoxRaster',
+						'mapTilerVector',
+						'vectorJson',
+						'mapTilerRasterXyz',
+						'mapTilerRasterJson',
+					].includes(type);
+					// eslint-disable-next-line max-len
+					const hasMapStyleOptions = [
+						'mapBoxVector',
+						'mapBoxRaster',
+						'mapTilerVector',
+						'vectorJson',
+						'mapTilerRasterXyz',
+						'mapTilerRasterJson',
+					].includes(type);
+
+					return (
+						<RepeaterItem
+							icon={layer?.type ? layerTypes?.[layer?.type]?.icon ?? icons.mapLayer : icons.layerOff}
+							label={layerTypes?.[type]?.title ?? __('New layer', '%g_textdomain%')}
+							subtitle={
+								type === 'geoJson'
+									? truncateMiddle(geoJsonUrl?.slice(geoJsonUrl?.lastIndexOf('/') + 1) ?? '', 20)
+									: layerTypes?.[type]?.subtitle
+							}
+							actions={
+								layer?.type?.length < 1 ? (
+									icons.dummySpacer
+								) : (
+									<Button
+										icon={hidden ? icons.dummySpacer : icons.visible}
+										onPress={() => updateData({ hidden: !hidden })}
+										tooltip={hidden ? __('Show', '%g_textdomain%') : __('Hide', '%g_textdomain%')}
+										size='small'
+									/>
+								)
+							}
+							textValue={layerTypes?.[type]?.title ?? __('New layer', '%g_textdomain%')}
+							expandDisabled={type === 'openStreetMap'}
+						>
+							{!type && (
+								<Notice
+									type='error'
+									label={__('Error', '%g_textdomain%')}
+									subtitle={__('Layer type is missing, please remove the layer and add a new one.', '%g_textdomain%')}
+								/>
+							)}
+
+							{needsApiKey && (
+								<InputField
+									icon={icons.key}
+									label={__('API key', '%g_textdomain%')}
+									value={apiKey}
+									onChange={(value) => updateData({ apiKey: value })}
+								/>
+							)}
+
+							{hasMapStyleOptions && (
+								<InputField
+									icon={icons.color}
+									label={__('Map style', '%g_textdomain%')}
+									value={styleUrl}
+									onChange={(value) => updateData({ styleUrl: value })}
+									help={
+										<>
+											{!type?.startsWith('mapBox') &&
+												__(
+													'Copy the full style URL from MapTiler. Keep the API key inside the URL.',
+													'%g_textdomain%',
+												)}
+											{type === 'mapBoxVector' && __('Copy the full style URL from Mapbox.', '%g_textdomain%')}
+											{type === 'mapBoxRaster' &&
+												// eslint-disable-next-line max-len
+												__(
+													'Copy the full style URL from Mapbox or a Mapbox-compatible source. Keep the access token inside the URL.',
+													'%g_textdomain%',
+												)}
+											<br />
+											<br />
+											{['mapBoxRaster', 'mapTilerVector', 'mapTilerRasterXyz'].includes(type) && (
+												<>
+													<code className='es-bg-transparent es-p-0 es-text-3'>{'{z}/{x}/{y}'}</code>
+													{
+														// eslint-disable-next-line max-len
+														__(
+															"should be left as they are in the URL; they're needed for the map to work properly.",
+															'%g_textdomain%',
+														)
+													}
+													<br />
+													<br />
+												</>
+											)}
+											{__('Example', '%g_textdomain%')}:
+											<br />
+											<span className='es-word-break-all'>
+												{['mapTilerRasterJson', 'vectorJson'].includes(type) &&
+													'https://api.maptiler.com/maps/{styleName}/tiles.json?key={apiKey}'}
+
+												{type === 'mapTilerVector' && 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key={apiKey}'}
+
+												{type === 'mapBoxVector' && (
+													<>
+														{'mapbox://styles/{styleName},'}
+														<br />
+														{'mapbox://styles/{userId}/{styleId}'}
+													</>
+												)}
+
+												{type === 'mapBoxRaster' &&
+													'https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}[@2x].{imageFormat}?acess_token={apiKey}'}
+
+												{type === 'mapTilerRasterXyz' &&
+													'https://api.maptiler.com/maps/{styleName}/{z}/{x}/{y}.png?key={apiKey}'}
+											</span>
+										</>
+									}
+								/>
+							)}
+
+							{type === 'geoJson' && (
+								<FileSelector
+									onChange={({ id, url }) => updateData({ geoJsonUrl: url, geoJsonId: id })}
+									fileId={geoJsonId}
+									fileName={geoJsonUrl?.slice(geoJsonUrl?.lastIndexOf('/') + 1)}
+									allowedTypes={['application/geo+json', 'application/json']}
+									kind='geoJson'
+								/>
+							)}
+						</RepeaterItem>
+					);
+				}}
+			</Repeater>
+			<Spacer />
+
+			<div>
+				<Expandable
+					label={__('Map display', '%g_textdomain%')}
+					icon={icons.browser}
+				>
+					<Toggle
+						icon={icons.tag}
+						label={__('Attribution', '%g_textdomain%')}
+						subtitle={__('Check map provider ToC', '%g_textdomain%')}
+						checked={mapControls.attribution}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.attribution = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+
+					<Toggle
+						icon={icons.mapPin}
+						label={__('Minimap', '%g_textdomain%')}
+						checked={mapControls.overviewMap}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.overviewMap = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.ruler}
+						label={__('Map scale', '%g_textdomain%')}
+						checked={mapControls.scaleLine}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.scaleLine = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+
+					<Toggle
+						icon={icons.mouseCursor}
+						label={__('Pointer position', '%g_textdomain%')}
+						checked={mapControls.mousePosition}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.mousePosition = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+
+					<Toggle
+						icon={icons.expandXl}
+						label={__('Full screen', '%g_textdomain%')}
+						checked={mapControls.fullScreen}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.fullScreen = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.slider}
+						label={__('Zoom slider', '%g_textdomain%')}
+						checked={mapControls.zoomSlider}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.zoomSlider = value;
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.plusMinusButtonsV}
+						label={__('Zoom buttons', '%g_textdomain%')}
+						checked={mapControls.zoom}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.zoom = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.roundedCorners}
+						label={__('Zoom to extent', '%g_textdomain%')}
+						checked={mapControls.zoomToExtent}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.zoomToExtent = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.rotateLeft}
+						label={__('Reset rotation', '%g_textdomain%')}
+						checked={mapControls.rotate}
+						onChange={(value) => {
+							const newValue = { ...mapControls };
+							newValue.rotate = value;
+
+							setAttributes({ [getAttrKey('mapControls', attributes, manifest)]: newValue });
+						}}
+					/>
+				</Expandable>
+
+				<Expandable
+					label={__('Map interactions', '%g_textdomain%')}
+					icon={icons.pointerHand}
+				>
+					<Toggle
+						icon={icons.focus}
+						label={__('Only when map is focused', '%g_textdomain%')}
+						checked={mapInteractions.onFocusOnly}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.onFocusOnly = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+
+					<Toggle
+						icon={icons.keyboard}
+						label={__('Keyboard interactions', '%g_textdomain%')}
+						checked={mapInteractions.keyboard}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.keyboard = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						icon={icons.cursorMove}
+						label={__('Drag to move map', '%g_textdomain%')}
+						checked={mapInteractions.dragPan}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.dragPan = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+
+					<Spacer
+						icon={icons.rotateRight}
+						text={__('Rotation', '%g_textdomain%')}
+						border
+					/>
+
+					<Toggle
+						label={__('Alt+Shift and drag to rotate', '%g_textdomain%')}
+						checked={mapInteractions.altShiftDragRotate}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.altShiftDragRotate = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						label={__('Pinch to rotate', '%g_textdomain%')}
+						checked={mapInteractions.pinchRotate}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.pinchRotate = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Spacer />
+					<Spacer
+						icon={icons.search}
+						text={__('Zoom', '%g_textdomain%')}
+						border
+					/>
+
+					<Toggle
+						label={__('Double-click to zoom', '%g_textdomain%')}
+						checked={mapInteractions.doubleClickZoom}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.doubleClickZoom = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						label={__('Zoom with mousewheel', '%g_textdomain%')}
+						checked={mapInteractions.mouseWheelZoom}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.mouseWheelZoom = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						label={__('Shift and drag to zoom', '%g_textdomain%')}
+						checked={mapInteractions.shiftDragZoom}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.shiftDragZoom = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<Toggle
+						label={__('Pinch to zoom', '%g_textdomain%')}
+						checked={mapInteractions.pinchZoom}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.pinchZoom = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+					/>
+
+					<NumberPicker
+						label={__('Transition duration', '%g_textdomain%')}
+						value={mapInteractions.zoomDuration}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.zoomDuration = value;
+
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+						min={0}
+						max={10000}
+						suffix='ms'
+						inline
+					/>
+
+					<NumberPicker
+						label={__('Zoom-in step', '%g_textdomain%')}
+						value={mapInteractions.zoomDelta}
+						onChange={(value) => {
+							const newValue = { ...mapInteractions };
+							newValue.zoomDelta = value;
+							setAttributes({ [getAttrKey('mapInteractions', attributes, manifest)]: newValue });
+						}}
+						min={1}
+						max={10}
+						inline
+					/>
+				</Expandable>
+			</div>
+
+			<Spacer />
+			<Spacer
+				icon={icons.centerPoint}
+				text={__('Start point', '%g_textdomain%')}
+				border
+			/>
+
+			<HStack noWrap>
+				<InputField
+					label={__('Lat', '%g_textdomain%')}
+					value={mapCenterLat}
+					onChange={(value) => setAttributes({ [getAttrKey('mapCenterLat', attributes, manifest)]: value })}
+					placeholder='46.314045'
+				/>
+
+				<InputField
+					label={__('Lon', '%g_textdomain%')}
+					value={mapCenterLon}
+					onChange={(value) => setAttributes({ [getAttrKey('mapCenterLon', attributes, manifest)]: value })}
+					placeholder='16.352532'
+				/>
+
+				<NumberPicker
+					label={__('Zoom', '%g_textdomain%')}
+					value={mapZoom}
+					onChange={(value) => setAttributes({ [getAttrKey('mapZoom', attributes, manifest)]: value })}
+					min={1}
+					max={30}
+					placeholder='14'
+				/>
+			</HStack>
+		</>
+	);
+};

package/blocks/init/src/Blocks/custom/map/manifest.json

@@ -0,0 +1,79 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "map",
+	"title": "Map",
+	"description": "Show locations on a map.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-map"
+	},
+	"keywords": [
+		"Example Keyword"
+	],
+	"example": {
+		"attributes": {
+			"exampleContent": ""
+		}
+	},
+	"attributes": {
+		"mapLayers": {
+			"type": "array",
+			"default": [
+				{
+					"id": 1,
+					"type": "openStreetMap"
+				}
+			]
+		},
+		"mapInteractions": {
+			"type": "object",
+			"default": {
+				"altShiftDragRotate": true,
+				"onFocusOnly": false,
+				"doubleClickZoom": true,
+				"keyboard": true,
+				"mouseWheelZoom": false,
+				"shiftDragZoom": true,
+				"dragPan": true,
+				"pinchRotate": true,
+				"pinchZoom": true
+			}
+		},
+		"mapControls": {
+			"type": "object",
+			"default": {
+				"attribution": true,
+				"fullScreen": false,
+				"mousePosition": false,
+				"overviewMap": false,
+				"rotate": true,
+				"scaleLine": false,
+				"zoomSlider": false,
+				"zoomToExtent": false,
+				"zoom": true
+			}
+		},
+		"mapCenterLat": {
+			"type": "string"
+		},
+		"mapCenterLon": {
+			"type": "string"
+		},
+		"mapZoom": {
+			"type": "number",
+			"default": 14
+		}
+	},
+	"nodeDependency": [
+		"ol@8",
+		"ol-mapbox-style@12"
+	],
+	"resources": {
+		"markerIcon": "data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 7.35938C16 11.9873 11.8347 16.9857 10.1728 18.7958C9.80508 19.1964 9.19492 19.1964 8.82717 18.7958C7.16529 16.9857 3 11.9873 3 7.35938C3 3.84719 5.91015 1 9.5 1C13.0899 1 16 3.84719 16 7.35938Z\" fill=\"%233A66A8\" stroke=\"%232E5590\" stroke-linejoin=\"round\"/><path d=\"M9.5 9.25C10.4665 9.25 11.25 8.4665 11.25 7.5C11.25 6.5335 10.4665 5.75 9.5 5.75C8.5335 5.75 7.75 6.5335 7.75 7.5C7.75 8.4665 8.5335 9.25 9.5 9.25Z\" fill=\"white\"/></svg>"
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "w-full aspect-3/2 rounded-lg border border-gray-300 shadow-md overflow-hidden"
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/map/map-block.js

@@ -0,0 +1,13 @@
+import { MapEditor } from './components/map-editor';
+import { MapOptions } from './components/map-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Map = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={MapOptions}
+			editor={MapEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/map/map.php

@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * Map block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockClass = $attributes['blockClass'] ?? '';
+$blockJsClass = $attributes['blockJsClass'] ?? '';
+
+$mapLayers = Helpers::checkAttr('mapLayers', $attributes, $manifest);
+$mapCenterLat = Helpers::checkAttr('mapCenterLat', $attributes, $manifest);
+$mapCenterLon = Helpers::checkAttr('mapCenterLon', $attributes, $manifest);
+$mapZoom = Helpers::checkAttr('mapZoom', $attributes, $manifest);
+$mapInteractions = Helpers::checkAttr('mapInteractions', $attributes, $manifest);
+$mapControls = Helpers::checkAttr('mapControls', $attributes, $manifest);
+
+// Take only active map layers and clean them up a bit so the output JSON is smaller.
+$activeLayers = array_filter($mapLayers, fn ($layer) => ($layer['hidden'] ?? false) === false);
+
+$activeLayers = array_map(function ($layer) {
+	unset($layer['id']);
+
+	if (isset($layer['hidden'])) {
+		unset($layer['hidden']);
+	}
+
+	return $layer;
+}, $activeLayers);
+
+// Reverse array so the last element is on top, to match editor.
+$activeLayers = array_reverse($activeLayers);
+
+// Reset the keys.
+$activeLayers = array_values($activeLayers);
+?>
+
+<div
+	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $blockJsClass)); ?>"
+	data-center-lat="<?php echo esc_attr($mapCenterLat); ?>"
+	data-center-lon="<?php echo esc_attr($mapCenterLon); ?>"
+	data-center-zoom="<?php echo esc_attr($mapZoom); ?>"
+	data-map-interactions="<?php echo esc_attr(wp_json_encode($mapInteractions)); ?>"
+	data-map-controls="<?php echo esc_attr(wp_json_encode($mapControls)); ?>"
+	data-map-layers="<?php echo esc_attr(wp_json_encode($activeLayers)); ?>"
+>
+</div>

package/blocks/init/src/Blocks/custom/map/styles.css

@@ -0,0 +1,2 @@
+/* OpenLayers */
+@import '~ol/ol.css';