@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.2",
+    "version": "1.0.0-develop.3",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",

package/src/common/alert/NsAlert.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import NsAlert from './NsAlert';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsAlert;
 type Story = StoryObj<ComponentType>;
@@ -12,14 +12,14 @@ export default {
     component: NsAlert,
     decorators: [withCenterDecorator],
     argTypes: {
-        context: { 
+        context: {
             control: 'select',
-            options: ['error', 'info', 'notice', 'success', 'warning']
+            options: ['error', 'info', 'notice', 'success', 'warning'],
         },
-        type: { 
+        type: {
             control: 'select',
-            options: ['auto', 'banner', 'card']
-        }
+            options: ['auto', 'banner', 'card'],
+        },
     },
     args: {
         context: 'info',
@@ -28,15 +28,16 @@ export default {
         type: 'banner',
         visible: true,
         onDismiss: () => {},
-        body:
-        <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+        body: (
+            <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
-          qui officia deserunt mollit anim id est laborum.`}</span>,
-        foot: <span>Some message goes here.</span>
-    }
+          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+          qui officia deserunt mollit anim id est laborum.`}</span>
+        ),
+        foot: <span>Some message goes here.</span>,
+    },
 } as MetaStory;
 
 export const AuthDropdown: Story = {};

package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsAuthDropdown } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsAuthDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/autocomplete/NsAutocomplete.stories.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';

package/src/common/banner/NsBanner.stories.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBanner, NsTypography, NsButton } from '../';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBanner;
 type Story = StoryObj<ComponentType>;

package/src/common/brand-components/NsBrand.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBrandComponent } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBrandComponent;
 type Story = StoryObj<ComponentType>;

package/src/common/breadcrumb/NsBreadcrumb.spec.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsBreadcrumb } from './';
-import { ItemProps } from './types.d';
+import { breadcrumbItems } from './data';
 const { getByText } = screen;
