LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-10 12:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: modals are replaced with mantine modal

Browse Source
This commit is contained in:
Nishchit
2023-07-21 22:45:01 +05:30
committed by GitHub
parent d1609e1398 a2ce27278e
commit fd89878b71
42 changed files with 6559 additions and 6927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
platform/firecamp-platform/package.json
View File

@@ -84,7 +84,6 @@
"react-ga": "^3.1.2", "react-ga": "^3.1.2",
"react-hook-form": "^6.8.1", "react-hook-form": "^6.8.1",
"react-hotkeys-hook": "^3.3.1", "react-hotkeys-hook": "^3.3.1",
"react-responsive-modal": "^6.2.0",
"redux": "^3.2.1", "redux": "^3.2.1",
"xml-js": "^1.6.9", "xml-js": "^1.6.9",
"xmljson": "^0.2.0", "xmljson": "^0.2.0",

2
platform/firecamp-platform/src/components/common/environment/selector/EnvironmentDD.tsx
View File

@@ -83,7 +83,7 @@ const EnvironmentDD: FC<IEnvironmentDD> = ({ onChange = () => {} }) => {
onSelect={_onSelectEnv} onSelect={_onSelectEnv}
classNames={{ classNames={{
dropdown: '!pt-0', dropdown: '!pt-0',
label: 'uppercase font-sans', label: 'uppercase',
item: '!px-5', item: '!px-5',
}} }}
sm sm

6
platform/firecamp-platform/src/components/common/error-boundary/ErrorPopup.tsx
View File

@@ -23,10 +23,8 @@ const ErrorPopup: FC<FallbackProps> = ({ error }) => {
return ( return (
<Modal <Modal
isOpen={isOpen} opened={isOpen}
modalConfig={{ styles={{ content: bg.modal }}
styles: bg,
}}
onClose={_onClose} onClose={_onClose}
className="fc-error-popup" className="fc-error-popup"
> >

97
platform/firecamp-platform/src/components/modals/ModalContainer.tsx
View File

@@ -1,11 +1,10 @@
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
import { Modal } from '@firecamp/ui';
// import SSLnProxyManager from '../modals/ssl-proxy-manager/SSLnProxyManager'; // import SSLnProxyManager from '../modals/ssl-proxy-manager/SSLnProxyManager';
// import AuthContainer from '../common/auth/AuthContainer'; // import AuthContainer from '../common/auth/AuthContainer';
// import CookieManager from '../modals/cookie-manager/CookieManager'; // import CookieManager from '../modals/cookie-manager/CookieManager';
// import RefreshToken from '../common/auth/RefreshToken'; // import RefreshToken from '../common/auth/RefreshToken';
import { useModalStore } from '../../store/modal'; import { useModalStore } from '../../store/modal';
import { EPlatformModalDefaultProps, EPlatformModalTypes } from '../../types'; import { EPlatformModalTypes } from '../../types';
import ForgotPassword from './auth/ForgotPassword'; import ForgotPassword from './auth/ForgotPassword';
import RefreshToken from './auth/RefreshToken'; import RefreshToken from './auth/RefreshToken';
import ResetPassword from './auth/ResetPassword'; import ResetPassword from './auth/ResetPassword';
@@ -38,115 +37,51 @@ export const ModalContainer = () => {
// Organization // Organization
case EPlatformModalTypes.OrgManagement: case EPlatformModalTypes.OrgManagement:
return <OrgManagement isOpen={isOpen} onClose={close} />; return <OrgManagement opened={isOpen} onClose={close} />;
case EPlatformModalTypes.SwitchOrg: case EPlatformModalTypes.SwitchOrg:
return <SwitchOrg isOpen={isOpen} onClose={close} />; return <SwitchOrg opened={isOpen} onClose={close} />;
// Workspace // Workspace
case EPlatformModalTypes.InviteMembers: case EPlatformModalTypes.InviteMembers:
return <InviteMembers isOpen={isOpen} onClose={close} />; return <InviteMembers opened={isOpen} onClose={close} />;
case EPlatformModalTypes.WorkspaceManagement: case EPlatformModalTypes.WorkspaceManagement:
return <WorkspaceManagement isOpen={isOpen} onClose={close} />; return <WorkspaceManagement opened={isOpen} onClose={close} />;
case EPlatformModalTypes.SwitchWorkspace: case EPlatformModalTypes.SwitchWorkspace:
return <SwitchWorkspace isOpen={isOpen} onClose={close} />; return <SwitchWorkspace opened={isOpen} onClose={close} />;
// Request // Request
case EPlatformModalTypes.EditRequest: case EPlatformModalTypes.EditRequest:
return <EditRequest onClose={close} />; return <EditRequest opened={isOpen} onClose={close} />;
// Environment // Environment
case EPlatformModalTypes.CloneEnvironment: case EPlatformModalTypes.CloneEnvironment:
return <CloneEnvironment onClose={close} />; return <CloneEnvironment opened={isOpen} onClose={close} />;
// User // User
// case EPlatformModalTypes.UserProfile: return <UserProfile isOpen={isOpen} onClose={close} />; // case EPlatformModalTypes.UserProfile: return <UserProfile isOpen={isOpen} onClose={close} />;
// Auth // Auth
case EPlatformModalTypes.SignIn: case EPlatformModalTypes.SignIn:
return <SignIn isOpen={isOpen} onClose={close} />; return <SignIn opened={isOpen} onClose={close} />;
case EPlatformModalTypes.SignInWithEmail: case EPlatformModalTypes.SignInWithEmail:
return <SignInWithEmail isOpen={isOpen} onClose={close} />; return <SignInWithEmail opened={isOpen} onClose={close} />;
case EPlatformModalTypes.SignUp: case EPlatformModalTypes.SignUp:
return <SignUp isOpen={isOpen} onClose={close} />; return <SignUp opened={isOpen} onClose={close} />;
case EPlatformModalTypes.ForgotPassword: case EPlatformModalTypes.ForgotPassword:
return <ForgotPassword isOpen={isOpen} onClose={close} />; return <ForgotPassword opened={isOpen} onClose={close} />;
case EPlatformModalTypes.ResetPassword: case EPlatformModalTypes.ResetPassword:
return <ResetPassword isOpen={isOpen} onClose={close} />; return <ResetPassword opened={isOpen} onClose={close} />;
case EPlatformModalTypes.RefreshToken: case EPlatformModalTypes.RefreshToken:
return <RefreshToken isOpen={isOpen} onClose={close} />; return <RefreshToken opened={isOpen} onClose={close} />;
default: default:
return <></>; return <></>;
} }
}; };
// return renderModal(currentOpenModal);
const modalProps = EPlatformModalDefaultProps[currentOpenModal];
// console.log(modalProps, '.....');
return ( return (
<Modal isOpen={isOpen} onClose={close} {...modalProps}> <>
{renderModal(currentOpenModal)} {renderModal(currentOpenModal)}
</Modal> </>
); );
const modalType = currentOpenModal;
return (
<Modal isOpen={isOpen} onClose={close} {...modalProps}>
<>
{/* Organization */}
<OrgManagement
isOpen={modalType == EPlatformModalTypes.OrgManagement && isOpen}
onClose={close}
/>
<SwitchOrg
isOpen={modalType == EPlatformModalTypes.SwitchOrg && isOpen}
onClose={close}
/>
{/* Workspace */}
<InviteMembers
isOpen={modalType == EPlatformModalTypes.InviteMembers && isOpen}
onClose={close}
/>
<WorkspaceManagement
isOpen={
modalType == EPlatformModalTypes.WorkspaceManagement && isOpen
}
onClose={close}
/>
<SwitchWorkspace
isOpen={modalType == EPlatformModalTypes.SwitchWorkspace && isOpen}
onClose={close}
/>
{/* User */}
{/* <UserProfile isOpen={modalType == EPlatformModalTypes.UserProfile && isOpen} onClose={close} />; */}
{/* Auth */}
<SignIn
isOpen={modalType == EPlatformModalTypes.SignIn && isOpen}
onClose={close}
/>
<SignInWithEmail
isOpen={modalType == EPlatformModalTypes.SignInWithEmail && isOpen}
onClose={close}
/>
<SignUp
isOpen={modalType == EPlatformModalTypes.SignUp && isOpen}
onClose={close}
/>
<ForgotPassword
isOpen={modalType == EPlatformModalTypes.ForgotPassword && isOpen}
onClose={close}
/>
<ResetPassword
isOpen={modalType == EPlatformModalTypes.ResetPassword && isOpen}
onClose={close}
/>
<RefreshToken
isOpen={modalType == EPlatformModalTypes.RefreshToken && isOpen}
onClose={close}
/>
</>
</Modal>
);
}; };

113
platform/firecamp-platform/src/components/modals/auth/ForgotPassword.tsx
View File

@@ -1,12 +1,13 @@
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { Modal, Button, Input, IModal } from '@firecamp/ui'; import { Modal, Button, Input, IModal } from '@firecamp/ui';
import { Mail } from 'lucide-react';
import _auth from '../../../services/auth'; import _auth from '../../../services/auth';
import platformContext from '../../../services/platform-context'; import platformContext from '../../../services/platform-context';
/** /**
* ForgotPassword component * ForgotPassword component
*/ */
const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => { const ForgotPassword: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
const [isRequesting, setFlagIsRequesting] = useState(false); const [isRequesting, setFlagIsRequesting] = useState(false);
const form = useForm(); const form = useForm();
let { handleSubmit, errors } = form; let { handleSubmit, errors } = form;
@@ -50,63 +51,61 @@ const ForgotPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit); const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit);
return ( return (
<> <Modal opened={opened} onClose={onClose} size={440}>
<Modal.Header> <Mail
<img className="mx-auto w-12 mb-6" src={'img/mail-send.png'} /> size="48"
<div className="text-xl mb-2 w-full text-center font-semibold"> className="mb-6 mx-auto text-activityBar-foreground-inactive"
Enter your Email Address />
</div> <div className="text-xl mb-2 w-full text-center font-semibold">
<div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16"> Enter your Email Address
You’ll get the password recovery token in your inbox. </div>
</div> <div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16">
</Modal.Header> You’ll get the password recovery token in your inbox.
<Modal.Body> </div>
<div className=""> <div className="">
<form onSubmit={handleSubmit(_onSubmit)}> <form onSubmit={handleSubmit(_onSubmit)}>
<Input <Input
placeholder="Enter E-mail" placeholder="Enter E-mail"
key={'email'} key={'email'}
name={'email'} name={'email'}
label="Email" label="Email"
registerMeta={{ registerMeta={{
required: true, required: true,
maxLength: 50, maxLength: 50,
minLength: 1, minLength: 1,
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/, pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
}}
useformRef={form}
onKeyDown={_onKeyDown}
error={
errors?.email ? errors?.email?.message || 'Invalid email' : ''
}
/>
<Button
text={isRequesting ? `Sending...` : `Send`}
onClick={handleSubmit(_onSubmit)}
fullWidth
primary
sm
/>
</form>
</div>
</Modal.Body>
<Modal.Footer>
<div className="text-sm mt-6">
<a
className="text-base text-center block"
href="#"
id="forgotPasswordToken"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openResetPassword();
}} }}
tabIndex={1} useformRef={form}
> onKeyDown={_onKeyDown}
Already have a token? error={
</a> errors?.email ? errors?.email?.message || 'Invalid email' : ''
</div> }
</Modal.Footer> />
</> <Button
text={isRequesting ? `Sending...` : `Send`}
onClick={handleSubmit(_onSubmit)}
fullWidth
primary
sm
/>
</form>
</div>
<div className="text-sm p-4">
<a
className="text-base text-center block"
href="#"
id="forgotPasswordToken"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openResetPassword();
}}
tabIndex={1}
>
Already have a token?
</a>
</div>
</Modal>
); );
}; };

18
platform/firecamp-platform/src/components/modals/auth/RefreshToken.tsx
View File

