+
+ );
+ }
+ return (
+ {label}
+ {text &&{text}
} + onChangeHandler(e.target.value)} + type={type} + placeholder={placeholder} + value={value} + required={isRequired} + className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none" + name={name} + readOnly + autoComplete={autoComplete} + id={id} + /> +
+
+ );
+};
+
+export default memo(InputField);
diff --git a/frontend/src/components/basic/Listbox.tsx b/frontend-next/src/components/basic/Listbox.tsx
similarity index 100%
rename from frontend/src/components/basic/Listbox.tsx
rename to frontend-next/src/components/basic/Listbox.tsx
diff --git a/frontend/src/components/basic/Toggle.tsx b/frontend-next/src/components/basic/Toggle.tsx
similarity index 100%
rename from frontend/src/components/basic/Toggle.tsx
rename to frontend-next/src/components/basic/Toggle.tsx
diff --git a/frontend/src/components/basic/buttons/Button.tsx b/frontend-next/src/components/basic/buttons/Button.tsx
similarity index 100%
rename from frontend/src/components/basic/buttons/Button.tsx
rename to frontend-next/src/components/basic/buttons/Button.tsx
diff --git a/frontend/src/components/basic/dialog/ActivateBotDialog.tsx b/frontend-next/src/components/basic/dialog/ActivateBotDialog.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/ActivateBotDialog.tsx
rename to frontend-next/src/components/basic/dialog/ActivateBotDialog.tsx
diff --git a/frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx b/frontend-next/src/components/basic/dialog/AddProjectMemberDialog.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx
rename to frontend-next/src/components/basic/dialog/AddProjectMemberDialog.tsx
diff --git a/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx b/frontend-next/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
rename to frontend-next/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
diff --git a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx b/frontend-next/src/components/basic/dialog/AddWorkspaceDialog.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
rename to frontend-next/src/components/basic/dialog/AddWorkspaceDialog.tsx
diff --git a/frontend/src/components/basic/dialog/DeleteActionModal.tsx b/frontend-next/src/components/basic/dialog/DeleteActionModal.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/DeleteActionModal.tsx
rename to frontend-next/src/components/basic/dialog/DeleteActionModal.tsx
diff --git a/frontend/src/components/basic/dialog/DeleteEnvVar.tsx b/frontend-next/src/components/basic/dialog/DeleteEnvVar.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/DeleteEnvVar.tsx
rename to frontend-next/src/components/basic/dialog/DeleteEnvVar.tsx
diff --git a/frontend/src/components/basic/dialog/DeleteUserDialog.tsx b/frontend-next/src/components/basic/dialog/DeleteUserDialog.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/DeleteUserDialog.tsx
rename to frontend-next/src/components/basic/dialog/DeleteUserDialog.tsx
diff --git a/frontend/src/components/basic/dialog/UpgradePlan.tsx b/frontend-next/src/components/basic/dialog/UpgradePlan.tsx
similarity index 100%
rename from frontend/src/components/basic/dialog/UpgradePlan.tsx
rename to frontend-next/src/components/basic/dialog/UpgradePlan.tsx
diff --git a/frontend/src/components/basic/popups/BottomRightPopup.tsx b/frontend-next/src/components/basic/popups/BottomRightPopup.tsx
similarity index 100%
rename from frontend/src/components/basic/popups/BottomRightPopup.tsx
rename to frontend-next/src/components/basic/popups/BottomRightPopup.tsx
diff --git a/frontend/src/components/basic/popups/GlobPatternExamples.tsx b/frontend-next/src/components/basic/popups/GlobPatternExamples.tsx
similarity index 100%
rename from frontend/src/components/basic/popups/GlobPatternExamples.tsx
rename to frontend-next/src/components/basic/popups/GlobPatternExamples.tsx
diff --git a/frontend/src/components/basic/table/Checkbox.tsx b/frontend-next/src/components/basic/table/Checkbox.tsx
similarity index 100%
rename from frontend/src/components/basic/table/Checkbox.tsx
rename to frontend-next/src/components/basic/table/Checkbox.tsx
diff --git a/frontend/src/components/dashboard/AddTagsMenu.tsx b/frontend-next/src/components/dashboard/AddTagsMenu.tsx
similarity index 100%
rename from frontend/src/components/dashboard/AddTagsMenu.tsx
rename to frontend-next/src/components/dashboard/AddTagsMenu.tsx
diff --git a/frontend/src/components/dashboard/CommentField.tsx b/frontend-next/src/components/dashboard/CommentField.tsx
similarity index 100%
rename from frontend/src/components/dashboard/CommentField.tsx
rename to frontend-next/src/components/dashboard/CommentField.tsx
diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend-next/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
similarity index 100%
rename from frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
rename to frontend-next/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend-next/src/components/dashboard/DashboardInputField.tsx
similarity index 100%
rename from frontend/src/components/dashboard/DashboardInputField.tsx
rename to frontend-next/src/components/dashboard/DashboardInputField.tsx
diff --git a/frontend/src/components/dashboard/DeleteActionButton.tsx b/frontend-next/src/components/dashboard/DeleteActionButton.tsx
similarity index 100%
rename from frontend/src/components/dashboard/DeleteActionButton.tsx
rename to frontend-next/src/components/dashboard/DeleteActionButton.tsx
diff --git a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx b/frontend-next/src/components/dashboard/DownloadSecretsMenu.tsx
similarity index 100%
rename from frontend/src/components/dashboard/DownloadSecretsMenu.tsx
rename to frontend-next/src/components/dashboard/DownloadSecretsMenu.tsx
diff --git a/frontend/src/components/dashboard/DropZone.tsx b/frontend-next/src/components/dashboard/DropZone.tsx
similarity index 100%
rename from frontend/src/components/dashboard/DropZone.tsx
rename to frontend-next/src/components/dashboard/DropZone.tsx
diff --git a/frontend/src/components/dashboard/GenerateSecretMenu.tsx b/frontend-next/src/components/dashboard/GenerateSecretMenu.tsx
similarity index 100%
rename from frontend/src/components/dashboard/GenerateSecretMenu.tsx
rename to frontend-next/src/components/dashboard/GenerateSecretMenu.tsx
diff --git a/frontend/src/components/dashboard/KeyPair.tsx b/frontend-next/src/components/dashboard/KeyPair.tsx
similarity index 100%
rename from frontend/src/components/dashboard/KeyPair.tsx
rename to frontend-next/src/components/dashboard/KeyPair.tsx
diff --git a/frontend/src/components/features/FormLabelToolTip.tsx b/frontend-next/src/components/features/FormLabelToolTip.tsx
similarity index 100%
rename from frontend/src/components/features/FormLabelToolTip.tsx
rename to frontend-next/src/components/features/FormLabelToolTip.tsx
diff --git a/frontend-next/src/components/features/TtlFormLabel.tsx b/frontend-next/src/components/features/TtlFormLabel.tsx
new file mode 100644
index 0000000000..5278feec79
--- /dev/null
+++ b/frontend-next/src/components/features/TtlFormLabel.tsx
@@ -0,0 +1,12 @@
+import { FormLabelToolTip } from "./FormLabelToolTip";
+
+// To give users example of possible values of TTL
+export const TtlFormLabel = ({ label }: { label: string }) => (
+
+
+ {label}
+
+ onChangeHandler(e.target.value)}
+ type={passwordVisible === false ? type : "text"}
+ placeholder={placeholder}
+ value={value}
+ required={isRequired}
+ className={`${
+ blurred
+ ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400"
+ : ""
+ } ${
+ error ? "focus:ring-red/50" : "focus:ring-primary/50"
+ } text-md min-w-16 peer relative w-full rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`}
+ name={name}
+ spellCheck="false"
+ autoComplete={autoComplete}
+ id={id}
+ />
+ {label?.includes("Password") && (
+
+ )}
+ {blurred && (
+
+ {error &&
+
+ {value
+ .split("")
+ .slice(0, 54)
+ .map(() => (
+
+ )}
+ {/* {error && (
+
+
+ )} */}
+ {errorText}
} +
+
+);
diff --git a/frontend-next/src/components/features/index.tsx b/frontend-next/src/components/features/index.tsx
new file mode 100644
index 0000000000..f00724b65f
--- /dev/null
+++ b/frontend-next/src/components/features/index.tsx
@@ -0,0 +1 @@
+export { TtlFormLabel } from "./TtlFormLabel";
diff --git a/frontend-next/src/components/integrations/NoEnvironmentsBanner.tsx b/frontend-next/src/components/integrations/NoEnvironmentsBanner.tsx
new file mode 100644
index 0000000000..5e185f9d01
--- /dev/null
+++ b/frontend-next/src/components/integrations/NoEnvironmentsBanner.tsx
@@ -0,0 +1,31 @@
+import { useRouter } from "next/router";
+
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { Button } from "../v2";
+
+interface IProps {
+ projectId: string;
+}
+
+export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
+ const router = useRouter();
+
+ return (
+
+
+ );
+};
diff --git a/frontend-next/src/components/mfa/TotpRegistration.tsx b/frontend-next/src/components/mfa/TotpRegistration.tsx
new file mode 100644
index 0000000000..d9d73748f9
--- /dev/null
+++ b/frontend-next/src/components/mfa/TotpRegistration.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+import { twMerge } from "tailwind-merge";
+
+import { useGetUserTotpRegistration } from "@app/hooks/api";
+import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";
+
+import { createNotification } from "../notifications";
+import { Button, ContentLoader, Input } from "../v2";
+
+type Props = {
+ onComplete?: () => Promise
+
+ No environments in your project was found
+
+
+ + In order to use integrations, you need to create at least one environment in your project. +
+
+
+
+
+
+ );
+};
+
+export default TotpRegistration;
diff --git a/frontend-next/src/components/navigation/NavHeader.tsx b/frontend-next/src/components/navigation/NavHeader.tsx
new file mode 100644
index 0000000000..76a60d0820
--- /dev/null
+++ b/frontend-next/src/components/navigation/NavHeader.tsx
@@ -0,0 +1,235 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useOrganization, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { createNotification } from "../notifications";
+import { IconButton, Select, SelectItem, Tooltip } from "../v2";
+
+type Props = {
+ pageName: string;
+ isProjectRelated?: boolean;
+ isOrganizationRelated?: boolean;
+ currentEnv?: string;
+ userAvailableEnvs?: any[];
+ onEnvChange?: (slug: string) => void;
+ secretPath?: string;
+ isFolderMode?: boolean;
+ isProtectedBranch?: boolean;
+ protectionPolicyName?: string;
+};
+
+// TODO: make links clickable and clean up
+
+/**
+ * This is the component at the top of almost every page.
+ * It shows how to navigate to a certain page.
+ * It future these links should also be clickable and hoverable
+ * @param {object} obj
+ * @param {string} obj.pageName - Name of the page
+ * @param {boolean} obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
+ * @param {boolean} obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
+ * @param {string} obj.currentEnv - current environment inside a project
+ * @param {string} obj.userAvailableEnvs - environments that are available to a user in this project (used for the dropdown)
+ * @param {string} obj.onEnvChange - the action that happens when an env is changed
+ * @returns
+ */
+// TODO(akhilmhdh): simply this header and nav system later
+export default function NavHeader({
+ pageName,
+ isProjectRelated,
+ isOrganizationRelated,
+ currentEnv,
+ userAvailableEnvs = [],
+ onEnvChange,
+ isFolderMode,
+ secretPath = "/",
+ isProtectedBranch = false,
+ protectionPolicyName
+}: Props): JSX.Element {
+ const { currentWorkspace } = useWorkspace();
+ const { currentOrg } = useOrganization();
+
+ const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false);
+ const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
+
+ const router = useRouter();
+
+ const secretPathSegments = secretPath.split("/").filter(Boolean);
+
+ return (
+
+ 1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
+ code.
+
+
+ 
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/navigation/NavHeaderSecrets.tsx b/frontend-next/src/components/navigation/NavHeaderSecrets.tsx
similarity index 100%
rename from frontend/src/components/navigation/NavHeaderSecrets.tsx
rename to frontend-next/src/components/navigation/NavHeaderSecrets.tsx
diff --git a/frontend-next/src/components/navigation/RegionSelect.tsx b/frontend-next/src/components/navigation/RegionSelect.tsx
new file mode 100644
index 0000000000..51a033244a
--- /dev/null
+++ b/frontend-next/src/components/navigation/RegionSelect.tsx
@@ -0,0 +1,145 @@
+import { useRouter } from "next/router";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
+import { isInfisicalCloud } from "@app/helpers/platform";
+
+enum Region {
+ US = "us",
+ EU = "eu"
+}
+
+const regions = [
+ {
+ value: Region.US,
+ label: "United States",
+ location: "Virginia, USA",
+ flag: (
+
+ )
+ },
+ {
+ value: Region.EU,
+ label: "Europe",
+ location: "Frankfurt, Germany",
+ flag: (
+
+ )
+ }
+];
+
+export const RegionSelect = () => {
+ const router = useRouter();
+
+ const handleRegionSelect = (value: Region) => {
+ router.push(`https://${value}.infisical.com/${router.pathname}`);
+ };
+
+ const shouldDisplay =
+ isInfisicalCloud() || window.location.origin.includes("http://localhost:8080");
+
+ // only display region select for cloud
+ if (!shouldDisplay) return null;
+
+ const [subdomain] = window.location.host.split(".");
+
+ // default to US if not eu
+ const currentRegion = subdomain === Region.EU ? regions[1] : regions[0];
+
+ return (
+
+ {currentOrg?.name?.charAt(0)}
+
+
+
+ {currentOrg?.name}
+
+
+ {isProjectRelated && (
+ <>
+
+ {currentWorkspace?.name}
+
+
+ )}
+ {isOrganizationRelated && (
+ <>
+ Organization Settings
+
+ )}
+ {pageName}
+ )}
+ {currentEnv && secretPath === "/" && (
+ <>
+
+
+
+
+
+
+ )}
+ {isFolderMode && Boolean(secretPathSegments.length) && (
+
+ )}
+ {isFolderMode &&
+ secretPathSegments?.map((folderName, index) => {
+ const query: ParsedUrlQuery & { secretPath: string } = {
+ ...router.query,
+ secretPath: `/${secretPathSegments.slice(0, index + 1).join("/")}`
+ };
+
+ return (
+
+
+ );
+ })}
+ {isProtectedBranch && (
+
+
+ {folderName}
+
+
+ setIsHoveringCopyButton(true)}
+ onMouseLeave={() => setIsHoveringCopyButton(false)}
+ onClick={() => {
+ if (isCopied) return;
+
+ navigator.clipboard.writeText(query.secretPath);
+
+ createNotification({
+ text: "Copied secret path to clipboard",
+ type: "info"
+ });
+
+ toggleIsCopied(2000);
+ }}
+ className="hover:bg-bunker-100/10"
+ >
+
+
+
+ ) : (
+
+
+ {folderName}
+
+
+ )}
+
+
+
+
+
+
+
+ {regions.map(({ value, label, location, flag }) => (
+
+
+
+ );
+};
diff --git a/frontend-next/src/components/notifications/Notifications.tsx b/frontend-next/src/components/notifications/Notifications.tsx
new file mode 100644
index 0000000000..fdc35b9af5
--- /dev/null
+++ b/frontend-next/src/components/notifications/Notifications.tsx
@@ -0,0 +1,79 @@
+import { ReactNode } from "react";
+import { Id, toast, ToastContainer, ToastOptions, TypeOptions } from "react-toastify";
+import { faCopy, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+
+import { CopyButton } from "../v2/CopyButton";
+
+export type TNotification = {
+ title?: string;
+ text: ReactNode;
+ children?: ReactNode;
+ callToAction?: ReactNode;
+ copyActions?: { icon?: IconDefinition; value: string; name: string; label?: string }[];
+};
+
+export const NotificationContent = ({
+ title,
+ text,
+ children,
+ callToAction,
+ copyActions
+}: TNotification) => {
+ return (
+
+
+ ))}
+ + {flag} + {value.toUpperCase()} Region +
+-
+
-
+
Fastest + option if you are based in {value === Region.US ? "the" : ""} {label} +
+ -
+
Data + storage compliance for this region +
+ -
+
Hosted + in {location} +
+
+ {title &&
+ );
+};
+
+export const createNotification = (
+ myProps: TNotification & { type?: TypeOptions },
+ toastProps: ToastOptions = {}
+): Id =>
+ toast({title}
}
+ {text}
+ {children && {children}
}
+ {(callToAction || copyActions) && (
+
+ {callToAction}
+
+ {copyActions && (
+
+ )}
+
+ {copyActions.map((action) => (
+
+ )}
+
+ {action.label && (
+ {action.label}
+ )}
+
+ ))}
+
+
+ );
+};
diff --git a/frontend-next/src/components/permissions/OrgPermissionCan.tsx b/frontend-next/src/components/permissions/OrgPermissionCan.tsx
new file mode 100644
index 0000000000..006d43232d
--- /dev/null
+++ b/frontend-next/src/components/permissions/OrgPermissionCan.tsx
@@ -0,0 +1,49 @@
+import { FunctionComponent, ReactNode } from "react";
+import { BoundCanProps, Can } from "@casl/react";
+
+import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
+
+import { Tooltip } from "../v2";
+
+type Props = {
+ label?: ReactNode;
+ // this prop is used when there exist already a tooltip as helper text for users
+ // so when permission is allowed same tooltip will be reused to show helpertext
+ renderTooltip?: boolean;
+ allowedLabel?: string;
+} & BoundCanPropsA glob pattern uses wildcards to match resources or paths.
+
+
+ setPattern(e.target.value)} />
+
+
+
+
+ setText(e.target.value)} />
+
+
+
+
+ );
+};
diff --git a/frontend-next/src/components/permissions/ProjectPermissionCan.tsx b/frontend-next/src/components/permissions/ProjectPermissionCan.tsx
new file mode 100644
index 0000000000..4fc5acde95
--- /dev/null
+++ b/frontend-next/src/components/permissions/ProjectPermissionCan.tsx
@@ -0,0 +1,52 @@
+import { FunctionComponent, ReactNode } from "react";
+import { AbilityTuple, MongoAbility } from "@casl/ability";
+import { Can } from "@casl/react";
+
+import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
+
+import { Tooltip } from "../v2/Tooltip";
+
+type Props
+
+
+
+
+
+
+
+ Access Restricted
+ {children || (
+
+ Your role has limited permissions, please
contact your administrator to gain + access +
+ )}
+ contact your administrator to gain + access +
{children}
+
+
+ );
+});
+Alert.displayName = "Alert";
+
+const AlertDescription = forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+ {typeof icon !== "undefined" ? (
+ <>{icon}
+ ) : (
+
+
+ {hideTitle ? null : (
+
+ + {defaultTitle} +
+ )} + {children} +
+ {children}
+
+ );
+};
diff --git a/frontend-next/src/components/v2/Badge/index.tsx b/frontend-next/src/components/v2/Badge/index.tsx
new file mode 100644
index 0000000000..5c7042709a
--- /dev/null
+++ b/frontend-next/src/components/v2/Badge/index.tsx
@@ -0,0 +1 @@
+export { Badge } from "./Badge";
diff --git a/frontend/src/components/v2/Button/Button.stories.tsx b/frontend-next/src/components/v2/Button/Button.stories.tsx
similarity index 100%
rename from frontend/src/components/v2/Button/Button.stories.tsx
rename to frontend-next/src/components/v2/Button/Button.stories.tsx
diff --git a/frontend-next/src/components/v2/Button/Button.tsx b/frontend-next/src/components/v2/Button/Button.tsx
new file mode 100644
index 0000000000..7707805e98
--- /dev/null
+++ b/frontend-next/src/components/v2/Button/Button.tsx
@@ -0,0 +1,234 @@
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+ children: ReactNode;
+ isDisabled?: boolean;
+ leftIcon?: ReactNode;
+ rightIcon?: ReactNode;
+ // loading state
+ isLoading?: boolean;
+};
+
+// refactor(akhilmhdh): both color and size variants are together need to split it
+// colorSchema should handle all color class names
+// variant should handle how the button padding and other types should be set
+const buttonVariants = cva(
+ [
+ "button",
+ "transition-all",
+ "font-inter font-medium",
+ "cursor-pointer",
+ "inline-flex items-center justify-center",
+ "relative",
+ "whitespace-nowrap"
+ ],
+ {
+ variants: {
+ colorSchema: {
+ primary: ["bg-primary", "text-black", "border-primary bg-opacity-90 hover:bg-opacity-100"],
+ secondary: ["bg-mineshaft", "text-gray-300", "border-mineshaft hover:bg-opacity-80"],
+ danger: ["!bg-red", "!text-white", "!border-red hover:!bg-opacity-90"],
+ gray: ["bg-bunker-500", "text-bunker-200"]
+ },
+ variant: {
+ solid: "",
+ outline: ["bg-transparent", "border-2", "border-solid"],
+ plain: "",
+ selected: "",
+ outline_bg: "",
+ // a constant color not in use on hover or click goes colorSchema color
+ star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600",
+ link: "text-primary !p-0 bg-transparent outline-none border-none"
+ },
+ isDisabled: {
+ true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed",
+ false: "border"
+ },
+ isFullWidth: {
+ true: "w-full",
+ false: ""
+ },
+ isRounded: {
+ true: "rounded-md",
+ false: ""
+ },
+ size: {
+ xs: ["text-xs", "py-1", "px-2"],
+ sm: ["text-sm", "py-2", "px-4"],
+ md: ["text-md", "py-2", "px-5"],
+ lg: ["text-lg", "py-2", "px-6"]
+ }
+ },
+ compoundVariants: [
+ {
+ colorSchema: "primary",
+ variant: "star",
+ className:
+ "bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100"
+ },
+ {
+ colorSchema: "primary",
+ variant: "solid",
+ className: "text-black bg-primary-500 bg-opacity-90 hover:bg-primary-500 hover:text-black"
+ },
+ {
+ colorSchema: "primary",
+ variant: "selected",
+ className: "bg-primary/10 border border-primary/50 text-bunker-200"
+ },
+ {
+ colorSchema: "primary",
+ variant: "outline_bg",
+ className:
+ "bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/[0.1] hover:border-primary/40 text-bunker-200"
+ },
+ {
+ colorSchema: "secondary",
+ variant: "star",
+ className:
+ "bg-mineshaft-700 border border-mineshaft-600 hover:bg-mineshaft hover:text-white"
+ },
+ {
+ colorSchema: "danger",
+ variant: "star",
+ className: "hover:bg-red hover:text-white"
+ },
+ {
+ colorSchema: "primary",
+ variant: "outline",
+ className: "text-primary hover:bg-primary hover:text-black"
+ },
+ {
+ colorSchema: "secondary",
+ variant: "outline",
+ className: "border-mineshaft-700 hover:border-mineshaft-500"
+ },
+ {
+ colorSchema: "danger",
+ variant: "outline",
+ className: "text-red hover:bg-red hover:text-black"
+ },
+ {
+ colorSchema: "danger",
+ variant: "outline_bg",
+ className:
+ "bg-mineshaft-600 border border-red-500 hover:bg-red/[0.1] hover:border-red/40 text-red-500"
+ },
+ {
+ colorSchema: "primary",
+ variant: "plain",
+ className: "text-primary"
+ },
+ {
+ colorSchema: "gray",
+ variant: "plain",
+ className: "bg-transparent text-bunker-200"
+ },
+ {
+ colorSchema: "secondary",
+ variant: "plain",
+ className: "text-mineshaft-300 hover:text-mineshaft-200 border-none"
+ },
+ {
+ colorSchema: "danger",
+ variant: "plain",
+ className: "text-red"
+ },
+ {
+ colorSchema: ["danger", "primary", "secondary"],
+ variant: ["plain"],
+ className: "bg-transparent py-1 px-1"
+ }
+ ]
+ }
+);
+
+export type ButtonProps = ButtonHTMLAttributes
+ {children}
+ {subTitle &&
+);
+
+export type CardFooterProps = {
+ children: ReactNode;
+ className?: string;
+};
+
+export const CardFooter = ({ children, className }: CardFooterProps) => (
+ {subTitle}
} +{children}
+);
+
+export type CardBodyProps = {
+ children: ReactNode;
+ className?: string;
+ style?: CSSProperties;
+};
+
+export const CardBody = ({ children, className, style }: CardBodyProps) => (
+
+ {children}
+
+);
+
+export type CardProps = {
+ children: ReactNode;
+ className?: string;
+ isFullHeight?: boolean;
+ isRounded?: boolean;
+ isPlain?: boolean;
+ isHoverable?: boolean;
+ style?: CSSProperties;
+};
+
+export const Card = forwardRef
+ {children}
+
+ );
+ }
+);
+
+Card.displayName = "Card";
diff --git a/frontend-next/src/components/v2/Card/index.tsx b/frontend-next/src/components/v2/Card/index.tsx
new file mode 100644
index 0000000000..48b09705df
--- /dev/null
+++ b/frontend-next/src/components/v2/Card/index.tsx
@@ -0,0 +1,2 @@
+export type { CardBodyProps, CardFooterProps, CardProps, CardTitleProps } from "./Card";
+export { Card, CardBody, CardFooter, CardTitle } from "./Card";
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx b/frontend-next/src/components/v2/Checkbox/Checkbox.stories.tsx
similarity index 100%
rename from frontend/src/components/v2/Checkbox/Checkbox.stories.tsx
rename to frontend-next/src/components/v2/Checkbox/Checkbox.stories.tsx
diff --git a/frontend-next/src/components/v2/Checkbox/Checkbox.tsx b/frontend-next/src/components/v2/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..6a10869967
--- /dev/null
+++ b/frontend-next/src/components/v2/Checkbox/Checkbox.tsx
@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { twMerge } from "tailwind-merge";
+
+export type CheckboxProps = Omit<
+ CheckboxPrimitive.CheckboxProps,
+ "checked" | "disabled" | "required"
+> & {
+ children?: ReactNode;
+ id: string;
+ isDisabled?: boolean;
+ isChecked?: boolean;
+ isRequired?: boolean;
+ checkIndicatorBg?: string | undefined;
+ isError?: boolean;
+ isIndeterminate?: boolean;
+ containerClassName?: string;
+};
+
+export const Checkbox = ({
+ children,
+ className,
+ id,
+ isChecked,
+ isDisabled,
+ isRequired,
+ checkIndicatorBg,
+ isError,
+ isIndeterminate,
+ containerClassName,
+ ...props
+}: CheckboxProps): JSX.Element => {
+ return (
+
+
+
+ {isIndeterminate ? (
+
+
+
+
+ );
+};
diff --git a/frontend-next/src/components/v2/Checkbox/index.tsx b/frontend-next/src/components/v2/Checkbox/index.tsx
new file mode 100644
index 0000000000..374e8e394b
--- /dev/null
+++ b/frontend-next/src/components/v2/Checkbox/index.tsx
@@ -0,0 +1,2 @@
+export type { CheckboxProps } from "./Checkbox";
+export { Checkbox } from "./Checkbox";
diff --git a/frontend/src/components/v2/ComboBox/ComboBox.tsx b/frontend-next/src/components/v2/ComboBox/ComboBox.tsx
similarity index 100%
rename from frontend/src/components/v2/ComboBox/ComboBox.tsx
rename to frontend-next/src/components/v2/ComboBox/ComboBox.tsx
diff --git a/frontend/src/components/v2/ComboBox/index.tsx b/frontend-next/src/components/v2/ComboBox/index.tsx
similarity index 100%
rename from frontend/src/components/v2/ComboBox/index.tsx
rename to frontend-next/src/components/v2/ComboBox/index.tsx
diff --git a/frontend-next/src/components/v2/ContentLoader/ContentLoader.tsx b/frontend-next/src/components/v2/ContentLoader/ContentLoader.tsx
new file mode 100644
index 0000000000..dd34e99416
--- /dev/null
+++ b/frontend-next/src/components/v2/ContentLoader/ContentLoader.tsx
@@ -0,0 +1,58 @@
+// this will show a loading animation with text below
+// if you pass array it will say it one by one giving user clear instruction on what's happening
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+ text?: string | string[];
+ frequency?: number;
+ className?: string;
+};
+
+export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
+ const [pos, setPos] = useState(0);
+ const isTextArray = Array.isArray(text);
+ useEffect(() => {
+ let interval: NodeJS.Timeout;
+ if (isTextArray) {
+ interval = setInterval(() => {
+ setPos((state) => (state + 1) % text.length);
+ }, frequency);
+ }
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+ 
+ {text && isTextArray && (
+
+
+ {text[pos]}
+
+
+ )}
+ {text && !isTextArray &&
+ );
+};
diff --git a/frontend-next/src/components/v2/ContentLoader/index.tsx b/frontend-next/src/components/v2/ContentLoader/index.tsx
new file mode 100644
index 0000000000..78b373523c
--- /dev/null
+++ b/frontend-next/src/components/v2/ContentLoader/index.tsx
@@ -0,0 +1 @@
+export { ContentLoader } from "./ContentLoader";
diff --git a/frontend-next/src/components/v2/CopyButton/CopyButton.tsx b/frontend-next/src/components/v2/CopyButton/CopyButton.tsx
new file mode 100644
index 0000000000..ff1161ca90
--- /dev/null
+++ b/frontend-next/src/components/v2/CopyButton/CopyButton.tsx
@@ -0,0 +1,55 @@
+import { faCheck, faCopy, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useTimedReset } from "@app/hooks";
+
+import { IconButton } from "../IconButton";
+import { Tooltip } from "../Tooltip";
+
+export type CopyButtonProps = {
+ value: string;
+ size?: "xs" | "sm" | "md" | "lg";
+ variant?: "solid" | "outline" | "plain" | "star" | "outline_bg";
+ color?: string;
+ name?: string;
+ icon?: IconDefinition;
+};
+
+export const CopyButton = ({
+ value,
+ size = "sm",
+ variant = "solid",
+ color,
+ name,
+ icon = faCopy
+}: CopyButtonProps) => {
+ const [copyText, isCopying, setCopyText] = useTimedReset
+ {text && isTextArray && (
+ {text}
}
+
+
+ {
+ handleCopyText();
+ }}
+ >
+
+
+
+ );
+};
+
+CopyButton.displayName = "CopyButton";
diff --git a/frontend-next/src/components/v2/CopyButton/index.tsx b/frontend-next/src/components/v2/CopyButton/index.tsx
new file mode 100644
index 0000000000..9a7bc59916
--- /dev/null
+++ b/frontend-next/src/components/v2/CopyButton/index.tsx
@@ -0,0 +1,2 @@
+export type { CopyButtonProps } from "./CopyButton";
+export { CopyButton } from "./CopyButton";
diff --git a/frontend-next/src/components/v2/CreatableSelect/CreatableSelect.tsx b/frontend-next/src/components/v2/CreatableSelect/CreatableSelect.tsx
new file mode 100644
index 0000000000..b662ab1217
--- /dev/null
+++ b/frontend-next/src/components/v2/CreatableSelect/CreatableSelect.tsx
@@ -0,0 +1,68 @@
+import { GroupBase } from "react-select";
+import ReactSelectCreatable, { CreatableProps } from "react-select/creatable";
+import { twMerge } from "tailwind-merge";
+
+import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
+
+export const CreatableSelect =
+
+
+
+
+
+ );
+};
diff --git a/frontend-next/src/components/v2/Divider/index.tsx b/frontend-next/src/components/v2/Divider/index.tsx
new file mode 100644
index 0000000000..ac407aa37d
--- /dev/null
+++ b/frontend-next/src/components/v2/Divider/index.tsx
@@ -0,0 +1 @@
+export { Divider } from "./Divider";
diff --git a/frontend/src/components/v2/Drawer/Drawer.stories.tsx b/frontend-next/src/components/v2/Drawer/Drawer.stories.tsx
similarity index 100%
rename from frontend/src/components/v2/Drawer/Drawer.stories.tsx
rename to frontend-next/src/components/v2/Drawer/Drawer.stories.tsx
diff --git a/frontend-next/src/components/v2/Drawer/Drawer.tsx b/frontend-next/src/components/v2/Drawer/Drawer.tsx
new file mode 100644
index 0000000000..027946a2ec
--- /dev/null
+++ b/frontend-next/src/components/v2/Drawer/Drawer.tsx
@@ -0,0 +1,84 @@
+import { forwardRef, ReactNode } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
+
+import { Card, CardBody, CardFooter, CardTitle } from "../Card";
+import { IconButton } from "../IconButton";
+
+export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
+ title?: ReactNode;
+ subTitle?: ReactNode;
+ footerContent?: ReactNode;
+ onClose?: () => void;
+} & VariantProps+ The administrators of this Infisical instance have not yet set up an email service provider + required to perform this action +
+ + + + +
+
+);
diff --git a/frontend-next/src/components/v2/EmptyState/index.tsx b/frontend-next/src/components/v2/EmptyState/index.tsx
new file mode 100644
index 0000000000..aac2d4d676
--- /dev/null
+++ b/frontend-next/src/components/v2/EmptyState/index.tsx
@@ -0,0 +1 @@
+export { EmptyState } from "./EmptyState";
diff --git a/frontend-next/src/components/v2/FilterableSelect/FilterableSelect.tsx b/frontend-next/src/components/v2/FilterableSelect/FilterableSelect.tsx
new file mode 100644
index 0000000000..dd8ba330dc
--- /dev/null
+++ b/frontend-next/src/components/v2/FilterableSelect/FilterableSelect.tsx
@@ -0,0 +1,81 @@
+import Select, { Props } from "react-select";
+import { twMerge } from "tailwind-merge";
+
+import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
+
+export const FilterableSelect =
+
+ {title}
+ {children}
+