@eightshift/frontend-libs-tailwind 1.0.0

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

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

package/blocks/init/src/Blocks/custom/heading/heading-transforms.js

@@ -0,0 +1,25 @@
+import { createBlock } from '@wordpress/blocks';
+import manifest from '../../manifest.json';
+import manifestHeading from './manifest.json';
+import manifestParagraph from '../paragraph/manifest.json';
+
+export const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [`${manifest.namespace}/${manifestParagraph.blockName}`],
+			transform: (attributes) => {
+				let headingAttributes = {};
+				for (const attribute in attributes) {
+					if (attribute.startsWith('block')) {
+						continue;
+					}
+					const attrKey = attribute.replace('paragraph', 'heading').replace('Paragraph', 'Heading');
+					headingAttributes[attrKey] = attributes[attribute];
+				}
+
+				return createBlock(`${manifest.namespace}/${manifestHeading.blockName}`, headingAttributes);
+			},
+		},
+	],
+};

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

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Heading block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+echo Helpers::render('heading', Helpers::props('heading', $attributes, [
+	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+]));

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

@@ -0,0 +1,79 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "heading",
+	"title": "Heading",
+	"description" : "Establish a document structure by splitting it up into meaningful sections.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-heading"
+	},
+	"keywords": [
+		"heading",
+		"title",
+		"label"
+	],
+	"example": {
+		"attributes": {
+			"headingAlign": "start"
+		}
+	},
+	"attributes": {
+		"headingAlign": {
+			"type": "string",
+			"default": "start"
+		},
+		"headingColor": {
+			"type": "string",
+			"default": "black"
+		}
+	},
+	"components": {
+		"heading": "heading"
+	},
+	"options": {
+		"headingAlign": [
+			{
+				"tooltip": "Start",
+				"value": "start",
+				"icon": "textAlignLeft"
+			},
+			{
+				"tooltip": "Center",
+				"value": "center",
+				"icon": "textAlignCenter"
+			},
+			{
+				"tooltip": "End",
+				"value": "end",
+				"icon": "textAlignRight"
+			}
+		],
+		"headingColor": [
+			"white",
+			"black",
+			"navy-500",
+			"red-500",
+			"red-50"
+		]
+	},
+	"tailwind": {
+		"options": {
+			"headingAlign": {
+				"twClasses": {
+					"start": "text-start",
+					"center": "text-center",
+					"end": "text-end"
+				}
+			},
+			"headingColor": {
+				"twClasses": {
+					"black": "text-gray-900 [&>a]:text-navy-900",
+					"white": "text-gray-50 [&>a]:text-navy-900",
+					"navy-500": "text-navy-500 [&>a]:text-navy-900",
+					"red-500": "text-red-500 [&>a]:text-navy-900",
+					"red-50": "text-red-50 [&>a]:text-red-300"
+				}
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/hero/components/hero-editor.js

@@ -0,0 +1,12 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { HeroEditor as EditorComponent } from '../../../components/hero/components/hero-editor';
+
+export const HeroEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('hero', attributes, {
+				setAttributes,
+			})}
+		/>
+	);
+};

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

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { HeroOptions as OptionsComponent } from '../../../components/hero/components/hero-options';
+
+export const HeroOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('hero', attributes, {
+				setAttributes,
+			})}
+			controlOnly
+		/>
+	);
+};

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

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

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

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * Hero block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+echo Helpers::render('hero', Helpers::props('hero', $attributes));

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

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "hero",
+	"title": "Hero",
+	"description" : "Emphasize a section.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-jumbotron"
+	},
+	"keywords": [
+		"hero",
+		"cover"
+	],
+	"components": {
+		"hero": "hero"
+	}
+}

package/blocks/init/src/Blocks/custom/image/components/image-editor.js

@@ -0,0 +1,12 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ImageEditor as EditorComponent } from '../../../components/image/components/image-editor';
+
+export const ImageEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('image', attributes, {
+				setAttributes,
+			})}
+		/>
+	);
+};

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

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ImageOptions as OptionsComponent } from '../../../components/image/components/image-options';
+
+export const ImageOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('image', attributes, {
+				setAttributes,
+			})}
+			controlOnly
+		/>
+	);
+};

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

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

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

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * Image block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+echo Helpers::render('image', Helpers::props('image', $attributes));

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

@@ -0,0 +1,105 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "image",
+	"title": "Image",
+	"description" : "Worth a 1000 words.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-image"
+	},
+	"keywords": [
+		"image",
+		"picture",
+		"img"
+	],
+	"example": {
+		"attributes": {
+			"imageAlign": "center center"
+		}
+	},
+	"attributes": {
+		"imageAlign": {
+			"type": "string",
+			"default": "center center"
+		}
+	},
+	"components": {
+		"image": "image"
+	},
+	"variables": {
+		"imageAlign": {
+			"top left": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-start",
+						"block-image-align-vertical": "flex-start"
+					}
+				}
+			],
+			"top center": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "center",
+						"block-image-align-vertical": "flex-start"
+					}
+				}
+			],
+			"top right": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-end",
+						"block-image-align-vertical": "flex-start"
+					}
+				}
+			],
+			"center left": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-start",
+						"block-image-align-vertical": "center"
+					}
+				}
+			],
+			"center center": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "center",
+						"block-image-align-vertical": "center"
+					}
+				}
+			],
+			"center right": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-end",
+						"block-image-align-vertical": "center"
+					}
+				}
+			],
+			"bottom left": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-start",
+						"block-image-align-vertical": "flex-end"
+					}
+				}
+			],
+			"bottom center": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "center",
+						"block-image-align-vertical": "flex-end"
+					}
+				}
+			],
+			"bottom right": [
+				{
+					"variable": {
+						"block-image-align-horizontal": "flex-end",
+						"block-image-align-vertical": "flex-end"
+					}
+				}
+			]
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/list/components/list-editor.js