@@ -13,19 +13,13 @@ import { useUserStore } from '../../../store/user';
/** /**
* RefreshToken component for user to autenticate. * RefreshToken component for user to autenticate.
*/ */
const RefreshToken: FC<IModal> = ({ onClose = () => {} }) => { const RefreshToken: FC<IModal> = ({ opened, onClose = () => {} }) => {
return ( return (
<> <Modal opened={opened} onClose={onClose} closeOnEscape={false}>
<Modal.Header> <Header />
<Header /> <Body onClose={onClose} />
</Modal.Header> <Footer />
<Modal.Body> </Modal>
<Body onClose={onClose} />
</Modal.Body>
<Modal.Footer>
<Footer />
</Modal.Footer>
</>
); );
}; };

231
platform/firecamp-platform/src/components/modals/auth/ResetPassword.tsx
View File

@@ -8,7 +8,7 @@ import platformContext from '../../../services/platform-context';
/** /**
* ResetPassword component * ResetPassword component
*/ */
const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => { const ResetPassword: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
const [isRequesting, setFlagIsRequesting] = useState(false); const [isRequesting, setFlagIsRequesting] = useState(false);
const [showPassword, toggleShowPassword] = useState(false); const [showPassword, toggleShowPassword] = useState(false);
@@ -54,126 +54,124 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit); const _onKeyDown = (e: any) => e.key === 'Enter' && handleSubmit(_onSubmit);
return ( return (
<> <Modal opened={opened} onClose={onClose} size={440}>
<Modal.Header> <>
<img className="mx-auto w-12 mb-6" src={'img/reset-icon.png'} /> <img className="mx-auto w-12 mb-6" src={'img/reset-icon.png'} />
<div className="text-xl mb-6 w-full text-center font-semibold"> <div className="text-xl mb-6 w-full text-center font-semibold">
Reset Password Reset Password
</div> </div>
</Modal.Header> </>
<Modal.Body> <div className="">
<div className=""> <form onSubmit={handleSubmit(_onSubmit)}>
<form onSubmit={handleSubmit(_onSubmit)}> <Input
<Input placeholder="Enter E-mail"
placeholder="Enter E-mail" key={'email'}
key={'email'} name={'email'}
name={'email'} label="Email"
label="Email" registerMeta={{
registerMeta={{ required: true,
required: true, maxLength: 50,
maxLength: 50, minLength: 1,
minLength: 1, pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/, }}
}} useformRef={form}
useformRef={form} onKeyDown={_onKeyDown}
onKeyDown={_onKeyDown} error={
error={ errors?.email ? errors?.email?.message || 'Invalid email' : ''
errors?.email ? errors?.email?.message || 'Invalid email' : '' }
} wrapperClassName="!mb-2"
wrapperClassName="!mb-2" />
/> <Input
<Input placeholder="Enter Token"
placeholder="Enter Token" key={'token'}
key={'token'} name={'token'}
name={'token'} label="Token"
label="Token" type="text"
type="text" registerMeta={{
registerMeta={{ required: true,
required: true, maxLength: 50,
maxLength: 50, minLength: 4,
minLength: 4, }}
}} useformRef={form}
useformRef={form} onKeyDown={_onKeyDown}
onKeyDown={_onKeyDown} error={
error={ errors?.token ? errors?.token?.message || 'Invalid token' : ''
errors?.token ? errors?.token?.message || 'Invalid token' : '' }
} wrapperClassName="!mb-2"
wrapperClassName="!mb-2" />
/> <Input
<Input placeholder="Enter password"
placeholder="Enter password" key={'password'}
key={'password'} name={'password'}
name={'password'} type={showPassword ? 'text' : 'password'}
type={showPassword ? 'text' : 'password'} label="Password"
label="Password" iconPosition="right"
iconPosition="right" icon={
icon={ <VscEye
<VscEye title="password"
title="password" size={16}
size={16} onClick={() => {
onClick={() => { toggleShowPassword(!showPassword);
toggleShowPassword(!showPassword); }}
}} />
/> }
} registerMeta={{
registerMeta={{ required: true,
required: true, maxLength: 50,
maxLength: 50, minLength: 8,
minLength: 8, }}
}} useformRef={form}
useformRef={form} onKeyDown={_onKeyDown}
onKeyDown={_onKeyDown} error={
error={ errors?.password
errors?.password ? errors?.password?.message || 'Invalid password'
? errors?.password?.message || 'Invalid password' : ''
: '' }
} />
/> <Button
<Button type="submit"
type='submit' text={isRequesting ? `Resetting password...` : 'Reset Password'}
text={isRequesting ? `Resetting password...` : 'Reset Password'} onClick={handleSubmit(_onSubmit)}
onClick={handleSubmit(_onSubmit)} fullWidth
fullWidth primary
primary sm
sm />
/> </form>
</form> </div>
<div className="flex-col">
<div className="text-sm mt-6 text-center text-app-foreground-inactive">
Not have an account?
<a
href="#"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openSignUp();
}}
tabIndex={1}
className="font-bold underline"
>
{' '}
Sign Up
</a>
</div> </div>
</Modal.Body> <div className="text-sm text-center text-app-foreground-inactive">
<Modal.Footer> Already have an account?
<div className="flex-col"> <a
<div className="text-sm mt-6 text-center text-app-foreground-inactive"> href="#"
Not have an account? onClick={(e) => {
<a if (e) e.preventDefault();
href="#" platformContext.app.modals.openSignIn();
onClick={(e) => { }}
if (e) e.preventDefault(); tabIndex={1}
platformContext.app.modals.openSignUp(); className="font-bold underline"
}} >
tabIndex={1} {' '}
className="font-bold underline" Sign In
> </a>
{' '}
Sign Up
</a>
</div>
<div className="text-sm mt-2 text-center text-app-foreground-inactive">
Already have an account?
<a
href="#"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openSignIn();
}}
tabIndex={1}
className="font-bold underline"
>
{' '}
Sign In
</a>
</div>
</div> </div>
{/* <div className="text-sm mt-6"> </div>
{/* <div className="text-sm mt-6">
<a <a
href="#" href="#"
@@ -197,8 +195,7 @@ const ResetPassword: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
Already have an account? Sign In Already have an account? Sign In
</a> </a>
</div> */} </div> */}
</Modal.Footer> </Modal>
</>
); );
}; };

122
platform/firecamp-platform/src/components/modals/auth/SignIn.tsx
View File

@@ -9,73 +9,71 @@ import platformContext from '../../../services/platform-context';
/** /**
* User Sign in * User Sign in
*/ */
const SignIn: FC<IModal> = () => { const SignIn: FC<IModal> = ({ opened, onClose }) => {
return ( return (
<> <Modal opened={opened} onClose={onClose} size={440}>
<Modal.Body> {/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */} <div className="mb-4">
<div className="mb-4"> <FcLogo className="mx-auto w-14" size={80} />
<FcLogo className="mx-auto w-14" size={80} /> </div>
</div> <div className="text-xl mb-6 w-full text-center font-semibold">
<div className="text-xl mb-6 w-full text-center font-semibold"> Sign in to Firecamp
Sign in to Firecamp </div>
</div> <div className="">
<div className=""> <GithubGoogleAuth />
<GithubGoogleAuth /> <Button
<Button text="Continue with Email"
text="Continue with Email" leftIcon={<VscAccount size={18} />}
leftIcon={<VscAccount size={18} />} classNames={{ root: 'mb-5' }}
classNames={{root: "mb-5"}} onClick={() => platformContext.app.modals.openSignInWithEmail()}
onClick={() => platformContext.app.modals.openSignInWithEmail()} outline
outline fullWidth
fullWidth sm
sm />
/> </div>
</div> {/* <div className="mb-8 mt-8 flex justify-center items-center">
{/* <div className="mb-8 mt-8 flex justify-center items-center">
<hr className="border-t border-app-border w-full" /> <hr className="border-t border-app-border w-full" />
<span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">OR</span> <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">OR</span>
</div> */} </div> */}
<div className="flex-col"> <div className="pt-px">
<div className="text-sm mt-6 text-center"> <div className="text-sm mt-6 text-center">
Not have an account? Not have an account?
<a <a
href="#" href="#"
id="sign-up" id="sign-up"
className="font-bold underline" className="font-bold underline px-1"
onClick={(e) => { onClick={(e) => {
if (e) e.preventDefault(); if (e) e.preventDefault();
platformContext.app.modals.openSignUp(); platformContext.app.modals.openSignUp();
}} }}
tabIndex={1} tabIndex={1}
> >
Sign Up Sign Up
</a> </a>
</div>
<div className="text-sm mt-6 text-center text-app-foreground-inactive">
By moving forward, you acknowledge that you have read and accept the
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline"
target={'_blank'}
>
Term of Service
</a>
and
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline"
target={'_blank'}
>
Privacy Policy
</a>
.
</div>
</div> </div>
</Modal.Body> <div className="text-sm mt-6 text-center text-app-foreground-inactive">
</> By moving forward, you acknowledge that you have read and accept the
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline px-1"
target={'_blank'}
>
Term of Service
</a>
and
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline px-1"
target={'_blank'}
>
Privacy Policy
</a>
.
</div>
</div>
</Modal>
); );
}; };

265
platform/firecamp-platform/src/components/modals/auth/SignInWithEmail.tsx
View File

