@nuskin/foundation-ui-components 1.0.0-cft-35.1

package/LICENSE.md

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2023, Nuskin
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @nuskin/foundation-ui-components
+
+This is a library that contains react components used in NuSkin Pages
+
+## Installing
+
+Usng npm:
+
+```bash
+npm add @nuskin/foundation-ui-components
+```
+
+Usng yarn:
+
+```bash
+yarn add @nuskin/foundation-ui-components
+```
+
+## Example usage
+
+```ts
+import { Button } from "@nuskin/foundation-ui-components";
+
+const Page = () => {
+  return (
+    <Button variant="contained" color="primary">
+      Sample
+    </Button>
+  );
+};
+```
+
+## Resources
+
+- 0.1.0 - Initial commit
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@nuskin/foundation-ui-components",
+  "version": "1.0.0-cft-35.1",
+  "description": "It is a foundation library written in react, that provides commom components to all UI pages",
+  "private": false,
+  "main": "src/common/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
+  },
+  "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
+  "author": {
+    "email": "rpalanisamy@nuskin.com",
+    "name": "Ruthraj Palanisamy"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "foundation-ui",
+    "foundation-ui-components"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "start-storybook -p 6006",
+    "test": "jest",
+    "test:coverage": "yarn test --coverage",
+    "test:watch": "jest --watch",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/material": "5.4.2",
+    "@next/font": "13.1.6",
+    "@nuskin/foundation-theme": "1.0.0-cft-33.4",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-typescript": "^7.18.6",
+    "@emotion/jest": "^11.10.5",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-emotion": "^11.0.0",
+    "eslint": "8.33.0",
+    "eslint-config-next": "13.1.6",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-storybook": "^0.6.10",
+    "jest": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.2"
+  },
+  "files": [
+    "src/common"
+  ]
+}

