@akinon/next 1.14.0 → 1.14.1

package/components/image.tsx

@@ -1,133 +1,133 @@
-'use client';
-
-import { CDNOptions } from '../types';
-import NextImage, { ImageProps as NextImageProps } from 'next/image';
-import { twMerge } from 'tailwind-merge';
-import { ImageLoader } from '../utils/image-loader';
-
-interface ImageProps extends NextImageProps {
-  /**
-   * Use fill to make the image responsive.
-   * You also need to provide sizes and aspectRatio props.
-   *
-   * @default false
-   */
-  fill?: boolean;
-  /**
-   * Crop option for CDN
-   *
-   * Available options:
-   * - `center`
-   * - `top`
-   * - `bottom`
-   * - `left`
-   * - `right`
-   *
-   * @default 'center'
-   */
-  crop?: CDNOptions['crop'];
-  /**
-   * It is used to calculate the height of the image when fill is true.
-   * It prevents layout shift problems.
-   */
-  aspectRatio?: number;
-  /**
-   * Sizes attribute for responsive images
-   *
-   * If it is not provided, large images will be downloaded for small screens and it will cause performance issues.
-   *
-   * @example
-   * <Image
-   *  src={src}
-   *  sizes="(min-width: 768px) 50vw, 100vw"
-   *  fill
-   * />
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
-   */
-  sizes?: string;
-  imageClassName?: string;
-}
-
-const DEFAULT_QUALITY = 70;
-
-/**
- * Image component for responsive images.
- *
- * It uses CDN options automatically if the image is hosted on Akinon CDN. You don't need to convert the src prop to CDN url.
- *
- * ## For responsive images
- * You need to provide `fill`, `sizes` and `aspectRatio` props.
- * If you are not sure about sizes, you can give `100vw` as a value. But it may cause performance issues.
- *
- * ## For non-responsive images
- * You need to provide `width` and `height` props.
- * This way, the browser will know the size of the image before downloading it and it will prevent layout shift problems.
- *
- * ## CDN options
- * You can use `crop` option to crop the image.
- *
- * Available options:
- * - `center`
- * - `top`
- * - `bottom`
- * - `left`
- * - `right`
- *
- * You can also use `quality` option to change the quality of the image.
- * Be careful about the file size when you change the quality.
- *
- * @default 70
- */
-export const Image = (props: ImageProps) => {
-  const {
-    src,
-    width,
-    fill,
-    sizes,
-    aspectRatio,
-    quality = DEFAULT_QUALITY,
-    crop = 'center',
-    className,
-    imageClassName,
-    ...restImage
-  } = props;
-
-  const hasGif = typeof src === 'string' && src.includes('.gif');
-
-  if (fill && !aspectRatio) {
-    throw new Error('aspectRatio is required when fill is true');
-  }
-
-  if (fill && !sizes) {
-    throw new Error('sizes is required when fill is true');
-  }
-
-  return (
-    <div
-      className={twMerge('relative inline-block', fill && 'w-full', className)}
-      style={{
-        ...(fill && { aspectRatio })
-      }}
-    >
-      <NextImage
-        {...restImage}
-        width={width}
-        src={src}
-        sizes={sizes}
-        fill={fill}
-        loader={({ src, width }) => {
-          return ImageLoader({
-            src,
-            width,
-            quality: parseInt(String(quality), DEFAULT_QUALITY),
-            crop,
-            fill,
-            aspectRatio
-          });
-        }}
-        className={imageClassName}
-        {...(hasGif && { unoptimized: true })}
-      />
-    </div>
-  );
-};
+'use client';
+
+import { CDNOptions } from '../types';
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { ImageLoader } from '../utils/image-loader';
+
+interface ImageProps extends NextImageProps {
+  /**
+   * Use fill to make the image responsive.
+   * You also need to provide sizes and aspectRatio props.
+   *
+   * @default false
+   */
+  fill?: boolean;
+  /**
+   * Crop option for CDN
+   *
+   * Available options:
+   * - `center`
+   * - `top`
+   * - `bottom`
+   * - `left`
+   * - `right`
+   *
+   * @default 'center'
+   */
+  crop?: CDNOptions['crop'];
+  /**
+   * It is used to calculate the height of the image when fill is true.
+   * It prevents layout shift problems.
+   */
+  aspectRatio?: number;
+  /**
+   * Sizes attribute for responsive images
+   *
+   * If it is not provided, large images will be downloaded for small screens and it will cause performance issues.
+   *
+   * @example
+   * <Image
+   *  src={src}
+   *  sizes="(min-width: 768px) 50vw, 100vw"
+   *  fill
+   * />
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+   */
+  sizes?: string;
+  imageClassName?: string;
+}
+
+const DEFAULT_QUALITY = 70;
+
+/**
+ * Image component for responsive images.
+ *
+ * It uses CDN options automatically if the image is hosted on Akinon CDN. You don't need to convert the src prop to CDN url.
+ *
+ * ## For responsive images
+ * You need to provide `fill`, `sizes` and `aspectRatio` props.
+ * If you are not sure about sizes, you can give `100vw` as a value. But it may cause performance issues.
+ *
+ * ## For non-responsive images
+ * You need to provide `width` and `height` props.
+ * This way, the browser will know the size of the image before downloading it and it will prevent layout shift problems.
+ *
+ * ## CDN options
+ * You can use `crop` option to crop the image.
+ *
+ * Available options:
+ * - `center`
+ * - `top`
+ * - `bottom`
+ * - `left`
+ * - `right`
+ *
+ * You can also use `quality` option to change the quality of the image.
+ * Be careful about the file size when you change the quality.
+ *
+ * @default 70
+ */
+export const Image = (props: ImageProps) => {
+  const {
+    src,
+    width,
+    fill,
+    sizes,
+    aspectRatio,
+    quality = DEFAULT_QUALITY,
+    crop = 'center',
+    className,
+    imageClassName,
+    ...restImage
+  } = props;
+
+  const hasGif = typeof src === 'string' && src.includes('.gif');
+
+  if (fill && !aspectRatio) {
+    throw new Error('aspectRatio is required when fill is true');
+  }
+
+  if (fill && !sizes) {
+    throw new Error('sizes is required when fill is true');
+  }
+
+  return (
+    <div
+      className={twMerge('relative inline-block', fill && 'w-full', className)}
+      style={{
+        ...(fill && { aspectRatio })
+      }}
+    >
+      <NextImage
+        {...restImage}
+        width={width}
+        src={src}
+        sizes={sizes}
+        fill={fill}
+        loader={({ src, width }) => {
+          return ImageLoader({
+            src,
+            width,
+            quality: parseInt(String(quality), DEFAULT_QUALITY),
+            crop,
+            fill,
+            aspectRatio
+          });
+        }}
+        className={imageClassName}
+        {...(hasGif && { unoptimized: true })}
+      />
+    </div>
+  );
+};

package/components/index.ts

@@ -1,17 +1,17 @@
-export * from './accordion';
-export * from './button';
-export * from './client-root';
-export * from './icon';
-export * from './image';
-export * from './input';
-export * from './lazy-component';
-export * from './loader-spinner';
-export * from './mobile-app-toggler';
-export * from './oauth-login';
-export * from './plugin-module';
-export * from './price';
-export * from './pz-providers';
-export * from './radio';
-export * from './react-portal';
-export * from './selected-payment-option-view';
-export * from './trans';
+export * from './accordion';
+export * from './button';
+export * from './client-root';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './lazy-component';
+export * from './loader-spinner';
+export * from './mobile-app-toggler';
+export * from './oauth-login';
+export * from './plugin-module';
+export * from './price';
+export * from './pz-providers';
+export * from './radio';
+export * from './react-portal';
+export * from './selected-payment-option-view';
+export * from './trans';

package/components/input.tsx

@@ -1,110 +1,110 @@
-import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState } from 'react';
-import { Controller } from 'react-hook-form';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
-import { InputProps } from '../types';
-import { twMerge } from 'tailwind-merge';
-
-export const Input = forwardRef<
-  HTMLInputElement,
-  InputProps &
-    Pick<
-      NumberFormatProps,
-      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    >
->((props, ref) => {
-  const [focused, setFocused] = useState(false);
-  const [hasValue, setHasValue] = useState(false);
-  const {
-    id,
-    label,
-    labelStyle,
-    error,
-    mask,
-    format,
-    required = false,
-    ...rest
-  } = props;
-  const hasFloatingLabel = label && labelStyle === 'floating';
-  const inputClass = twMerge(
-    clsx(
-      'text-xs border px-2.5 h-10 placeholder:text-gray-600',
-      'focus-visible:outline-none', // disable outline on focus
-      { 'pt-3': hasFloatingLabel },
-      error
-        ? 'border-error focus:border-error'
-        : 'border-gray-500 hover:border-black focus:border-black'
-    ),
-    props.className
-  );
-  const inputProps: any = {
-    id,
-    ref,
-    className: inputClass,
-    onFocus: () => setFocused(true),
-    onBlur: (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(false);
-      setHasValue(!!event.target.value);
-    }
-  };
-
-  const Label = () => {
-    if (!label) return null;
-
-    return (
-      <label
-        htmlFor={id}
-        className={clsx(
-          'text-xs text-gray-800',
-          {
-            'absolute left-2.5 pointer-events-none transition-all transform -translate-y-1/2':
-              hasFloatingLabel
-          },
-          { 'mb-2': !hasFloatingLabel },
-          { 'top-1/3': hasFloatingLabel && (focused || hasValue) },
-          { 'top-1/2': !(hasFloatingLabel && (focused || hasValue)) }
-        )}
-      >
-        {label} {required && <span className="text-secondary">*</span>}
-      </label>
-    );
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="relative flex flex-col">
-        {props.format ? (
-          <>
-            {labelStyle !== 'floating' && <Label />}
-            <Controller
-              name={props.name ?? ''}
-              control={props.control}
-              defaultValue={false}
-              render={({ field }) => (
-                <NumberFormat
-                  format={format}
-                  mask={mask ?? ''}
-                  {...rest}
-                  {...field}
-                  {...inputProps}
-                />
-              )}
-            />
-            {labelStyle === 'floating' && <Label />}
-          </>
-        ) : (
-          <>
-            {labelStyle !== 'floating' && <Label />}
-            <input {...rest} {...inputProps} />
-            {labelStyle === 'floating' && <Label />}
-          </>
-        )}
-      </div>
-      {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
-      )}
-    </div>
-  );
-});
-
-Input.displayName = 'Input';
+import clsx from 'clsx';
+import { forwardRef, FocusEvent, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { InputProps } from '../types';
+import { twMerge } from 'tailwind-merge';
+
+export const Input = forwardRef<
+  HTMLInputElement,
+  InputProps &
+    Pick<
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
+>((props, ref) => {
+  const [focused, setFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(false);
+  const {
+    id,
+    label,
+    labelStyle,
+    error,
+    mask,
+    format,
+    required = false,
+    ...rest
+  } = props;
+  const hasFloatingLabel = label && labelStyle === 'floating';
+  const inputClass = twMerge(
+    clsx(
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600',
+      'focus-visible:outline-none', // disable outline on focus
+      { 'pt-3': hasFloatingLabel },
+      error
+        ? 'border-error focus:border-error'
+        : 'border-gray-500 hover:border-black focus:border-black'
+    ),
+    props.className
+  );
+  const inputProps: any = {
+    id,
+    ref,
+    className: inputClass,
+    onFocus: () => setFocused(true),
+    onBlur: (event: FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      setHasValue(!!event.target.value);
+    }
+  };
+
+  const Label = () => {
+    if (!label) return null;
+
+    return (
+      <label
+        htmlFor={id}
+        className={clsx(
+          'text-xs text-gray-800',
+          {
+            'absolute left-2.5 pointer-events-none transition-all transform -translate-y-1/2':
+              hasFloatingLabel
+          },
+          { 'mb-2': !hasFloatingLabel },
+          { 'top-1/3': hasFloatingLabel && (focused || hasValue) },
+          { 'top-1/2': !(hasFloatingLabel && (focused || hasValue)) }
+        )}
+      >
+        {label} {required && <span className="text-secondary">*</span>}
+      </label>
+    );
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative flex flex-col">
+        {props.format ? (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <Controller
+              name={props.name ?? ''}
+              control={props.control}
+              defaultValue={false}
+              render={({ field }) => (
+                <NumberFormat
+                  format={format}
+                  mask={mask ?? ''}
+                  {...rest}
+                  {...field}
+                  {...inputProps}
+                />
+              )}
+            />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        ) : (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <input {...rest} {...inputProps} />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        )}
+      </div>
+      {error && (
+        <span className="mt-1 text-sm text-error">{error.message}</span>
+      )}
+    </div>
+  );
+});
+
+Input.displayName = 'Input';

package/components/lazy-component.tsx

@@ -1,33 +1,33 @@
-'use client';
-
-import clsx from 'clsx';
-import { useEffect, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-
-interface LazyComponentProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export default function LazyComponent({
-  children,
-  className
-}: LazyComponentProps) {
-  const [isInView, setIsInView] = useState(false);
-
-  const { ref, inView } = useInView({
-    threshold: 0
-  });
-
-  useEffect(() => {
-    if (inView) {
-      setIsInView(true);
-    }
-  }, [inView]);
-
-  return (
-    <div ref={ref} className={clsx(className)}>
-      {isInView ? <>{children}</> : null}
-    </div>
-  );
-}
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+interface LazyComponentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function LazyComponent({
+  children,
+  className
+}: LazyComponentProps) {
+  const [isInView, setIsInView] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0
+  });
+
+  useEffect(() => {
+    if (inView) {
+      setIsInView(true);
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref} className={clsx(className)}>
+      {isInView ? <>{children}</> : null}
+    </div>
+  );
+}

package/components/loader-spinner.tsx

@@ -1,23 +1,23 @@
-import { twMerge } from 'tailwind-merge';
-
-type LoaderSpinnerProps = {
-  className?: string;
-  borderType?: 'solid' | 'dotted' | 'dashed';
-};
-
-export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
-  borderType = 'solid',
-  className
-}) => {
-  return (
-    <div className="w-full h-full flex justify-center items-center">
-      <div
-        className={twMerge(
-          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
-          `border-${borderType}`,
-          className
-        )}
-      />
-    </div>
-  );
-};
+import { twMerge } from 'tailwind-merge';
+
+type LoaderSpinnerProps = {
+  className?: string;
+  borderType?: 'solid' | 'dotted' | 'dashed';
+};
+
+export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
+  borderType = 'solid',
+  className
+}) => {
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <div
+        className={twMerge(
+          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
+          `border-${borderType}`,
+          className
+        )}
+      />
+    </div>
+  );
+};