@@ -8,7 +8,7 @@ import { EProvider } from '../../../services/auth/types';
import platformContext from '../../../services/platform-context'; import platformContext from '../../../services/platform-context';
/** User Sign in */ /** User Sign in */
const SignInWithEmail: FC<IModal> = () => { const SignInWithEmail: FC<IModal> = ({ opened, onClose }) => {
const form = useForm(); const form = useForm();
const [isRequesting, setFlagIsRequesting] = useState(false); const [isRequesting, setFlagIsRequesting] = useState(false);
const [showPassword, toggleShowPassword] = useState(false); const [showPassword, toggleShowPassword] = useState(false);
@@ -62,151 +62,148 @@ const SignInWithEmail: FC<IModal> = () => {
}; };
return ( return (
<> <Modal opened={opened} onClose={onClose} size={440}>
<Modal.Body> <div className="mb-2">
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */} <FcLogo className="mx-auto w-14" size={80} />
<div className="mb-4"> </div>
<FcLogo className="mx-auto w-14" size={80} /> <div className="text-xl mb-3 w-full text-center font-semibold">
</div> Sign in to Firecamp
<div className="text-xl mb-6 w-full text-center font-semibold"> </div>
Sign in to Firecamp <div className="">
</div> <GithubGoogleAuth />
<div className=""> </div>
<GithubGoogleAuth /> <div className="relative my-4 flex justify-center items-center">
</div> <hr className="border-t border-app-border w-full" />
<div className="mb-8 mt-8 flex justify-center items-center"> <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
<hr className="border-t border-app-border w-full" /> OR
<span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1"> </span>
OR </div>
</span> {/* <div className="text-sm text-app-foreground-inactive max-w-sm mx-auto mb-3 text-center">
</div>
<div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16">
Welcome back! enter your email and password below to sign in. Welcome back! enter your email and password below to sign in.
</div> </div> */}
<div className=""> <div className="">
<form onSubmit={handleSubmit(_onSignIn)}> <form onSubmit={handleSubmit(_onSignIn)}>
<Input <Input
placeholder="Enter Username" placeholder="Enter Username"
key={'username'} key={'username'}
name={'username'} name={'username'}
id={'username'} id={'username'}
label="Email or Username" label="Email or Username"
type="text" type="text"
registerMeta={{ registerMeta={{
required: true, required: true,
maxLength: 50, maxLength: 50,
minLength: 1, minLength: 1,
pattern: pattern:
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+|^[0-9a-zA-Z ]+$/, /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+|^[0-9a-zA-Z ]+$/,
}} }}
useformRef={form} useformRef={form}
onKeyDown={_onKeyDown} onKeyDown={_onKeyDown}
error={ error={
errors?.username errors?.username
? errors?.username?.message || 'Please enter valid username or email' ? errors?.username?.message ||
: '' 'Please enter valid username or email'
} : ''
wrapperClassName="!mb-2" }
/> wrapperClassName="!mb-2"
<Input />
placeholder="Enter password" <Input
key={'password'} placeholder="Enter password"
name={'password'} key={'password'}
id={'password'} name={'password'}
type={showPassword ? 'text' : 'password'} id={'password'}
label="Password" type={showPassword ? 'text' : 'password'}
registerMeta={{ label="Password"
required: true, registerMeta={{
maxLength: 50, required: true,
minLength: 8, maxLength: 50,
}} minLength: 8,
iconPosition="right" }}
icon={ iconPosition="right"
<VscEye icon={
title="password" <VscEye
size={16} title="password"
onClick={() => { size={16}
toggleShowPassword(!showPassword); onClick={() => {
}} toggleShowPassword(!showPassword);
/>
}
useformRef={form}
onKeyDown={_onKeyDown}
error={
errors?.password
? errors?.password?.message || 'Please enter valid password'
: ''
}
wrapperClassName="!mb-2"
/>
<div className="flex justify-end">
<a
href="#"
id="forgotPassword"
className="!text-primaryColor text-sm mb-4 -mt-1"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openForgotPassword();
}} }}
tabIndex={1} />
> }
Forgot password useformRef={form}
</a> onKeyDown={_onKeyDown}
</div> error={
<Button errors?.password
type="submit" ? errors?.password?.message || 'Please enter valid password'
text={isRequesting ? `Signing in...` : `Sign in`} : ''
onClick={handleSubmit(_onSignIn)} }
fullWidth wrapperClassName="!mb-2"
primary />
sm <div className="flex justify-end">
/>
</form>
</div>
<div className="flex-col">
<div className="text-sm mt-6 text-center">
Not have an account?
<a <a
href="#" href="#"
id="signup" id="forgotPassword"
className="font-bold underline" className="!text-primaryColor text-sm mb-2 -mt-1"
onClick={(e) => { onClick={(e) => {
if (e) e.preventDefault(); if (e) e.preventDefault();
platformContext.app.modals.openSignUp(); platformContext.app.modals.openForgotPassword();
}} }}
tabIndex={1} tabIndex={1}
> >
{' '} Forgot password
Sign Up
</a> </a>
</div> </div>
<div className="text-sm mt-6 text-center text-app-foreground-inactive"> <Button
By moving forward, you acknowledge that you have read and accept the type="submit"
<a text={isRequesting ? `Signing in...` : `Sign in`}
href="https://firecamp.io/legals/privacy-policy/" onClick={handleSubmit(_onSignIn)}
tabIndex={1} fullWidth
className="font-bold underline" primary
target={'_blank'} sm
> />
{' '} </form>
Term of Service </div>
</a>{' '} <div className="flex-col">
and <div className="text-sm mt-3 text-center">
<a Not have an account?
href="https://firecamp.io/legals/privacy-policy/" <a
tabIndex={1} href="#"
className="font-bold underline" id="signup"
target={'_blank'} className="font-bold underline px-1"
> onClick={(e) => {
{' '} if (e) e.preventDefault();
Privacy Policy platformContext.app.modals.openSignUp();
</a> }}
. tabIndex={1}
</div> >
{' '}
Sign Up
</a>
</div> </div>
</Modal.Body> <div className="text-sm mt-3 text-center text-app-foreground-inactive">
<Modal.Footer></Modal.Footer> By moving forward, you acknowledge that you have read and accept the
</> <a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline px-1"
target={'_blank'}
>
{' '}
Term of Service
</a>{' '}
and
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline px-1"
target={'_blank'}
>
{' '}
Privacy Policy
</a>
.
</div>
</div>
</Modal>
); );
}; };

293
platform/firecamp-platform/src/components/modals/auth/SignUp.tsx
View File

@@ -10,7 +10,7 @@ import platformContext from '../../../services/platform-context';
/** /**
* User Sign up * User Sign up
*/ */
const SignUp: FC<IModal> = () => { const SignUp: FC<IModal> = ({ opened, onClose }) => {
const [showPassword, toggleShowPassword] = useState(false); const [showPassword, toggleShowPassword] = useState(false);
const [isRequesting, setFlagIsRequesting] = useState(false); const [isRequesting, setFlagIsRequesting] = useState(false);
@@ -68,154 +68,155 @@ const SignUp: FC<IModal> = () => {
const _onKeyDown = (e) => e.key === 'Enter' && handleSubmit(_onSignUp); const _onKeyDown = (e) => e.key === 'Enter' && handleSubmit(_onSignUp);
return ( return (
<> <Modal opened={opened} onClose={onClose} size={440}>
<Modal.Body> {/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */}
{/* <img className="mx-auto w-12 mb-6" src={'img/firecamp-logo.svg'} /> */} <div className="-mt-4">
<div className="mb-3"> <FcLogo className="mx-auto w-14" size={80} />
<FcLogo className="mx-auto w-14" size={80} /> </div>
</div> <div className="text-xl mb-2 w-full text-center font-semibold">
<div className="text-xl mb-4 w-full text-center font-semibold"> Create a firecamp account
Create a firecamp account </div>
</div> <div className="">
<div className=""> <GithubGoogleAuth />
<GithubGoogleAuth /> </div>
</div> <div className="relative my-3 flex justify-center items-center">
<div className="mb-6 mt-6 flex justify-center items-center"> <hr className="border-t border-app-border w-full" />
<hr className="border-t border-app-border w-full" /> <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
<span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1"> OR
OR </span>
</span> </div>
</div> <div className="text-sm text-app-foreground-inactive max-w-sm mx-auto mb-3 text-center">
<div className="text-sm text-app-foreground-inactive max-w-xs mx-auto mb-6 text-center px-16"> Give us some of your information to get free access to Firecamp
Give us some of your information to get free access to Firecamp </div>
</div> <div className="">
<div className=""> <form onSubmit={handleSubmit(_onSignUp)}>
<form onSubmit={handleSubmit(_onSignUp)}> <Input
<Input placeholder="Enter Username"
placeholder="Enter Username" key={'username'}
key={'username'} name={'username'}
name={'username'} id={'username'}
id={'username'} label="Username"
label="Username" type="text"
type="text" registerMeta={{
registerMeta={{ required: true,
required: true, maxLength: 50,
maxLength: 50, minLength: 1,
minLength: 1, pattern: /^[0-9a-zA-Z ]+$/,
pattern: /^[0-9a-zA-Z ]+$/, }}
}} useformRef={form}
useformRef={form} onKeyDown={_onKeyDown}
onKeyDown={_onKeyDown} error={
error={ errors?.username
errors?.username ? errors?.username?.message || 'Please enter username'
? errors?.username?.message || 'Please enter username' : ''
: '' }
} wrapperClassName="!mb-2"
wrapperClassName="!mb-2" />
/> <Input
<Input placeholder="Enter your email"
placeholder="Enter your email" key={'email'}
key={'email'} name={'email'}
name={'email'} id={'email'}
id={'email'} label="Email"
label="Email" registerMeta={{
registerMeta={{ required: true,
required: true, maxLength: 50,
maxLength: 50, minLength: 1,
minLength: 1, pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/,
pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/, }}
}} useformRef={form}
useformRef={form} onKeyDown={_onKeyDown}
onKeyDown={_onKeyDown} error={
error={ errors?.email
errors?.email ? errors?.email?.message || 'Please enter valid username or password' : '' ? errors?.email?.message ||
} 'Please enter valid username or password'
wrapperClassName="!mb-2" : ''
/> }
<Input wrapperClassName="!mb-2"
placeholder="Enter password" />
key={'password'} <Input
name={'password'} placeholder="Enter password"
id={'password'} key={'password'}
type={showPassword ? 'text' : 'password'} name={'password'}
label="Password" id={'password'}
registerMeta={{ type={showPassword ? 'text' : 'password'}
required: true, label="Password"
maxLength: 50, registerMeta={{
minLength: 8, required: true,
}} maxLength: 50,
iconPosition="right" minLength: 8,
icon={ }}
<VscEye iconPosition="right"
title="password" icon={
size={16} <VscEye
onClick={() => { title="password"
toggleShowPassword(!showPassword); size={16}
}} onClick={() => {
/> toggleShowPassword(!showPassword);
} }}
useformRef={form} />
onKeyDown={_onKeyDown} }
error={ useformRef={form}
errors?.password onKeyDown={_onKeyDown}
? errors?.password?.message || 'Please enter valid password' error={
: '' errors?.password
} ? errors?.password?.message || 'Please enter valid password'
/> : ''
}
wrapperClassName="!mb-3"
/>
<Button <Button
type="submit" type="submit"
text={isRequesting ? 'Signing up...' : 'Sign up'} text={isRequesting ? 'Signing up...' : 'Sign up'}
onClick={handleSubmit(_onSignUp)} onClick={handleSubmit(_onSignUp)}
fullWidth fullWidth
primary primary
sm sm
/> />
</form> </form>
</div>
<div className="flex-col">
<div className="text-sm mt-3 text-center">
Already have an account
<a
href="#"
id="signup"
className="font-bold underline px-1"
onClick={(e) => {
if (e) e.preventDefault();
platformContext.app.modals.openSignIn();
}}
tabIndex={1}
>
{' '}
Sign In
</a>
</div> </div>
</Modal.Body> <div className="text-sm mt-3 text-center text-app-foreground-inactive">
<Modal.Footer> By moving forward, you acknowledge that you have read and accept the
<div className="flex-col"> <a
<div className="text-sm mt-6 text-center"> href="https://firecamp.io/legals/privacy-policy/"
Already have an account tabIndex={1}
<a className="font-bold underline px-1"
href="#" target={'_blank'}
id="signup" >
className="font-bold underline" Term of Service
onClick={(e) => { </a>
if (e) e.preventDefault(); and
platformContext.app.modals.openSignIn(); <a
}} href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1} tabIndex={1}
> className="font-bold underline px-1"
{' '} target={'_blank'}
Sign In >
</a> Privacy Policy
</div> </a>
<div className="text-sm mt-6 text-center text-app-foreground-inactive"> .
By moving forward, you acknowledge that you have read and accept the
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline"
target={'_blank'}
>
Term of Service
</a>
and
<a
href="https://firecamp.io/legals/privacy-policy/"
tabIndex={1}
className="font-bold underline"
target={'_blank'}
>
Privacy Policy
</a>
.
</div>
</div> </div>
</Modal.Footer> </div>
</> </Modal>
); );
}; };

226
platform/firecamp-platform/src/components/modals/environment/CloneEnvironment.tsx
View File

