archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore(theme): twmerge added to avoid repeating the same property

Browse Source
This commit is contained in:
Junior Garcia 2023-01-11 00:31:33 -03:00
parent 71d34dad48
commit fa8fbce91f
9 changed files with 58 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/components/link/src/link.tsx
View File

@ -1,6 +1,6 @@
import {mergeProps} from "@react-aria/utils";
import {forwardRef} from "@nextui-org/system";
import {link, cx} from "@nextui-org/theme";
import {link, twMerge} from "@nextui-org/theme";
import {__DEV__} from "@nextui-org/shared-utils";
import {UseLinkProps, useLink} from "./use-link";
@ -28,22 +28,20 @@ const Link = forwardRef<LinkProps, "a">((props, ref) => {
const Component = as || "a";
const classes = twMerge(
link({
color,
size,
isUnderline,
isBlock,
isDisabled,
disableAnimation,
className,
}),
);
return (
<Component
ref={domRef}
className={cx(
link({
color,
size,
isUnderline,
isBlock,
isDisabled,
disableAnimation,
}),
className,
)}
{...mergeProps(linkProps, otherProps)}
>
<Component ref={domRef} className={classes} {...mergeProps(linkProps, otherProps)}>
<>
{children}
{showAnchorIcon && anchorIcon}

49
packages/components/link/stories/link.stories.tsx
View File

@ -47,49 +47,49 @@ export const CustomVariant = () => {
};
export const Sizes = () => (
<div className="flex flex-wrap space-y-2">
<Link className="w-full" color="primary" href="#" size="xs">
<div className="flex flex-col space-y-2">
<Link color="primary" href="#" size="xs">
{text}
</Link>
<Link className="w-full" color="secondary" href="#" size="sm">
<Link color="secondary" href="#" size="sm">
{text}
</Link>
<Link className="w-full" color="success" href="#" size="md">
<Link color="success" href="#" size="md">
{text}
</Link>
<Link className="w-full" color="warning" href="#" size="xl">
<Link color="warning" href="#" size="xl">
{text}
</Link>
<Link className="w-full text-2xl" color="error" href="#">
<Link className="text-2xl" color="error" href="#">
{text}
</Link>
<Link className="w-full text-2xl text-pink-500" href="#">
<Link className="text-2xl text-pink-500" href="#">
{text}
</Link>
</div>
);
export const Colors = () => (
<div className="flex flex-wrap space-y-2">
<Link className="w-full" color="foreground" href="#">
<div className="flex flex-col space-y-2">
<Link color="foreground" href="#">
{text}
</Link>
<Link className="w-full" color="primary" href="#">
<Link color="primary" href="#">
{text}
</Link>
<Link className="w-full" color="secondary" href="#">
<Link color="secondary" href="#">
{text}
</Link>
<Link className="w-full" color="success" href="#">
<Link color="success" href="#">
{text}
</Link>
<Link className="w-full" color="warning" href="#">
<Link color="warning" href="#">
{text}
</Link>
<Link className="w-full" color="error" href="#">
<Link color="error" href="#">
{text}
</Link>
<Link className="w-full text-teal-600" href="#">
<Link className="text-teal-600" href="#">
{text}
</Link>
</div>
@ -123,21 +123,14 @@ export const isExternal = () => {
};
return (
<div className="flex flex-wrap space-y-2">
<Link isExternal showAnchorIcon className="w-full" href="#">
<div className="flex flex-col space-y-2">
<Link isExternal showAnchorIcon href="#">
{text}
</Link>
<Link isExternal showAnchorIcon className="w-full" color="secondary" href="#">
<Link isExternal showAnchorIcon color="secondary" href="#">
{text}
</Link>
<Link
isExternal
showAnchorIcon
anchorIcon={<CustomLink />}
className="w-full"
color="success"
href="#"
>
<Link isExternal showAnchorIcon anchorIcon={<CustomLink />} color="success" href="#">
{text}
</Link>
</div>
@ -145,7 +138,7 @@ export const isExternal = () => {
};
export const isBlock = () => (
<div className="flex flex-wrap space-y-2">
<div className="flex flex-col space-y-2">
<Link isBlock color="foreground" href="#">
{text}
</Link>
@ -164,7 +157,7 @@ export const isBlock = () => (
<Link isBlock color="error" href="#">
{text}
</Link>
<Link isBlock className="text-pink-600 hover:after:bg-pink-600/25" href="#">
<Link isBlock className="text-pink-500 hover:after:bg-pink-500/25" href="#">
{text}
</Link>
</div>

2
packages/components/storybook/package.json
View File

@ -31,7 +31,7 @@
"build:css": "npx tailwindcss -i ./.storybook/tailwind.css -o ./public/tailwind.css",
"build:storybook": "storybook build",
"watch:css": "npx tailwindcss -i ./.storybook/tailwind.css -o ./public/tailwind.css --watch",
"watch:storybook": "storybook dev -p 6006 --no-manager-cache"
"watch:storybook": "storybook dev -p 6006"
},
"devDependencies": {
"@storybook/addon-a11y": "^6.5.13",

6
packages/components/storybook/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

1
packages/components/storybook/tailwind.config.js
View File

@ -1,5 +1,4 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["../**/src/**/*.{js,jsx,ts,tsx}"],
// Toggle dark-mode based on data-mode="dark"

3
packages/core/theme/package.json
View File

@ -48,7 +48,8 @@
"tailwindcss": "^3.2.4"
},
"dependencies": {
"class-variance-authority": "0.4.0"
"class-variance-authority": "0.4.0",
"tailwind-merge": "^1.8.1"
},
"tsup": {
"clean": true,

6
packages/core/theme/src/components/link/index.ts
View File

@ -4,13 +4,9 @@ const linkBase = withFocusVisible([
"inline-flex",
"relative",
"items-center",
"leading-inherit",
"text-current",
"rounded-lg",
"bg-transparent",
"bg-img-inherit",
"bg-clip-inherit",
"text-fill-inherit",
"w-fit",
]);
const linkVariants = {

3
packages/core/theme/src/utils/cva.ts
View File

@ -1,2 +1,3 @@
export {twMerge} from "tailwind-merge";
export {cva, cx} from "class-variance-authority";
export type {VariantProps} from "class-variance-authority";
export * from "class-variance-authority";

46
pnpm-lock.yaml generated
View File

@ -793,9 +793,11 @@ importers:
specifiers:
class-variance-authority: 0.4.0
clean-package: 2.1.1
tailwind-merge: ^1.8.1
tailwindcss: ^3.2.4
dependencies:
class-variance-authority: 0.4.0
tailwind-merge: 1.8.1
devDependencies:
clean-package: 2.1.1
tailwindcss: 3.2.4
@ -18224,17 +18226,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/postcss-import/14.1.0:
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
engines: {node: '>=10.0.0'}
peerDependencies:
postcss: ^8.0.0
dependencies:
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.1
dev: true
/postcss-import/14.1.0_postcss@8.4.21:
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
engines: {node: '>=10.0.0'}
@ -18247,15 +18238,6 @@ packages:
resolve: 1.22.1
dev: true
/postcss-js/4.0.0:
resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
engines: {node: ^12 || ^14 || >= 16}
peerDependencies:
postcss: ^8.3.3
dependencies:
camelcase-css: 2.0.1
dev: true
/postcss-js/4.0.0_postcss@8.4.21:
resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
engines: {node: ^12 || ^14 || >= 16}
@ -18340,15 +18322,6 @@ packages:
postcss: 8.4.21
dev: true
/postcss-nested/6.0.0:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
dependencies:
postcss-selector-parser: 6.0.11
dev: true
/postcss-nested/6.0.0_postcss@8.4.21:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
@ -20587,12 +20560,14 @@ packages:
strip-ansi: 6.0.1
dev: true
/tailwind-merge/1.8.1:
resolution: {integrity: sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==}
dev: false
/tailwindcss/3.2.4:
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
engines: {node: '>=12.13.0'}
hasBin: true
peerDependencies:
postcss: ^8.0.9
dependencies:
arg: 5.0.2
chokidar: 3.5.3
@ -20608,10 +20583,11 @@ packages:
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss-import: 14.1.0
postcss-js: 4.0.0
postcss-load-config: 3.1.4
postcss-nested: 6.0.0
postcss: 8.4.21
postcss-import: 14.1.0_postcss@8.4.21
postcss-js: 4.0.0_postcss@8.4.21
postcss-load-config: 3.1.4_postcss@8.4.21
postcss-nested: 6.0.0_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
quick-lru: 5.1.1