@abcagency/hc-ui-components 1.3.13 → 1.3.15

package/src/components/modules/filter/search.js

@@ -1,92 +1,92 @@
-import React, { useRef, useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from '~/components/modules/icon';
-import FilterCard from '~/components/modules/cards/filter';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const Search = ({
-	inputPlaceholder = "Keywords",
-	showSearchIcon = false,
-	className,
-	labelClassName
-}) => {
-	const [inputValue, setInputValue] = useState(query != null ? query : "");
-	const debounceTimer = useRef(null);
-	const {
-		query,
-		setQuery,
-		siteConfig
-	} = useMapList();
-	const handleInputChange = e => {
-		setInputValue(e.target.value);
-		if (debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-		}
-		debounceTimer.current = setTimeout(() => {
-			setQuery(e.target.value);
-		}, 500);
-	};
-
-	const handleReset = () => {
-		setInputValue("");
-		setQuery("");
-	};
-
-	useEffect(() => {
-		if (query == null) {
-			setInputValue("");
-		}
-	}, [query]);
-	inputPlaceholder = siteConfig.searchConfig.placeholder;
-	return (
-		<FilterCard as="form" className={className ?? ""}>
-			<FilterCard.Title
-				as="label"
-				icon="fluent:search-12-filled"
-				className={labelClassName ?? ""}
-			>
-				<span>
-					{siteConfig.searchConfig.label}
-				</span>
-			</FilterCard.Title>
-
-			<div className="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
-				{showSearchIcon && (
-					<Icon
-						icon="fluent:search-12-filled"
-						size="hc-size-4"
-						className="hc-mr-2 hc-text-uiAccent/50"
-					/>
-				)}
-				<input
-					type="text"
-					name="search"
-					onKeyDown={e => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-						}
-					}}
-					placeholder={inputPlaceholder}
-					value={inputValue}
-					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
-					onChange={handleInputChange}
-				/>
-
-				<Button.Btn
-					type="reset"
-					variant="icon"
-					size="sqsm"
-					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
-					onClick={handleReset}
-				>
-					<span className="sr-only">Clear</span>
-					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
-				</Button.Btn>
-			</div>
-		</FilterCard>
-	);
-};
-
-export default Search;
+import React, { useRef, useState, useEffect } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from '~/components/modules/icon';
+import FilterCard from '~/components/modules/cards/filter';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const Search = ({
+	inputPlaceholder = "Keywords",
+	showSearchIcon = false,
+	className,
+	labelClassName
+}) => {
+	const [inputValue, setInputValue] = useState(query != null ? query : "");
+	const debounceTimer = useRef(null);
+	const {
+		query,
+		setQuery,
+		siteConfig
+	} = useMapList();
+	const handleInputChange = e => {
+		setInputValue(e.target.value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(e.target.value);
+		}, 500);
+	};
+
+	const handleReset = () => {
+		setInputValue("");
+		setQuery("");
+	};
+
+	useEffect(() => {
+		if (query == null) {
+			setInputValue("");
+		}
+	}, [query]);
+	inputPlaceholder = siteConfig.searchConfig.placeholder;
+	return (
+		<FilterCard as="form" className={className ?? ""}>
+			<FilterCard.Title
+				as="label"
+				icon="fluent:search-12-filled"
+				className={labelClassName ?? ""}
+			>
+				<span>
+					{siteConfig.searchConfig.label}
+				</span>
+			</FilterCard.Title>
+
+			<div className="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
+				{showSearchIcon && (
+					<Icon
+						icon="fluent:search-12-filled"
+						size="hc-size-4"
+						className="hc-mr-2 hc-text-uiAccent/50"
+					/>
+				)}
+				<input
+					type="text"
+					name="search"
+					onKeyDown={e => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+						}
+					}}
+					placeholder={inputPlaceholder}
+					value={inputValue}
+					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
+					onChange={handleInputChange}
+				/>
+
+				<Button.Btn
+					type="reset"
+					variant="icon"
+					size="sqsm"
+					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
+					onClick={handleReset}
+				>
+					<span className="sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;

package/src/components/modules/filter/sort.js