@@ -24,7 +24,7 @@ type TModalMeta = {
envId: string; envId: string;
}; };
const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => { const CloneEnvironment: FC<IModal> = ({ opened, onClose = () => {} }) => {
const { open: openTab } = useTabStore.getState(); const { open: openTab } = useTabStore.getState();
const { explorer } = useExplorerStore.getState(); const { explorer } = useExplorerStore.getState();
const { collections } = explorer; const { collections } = explorer;
@@ -113,70 +113,80 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
}); });
}; };
if (isFetching) {
return (
<Modal.Body>
<ProgressBar active={isRequesting} />
<div className="flex items-center justify-center h-full w-full">
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2 text-center">
Fetching...
</label>
</div>
</Modal.Body>
);
}
return ( return (
<> <Modal
<Modal.Header className="with-divider"> opened={opened}
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium"> onClose={onClose}
Clone Environment size={500}
</div> classNames={{
</Modal.Header> content: 'h-[750px]'
<Modal.Body> }}
<ProgressBar active={isRequesting} /> title={
<div className="p-4"> !isFetching ? (
<div className=""> <>
<div className="items-center mb-4"> <div className="text-lg leading-5 px-6 py-4 flex items-center font-medium">
<label Clone Environment
className="text-app-foreground text-sm block mb-1"
htmlFor="envBane"
>
Collection Name
</label>
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
{collection?.name}
</label>
</div> </div>
</>
<div className="items-center mb-4"> ) : (
<label <></>
className="text-app-foreground text-sm block mb-1" )
htmlFor="envBane" }
> >
Environment Name {isFetching ? (
</label> <>
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2"> <ProgressBar active={isRequesting} />
{env.name} <div className="flex items-center justify-center h-full w-full">
</label> <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2 text-center">
</div> Fetching...
</label>
<Input
autoFocus={true}
label="Enter New Name For Cloned Environment"
placeholder="new name for cloned environment"
name={'name'}
value={name}
onChange={onChangeName}
onKeyDown={() => {}}
onBlur={() => {}}
error={error.name}
// iconPosition="right"
// icon={<VscEdit />}
/>
</div> </div>
</>
) : (
<>
<ProgressBar active={isRequesting} />
<div className="p-4">
<div className="">
<div className="items-center mb-4">
<label
className="text-app-foreground text-sm block mb-1"
htmlFor="envBane"
>
Collection Name
</label>
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
{collection?.name}
</label>
</div>
{/* <div className=""> <div className="items-center mb-4">
<label
className="text-app-foreground text-sm block mb-1"
htmlFor="envBane"
>
Environment Name
</label>
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive w-full relative mb-2">
{env.name}
</label>
</div>
<Input
autoFocus={true}
label="Enter New Name For Cloned Environment"
placeholder="new name for cloned environment"
name={'name'}
value={name}
onChange={onChangeName}
onKeyDown={() => {}}
onBlur={() => {}}
error={error.name}
// iconPosition="right"
// icon={<VscEdit />}
/>
</div>
{/* <div className="">
<label <label
className="text-app-foreground text-sm mb-1 block" className="text-app-foreground text-sm mb-1 block"
htmlFor="variables" htmlFor="variables"
@@ -194,59 +204,55 @@ const CloneEnvironment: FC<IModal> = ({ onClose = () => {} }) => {
</span> </span>
</div> */} </div> */}
<div className="mt-4"> <div className="mt-4">
<label <label
className="text-app-foreground text-sm mb-1 block" className="text-app-foreground text-sm mb-1 block"
htmlFor="variables" htmlFor="variables"
> >
Variables Variables
</label> </label>
<span className="text-sm font-normal text-app-foreground-inactive block mt-1"> <span className="text-sm font-normal text-app-foreground-inactive block mt-1">
Variables will be valid JSON in key-value pair. ex.{' '} Variables will be valid JSON in key-value pair. ex.{' '}
{`{ "host": "https://myapi.com" }`} {`{ "host": "https://myapi.com" }`}
</span> </span>
<Editor <Editor
language={EEditorLanguage.Json} language={EEditorLanguage.Json}
value={env.variables} value={env.variables}
onChange={() => {}} onChange={() => {}}
readOnly={true} readOnly={true}
disabled={true} disabled={true}
height={'280px'} height={'280px'}
monacoOptions={{ monacoOptions={{
extraEditorClassName: `border border-input-border rounded-sm p-2 leading-5 extraEditorClassName: `border border-input-border rounded-sm p-2 leading-5
outline-none placeholder-input-placeholder outline-none placeholder-input-placeholder
text-base focus:bg-input-background-focus w-full text-base focus:bg-input-background-focus w-full
bg-input-background`, bg-input-background`,
fontSize: '14px', fontSize: '14px',
height: '250px', height: '250px',
wordWrap: 'off', wordWrap: 'off',
readOnly: true, readOnly: true,
}} }}
className="!h-80" className="!h-80"
/> />
</div>
</div> </div>
</div> <div className="p-4">
<div className="p-4"> <TabHeader className="!p-0">
<TabHeader className="!p-0"> <TabHeader.Right>
<TabHeader.Right> <Button text="Cancel" onClick={(e) => onClose()} ghost xs />
<Button <Button
text="Cancel" text={isRequesting ? 'Cloning...' : 'Clone Environment'}
onClick={(e) => onClose()} onClick={onCreate}
ghost disabled={isRequesting}
xs primary
/> xs
<Button />
text={isRequesting ? 'Cloning...' : 'Clone Environment'} </TabHeader.Right>
onClick={onCreate} </TabHeader>
disabled={isRequesting} </div>
primary </>
xs )}
/> </Modal>
</TabHeader.Right>
</TabHeader>
</div>
</Modal.Body>
</>
); );
}; };

31
platform/firecamp-platform/src/components/modals/organization/OrgManagement.tsx
View File

