Feat next setup (#1113)

* feat(Next): setup and config

* fix: import scss without TS error

* feat(Next): PrimaryButton, OutlineButton added, testing sass config

* chore: changeset

.changeset/strange-turtles-kick.md

@@ -0,0 +1,6 @@
+---
+'@web3uikit/nextJs': patch
+'@web3uikit/styles': patch
+---
+
+feat(NextJs): added new slice for testing with Money repo

.eslintrc.json

@@ -1,56 +1,35 @@
 {
-  "root": true,
-  "ignorePatterns": [
-    "**/*"
-  ],
-  "plugins": [
-    "@nrwl/nx"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts",
-        "*.tsx",
-        "*.js",
-        "*.jsx"
-      ],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": [
-                  "*"
+    "root": true,
+    "ignorePatterns": ["**/*"],
+    "plugins": ["@nrwl/nx"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {
+                "@nrwl/nx/enforce-module-boundaries": [
+                    "error",
+                    {
+                        "enforceBuildableLibDependency": true,
+                        "allow": [],
+                        "depConstraints": [
+                            {
+                                "sourceTag": "*",
+                                "onlyDependOnLibsWithTags": ["*"]
+                            }
+                        ]
+                    }
                 ]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/typescript"
-      ],
-      "rules": {}
-    },
-    {
-      "files": [
-        "*.js",
-        "*.jsx"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/javascript"
-      ],
-      "rules": {}
-    }
-  ]
+            }
+        },
+        {
+            "files": ["*.ts", "*.tsx", "*.scss"],
+            "extends": ["plugin:@nrwl/nx/typescript"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "extends": ["plugin:@nrwl/nx/javascript"],
+            "rules": {}
+        }
+    ]
 }

packages/web3api/CHANGELOG.md → packages/nextJs/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @web3uikit/web3api
+# @web3uikit/nextJs
 
 ## 0.2.0
 

packages/web3api/package.json → packages/nextJs/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@web3uikit/web3api",
+    "name": "@web3uikit/nextJs",
     "version": "0.2.0",
     "sideEffects": false,
     "private": "true",
@@ -24,14 +24,20 @@
         "react-dom": "^18.0.0"
     },
     "devDependencies": {
+        "@types/node-sass": "^4.11.3",
+        "@vitejs/plugin-react": "^1.1.0",
+        "@vitejs/plugin-react-refresh": "^1.3.6",
+        "css-loader": "^6.8.1",
+        "eslint": "~8.12.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "styled-components": "^5.3.5"
+        "sass": "^1.63.2",
+        "sass-loader": "^13.3.2",
+        "style-loader": "^3.3.3",
+        "typescript-plugin-css-modules": "^5.0.1",
+        "vite-plugin-css-modules": "^0.0.1"
     },
     "dependencies": {
-        "@web3uikit/config": "*",
-        "@web3uikit/core": "*",
-        "@web3uikit/styles": "*",
-        "@web3uikit/icons": "*"
+        "@web3uikit/config": "*"
     }
 }

packages/web3api/project.json → packages/nextJs/project.json

