@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

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

@@ -1,81 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useSelect, dispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
-import { BlockInserter, tailwindClasses, checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { Button, RichLabel } from '@eightshift/ui-components';
-import { icons, BlockIcon } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-export const ColumnsEditor = ({ attributes, setAttributes, clientId }) => {
-	const { title, layoutPresets } = manifest;
-
-	const innerBlockCount = useSelect(
-		(select) => select('core/block-editor').getBlock(clientId).innerBlocks?.length ?? 0,
-	);
-
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(blockProps, {
-		allowedBlocks: ['eightshift-boilerplate/column'],
-		renderAppender: false,
-		orientation: 'horizontal',
-	});
-
-	return (
-		<>
-			{innerBlockCount < 1 && (
-				<div className='es-uic-font-sans mx-auto grid max-w-72 grid-cols-2 gap-1.5 rounded-lg border border-gray-200 p-3 text-xs shadow-lg'>
-					<RichLabel
-						icon={<BlockIcon iconName='es-columns' />}
-						label={title}
-						className='col-span-2 mb-2 select-none font-medium !text-gray-400'
-					/>
-
-					<span className='col-span-2 select-none justify-self-center'>{__('Common layouts', '%g_textdomain%')}</span>
-
-					{layoutPresets.map(({ name, icon, blocks: blockData, attributes: attrsToSet }, index) => {
-						return (
-							<Button
-								key={index}
-								onPress={async () => {
-									const blocksToInsert = blockData.map(({ name: blockName, attributes: blockAttrs }) =>
-										createBlock(blockName, blockAttrs),
-									);
-
-									setAttributes(attrsToSet);
-
-									await dispatch('core/block-editor').insertBlocks(blocksToInsert, 0, clientId);
-								}}
-								icon={icons?.[icon] ?? icons.genericShapesAlt}
-								size='large'
-							>
-								{name}
-							</Button>
-						);
-					})}
-
-					<span className='col-span-2 select-none justify-self-center'>{__('or', '%g_textdomain%')}</span>
-
-					<BlockInserter
-						label
-						clientId={clientId}
-						className='col-span-2 justify-self-center'
-					/>
-				</div>
-			)}
-
-			<div
-				{...innerBlocksProps}
-				className={tailwindClasses(attributes, manifest, '[&>.block-list-appender]:hidden')}
-			/>
-
-			{innerBlockCount > 0 && (
-				<BlockInserter
-					label
-					clientId={clientId}
-					className='mx-auto mt-2.5'
-				/>
-			)}
-		</>
-	);
-};

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

@@ -1,104 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Responsive, Spacer, OptionSelect, NumberPicker } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts/helpers/breakpoints';
-import { checkAttr, getOption, getAttrKey, generateOptionsFromValue } from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from './../manifest.json';
-
-export const ColumnsOptions = ({ attributes, setAttributes }) => {
-	const columnsNumOfColumns = checkAttr('columnsNumOfColumns', attributes, manifest);
-	const columnsColumnGap = checkAttr('columnsColumnGap', attributes, manifest);
-	const columnsRowGap = checkAttr('columnsRowGap', attributes, manifest);
-	const columnsRowHeight = checkAttr('columnsRowHeight', attributes, manifest);
-
-	const responsiveData = getResponsiveData(true);
-
-	return (
-		<>
-			<Responsive
-				value={columnsNumOfColumns}
-				onChange={(value) => setAttributes({ [getAttrKey('columnsNumOfColumns', attributes, manifest)]: value })}
-				icon={icons.gridAutoCols}
-				label={__('Number of columns', 'eightshift-ui-components')}
-				options={generateOptionsFromValue(columnsNumOfColumns)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, handleChange }) => (
-					<NumberPicker
-						value={parseInt(currentValue)}
-						onChange={(value) => handleChange(`${value}`)}
-						fixedWidth={2.25}
-						size='small'
-						min={1}
-						max={12}
-						step={1}
-						aria-label={__('Number of columns', 'eightshift-ui-components')}
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnsRowHeight}
-				onChange={(value) => setAttributes({ [getAttrKey('columnsRowHeight', attributes, manifest)]: value })}
-				icon={icons.gridRow}
-				label={__('Row height', 'eightshift-ui-components')}
-				options={getOption('columnsRowHeight', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, options, handleChange }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-					/>
-				)}
-			</Responsive>
-
-			<Spacer />
-
-			<Responsive
-				value={columnsColumnGap}
-				onChange={(value) => setAttributes({ [getAttrKey('columnsColumnGap', attributes, manifest)]: value })}
-				icon={icons.gutter}
-				label={__('Column gap', 'eightshift-ui-components')}
-				options={getOption('columnsGap', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, options, handleChange, isInlineCollapsedView }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
-					/>
-				)}
-			</Responsive>
-
-			<Responsive
-				value={columnsRowGap}
-				onChange={(value) => setAttributes({ [getAttrKey('columnsRowGap', attributes, manifest)]: value })}
-				icon={icons.verticalSpacing}
-				label={__('Row gap', 'eightshift-ui-components')}
-				options={getOption('columnsGap', attributes, manifest)}
-				noModeSelect
-				inline
-				{...responsiveData}
-			>
-				{({ currentValue, options, handleChange, isInlineCollapsedView }) => (
-					<OptionSelect
-						options={options}
-						value={currentValue}
-						onChange={(value) => handleChange(value)}
-						type={isInlineCollapsedView ? 'menu' : 'toggleButtons'}
-					/>
-				)}
-			</Responsive>
-		</>
-	);
-};