@@ -11,7 +11,7 @@ import {
import { _misc } from '@firecamp/utils'; import { _misc } from '@firecamp/utils';
import { VscEdit } from '@react-icons/all-files/vsc/VscEdit'; import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => { const OrgManagement: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
// let { create, checkNameAvailability } = useWorkspaceStore((s: IWorkspaceStore)=>({ // let { create, checkNameAvailability } = useWorkspaceStore((s: IWorkspaceStore)=>({
// create: s.create, // create: s.create,
// checkNameAvailability: s.checkNameAvailability // checkNameAvailability: s.checkNameAvailability
@@ -38,13 +38,20 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
}; };
return ( return (
<> <Modal
<Modal.Header> opened={opened}
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium border-b border-app-border "> onClose={onClose}
size={600}
classNames={{
body: 'h-[80vh]',
}}
title={
<div className="text-lg leading-5 px-6 flex items-center font-medium">
Organization Management Organization Management
</div> </div>
</Modal.Header> }
<Modal.Body> >
<>
<SecondaryTab <SecondaryTab
className="flex items-center p-4 pb-0" className="flex items-center p-4 pb-0"
list={tabs} list={tabs}
@@ -52,8 +59,8 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
onSelect={setActiveTab} onSelect={setActiveTab}
/> />
{renderTab(activeTab)} {renderTab(activeTab)}
</Modal.Body> </>
<Modal.Footer className="!py-3 border-t border-app-border "> <div className="!py-3 border-t border-app-border ">
<TabHeader> <TabHeader>
<TabHeader.Right> <TabHeader.Right>
<Button text="Cancel" onClick={(e) => onClose(e)} ghost xs /> <Button text="Cancel" onClick={(e) => onClose(e)} ghost xs />
@@ -66,8 +73,8 @@ const OrgManagement: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
/> />
</TabHeader.Right> </TabHeader.Right>
</TabHeader> </TabHeader>
</Modal.Footer> </div>
</> </Modal>
); );
}; };
export default OrgManagement; export default OrgManagement;
@@ -79,11 +86,11 @@ const EditInfoTab: FC<any> = () => {
}); });
return ( return (
<div className="p-6"> <div className="px-6 py-3">
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2"> <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
ADD NEW WORKSPACE INFO ADD NEW WORKSPACE INFO
</label> </label>
<div className="mt-8"> <div className="mt-4">
<Input <Input
autoFocus={true} autoFocus={true}
label="Name" label="Name"

29
platform/firecamp-platform/src/components/modals/organization/SwitchOrg.tsx
View File

@@ -5,7 +5,7 @@ import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
import { usePlatformStore } from '../../../store/platform'; import { usePlatformStore } from '../../../store/platform';
import platformContext from '../../../services/platform-context'; import platformContext from '../../../services/platform-context';
const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => { const SwitchOrg: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
const { setSwitchingOrg } = usePlatformStore((s) => ({ const { setSwitchingOrg } = usePlatformStore((s) => ({
setSwitchingOrg: s.setSwitchingOrg, setSwitchingOrg: s.setSwitchingOrg,
})); }));
@@ -13,7 +13,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
const [orgs, setOrgs] = useState([]); const [orgs, setOrgs] = useState([]);
useEffect(() => { useEffect(() => {
if (!isOpen) return; if (!opened) return;
setFetchOrgFlag(true); setFetchOrgFlag(true);
Rest.organization Rest.organization
.getMyOrganizations() .getMyOrganizations()
@@ -41,7 +41,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
else else
return ( return (
<> <>
<div className="p-4"> <div className="py-4">
<div className="text-sm"> <div className="text-sm">
<label className="font-semibold text-app-foreground uppercase"> <label className="font-semibold text-app-foreground uppercase">
Please select organization to switch Please select organization to switch
@@ -53,7 +53,7 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
</span> </span>
</div> </div>
</div> </div>
<div className="pl-4 pb-4 pr-2 overflow-auto visible-scrollbar h-80 mr-2"> <div className="pb-4 overflow-auto visible-scrollbar h-80">
{orgs.map((org, i) => ( {orgs.map((org, i) => (
<div <div
className="card relative flex items-center p-2 mb-2 text-base font-semibold border border-app-border cursor-pointer hover:border-focusBorder after:absolute after:top-0 after:left-0 after:bottom-0 after:right-0 hover:after:bg-focusBorder after:opacity-10 " className="card relative flex items-center p-2 mb-2 text-base font-semibold border border-app-border cursor-pointer hover:border-focusBorder after:absolute after:top-0 after:left-0 after:bottom-0 after:right-0 hover:after:bg-focusBorder after:opacity-10 "
@@ -83,17 +83,20 @@ const SwitchOrg: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
}; };
return ( return (
<> <Modal
<Modal.Header className="with-divider"> opened={opened}
<div className="text-lg leading-5 p-4 flex items-center font-medium"> onClose={onClose}
size={440}
classNames={{ content: '!pb-6' }}
title={
<div className="text-lg leading-5 px-4 flex items-center font-medium">
Switch Organization Switch Organization
</div> </div>
</Modal.Header> }
<Modal.Body> >
<ProgressBar active={isFetchingOrgs} /> <ProgressBar active={isFetchingOrgs} />
{renderBody(isFetchingOrgs)} {renderBody(isFetchingOrgs)}
</Modal.Body> </Modal>
</>
); );
}; };

33
platform/firecamp-platform/src/components/modals/request/edit-request/EditRequest.tsx
View File

@@ -24,10 +24,8 @@ type TModalMeta = {
}; };
const EditRequest: FC<IModal> = ({ const EditRequest: FC<IModal> = ({
isOpen = false, opened = false,
onClose = () => {}, onClose = () => {},
height = '732px',
width = '500px',
}) => { }) => {
const { name, description, requestId, requestType, collectionId, folderId } = const { name, description, requestId, requestType, collectionId, folderId } =
useModalStore.getState().__meta as TModalMeta; useModalStore.getState().__meta as TModalMeta;
@@ -82,18 +80,25 @@ const EditRequest: FC<IModal> = ({
}; };
return ( return (
<> <Modal
<Modal.Header className="with-divider"> opened={opened}
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium display-block"> onClose={onClose}
{/* Update Request Info */} size={450}
title={
<div className="text-lg leading-5 px-6 flex items-center font-medium display-block">
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mt-2"> <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mt-2">
Update Request Info Update Request Info
</label> </label>
</div> </div>
</Modal.Header> }
<Modal.Body> classNames={{
content: 'h-[600px]',
body: 'p-0',
}}
>
<>
<ProgressBar active={isRequesting} /> <ProgressBar active={isRequesting} />
<div className="p-6 !pb-0"> <div className="p-6 !pb-0 mx-4 ">
<div className=""> <div className="">
<Input <Input
autoFocus={true} autoFocus={true}
@@ -125,9 +130,9 @@ const EditRequest: FC<IModal> = ({
// icon={<VscEdit />} // icon={<VscEdit />}
/> />
</div> </div>
</Modal.Body> </>
<Modal.Footer className="!py-3 border-t border-app-border"> <div className="!py-3 border-t border-app-border">
<TabHeader className="px-6"> <TabHeader className="px-6">
<TabHeader.Right> <TabHeader.Right>
<Button text="Cancel" onClick={(e) => onClose()} ghost xs /> <Button text="Cancel" onClick={(e) => onClose()} ghost xs />
@@ -140,8 +145,8 @@ const EditRequest: FC<IModal> = ({
/> />
</TabHeader.Right> </TabHeader.Right>
</TabHeader> </TabHeader>
</Modal.Footer> </div>
</> </Modal>
); );
}; };

27
platform/firecamp-platform/src/components/modals/workspace/SwitchWorkspace.tsx
View File

@@ -6,7 +6,7 @@ import { usePlatformStore } from '../../../store/platform';
import './workspace.scss'; import './workspace.scss';
const SwitchWorkspace: FC<IModal> = ({ const SwitchWorkspace: FC<IModal> = ({
isOpen = false, opened = false,
onClose = () => {}, onClose = () => {},
}) => { }) => {
const { switchingOrg, unsetSwitchingOrg } = usePlatformStore((s) => ({ const { switchingOrg, unsetSwitchingOrg } = usePlatformStore((s) => ({
@@ -17,7 +17,7 @@ const SwitchWorkspace: FC<IModal> = ({
const [workspaces, setWorkspaces] = useState([]); const [workspaces, setWorkspaces] = useState([]);
useEffect(() => { useEffect(() => {
if (!isOpen) return () => {}; if (!opened) return () => {};
const orgId = localStorage.getItem('switchToOrg'); const orgId = localStorage.getItem('switchToOrg');
setFetchWrsFlag(true); setFetchWrsFlag(true);
Rest.organization Rest.organization
@@ -50,7 +50,7 @@ const SwitchWorkspace: FC<IModal> = ({
else else
return ( return (
<> <>
<div className="p-4"> <div className="py-4 ">
<div className="text-sm"> <div className="text-sm">
<label className="font-semibold text-app-foreground-inactive block"> <label className="font-semibold text-app-foreground-inactive block">
{switchingOrg?.name} {switchingOrg?.name}
@@ -63,7 +63,7 @@ const SwitchWorkspace: FC<IModal> = ({
</span> </span>
</div> </div>
</div> </div>
<div className="pl-4 pb-4 pr-2 overflow-auto visible-scrollbar h-80 mr-2"> <div className="pb-4 overflow-auto visible-scrollbar h-80 mr-1">
{workspaces.map((w) => ( {workspaces.map((w) => (
<WorkspaceCard <WorkspaceCard
key={w.__ref.id} key={w.__ref.id}
@@ -83,18 +83,21 @@ const SwitchWorkspace: FC<IModal> = ({
}; };
return ( return (
<> <Modal
<Modal.Header className="with-divider"> opened={opened}
<div className="text-lg leading-5 p-4 flex items-center font-medium"> onClose={onClose}
size={440}
title={
<div className="text-lg leading-5 flex items-center font-medium">
Switch Workspace Switch Workspace
</div> </div>
</Modal.Header> }
<Modal.Body> >
<>
<ProgressBar active={isFetchingWrs} /> <ProgressBar active={isFetchingWrs} />
{renderBody(isFetchingWrs)} {renderBody(isFetchingWrs)}
</Modal.Body> </>
<Modal.Footer></Modal.Footer> </Modal>
</>
); );
}; };

25
platform/firecamp-platform/src/components/modals/workspace/WorkspaceManagement.tsx
View File

@@ -18,7 +18,7 @@ enum ETabTypes {
Members = 'members', Members = 'members',
} }
const WorkspaceManagement: FC<IModal> = ({ const WorkspaceManagement: FC<IModal> = ({
isOpen = false, opened = false,
onClose = () => {}, onClose = () => {},
}) => { }) => {
let { workspace } = useWorkspaceStore((s: IWorkspaceStore) => ({ let { workspace } = useWorkspaceStore((s: IWorkspaceStore) => ({
@@ -104,18 +104,25 @@ const WorkspaceManagement: FC<IModal> = ({
}; };
return ( return (
<> <Modal
<Modal.Header className="with-divider"> opened={opened}
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium"> onClose={onClose}
title={
<div className="text-lg leading-5 px-2 flex items-center font-medium">
Workspace Management Workspace Management
</div> </div>
</Modal.Header> }
<Modal.Body> size={550}
classNames={{
body: '!p-4 h-[450px]'
}}
>
<>
<ProgressBar active={isRequesting} /> <ProgressBar active={isRequesting} />
<Container> <Container>
<Container.Header> <Container.Header>
<SecondaryTab <SecondaryTab
className="flex items-center !pt-3 w-full" className="flex items-center w-full"
list={tabs} list={tabs}
activeTab={activeTab} activeTab={activeTab}
onSelect={(tabId: ETabTypes) => setActiveTab(tabId)} onSelect={(tabId: ETabTypes) => setActiveTab(tabId)}
@@ -123,8 +130,8 @@ const WorkspaceManagement: FC<IModal> = ({
</Container.Header> </Container.Header>
<Container.Body>{renderTab(activeTab)}</Container.Body> <Container.Body>{renderTab(activeTab)}</Container.Body>
</Container> </Container>
</Modal.Body> </>
</> </Modal>
); );
}; };

24
platform/firecamp-platform/src/components/modals/workspace/invite-members/InviteMembers.tsx
View File

@@ -12,7 +12,7 @@ enum EInviteMemberTabs {
OrgMembers = 'orgMembers', OrgMembers = 'orgMembers',
} }
const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => { const InviteMembers: FC<IModal> = ({ opened = false, onClose = () => {} }) => {
const [isFetchingMembers, setIsFetchingMembers] = useState(false); const [isFetchingMembers, setIsFetchingMembers] = useState(false);
const [orgMembers, setOrgMembers] = useState([]); const [orgMembers, setOrgMembers] = useState([]);
@@ -86,14 +86,21 @@ const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
}, [activeTab]); }, [activeTab]);
return ( return (
<> <Modal
<Modal.Header className="border-b border-app-border"> opened={opened}
<div className="text-lg leading-5 px-6 py-4 flex items-center font-medium"> onClose={onClose}
size={576}
classNames={{
content: 'h-[700px]',
body: 'h-[480px]'
}}
title={
<div className="text-lg leading-5 px-1 flex items-center font-medium">
Invite Members To Join The Workspace Invite Members To Join The Workspace
</div> </div>
</Modal.Header> }
<Modal.Body scrollbar={false}> >
<div className="p-4 h-fit flex flex-col"> <div className="!pt-4 h-fit flex flex-col">
<SecondaryTab <SecondaryTab
className="flex items-center pb-6 -ml-2" className="flex items-center pb-6 -ml-2"
list={tabs} list={tabs}
@@ -114,8 +121,7 @@ const InviteMembers: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
/> />
)} )}
</div> </div>
</Modal.Body> </Modal>
</>
); );
}; };
export default InviteMembers; export default InviteMembers;

2
platform/firecamp-platform/src/components/modals/workspace/invite-members/tabs/InviteOrgMembers.tsx
View File

@@ -50,7 +50,7 @@ const InviteOrgMembers: FC<IProps> = ({
const _role = RoleOptions.find((r) => r.id == member.role); const _role = RoleOptions.find((r) => r.id == member.role);
return ( return (
<Container className="gap-2"> <Container className="gap-3">
<Container.Header className="text-base font-semibold leading-3 text-app-foreground-inactive p-6"> <Container.Header className="text-base font-semibold leading-3 text-app-foreground-inactive p-6">
Invite your team colleagues to join the workspace. Invite your team colleagues to join the workspace.
</Container.Header> </Container.Header>

5
platform/firecamp-platform/src/components/modals/workspace/tabs/EditInfoTab.tsx
View File

@@ -11,7 +11,7 @@ const EditInfoTab: FC<any> = ({
close, close,
}) => { }) => {
return ( return (
<div className="py-6 px-3 flex-1 flex flex-col"> <div className="p-3 flex-1 flex flex-col">
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2"> <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
UPDATE WORKSPACE INFO UPDATE WORKSPACE INFO
</label> </label>
@@ -29,12 +29,13 @@ const EditInfoTab: FC<any> = ({
// error={error.name} // error={error.name}
// iconPosition="right" // iconPosition="right"
// icon={<VscEdit />} // icon={<VscEdit />}
wrapperClassName='!mb-3'
/> />
</div> </div>
<TextArea <TextArea
type="text" type="text"
minHeight="200px" minHeight="180px"
label="Description (optional)" label="Description (optional)"
labelClassName="fc-input-label" labelClassName="fc-input-label"
placeholder="Description" placeholder="Description"

58
platform/firecamp-platform/src/components/prompt/Confirm.tsx
View File

@@ -38,35 +38,39 @@ const ConfirmationModal: FC<IConfirm> = ({
return ( return (
<Modal <Modal
isOpen={state.isOpen} opened={state.isOpen}
onClose={_close} onClose={_close}
width={'400px'} size={400}
className="min-h-0" classNames={{
header: 'border-0',
body: 'px-6',
content: 'min-h-0',
}}
title={
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative px-2">
{`CONFIRMATION Required.`}
</label>
}
> >
<Modal.Body> <div>
<div className="px-2 py-4"> <div className="mb-4">{title}</div>
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2"> <TabHeader className="!px-0">
{`CONFIRMATION Required.`} <TabHeader.Right>
</label> <Button
<div className="my-4">{title}</div> text={texts?.btnCancel || `Cancel`}
<TabHeader className="!px-0"> onClick={_close}
<TabHeader.Right> secondary
<Button xs
text={texts?.btnCancel || `Cancel`} />
onClick={_close} <Button
secondary text={texts?.btnConfirm || 'Confirm'}
xs onClick={_onConfirm}
/> primary
<Button xs
text={texts?.btnConfirm || 'Confirm'} />
onClick={_onConfirm} </TabHeader.Right>
primary </TabHeader>
xs </div>
/>
</TabHeader.Right>
</TabHeader>
</div>
</Modal.Body>
</Modal> </Modal>
); );
}; };

88
platform/firecamp-platform/src/components/prompt/PromptInput.tsx
View File

@@ -81,51 +81,55 @@ export const PromptInput: FC<IPromptInput> = ({
return ( return (
<Modal <Modal
isOpen={state.isOpen} opened={state.isOpen}
onClose={_close} onClose={_close}
className="min-h-0" size={400}
width={'400px'} classNames={{
header: 'border-0 pb-0',
body: 'px-6',
content: 'min-h-0',
}}
title={
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative px-2">
{header || `THIS IS A HEADER PLACE`}
</label>
}
> >
<Modal.Body> <ProgressBar active={state.isExecuting} />
<ProgressBar active={state.isExecuting} /> <div className="pt-4">
<div className="px-2 py-4"> <div className="">
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2"> <Input
{header || `THIS IS A HEADER PLACE`} autoFocus={true}
</label> label={label}
<div className="mt-4"> placeholder={placeholder}
<Input name={'promptInput'}
autoFocus={true} value={state.value}
label={label} onChange={_onChangeValue}
placeholder={placeholder} onKeyDown={_onKeyDown}
name={'promptInput'} onBlur={() => {}}
value={state.value} error={state.error}
onChange={_onChangeValue} />
onKeyDown={_onKeyDown}
onBlur={() => {}}
error={state.error}
/>
</div>
<TabHeader className="!px-0">
<TabHeader.Right>
<Button
text={texts?.btnCancel || `Cancel`}
onClick={_close}
ghost
xs
/>
<Button
text={
state.isExecuting ? texts?.btnOking : texts?.btnOk || 'Create'
}
onClick={_onClickOk}
disabled={state.isExecuting}
primary
xs
/>
</TabHeader.Right>
</TabHeader>
</div> </div>
</Modal.Body> <TabHeader className="!px-0">
<TabHeader.Right>
<Button
text={texts?.btnCancel || `Cancel`}
onClick={_close}
ghost
xs
/>
<Button
text={
state.isExecuting ? texts?.btnOking : texts?.btnOk || 'Create'
}
onClick={_onClickOk}
disabled={state.isExecuting}
primary
xs
/>
</TabHeader.Right>
</TabHeader>
</div>
</Modal> </Modal>
); );
}; };

27
platform/firecamp-platform/src/components/prompt/PromptSaveItem.tsx
View File

@@ -90,19 +90,22 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
texts = { ..._texts, ...texts }; texts = { ..._texts, ...texts };
return ( return (
<Modal <Modal
isOpen={state.isOpen} opened={state.isOpen}
onClose={_close} onClose={_close}
width={'400px'} size={400}
className="p-6" classNames={{
> header: 'border-0 px-6 pt-6 pb-0',
<ProgressBar active={state.isExecuting} />
<Modal.Header> }}
title={
<label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2"> <label className="text-sm font-semibold leading-3 block text-app-foreground-inactive uppercase w-full relative mb-2">
{header || `THIS IS A HEADER PLACE`} {header || `THIS IS A HEADER PLACE`}
</label> </label>
</Modal.Header> }
<Modal.Body> >
<div> <ProgressBar active={state.isExecuting} />
<>
<div className='h-[340px] pt-4'>
<div className="mt-4"> <div className="mt-4">
<Input <Input
autoFocus={true} autoFocus={true}
@@ -124,8 +127,8 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
collection={collection} collection={collection}
/> />
</div> </div>
</Modal.Body> </>
<Modal.Footer className="!pt-4"> <div className="!pt-4">
<TabHeader className="!px-0"> <TabHeader className="!px-0">
<TabHeader.Right> <TabHeader.Right>
<Button <Button
@@ -145,7 +148,7 @@ export const PromptSaveItem: FC<IPromptSaveItem> = ({
/> />
</TabHeader.Right> </TabHeader.Right>
</TabHeader> </TabHeader>
</Modal.Footer> </div>
</Modal> </Modal>
); );
}; };

2
platform/firecamp-platform/src/components/tabs/header/Menu.tsx
View File

@@ -81,7 +81,7 @@ const Menu: FC = () => {
onSelect={(v) => v.onClick()} onSelect={(v) => v.onClick()}
classNames={{ classNames={{
dropdown: '!pt-0 -ml-2 border-focusBorder', dropdown: '!pt-0 -ml-2 border-focusBorder',
label: 'uppercase font-sans', label: 'uppercase',
item: '!px-5' item: '!px-5'
}} }}
menuProps={{ menuProps={{

41
platform/firecamp-platform/src/types.ts
View File

@@ -56,47 +56,6 @@ export enum EPlatformModalTypes {
SslNProxy = 'sslNProxy', SslNProxy = 'sslNProxy',
} }
export const EPlatformModalDefaultProps = {
// organization
[EPlatformModalTypes.OrgManagement]: { height: '80vh', width: '600px' },
[EPlatformModalTypes.SwitchOrg]: { width: '440px', className: 'p-0 !pb-6' },
// workspace
[EPlatformModalTypes.WorkspaceManagement]: {
height: '650px',
width: '550px',
},
[EPlatformModalTypes.InviteMembers]: { height: '700px' },
[EPlatformModalTypes.SwitchWorkspace]: {
width: '440px',
className: 'p-0 !pb-6',
},
// request
[EPlatformModalTypes.EditRequest]: { height: '600px', width: '450px' },
// environment
[EPlatformModalTypes.CloneEnvironment]: { height: '750px', width: '500px' },
// auth
[EPlatformModalTypes.SignIn]: { width: '440px', className: 'p-4' },
[EPlatformModalTypes.SignInWithEmail]: { width: '440px', className: 'p-4' },
[EPlatformModalTypes.SignUp]: { width: '440px', className: 'p-4' },
[EPlatformModalTypes.RefreshToken]: { modalConfig: { closeOnEsc: false } },
[EPlatformModalTypes.ForgotPassword]: { width: '440px', className: 'p-4' },
[EPlatformModalTypes.ResetPassword]: { width: '440px', className: 'p-4' },
// user
[EPlatformModalTypes.UserProfile]: {},
// cookie
[EPlatformModalTypes.CookieManager]: {},
// ssl & proxy
[EPlatformModalTypes.SslNProxy]: {},
};
export enum ECloudApiHeaders { export enum ECloudApiHeaders {
Authorization = 'Authorization', Authorization = 'Authorization',
SocketId = 'X-Socket-Id', SocketId = 'X-Socket-Id',

1
platform/firecamp-ui/package.json
View File

@@ -110,7 +110,6 @@
"react-complex-tree": "^2.0.0", "react-complex-tree": "^2.0.0",
"react-hook-form": "^6.8.1", "react-hook-form": "^6.8.1",
"react-reflex": "^4.0.3", "react-reflex": "^4.0.3",
"react-responsive-modal": "^6.2.0",
"react-table": "7.8.0", "react-table": "7.8.0",
"react-tiny-popover": "^7.0.1", "react-tiny-popover": "^7.0.1",
"react-window": "^1.8.5", "react-window": "^1.8.5",

1
platform/firecamp-ui/src/components/buttons/Button.tsx
View File

@@ -7,7 +7,6 @@ const useStyles = createStyles(
(theme, { variant, color, primary, secondary, transparent, animate }: IButton) => ({ (theme, { variant, color, primary, secondary, transparent, animate }: IButton) => ({
root: { root: {
display: 'flex', display: 'flex',
fontFamily: 'sans-serif',
fontWeight: 'normal', fontWeight: 'normal',
...(!animate ? { ':active': { transform: 'none' } }: {}), ...(!animate ? { ':active': { transform: 'none' } }: {}),

6
platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx
View File

@@ -318,7 +318,7 @@ export const BodyTab = () => {
onSelect={(value: any) => setSelected(value.name)} onSelect={(value: any) => setSelected(value.name)}
classNames={{ classNames={{
dropdown: 'pt-0 pb-2 -mt-2', dropdown: 'pt-0 pb-2 -mt-2',
label: 'uppercase pl-2 font-sans', label: 'uppercase pl-2',
item: '!px-4', item: '!px-4',
}} }}
width={144} width={144}
@@ -703,7 +703,7 @@ export const EnvCollectionOption = () => {
onSelect={(v) => setSelected(v.name)} onSelect={(v) => setSelected(v.name)}
classNames={{ classNames={{
dropdown: '!pt-0 !pb-2 ', dropdown: '!pt-0 !pb-2 ',
label: 'uppercase font-sans', label: 'uppercase ',
item: '!px-5', item: '!px-5',
}} }}
sm sm
@@ -728,7 +728,7 @@ export const MemberRoleSelection = () => {
)} )}
classNames={{ classNames={{
dropdown: '!py-0', dropdown: '!py-0',
label: 'uppercase font-sans !text-start', label: 'uppercase !text-start',
}} }}
sm sm
options={[ options={[

21
platform/firecamp-ui/src/components/modal/Modal.scss
View File

@@ -1,21 +0,0 @@
/*-----Modal css Start------------*/
.react-responsive-modal-modal {
padding: 0px;
}
.react-responsive-modal-closeButton {
z-index: 99999;
}
a.border {
border-color: inherit !important;
}
.fc-modal-wrapper {
display: flex;
flex-direction: column;
max-height: 90vh;
min-height: 400px;
}
/*-----Modal css End------------*/

41
platform/firecamp-ui/src/components/modal/Modal.stories.mdx
View File

@@ -7,43 +7,12 @@ import LinkTo from '@storybook/addon-links/react';
Modal : To create modals Modal : To create modals
- Consists of sub-section like : - Consists of section like :
- header - header (includes title)
- body - body
- footer
- Any of the section can be used individually as well.
#### **Component Usage**: #### **Component Usage**:
Use `Modal` as wrapper to use single/multiple sub sections <br/> - The Modal component is implemented using MantineModal.
Modal is created using `react-responsive-modal` - It shares the same prop usage as described in the documentation for MantineModal.
- It is essential to supply values for the "opened" prop and the "onClose" prop to control the modal's visibility and handle the close event, respectively.
| Component | Description |
| ------------ | -------------------------------------------------------------- |
| Modal | Wrapper for which takes height & width of its parent component |
| Modal.Header | section for the header having height of its content |
| Modal.Body | section for the body having the height of its content |
| Modal.Footer | section for the footer having height of its content |
#### **Best Practices**:
Do:
```
<Modal>
<Modal.Header>
Header Section
</Modal.Header>
<Modal.Body>
<component> Body Section </component>
</Modal.Body>
<Modal.Footer>
Footer Section
</Modal.Footer>
</Modal>
```
- #### **Examples**:
- <LinkTo kind="ui-kit-modal--modal-demo" className="!text-primaryColor">
Modal Examples
</LinkTo>

191
platform/firecamp-ui/src/components/modal/Modal.stories.tsx
View File

@@ -1,118 +1,113 @@
import { useState } from "react"; import { useState } from 'react';
import { VscGithub } from "@react-icons/all-files/vsc/VscGithub"; import { VscGithub } from '@react-icons/all-files/vsc/VscGithub';
import { VscLock } from "@react-icons/all-files/vsc/VscLock"; import { VscLock } from '@react-icons/all-files/vsc/VscLock';
import { VscAccount } from "@react-icons/all-files/vsc/VscAccount"; import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
import { GrGoogle } from "@react-icons/all-files/gr/GrGoogle";
import { default as Modal } from './Modal'; import { Modal, Button, FormField, Input, IModal } from '@firecamp/ui';
import { default as Button } from '../buttons/Button';
import { default as FormField } from '../form/FormField';
import { default as Input } from '../input/Input';
export default { export default {
title: "UI-Kit/Modal", title: 'UI-Kit/Modal',
component: Modal, component: Modal,
argTypes: { argTypes: {
className: "" className: '',
} },
}; };
const Template = (args: any) => { const Template = ({ opened, ...args }: IModal) => {
const [isOpen, toggleOpen] = useState(true); const [isOpen, openModal] = useState(opened);
return <div className="bg-app-background h-screen w-screen block"> return (
<Button text="Open Modal" onClick={() => toggleOpen(true)} /> <div>
<Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}> <Button text="Open Modal" onClick={() => openModal(true)} />
<Modal.Header > <Modal opened={isOpen} onClose={() => openModal(false)} {...args} />
{args?.header() || ''}
</Modal.Header>
<Modal.Body >
{args?.body() || ''}
</Modal.Body>
<Modal.Footer >
{args?.footer() || ''}
</Modal.Footer>
</Modal>
</div> </div>
);
}; };
export const ModalDemo = Template.bind({}); export const ModalDemo = Template.bind({});
ModalDemo.args = { ModalDemo.args = {
className: 'test', opened: true,
header: () => <ModalHeader />, title: <div>SignIn to Firecamp</div>,
body: () => <ModalBody />, children: <FormPreview />,
footer: () => <ModalFooter />
}; };
export const SignUpDemo = Template.bind({}); export const ModalTitleWithoutBorder = Template.bind({});
ModalTitleWithoutBorder.args = {
SignUpDemo.args = { opened: true,
className: 'test', title: <div>SignIn to Firecamp</div>,
header: () => <SignUpHeader />, classNames: {
body: () => <SignUpBody />, header: 'border-0',
footer: () => <SignUpFooter /> },
children: <FormPreview />,
};
export const ModalContentOverflow = Template.bind({});
ModalContentOverflow.args = {
opened: true,
title: <div>SignIn to Firecamp</div>,
children: (
<>
<FormPreview overflowContent />
<FormPreview overflowContent />
</>
),
}; };
const SignUpHeader = () => { function FormPreview({ overflowContent = false }) {
return ( return (
<div className="text-modal-foreground-active text-lg text-center mb-6">sign in to your firecamp account</div> <div className="pt-6">
) <div>
} <div className="">
<a
const SignUpBody = () => { href="#"
return ( className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"
<div> >
<div className="" > {' '}
<div className="text-center w-full mb-5">new to firecamp? <a className="text-primaryColor cursor-pointer">sign up</a></div> <VscGithub size={20} className="mr-2" /> continue with{' '}
<a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <VscGithub size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">github</span></a> <span className="text-modal-foreground-active ml-2">github</span>
<a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <GrGoogle size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">google</span></a> </a>
</div>
<hr className="border-modal-border -ml-8 -mr-8 mb-6" />
<div className="">
<FormField label="Username or E-mail" >
<Input
placeholder='Username or E-mail'
iconPosition='left'
icon={<VscAccount title="Account" size={16} />} />
</FormField>
<FormField label="password">
<Input placeholder='password' iconPosition='left' icon={<VscLock title="Account" size={16} />} />
</FormField>
<Button text="sign in" fullWidth primary sm/>
<a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm -mt-4">Already have an account? Sign In</a>
</div>
</div> </div>
)
}
const SignUpFooter = () => { <div className="relative my-4 flex justify-center items-center">
return ( <hr className="border-t border-app-border w-full" />
<div className="text-sm mt-6"> <span className="text-xs text-app-foreground-inactive bg-modal-background absolute px-1">
By moving forward, you acknowledge that you have read and accept the <a className="text-modal-foreground-active cursor-pointer">Terms of Service</a> and <a className="text-modal-foreground-active">Privacy Policy.</a> OR
</span>
</div> </div>
) <div className="">
} <div className="text-center w-full text-sm mb-5">
Sign in again to continue
const ModalHeader = () => { </div>
return ( <FormField label="Username or E-mail">
<div className="text-modal-foreground-active text-lg mb-6">Modal Header</div> <Input
) value="dnishchit@gmail.com"
} iconPosition="left"
icon={<VscAccount title="Account" size={16} />}
const ModalBody = () => { />
return ( </FormField>
<div> <FormField label="password">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <Input
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum placeholder="password"
iconPosition="left"
icon={<VscLock title="Account" size={16} />}
/>
</FormField>
<a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm">
Forgot Password?
</a>
<Button text="sign in" fullWidth primary sm />
</div> </div>
) </div>
}
const ModalFooter = () => { {overflowContent ? (
return ( <>
<div className="text-sm mt-6"> <hr className="border-modal-border -ml-8 -mr-8 mb-6 mt-6" />
Modal Footer <div className="text-sm mt-6">
</div> <div className="text-center">SignOut Forcefully</div>
) </div>
} </>
) : (
<></>
)}
</div>
);
}

135
platform/firecamp-ui/src/components/modal/Modal.test.tsx
View File

@@ -1,88 +1,85 @@
import { useState } from "react"; // TODO : update tests based on new button
import "@testing-library/jest-dom";
import { screen, render, waitFor } from "@testing-library/react";
import { default as Modal } from './Modal';
import Button from "../buttons/Button";
import { click } from "../../../__mocks__/eventMock";
const Template = (args: any) => { // import { useState } from "react";
const [isOpen, toggleOpen] = useState(true); // import "@testing-library/jest-dom";
// import { screen, render, waitFor } from "@testing-library/react";
// import { default as Modal } from './Modal';
// import Button from "../buttons/Button";
// import { click } from "../../../__mocks__/eventMock";
return <div className="bg-app-background h-screen w-screen block"> // const Template = (args: any) => {
<Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} /> // const [isOpen, toggleOpen] = useState(true);
<Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
<Modal.Header>
<div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
</Modal.Header>
<Modal.Body >
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</Modal.Body>
<Modal.Footer>
<div className="text-sm mt-6">
Modal Footer
</div>
</Modal.Footer>
</Modal>
</div>
};
describe("Modal component", () => { // return <div className="bg-app-background h-screen w-screen block">
// <Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} />
// <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
// <Modal.Header>
// <div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
// </Modal.Header>
// <Modal.Body >
// <div>
// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
// Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
// </div>
// </Modal.Body>
// <Modal.Footer>
// <div className="text-sm mt-6">
// Modal Footer
// </div>
// </Modal.Footer>
// </Modal>
// </div>
// };
test("Validating child element count and styles of modal wrapper", () => { // describe("Modal component", () => {
render(<Template id={'modal-container-div'} />);
const ModalContainer = screen.queryByTestId('root'); // test("Validating child element count and styles of modal wrapper", () => {
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div'); // render(<Template id={'modal-container-div'} />);
expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper'); // const ModalContainer = screen.queryByTestId('root');
expect(ModalContainerDiv.childElementCount).toBe(3); // const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
// expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper');
// expect(ModalContainerDiv.childElementCount).toBe(3);
}); // });
test("Validating default classnames for modal children elements", () => { // test("Validating default classnames for modal children elements", () => {
render(<Template id={'modal-container-div'} />); // render(<Template id={'modal-container-div'} />);
const ModalContainer = screen.queryByTestId('root'); // const ModalContainer = screen.queryByTestId('root');
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div'); // const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
const ModalContainerElements = ModalContainerDiv.children; // const ModalContainerElements = ModalContainerDiv.children;
//Header - dont have default class names // //Header - dont have default class names
//Body // //Body
expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto') // expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
//Footer // //Footer
expect(ModalContainerElements[2]).toHaveClass('flex') // expect(ModalContainerElements[2]).toHaveClass('flex')
}); // });
test("should appears/disappers based on button click event", async () => { // test("should appears/disappers based on button click event", async () => {
render(<Template id={'modal-container-div'} />); // render(<Template id={'modal-container-div'} />);
// when react-responsive-modal is visible // // when react-responsive-modal is visible
const container = screen.queryByTestId('overlay'); // const container = screen.queryByTestId('overlay');
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms"); // expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
// validate the button text for popup state // // validate the button text for popup state
let button = screen.queryByText('Close Modal'); // let button = screen.queryByText('Close Modal');
expect(button).toBeInTheDocument(); // expect(button).toBeInTheDocument();
// modal should not be visible after clicking close button // // modal should not be visible after clicking close button
const ClosePopupButton = screen.queryByTestId("close-button"); // const ClosePopupButton = screen.queryByTestId("close-button");
click(ClosePopupButton); // click(ClosePopupButton);
button = await waitFor(() => screen.queryByText('Open Modal')); // button = await waitFor(() => screen.queryByText('Open Modal'));
expect(button).toBeInTheDocument(); // expect(button).toBeInTheDocument();
// visibility of react-responsive-modal is seen by update in style property // // visibility of react-responsive-modal is seen by update in style property
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms"); // expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
}); // });
});
// Todo update the import in Modal component to run the test case
// import Container from "../grid/Container";
// import Row from "../grid/Row";
// });

162
platform/firecamp-ui/src/components/modal/Modal.tsx
View File

@@ -1,101 +1,93 @@
import { FC } from 'react'; import { FC } from 'react';
import cx from 'classnames'; import { Modal as MantineModal, ModalProps, ScrollArea } from '@mantine/core';
import { VscClose } from '@react-icons/all-files/vsc/VscClose'; import { createStyles } from '@mantine/core';
import ResponsiveModal from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';
import './Modal.scss';
import { Container, Row } from '../../ui-kit'; export interface IModal extends ModalProps {}
import { IModal, IHeader, IBody, IFooter } from './interfaces/Modal.interface'; // custom styles for variants
const useStyles = createStyles((theme, { title }: IModal) => ({
content: {
borderRadius: '0px',
backgroundColor:
theme.colorScheme === 'light'
? theme.colors.gray[1]
: theme.colors.dark[6],
color:
theme.colorScheme === 'light'
? theme.colors.dark[5]
: theme.colors.gray[4],
maxWidth: '48rem',
minHeight: '400px',
},
header: {
backgroundColor: 'transparent',
color:
theme.colorScheme === 'light'
? theme.colors.dark[5]
: theme.colors.gray[4],
paddingRight: '1rem',
paddingTop: '1rem',
paddingBottom: !!title ? '1rem' : '0px',
...(!!title
? {
borderBottom: `1px solid ${
theme.colorScheme === 'light'
? theme.colors.gray[4]
: theme.colors.dark[4]
}`,
backgroundColor:
theme.colorScheme === 'light'
? theme.colors.gray[1]
: theme.colors.dark[6],
}
: {}),
},
body: {
paddingLeft: '2rem',
paddingRight: '2rem',
paddingBottom: '2rem',
position: 'relative',
},
}));
const Modal: FC<IModal> & { const Modal: FC<IModal> = ({
Header: FC<IHeader>;
Body: FC<IBody>;
Footer: FC<IFooter>;
} = ({
id = '', id = '',
showCloseIcon = true, opened = false,
isOpen = false, classNames = {},
className = '',
modalClass = '',
modalConfig = {},
onClose = () => {}, onClose = () => {},
children = '', children = <></>,
height, ...props
width,
}) => { }) => {
return ( const { classes, cx, theme } = useStyles({
<ResponsiveModal title: props.title,
open={isOpen} opened,
onClose={() => { onClose: () => {},
onClose(); });
}}
center
closeIcon={<VscClose size={20} className="cursor-pointer z-50" />}
{...modalConfig}
>
<div
className={cx(
className,
'max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper h-full'
)}
style={{ height: height, width: width }}
id={id}
>
{/* {showCloseIcon ? (
<VscClose
size={20}
className="absolute top-3 right-3 cursor-pointer z-50"
onClick={(e) => {
onClose();
}}
/>
) : <></>} */}
{children}
</div>
</ResponsiveModal>
);
};
// `id`: is not being updated on the element
let Header: FC<IHeader> = ({ id = '', children = '', className = '' }) => {
return ( return (
<Container.Header className={className || ''} id={id}> <MantineModal
{children} opened={opened}
</Container.Header> onClose={() => onClose()}
);
};
// `id`: is not being updated on the element
let Body: FC<IBody> = ({
id = '',
children = '',
className = '',
scrollbar = true,
}) => {
return (
<Container.Body
className={cx(className, 'flex flex-col overflow-auto thin !p-4', {
'visible-scrollbar': scrollbar,
})}
id={id} id={id}
centered
classNames={{
...classNames,
content: cx('invisible-scrollbar', classes.content, classNames.content),
header: cx(classes.header, classNames.header),
body: cx(classes.body, classNames.body),
}}
scrollAreaComponent={ScrollArea.Autosize}
closeButtonProps={{
bg:
theme.colorScheme === 'light'
? theme.colors.gray[1]
: theme.colors.dark[6],
}}
{...props}
> >
{children} {children}
</Container.Body> </MantineModal>
); );
}; };
let Footer: FC<IFooter> = ({ id = '', children = '', className = '' }) => {
return (
<Container.Footer className={className || 'flex'} id={id}>
<Row className="w-full with-divider">{children}</Row>
</Container.Footer>
);
};
Modal.Header = Header;
Modal.Body = Body;
Modal.Footer = Footer;
export default Modal; export default Modal;

83
platform/firecamp-ui/src/components/modal/SessionExpired.stories.tsx
View File

@@ -1,83 +0,0 @@
import { useState } from "react";
import { VscGithub } from "@react-icons/all-files/vsc/VscGithub";
import { VscLock } from "@react-icons/all-files/vsc/VscLock";
import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
import { GrGoogle } from "@react-icons/all-files/gr/GrGoogle";
import { default as Modal } from './Modal';
import { default as Button } from '../buttons/Button';
import { default as FormField } from '../form/FormField';
import { default as Input } from '../input/Input';
export default {
title: "UI-Kit/Modal",
component: Modal,
argTypes: {
className: ""
}
};
const Template = (args: any) => {
let [isOpen, toggleOpen] = useState(true);
return <div className="bg-app-background h-screen w-screen block">
<Button text="Open Modal" onClick={() => toggleOpen(true)}/>
<Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
<Modal.Header >
{args?.header() || ''}
</Modal.Header>
<Modal.Body >
{args?.body() || ''}
</Modal.Body>
<Modal.Footer >
{args?.footer() || ''}
</Modal.Footer>
</Modal>
</div>};
export const SessionExpireDemo = Template.bind({});
SessionExpireDemo.args = {
className: 'test',
header: () => <SignUpHeader />,
body: () => <SignUpBody />,
footer: () => <SignUpFooter />
};
const SignUpHeader = () => {
return (
<div className="text-error text-lg text-center mb-6">Session expired</div>
)
}
const SignUpBody = () => {
return (
<div>
<div className="" >
<div className="text-center w-full text-sm mb-5">Sign in again to continue</div>
<FormField label="Username or E-mail" >
<VscAccount title="Account" size={16} />
<Input value="dnishchit@gmail.com" />
</FormField>
<FormField label="password" >
<Input placeholder='password' iconPosition='left' icon={<VscLock title="Account" size={16} />} />
</FormField>
<a className="cursor-pointer text-app-foreground block pb-6 text-right text-sm">Forgot Password?</a>
<Button text="sign in" fullWidth primary sm/>
</div>
<hr className="border-modal-border -ml-8 -mr-8 mb-6 mt-6" />
<div className="">
<a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <VscGithub size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">github</span></a>
<a href="#" className="text-app-foreground flex items-center justify-center bg-focusColor !border-app-border border p-1.5 hover:bg-input-background-focus hover:border-transparent hover:text-modal-foreground-active mb-6"> <GrGoogle size={20} className="mr-2" /> continue with <span className="text-modal-foreground-active ml-2">google</span></a>
</div>
</div>
)
}
const SignUpFooter = () => {
return (
<div className="text-sm mt-6">
<div className="text-center">SignOut Forcefully</div>
</div>
)
}

61
platform/firecamp-ui/src/components/modal/interfaces/Modal.interface.ts
View File

@@ -1,61 +0,0 @@
import { ReactChildren } from 'react';
export interface IModal {
/**
* DOM id
*/
id?: string;
/**
* Show close icon flag
*/
showCloseIcon?: boolean;
/**
* Is modal open or not
*/
isOpen?: boolean;
/**
* Classname to show custom styling
*/
className?: string;
/**
* Modal class name
*/
modalClass?: string;
/**
* Modal (react-responsive-modal) configuration
* @ref: https://react-responsive-modal.leopradel.com/#props
*/
modalConfig?: object;
/**
* Function to call on close modal
*/
onClose?: (e?: any) => any;
/**
* child component
*/
children?: any;
height?: number | string;
width?: number | string;
scrollbar?: boolean;
}
export interface IHeader {
id?: string;
children?: any;
className?: string;
}
export interface IBody {
id?: string;
children?: any;
className?: string;
scrollbar?: boolean;
}
export interface IFooter {
id?: string;
children?: any;
className?: string;
}

309
platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx
View File

@@ -123,6 +123,315 @@ const FirecampThemeProvider: FC<IFirecampThemeProvider> = ({
> >
<MantineProvider <MantineProvider
theme={{ theme={{
// added custom preflight css to prevent default button styles as it affects the mantine button component preview
globalStyles: (theme) => ({
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
'*,::before,::after': {
boxSizing: 'border-box' /* 1 */,
borderWidth: 0 /* 2 */,
borderStyle: 'solid' /* 2 */,
borderColor: 'currentColor' /* 2 */,
},
'::before,::after': {
'--tw-content': '',
},
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html: {
lineHeight: 1.5 /* 1 */,
'-webkit-text-size-adjust': '100%' /* 2 */,
'-moz-tab-size': 4 /* 3 */,
'-o-tab-size': 4,
tabSize: 4 /* 3 */,
fontFamily: 'sans-serif' /* 4 */,
fontFeatureSettings: 'normal' /* 5 */,
fontVariationSettings: 'normal' /* 6 */,
},
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body: {
margin: 0 /* 1 */,
lineHeight: 'inherit' /* 2 */,
},
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
'hr ': {
height: 0 /* 1 */,
color: 'inherit' /* 2 */,
borderTopWidth: '1px' /* 3 */,
},
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
'abbr:where([title])': {
textDecoration: 'underline dotted',
},
/*
Remove the default font size and weight for headings.
*/
'h1,h2,h3,h4,h5,h6': {
fontSize: 'inherit',
fontWeight: 'inherit',
},
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a: {
color: 'inherit',
textDecoration: 'inherit',
},
/*
Add the correct font weight in Edge and Safari.
*/
'b,strong': {
fontWeight: 'bolder',
},
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
'code,kbd,samp,pre': {
fontFamily: 'ui-monospace' /* 1 */,
fontSize: '1em' /* 2 */,
},
/*
Add the correct font size in all browsers.
*/
small: {
fontSize: '80%',
},
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
'sub,sup': {
fontSize: '75%',
lineHeight: 0,
position: 'relative',
verticalAlign: 'baseline',
},
sub: {
bottom: '-0.25em',
},
sup: {
top: '-0.5em',
},
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table: {
textIndent: 0 /* 1 */,
borderColor: 'inherit' /* 2 */,
borderCollapse: 'collapse' /* 3 */,
},
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
'button,input,optgroup,select,textarea': {
fontFamily: 'inherit' /* 1 */,
fontSize: '100%' /* 1 */,
fontWeight: 'inherit' /* 1 */,
lineHeight: 'inherit' /* 1 */,
color: 'inherit' /* 1 */,
margin: 0 /* 2 */,
padding: 0 /* 3 */,
},
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
'button,select': {
textTransform: 'none',
},
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
/* Update: The default button styles were commented out due to their interference with the default styles of Mantine components. */
/* button,[type='button'],[type='reset'],[type='submit'] {
-webkit-appearance: button; //1
background-color: transparent; //2
background-image: none; //2
} */
/*
Use the modern Firefox focus style for all focusable elements.
*/
':-moz-focusring': {
outline: 'auto',
},
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
':-moz-ui-invalid': {
boxShadow: 'none',
},
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress: {
verticalAlign: 'baseline',
},
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
'::-webkit-inner-spin-button,::-webkit-outer-spin-button': {
height: 'auto',
},
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
'[type="search"]': {
'-webkit-appearance': 'textfield' /* 1 */,
'outline-offset': '-2px' /* 2 */,
},
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
'::-webkit-search-decoration': {
'-webkit-appearance': 'none',
},
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
'::-webkit-file-upload-button': {
'-webkit-appearance': 'button' /* 1 */,
font: 'inherit' /* 2 */,
},
/*
Add the correct display in Chrome and Safari.
*/
summary: {
display: 'list-item',
},
/*
Removes the default spacing and border for appropriate elements.
*/
'blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre': {
margin: 0,
},
fieldset: {
margin: 0,
padding: 0,
},
legend: {
padding: 0,
},
'ol,ul,menu': {
listStyle: 'none',
margin: 0,
padding: 0,
},
/*
Prevent resizing textareas horizontally by default.
*/
textarea: {
resize: 'vertical',
},
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
'input::-moz-placeholder,textarea::-moz-placeholder': {
opacity: 1 /* 1 */,
color: '#9ca3af' /* 2 */,
},
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
'input::placeholder,textarea::placeholder': {
opacity: 1 /* 1 */,
color: '#9ca3af' /* 2 */,
},
/*
Set the default cursor for buttons.
*/
'button,[role="button"]': {
cursor: 'pointer',
},
/*
Make sure disabled buttons don't get the pointer cursor.
*/
':disabled': {
cursor: 'default',
},
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
'img,svg,video,canvas,audio,iframe,embed,object': {
display: 'block' /* 1 */,
verticalAlign: 'middle' /* 2 */,
},
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
'img,video': {
maxWidth: '100%',
height: 'auto',
},
/* Make elements with the HTML hidden attribute stay hidden by default */
'[hidden]': {
display: 'none',
},
}),
colorScheme, colorScheme,
colors: { colors: {
'primary-color': [ 'primary-color': [

2
platform/firecamp-ui/src/scss/base.scss
View File

@@ -9,8 +9,6 @@
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */ /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
/* added custom preflight css to prevent default button styles as it affects the mantine button component preview */
@import url('./preflight.css');
@layer base { @layer base {
:root{ :root{

381
platform/firecamp-ui/src/scss/preflight.css
View File

@@ -1,381 +0,0 @@
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: sans-serif; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
/* Update: The default button styles were commented out due to their interference with the default styles of Mantine components. */
/* button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; //1
background-color: transparent; //2
background-image: none; //2
} */
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role='button'] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}

67
platform/firecamp-ui/src/scss/tailwind.scss
View File

@@ -453,10 +453,6 @@
.z-30{ .z-30{
z-index: 30; z-index: 30;
}
.z-50{
z-index: 50;
} }
.float-right{ .float-right{
float: right; float: right;
@@ -504,6 +500,11 @@
margin-left: 0.5rem; margin-left: 0.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
}
.mx-4{
margin-left: 1rem;
margin-right: 1rem;
} }
.mx-auto{ .mx-auto{
margin-left: auto; margin-left: auto;
@@ -542,6 +543,10 @@
.\!mb-2{ .\!mb-2{
margin-bottom: 0.5rem !important; margin-bottom: 0.5rem !important;
}
.\!mb-3{
margin-bottom: 0.75rem !important;
} }
.\!ml-auto{ .\!ml-auto{
margin-left: auto !important; margin-left: auto !important;
@@ -726,6 +731,10 @@
.mt-2{ .mt-2{
margin-top: 0.5rem; margin-top: 0.5rem;
}
.mt-3{
margin-top: 0.75rem;
} }
.mt-4{ .mt-4{
margin-top: 1rem; margin-top: 1rem;
@@ -798,6 +807,10 @@
.contents{ .contents{
display: contents; display: contents;
}
.list-item{
display: list-item;
} }
.hidden{ .hidden{
display: none; display: none;
@@ -895,14 +908,42 @@
.h-\[30px\]{ .h-\[30px\]{
height: 30px; height: 30px;
}
.h-\[340px\]{
height: 340px;
}
.h-\[450px\]{
height: 450px;
}
.h-\[480px\]{
height: 480px;
} }
.h-\[50vh\]{ .h-\[50vh\]{
height: 50vh; height: 50vh;
}
.h-\[600px\]{
height: 600px;
}
.h-\[700px\]{
height: 700px;
} }
.h-\[70vh\]{ .h-\[70vh\]{
height: 70vh; height: 70vh;
}
.h-\[750px\]{
height: 750px;
}
.h-\[80vh\]{
height: 80vh;
} }
.h-fit{ .h-fit{
height: -moz-fit-content; height: -moz-fit-content;
@@ -1255,6 +1296,10 @@
.gap-2{ .gap-2{
gap: 0.5rem; gap: 0.5rem;
}
.gap-3{
gap: 0.75rem;
} }
.gap-4{ .gap-4{
gap: 1rem; gap: 1rem;
@@ -2042,10 +2087,22 @@
.pt-3{ .pt-3{
padding-top: 0.75rem; padding-top: 0.75rem;
}
.pt-4{
padding-top: 1rem;
} }
.pt-5{ .pt-5{
padding-top: 1.25rem; padding-top: 1.25rem;
}
.pt-6{
padding-top: 1.5rem;
}
.pt-px{
padding-top: 1px;
} }
.text-left{ .text-left{
text-align: left; text-align: left;
@@ -2811,8 +2868,6 @@
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */ /* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
/* added custom preflight css to prevent default button styles as it affects the mantine button component preview */
@import url('./preflight.css');
body{ body{
background-color: var(--app-background); background-color: var(--app-background);

2
platform/firecamp-ui/src/ui-kit.ts
View File

@@ -30,7 +30,7 @@ export { default as FileInput } from './components/input/FileInput';
// Modal // Modal
export { default as Modal } from './components/modal/Modal'; export { default as Modal } from './components/modal/Modal';
export type { IModal } from './components/modal/interfaces/Modal.interface'; export type { IModal } from './components/modal/Modal';
export { default as SplitView } from './components/split-view/SplitView'; export { default as SplitView } from './components/split-view/SplitView';

16
playgrounds/firecamp-rest/src/components/common/code-snippets/CodeSnippets.tsx
View File

@@ -104,17 +104,18 @@ const CodeSnippets = ({ tabId = '' }) => {
return ( return (
<Modal <Modal
isOpen={isCodeSnippetOpen} opened={isCodeSnippetOpen}
onClose={() => toggleOpenCodeSnippet()} onClose={() => toggleOpenCodeSnippet()}
height="80vh" size={768}
width="768px" classNames={{
> content: 'h-[80vh]'
<Modal.Header className="border-app-border border-b"> }}
title={
<div className="text-modal-foreground-active text-lg px-6 py-3 "> <div className="text-modal-foreground-active text-lg px-6 py-3 ">
{'Rest code snippet'} {'Rest code snippet'}
</div> </div>
</Modal.Header> }
<Modal.Body> >
<Container> <Container>
<Container.Header className="z-20"> <Container.Header className="z-20">
<Tabs <Tabs
@@ -191,7 +192,6 @@ const CodeSnippets = ({ tabId = '' }) => {
</div> </div>
</Container.Body> </Container.Body>
</Container> </Container>
</Modal.Body>
</Modal> </Modal>
); );
}; };

2
playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx
View File

@@ -200,7 +200,7 @@ const BodyTypeDropDown: FC<any> = ({
onSelect={(selected) => onSelect(selected)} onSelect={(selected) => onSelect(selected)}
classNames={{ classNames={{
dropdown: '!pt-0 -mt-2', dropdown: '!pt-0 -mt-2',
label: 'uppercase pl-2 font-sans', label: 'uppercase pl-2 ',
item: '!px-4', item: '!px-4',
}} }}
width={144} width={144}

10239
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff