@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

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

@@ -1,580 +0,0 @@
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { getAttrKey, checkAttr, getOption, generateOptionsFromValue } from '@eightshift/frontend-libs-tailwind/scripts';
-import {
-	Button,
-	ColumnConfigSlider,
-	NumberPicker,
-	OptionSelect,
-	Responsive,
-	Spacer,
-	getColumnConfigOutputText,
-	BaseControl,
-	ButtonGroup,
-	ColorPicker,
-} from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { clsx } from '@eightshift/ui-components/utilities';
-import { getBreakpointNames, getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts/helpers/breakpoints';
-import { rotationClassName, getColorOption } from '../../../assets/scripts/shared';
-import manifest from './../manifest.json';
-
-export const ColumnOptions = ({ attributes, setAttributes }) => {
-	const columnOffset = checkAttr('columnOffset', attributes, manifest);
-	const columnWidth = checkAttr('columnWidth', attributes, manifest);
-	const columnRowSpan = checkAttr('columnRowSpan', attributes, manifest);
-
-	const columnHide = checkAttr('columnHide', attributes, manifest);
-	const columnVerticalAlign = checkAttr('columnVerticalAlign', attributes, manifest);
-	const columnHorizontalAlign = checkAttr('columnHorizontalAlign', attributes, manifest);
-
-	const columnPaddingLeft = checkAttr('columnPaddingLeft', attributes, manifest);
-	const columnPaddingRight = checkAttr('columnPaddingRight', attributes, manifest);
-	const columnPaddingTop = checkAttr('columnPaddingTop', attributes, manifest);
-	const columnPaddingBottom = checkAttr('columnPaddingBottom', attributes, manifest);
-
-	const columnBackground = checkAttr('columnBackground', attributes, manifest);
-	const columnGradientDirection = checkAttr('columnGradientDirection', attributes, manifest);
-	const columnBorderRadius = checkAttr('columnBorderRadius', attributes, manifest);
-
-	const columnShadow = checkAttr('columnShadow', attributes, manifest);
-	const columnBorder = checkAttr('columnBorder', attributes, manifest);
-
-	const columnOverflow = checkAttr('columnOverflow', attributes, manifest);
-
-	const breakpointNames = getBreakpointNames();
-	const responsiveData = getResponsiveData(true);
-
-	const allBreakpoints = [...breakpointNames.toReversed(), '_default'];
-
-	const columnsConfig = attributes?.columnsConfig;
-
-	const hasEqualColumnConfigs = Object.keys(columnsConfig ?? {}).length <= 2;
-
-	const widthOffsetValue = Object.keys(columnOffset)
-		.filter((breakpoint) => breakpoint !== '_desktopFirst')
-		.reduce(
-			(prev, breakpoint) => {
-				return {
-					...prev,
-					[breakpoint]: `${breakpoint},${columnOffset?.[breakpoint]},${columnWidth?.[breakpoint]}`,
-				};
-			},
-			{ _desktopFirst: true },
-		);
-
-	const widthOffsetOptions = generateOptionsFromValue(widthOffsetValue, (value, breakpoint) => {
-		const [_, offset, width] = value.split(',');
-		const numColumns = parseInt(columnsConfig?.[breakpoint] ?? columnsConfig?.['_default']);
-
-		return getColumnConfigOutputText(numColumns, parseInt(offset), parseInt(width));
-	});
-
-	let backgroundType = 'none';
-
-	if (columnBackground?.startsWith('solid-')) {
-		backgroundType = 'solid';
-	} else if (columnBackground?.startsWith('gradient-')) {
-		backgroundType = 'gradient';
-	}
-
-	return (
-		<>
-			<Responsive
-				value={widthOffsetValue}
-				onChange={(newValue) => {
-					const valueKeys = Object.keys(newValue);
-
-					let newColumnOffset = { ...columnOffset };
-					let newColumnWidth = { ...columnWidth };
-
-					Object.keys(columnOffset).forEach((breakpoint) => {
-						if (breakpoint === '_default' || breakpoint === '_desktopFirst') {
-							return;
-						}
-
-						if (valueKeys.includes(breakpoint)) {
-							return;
-						}
-
-						delete newColumnOffset[breakpoint];
-						delete newColumnWidth[breakpoint];
-					});
-
-					setAttributes({
-						[getAttrKey('columnOffset', attributes, manifest)]: newColumnOffset,
-						[getAttrKey('columnWidth', attributes, manifest)]: newColumnWidth,
-					});
-				}}
-				icon={icons.positioningWidthGuide}
-				label={__('Placement', '%g_textdomain%')}
-				options={widthOffsetOptions}
-				innerContentAlign='stretch'
-				noModeSelect
-				{...responsiveData}
-			>
-				{({ breakpoint }) => {
-					let localBreakpoints = [...allBreakpoints];
-					const isUnset = !columnOffset[breakpoint] || !columnWidth[breakpoint];
-
-					if (breakpoint !== '_default') {
-						localBreakpoints = localBreakpoints.slice(localBreakpoints?.findIndex((v) => v === breakpoint) + 1);
-					}
-
-					const numOfColumns = parseInt(columnsConfig?.[breakpoint] ?? columnsConfig?.['_default']);
-
-					let offset = columnOffset[breakpoint];
-					let width = columnWidth[breakpoint];
-
-					if (!offset && breakpoint !== '_default' && hasEqualColumnConfigs) {
-						offset = columnOffset?.[localBreakpoints.find((breakpoint) => columnOffset?.[breakpoint])];
-					} else if (!offset && breakpoint !== '_default' && !hasEqualColumnConfigs) {
-						offset = '1';
-					}
-
-					if (!width && breakpoint !== '_default' && hasEqualColumnConfigs) {
-						width = columnWidth?.[localBreakpoints.find((breakpoint) => columnWidth?.[breakpoint])];
-					} else if (!width && breakpoint !== '_default' && !hasEqualColumnConfigs) {
-						width = columnsConfig?.[breakpoint] ?? '1';
-					}
-
-					if (numOfColumns === 1 && !(breakpoint in columnOffset) && !(breakpoint in columnWidth)) {
-						setAttributes({
-							[getAttrKey('columnOffset', attributes, manifest)]: {
-								...columnOffset,
-								[breakpoint]: '1',
-							},
-							[getAttrKey('columnWidth', attributes, manifest)]: {
-								...columnWidth,
-								[breakpoint]: '1',
-							},
-						});
-					}
-
-					if (isUnset && numOfColumns > 1) {
-						return (
-							<Button
-								onPress={() => {
-									setAttributes({
-										[getAttrKey('columnOffset', attributes, manifest)]: {
-											...columnOffset,
-											[breakpoint]: '1',
-										},
-										[getAttrKey('columnWidth', attributes, manifest)]: {
-											...columnWidth,
-											[breakpoint]: `${numOfColumns}`,
-										},
-									});
-								}}
-								className='min-h-10 justify-center'
-							>
-								{__('Set value', '%g_textdomain%')}
-							</Button>
-						);
-					}
-
-					return (
-						<ColumnConfigSlider
-							key={breakpoint}
-							columns={numOfColumns}
-							onChange={([newOffset, newWidth]) => {
-								const o = isNaN(newOffset) ? 1 : newOffset;
-								const w = isNaN(newWidth) ? 1 : newWidth;
-
-								setAttributes({
-									[getAttrKey('columnOffset', attributes, manifest)]: {
-										...columnOffset,
-										[breakpoint]: `${o}`,
-									},
-									[getAttrKey('columnWidth', attributes, manifest)]: {
-										...columnWidth,
-										[breakpoint]: `${w - o + 1}`,
-									},
-								});
-							}}
-							value={[parseInt(offset), parseInt(offset) + parseInt(width) - 1]}
-							disableOffset={numOfColumns === 1}
-							disableWidth={numOfColumns === 1}
-							aria-label={sprintf(__('Column: width and offset - %s', '%g_textdomain%'), breakpoint)}
-						/>
-					);
-				}}
-			</Responsive>
-
-			<Responsive
-				value={columnRowSpan}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnRowSpan', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.gridAutoRows}
-				label={__('Row span', '%g_textdomain%')}
-				options={generateOptionsFromValue(columnRowSpan, (v) =>
-					!v ? __('Not set', '%g_textdomain%') : sprintf(_n('1 row', '%d rows', v, '%g_textdomain%'), v),
-				)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, breakpoint }) => (
-					<NumberPicker
-						value={parseInt(currentValue)}
-						onChange={(value) => handleChange(`${value}`)}
-						min={1}
-						max={12}
-						step={1}
-						aria-label={sprintf(__('Column: row span - %s', '%g_textdomain%'), breakpoint)}
-						size='small'
-						fixedWidth={2.5}
-						placeholder='–'
-					/>
-				)}
-			</Responsive>
-
-			<Spacer />
-			<Spacer
-				icon={icons.alignHorizontalVerticalAlt2}
-				text={__('Content alignment', '%g_textdomain%')}
-				border
-			/>
-
-			<Responsive
-				value={columnHorizontalAlign}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnHorizontalAlign', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.horizontalAlign}
-				label={__('Horizontal', '%g_textdomain%')}
-				options={getOption('columnHorizontalAlign', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options, isInlineCollapsedView, breakpoint }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
-						noItemIcon={!isInlineCollapsedView}
-						noTriggerLabel
-						aria-label={sprintf(__('Column: content horizontal align - %s', '%g_textdomain%'), breakpoint)}
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnVerticalAlign}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnVerticalAlign', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.verticalAlign}
-				label={__('Vertical', '%g_textdomain%')}
-				options={getOption('columnVerticalAlign', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options, isInlineCollapsedView, breakpoint }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
-						noItemIcon={!isInlineCollapsedView}
-						noTriggerLabel
-						aria-label={sprintf(__('Column: content vertical align - %s', '%g_textdomain%'), breakpoint)}
-					/>
-				)}
-			</Responsive>
-
-			<Spacer />
-			<Spacer
-				icon={icons.design}
-				text={__('Design', '%g_textdomain%')}
-				border
-			/>
-
-			<BaseControl
-				icon={icons.backgroundType}
-				label={__('Background', '%g_textdomain%')}
-				inline
-			>
-				<ButtonGroup>
-					<OptionSelect
-						options={getOption('columnBackground', attributes, manifest)}
-						value={backgroundType}
-						onChange={(value) => {
-							if (value === 'none') {
-								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: undefined });
-							} else {
-								setAttributes({
-									[getAttrKey('columnBackground', attributes, manifest)]: Object.keys(
-										manifest.tailwind.options.columnBackground.twClasses,
-									).find((key) => key.startsWith(value)),
-								});
-							}
-						}}
-						aria-label={__('Background type', '%g_textdomain%')}
-						type='menu'
-						noItemIcon
-					/>
-
-					{backgroundType === 'solid' && (
-						<ColorPicker
-							colors={getColorOption('columnBackgroundSolid', manifest)}
-							onChange={(value) =>
-								setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: `solid-${value}` })
-							}
-							value={columnBackground?.replace('solid-', '')}
-							aria-label={__('Background color', '%g_textdomain%')}
-						/>
-					)}
-					{backgroundType === 'gradient' && (
-						<>
-							<OptionSelect
-								value={columnBackground}
-								onChange={(value) => setAttributes({ [getAttrKey('columnBackground', attributes, manifest)]: value })}
-								options={getOption('columnBackgroundGradient', attributes, manifest).map((option) => ({
-									...option,
-									endIcon: (
-										<div
-											className={clsx(
-												'es-uic-size-5 es-uic-rounded es-uic-border es-uic-border-gray-300 bg-gradient-to-r',
-												manifest.tailwind.options.columnBackground.twClasses[option.value],
-											)}
-										/>
-									),
-								}))}
-								wrapperProps={{
-									triggerIcon: (
-										<div
-											className={clsx(
-												'es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm bg-gradient-to-r',
-												manifest.tailwind.options.columnBackground.twClasses[columnBackground],
-											)}
-										/>
-									),
-								}}
-								aria-label={__('Gradient style', '%g_textdomain%')}
-								noTriggerLabel
-								type='menu'
-							/>
-							<OptionSelect
-								value={columnGradientDirection}
-								onChange={(value) =>
-									setAttributes({ [getAttrKey('columnGradientDirection', attributes, manifest)]: value })
-								}
-								options={getOption('columnGradientDirection', attributes, manifest)}
-								wrapperProps={{
-									triggerIcon: <div className={rotationClassName[columnGradientDirection]}>{icons.arrowUpCircle}</div>,
-								}}
-								aria-label={__('Gradient angle', '%g_textdomain%')}
-								noTriggerLabel
-								type='menu'
-							/>
-						</>
-					)}
-				</ButtonGroup>
-			</BaseControl>
-
-			<ColorPicker
-				icon={icons.border}
-				label={__('Border', '%g_textdomain%')}
-				colors={getColorOption('columnBorder', manifest)}
-				onChange={(value) => setAttributes({ [getAttrKey('columnBorder', attributes, manifest)]: value })}
-				value={columnBorder}
-				aria-label={__('Border', '%g_textdomain%')}
-				clearable
-				inline
-			/>
-
-			<OptionSelect
-				icon={icons.roundedCorners}
-				label={__('Rounded corners', '%g_textdomain%')}
-				value={columnBorderRadius}
-				onChange={(value) => setAttributes({ [getAttrKey('columnBorderRadius', attributes, manifest)]: value })}
-				options={getOption('columnBorderRadius', attributes, manifest)}
-				aria-label={__('Rounded corners', '%g_textdomain%')}
-				type='menu'
-				inline
-			/>
-
-			<OptionSelect
-				icon={icons.shadow}
-				label={__('Shadow', '%g_textdomain%')}
-				value={columnShadow}
-				onChange={(value) => setAttributes({ [getAttrKey('columnShadow', attributes, manifest)]: value })}
-				options={getOption('columnShadow', attributes, manifest)}
-				aria-label={__('Shadow', '%g_textdomain%')}
-				type='menu'
-				inline
-			/>
-
-			<Spacer />
-			<Spacer
-				icon={icons.containerSpacingH}
-				text={__('Padding', '%g_textdomain%')}
-				border
-			/>
-
-			<Responsive
-				value={columnPaddingTop}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnPaddingTop', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.spacingTopIn}
-				label={__('Top', '%g_textdomain%')}
-				options={getOption('columnSpacing', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type='menu'
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnPaddingRight}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnPaddingRight', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.spacingRightIn}
-				label={__('Right', '%g_textdomain%')}
-				options={getOption('columnSpacing', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type='menu'
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnPaddingBottom}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnPaddingBottom', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.spacingBottomIn}
-				label={__('Bottom', '%g_textdomain%')}
-				options={getOption('columnSpacing', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type='menu'
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnPaddingLeft}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnPaddingLeft', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.spacingLeftIn}
-				label={__('Left', '%g_textdomain%')}
-				options={getOption('columnSpacing', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type='menu'
-					/>
-				)}
-			</Responsive>
-
-			<Spacer />
-			<Spacer
-				icon={icons.moreHCircle}
-				text={__('Advanced', '%g_textdomain%')}
-				border
-			/>
-
-			<Responsive
-				value={columnHide}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnHide', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.visibility}
-				label={__('Visibility', '%g_textdomain%')}
-				options={getOption('columnHide', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options, isInlineCollapsedView, breakpoint }) => (
-					<OptionSelect
-						options={options}
-						value={String(currentValue)}
-						onChange={(value) => handleChange(value)}
-						noItemLabel={isInlineCollapsedView}
-						noItemIcon={!isInlineCollapsedView}
-						aria-label={sprintf(__('Column: visibility - %s', '%g_textdomain%'), breakpoint)}
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnOverflow}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('columnOverflow', attributes, manifest)]: value,
-					})
-				}
-				icon={icons.wrapperOverflow}
-				label={__('Content overflow', '%g_textdomain%')}
-				options={getOption('columnOverflow', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange, options, breakpoint }) => (
-					<OptionSelect
-						options={options}
-						value={String(currentValue)}
-						onChange={(value) => handleChange(value)}
-						aria-label={sprintf(__('Column: content overflow - %s', '%g_textdomain%'), breakpoint)}
-						type='menu'
-					/>
-				)}
-			</Responsive>
-		</>
-	);
-};