From 021643af5405fbbe35924bc93121d3c2e7006d3d Mon Sep 17 00:00:00 2001 From: Tong Li Date: Sun, 24 Nov 2024 22:40:19 +1100 Subject: [PATCH 1/2] Revert "feat: add tailwind prefixes" This reverts commit 97e84cf94951cff7e7e787f49acb155e123ed5e5. --- .changeset/mean-panthers-tap.md | 5 ++++ src/components/Avatar/Avatar.css | 16 ++++++------- src/components/Avatar/Avatar.stories.tsx | 2 +- src/components/Avatar/AvatarGroup.css | 2 +- src/components/Avatar/AvatarGroup.stories.tsx | 8 +++---- src/components/Avatar/AvatarGroup.tsx | 3 +-- src/components/Button/Button.css | 18 +++++++-------- src/components/Button/IconButton.css | 2 +- src/components/Chip/Chip.css | 2 +- src/components/Dialog/Dialog.css | 23 +++++++++++++++++++ src/components/Dialog/Dialog.stories.tsx | 8 +++---- src/components/Dialog/Dialog.tsx | 3 ++- .../Dialog/MobileDialog.stories.tsx | 8 +++---- src/components/Dialog/MobileDialog.tsx | 3 ++- src/components/Dialog/components/Backdrop.css | 2 +- src/components/Dialog/components/Backdrop.tsx | 4 ++-- src/components/Dialog/index.css | 16 ++++++------- src/components/Dialog/index.ts | 2 -- src/components/Heading/Heading.css | 12 +++++----- src/components/Input/components/Toggle.css | 18 +++++++-------- src/components/Text/Text.css | 12 +++++----- src/components/Text/Text.stories.tsx | 14 +++++------ src/index.css | 6 ++--- tailwind.config.js | 1 - 24 files changed, 108 insertions(+), 82 deletions(-) create mode 100644 .changeset/mean-panthers-tap.md create mode 100644 src/components/Dialog/Dialog.css diff --git a/.changeset/mean-panthers-tap.md b/.changeset/mean-panthers-tap.md new file mode 100644 index 0000000..54dc55f --- /dev/null +++ b/.changeset/mean-panthers-tap.md @@ -0,0 +1,5 @@ +--- +"@babylonlabs-io/bbn-core-ui": patch +--- + +Revert prefix change diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index c3a3045..cfd8b99 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -1,31 +1,31 @@ .bbn-avatar { - @apply b-inline-flex b-items-center b-justify-center b-overflow-hidden; + @apply inline-flex items-center justify-center overflow-hidden; &-img { - @apply b-size-full b-object-cover b-object-center; + @apply size-full object-cover object-center; } &-tiny { - @apply b-size-[1.125rem]; + @apply size-[1.125rem]; } &-small { - @apply b-size-6; + @apply size-6; } &-medium { - @apply b-size-8; + @apply size-8; } &-large { - @apply b-size-10; + @apply size-10; } &-circular { - @apply b-rounded-full; + @apply rounded-full; } &-rounded { - @apply b-rounded; + @apply rounded; } } diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index f0572bc..884c436 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -20,7 +20,7 @@ export const Image: Story = { export const Text: Story = { args: { - className: "b-bg-primary b-text-primary-contrast", + className: "bg-primary text-primary-contrast", children: "DT", }, }; diff --git a/src/components/Avatar/AvatarGroup.css b/src/components/Avatar/AvatarGroup.css index 1d61f4b..790069b 100644 --- a/src/components/Avatar/AvatarGroup.css +++ b/src/components/Avatar/AvatarGroup.css @@ -1,3 +1,3 @@ .bbn-avatar-group { - @apply b-flex -b-space-x-2.5; + @apply flex -space-x-2.5; } diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 8ba7727..b71506e 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -14,17 +14,17 @@ type Story = StoryObj; export const Default: Story = { args: { max: 3, - avatarClassName: "b-bg-primary/50 b-text-primary-contrast", + avatarClassName: "bg-primary/50 text-primary-contrast", variant: "circular", children: [ , , - DT, - JK, + DT, + JK, ], }, }; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 9d36561..1e515a3 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,9 +1,8 @@ import { type PropsWithChildren, Children, cloneElement, isValidElement } from "react"; -import { twJoin, extendTailwindMerge } from "tailwind-merge"; +import { twJoin, twMerge } from "tailwind-merge"; import "./AvatarGroup.css"; import { type AvatarProps, Avatar } from "./Avatar"; -const twMerge = extendTailwindMerge({ prefix: "b-" }); export interface AvatarGroupProps extends PropsWithChildren, AvatarProps { max?: number; diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 993a927..57508d3 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -1,39 +1,39 @@ .bbn-btn { - @apply b-rounded b-tracking-0.4 b-transition-colors b-duration-200; + @apply rounded tracking-0.4 transition-colors duration-200; &-fluid { - @apply b-w-full; + @apply w-full; } &-contained { &.bbn-btn-primary { - @apply b-bg-primary-light b-text-secondary-contrast hover:b-bg-primary-main disabled:b-bg-primary/12; + @apply bg-primary-light text-secondary-contrast hover:bg-primary-main disabled:bg-primary/12; } &.bbn-btn-secondary { - @apply b-bg-secondary-main b-text-secondary-contrast hover:b-bg-secondary-dark disabled:b-bg-primary/12; + @apply bg-secondary-main text-secondary-contrast hover:bg-secondary-dark disabled:bg-primary/12; } } &-outlined { &.bbn-btn-primary { - @apply b-border b-border-primary-light b-text-primary-main hover:b-border-primary hover:b-bg-primary/10; + @apply border border-primary-light text-primary-main hover:border-primary hover:bg-primary/10; } &.bbn-btn-secondary { - @apply b-border b-border-secondary-main b-text-secondary-main hover:b-border-secondary-light hover:b-bg-secondary-light/10; + @apply border border-secondary-main text-secondary-main hover:border-secondary-light hover:bg-secondary-light/10; } } &-large { - @apply b-h-10 b-px-6 b-text-base b-tracking-0.5; + @apply h-10 px-6 text-base tracking-0.5; } &-medium { - @apply b-h-9 b-px-4 b-text-sm b-tracking-0.5; + @apply h-9 px-4 text-sm tracking-0.5; } &-small { - @apply b-h-8 b-px-2.5 b-text-xs b-tracking-0.5; + @apply h-8 px-2.5 text-xs tracking-0.5; } } diff --git a/src/components/Button/IconButton.css b/src/components/Button/IconButton.css index 746a523..a1fc17f 100644 --- a/src/components/Button/IconButton.css +++ b/src/components/Button/IconButton.css @@ -1,3 +1,3 @@ .bbn-btn-icon { - @apply b-inline-flex b-size-10 b-items-center b-justify-center b-rounded b-border b-border-current b-text-primary-light; + @apply inline-flex size-10 items-center justify-center rounded border border-current text-primary-light; } diff --git a/src/components/Chip/Chip.css b/src/components/Chip/Chip.css index 91c14f1..ca95fdc 100644 --- a/src/components/Chip/Chip.css +++ b/src/components/Chip/Chip.css @@ -1,3 +1,3 @@ .bbn-chip { - @apply b-inline-flex b-items-center b-justify-center b-rounded-full b-bg-primary-contrast b-px-2.5 b-py-1 b-text-[0.5rem] b-leading-4 b-tracking-0.4 b-text-primary-light; + @apply inline-flex items-center justify-center rounded-full bg-primary-contrast px-2.5 py-1 text-[0.5rem] leading-4 tracking-0.4 text-primary-light; } diff --git a/src/components/Dialog/Dialog.css b/src/components/Dialog/Dialog.css new file mode 100644 index 0000000..42aeec2 --- /dev/null +++ b/src/components/Dialog/Dialog.css @@ -0,0 +1,23 @@ +.bbn-dialog { + @apply rounded border border-primary-light/20 bg-[#ffffff] p-6; + + &-wrapper { + @apply fixed left-1/2 top-1/2 z-50 max-w-full -translate-x-1/2 -translate-y-1/2; + } + + &-body { + @apply custom-scrollbar min-h-0 flex-1 overflow-y-auto; + } + + &-header { + @apply flex items-center justify-between gap-2; + } + + &-footer { + @apply shrink-0; + } + + &-mobile { + @apply fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-3xl bg-[#ffffff] px-4 pb-4 pt-6; + } +} diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx index 1bc7e57..c0b384c 100644 --- a/src/components/Dialog/Dialog.stories.tsx +++ b/src/components/Dialog/Dialog.stories.tsx @@ -42,7 +42,7 @@ export const Default: Story = { > { setVisibility(false); }} @@ -50,8 +50,8 @@ export const Default: Story = { Subtitle - - + + This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions (“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause @@ -60,7 +60,7 @@ export const Default: Story = { Chose one: (you can change this later) - + diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index 8bae29b..889a726 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -1,5 +1,6 @@ import { type DetailedHTMLProps, type HTMLAttributes } from "react"; import { twJoin } from "tailwind-merge"; +import "./Dialog.css"; import { Portal } from "@/components/Portal"; import { useModalManager } from "@/hooks/useModalManager"; @@ -25,7 +26,7 @@ export const Dialog = ({
{children} diff --git a/src/components/Dialog/MobileDialog.stories.tsx b/src/components/Dialog/MobileDialog.stories.tsx index 036064b..0c20f44 100644 --- a/src/components/Dialog/MobileDialog.stories.tsx +++ b/src/components/Dialog/MobileDialog.stories.tsx @@ -41,7 +41,7 @@ export const Default: Story = { > { setVisibility(false); }} @@ -49,8 +49,8 @@ export const Default: Story = { Subtitle - - + + This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions (“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause @@ -59,7 +59,7 @@ export const Default: Story = { Chose one: (you can change this later) - + diff --git a/src/components/Dialog/MobileDialog.tsx b/src/components/Dialog/MobileDialog.tsx index d1550a6..089617f 100644 --- a/src/components/Dialog/MobileDialog.tsx +++ b/src/components/Dialog/MobileDialog.tsx @@ -1,5 +1,6 @@ import { type DetailedHTMLProps, type HTMLAttributes } from "react"; import { twJoin } from "tailwind-merge"; +import "./Dialog.css"; import { Portal } from "@/components/Portal"; import { useModalManager } from "@/hooks/useModalManager"; @@ -19,7 +20,7 @@ export const MobileDialog = ({ children, open = false, className, onClose, ...re {...restProps} className={twJoin( "bbn-dialog-mobile", - open ? "b-animate-mobile-modal-in" : "b-animate-mobile-modal-out", + open ? "animate-mobile-modal-in" : "animate-mobile-modal-out", className, )} onAnimationEnd={unmount} diff --git a/src/components/Dialog/components/Backdrop.css b/src/components/Dialog/components/Backdrop.css index 5e4167c..da46402 100644 --- a/src/components/Dialog/components/Backdrop.css +++ b/src/components/Dialog/components/Backdrop.css @@ -1,3 +1,3 @@ .bbn-backdrop { - @apply b-fixed b-inset-0 b-z-40 b-flex b-items-center b-justify-center b-bg-primary/50 b-transition-opacity b-duration-500; + @apply fixed inset-0 z-40 flex items-center justify-center bg-primary/50 transition-opacity duration-500; } diff --git a/src/components/Dialog/components/Backdrop.tsx b/src/components/Dialog/components/Backdrop.tsx index dc21ce1..adc8af6 100644 --- a/src/components/Dialog/components/Backdrop.tsx +++ b/src/components/Dialog/components/Backdrop.tsx @@ -10,8 +10,8 @@ export const Backdrop = ({ open = false, ...props }: BackdropProps) => (
diff --git a/src/components/Dialog/index.css b/src/components/Dialog/index.css index ccbfeaf..d9ab95f 100644 --- a/src/components/Dialog/index.css +++ b/src/components/Dialog/index.css @@ -1,27 +1,27 @@ .bbn-dialog { - @apply b-rounded b-border b-border-primary-light/20 b-bg-[#ffffff] b-p-6; + @apply rounded border border-primary-light/20 bg-[#ffffff] p-6; &-wrapper { - @apply b-fixed b-left-1/2 b-top-1/2 b-z-50 b-max-w-full -b-translate-x-1/2 -b-translate-y-1/2; + @apply fixed left-1/2 top-1/2 z-50 max-w-full -translate-x-1/2 -translate-y-1/2; } &-body { - @apply custom-scrollbar b-min-h-0 b-flex-1 b-overflow-y-auto; + @apply custom-scrollbar min-h-0 flex-1 overflow-y-auto; } &-header { - @apply b-block; + @apply block; } &-title { - @apply b-flex b-items-center b-justify-between b-gap-2; + @apply flex items-center justify-between gap-2; } &-footer { - @apply b-shrink-0; + @apply shrink-0; } &-mobile { - @apply b-fixed b-inset-x-0 b-bottom-0 b-z-50 b-flex b-flex-col b-rounded-t-3xl b-bg-[#ffffff] b-px-4 b-pb-4 b-pt-6; + @apply fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-3xl bg-[#ffffff] px-4 pb-4 pt-6; } -} +} \ No newline at end of file diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts index 9e37ef8..6765fdb 100644 --- a/src/components/Dialog/index.ts +++ b/src/components/Dialog/index.ts @@ -1,5 +1,3 @@ -import "./index.css"; - export * from "./Dialog"; export * from "./MobileDialog"; export * from "./components/DialogHeader"; diff --git a/src/components/Heading/Heading.css b/src/components/Heading/Heading.css index 0d6bcf1..f53a863 100644 --- a/src/components/Heading/Heading.css +++ b/src/components/Heading/Heading.css @@ -1,20 +1,20 @@ .bbn { &-h1 { - @apply b-text-8xl b-leading-[7rem]; + @apply text-8xl leading-[7rem]; } &-h2 { - @apply b-text-6xl b-leading-[4.5rem]; + @apply text-6xl leading-[4.5rem]; } &-h3 { - @apply b-text-5xl b-leading-[3.5rem]; + @apply text-5xl leading-[3.5rem]; } &-h4 { - @apply b-text-[2.125rem] b-leading-[2.625rem] b-tracking-0.25; + @apply text-[2.125rem] leading-[2.625rem] tracking-0.25; } &-h5 { - @apply b-text-2xl; + @apply text-2xl; } &-h6 { - @apply b-text-xl b-leading-8 b-tracking-0.15; + @apply text-xl leading-8 tracking-0.15; } } diff --git a/src/components/Input/components/Toggle.css b/src/components/Input/components/Toggle.css index 3827506..a774053 100644 --- a/src/components/Input/components/Toggle.css +++ b/src/components/Input/components/Toggle.css @@ -1,39 +1,39 @@ .bbn-toggle { - @apply b-relative b-inline-block b-transition-colors b-duration-200; + @apply relative inline-block transition-colors duration-200; &:not(&-disabled) { - @apply b-text-primary-light hover:b-text-primary-main; + @apply text-primary-light hover:text-primary-main; } &-disabled { - @apply b-text-primary/12; + @apply text-primary/12; } } .bbn-toggle-input { - @apply b-absolute b-inset-0 b-z-[1] b-opacity-0; + @apply absolute inset-0 z-[1] opacity-0; &:not(:disabled) { - @apply b-cursor-pointer; + @apply cursor-pointer; } &:disabled { - @apply b-cursor-default; + @apply cursor-default; } } .bbn-toggle-label { - @apply b-inline-flex b-h-5 b-items-center b-gap-4; + @apply inline-flex h-5 items-center gap-4; } .bbn-toggle-left { &.bbn-toggle-label { - @apply b-flex-row; + @apply flex-row; } } .bbn-toggle-right { &.bbn-toggle-label { - @apply b-flex-row-reverse; + @apply flex-row-reverse; } } diff --git a/src/components/Text/Text.css b/src/components/Text/Text.css index 8d43e99..d6ec6d6 100644 --- a/src/components/Text/Text.css +++ b/src/components/Text/Text.css @@ -1,25 +1,25 @@ .bbn-text { &-body1 { - @apply b-text-base b-tracking-0.15; + @apply text-base tracking-0.15; } &-body2 { - @apply b-text-sm b-tracking-0.15; + @apply text-sm tracking-0.15; } &-subtitle1 { - @apply b-text-base b-leading-7 b-tracking-0.15; + @apply text-base leading-7 tracking-0.15; } &-subtitle2 { - @apply b-text-sm b-font-bold b-leading-normal b-tracking-0.15; + @apply text-sm font-bold leading-normal tracking-0.15; } &-overline { - @apply b-text-xs b-uppercase b-leading-8 b-tracking-1; + @apply text-xs uppercase leading-8 tracking-1; } &-caption { - @apply b-text-xs b-tracking-0.4; + @apply text-xs tracking-0.4; } } diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx index 69adcd2..46434ad 100644 --- a/src/components/Text/Text.stories.tsx +++ b/src/components/Text/Text.stories.tsx @@ -16,23 +16,23 @@ export const Default: Story = { args.variant ? ( Text--{args.variant} ) : ( -
- +
+ Text--Body1 - + Text--Body2 - + Text--subtitle1 - + Text--subtitle2 - + Text--overline - + Text--caption
diff --git a/src/index.css b/src/index.css index 6b36827..eeba232 100644 --- a/src/index.css +++ b/src/index.css @@ -20,10 +20,10 @@ } .custom-scrollbar::-webkit-scrollbar-thumb { - @apply b-bg-primary; + @apply bg-primary; } .custom-scrollbar::-webkit-scrollbar-track { - @apply b-bg-primary; + @apply bg-primary; } -} +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 5f7c65d..3277619 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -140,6 +140,5 @@ export default { }, }, }, - prefix: "b-", plugins: [], }; From cf8bcb3128a1fa6d11cfd3c798a799fbac432973 Mon Sep 17 00:00:00 2001 From: Tong Li Date: Sun, 24 Nov 2024 22:44:42 +1100 Subject: [PATCH 2/2] revert some accidental changes --- src/components/Dialog/Dialog.css | 23 ----------------------- src/components/Dialog/MobileDialog.tsx | 1 - src/components/Dialog/index.ts | 2 ++ 3 files changed, 2 insertions(+), 24 deletions(-) delete mode 100644 src/components/Dialog/Dialog.css diff --git a/src/components/Dialog/Dialog.css b/src/components/Dialog/Dialog.css deleted file mode 100644 index 42aeec2..0000000 --- a/src/components/Dialog/Dialog.css +++ /dev/null @@ -1,23 +0,0 @@ -.bbn-dialog { - @apply rounded border border-primary-light/20 bg-[#ffffff] p-6; - - &-wrapper { - @apply fixed left-1/2 top-1/2 z-50 max-w-full -translate-x-1/2 -translate-y-1/2; - } - - &-body { - @apply custom-scrollbar min-h-0 flex-1 overflow-y-auto; - } - - &-header { - @apply flex items-center justify-between gap-2; - } - - &-footer { - @apply shrink-0; - } - - &-mobile { - @apply fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-3xl bg-[#ffffff] px-4 pb-4 pt-6; - } -} diff --git a/src/components/Dialog/MobileDialog.tsx b/src/components/Dialog/MobileDialog.tsx index 089617f..d77592c 100644 --- a/src/components/Dialog/MobileDialog.tsx +++ b/src/components/Dialog/MobileDialog.tsx @@ -1,6 +1,5 @@ import { type DetailedHTMLProps, type HTMLAttributes } from "react"; import { twJoin } from "tailwind-merge"; -import "./Dialog.css"; import { Portal } from "@/components/Portal"; import { useModalManager } from "@/hooks/useModalManager"; diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts index 6765fdb..9e37ef8 100644 --- a/src/components/Dialog/index.ts +++ b/src/components/Dialog/index.ts @@ -1,3 +1,5 @@ +import "./index.css"; + export * from "./Dialog"; export * from "./MobileDialog"; export * from "./components/DialogHeader";