Skip to content

Commit 44d67b5

Browse files
author
billgil
authored
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
1 parent 355a35d commit 44d67b5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+949
-663
lines changed

‎.changeset/strange-turtles-kick.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@web3uikit/nextJs': patch
3+
'@web3uikit/styles': patch
4+
---
5+
6+
feat(NextJs): added new slice for testing with Money repo

‎.eslintrc.json

+32-53
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,35 @@
11
{
2-
"root": true,
3-
"ignorePatterns": [
4-
"**/*"
5-
],
6-
"plugins": [
7-
"@nrwl/nx"
8-
],
9-
"overrides": [
10-
{
11-
"files": [
12-
"*.ts",
13-
"*.tsx",
14-
"*.js",
15-
"*.jsx"
16-
],
17-
"rules": {
18-
"@nrwl/nx/enforce-module-boundaries": [
19-
"error",
20-
{
21-
"enforceBuildableLibDependency": true,
22-
"allow": [],
23-
"depConstraints": [
24-
{
25-
"sourceTag": "*",
26-
"onlyDependOnLibsWithTags": [
27-
"*"
2+
"root": true,
3+
"ignorePatterns": ["**/*"],
4+
"plugins": ["@nrwl/nx"],
5+
"overrides": [
6+
{
7+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
8+
"rules": {
9+
"@nrwl/nx/enforce-module-boundaries": [
10+
"error",
11+
{
12+
"enforceBuildableLibDependency": true,
13+
"allow": [],
14+
"depConstraints": [
15+
{
16+
"sourceTag": "*",
17+
"onlyDependOnLibsWithTags": ["*"]
18+
}
19+
]
20+
}
2821
]
29-
}
30-
]
31-
}
32-
]
33-
}
34-
},
35-
{
36-
"files": [
37-
"*.ts",
38-
"*.tsx"
39-
],
40-
"extends": [
41-
"plugin:@nrwl/nx/typescript"
42-
],
43-
"rules": {}
44-
},
45-
{
46-
"files": [
47-
"*.js",
48-
"*.jsx"
49-
],
50-
"extends": [
51-
"plugin:@nrwl/nx/javascript"
52-
],
53-
"rules": {}
54-
}
55-
]
22+
}
23+
},
24+
{
25+
"files": ["*.ts", "*.tsx", "*.scss"],
26+
"extends": ["plugin:@nrwl/nx/typescript"],
27+
"rules": {}
28+
},
29+
{
30+
"files": ["*.js", "*.jsx"],
31+
"extends": ["plugin:@nrwl/nx/javascript"],
32+
"rules": {}
33+
}
34+
]
5635
}

‎packages/web3api/CHANGELOG.md ‎packages/nextJs/CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# @web3uikit/web3api
1+
# @web3uikit/nextJs
22

33
## 0.2.0
44

‎packages/web3api/package.json ‎packages/nextJs/package.json

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@web3uikit/web3api",
2+
"name": "@web3uikit/nextJs",
33
"version": "0.2.0",
44
"sideEffects": false,
55
"private": "true",
@@ -24,14 +24,20 @@
2424
"react-dom": "^18.0.0"
2525
},
2626
"devDependencies": {
27+
"@types/node-sass": "^4.11.3",
28+
"@vitejs/plugin-react": "^1.1.0",
29+
"@vitejs/plugin-react-refresh": "^1.3.6",
30+
"css-loader": "^6.8.1",
31+
"eslint": "~8.12.0",
2732
"react": "^18.0.0",
2833
"react-dom": "^18.0.0",
29-
"styled-components": "^5.3.5"
34+
"sass": "^1.63.2",
35+
"sass-loader": "^13.3.2",
36+
"style-loader": "^3.3.3",
37+
"typescript-plugin-css-modules": "^5.0.1",
38+
"vite-plugin-css-modules": "^0.0.1"
3039
},
3140
"dependencies": {
32-
"@web3uikit/config": "*",
33-
"@web3uikit/core": "*",
34-
"@web3uikit/styles": "*",
35-
"@web3uikit/icons": "*"
41+
"@web3uikit/config": "*"
3642
}
3743
}