-export const breadcrumbItems: ItemProps[] = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Products', href: '/products' },
-    { label: 'Shirts', href: '/products/shirts' },
-    { label: 'Blue shirt', href: '/products/shirts/blue' },
-];
 
 describe('Breadcrumb', () => {
     it('renders breadcrumb items', () => {

package/src/common/breadcrumb/NsBreadcrumb.stories.tsx

@@ -1,14 +1,12 @@
 /**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBanner.stories.tsx
  * @description NsBanner component.
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsBreadcrumb } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { breadcrumbItems } from './NsBreadcrumb.spec';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { breadcrumbItems } from './data';
 
 type ComponentType = typeof NsBreadcrumb;
 type Story = StoryObj<ComponentType>;

package/src/common/breadcrumb/data.ts

@@ -0,0 +1,7 @@
+import { ItemProps } from './types';
+export const breadcrumbItems: ItemProps[] = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Products', href: '/products' },
+    { label: 'Shirts', href: '/products/shirts' },
+    { label: 'Blue shirt', href: '/products/shirts/blue' },
+];

package/src/common/button/NsButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsButton } from './';
 import { ShoppingCart } from '@mui/icons-material';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsButton;
 type Story = StoryObj<ComponentType>;

package/src/common/card/stories/NsBgCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsBgCard } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBgCard;
 type Story = StoryObj<ComponentType>;
@@ -13,8 +13,6 @@ export default {
     args: {
         title: 'ageLOC LumiSpa',
         backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-        // brandImageUrl:
-        // 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
     },
     decorators: [withCenterDecorator],
 } as MetaStory;

package/src/common/card/stories/NsBrandProductCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsBrandProductCard } from '../';
 
 type ComponentType = typeof NsBrandProductCard;

package/src/common/card/stories/NsFfgCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFfgCard } from '../';
 
 type ComponentType = typeof NsFfgCard;

package/src/common/card/stories/{data.js → data.ts}

@@ -8,14 +8,6 @@ export const brandImages = [
     'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
     'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
     'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
-    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
-    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
-    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
-    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
-    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
 ];
 
 export const brandBackImages = [
@@ -28,34 +20,18 @@ export const brandBackImages = [
     'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
     'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
     'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
-    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
-    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
-    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
-    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
 ];
 
 export const brandTitles = [
     'Epoch',
     'Sunright',
-    'Nu Colour',
+    'Nu Color',
     '180 System',
     'ageLOC',
     'ageLOC LumiSpa',
     'Pharmanex',
     'AP 24',
     'Nutricentials',
-    'Epoch',
-    'Sunright',
-    'Nu Colour',
-    '180 System',
-    'ageLOC',
-    'ageLOC LumiSpa',
-    'Pharmanex',
-    'AP 24',
 ];
 export const brandEntries = brandTitles.map((title, index) => {
     return {

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,6 +1,26 @@
 import React, { useMemo } from 'react';
 import Slider from 'react-slick';
 import { NsScrollingCarousalProps } from '../';
+import { styled } from '@nuskin/foundation-theme';
+
+const options = {
+    shouldForwardProp: (prop: string) => prop !== 'dotsBottomPixel',
+};
+
+const StyledDiv = styled(
+    'div',
+    options
+)<{
+    dotsBottomPixel?: number;
+}>(({ dotsBottomPixel }) => {
+    return {
+        '.slick-dots': {
+            zIndex: 9,
+            bottom: `${dotsBottomPixel ?? -25}px`,
+            opacity: '0.5',
+        },
+    };
+});
 
 const NsScrollingCarousal = ({
     slides,
@@ -8,6 +28,7 @@ const NsScrollingCarousal = ({
     stillSeconds,
     renderSlide,
     settings,
+    dotsBottomPixel,
     additionalProps,
 }: NsScrollingCarousalProps) => {
     const defaultSettings = useMemo(() => {
@@ -28,9 +49,12 @@ const NsScrollingCarousal = ({
         };
     }, [stillSeconds, scrollSeconds, settings]);
     return (
-        <div data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}>
+        <StyledDiv
+            dotsBottomPixel={dotsBottomPixel}
+            data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
+        >
             <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
-        </div>
+        </StyledDiv>
     );
 };
 

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -4,7 +4,7 @@
  */
 
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsScrollingCarousal, NsTextStrip } from '@/common/';
 
 type ComponentType = typeof NsScrollingCarousal;

package/src/common/carousal/types.d.ts

@@ -18,4 +18,6 @@ export type NsScrollingCarousalProps<T = any> = {
     /* time for which slide stays still before scrolling */
     stillSeconds: number;
     settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
 } & AdditionalProps;

package/src/common/cart-icon/NsCartIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsCartIcon } from './';
 
 type ComponentType = typeof NsCartIcon;

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { within } from '@testing-library/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 

package/src/common/column-control/NsFlexColumns.tsx

@@ -1,23 +1,18 @@
-import { PropsWithChildren, useMemo } from 'react';
+import { useMemo } from 'react';
 import { getColumnSizes } from './utils';
 import { StyledFlex } from './styled/StyledFlex';
-import { AdditionalProps } from '../common.types';
+import { NsFlexColumnsProps } from './types';
 
-type NsFlexColumnsProps = PropsWithChildren<{
-    columnClass: string;
-    gap: number;
-}> &
-    AdditionalProps;
-
-const NsFlexColumns = ({ columnClass, children, gap, additionalProps }: NsFlexColumnsProps) => {
+const NsFlexColumns = ({ columnClass, children, gap, additionalProps, isFullWidth }: NsFlexColumnsProps) => {
     const sizes = useMemo(() => {
         return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
     }, [columnClass]);
     return (
         <StyledFlex
+            isFullWidth={isFullWidth || false}
             gap={gap}
             sizes={sizes}
-            className="styled-flex"
+            className="ns-flex-columns"
             data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
         >
             {children}

package/src/common/column-control/NsGridColumns.tsx

@@ -1,23 +1,18 @@
-import { PropsWithChildren, useMemo } from 'react';
+import { useMemo } from 'react';
 import { getColumnSizes } from './utils';
 import { StyledGrid } from './styled/StyledGrid';
-import { AdditionalProps } from '../common.types';
+import { NsGridColumnsProps } from './types';
 
-type NsGridColumnsProps = PropsWithChildren<{
-    columnClass: string;
-    gap: number;
-}> &
-    AdditionalProps;
-
-const NsGridColumns = ({ columnClass, children, gap, additionalProps }: NsGridColumnsProps) => {
+const NsGridColumns = ({ columnClass, children, gap, isFullWidth, additionalProps }: NsGridColumnsProps) => {
     const sizes = useMemo(() => {
         return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
     }, [columnClass]);
     return (
         <StyledGrid
+            isFullWidth={isFullWidth || false}
             gap={gap}
             sizes={sizes}
-            className="styled-grid"
+            className="ns-grid-columns"
             data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
         >
             {children}

package/src/common/column-control/specs/NsColumnControl.spec.tsx

@@ -1,6 +1,6 @@
 import { NsColumnControl } from '@/common/index';
-import { DivArray } from '../stories/NDivs.story';
 import { render, screen } from '@/test-utils/index';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsColumnControl component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/specs/NsFlexColumns.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../test-utils';
 import { NsFlexColumns } from '@/common/index';
-import { DivArray } from '../stories/NDivs.story';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsFlexColumns component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/specs/NsGridColumns.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../test-utils';
 import { NsGridColumns } from '@/common/index';
-import { DivArray } from '../stories/NDivs.story';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsGridColumns component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/stories/DivArray.stories.tsx

@@ -0,0 +1,18 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import {DivArray} from './DivArray';
+
+type ComponentType = typeof DivArray;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Column/NDivs',
+    component: DivArray,
+    decorators: [withCenterDecorator],
+    args: {
+        elementsCount: 2,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};

package/src/common/column-control/stories/DivArray.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from 'react';
+
+type DivArrayProps = {
+    elementsCount: number;
+};
+
+const getRandom = (n: number) => (Math.random() * n).toFixed(0);
+
+type DivComponentProps = PropsWithChildren<{ style: Record<string, any>; index: number }>;
+export const DivComponent = ({ style, index, children }: DivComponentProps) => {
+    const borderWidth = `${getRandom(5)}px`;
+    const padding = `${getRandom(20)}px`;
+    return (
+        <div
+            style={{
+                padding,
+                border: `${borderWidth} solid`,
+                borderColor: `hsl(${getRandom(359)},100%, 50%)`,
+                background: `hsla(${getRandom(359)},100%, 50%,0.3)`,
+                ...style,
+            }}
+        >
+            {index}
+            {children}
+        </div>
+    );
+};
+/**
+ * this component return a fragment containing n number of div, with each div numbered as per its index
+ * @param n: number of div to render
+ * @returns
+ */
+export const DivArray = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => (
+                <DivComponent key={index} index={index + 1} style={{}} />
+            ))}
+    </>
+);
+export const DivArrayRandom = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => {
+                const width = `${getRandom(700)}px`;
+                const height = `${getRandom(400)}px`;
+                return (
+                    <DivComponent
+                        key={index}
+                        index={index + 1}
+                        style={{
+                            width,
+                            height,
+                        }}
+                    >
+                        item no = {index + 1} with width = {width} and height = {height}
+                    </DivComponent>
+                );
+            })}
+    </>
+);

package/src/common/column-control/stories/NsColumnControl.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsColumnControl } from '@/common/index';
-import { DivArray } from './NDivs.story';
+import { DivArray } from './DivArray';
 import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsColumnControl;
@@ -32,7 +32,10 @@ export default {
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const ResponsiveColumnControl: Story = {};
+export const SingleColumnControl: Story = {
+    args: { columnClass: '' },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -1,8 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlexColumns } from '..';
-import { DivArray } from './NDivs.story';
-import {childrenMapping,  selectDivOptions } from './common';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsFlexColumns;
 type Story = StoryObj<ComponentType>;
@@ -26,17 +26,21 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArray elementsCount={8} />,
+            defaultValue: <DivArrayRandom elementsCount={8} />,
             mapping: childrenMapping,
         },
     },
     args: {
-        columnClass: 'ns-col-lg-1-1-1',
-        children: <DivArray elementsCount={12} />,
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };
@@ -50,10 +54,10 @@ export const ThreeColumn211: Story = {
 export const ThreeColumn121: Story = {
     args: { columnClass: 'ns-col-lg-1-2-1' },
 };
-export const ThreeColumn111Responsive: Story = {
+export const ThreeColumn111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1' },
 };
 
-export const FourColumn1111Responsive: Story = {
+export const FourColumn1111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1-1' },
 };

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsGridColumns } from '..';
-import { DivArray } from './NDivs.story';
+import { DivArray, DivArrayRandom } from './DivArray';
 import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsGridColumns;
