Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrians5j
adrians5j committed Jan 21, 2025
1 parent 2e36e41 commit fde4418
Show file tree
Hide file tree
Showing 22 changed files with 228 additions and 372 deletions.
2 changes: 1 addition & 1 deletion packages/admin-ui/src/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const DecoratableSelect = ({
const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);

return (
<div className={"w-full"}>
<div className={"wby-w-full"}>
<FormComponentLabel text={label} required={required} disabled={disabled} />
<FormComponentDescription text={description} />
<SelectPrimitive {...props} disabled={disabled} />
Expand Down
6 changes: 3 additions & 3 deletions packages/admin-ui/src/Select/SelectPrimitive.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,18 +305,18 @@ export const WithExternalValueControl: Story = {
render: args => {
const [value, setValue] = useState(args.value);
return (
<div className={"w-full"}>
<div className={"wby-w-full"}>
<div>
<SelectPrimitive
{...args}
value={value}
onValueChange={value => setValue(value)}
/>
</div>
<div className={"mt-4 text-center"}>
<div className={"wby-mt-4 wby-text-center"}>
<Button text={"Reset"} onClick={() => setValue("")} />
</div>
<div className={"mt-4 text-center"}>
<div className={"wby-mt-4 wby-text-center"}>
Current selected value: <pre>{value}</pre>
</div>
</div>
Expand Down
104 changes: 52 additions & 52 deletions packages/admin-ui/src/Select/SelectPrimitive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type SelectIconProps = {

const SelectIcon = ({ icon }: SelectIconProps) => {
return (
<SelectPrimitives.Icon asChild className={"h-md w-md"}>
<SelectPrimitives.Icon asChild className={"wby-h-md wby-w-md"}>
{React.cloneElement(icon)}
</SelectPrimitives.Icon>
);
Expand All @@ -37,52 +37,52 @@ const SelectIcon = ({ icon }: SelectIconProps) => {
*/
const triggerVariants = cva(
[
"w-full flex items-center justify-between gap-sm border-sm text-md relative",
"focus:outline-none",
"disabled:pointer-events-none"
"wby-w-full wby-flex wby-items-center wby-justify-between wby-gap-sm wby-border-sm wby-text-md wby-relative",
"wby-focus:outline-none",
"wby-disabled:pointer-events-none"
],
{
variants: {
variant: {
primary: [
"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong",
"hover:border-neutral-strong",
"focus:border-neutral-black",
"disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled disabled:fill-neutral-disabled"
"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong wby-placeholder:text-neutral-dimmed wby-fill-neutral-xstrong",
"wby-hover:border-neutral-strong",
"wby-focus:border-neutral-black",
"wby-disabled:bg-neutral-disabled wby-disabled:border-neutral-dimmed wby-disabled:text-neutral-disabled wby-disabled:placeholder:text-neutral-disabled wby-disabled:fill-neutral-disabled"
],
secondary: [
"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-muted fill-neutral-xstrong",
"hover:bg-neutral-dimmed",
"focus:border-neutral-black focus:bg-neutral-base",
"disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled disabled:fill-neutral-disabled"
"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong wby-placeholder:text-neutral-muted wby-fill-neutral-xstrong",
"wby-hover:bg-neutral-dimmed",
"wby-focus:border-neutral-black wby-focus:bg-neutral-base",
"wby-disabled:bg-neutral-disabled wby-disabled:border-neutral-dimmed wby-disabled:text-neutral-disabled wby-disabled:placeholder:text-neutral-disabled wby-disabled:fill-neutral-disabled"
],
ghost: [
"bg-neutral-base border-transparent text-neutral-strong placeholder:text-neutral-dimmed",
"hover:bg-neutral-light",
"focus:bg-neutral-light",
"disabled:bg-neutral-disabled disabled:border-neutral-dimmed disabled:text-neutral-disabled disabled:placeholder:text-neutral-disabled disabled:fill-neutral-disabled"
"wby-bg-neutral-base wby-border-transparent wby-text-neutral-strong wby-placeholder:text-neutral-dimmed",
"wby-hover:bg-neutral-light",
"wby-focus:bg-neutral-light",
"wby-disabled:bg-neutral-disabled wby-disabled:border-neutral-dimmed wby-disabled:text-neutral-disabled wby-disabled:placeholder:text-neutral-disabled wby-disabled:fill-neutral-disabled"
]
},
size: {
md: [
"rounded-md",
"py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
"wby-rounded-md",
"wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
],
lg: [
"rounded-md",
"py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
"wby-rounded-md",
"wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"
],
xl: [
"rounded-lg leading-6",
"py-[calc(theme(padding.md)-theme(borderWidth.sm))] px-[calc(theme(padding.md)-theme(borderWidth.sm))]"
"wby-rounded-lg wby-leading-6",
"wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"
]
},
invalid: {
true: [
"border-destructive-default",
"hover:border-destructive-default",
"focus:border-destructive-default",
"disabled:border-destructive-default"
"wby-border-destructive-default",
"wby-hover:border-destructive-default",
"wby-focus:border-destructive-default",
"wby-disabled:border-destructive-default"
]
}
},
Expand All @@ -92,20 +92,20 @@ const triggerVariants = cva(
variant: "secondary",
invalid: true,
class: [
"bg-neutral-base border-destructive-default",
"hover:bg-neutral-dimmed hover:border-destructive-default",
"focus:bg-neutral-base focus:border-destructive-default",
"disabled:bg-neutral-disabled disabled:border-destructive-default"
"wby-bg-neutral-base wby-border-destructive-default",
"wby-hover:bg-neutral-dimmed wby-hover:border-destructive-default",
"wby-focus:bg-neutral-base wby-focus:border-destructive-default",
"wby-disabled:bg-neutral-disabled wby-disabled:border-destructive-default"
]
},
{
variant: "ghost",
invalid: true,
class: [
"border-none bg-destructive-subtle",
"hover:bg-destructive-subtle",
"focus:bg-destructive-subtle",
"disabled:bg-destructive-subtle"
"wby-border-none wby-bg-destructive-subtle",
"wby-hover:bg-destructive-subtle",
"wby-focus:bg-destructive-subtle",
"wby-disabled:bg-destructive-subtle"
]
}
],
Expand Down Expand Up @@ -170,12 +170,12 @@ const DecoratableSelectScrollUpButton = React.forwardRef<
<SelectPrimitives.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center pb-sm fill-neutral-xstrong",
"wby-flex wby-cursor-default wby-items-center wby-justify-center wby-pb-sm wby-fill-neutral-xstrong",
className
)}
{...props}
>
<ChevronUp className="h-md w-md" />
<ChevronUp className="wby-h-md wby-w-md" />
</SelectPrimitives.ScrollUpButton>
));
DecoratableSelectScrollUpButton.displayName = SelectPrimitives.ScrollUpButton.displayName;
Expand All @@ -195,12 +195,12 @@ const DecoratableSelectScrollDownButton = React.forwardRef<
<SelectPrimitives.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center pt-sm fill-neutral-xstrong",
"wby-flex wby-cursor-default wby-items-center wby-justify-center wby-pt-sm wby-fill-neutral-xstrong",
className
)}
{...props}
>
<ChevronDown className="h-md w-md" />
<ChevronDown className="wby-h-md wby-w-md" />
</SelectPrimitives.ScrollDownButton>
));
DecoratableSelectScrollDownButton.displayName = SelectPrimitives.ScrollDownButton.displayName;
Expand All @@ -214,9 +214,9 @@ const SelectScrollDownButton = makeDecoratable(
* SelectContent
*/
const selectContentVariants = cva([
"relative z-50 max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
"wby-relative wby-z-50 wby-max-h-96 wby-min-w-56 wby-shadow-lg wby-py-sm wby-overflow-hidden wby-rounded-sm wby-border-sm wby-border-neutral-muted wby-bg-neutral-base wby-text-neutral-strong",
"wby-data-[state=open]:animate-in wby-data-[state=closed]:animate-out wby-data-[state=closed]:fade-out-0 wby-data-[state=open]:fade-in-0 wby-data-[state=closed]:zoom-out-95 wby-data-[state=open]:zoom-in-95 wby-data-[side=bottom]:slide-in-from-top-2 wby-data-[side=left]:slide-in-from-right-2 wby-data-[side=right]:slide-in-from-left-2 wby-data-[side=top]:slide-in-from-bottom-2",
"wby-data-[side=bottom]:translate-y-1 wby-data-[side=left]:-translate-x-1 wby-data-[side=right]:translate-x-1 wby-data-[side=top]:-translate-y-1"
]);

interface SelectContentProps
Expand All @@ -237,8 +237,8 @@ const DecoratableSelectContent = React.forwardRef<
<SelectScrollUpButton />
<SelectPrimitives.Viewport
className={cn([
"py-xs",
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
"wby-py-xs",
"wby-h-[var(--radix-select-trigger-height)] wby-w-full wby-min-w-[var(--radix-select-trigger-width)]"
])}
>
{children}
Expand All @@ -261,7 +261,7 @@ const DecoratableSelectLabel = React.forwardRef<
<SelectPrimitives.Label
ref={ref}
className={cn(
["py-sm px-md text-neutral-strong text-sm font-semibold uppercase"],
["wby-py-sm wby-px-md wby-text-neutral-strong wby-text-sm wby-font-semibold wby-uppercase"],
className
)}
{...props}
Expand All @@ -282,19 +282,19 @@ const DecoratableSelectItem = React.forwardRef<
ref={ref}
className={cn(
[
"flex items-center justify-between gap-sm-extra cursor-default select-none rounded-sm p-sm mx-sm text-md outline-none",
"bg-neutral-base text-neutral-primary fill-neutral-xstrong",
"focus:bg-neutral-dimmed",
"data-[disabled]:text-neutral-disabled data-[disabled]:cursor-not-allowed",
"data-[state=checked]:font-semibold"
"wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-cursor-default wby-select-none wby-rounded-sm wby-p-sm wby-mx-sm wby-text-md wby-outline-none",
"wby-bg-neutral-base wby-text-neutral-primary wby-fill-neutral-xstrong",
"wby-focus:bg-neutral-dimmed",
"wby-data-[disabled]:text-neutral-disabled wby-data-[disabled]:cursor-not-allowed",
"wby-data-[state=checked]:font-semibold"
],
className
)}
{...props}
>
<SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
<SelectPrimitives.ItemIndicator>
<Check className="h-md w-h-md" />
<Check className="wby-h-md wby-w-h-md" />
</SelectPrimitives.ItemIndicator>
</SelectPrimitives.Item>
));
Expand All @@ -311,7 +311,7 @@ const DecoratableSelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitives.Separator
ref={ref}
className={cn("-mx-sm my-sm h-px bg-neutral-strong", className)}
className={cn("-wby-mx-sm wby-my-sm wby-h-px wby-bg-neutral-strong", className)}
{...props}
/>
));
Expand Down Expand Up @@ -382,7 +382,7 @@ const DecoratableSelectTrigger = ({
endIcon={endIcon}
resetButton={resetButton}
>
<div className={"flex-1 text-left truncate"}>
<div className={"wby-flex-1 wby-text-left wby-truncate"}>
<SelectValue {...props} />
</div>
</Trigger>
Expand Down
34 changes: 17 additions & 17 deletions packages/admin-ui/src/Separator/Separator.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const meta: Meta<typeof Separator> = {
argTypes: {},
decorators: [
Story => (
<div className="w-[700px]">
<div className="wby-w-[700px]">
<Story />
</div>
)
Expand All @@ -30,16 +30,16 @@ export const Default: Story = {
render: props => {
return (
<div>
<div className="space-y-1">
<div className="wby-space-y-1">
<Heading level={6} text={"This is a heading."} />
<Text
text={"This is a short description here"}
size="sm"
className={"text-neutral-strong"}
className={"wby-text-neutral-strong"}
/>
</div>
<Separator margin={props.margin} variant={props.variant} />
<div className="flex items-center h-6 text-sm">
<div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
</div>
</div>
Expand All @@ -61,16 +61,16 @@ export const VerticalAndHorizontal: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<div className="wby-space-y-1">
<Heading level={6} text={"This is a heading."} />
<Text
text={"This is a short description here"}
size="sm"
className={"text-neutral-strong"}
className={"wby-text-neutral-strong"}
/>
</div>
<Separator margin={"lg"} />
<div className="flex items-center h-6 text-sm">
<div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
<Separator orientation="vertical" margin={"lg"} />
<Text text={"This is text 2."} />
Expand All @@ -89,16 +89,16 @@ export const HorizontalOrientation: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<div className="wby-space-y-1">
<Heading level={6} text={"This is a heading."} />
<Text
text={"This is a short description here"}
size="sm"
className={"text-neutral-strong"}
className={"wby-text-neutral-strong"}
/>
</div>
<Separator margin={"lg"} />
<div className="flex items-center h-6 text-sm">
<div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
</div>
</div>
Expand All @@ -112,7 +112,7 @@ export const VerticalOrientation: Story = {
},
render: () => {
return (
<div className="flex justify-center h-6 text-sm">
<div className="wby-flex wby-justify-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
<Separator orientation="vertical" margin={"lg"} />
<Text text={"This is text 2."} />
Expand All @@ -127,16 +127,16 @@ export const LessMargin: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<div className="wby-space-y-1">
<Heading level={6} text={"This is a heading."} />
<Text
text={"This is a short description here"}
size="sm"
className={"text-neutral-strong"}
className={"wby-text-neutral-strong"}
/>
</div>
<Separator margin={"md"} />
<div className="flex items-center h-6 text-sm">
<div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
<Separator orientation="vertical" margin={"md"} />
<Text text={"This is text 2."} />
Expand All @@ -152,16 +152,16 @@ export const MoreMargin: Story = {
render: () => {
return (
<div>
<div className="space-y-1">
<div className="wby-space-y-1">
<Heading level={6} text={"This is a heading."} />
<Text
text={"This is a short description here"}
size="sm"
className={"text-neutral-strong"}
className={"wby-text-neutral-strong"}
/>
</div>
<Separator margin={"xl"} />
<div className="flex items-center h-6 text-sm">
<div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
<Text text={"This is text 1."} />
<Separator orientation="vertical" margin={"xl"} />
<Text text={"This is text 2."} />
Expand Down
Loading

0 comments on commit fde4418

Please sign in to comment.