@@ -1,83 +1,83 @@
-import React, { forwardRef } from 'react';
-import * as Select from '@radix-ui/react-select';
-import { twMerge } from 'tailwind-merge';
-
-import Icon from '~/components/modules/icon';
-import Button from '~/components/modules/buttons/default';
-
-const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
-	const handleSortChange = value => {
-		const [field, direction] = value.split("-");
-		setSortSetting({ field, type: direction });
-	};
-
-	return (
-		<div className={className ?? ""}>
-			<Select.Root onValueChange={handleSortChange}>
-				<Select.Trigger asChild aria-label="Sort">
-					<Button.Btn variant="outline" size="sm" className="hc-normal-case">
-						<Button.Body className="hc-justify-center">
-							<Select.Value placeholder={
-								<span className="hc-flex hc-items-center hc-gap-2">
-									Sort
-									<Icon icon="mdi:sort" />
-								</span>
-							} />
-							<Select.Icon>
-								<Button.Icon icon="mdi:chevron-down" />
-							</Select.Icon>
-						</Button.Body>
-					</Button.Btn>
-				</Select.Trigger>
-				<Select.Portal>
-					<Select.Content className={`hc-relative hc-z-[200] hc-overflow-hidden hc-bg-white hc-rounded-md `}>
-						<Select.ScrollUpButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
-							<Icon icon="mdi:chevron-up" />
-						</Select.ScrollUpButton>
-						<Select.Viewport className="hc-p-1">
-							{fields.map(field => (
-								<Select.Group key={field}>
-									<SelectItem value={`${field}-asc`}>
-										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full">
-											{fieldNames[field] ?? field}
-											<Icon icon="mdi:sort-ascending" />
-										</span>
-									</SelectItem>
-									<SelectItem value={`${field}-desc`}>
-										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 w-full">
-											{fieldNames[field] ?? field}
-											<Icon icon="mdi:sort-descending" />
-										</span>
-									</SelectItem>
-								</Select.Group>
-							))}
-						</Select.Viewport>
-						<Select.ScrollDownButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
-							<Icon icon="mdi:chevron-down" />
-						</Select.ScrollDownButton>
-					</Select.Content>
-				</Select.Portal>
-			</Select.Root>
-		</div>
-	);
-};
-
-const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
-	<Select.Item
-		className={twMerge(
-			"hc-text-sm hc-leading-none hc-rounded-sm hc-flex hc-items-center hc-w-full hc-py-1.5 hc-pr-4 hc-pl-7 hc-relative hc-select-none hc-cursor-pointer data-[disabled]:hc-text-gray-500 data-[disabled]:hc-pointer-events-none data-[highlighted]:hc-outline-none data-[highlighted]:hc-bg-primary data-[highlighted]:hc-text-white",
-			className
-		)}
-		{...props}
-		ref={forwardedRef}
-	>
-		<Select.ItemText>{children}</Select.ItemText>
-		<Select.ItemIndicator className="hc-absolute hc-left-0 hc-w-8 hc-inline-flex hc-items-center hc-justify-center">
-			<Icon icon="mdi:check" />
-		</Select.ItemIndicator>
-	</Select.Item>
-));
-
-SelectItem.displayName = "SelectItem";
-
-export default FilterSort;
+import React, { forwardRef } from 'react';
+import * as Select from '@radix-ui/react-select';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+import Button from '~/components/modules/buttons/default';
+
+const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
+	const handleSortChange = value => {
+		const [field, direction] = value.split("-");
+		setSortSetting({ field, type: direction });
+	};
+
+	return (
+		<div className={className ?? ""}>
+			<Select.Root onValueChange={handleSortChange}>
+				<Select.Trigger asChild aria-label="Sort">
+					<Button.Btn variant="outline" size="sm" className="hc-normal-case">
+						<Button.Body className="hc-justify-center">
+							<Select.Value placeholder={
+								<span className="hc-flex hc-items-center hc-gap-2">
+									Sort
+									<Icon icon="mdi:sort" />
+								</span>
+							} />
+							<Select.Icon>
+								<Button.Icon icon="mdi:chevron-down" />
+							</Select.Icon>
+						</Button.Body>
+					</Button.Btn>
+				</Select.Trigger>
+				<Select.Portal>
+					<Select.Content className={`hc-relative hc-z-[200] hc-overflow-hidden hc-bg-white hc-rounded-md `}>
+						<Select.ScrollUpButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-up" />
+						</Select.ScrollUpButton>
+						<Select.Viewport className="hc-p-1">
+							{fields.map(field => (
+								<Select.Group key={field}>
+									<SelectItem value={`${field}-asc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-ascending" />
+										</span>
+									</SelectItem>
+									<SelectItem value={`${field}-desc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-descending" />
+										</span>
+									</SelectItem>
+								</Select.Group>
+							))}
+						</Select.Viewport>
+						<Select.ScrollDownButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-down" />
+						</Select.ScrollDownButton>
+					</Select.Content>
+				</Select.Portal>
+			</Select.Root>
+		</div>
+	);
+};
+
+const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Select.Item
+		className={twMerge(
+			"hc-text-sm hc-leading-none hc-rounded-sm hc-flex hc-items-center hc-w-full hc-py-1.5 hc-pr-4 hc-pl-7 hc-relative hc-select-none hc-cursor-pointer data-[disabled]:hc-text-gray-500 data-[disabled]:hc-pointer-events-none data-[highlighted]:hc-outline-none data-[highlighted]:hc-bg-primary data-[highlighted]:hc-text-white",
+			className
+		)}
+		{...props}
+		ref={forwardedRef}
+	>
+		<Select.ItemText>{children}</Select.ItemText>
+		<Select.ItemIndicator className="hc-absolute hc-left-0 hc-w-8 hc-inline-flex hc-items-center hc-justify-center">
+			<Icon icon="mdi:check" />
+		</Select.ItemIndicator>
+	</Select.Item>
+));
+
+SelectItem.displayName = "SelectItem";
+
+export default FilterSort;

