@nuskin/foundation-ui-components 1.32.0 → 1.32.1-cdb-1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.32.0",
+    "version": "1.32.1-cdb-1.2",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -51,7 +51,6 @@
         "@types/react-dom": "^18.2.0",
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
-        "next": "13.5.6",
         "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -67,6 +66,7 @@
         "@babel/preset-react": "^7.22.15",
         "@babel/preset-typescript": "^7.23.2",
         "@emotion/jest": "^11.11.0",
+        "next": "13.5.6",
         "@nuskin/eslint-config": "^1.0.0-setup.1",
         "@storybook/addon-actions": "^7.5.1",
         "@storybook/addon-essentials": "^7.5.1",

package/src/common/column-control/utils.ts

@@ -1,4 +1,3 @@
-import { ValueOf } from 'next/dist/shared/lib/constants';
 import { NsColumnControlProps, sizeObjectType } from './types.d';
 
 export const columnClasses: NsColumnControlProps['columnClass'][] = [
@@ -25,6 +24,8 @@ const sizeKeyPrefix = {
     mobile: 'ns-col-sm-',
 } as const;
 
+type ValueOf<T> = T[keyof T];
+
 const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
     [sizeKeyPrefix.desktop]: 'fractions',
     [sizeKeyPrefix.tablet]: 'tabletFractions',

package/src/common/image/index.ts

@@ -1,3 +1 @@
-export { default as NsNextImage } from './NsNextImage';
-export type { NsImageProps, NsNextImageProps } from './types';
 export { default as NsImage } from './NsImage';

package/src/common/image/types.ts

@@ -1,23 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { ImageProps } from 'next/image';
-
-export type NsNextImageProps = Pick<
-    ImageProps,
-    | 'src'
-    | 'height'
-    | 'width'
-    | 'alt'
-    | 'priority'
-    | 'sizes'
-    | 'quality'
-    | 'placeholder'
-    | 'style'
-    | 'loading'
-    | 'blurDataURL'
-    | 'fill'
-    | 'unoptimized'
-    | 'loader'
-> & { id?: string; className?: string };
+import React from 'react';
 
 export type NsImageProps = {
     alt: string;

package/src/common/link/NsLink.styled.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
 import MUILink from '@mui/material/Link';
-import NextLink from 'next/link';
 
 type StyledProps = {
     disabled?: boolean;
@@ -47,11 +46,6 @@ const getLinkStyles = ({ disabled, $underlineOnHover = true }: StyledProps) => {
     return '';
 };
 
-export const StyledNextLink = styled(NextLink)<StyledProps>`
-    ${linkDefaultStyles};
-    ${getLinkStyles}
-`;
-
 export const StyledLink = styled(MUILink)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}

package/src/common/link/NsLink.tsx

@@ -9,8 +9,7 @@ import React, {
 } from 'react';
 
 import {
-    StyledLink,
-    StyledNextLink,
+    StyledLink
 } from './NsLink.styled';
 import { NsLinkProps } from './types.d';
 
@@ -20,30 +19,11 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>): ReactElement => {
         href,
         underlineOnHover,
         target,
-        isSsr = false,
         additionalProps,
         children,
-        passHref,
-        prefetch,
         disabled,
     } = props;
 
-    if (isSsr) {
-        return (
-            <StyledNextLink
-                className={className}
-                href={href}
-                $underlineOnHover={underlineOnHover}
-                passHref={passHref}
-                prefetch={prefetch}
-                disabled={disabled}
-                {...additionalProps}
-            >
-                {children}
-            </StyledNextLink>
-        );
-    }
-
     return (
         <StyledLink
             className={className}

package/src/common/image/NsNextImage.spec.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from '@/test-utils/index';
-import NsNextImage from './NsNextImage';
-describe('NsNextImage', () => {
-    it('test image element renders', () => {
-        const altText = 'dummy image';
-        render(<NsNextImage src="https://www.google.com" width="300" height="300" alt={altText} />);
-        const imgElement = screen.getByAltText(altText);
-        expect(imgElement).toBeInTheDocument();
-    });
-});

package/src/common/image/NsNextImage.stories.tsx

@@ -1,51 +0,0 @@
-import { NsNextImage } from '.';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { StoryObj, Meta } from '@storybook/react';
-
-type ComponentType = typeof NsNextImage;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsNextImage',
-    component: NsNextImage,
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const BrandImage: Story = {
-    args: {
-        src: 'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-        width: 300,
-        height: 300,
-        unoptimized: true,
-    },
-};
-export const NavigationImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/aug2022/01130171-lumispa-io-norm-combo.jpg',
-        width: 200,
-        height: 200,
-        alt: 'lumispa-combo',
-        unoptimized: true,
-    },
-};
-
-export const NavigationBannerImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/feb2020/Navigation-images-Skin-Carev2.jpg',
-        width: 340,
-        height: 610,
-        alt: 'lumispa-combo',
-        unoptimized: true,
-    },
-};
-
-export const AwardImage: Story = {
-    args: {
-        src: 'https://media.nuskin.com/m/5a9a99eccfde58c6/webimage-winner-global-makeup-awards-2022.png',
-        width: 130,
-        height: 130,
-        alt: 'global-makeup-award',
-        unoptimized: true,
-    },
-};

package/src/common/image/NsNextImage.tsx

@@ -1,11 +0,0 @@
-import { ReactElement } from 'react';
-
-import Image from 'next/image';
-
-import { NsNextImageProps } from './types';
-
-const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps): ReactElement => {
-    return <Image src={src} width={width} height={height} alt={alt} fill={fill} priority={priority} {...props} />;
-};
-
-export default NsNextImage;