@@ -0,0 +1,14 @@
+import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ListEditor as EditorComponent } from '../../../components/list/components/list-editor';
+import manifest from '../manifest.json';
+
+export const ListEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('list', attributes, {
+				setAttributes,
+				additionalClass: getTwClasses(attributes, manifest),
+			})}
+		/>
+	);
+};

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

@@ -0,0 +1,39 @@
+import { __ } from '@wordpress/i18n';
+import { props, getOption, checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ListOptions as OptionsComponent } from '../../../components/list/components/list-options';
+import { ButtonGroup, ColorPicker } from '@eightshift/ui-components';
+import { getColorOption } from '../../../assets/scripts/shared';
+import manifest from '../manifest.json';
+
+export const ListOptions = ({ attributes, setAttributes }) => {
+	const listTextColor = checkAttr('listTextColor', attributes, manifest);
+	const listMarkerColor = checkAttr('listMarkerColor', attributes, manifest);
+
+	const colorOptions = getColorOption('listColor', manifest);
+
+	return (
+		<OptionsComponent
+			{...props('list', attributes, {
+				setAttributes,
+			})}
+			additionalControls={
+				<ButtonGroup>
+					<ColorPicker
+						value={listTextColor}
+						onChange={(value) => setAttributes({ [getAttrKey('listTextColor', attributes, manifest)]: value })}
+						colors={colorOptions}
+						type='textColor'
+					/>
+					<ColorPicker
+						value={listMarkerColor}
+						onChange={(value) => setAttributes({ [getAttrKey('listMarkerColor', attributes, manifest)]: value })}
+						colors={colorOptions}
+						type='listMarkerColor'
+						clearable
+					/>
+				</ButtonGroup>
+			}
+			controlOnly
+		/>
+	);
+};

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

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

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

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * List block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+echo Helpers::render('list', Helpers::props('list', $attributes, [
+	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+]));

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

@@ -0,0 +1,58 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "list",
+	"title": "List",
+	"description" : "Add a basic list of items.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-lists"
+	},
+	"keywords": [
+		"list",
+		"btn",
+		"list"
+	],
+	"components": {
+		"list": "list"
+	},
+	"attributes": {
+		"listTextColor": {
+			"type": "string",
+			"default": "black"
+		},
+		"listMarkerColor": {
+			"type": "string"
+		}
+	},
+	"options": {
+		"listColor": [
+			"red-500",
+			"navy-500",
+			"gray-500",
+			"black",
+			"white"
+		]
+	},
+	"tailwind": {
+		"options": {
+			"listMarkerColor": {
+				"twClasses": {
+					"red-500": "marker:text-red-500",
+					"navy-500": "marker:text-navy-500",
+					"gray-500": "marker:text-gray-500",
+					"black": "marker:text-black",
+					"white": "marker:text-white"
+				}
+			},
+			"listTextColor": {
+				"twClasses": {
+					"red-500": "text-red-500",
+					"navy-500": "text-navy-500",
+					"gray-500": "text-gray-500",
+					"black": "text-black",
+					"white": "text-white"
+				}
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/map/assets/index.js

@@ -0,0 +1,20 @@
+import domReady from '@wordpress/dom-ready';
+import manifest from '../manifest.json';
+
+domReady(async () => {
+	const { blockName } = manifest;
+
+	const selector = `.js-block-${blockName}`;
+	const elements = document.querySelectorAll(selector);
+
+	if (!elements.length) {
+		return;
+	}
+
+	const { MapController } = await import('./map-controller');
+
+	elements.forEach((element) => {
+		const map = new MapController({ element });
+		map.init();
+	});
+});

package/blocks/init/src/Blocks/custom/map/assets/map-controller.js

@@ -0,0 +1,42 @@
+import { Map, View } from 'ol';
+import { useGeographic } from 'ol/proj';
+import { processMapInteraction, processMapLayer } from './utils';
+import { defaults as OLDefaultInteractions } from 'ol/interaction/defaults';
+
+export class MapController {
+	constructor(options) {
+		this.element = options.element;
+	}
+
+	init() {
+		useGeographic();
+
+		const parsedLayers = JSON.parse(this.element?.dataset?.mapLayers ?? '');
+		const parsedControls = JSON.parse(this.element?.dataset?.mapControls ?? '');
+		const parsedInteractions = JSON.parse(this.element?.dataset?.mapInteractions ?? '');
+
+		const parsedLat = parseFloat(this.element?.dataset?.centerLat || '46.314045');
+		const parsedLon = parseFloat(this.element?.dataset?.centerLon || '16.352532');
+		const parsedZoom = parseFloat(this.element?.dataset?.centerZoom || '14');
+
+		if (parsedLayers?.length < 1) {
+			return;
+		}
+
+		const view = new View({
+			center: [parsedLon, parsedLat],
+			zoom: parsedZoom,
+		});
+
+		new Map({
+			target: this.element,
+			layers: parsedLayers.map((layer) => processMapLayer(layer)),
+			view: view,
+			interactions: OLDefaultInteractions(parsedInteractions).getArray(),
+			// eslint-disable-next-line no-unused-vars
+			controls: Object.entries(parsedControls)
+				.filter(([_, v]) => v === true)
+				.map(([name]) => processMapInteraction(name)),
+		});
+	}
+}