awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-16 15:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: renamed old frontend and fixed some minor bugs

Browse Source
This commit is contained in:
=
2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Select/Select.stories.tsx
-113
View File
@@ -1,113 +0,0 @@
import { useEffect, useState } from "react";
import { SelectProps } from "@radix-ui/react-select";
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta, StoryObj } from "@storybook/react";
import { Select, SelectItem } from "./Select";
const meta: Meta<typeof Select> = {
title: "Components/Select",
component: Select,
tags: ["v2"],
argTypes: {
placeholder: {
defaultValue: "Type something..."
}
}
};
export default meta;
type Story = StoryObj<typeof Select>;
export const Basic: Story = {
render: (args) => (
<div className="">
<Select placeholder="Type anything..." className="w-72" {...args}>
<SelectItem value="1">John</SelectItem>
<SelectItem value="2">Peter</SelectItem>
<SelectItem value="3">Suzy</SelectItem>
</Select>
</div>
)
};
const Controlled = (args: SelectProps) => {
const [isOpen, setIsOpen] = useState(false);
const [selected, setSelected] = useState("");
return (
<div className="">
<Select
defaultValue="1"
className="w-72"
open={isOpen}
onValueChange={(val) => setSelected(val)}
value={selected}
onOpenChange={(open) => setIsOpen(open)}
{...args}
>
<SelectItem value="1">John</SelectItem>
<SelectItem value="2">Peter</SelectItem>
<SelectItem value="3">Suzy</SelectItem>
</Select>
</div>
);
};
export const Control: Story = {
render: (args) => <Controlled {...args} />
};
export const Disabled: Story = {
render: (args) => (
<div className="">
<Select defaultValue="1" className="w-72" {...args}>
<SelectItem value="1">John</SelectItem>
<SelectItem value="2" isDisabled>
Peter
</SelectItem>
<SelectItem value="3">Suzy</SelectItem>
</Select>
</div>
)
};
export const Loading: Story = {
render: (args) => (
<div className="">
<Select defaultValue="1" className="w-72" isLoading {...args}>
<SelectItem value="1">John</SelectItem>
<SelectItem value="2">Peter</SelectItem>
<SelectItem value="3">Suzy</SelectItem>
</Select>
</div>
)
};
const AsyncSelectOptions = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// eslint-disable-next-line no-new
new Promise<void>((resolve): void => {
setTimeout(() => {
setIsLoading(false);
resolve();
}, 1000);
});
}, []);
return (
<div className="">
<Select placeholder="Hello" className="w-72" isLoading={isLoading}>
<SelectItem value="1">John</SelectItem>
<SelectItem value="2">Peter</SelectItem>
<SelectItem value="3">Suzy</SelectItem>
</Select>
</div>
);
};
export const Async: Story = {
render: (args) => <AsyncSelectOptions {...args} />
};
frontend/src/components/v2/Select/Select.tsx
+3 -8
View File
@@ -52,8 +52,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
<SelectPrimitive.Trigger
ref={ref}
className={twMerge(
`inline-flex items-center justify-between rounded-md border border-mineshaft-600
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-400`,
"inline-flex items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-400",
className,
isDisabled && "cursor-not-allowed opacity-50"
)}
@@ -123,9 +122,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
<SelectPrimitive.Item
{...props}
className={twMerge(
`relative mb-0.5 flex
cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2
pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
"relative mb-0.5 flex cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
isSelected && "bg-primary",
isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:!bg-transparent",
className
@@ -160,9 +157,7 @@ export const SelectClear = forwardRef<HTMLDivElement, SelectClearProps>(
onSelect={() => onClear()}
onClick={() => onClear()}
className={twMerge(
`relative mb-0.5 flex
cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
"relative mb-0.5 flex cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
isSelected && "bg-primary",
isDisabled &&
"cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",