@@ -26,17 +26,21 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArray elementsCount={8} />,
+            defaultValue: <DivArrayRandom elementsCount={8} />,
             mapping: childrenMapping,
         },
     },
     args: {
-        columnClass: 'ns-col-lg-1-1-1',
-        children: <DivArray elementsCount={12} />,
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };
@@ -50,10 +54,10 @@ export const ThreeColumn211: Story = {
 export const ThreeColumn121: Story = {
     args: { columnClass: 'ns-col-lg-1-2-1' },
 };
-export const ThreeColumn111Responsive: Story = {
+export const ThreeColumn111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1' },
 };
 
-export const FourColumn1111Responsive: Story = {
+export const FourColumn1111: Story = {
     args: { columnClass: 'ns-col-lg-1-1-1-1' },
 };

package/src/common/column-control/stories/common.tsx

@@ -1,4 +1,4 @@
-import { DivArray } from './NDivs.story';
+import { DivArray } from './DivArray';
 
 /* an array from 1 to n */
 export const selectDivOptions = Array(16)

package/src/common/column-control/styled/StyledFlex.tsx

@@ -4,31 +4,35 @@ import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
 
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes | gap',
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
 };
 
 type StyledFlexProps = {
     sizes: sizeObjectType;
     gap?: number;
+    isFullWidth: boolean;
 };
 
 /* main wrapper for column control using css flex */
 export const StyledFlex = styled(
     Box as any,
     options
-)<StyledFlexProps>(({ sizes, gap }: StyledFlexProps) => {
+)<StyledFlexProps>(({ sizes, gap, isFullWidth }: StyledFlexProps) => {
     const gridGap = gap ? `${gap}px` : '2rem';
     const fraction = getPercentArray(sizes.fractions);
     const flexResponsive = { flexGrow: 1, flexShrink: 1 };
+    const maxWidth = isFullWidth ? '100%' : '1200px';
     const style: any = {
         gap: gridGap,
         ...commonStyles,
+        maxWidth,
         display: 'flex',
         paddingInline: '20px',
         flexWrap: 'wrap',
         justifyContent: 'center',
-        ' > *': {
+        '> *': {
             display: 'flex',
+            minWidth: '220px',
         },
     };
     fraction.forEach((f, i) => {

package/src/common/column-control/styled/StyledGrid.tsx

@@ -6,26 +6,33 @@ import { commonStyles, getPercentArray } from './common';
 type StyledGridProps = {
     sizes: sizeObjectType;
     gap?: number;
+    isFullWidth: boolean;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes | gap',
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
 };
 
 /* main wrapper for column control using css grid */
 export const StyledGrid = styled(
     Box as any,
     options
-)<StyledGridProps>(({ sizes, gap }: StyledGridProps) => {
+)<StyledGridProps>(({ sizes, gap, isFullWidth }: StyledGridProps) => {
     const gridGap = gap ?? '2rem';
+    const maxWidth = isFullWidth ? '100%' : '1200px';
     return {
         gap: gridGap,
         ...commonStyles,
+        maxWidth,
         display: 'grid',
         /* here we are creating gridTemplateColumns as calc(40% - 20px) calc(40% - 20px), */
         gridTemplateColumns: getPercentArray(sizes.fractions)
             ?.map((fractionPercent) => `calc(${fractionPercent} - 20px)`)
             .join(''),
         justifyContent: 'center',
+        '> *': {
+            minWidth: '220px',
+            width: 'auto !important',
+        },
         '.span-2': {
             gridColumn: 'span 2',
         },

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

@@ -1,8 +1,8 @@
 const mobileBreakPoint = '600px';
-// TODO: we need to add a prop in the to allow full width of page instead of 1200px
+
 export const commonStyles = {
-    maxWidth: '1200px',
     margin: '32px auto',
+
     [`@media (max-width: ${mobileBreakPoint})`]: {
         display: 'flex',
         flexDirection: 'column',

package/src/common/column-control/types.d.ts

@@ -18,22 +18,7 @@ export type NsColumnControlProps = PropsWithChildren<{
      *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
      *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
      * sample values
-     * 'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
      */
     columnClass: string;
     gap?: number;
@@ -45,3 +30,17 @@ export type sizeObjectType = {
     tabletFractions?: number[];
     mobileFractions?: number[];
 };
+
+export type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+export type NsGridColumnsProps = NsFlexColumnsProps;

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/flag/NsFlag.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;

package/src/common/icon/NsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsImage } from './';
 
 type ComponentType = typeof NsImage;

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

@@ -1,5 +1,5 @@
 import { NsNextImage } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 
 type ComponentType = typeof NsNextImage;

package/src/common/input/NsInputField.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsInputField } from '.';
 import { NsIcon } from '../icon';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsInputField;
 type Story = StoryObj<ComponentType>;
@@ -9,7 +10,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsInputField',
     component: NsInputField,
-    decorators: [(story) => <div style={{ margin: '20px' }}>{story()}</div>],
+    decorators: [withCenterDecorator],
 
     args: {},
     argTypes: {

package/src/common/input/types.d.ts

@@ -17,11 +17,26 @@ export type NsInputFieldProps = Omit<
     | 'select'
     | 'SelectProps'
 > & {
+    /**
+     * has default undefined value, and we can update the value to success
+     * on successful validation and update value to 'error' in case of error
+     */
+
     fieldState?: fieldStateType;
     iconStart?: ReactNode;
+    /**
+     * assign react component for end icon
+     */
     iconEnd?: ReactNode;
+    /**
+     * assign react component for side icon
+     */
+
     iconSide?: ReactNode;
     /** purpose of showOptional props is to show additional text 'optional' in the label,
      *  if required = false and this flag is true */
     showOptional?: boolean;
+    defaultValue?: string;
+    rows?: number;
+    id?: string;
 };

package/src/common/label/NsLabel.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsLabel } from '.';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsLabel;
 type Story = StoryObj<ComponentType>;
@@ -8,6 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsLabel,
     title: 'Components/NsLabel',
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const Default: Story = {

package/src/common/label/NsLabel.tsx

@@ -1,13 +1,13 @@
-import { InputLabel } from '@mui/material';
+import { FormLabel } from '@mui/material';
 import { NsLabelProps } from './types.d';
 import { styled, nuskinTheme } from '@nuskin/foundation-theme';
 
 const { colors } = nuskinTheme;
 
-const StyledLabel = styled(InputLabel)(({ theme }: any) => {
+const StyledLabel = styled(FormLabel)<{ fontSize?: number }>(({ theme, fontSize }) => {
     const isLight = theme.palette?.primary?.main === '#252525';
     return {
-        fontSize: '14px',
+        fontSize: fontSize ? `${fontSize}px` : '14px',
         color: theme.palette?.primary?.main ?? '#252525',
         '.optional-label': {
             color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[50],

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 import { NsLink } from './';
 import { NsTypography } from '../typography';

package/src/common/nav-product-card/NsNavProductCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;

package/src/common/nav-tab/NsNavTab.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavTab } from './';
 
 type ComponentType = typeof NsNavTab;

package/src/common/table/NsTable.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import NsTable from './NsTable';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsTable;
 type Story = StoryObj<ComponentType>;
@@ -9,15 +9,15 @@ const headers = [
     {
         label: 'Dessert (100g serving)',
         id: 'name',
-        numeric: false
+        numeric: false,
     },
-    { label: 'Calories', id: 'calories' , numeric: true},
+    { label: 'Calories', id: 'calories', numeric: true },
     { label: 'Fat (g)', id: 'fat', numeric: true },
     { label: 'Carbs (g)', id: 'carbs', numeric: true },
     { label: 'Protein (g)', id: 'protein', numeric: true },
     { label: 'Iron (%)', id: 'iron', numeric: false },
 ];
-  
+
 const items = [
     {
         name: 'Frozen Yogurt',
@@ -106,9 +106,9 @@ export default {
     component: NsTable,
     decorators: [withCenterDecorator],
     argTypes: {
-        rows: { 
+        rows: {
             control: 'select',
-            options: [5, 10, 25]
+            options: [5, 10, 25],
         },
     },
     args: {
@@ -116,8 +116,8 @@ export default {
         items: items,
         rows: 5,
         itemKey: 'name',
-        rowsPerPageOptions: [5, 10, 25]
-    }
+        rowsPerPageOptions: [5, 10, 25],
+    },
 } as MetaStory;
 
 export const NasTable: Story = {};

package/src/common/text-strip/NsTextStrip.stories.tsx

@@ -5,7 +5,7 @@
 
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsTextStrip } from '@/common/';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsTextStrip;
 type Story = StoryObj<ComponentType>;
@@ -16,8 +16,10 @@ export default {
     component: NsTextStrip,
     decorators: [withCenterDecorator],
     argTypes: {
-        children: {
-            control: 'text', // use the text control to edit children prop
+        alignment: {
+            control: 'select',
+            options: ['center', 'start', 'end'],
+            description: 'specify whether items should be in center, start or end',
         },
     },
     args: {
@@ -25,7 +27,6 @@ export default {
         description: 'Download the app to access everything Nike',
         link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
         alignment: 'center',
-        justify: 'center',
     },
 } as MetaStory;
 

package/src/common/text-strip/NsTextStrip.tsx

@@ -16,7 +16,10 @@ const getIsLight = (theme: FoundationTheme.Theme) => {
 };
 const StyledHeader = styled.header`
     background: ${({ theme }) => (getIsLight(theme) ? '#f5f5f5' : getPaletteColor(theme, 'primary', 'contrastText'))};
-    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    min-height: 60px;
+    padding: 2px 10px 12px;
     a {
         text-decoration: underline;
         font-weight: 600;
@@ -26,7 +29,7 @@ const NsTextStrip = (props: NsTextStripProps) => {
     const { alignment = 'center', text, description, link, className = '' } = props;
 
     return (
-        <StyledHeader className={`${className} justify-${alignment}`}>
+        <StyledHeader className={`${className} items-${alignment}`}>
             <NsTypography variant="h5" weight="bold">
                 {text}
             </NsTypography>

package/src/common/text-strip/types.d.ts

@@ -2,13 +2,16 @@ import { AdditionalProps } from '../common.types';
 
 export type AlignmentType = 'start' | 'center' | 'end';
 
-export type NsTextStripProps = {
-    alignment?: AlignmentType;
-    className?: string;
+export type TextCtaDataType = {
     link?: {
         href?: string;
         title?: string;
     };
     text?: string;
     description?: string;
-} & AdditionalProps;
+};
+export type NsTextStripProps = {
+    alignment?: AlignmentType;
+    className?: string;
+} & AdditionalProps &
+    TextCtaDataType;

package/src/common/typography/NsTypography.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsTypography } from './';
 
 type ComponentType = typeof NsTypography;

package/src/common/videos/NsVideo.stories.tsx

@@ -7,7 +7,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsVideo } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsVideo;
 type Story = StoryObj<ComponentType>;

package/src/common/column-control/stories/NDivs.story.tsx

@@ -1,35 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
-
-type DivArrayProps = {
-    elementsCount: number;
-};
-
-/**
- * this component return a fragment containing n number of div, with each div numbered as per its index
- * @param n: number of div to render
- * @returns
- */
-export const DivArray = ({ elementsCount }: DivArrayProps) => (
-    <>
-        {Array(elementsCount)
-            .fill(0)
-            .map((e, i) => (
-                <div key={i}>{i + 1}</div>
-            ))}
-    </>
-);
-type ComponentType = typeof DivArray;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/NsColumnControl/NDivs',
-    component: DivArray,
-    decorators: [withCenterDecorator],
-    args: {
-        n: 2,
-    },
-} as MetaStory;
-
-export const Basic: Story = {};