‎packages/web3api/project.json ‎packages/nextJs/project.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"root": "packages/web3api",
3-
"sourceRoot": "packages/web3api/src",
2+
"root": "packages/nextJs",
3+
"sourceRoot": "packages/nextJs/src",
44
"projectType": "library",
55
"targets": {
66
"version": {
77
"executor": "@jscutlery/semver:version",
88
"options": {
99
"postTargets": [
10-
"@web3uikit/web3api:publish",
11-
"@web3uikit/web3api:github"
10+
"@web3uikit/nextJs:publish",
11+
"@web3uikit/nextJs:github"
1212
]
1313
},
1414
"projects": "dependencies"

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.module.scss' {
2+
const classes: { [key: string]: string };
3+
export default classes;
4+
}

‎packages/web3api/src/index.ts ‎packages/nextJs/src/index.ts

File renamed without changes.

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use client';
2+
import { FC } from 'react';
3+
import { IButtonProps } from './types';
4+
import styles from './styles.module.scss';
5+
6+
const ButtonBase: FC<IButtonProps> = ({
7+
children,
8+
className,
9+
disabled = false,
10+
onClick,
11+
size = 'regular',
12+
style,
13+
type = 'button',
14+
...props
15+
}) => {
16+
const getSizeStyles = (size: string) => {
17+
switch (size) {
18+
case 'large':
19+
return styles.buttonLarge;
20+
case 'small':
21+
return styles.buttonSmall;
22+
case 'xl':
23+
return styles.buttonXL;
24+
default:
25+
return styles.buttonRegular;
26+
}
27+
};
28+
return (
29+
<button
30+
className={`
31+
web3uiKit-button
32+
${styles.button}
33+
${getSizeStyles(size)}
34+
${className}
35+
`}
36+
disabled={disabled}
37+
onClick={onClick}
38+
style={{ ...style }}
39+
type={type}
40+
{...props}
41+
>
42+
{children}
43+
</button>
44+
);
45+
};
46+
47+
export default ButtonBase;

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { ComponentStory, ComponentMeta } from '@storybook/react';
2+
import ButtonOutline from './ButtonOutline';
3+
4+
export default {
5+
title: '9.NextJS/Button/Outline',
6+
component: ButtonOutline,
7+
argTypes: { onClick: { action: 'clicked' } },
8+
} as ComponentMeta<typeof ButtonOutline>;
9+
10+
const Template: ComponentStory<typeof ButtonOutline> = (args) => (
11+
<ButtonOutline {...args} />
12+
);
13+
14+
export const Outline = Template.bind({});
15+
Outline.args = {
16+
children: <span>Good to use with NextJS</span>,
17+
};
18+
19+
export const Disabled = Template.bind({});
20+
Disabled.args = {
21+
children: <span>Good to use with NextJS</span>,
22+
disabled: true,
23+
};
24+
25+
export const SizeXL = Template.bind({});
26+
SizeXL.args = {
27+
children: <span>Good to use with NextJS</span>,
28+
size: 'xl',
29+
};
30+
31+
export const SizeLarge = Template.bind({});
32+
SizeLarge.args = {
33+
children: <span>Good to use with NextJS</span>,
34+
size: 'large',
35+
};
36+
37+
export const SizeRegular = Template.bind({});
38+
SizeRegular.args = {
39+
children: <span>Good to use with NextJS</span>,
40+
size: 'regular',
41+
};
42+
43+
export const SizeSmall = Template.bind({});
44+
SizeSmall.args = {
45+
children: <span>Good to use with NextJS</span>,
46+
size: 'small',
47+
};

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use client';
2+
import { FC } from 'react';
3+
import { IButtonProps } from '../types';
4+
import ButtonBase from '../ButtonBase';
5+
import styles from './styles.module.scss';
6+
7+
const ButtonOutline: FC<IButtonProps> = ({ ...props }: IButtonProps) => {
8+
return <ButtonBase className={styles.outline} {...props} />;
9+
};
10+
11+
export default ButtonOutline;

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

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

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@use '../../../styles/modules/color' as color;
2+
3+
.outline {
4+
background-color: color.$color-white;
5+
border-color: color.$color-primary60;
6+
color: color.$color-primary30;
7+
&:hover {
8+
background-color: color.$color-primary70;
9+
}
10+
&:focus {
11+
border-color: color.$color-primary30;
12+
}
13+
&:active {
14+
background-color: color.$color-primary50;
15+
}
16+
}

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { ComponentStory, ComponentMeta } from '@storybook/react';
2+
import ButtonPrimary from './ButtonPrimary';
3+
4+
export default {
5+
title: '9.NextJS/Button/Primary',
6+
component: ButtonPrimary,
7+
argTypes: { onClick: { action: 'clicked' } },
8+
} as ComponentMeta<typeof ButtonPrimary>;
9+
10+
const Template: ComponentStory<typeof ButtonPrimary> = (args) => (
11+
<ButtonPrimary {...args} />
12+
);
13+
14+
export const Primary = Template.bind({});
15+
Primary.args = {
16+
children: <span>Good to use with NextJS</span>,
17+
};
18+
19+
export const Disabled = Template.bind({});
20+
Disabled.args = {
21+
children: <span>Good to use with NextJS</span>,
22+
disabled: true,
23+
};
24+
25+
export const SizeXL = Template.bind({});
26+
SizeXL.args = {
27+
children: <span>Good to use with NextJS</span>,
28+
size: 'xl',
29+
};
30+
31+
export const SizeLarge = Template.bind({});
32+
SizeLarge.args = {
33+
children: <span>Good to use with NextJS</span>,
34+
size: 'large',
35+
};
36+
37+
export const SizeRegular = Template.bind({});
38+
SizeRegular.args = {
39+
children: <span>Good to use with NextJS</span>,
40+
size: 'regular',
41+
};
42+
43+
export const SizeSmall = Template.bind({});
44+
SizeSmall.args = {
45+
children: <span>Good to use with NextJS</span>,
46+
size: 'small',
47+
};

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use client';
2+
import { FC } from 'react';
3+
import { IButtonProps } from '../types';
4+
import ButtonBase from '../ButtonBase';
5+
import styles from './styles.module.scss';
6+
7+
const ButtonPrimary: FC<IButtonProps> = ({ ...props }: IButtonProps) => {
8+
return <ButtonBase className={styles.primary} {...props} />;
9+
};
10+
11+
export default ButtonPrimary;

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

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

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use '../../../styles/modules/color' as color;
2+
3+
.primary {
4+
background-color: color.$color-primary40;
5+
&:hover {
6+
background-color: color.$color-primary30;
7+
}
8+
&:focus {
9+
border-color: color.$color-primary60;
10+
}
11+
}

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

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

0 commit comments

Comments
 (0)