package/src/common/Icons/Logo.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const LogoIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 155 108" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clip-path="url(#clip0_11117_50399)">
+                <path d="M145.803 20.6435C145.084 18.9662 144.039 17.4488 142.728 16.1793C139.943 13.5595 136.017 12.5391 132.31 13.472C128.604 14.4047 125.626 17.1622 124.411 20.7888C123.792 22.4814 123.475 24.2696 123.474 26.0719C123.474 33.9438 123.474 41.8201 123.474 49.7006C123.474 51.0214 123.474 51.0214 122.022 50.9554C122.022 50.7044 122.022 50.4271 122.022 50.1628C122.022 41.2608 122.022 32.3632 122.022 23.47C121.801 17.9191 125.172 12.8556 130.376 10.9226C131.004 10.703 131.648 10.5308 132.303 10.4075C132.936 10.2754 133.622 10.2225 134.256 10.1433C133.451 6.45834 126.746 2.21863 121.309 1.96768C115.508 1.82825 110.13 4.99786 107.439 10.1433C108.059 10.2225 108.667 10.2622 109.247 10.3678C114.641 11.2894 118.805 15.6226 119.515 21.0529C119.661 22.0412 119.736 23.0388 119.739 24.0379C119.739 32.7288 119.739 41.4193 119.739 50.1101C119.739 50.7968 119.58 51.0875 118.842 51.0081C118.102 50.929 118.182 50.7044 118.182 50.2159C118.182 47.4552 118.182 44.6948 118.182 41.9212C118.182 36.4532 118.182 30.9852 118.182 25.5172C118.228 22.3039 117.053 19.193 114.895 16.8132C112.342 14.0518 108.579 12.7501 104.866 13.3445C101.154 13.939 97.9845 16.3508 96.4194 19.7718C96.248 20.102 96.1026 20.4454 95.8652 20.9341C98.0359 8.85927 108.509 0.0553189 120.767 0.000259583C133.026 -0.0547998 143.577 8.65471 145.856 20.7095" fill="#252525" />
+                <path d="M129.556 49.41C129.556 49.1591 129.556 48.9873 129.556 48.8157C129.556 44.1663 129.556 39.5703 129.556 34.8551C129.471 32.5992 130.332 30.4108 131.931 28.819C133.957 26.8776 136.968 26.3842 139.507 27.5775C142.034 28.5237 143.712 30.9388 143.716 33.6398C143.792 36.4561 142.775 39.192 140.879 41.2738C138.105 44.7864 134.467 47.5172 130.321 49.1985C130.075 49.2868 129.824 49.3618 129.569 49.4231" fill="#252525" />
+                <path d="M112.176 49.5949C110.526 48.7363 108.969 48.0496 107.53 47.1646C104.217 45.2066 101.445 42.4507 99.4666 39.1475C98.3269 37.3357 97.8597 35.1804 98.1469 33.0589C98.5316 29.7773 101.212 27.2445 104.508 27.0492C107.978 26.5971 111.208 28.902 111.912 32.3324C112.153 33.327 112.277 34.3466 112.281 35.3701C112.281 39.7552 112.281 44.1533 112.281 48.5778C112.281 48.8288 112.281 49.0667 112.202 49.5552" fill="#252525" />
+                <path d="M115.91 50.4005C114.591 50.4005 114.472 50.308 114.472 49.1721V30.3114C114.645 26.8698 112.63 23.6935 109.444 22.3867C105.928 20.905 101.865 21.6983 99.1633 24.3943C97.4446 26.3444 96.5048 28.8603 96.5238 31.4604C96.5292 31.7375 96.461 32.0109 96.3258 32.253C96.1804 31.619 96.009 30.9321 95.9297 30.351C95.478 27.8623 95.9471 25.2941 97.2494 23.1263C98.1536 21.5993 99.5498 20.4255 101.209 19.798C104.734 18.413 108.691 18.6596 112.017 20.4716C114.468 21.7014 115.986 24.2401 115.91 26.983C115.976 34.6566 115.91 42.3303 115.91 49.991C115.91 50.1495 115.91 50.2947 115.91 50.4402" fill="#252525" />
+                <path d="M125.704 50.427V49.476C125.704 42.3969 125.783 35.3175 125.704 28.238C125.625 22.5058 128.832 20.036 133.346 19.1246C135.614 18.6682 137.965 18.8418 140.142 19.6266C144.005 21.0933 146.392 24.9853 145.949 29.0965C145.856 30.1707 145.676 31.2353 145.408 32.2796C145.183 30.9588 145.091 29.6381 144.734 28.3173C143.964 25.4313 141.832 23.1046 139.026 22.0861C136.22 21.0675 133.094 21.4856 130.653 23.2059C128.356 24.7671 127.044 27.4182 127.195 30.1928C127.195 36.4798 127.195 42.7667 127.195 49.0535C127.195 50.3743 127.195 50.3743 125.678 50.3743" fill="#252525" />
+                <path d="M27.714 93.128C27.714 86.9072 24.9822 83.6714 15.2691 79.2862C9.55475 76.6447 7.35082 74.0031 7.35082 70.8333C7.35082 66.567 10.3334 63.0141 16.1797 63.0141C19.1984 63.0878 22.1225 64.0833 24.5599 65.8672L26.843 61.5482C23.781 59.4956 20.1818 58.393 16.4964 58.3784C7.91831 58.3784 2.21712 64.3746 2.21712 71.0843C2.21712 76.6711 5.1997 80.3297 13.2631 83.8562C20.8779 87.2242 22.5011 89.6412 22.5011 93.7093C22.5011 97.7771 19.7034 101.845 13.7383 101.845C9.66038 101.629 5.74215 100.188 2.49426 97.711L0 102.162C3.94083 104.954 8.64596 106.462 13.4743 106.481C21.5378 106.481 27.6876 100.696 27.6876 93.128H27.714ZM71.951 105.715L49.3309 81.7563L70.9214 59.0915H64.5076L44.2501 80.8052V59.0915H39.1693V105.715H44.2501V82.8655L65.2731 105.715H71.951ZM89.5955 59.0915H84.462V105.715H89.5428L89.5955 59.0915ZM141.408 106.376V59.0915H136.327V93.8942L106.475 58.2329L105.458 58.4839V105.715H110.539V70.3842L140.774 106.639L141.408 106.376Z" fill="#252525" />
+                <path d="M39.4206 50.1894V2.91866H34.3131V37.6684L4.47444 2.00732L3.45825 2.25827V49.4893H8.53915V14.1849L38.7607 50.414L39.4206 50.1894ZM85.0167 32.7814V2.91866H79.9359V32.3983C79.9359 41.6438 74.6571 45.6855 67.425 45.6855C60.1929 45.6855 55.0461 41.7232 55.0461 32.3983V2.91866H49.965V32.7814C49.965 43.9686 56.7616 50.2555 67.425 50.2555C77.8373 50.2555 85.0167 43.5856 85.0167 32.7814Z" fill="#252525" />
+                <path d="M150.431 107.7C152.737 107.7 154.569 105.785 154.569 103.5C154.569 101.162 152.737 99.2468 150.431 99.2468C148.124 99.2468 146.318 101.136 146.318 103.5C146.318 105.811 148.15 107.7 150.431 107.7ZM150.431 107.119C148.52 107.119 146.977 105.441 146.977 103.513C146.977 101.492 148.52 99.8808 150.431 99.8808C152.368 99.8808 153.91 101.505 153.91 103.513C153.91 105.455 152.368 107.119 150.431 107.119ZM149.811 102.007C149.93 101.981 150.128 101.981 150.299 101.981C150.866 101.981 151.208 102.258 151.208 102.668C151.208 103.183 150.866 103.473 150.246 103.473C150.128 103.473 149.969 103.473 149.798 103.447V102.007H149.811ZM149.126 105.521H149.811V104.028C149.983 104.055 150.101 104.055 150.18 104.055C150.233 104.055 150.378 104.055 150.497 104.028L151.406 105.521H152.21L151.156 103.87C151.617 103.672 151.907 103.183 151.907 102.641C151.907 101.955 151.367 101.36 150.22 101.36C149.798 101.36 149.455 101.387 149.126 101.439V105.521Z" fill="#252525" />
+            </g>
+            <defs>
+                <clipPath id="clip0_11117_50399">
+                    <rect width="200px" height="200px" fill="white" />
+                </clipPath>
+            </defs>
+        </SvgIcon>
+
+    );
+}
+
+export default LogoIcon;
+

