@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/wrapper/manifest.json

@@ -0,0 +1,450 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "wrapper",
+	"title": "Wrapper",
+	"componentClass": "wrapper",
+	"example": {
+		"attributes": {
+			"wrapperId": "This a custom ID",
+			"wrapperBgColorType": "project",
+			"wrapperBgColorProject": "white",
+			"wrapperUse": true,
+			"wrapperSimple": false,
+			"wrapperUseShowControl": true,
+			"wrapperNoControls": false,
+			"wrapperParentClass": "",
+			"wrapperWidthLarge": 12,
+			"wrapperOffsetLarge": 1,
+			"wrapperHideLarge": false,
+			"wrapperIsFullWidthLarge": true,
+			"wrapperSpacingTopLarge": 1,
+			"wrapperSpacingBottomLarge": 1,
+			"wrapperSpacingTopInLarge": 1,
+			"wrapperDividerTopLarge": true,
+			"wrapperDividerColor": "black"
+		}
+	},
+	"attributes": {
+		"wrapperUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"wrapperNoControls": {
+			"type": "boolean",
+			"default": false
+		},
+		"wrapperNoWidthControls": {
+			"type": "boolean",
+			"default": false
+		},
+		"wrapperWidth": {
+			"type": "string",
+			"default": "contained"
+		},
+		"wrapperBackground": {
+			"type": "string",
+			"default": "none"
+		},
+		"wrapperGradientDirection": {
+			"type": "string"
+		},
+		"wrapperBorderRadius": {
+			"type": "string",
+			"default": "none"
+		},
+		"wrapperHide": {
+			"type": "object",
+			"default": {
+				"_default": false,
+				"_desktopFirst": true
+			}
+		},
+		"wrapperMarginTop": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"wrapperMarginBottom": {
+			"type": "object",
+			"default": {
+				"_default": "sm",
+				"_desktopFirst": true
+			}
+		},
+		"wrapperPaddingTop": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"wrapperPaddingBottom": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"wrapperContentWidth": {
+			"type": "object",
+			"default": {
+				"_default": "full",
+				"_desktopFirst": true
+			}
+		},
+		"wrapperId": {
+			"type": "string"
+		}
+	},
+	"options": {
+		"wrapperWidth": [
+			{
+				"value": "off",
+				"label": "Off",
+				"endIcon": "none",
+				"separator": "below"
+			},
+			{
+				"value": "contained",
+				"label": "Contained",
+				"endIcon": "wrapperSimple"
+			},
+			{
+				"value": "contained-wide-bg",
+				"label": "Contained",
+				"subtitle": "Full-width background",
+				"endIcon": "wrapper",
+				"separator": "below"
+			},
+			{
+				"value": "full",
+				"label": "Full-width",
+				"endIcon": "width"
+			}
+		],
+		"wrapperBackground": [
+			{
+				"value": "none",
+				"label": "None",
+				"icon": "none"
+			},
+			{
+				"value": "solid",
+				"label": "Color",
+				"icon": "color"
+			},
+			{
+				"value": "gradient",
+				"label": "Gradient",
+				"icon": "gradient"
+			}
+		],
+		"wrapperBackgroundSolid": [
+			"red-50",
+			"red-500",
+			"red-950",
+			"navy-50",
+			"navy-500",
+			"navy-950",
+			"gray-50",
+			"gray-500",
+			"gray-950"
+		],
+		"wrapperBackgroundGradient": [
+			{
+				"label": "Light gray",
+				"value": "gradient-light-gray"
+			},
+			{
+				"label": "Dark gray",
+				"value": "gradient-dark-gray"
+			},
+			{
+				"label": "Light navy",
+				"value": "gradient-light-navy"
+			},
+			{
+				"label": "Dark navy",
+				"value": "gradient-dark-navy"
+			},
+			{
+				"label": "Light red",
+				"value": "gradient-light-red"
+			},
+			{
+				"label": "Dark red",
+				"value": "gradient-dark-red"
+			},
+			{
+				"label": "Navy to red (light)",
+				"value": "gradient-navy-red-light"
+			},
+			{
+				"label": "Navy to red (dark)",
+				"value": "gradient-navy-red-dark"
+			}
+		],
+		"wrapperGradientDirection": [
+			{
+				"label": "To top",
+				"value": "to-t"
+			},
+			{
+				"label": "To top-right",
+				"value": "to-tr"
+			},
+			{
+				"label": "To right",
+				"value": "to-r"
+			},
+			{
+				"label": "To bottom-right",
+				"value": "to-br"
+			},
+			{
+				"label": "To bottom",
+				"value": "to-b"
+			},
+			{
+				"label": "To bottom-left",
+				"value": "to-bl"
+			},
+			{
+				"label": "To left",
+				"value": "to-l"
+			},
+			{
+				"label": "To top-left",
+				"value": "to-tl"
+			}
+		],
+		"wrapperBorderRadius": [
+			{
+				"label": "Square",
+				"value": "none",
+				"separator": "below"
+			},
+			{
+				"label": "Small",
+				"value": "sm"
+			},
+			{
+				"label": "Medium",
+				"value": "md"
+			},
+			{
+				"label": "Large",
+				"value": "lg"
+			},
+			{
+				"label": "Very large",
+				"value": "xl"
+			}
+		],
+		"wrapperSpacing": [
+			{
+				"label": "0",
+				"value": "none"
+			},
+			{
+				"label": "8",
+				"value": "xs"
+			},
+			{
+				"label": "16",
+				"value": "sm"
+			},
+			{
+				"label": "32",
+				"value": "md"
+			},
+			{
+				"label": "48",
+				"value": "lg"
+			},
+			{
+				"label": "64",
+				"value": "xl"
+			},
+			{
+				"label": "80",
+				"value": "2xl"
+			}
+		],
+		"wrapperHide": [
+			{
+				"label": "Visible",
+				"value": "false",
+				"icon": "visible"
+			},
+			{
+				"label": "Hidden",
+				"value": "true",
+				"icon": "hide"
+			}
+		],
+		"wrapperContentWidth": [
+			{
+				"label": "Full",
+				"value": "full",
+				"separator": "below"
+			},
+			{
+				"label": "1/2",
+				"value": "half",
+				"separator": "below"
+			},
+			{
+				"label": "1/3",
+				"value": "one-third"
+			},
+			{
+				"label": "2/3",
+				"value": "two-thirds",
+				"separator": "below"
+			},
+			{
+				"label": "1/4",
+				"value": "one-quarter"
+			},
+			{
+				"label": "3/4",
+				"value": "three-quarters",
+				"separator": "below"
+			},
+			{
+				"label": "Reading-optimized",
+				"value": "prose",
+				"subtitle": "65 characters per line"
+			}
+		]
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "scroll-my-24",
+			"twClassesEditor": "flow-root"
+		},
+		"options": {
+			"wrapperBackground": {
+				"twClasses": {
+					"solid-red-50": "bg-red-50",
+					"solid-red-500": "bg-red-500",
+					"solid-red-950": "bg-red-950",
+					"solid-navy-50": "bg-navy-50",
+					"solid-navy-500": "bg-navy-500",
+					"solid-navy-950": "bg-navy-950",
+					"solid-gray-50": "bg-gray-50",
+					"solid-gray-500": "bg-gray-500",
+					"solid-gray-950": "bg-gray-950",
+					"gradient-light-gray": "from-gray-50 to-gray-100",
+					"gradient-dark-gray": "from-gray-800 to-gray-950",
+					"gradient-light-navy": "from-navy-50 to-navy-100",
+					"gradient-dark-navy": "from-navy-800 to-navy-950",
+					"gradient-light-red": "from-red-50 to-red-100",
+					"gradient-dark-red": "from-red-800 to-red-950",
+					"gradient-navy-red-light": "from-red-200 to-navy-300",
+					"gradient-navy-red-dark": "from-red-700 to-navy-800"
+				}
+			},
+			"wrapperGradientDirection": {
+				"twClasses": {
+					"to-t": "bg-gradient-to-r",
+					"to-tr": "bg-gradient-to-tr",
+					"to-r": "bg-gradient-to-r",
+					"to-br": "bg-gradient-to-br",
+					"to-b": "bg-gradient-to-b",
+					"to-bl": "bg-gradient-to-bl",
+					"to-l": "bg-gradient-to-l",
+					"to-tl": "bg-gradient-to-tl"
+				}
+			},
+			"wrapperWidth": {
+				"twClasses": {
+					"contained": "wrapper-contained",
+					"contained-wide-bg": "wrapper-contained-wide",
+					"full": "wrapper-full"
+				}
+			},
+			"wrapperBorderRadius": {
+				"twClasses": {
+					"sm": "rounded",
+					"md": "rounded-md",
+					"lg": "rounded-lg",
+					"xl": "rounded-xl"
+				}
+			},
+			"wrapperHide": {
+				"responsive": true,
+				"twClasses": {
+					"true": "hidden",
+					"false": "block"
+				},
+				"twClassesEditor": {
+					"true": "opacity-25"
+				}
+			},
+			"wrapperMarginTop": {
+				"responsive": true,
+				"twClasses": {
+					"none": "mt-0",
+					"xs": "mt-2",
+					"sm": "mt-4",
+					"md": "mt-8",
+					"lg": "mt-12",
+					"xl": "mt-16",
+					"2xl": "mt-20"
+				}
+			},
+			"wrapperMarginBottom": {
+				"responsive": true,
+				"twClasses": {
+					"none": "mb-0",
+					"xs": "mb-2",
+					"sm": "mb-4",
+					"md": "mb-8",
+					"lg": "mb-12",
+					"xl": "mb-16",
+					"2xl": "mb-20"
+				}
+			},
+			"wrapperPaddingTop": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pt-0",
+					"xs": "pt-2",
+					"sm": "pt-4",
+					"md": "pt-8",
+					"lg": "pt-12",
+					"xl": "pt-16",
+					"2xl": "pt-20"
+				}
+			},
+			"wrapperPaddingBottom": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pb-0",
+					"xs": "pb-2",
+					"sm": "pb-4",
+					"md": "pb-8",
+					"lg": "pb-12",
+					"xl": "pb-16",
+					"2xl": "pb-20"
+				}
+			},
+			"wrapperContentWidth": {
+				"responsive": true,
+				"twClasses": {
+					"full": "w-full",
+					"half": "w-1/2",
+					"one-third": "w-1/3",
+					"two-thirds": "w-3/4",
+					"one-quarter": "w-1/4",
+					"three-quarters": "w-3/4",
+					"prose": "w-full max-w-4xl"
+				}
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/wrapper/styles-editor.css

@@ -0,0 +1,13 @@
+.is-root-container.wp-block-post-content.block-editor-block-list__layout {
+	@apply pt-10;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.is-root-container.wp-block-post-content.block-editor-block-list__layout > .block-editor-block-list__block.wp-block {
+	@apply !mx-0 !mt-0 [&:not(.is-selected)]:!mb-0 sm:grid sm:grid-cols-[minmax(0,_1fr)_minmax(0,_80rem)_minmax(0,_1fr)];
+
+	/* stylelint-disable-next-line selector-max-specificity */
+	& > *:not(.wrapper-contained, .wrapper-contained-wide, .wrapper-full) {
+		@apply sm:col-start-2 col-span-1;
+	}
+}

package/blocks/init/src/Blocks/wrapper/styles.css

@@ -0,0 +1,19 @@
+.wrapper-contained {
+	@apply col-start-2 col-span-1 ~sm/md:~px-8/20;
+}
+
+.wrapper-contained-wide {
+	@apply col-span-full ~sm/md:~px-8/20 ~sm/md:~gap-x-16/40 sm:grid sm:grid-cols-subgrid sm:*:col-start-2 sm:*:col-span-1;
+}
+
+.wrapper-full {
+	@apply col-span-full;
+}
+
+.layout-base {
+	@apply sm:grid sm:grid-cols-[minmax(0,_1fr)_minmax(0,_80rem)_minmax(0,_1fr)];
+
+	& > *:not(.wrapper-contained, .wrapper-contained-wide, .wrapper-full) {
+		@apply sm:col-start-2 col-span-1;
+	}
+}

package/blocks/init/src/Blocks/wrapper/wrapper.js

@@ -0,0 +1,30 @@
+import { InspectorControls } from '@wordpress/block-editor';
+import { WrapperEditor } from './components/wrapper-editor';
+import { WrapperOptions } from './components/wrapper-options';
+
+export const Wrapper = (props) => {
+	const {
+		props: {
+			setAttributes,
+			attributes,
+		},
+		children,
+	} = props;
+
+	return (
+		<>
+			<InspectorControls>
+				<WrapperOptions
+					attributes={attributes}
+					setAttributes={setAttributes}
+				/>
+			</InspectorControls>
+
+			<WrapperEditor
+				attributes={attributes}
+				children={children}
+				setAttributes={setAttributes}
+			/>
+		</>
+	);
+};

package/blocks/init/src/Blocks/wrapper/wrapper.php

@@ -0,0 +1,34 @@
+<?php
+
+/**
+ * Wrapper block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$wrapperUse = Helpers::checkAttr('wrapperUse', $attributes, $manifest);
+
+if (!$wrapperUse) {
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	echo $renderContent;
+	return;
+}
+
+$wrapperId = Helpers::checkAttr('wrapperId', $attributes, $manifest);
+?>
+
+<div
+	class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>"
+	<?php if (!empty($wrapperId)) { ?>
+		id="<?php echo esc_attr($wrapperId); ?>"
+	<?php } ?>
+>
+	<?php
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	echo $renderContent;
+	?>
+</div>

package/eslint.config.mjs

@@ -0,0 +1,3 @@
+import linterConfig from './linters/base.config.mjs';
+
+export default linterConfig;

package/linters/base.config.mjs

@@ -0,0 +1,81 @@
+// import react from 'eslint-plugin-react';
+// import reactHooks from 'eslint-plugin-react-hooks';
+import stylistic from '@stylistic/eslint-plugin-js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+
+export default [
+	{
+		ignores: ['**/dist/', 'public/'],
+	},
+	{
+		files: ['**/*.js', '**/*.jsx'],
+		languageOptions: {
+			parserOptions: {
+				ecmaFeatures: {
+					jsx: true,
+				},
+			},
+			globals: {
+				wp: true,
+				...globals.serviceworker,
+				...globals.browser,
+			},
+		},
+		plugins: {
+			// react,
+			// 'react-hooks': reactHooks,
+			'@stylistic/js': stylistic,
+		},
+		rules: {
+			'newline-before-return': 'error',
+			'no-constant-binary-expression': 'error',
+			'no-implicit-coercion': 'error',
+			'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+			'no-nested-ternary': 'error',
+			'no-underscore-dangle': ['error', { allowAfterThis: true }],
+			'no-void': 'error',
+			'@stylistic/js/semi': 'error',
+			'max-len': [
+				'error',
+				{
+					code: 180,
+					comments: 500,
+					ignorePattern: '^import .*',
+					ignoreStrings: true,
+					ignoreTemplateLiterals: true,
+					ignoreTrailingComments: true,
+				},
+			],
+			'padding-line-between-statements': [
+				'error',
+				{
+					blankLine: 'always',
+					prev: '*',
+					next: ['return', 'if', 'switch', 'for', 'while', 'try', 'throw'],
+				},
+				{
+					blankLine: 'any',
+					prev: ['const', 'let', 'var', 'import'],
+					next: ['const', 'let', 'var', 'import'],
+				},
+			],
+			// React-specific.
+			// Note: React rules are temporarily disabled until the plugin gets full compatibility with ESLint 9.
+			// 'consistent-return': 'warn',
+			// 'no-param-reassign': 'warn',
+			// 'react-hooks/rules-of-hooks': 'error',
+			// // 'react-hooks/exhaustive-deps': ['error', { additionalHooks: '(useSafeLayoutEffect|useUpdateEffect)' }],
+			// 'react/prop-types': ['error', { skipUndeclared: true }],
+			// 'react/react-in-jsx-scope': 'off',
+			// 'react/self-closing-comp': ['warn', { component: true, html: true }],
+			// 'react/no-unknown-property': ['error', { ignore: ['css'] }],
+		},
+		// settings: {
+		// 	react: {
+		// 		version: '18',
+		// 	},
+		// },
+	},
+	eslintPluginPrettierRecommended,
+];

package/linters/eslint.config.mjs

@@ -0,0 +1,4 @@
+import baseConfig from './base.config.mjs';
+import ignoreGitignored from './ignore-gitignored.mjs';
+
+export default [ignoreGitignored, ...baseConfig];

package/linters/ignore-gitignored.mjs

@@ -0,0 +1,9 @@
+import path from 'node:path';
+import { includeIgnoreFile } from '@eslint/compat';
+import { fileURLToPath } from 'node:url';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const gitignorePath = path.resolve(dirname, '.gitignore');
+
+export default [includeIgnoreFile(gitignorePath)];