package/src/components/modules/grid.js

@@ -1,54 +1,54 @@
-import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const Grid = forwardRef((props, ref) => {
-	const {
-		as = 'div',
-		children,
-		className,
-		autoRows = true,
-		columns = 'md:hc-grid-cols-2',
-		gap = 'hc-gap-12 lg:hc-gap-16',
-		...rest
-	} = props;
-
-	const Container = as;
-
-	return (
-		<Container
-			ref={ref}
-			className={twMerge(
-				'hc-grid',
-				gap,
-				autoRows ? 'hc-auto-rows-min' : '',
-				'hc-grid-cols-1',
-				columns,
-				className ?? ''
-			)}
-			{...rest}
-		>
-			{children}
-		</Container>
-	);
-});
-
-export const GridItem = ({
-	as = 'div',
-	children,
-	className
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={className ?? ''}
-		>
-			{children}
-		</Container>
-	);
-};
-
-Grid.Item = GridItem;
-
-Grid.displayName = 'Grid';
-export default Grid;
+import React, { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Grid = forwardRef((props, ref) => {
+	const {
+		as = 'div',
+		children,
+		className,
+		autoRows = true,
+		columns = 'md:hc-grid-cols-2',
+		gap = 'hc-gap-12 lg:hc-gap-16',
+		...rest
+	} = props;
+
+	const Container = as;
+
+	return (
+		<Container
+			ref={ref}
+			className={twMerge(
+				'hc-grid',
+				gap,
+				autoRows ? 'hc-auto-rows-min' : '',
+				'hc-grid-cols-1',
+				columns,
+				className ?? ''
+			)}
+			{...rest}
+		>
+			{children}
+		</Container>
+	);
+});
+
+export const GridItem = ({
+	as = 'div',
+	children,
+	className
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={className ?? ''}
+		>
+			{children}
+		</Container>
+	);
+};
+
+Grid.Item = GridItem;
+
+Grid.displayName = 'Grid';
+export default Grid;

package/src/components/modules/icon.js

@@ -1,33 +1,33 @@
-import React from 'react';
-import { Icon } from '@iconify/react';
-
-const IconContained = ({
-	className,
-	size,
-	icon,
-	iconClasses,
-	title,
-	...iconProps
-}) => {
-	return (
-		<span
-			title={title}
-			className={`
-			hc-inline-block hc-align-middle
-				${className ?? ''}
-				${size ?? ''}
-			`}
-		>
-			<Icon
-				icon={icon}
-				className={`
-					${iconClasses ?? ''}
-					${size ?? ''}
-				`}
-				{...iconProps}
-			/>
-		</span>
-	);
-};
-
-export default IconContained;
+import React from 'react';
+import { Icon } from '@iconify/react';
+
+const IconContained = ({
+	className,
+	size,
+	icon,
+	iconClasses,
+	title,
+	...iconProps
+}) => {
+	return (
+		<span
+			title={title}
+			className={`
+			hc-inline-block hc-align-middle
+				${className ?? ''}
+				${size ?? ''}
+			`}
+		>
+			<Icon
+				icon={icon}
+				className={`
+					${iconClasses ?? ''}
+					${size ?? ''}
+				`}
+				{...iconProps}
+			/>
+		</span>
+	);
+};
+
+export default IconContained;