package/src/common/button/Button.spec.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { render, screen } from "../../../test-utils/index";
+import { palette } from "@nuskin/foundation-theme/src/themes/genome-foundation"
+import { Button } from "./Button";
+
+describe("<Button />", () => {
+    describe(" button primary", () => {
+        test("should render default button styles", () => {
+            render(
+                <Button color="primary" variant="contained">
+                    Click Me
+                </Button>
+            );
+
+            const button = screen.getByText("Click Me");
+
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveStyle(`color: ${palette.primary.contrastText}`);
+            expect(button).toHaveStyle(`background-color: ${palette.primary.main}`);
+        });
+    });
+    describe("button secondary", () => {
+        test("should render default button styles", () => {
+            render(
+                <Button
+                    color="success"
+                    variant="contained"
+                    size="large"
+                >
+                    Click Me
+                </Button>
+            );
+
+            const button = screen.getByText("Click Me");
+
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
+            expect(button).toHaveStyle(`background-color: ${palette.success.main}`);
+        });
+    });
+    describe("button outline success", () => {
+        test("should render outlined sucess button", () => {
+            render(
+                <Button
+                    color="success"
+                    variant="outlined"
+                    size="large"
+                >
+                    Click Me
+                </Button>
+            );
+
+            const button = screen.getByText("Click Me");
+
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveStyle(`color: ${palette.success.main}`);
+            expect(button).toHaveStyle(`border-color: ${palette.success.main}`);
+        });
+    });
+    describe("button outline accentColorA", () => {
+        test("should render outlined sucess button", () => {
+            render(
+                <Button
+                    color="accentColorA"
+                    variant="outlined"
+                    size="large"
+                >
+                    Click Me
+                </Button>
+            );
+
+            const button = screen.getByText("Click Me");
+
+            expect(button).toBeInTheDocument();
+            expect(button).toHaveStyle(`color: ${palette.accentColorA.main}`);
+            expect(button).toHaveStyle(`border-color: ${palette.accentColorA.main}`);
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Button } from "./Button";
+
+export default {
+    title: "Components/Button",
+    component: Button,
+    decorators: [
+        (story) => (
+            <div style={{ textAlign: "center", marginTop: "20px" }}>{story()}</div>
+        ),
+    ],
+    argTypes: {
+        children: {
+            control: "text",
+            name: "Children/Content",
+            defaultValue: "Button",
+        },
+        color: { name: "Color Variants" },
+        disabled: { control: "boolean" },
+        fullWidth: { control: "boolean" },
+    },
+    args: {
+        children: "Button",
+        color: "primary",
+        size: "medium",
+        disabled: false,
+        variant: "contained",
+        fullWidth: false,
+    },
+} as ComponentMeta<typeof Button>;
+
+export const button: ComponentStory<typeof Button> = (args) => <Button {...args} />;

package/src/common/button/Button.styled.tsx

@@ -0,0 +1,63 @@
+import { styled } from "@nuskin/foundation-theme"
+import { Button as MUIButton } from "@mui/material";
+
+const StyledButton = styled(MUIButton)`
+  gap: 10px;
+  border-radius: 0;
+  :focus {
+    border: 1px solid #94D6E9 !important;
+  };
+  :disabled {
+    background-color: ${({ theme: { palette }, color = "primary" }) => palette?.[color]?.buttonState?.disabled};
+    color: ${({ theme: { palette }, color = "primary" }) => palette?.[color]?.buttonState?.disabledText}
+  }
+  ${({ size }) => size === 'medium' && `
+    padding: 10px 87px;
+  `}
+  ${({ size }) => size === 'large' && `
+    padding: 12px 95px;
+  `}
+  ${({ variant, theme: { palette }, color = "primary" }) => variant === 'contained' && `
+    background-color: ${palette?.[color].main};
+    :hover {
+      background-color: ${palette?.[color]?.buttonState?.hovered};
+    }
+    :active {
+      background-color: ${palette?.[color]?.buttonState?.pressed};
+    }
+    :focus {
+      background-color: ${palette?.[color]?.buttonState?.focused};
+    }
+  `}
+  ${({ variant, theme: { palette }, color = "primary" }) => variant === 'outlined' && `
+    border-color: ${palette?.[color].main};
+    color: ${palette?.[color].main};
+    :hover {
+      border-color: ${palette?.[color]?.buttonState?.hovered};
+      color: ${palette?.[color].main};
+    }
+    :active {
+      border-color: ${palette?.[color]?.buttonState?.pressed};
+      color: ${palette?.[color].main};
+    }
+  `}
+  ${({ variant, theme: { palette }, color = "primary" }) => variant === 'text' && `
+    text-decoration: underline 1px !important;
+    text-underline-offset: 4px;
+    padding: 0;
+    min-width: auto;
+    background-color: transparent !important;
+    text-decoration-color: ${palette?.[color].main};
+    color: ${palette?.[color].main};
+    :hover {
+      color: ${palette?.[color].buttonState?.hovered};
+      text-decoration-color: ${palette?.[color].buttonState?.hovered};
+    }
+    :active {
+      color: ${palette?.[color].main};
+      text-decoration-color: ${palette?.[color].buttonState?.pressed};
+    }
+  `}
+`;
+
+export default StyledButton;

package/src/common/button/Button.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import StyledButton from "./Button.styled";
+import { ButtonProps } from "./types";
+
+export const Button: FC<ButtonProps> = ({
+    children,
+    ...props
+}) => {
+    return (
+        <StyledButton {...props} disableRipple>
+            {children}
+        </StyledButton>
+    );
+};

package/src/common/button/index.d.ts

@@ -0,0 +1 @@
+export { Button as default } from './Button';

package/src/common/button/index.ts

@@ -0,0 +1,2 @@
+export { Button as default } from './Button';
+export type { ButtonProps } from './types';

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

@@ -0,0 +1,8 @@
+import { ButtonProps as MUIButtonProps } from "@mui/material";
+
+export type ButtonProps = Pick<
+  MUIButtonProps,
+  "size" | "children" | "variant" | "disabled" | "fullWidth" | "color"
+> & {
+  iconOnly?: boolean;
+};

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export type { ButtonProps } from './button';