@customafk/lunas-ui 0.0.0-a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/Atoms/index.d.ts +24 -0
- package/dist/Atoms/index.js +104 -0
- package/dist/tailwindTheme.d.ts +32 -0
- package/dist/tailwindTheme.js +34 -0
- package/package.json +82 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# E-Commerce UI
|
|
2
|
+
|
|
3
|
+
## 🤔 What is this project?
|
|
4
|
+
|
|
5
|
+
This is a component library for any e-commerce web project.
|
|
6
|
+
|
|
7
|
+
## ⚡ Installation
|
|
8
|
+
|
|
9
|
+
1. Prerequisites
|
|
10
|
+
|
|
11
|
+
- `Node.js >= 20.x`
|
|
12
|
+
- `Yarn >= 4.x`
|
|
13
|
+
|
|
14
|
+
2. Clone repository
|
|
15
|
+
|
|
16
|
+
- `git clone https://github.com/QuangPhamvt/e-commerce-ui.git`
|
|
17
|
+
|
|
18
|
+
3. Install packages
|
|
19
|
+
|
|
20
|
+
- `yarn`
|
|
21
|
+
|
|
22
|
+
4. Run
|
|
23
|
+
|
|
24
|
+
- `yarn run sb`
|
|
25
|
+
- Go to [localhost:6006](http://localhost:6006)
|
|
26
|
+
|
|
27
|
+
## ❔ How to push
|
|
28
|
+
|
|
29
|
+
- Role commit: `{type}: {subject}`
|
|
30
|
+
|
|
31
|
+
- type: feature (feat) | fix | style | refactor | documentation (doc) | test | build
|
|
32
|
+
- subject: write a concise description of the change
|
|
33
|
+
<!-- - # (TODO) Automatic: check lint and format pre-commit -->
|
|
34
|
+
|
|
35
|
+
- Example:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
git commit -m "{type}: {subject}"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
| **Type** | **Description** |
|
|
42
|
+
| :------------ | :----------------------------------------------------------------------------------------------------- |
|
|
43
|
+
| feature | A new feature |
|
|
44
|
+
| fix | A bug fix |
|
|
45
|
+
| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
|
|
46
|
+
| refactor | Changes that restructure the code without adding new features |
|
|
47
|
+
| documentation | Changes to documentation only |
|
|
48
|
+
| test | Changes that add or modify existing tests |
|
|
49
|
+
| build | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) |
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
|
|
5
|
+
|
|
6
|
+
declare const buttonVariants: (props?: ({
|
|
7
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | "destructive-outline" | "destructive-ghost" | "accept" | "accept-outline" | "normal" | null | undefined;
|
|
8
|
+
size?: "default" | null | undefined;
|
|
9
|
+
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
10
|
+
|
|
11
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
12
|
+
asChild?: boolean;
|
|
13
|
+
icon?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
16
|
+
|
|
17
|
+
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
20
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
21
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
|
|
24
|
+
export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, buttonVariants };
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
// packages/Atoms/Button/Button.tsx
|
|
2
|
+
import { Slot, Slottable } from "@radix-ui/react-slot";
|
|
3
|
+
|
|
4
|
+
// packages/libs/utils.ts
|
|
5
|
+
import clsx from "clsx";
|
|
6
|
+
import { twMerge } from "tailwind-merge";
|
|
7
|
+
var cn = (...inputs) => {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// packages/Atoms/Button/Button.tsx
|
|
12
|
+
import { forwardRef } from "react";
|
|
13
|
+
|
|
14
|
+
// packages/Atoms/Button/buttonVariants.ts
|
|
15
|
+
import { cva } from "class-variance-authority";
|
|
16
|
+
var buttonVariants = cva(
|
|
17
|
+
"text-ui-white-primary flex items-center justify-center gap-1 rounded-md px-3 py-1 text-base font-semibold enabled:hover:opacity-80 enabled:active:opacity-100 disabled:cursor-not-allowed disabled:opacity-40",
|
|
18
|
+
{
|
|
19
|
+
variants: {
|
|
20
|
+
variant: {
|
|
21
|
+
default: "bg-ui-btn-primary enabled:active:shadow-ui-sd-primary enabled:active:opacity-95",
|
|
22
|
+
secondary: "bg-ui-btn-secondary enabled:active:shadow-ui-sd-base",
|
|
23
|
+
outline: "text-ui-primary border-ui-primary enabled:active:shadow-ui-sd-primary border border-solid enabled:active:opacity-80",
|
|
24
|
+
ghost: "text-ui-primary bg-ui-white enabled:active:shadow-ui-sd-primary enabled:active:opacity-80",
|
|
25
|
+
destructive: "bg-ui-btn-destructive text-ui-white-primary enabled:active:shadow-ui-sd-destructive",
|
|
26
|
+
"destructive-outline": "text-ui-destruction-flat border-ui-destruction-flat enabled:active:shadow-ui-sd-destructive border border-solid",
|
|
27
|
+
"destructive-ghost": "text-ui-destruction-flat border-ui-destruction-flat bg-ui-white enabled:active:shadow-ui-sd-destructive border border-solid disabled:opacity-60",
|
|
28
|
+
accept: "bg-ui-btn-accept text-ui-white-primary enabled:active:shadow-ui-sd-accept",
|
|
29
|
+
"accept-outline": "text-ui-positive-flat border-ui-positive-flat bg-ui-white enabled:active:shadow-ui-sd-accept border border-solid",
|
|
30
|
+
normal: "border-ui-black bg-ui-white text-ui-black enabled:active:shadow-ui-xl border border-solid"
|
|
31
|
+
},
|
|
32
|
+
size: {
|
|
33
|
+
default: ""
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
variant: "default",
|
|
38
|
+
size: "default"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// packages/Atoms/Button/Button.tsx
|
|
44
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
45
|
+
var Button = forwardRef(
|
|
46
|
+
({ className, variant, size, icon, asChild = false, children, ...props }, ref) => {
|
|
47
|
+
const Comp = asChild ? Slot : "button";
|
|
48
|
+
return /* @__PURE__ */ jsxs(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props, children: [
|
|
49
|
+
icon,
|
|
50
|
+
/* @__PURE__ */ jsx(Slottable, { children })
|
|
51
|
+
] });
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
Button.displayName = "Button";
|
|
55
|
+
|
|
56
|
+
// packages/Atoms/Card/index.tsx
|
|
57
|
+
import * as React from "react";
|
|
58
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
59
|
+
var Card = React.forwardRef(
|
|
60
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
ref,
|
|
64
|
+
className: cn("bg-card text-card-foreground rounded-lg border shadow-sm", className),
|
|
65
|
+
...props
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
);
|
|
69
|
+
Card.displayName = "Card";
|
|
70
|
+
var CardHeader = React.forwardRef(
|
|
71
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
|
|
72
|
+
);
|
|
73
|
+
CardHeader.displayName = "CardHeader";
|
|
74
|
+
var CardTitle = React.forwardRef(
|
|
75
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
76
|
+
"h3",
|
|
77
|
+
{
|
|
78
|
+
ref,
|
|
79
|
+
className: cn("text-2xl font-semibold leading-none tracking-tight", className),
|
|
80
|
+
...props
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
);
|
|
84
|
+
CardTitle.displayName = "CardTitle";
|
|
85
|
+
var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("p", { ref, className: cn("text-muted-foreground text-sm", className), ...props }));
|
|
86
|
+
CardDescription.displayName = "CardDescription";
|
|
87
|
+
var CardContent = React.forwardRef(
|
|
88
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-6 pt-0", className), ...props })
|
|
89
|
+
);
|
|
90
|
+
CardContent.displayName = "CardContent";
|
|
91
|
+
var CardFooter = React.forwardRef(
|
|
92
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
|
|
93
|
+
);
|
|
94
|
+
CardFooter.displayName = "CardFooter";
|
|
95
|
+
export {
|
|
96
|
+
Button,
|
|
97
|
+
Card,
|
|
98
|
+
CardContent,
|
|
99
|
+
CardDescription,
|
|
100
|
+
CardFooter,
|
|
101
|
+
CardHeader,
|
|
102
|
+
CardTitle,
|
|
103
|
+
buttonVariants
|
|
104
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
var tailwindTheme = {
|
|
2
|
+
colors: {
|
|
3
|
+
'ui-white': '#F8F8F8',
|
|
4
|
+
'ui-white-primary': '#FDFDFD',
|
|
5
|
+
'ui-black-primary': '#111315',
|
|
6
|
+
'ui-primary': '#6C70F0',
|
|
7
|
+
'ui-destruction-flat': '#EF4444',
|
|
8
|
+
'ui-positive-flat': '#4ADE80',
|
|
9
|
+
'ui-text-primary': '#111315',
|
|
10
|
+
'ui-text-secondary': '#30353C',
|
|
11
|
+
'ui-text-third': '#30353CCC',
|
|
12
|
+
'ui-text-placeholder': '#11131566',
|
|
13
|
+
'ui-text-white-primary': '#FDFDFD',
|
|
14
|
+
'ui-text-white-secondary': '#FDFDFDCC',
|
|
15
|
+
'ui-text-white-placeholder': '#FDFDFD99',
|
|
16
|
+
},
|
|
17
|
+
backgroundImage: {
|
|
18
|
+
'ui-btn-primary': 'linear-gradient(180deg, #9EA1FF 0%, #607DE8 100%)',
|
|
19
|
+
'ui-btn-secondary': 'linear-gradient(180deg, #5E7FF1 0%, #8FDDFF 100%)',
|
|
20
|
+
'ui-btn-destructive': 'linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)',
|
|
21
|
+
'ui-btn-accept': 'linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)',
|
|
22
|
+
},
|
|
23
|
+
boxShadow: {
|
|
24
|
+
'ui-sd-primary': '0 4px 20px 0 rgba(104, 109, 224, 0.5)',
|
|
25
|
+
'ui-sd-base': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
26
|
+
'ui-sd-destructive': '0 10px 10px 0 rgba(255, 56, 74, 0.15)',
|
|
27
|
+
'ui-sd-accept': '0 10px 10px 0 rgba(46, 213, 115, 0.15)',
|
|
28
|
+
'ui-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { tailwindTheme as default };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// packages/tailwindTheme.js
|
|
2
|
+
var tailwindTheme_default = {
|
|
3
|
+
colors: {
|
|
4
|
+
"ui-white": "#F8F8F8",
|
|
5
|
+
"ui-white-primary": "#FDFDFD",
|
|
6
|
+
"ui-black-primary": "#111315",
|
|
7
|
+
"ui-primary": "#6C70F0",
|
|
8
|
+
"ui-destruction-flat": "#EF4444",
|
|
9
|
+
"ui-positive-flat": "#4ADE80",
|
|
10
|
+
"ui-text-primary": "#111315",
|
|
11
|
+
"ui-text-secondary": "#30353C",
|
|
12
|
+
"ui-text-third": "#30353CCC",
|
|
13
|
+
"ui-text-placeholder": "#11131566",
|
|
14
|
+
"ui-text-white-primary": "#FDFDFD",
|
|
15
|
+
"ui-text-white-secondary": "#FDFDFDCC",
|
|
16
|
+
"ui-text-white-placeholder": "#FDFDFD99"
|
|
17
|
+
},
|
|
18
|
+
backgroundImage: {
|
|
19
|
+
"ui-btn-primary": "linear-gradient(180deg, #9EA1FF 0%, #607DE8 100%)",
|
|
20
|
+
"ui-btn-secondary": "linear-gradient(180deg, #5E7FF1 0%, #8FDDFF 100%)",
|
|
21
|
+
"ui-btn-destructive": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
|
|
22
|
+
"ui-btn-accept": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)"
|
|
23
|
+
},
|
|
24
|
+
boxShadow: {
|
|
25
|
+
"ui-sd-primary": "0 4px 20px 0 rgba(104, 109, 224, 0.5)",
|
|
26
|
+
"ui-sd-base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
27
|
+
"ui-sd-destructive": "0 10px 10px 0 rgba(255, 56, 74, 0.15)",
|
|
28
|
+
"ui-sd-accept": "0 10px 10px 0 rgba(46, 213, 115, 0.15)",
|
|
29
|
+
"ui-xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
tailwindTheme_default as default
|
|
34
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@customafk/lunas-ui",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.0.0-a",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"homepage": "https://docs.customafk.com",
|
|
7
|
+
"repository": {
|
|
8
|
+
"url": "git+https://github.com/QuangPhamvt/lunas-ui.git"
|
|
9
|
+
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist"
|
|
12
|
+
],
|
|
13
|
+
"main": "./dist/index.cjs",
|
|
14
|
+
"module": "./dist/index.js",
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": "./dist/index.js",
|
|
19
|
+
"require": "./dist/index.cjs"
|
|
20
|
+
},
|
|
21
|
+
"./tailwindTheme": {
|
|
22
|
+
"import": "./dist/tailwindTheme.js",
|
|
23
|
+
"require": "./dist/tailwindTheme.cjs"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup",
|
|
28
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
29
|
+
"fmt": "prettier --check \"./packages/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
|
|
30
|
+
"fmt:fix": "prettier --write \"./packages/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
|
|
31
|
+
"sb": "storybook dev -p 6006",
|
|
32
|
+
"build-sb": "storybook build"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@radix-ui/react-slot": "^1.1.0",
|
|
36
|
+
"class-variance-authority": "^0.7.0",
|
|
37
|
+
"clsx": "^2.1.1",
|
|
38
|
+
"lucide-react": "^0.424.0",
|
|
39
|
+
"react": "^18.3.1",
|
|
40
|
+
"react-dom": "^18.3.1",
|
|
41
|
+
"tailwind-merge": "^2.4.0"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@chromatic-com/storybook": "^1.6.1",
|
|
45
|
+
"@storybook/addon-essentials": "^8.2.7",
|
|
46
|
+
"@storybook/addon-interactions": "^8.2.7",
|
|
47
|
+
"@storybook/addon-links": "^8.2.7",
|
|
48
|
+
"@storybook/addon-onboarding": "^8.2.7",
|
|
49
|
+
"@storybook/addon-themes": "^8.2.7",
|
|
50
|
+
"@storybook/blocks": "^8.2.7",
|
|
51
|
+
"@storybook/react": "^8.2.7",
|
|
52
|
+
"@storybook/react-vite": "^8.2.7",
|
|
53
|
+
"@storybook/test": "^8.2.7",
|
|
54
|
+
"@types/react": "^18.3.3",
|
|
55
|
+
"@types/react-dom": "^18.3.0",
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^7.15.0",
|
|
57
|
+
"@typescript-eslint/parser": "^7.15.0",
|
|
58
|
+
"@vitejs/plugin-react": "^4.3.0",
|
|
59
|
+
"autoprefixer": "^10.4.20",
|
|
60
|
+
"eslint": "^8.57.0",
|
|
61
|
+
"eslint-config-prettier": "^9.1.0",
|
|
62
|
+
"eslint-plugin-react-hooks": "^4.6.2",
|
|
63
|
+
"eslint-plugin-react-refresh": "^0.4.7",
|
|
64
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
65
|
+
"postcss": "^8.4.40",
|
|
66
|
+
"prettier": "^3.3.3",
|
|
67
|
+
"prettier-plugin-tailwindcss": "^0.6.5",
|
|
68
|
+
"storybook": "^8.2.7",
|
|
69
|
+
"tailwindcss": "^3.4.7",
|
|
70
|
+
"tsup": "^8.2.4",
|
|
71
|
+
"typescript": "^5.2.2",
|
|
72
|
+
"vite": "^5.2.13",
|
|
73
|
+
"vite-tsconfig-paths": "^4.3.2",
|
|
74
|
+
"@types/bun": "latest"
|
|
75
|
+
},
|
|
76
|
+
"description": "This is a e-commerce UI library for CustomAFK",
|
|
77
|
+
"bugs": {
|
|
78
|
+
"url": "https://github.com/QuangPhamvt/e-commerce-ui/issues"
|
|
79
|
+
},
|
|
80
|
+
"author": "CustomAFK",
|
|
81
|
+
"license": "ISC"
|
|
82
|
+
}
|