@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,459 +0,0 @@
-{
-	"$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": "auto",
-				"_desktopFirst": true
-			}
-		},
-		"wrapperId": {
-			"type": "string"
-		},
-		"wrapperDisabledOptions": {
-			"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": "Auto",
-				"value": "auto",
-				"separator": "below"
-			},
-			{
-				"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",
-			"twClassesEditorOnly": "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-t",
-					"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"
-				},
-				"twClassesEditorOnly": {
-					"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": {
-					"auto": "w-auto",
-					"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

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

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

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

@@ -1,34 +0,0 @@
-<?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::tailwindClasses('base', $attributes, $manifest)); ?>"
-	<?php if (!empty($wrapperId)) { ?>
-		id="<?php echo esc_attr($wrapperId); ?>"
-	<?php } ?>
->
-	<?php
-	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-	echo $renderContent;
-	?>
-</div>

package/readme/packages.md

@@ -1,74 +0,0 @@
-# Packages readme
-
-This is a document explaining what each `package.json` package is used for.
-
-## Dependencies
-
-* @babel/cli - Adds terminal commands for babel.
-* @babel/core - Main Babel core package.
-* @babel/eslint-parser - JS Parser for babel.
-* @babel/eslint-plugin - JS Parser for babel plugin.
-* @dnd-kit/core - Modern helper for creating re-orderable react components
-* @dnd-kit/modifiers - Modern helper for creating re-orderable react components
-* @dnd-kit/sortable - Modern helper for creating re-orderable react components
-* @dnd-kit/utilities - Modern helper for creating re-orderable react components
-* @infinumjs/eslint-config-react-js - Adds JS linter config.
-* @swc/core - loader swc for faster build times.
-* @wordpress/api-fetch - WP package for api fetch.
-* @wordpress/dependency-extraction-webpack-plugin - Allows Webpack to read all @wordpress packages as external dependency.
-* @wordpress/dom-ready - WP package to load JS when dom is ready.
-* @wordpress/icons - WP icons package.
-* autoprefixer - Package for adding vendor prefix depending on your browserlist.
-* babel-loader - Loader used for Webpack.
-* browser-sync - Browser sync.
-* browser-sync-webpack-plugin - Browser sync plugin for Webpack.
-* classnames - Classnames package used in view components.
-* clean-webpack-plugin - Webpack plugin used to delete build folder.
-* core-js - Latest core Js to use in babel.
-* css-loader - Webpack loader user for css.
-* css-minimizer-webpack-plugin - Webpack plugin used to minimize output.
-* eslint - Package used for linting JS.
-* eslint-plugin-jsx-a11y - Package used for linting JS.
-* eslint-plugin-react - Package used for linting JS.
-* eslint-plugin-react-hooks - Package used for linting JS.
-* file-loader - Webpack loaded used for images and files.
-* husky - Package used for linting code on git commands.
-* import-glob - Webpack loader used for putting regex in css import.
-* media-blender - Package used for providing media queries.
-* mini-css-extract-plugin - Webpack plugin extracts CSS into separate files.
-* postcss - package for getting postcss options.
-* postcss-loader - Webpack loader used for postcss.
-* postcss-scss - package for parsing scss used for style linter.
-* promisify-child-process - Async child process library used in project setup.
-* raw-loader - Webpack loader used for files.
-* rc-slider - React slider component used in our components.
-* rc-tooltip - React tooltip component used in our components.
-* react-select - Select component for React.
-* regenerator-runtime - Used for Core-js polyfill.
-* sass - A pure JavaScript implementation of Sass
-* sass-loader - Webpack loader used for sass.
-* storybook - Storybook library used in projects.
-* style-loader - Webpack loader used for styles.
-* stylelint - Css linter.
-* stylelint-config-standard-scss - Css linter for scss type.
-* terser-webpack-plugin - Webpack plugin used for minimization.
-* webpack - Webpack library.
-* webpack-cli - Webpack cli library.
-* webpack-manifest-plugin - Webpack plugin used for outputting manifest.json.
-* webpack-merge - Webpack utility for merging multiple webpack files.
-
-## Dev dependencies
-
-* @babel/preset-env - Is a smart preset that allows you to use the latest JavaScript without needing to micromanage.
-* @babel/preset-react - Babel preset for React.
-* @eightshift/storybook - Our storybook used for frontend libs.
-* chalk - Terminal coloring library. Used in project setup.
-* del - Terminal delete library. Used in project setup.
-* gh-pages - Terminal GH pages lib for deployment to GH pages.
-* micromodal - Modal component used in the project here only for storybook.
-* ol - Map component used in the project here only for storybook.
-* ol-mapbox-style - Map component used in the project here only for storybook.
-* react-test-renderer - This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects.
-* replace-in-file - A simple utility to quickly replace text in one or more files or globs.
-* sassdoc - Sass docs library.
-* swiper - Swiper component used in the project here only for storybook.