@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,38 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getOption, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { HeadingOptions as OptionsComponent } from '../../../components/heading/components/heading-options';
-import { ColorPicker, OptionSelect } from '@eightshift/ui-components';
-import { getColorOption } from '../../../assets/scripts/shared';
-import manifest from '../manifest.json';
-
-export const HeadingOptions = ({ attributes, setAttributes }) => {
-	const headingAlign = checkAttr('headingAlign', attributes, manifest);
-	const headingColor = checkAttr('headingColor', attributes, manifest);
-
-	return (
-		<OptionsComponent
-			{...props('heading', attributes, {
-				setAttributes,
-			})}
-			additionalControls={
-				<>
-					<ColorPicker
-						colors={getColorOption('headingColor', manifest)}
-						onChange={(value) => setAttributes({ [getAttrKey('headingColor', attributes, manifest)]: value })}
-						type='textColor'
-						value={headingColor}
-						aria-label={__('Text color', '%g_textdomain%')}
-					/>
-
-					<OptionSelect
-						value={headingAlign}
-						onChange={(value) => setAttributes({ [getAttrKey('headingAlign', attributes, manifest)]: value })}
-						options={getOption('headingAlign', attributes, manifest)}
-						aria-label={__('Text alignment', '%g_textdomain%')}
-					/>
-				</>
-			}
-			controlOnly
-		/>
-	);
-};

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

@@ -1,13 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<?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::tailwindClasses('base', $attributes, $manifest),
-]));

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

@@ -1,79 +0,0 @@
-{
-	"$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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<?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

@@ -1,17 +0,0 @@
-{
-	"$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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<?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

@@ -1,33 +0,0 @@
-{
-	"$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"
-		},
-		"wrapperDisabledOptions": {
-			"type": "string",
-			"default": "roundedCorners"
-		}
-	},
-	"components": {
-		"image": "image"
-	}
-}

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

@@ -1,14 +0,0 @@
-import { tailwindClasses, 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: tailwindClasses(attributes, manifest),
-			})}
-		/>
-	);
-};

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

@@ -1,39 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<?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::tailwindClasses('base', $attributes, $manifest),
-]));

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

@@ -1,58 +0,0 @@
-{
-	"$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

@@ -1,20 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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(),
-			controls: Object.entries(parsedControls)
-				.filter(([_, v]) => v === true)
-				.map(([name]) => processMapInteraction(name)),
-		});
-	}
-}