@@ -1,14 +1,14 @@
 {
-    "root": "packages/web3api",
-    "sourceRoot": "packages/web3api/src",
+    "root": "packages/nextJs",
+    "sourceRoot": "packages/nextJs/src",
     "projectType": "library",
     "targets": {
         "version": {
             "executor": "@jscutlery/semver:version",
             "options": {
                 "postTargets": [
-                    "@web3uikit/web3api:publish",
-                    "@web3uikit/web3api:github"
+                    "@web3uikit/nextJs:publish",
+                    "@web3uikit/nextJs:github"
                 ]
             },
             "projects": "dependencies"

packages/nextJs/src/css.module.scss.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+    const classes: { [key: string]: string };
+    export default classes;
+}

packages/nextJs/src/lib/Button/ButtonBase.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { FC } from 'react';
+import { IButtonProps } from './types';
+import styles from './styles.module.scss';
+
+const ButtonBase: FC<IButtonProps> = ({
+    children,
+    className,
+    disabled = false,
+    onClick,
+    size = 'regular',
+    style,
+    type = 'button',
+    ...props
+}) => {
+    const getSizeStyles = (size: string) => {
+        switch (size) {
+            case 'large':
+                return styles.buttonLarge;
+            case 'small':
+                return styles.buttonSmall;
+            case 'xl':
+                return styles.buttonXL;
+            default:
+                return styles.buttonRegular;
+        }
+    };
+    return (
+        <button
+            className={`
+                web3uiKit-button
+                ${styles.button} 
+                ${getSizeStyles(size)} 
+                ${className} 
+            `}
+            disabled={disabled}
+            onClick={onClick}
+            style={{ ...style }}
+            type={type}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default ButtonBase;

packages/nextJs/src/lib/Button/ButtonOutline/Button.stories.tsx

@@ -0,0 +1,47 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ButtonOutline from './ButtonOutline';
+
+export default {
+    title: '9.NextJS/Button/Outline',
+    component: ButtonOutline,
+    argTypes: { onClick: { action: 'clicked' } },
+} as ComponentMeta<typeof ButtonOutline>;
+
+const Template: ComponentStory<typeof ButtonOutline> = (args) => (
+    <ButtonOutline {...args} />
+);
+
+export const Outline = Template.bind({});
+Outline.args = {
+    children: <span>Good to use with NextJS</span>,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: <span>Good to use with NextJS</span>,
+    disabled: true,
+};
+
+export const SizeXL = Template.bind({});
+SizeXL.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'xl',
+};
+
+export const SizeLarge = Template.bind({});
+SizeLarge.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'large',
+};
+
+export const SizeRegular = Template.bind({});
+SizeRegular.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'regular',
+};
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'small',
+};

packages/nextJs/src/lib/Button/ButtonOutline/ButtonOutline.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { FC } from 'react';
+import { IButtonProps } from '../types';
+import ButtonBase from '../ButtonBase';
+import styles from './styles.module.scss';
+
+const ButtonOutline: FC<IButtonProps> = ({ ...props }: IButtonProps) => {
+    return <ButtonBase className={styles.outline} {...props} />;
+};
+
+export default ButtonOutline;

packages/nextJs/src/lib/Button/ButtonOutline/index.tsx

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

packages/nextJs/src/lib/Button/ButtonOutline/styles.module.scss

@@ -0,0 +1,16 @@
+@use '../../../styles/modules/color' as color;
+
+.outline {
+    background-color: color.$color-white;
+    border-color: color.$color-primary60;
+    color: color.$color-primary30;
+    &:hover {
+        background-color: color.$color-primary70;
+    }
+    &:focus {
+        border-color: color.$color-primary30;
+    }
+    &:active {
+        background-color: color.$color-primary50;
+    }
+}

packages/nextJs/src/lib/Button/ButtonPrimary/Button.stories.tsx

@@ -0,0 +1,47 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ButtonPrimary from './ButtonPrimary';
+
+export default {
+    title: '9.NextJS/Button/Primary',
+    component: ButtonPrimary,
+    argTypes: { onClick: { action: 'clicked' } },
+} as ComponentMeta<typeof ButtonPrimary>;
+
+const Template: ComponentStory<typeof ButtonPrimary> = (args) => (
+    <ButtonPrimary {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+    children: <span>Good to use with NextJS</span>,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: <span>Good to use with NextJS</span>,
+    disabled: true,
+};
+
+export const SizeXL = Template.bind({});
+SizeXL.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'xl',
+};
+
+export const SizeLarge = Template.bind({});
+SizeLarge.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'large',
+};
+
+export const SizeRegular = Template.bind({});
+SizeRegular.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'regular',
+};
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = {
+    children: <span>Good to use with NextJS</span>,
+    size: 'small',
+};

packages/nextJs/src/lib/Button/ButtonPrimary/ButtonPrimary.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { FC } from 'react';
+import { IButtonProps } from '../types';
+import ButtonBase from '../ButtonBase';
+import styles from './styles.module.scss';
+
+const ButtonPrimary: FC<IButtonProps> = ({ ...props }: IButtonProps) => {
+    return <ButtonBase className={styles.primary} {...props} />;
+};
+
+export default ButtonPrimary;

packages/nextJs/src/lib/Button/ButtonPrimary/index.tsx

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

packages/nextJs/src/lib/Button/ButtonPrimary/styles.module.scss

@@ -0,0 +1,11 @@
+@use '../../../styles/modules/color' as color;
+
+.primary {
+    background-color: color.$color-primary40;
+    &:hover {
+        background-color: color.$color-primary30;
+    }
+    &:focus {
+        border-color: color.$color-primary60;
+    }
+}

packages/nextJs/src/lib/Button/index.tsx

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