From a00a7a90584093b57907f9f32d4dbd3d614ee428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Thu, 9 Oct 2025 12:53:49 +0200 Subject: [PATCH 1/3] remove ui files from repo --- .../defguard-ui/components/Avatar/Avatar.tsx | 46 --- .../defguard-ui/components/Avatar/style.scss | 47 --- .../defguard-ui/components/Avatar/types.ts | 7 - .../defguard-ui/components/Badge/Badge.tsx | 37 --- .../defguard-ui/components/Badge/style.scss | 68 ---- .../defguard-ui/components/Badge/types.ts | 8 - .../defguard-ui/components/Button/Button.tsx | 70 ----- .../defguard-ui/components/Button/style.scss | 193 ------------ .../defguard-ui/components/Button/types.ts | 23 -- .../components/ButtonMenu/MenuButton.tsx | 73 ----- .../components/Checkbox/Checkbox.tsx | 245 --------------- .../components/Checkbox/style.scss | 29 -- .../components/CopyField/CopyField.tsx | 78 ----- .../components/CopyField/style.scss | 53 ---- .../components/CounterLabel/CounterLabel.tsx | 27 -- .../components/CounterLabel/style.scss | 46 --- .../components/Divider/Divider.tsx | 39 --- .../defguard-ui/components/Divider/style.scss | 53 ---- .../components/EmptyState/EmptyState.tsx | 74 ----- .../components/EmptyState/style.scss | 46 --- .../components/FieldBox/FieldBox.tsx | 49 --- .../components/FieldBox/style.scss | 97 ------ .../defguard-ui/components/FieldBox/types.ts | 15 - .../components/FieldError/FieldError.tsx | 35 --- .../components/FieldError/style.scss | 6 - .../components/FieldLabel/FieldLabel.tsx | 39 --- .../components/FieldLabel/style.scss | 17 - .../defguard-ui/components/Fold/Fold.tsx | 29 -- .../defguard-ui/components/Fold/style.scss | 15 - .../defguard-ui/components/Icon/Icon.tsx | 296 ------------------ .../defguard-ui/components/Icon/icon-types.ts | 96 ------ .../Icon/icons/IconAccessSettings.tsx | 19 -- .../components/Icon/icons/IconAndroid.tsx | 31 -- .../components/Icon/icons/IconApple.tsx | 23 -- .../components/Icon/icons/IconAppstore.tsx | 47 --- .../components/Icon/icons/IconArchLinux.tsx | 19 -- .../components/Icon/icons/IconArrowBig.tsx | 16 - .../components/Icon/icons/IconArrowSmall.tsx | 20 -- .../components/Icon/icons/IconCheckCircle.tsx | 19 -- .../components/Icon/icons/IconCheckFilled.tsx | 19 -- .../components/Icon/icons/IconClose.tsx | 19 -- .../components/Icon/icons/IconConfig.tsx | 19 -- .../components/Icon/icons/IconCopy.tsx | 19 -- .../components/Icon/icons/IconDebian.tsx | 19 -- .../components/Icon/icons/IconDesktop.tsx | 19 -- .../components/Icon/icons/IconDisabled.tsx | 19 -- .../components/Icon/icons/IconEmptyPoint.tsx | 19 -- .../components/Icon/icons/IconFile.tsx | 19 -- .../components/Icon/icons/IconGlobe.tsx | 19 -- .../components/Icon/icons/IconHelp.tsx | 19 -- .../components/Icon/icons/IconHide.tsx | 19 -- .../components/Icon/icons/IconLinux.tsx | 21 -- .../components/Icon/icons/IconLoader.tsx | 17 - .../components/Icon/icons/IconLock.tsx | 16 - .../components/Icon/icons/IconMobile.tsx | 19 -- .../Icon/icons/IconOpenInNewWindow.tsx | 19 -- .../components/Icon/icons/IconPlus.tsx | 16 - .../components/Icon/icons/IconShow.tsx | 19 -- .../Icon/icons/IconStatusSimple.tsx | 16 - .../components/Icon/icons/IconUbuntu.tsx | 19 -- .../components/Icon/icons/IconWarning.tsx | 19 -- .../components/Icon/icons/IconWindows.tsx | 19 -- .../defguard-ui/components/Icon/index.ts | 2 - .../defguard-ui/components/Icon/style.scss | 21 -- .../components/IconButton/IconButton.tsx | 22 -- .../components/IconButton/style.scss | 35 --- .../components/IconButton/types.ts | 9 - .../IconButtonMenu/IconButtonMenu.tsx | 78 ----- .../components/InfoBanner/InfoBanner.tsx | 37 --- .../components/InfoBanner/style.scss | 68 ---- .../defguard-ui/components/Input/Input.tsx | 98 ------ .../defguard-ui/components/Input/style.scss | 52 --- .../defguard-ui/components/Input/types.ts | 26 -- .../InteractionBox/InteractionBox.tsx | 42 --- .../components/InteractionBox/style.scss | 29 -- .../LoaderSpinner/LoaderSpinner.tsx | 14 - .../components/LoaderSpinner/style.scss | 18 -- .../defguard-ui/components/Menu/Menu.tsx | 33 -- .../components/Menu/components/MenuHeader.tsx | 28 -- .../components/Menu/components/MenuItem.tsx | 48 --- .../components/Menu/components/MenuSpacer.tsx | 7 - .../defguard-ui/components/Menu/style.scss | 117 ------- .../defguard-ui/components/Menu/types.ts | 33 -- .../defguard-ui/components/Modal/Modal.tsx | 163 ---------- .../defguard-ui/components/Modal/style.scss | 73 ----- .../defguard-ui/components/Modal/types.ts | 14 - .../ModalControls/ModalControls.tsx | 41 --- .../components/ModalControls/style.scss | 30 -- .../defguard-ui/components/Radio/Radio.tsx | 128 -------- .../defguard-ui/components/Radio/style.scss | 67 ---- .../RenderMarkdown/RenderMarkdown.tsx | 5 - .../components/SSOButton/OIDCButton.tsx | 72 ----- .../components/SSOButton/assets/google.png | Bin 2040 -> 0 bytes .../components/SSOButton/style.scss | 37 --- .../components/SizedBox/SizedBox.tsx | 19 -- .../components/SizedBox/style.scss | 6 - .../defguard-ui/components/Text/Text.tsx | 59 ---- .../components/Tooltip/Tooltip.tsx | 18 -- .../defguard-ui/components/Tooltip/style.scss | 14 - .../components/form/FormInput/FormInput.tsx | 59 ---- webnext/src/shared/defguard-ui/form.tsx | 14 - .../src/shared/defguard-ui/scss/_base.scss | 99 ------ .../src/shared/defguard-ui/scss/_fonts.scss | 75 ----- .../src/shared/defguard-ui/scss/_form.scss | 6 - .../defguard-ui/scss/_shared_tokens.scss | 225 ------------- .../src/shared/defguard-ui/scss/_themes.scss | 115 ------- .../defguard-ui/scss/global/_animate.scss | 11 - .../defguard-ui/scss/global/_breakpoints.scss | 104 ------ .../shared/defguard-ui/scss/global/index.scss | 2 - .../src/shared/defguard-ui/scss/index.scss | 5 - webnext/src/shared/defguard-ui/types.ts | 135 -------- .../defguard-ui/utils/detectClickOutside.ts | 22 -- .../shared/defguard-ui/utils/isComparable.ts | 10 - .../src/shared/defguard-ui/utils/isPresent.ts | 3 - .../src/shared/defguard-ui/utils/mergeRefs.ts | 29 -- webnext/src/shared/defguard-ui/utils/zod.ts | 10 - 116 files changed, 5065 deletions(-) delete mode 100644 webnext/src/shared/defguard-ui/components/Avatar/Avatar.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Avatar/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Avatar/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/Badge/Badge.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Badge/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Badge/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/Button/Button.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Button/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Button/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Checkbox/Checkbox.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Checkbox/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/CopyField/CopyField.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/CopyField/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/CounterLabel/CounterLabel.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/CounterLabel/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Divider/Divider.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Divider/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/EmptyState/EmptyState.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/EmptyState/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/FieldBox/FieldBox.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/FieldBox/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/FieldBox/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/FieldError/FieldError.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/FieldError/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/FieldLabel/FieldLabel.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/FieldLabel/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Fold/Fold.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Fold/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/Icon.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icon-types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconAndroid.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconApple.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconAppstore.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconArchLinux.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowBig.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowSmall.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckCircle.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckFilled.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconClose.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconConfig.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconCopy.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconDebian.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconDesktop.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconDisabled.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconEmptyPoint.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconFile.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconGlobe.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconHelp.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconHide.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconLinux.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconLoader.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconLock.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconMobile.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconOpenInNewWindow.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconPlus.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconShow.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconStatusSimple.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconUbuntu.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconWarning.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconWindows.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/index.ts delete mode 100644 webnext/src/shared/defguard-ui/components/Icon/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/IconButton/IconButton.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/IconButton/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/IconButton/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/IconButtonMenu/IconButtonMenu.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/InfoBanner/InfoBanner.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/InfoBanner/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Input/Input.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Input/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Input/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/InteractionBox/InteractionBox.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/InteractionBox/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/LoaderSpinner/LoaderSpinner.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/LoaderSpinner/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/Menu.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/components/MenuHeader.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/components/MenuItem.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/components/MenuSpacer.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Menu/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/Modal/Modal.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Modal/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Modal/types.ts delete mode 100644 webnext/src/shared/defguard-ui/components/ModalControls/ModalControls.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/ModalControls/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Radio/Radio.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Radio/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/RenderMarkdown/RenderMarkdown.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/SSOButton/OIDCButton.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/SSOButton/assets/google.png delete mode 100644 webnext/src/shared/defguard-ui/components/SSOButton/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/SizedBox/SizedBox.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/SizedBox/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/Text/Text.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Tooltip/Tooltip.tsx delete mode 100644 webnext/src/shared/defguard-ui/components/Tooltip/style.scss delete mode 100644 webnext/src/shared/defguard-ui/components/form/FormInput/FormInput.tsx delete mode 100644 webnext/src/shared/defguard-ui/form.tsx delete mode 100644 webnext/src/shared/defguard-ui/scss/_base.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/_fonts.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/_form.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/_shared_tokens.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/_themes.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/global/_animate.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/global/_breakpoints.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/global/index.scss delete mode 100644 webnext/src/shared/defguard-ui/scss/index.scss delete mode 100644 webnext/src/shared/defguard-ui/types.ts delete mode 100644 webnext/src/shared/defguard-ui/utils/detectClickOutside.ts delete mode 100644 webnext/src/shared/defguard-ui/utils/isComparable.ts delete mode 100644 webnext/src/shared/defguard-ui/utils/isPresent.ts delete mode 100644 webnext/src/shared/defguard-ui/utils/mergeRefs.ts delete mode 100644 webnext/src/shared/defguard-ui/utils/zod.ts diff --git a/webnext/src/shared/defguard-ui/components/Avatar/Avatar.tsx b/webnext/src/shared/defguard-ui/components/Avatar/Avatar.tsx deleted file mode 100644 index ff61b18..0000000 --- a/webnext/src/shared/defguard-ui/components/Avatar/Avatar.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import { useId } from 'react'; -import type { AvatarSizeValue } from './types'; - -type Props = { - size?: AvatarSizeValue; - name?: string; -}; - -export const Avatar = ({ size = 'default' }: Props) => { - return ( -
-
- -
-
- ); -}; - -const EmptyIcon = () => { - const id = useId(); - return ( - - - - - - - - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Avatar/style.scss b/webnext/src/shared/defguard-ui/components/Avatar/style.scss deleted file mode 100644 index 20b2619..0000000 --- a/webnext/src/shared/defguard-ui/components/Avatar/style.scss +++ /dev/null @@ -1,47 +0,0 @@ -.avatar { - user-select: none; - - &.size-small { - .inner { - width: 16px; - height: 16px; - } - } - - &.size-default { - .inner { - width: 24px; - height: 24px; - } - } - - &.size-big { - .inner { - width: 40px; - height: 40px; - } - } - - svg { - height: inherit; - width: inherit; - } -} - -.avatar .icon-default { - g { - rect { - fill: var(--bg-emphasis); - } - - path { - fill: var(--bg-faded); - } - } - - defs { - rect { - fill: var(--fg-default); - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Avatar/types.ts b/webnext/src/shared/defguard-ui/components/Avatar/types.ts deleted file mode 100644 index c3eeedc..0000000 --- a/webnext/src/shared/defguard-ui/components/Avatar/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const AvatarSize = { - Default: 'default', - Small: 'small', - Big: 'big', -} as const; - -export type AvatarSizeValue = (typeof AvatarSize)[keyof typeof AvatarSize]; diff --git a/webnext/src/shared/defguard-ui/components/Badge/Badge.tsx b/webnext/src/shared/defguard-ui/components/Badge/Badge.tsx deleted file mode 100644 index b87141d..0000000 --- a/webnext/src/shared/defguard-ui/components/Badge/Badge.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import type { Ref } from 'react'; -import { Icon } from '../Icon'; -import type { BadgeVariantValue } from './types'; - -type Props = { - text: string; - background?: boolean; - variant?: BadgeVariantValue; - className?: string; - testId?: string; - ref?: Ref; -}; - -export const Badge = ({ - text, - className, - testId, - ref, - background = false, - variant = 'neutral', -}: Props) => { - return ( -
- - {text} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Badge/style.scss b/webnext/src/shared/defguard-ui/components/Badge/style.scss deleted file mode 100644 index 64354a6..0000000 --- a/webnext/src/shared/defguard-ui/components/Badge/style.scss +++ /dev/null @@ -1,68 +0,0 @@ -.badge { - --bg-color: transparent; - --color: var(--fg-neutral); - --icon-color: var(--color); - - border-radius: var(--badge-border-radius); - display: grid; - grid-template-columns: 20px auto; - grid-template-rows: 1fr; - align-items: center; - box-sizing: border-box; - padding: calc(var(--badge-spacing) / 2) var(--badge-spacing); - column-gap: var(--badge-gap); - background-color: var(--bg-color); - color: var(--color); - user-select: none; - - @include animate(background-color); - - &.variant-neutral { - --color: var(--fg-neutral); - --icon-color: var(--fg-muted); - - &:not(.bg) { - --bg-color: var(--bg-muted); - } - } - - &.variant-success { - --color: var(--fg-success); - - &:not(.bg) { - --bg-color: var(--c-green-500-transparent); - } - } - - &.variant-critical { - --color: var(--fg-critical); - - &:not(.bg) { - --bg-color: var(--c-red-500-transparent); - } - } - - &.variant-warning { - --color: var(--fg-attention); - - &:not(.bg) { - --bg-color: var(--c-orange-500-transparent); - } - } - - span { - font: var(--t-badge); - letter-spacing: var(--t-badge-spacing); - color: inherit; - - @include animate(color); - } - - & > .icon > svg { - rect { - fill: var(--icon-color); - - @include animate(fill); - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Badge/types.ts b/webnext/src/shared/defguard-ui/components/Badge/types.ts deleted file mode 100644 index f2002f1..0000000 --- a/webnext/src/shared/defguard-ui/components/Badge/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const BadgeVariant = { - Neutral: 'neutral', - Success: 'success', - Critical: 'critical', - Warning: 'warning', -} as const; - -export type BadgeVariantValue = (typeof BadgeVariant)[keyof typeof BadgeVariant]; diff --git a/webnext/src/shared/defguard-ui/components/Button/Button.tsx b/webnext/src/shared/defguard-ui/components/Button/Button.tsx deleted file mode 100644 index 9640236..0000000 --- a/webnext/src/shared/defguard-ui/components/Button/Button.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import './style.scss'; -import { clsx } from 'clsx'; -import { AnimatePresence, motion } from 'motion/react'; -import { motionTransitionStandard } from '../../../consts'; -import { isPresent } from '../../utils/isPresent'; -import { Icon } from '../Icon'; -import { LoaderSpinner } from '../LoaderSpinner/LoaderSpinner'; -import type { ButtonProps } from './types'; - -export const Button = ({ - text, - testId, - iconLeft, - iconRight, - onClick, - ref, - iconRightRotation, - size = 'primary', - variant = 'primary', - type = 'button', - disabled = false, - loading = false, - ...props -}: ButtonProps) => { - return ( - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Button/style.scss b/webnext/src/shared/defguard-ui/components/Button/style.scss deleted file mode 100644 index 8c0bead..0000000 --- a/webnext/src/shared/defguard-ui/components/Button/style.scss +++ /dev/null @@ -1,193 +0,0 @@ -.btn { - --btn-font: var(--t-button-label-primary); - --btn-size: var(--button-size-primary); - --border-color: transparent; - --bg-color: transparent; - --text-color: var(--fg-default); - --loader-bg: transparent; - --loader-track: transparent; - --loader-part: transparent; - - height: var(--btn-size); - border: none; - box-sizing: border-box; - border-radius: var(--button-border-radius-primary); - background: var(--bg-color); - box-shadow: 0 0 0 1px var(--border-color); - color: var(--text-color); - min-height: var(--button-size-primary); - padding: var(--spacing-sm) var(--spacing-lg); - background-clip: padding-box; - position: relative; - user-select: none; - display: grid; - grid-template-columns: auto; - grid-template-rows: 1fr; - align-items: center; - column-gap: var(--button-icons-spacing); - text-decoration: none !important; - justify-content: center; - - @include animate(background-color, border-color, opacity, box-shadow); - - &:not(.disabled, .loading) { - cursor: pointer; - } - - &.disabled { - cursor: not-allowed; - pointer-events: none; - } - - .icon { - svg { - path { - fill: var(--loader-part); - - @include animate(fill); - } - } - } - - .text { - font: var(--btn-font); - color: inherit; - - @include animate(color); - } - - &.icon-left { - grid-template-columns: 20px auto; - } - - &.icon-right { - grid-template-columns: auto 20px; - } - - &.icon-both { - grid-template-columns: 20px auto 20px; - } - - &.size-primary { - --btn-size: var(--button-size-primary); - } - - &.size-big { - --btn-font: var(--t-button-label-lg); - --btn-size: var(--button-size-lg); - } - - &.variant-primary { - --bg-color: var(--fg-action); - --border-color: var(--fg-action); - --text-color: var(--fg-white); - --loader-track: var(--c-white-50); - --loader-part: var(--c-white); - --loader-bg: var(--bg-action-emphasis); - - &:hover { - --bg-color: var(--bg-action-emphasis); - --border-color: var(--bg-color); - } - - &.disabled { - --bg-color: var(--fg-blue-transparent-2); - --border-color: var(--bg-color); - --text-color: var(--fg-action-muted); - } - } - - &.variant-secondary { - --bg-color: var(--bg-emphasis); - --border-color: var(--bg-color); - --text-color: var(--fg-default); - --loader-track: var(--c-neutral-400); - --loader-part: var(--c-neutral-800); - --loader-bg: var(--bg-active); - - &:hover { - --bg-color: var(--bg-active); - } - - &.disabled { - --bg-color: var(--bg-disabled); - --text-color: var(--fg-disabled); - } - } - - &.variant-critical { - --bg-color: var(--bg-critical); - --border-color: var(--bg-color); - --text-color: var(--fg-white); - --loader-track: var(--c-white-50); - --loader-part: var(--c-white); - --loader-bg: var(--bg-critical-faded); - - &:hover { - --bg-color: var(--bg-critical-faded); - } - - &.disabled { - --bg-color: var(--bg-critical-muted); - --text-color: var(--fg-white-transparent); - } - } - - &.variant-outlined { - --bg-color: transparent; - --border-color: var(--border-action); - --loader-track: var(--c-blue-200); - --loader-part: var(--c-blue-500); - --loader-bg: var(--bg-action-muted); - --text-color: var(--fg-action); - - &:hover { - --bg-color: var(--bg-action-muted); - --border-color: var(--border-action); - } - - &.disabled { - --bg-color: var(--fg-blue-transparent-2); - --border-color: var(--bg-color); - --text-color: var(--fg-action-muted); - } - } - - // since box-shadow adds on top of element it's needed to be set with loader overlay - &:not(.disabled).loading { - --border-color: var(--loader-bg); - } - - .loader-overlay { - background-color: var(--loader-bg); - border: none; - border-radius: inherit; - position: absolute; - inset: 0; - width: 100%; - height: 100%; - display: flex; - flex-flow: row; - align-items: center; - justify-content: center; - - svg { - & > path { - stroke: var(--loader-part); - fill: none; - - @include animate(stroke); - } - - & > circle { - stroke: var(--loader-track); - - @include animate(stroke); - } - } - } -} - -a:has(.btn) { - text-decoration: none; -} diff --git a/webnext/src/shared/defguard-ui/components/Button/types.ts b/webnext/src/shared/defguard-ui/components/Button/types.ts deleted file mode 100644 index 7937cb4..0000000 --- a/webnext/src/shared/defguard-ui/components/Button/types.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { ButtonHTMLAttributes, HTMLAttributes, Ref } from 'react'; -import type { Direction } from '../../types'; -import type { IconKindValue } from '../Icon/icon-types'; - -type DefaultButtonProps = ButtonHTMLAttributes; - -type ButtonVariant = 'primary' | 'secondary' | 'critical' | 'outlined'; - -type ButtonSize = 'primary' | 'big'; - -export type ButtonProps = { - text: string; - variant?: ButtonVariant; - size?: ButtonSize; - type?: DefaultButtonProps['type']; - iconLeft?: IconKindValue; - iconRight?: IconKindValue; - iconRightRotation?: Direction; - testId?: string; - disabled?: boolean; - loading?: boolean; - ref?: Ref; -} & HTMLAttributes; diff --git a/webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx b/webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx deleted file mode 100644 index 841f841..0000000 --- a/webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { - autoUpdate, - FloatingPortal, - offset, - shift, - size, - useClick, - useDismiss, - useFloating, - useInteractions, -} from '@floating-ui/react'; -import { useState } from 'react'; -import { Button } from '../Button/Button'; -import type { ButtonProps } from '../Button/types'; -import { Menu } from '../Menu/Menu'; -import type { MenuItemsGroup } from '../Menu/types'; - -export const ButtonMenu = ({ - menuItems, - ...props -}: Omit & { - menuItems: MenuItemsGroup[]; -}) => { - const [isOpen, setOpen] = useState(false); - const { refs, context, floatingStyles } = useFloating({ - placement: 'bottom-start', - whileElementsMounted: autoUpdate, - onOpenChange: setOpen, - open: isOpen, - middleware: [ - offset(4), - shift(), - size({ - apply({ rects, elements, availableHeight }) { - const refWidth = `${rects.reference.width}px`; - elements.floating.style.minWidth = refWidth; - elements.floating.style.maxHeight = `${availableHeight - 10}px`; - }, - }), - ], - }); - - const click = useClick(context, { - toggle: true, - }); - - const dismiss = useDismiss(context, { - ancestorScroll: true, - escapeKey: true, - outsidePress: (event) => !(event.target as HTMLElement).closest('.menu'), - }); - - const { getFloatingProps, getReferenceProps } = useInteractions([click, dismiss]); - - return ( - <> - - - - - {copied && ( - - -

{copyTooltip}

- - - )} - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/CopyField/style.scss b/webnext/src/shared/defguard-ui/components/CopyField/style.scss deleted file mode 100644 index f90cafd..0000000 --- a/webnext/src/shared/defguard-ui/components/CopyField/style.scss +++ /dev/null @@ -1,53 +0,0 @@ -.copy-field { - & > .inner { - user-select: none; - width: 100%; - - .label-track { - padding-bottom: var(--spacing-xs); - - p { - font: var(--t-input-title); - color: var(--fg-neutral); - } - } - - .track { - width: 100%; - border: 1px solid var(--border-default); - box-sizing: border-box; - padding: var(--input-spacing-sm) var(--input-spacing-lg); - display: grid; - grid-template-columns: auto 20px; - grid-template-rows: 1fr; - column-gap: var(--input-spacing-sm); - align-items: center; - overflow: hidden; - border-radius: var(--input-border-radius); - - p { - font: var(--t-input-text-primary); - color: var(--fg-muted); - max-width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - min-width: 0; - } - - button { - padding: 0; - margin: 0; - border: none; - background-color: transparent; - width: 20px; - height: 20px; - cursor: pointer; - - .icon[data-kind='check-filled'] path { - fill: var(--fg-success); - } - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/CounterLabel/CounterLabel.tsx b/webnext/src/shared/defguard-ui/components/CounterLabel/CounterLabel.tsx deleted file mode 100644 index 5f22bc2..0000000 --- a/webnext/src/shared/defguard-ui/components/CounterLabel/CounterLabel.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import clsx from 'clsx'; -import './style.scss'; -import type { Ref } from 'react'; - -type Variant = 'neutral' | 'default' | 'action' | 'critical' | 'warning'; - -type Props = { - ref?: Ref; - className?: string; - testId?: string; - id?: string; - value?: number; - variant?: Variant; -}; - -export const CounterLabel = ({ ref, className, id, testId, value, variant }: Props) => { - return ( -
- {value ?? 0} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/CounterLabel/style.scss b/webnext/src/shared/defguard-ui/components/CounterLabel/style.scss deleted file mode 100644 index 6864cf1..0000000 --- a/webnext/src/shared/defguard-ui/components/CounterLabel/style.scss +++ /dev/null @@ -1,46 +0,0 @@ -.counter-label { - --color: var(--fg-white); - --bg-color: transparent; - - color: var(--color); - background-color: var(--bg-color); - border-radius: 8px; - user-select: none; - pointer-events: none; - box-sizing: border-box; - padding: 0 var(--spacing-xs); - min-width: 20px; - display: inline-flex; - align-items: center; - justify-content: center; - flex-flow: row; - flex: none; - height: auto; - - &.variant-neutral { - --color: var(--fg-neutral); - --bg-color: var(--bg-emphasis); - } - - &.variant-action { - --bg-color: var(--bg-action); - } - - &.variant-critical { - --bg-color: var(--bg-critical); - } - - &.variant-warning { - --bg-color: var(--bg-warning); - } - - &.variant-default { - --bg-color: var(--bg-dark); - } - - span { - font: var(--t-body-xxs-600); - color: inherit; - text-align: center; - } -} diff --git a/webnext/src/shared/defguard-ui/components/Divider/Divider.tsx b/webnext/src/shared/defguard-ui/components/Divider/Divider.tsx deleted file mode 100644 index 2212337..0000000 --- a/webnext/src/shared/defguard-ui/components/Divider/Divider.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import type { OrientationValue } from '../../types'; -import { isPresent } from '../../utils/isPresent'; - -type Props = { - text?: string; - orientation?: OrientationValue; -}; - -export const Divider = ({ text, orientation }: Props) => { - const textPresent = isPresent(text) && text.length > 0; - - return ( -
- {orientation === 'horizontal' && ( - <> - {textPresent && ( - <> - - {text} - - - )} - {!textPresent && } - - )} - {orientation === 'vertical' && } -
- ); -}; - -const Line = () => { - return
; -}; diff --git a/webnext/src/shared/defguard-ui/components/Divider/style.scss b/webnext/src/shared/defguard-ui/components/Divider/style.scss deleted file mode 100644 index a692a9e..0000000 --- a/webnext/src/shared/defguard-ui/components/Divider/style.scss +++ /dev/null @@ -1,53 +0,0 @@ -.divider { - --divider-line-size: 1px; - --divider-color: var(--bg-active); - - user-select: none; - - .line { - content: ' '; - display: block; - background-color: var(--divider-color); - border-radius: 0; - margin: 0; - padding: 0; - } - - &.vertical { - display: inline-block; - height: 10px; - - .line { - height: inherit; - width: var(--divider-line-size); - } - } - - &.horizontal { - width: 100%; - - .line { - width: 100%; - height: var(--divider-line-size); - } - } - - &.horizontal.text { - --divider-color: var(--bg-action-faded); - - display: grid; - grid-template-columns: 1fr auto 1fr; - grid-template-rows: 1fr; - column-gap: var(--spacing-lg); - align-items: center; - - .line { - width: 100%; - } - } - - span { - font: var(--t-body-sm-400); - color: var(--fg-action); - } -} diff --git a/webnext/src/shared/defguard-ui/components/EmptyState/EmptyState.tsx b/webnext/src/shared/defguard-ui/components/EmptyState/EmptyState.tsx deleted file mode 100644 index 7c2be3e..0000000 --- a/webnext/src/shared/defguard-ui/components/EmptyState/EmptyState.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type { Ref } from 'react'; -import './style.scss'; -import clsx from 'clsx'; -import { ThemeSpacing } from '../../types'; -import { isPresent } from '../../utils/isPresent'; -import { Button } from '../Button/Button'; -import type { ButtonProps } from '../Button/types'; -import { Icon } from '../Icon'; -import type { IconKindValue } from '../Icon/icon-types'; -import { SizedBox } from '../SizedBox/SizedBox'; - -type Props = { - ref?: Ref; - title?: string; - subtitle?: string; - icon?: IconKindValue; - className?: string; - testId?: string; - id?: string; - primaryAction?: ButtonProps; - secondaryAction?: () => void; - secondaryActionText?: string; -}; - -//TODO: icon is incompatible, remove it when this will be needed -export const EmptyState = ({ - ref, - icon, - primaryAction, - secondaryAction, - secondaryActionText, - subtitle, - title, - className, - id, - testId, -}: Props) => { - return ( -
- {isPresent(icon) && ( - <> -
- -
- - - )} - {isPresent(title) && ( - <> -

{title}

- - - )} - {isPresent(subtitle) &&

{subtitle}

} - - {isPresent(primaryAction) && ( - <> - - )} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/EmptyState/style.scss b/webnext/src/shared/defguard-ui/components/EmptyState/style.scss deleted file mode 100644 index 90a3b59..0000000 --- a/webnext/src/shared/defguard-ui/components/EmptyState/style.scss +++ /dev/null @@ -1,46 +0,0 @@ -.empty-state { - display: flex; - flex-flow: column; - flex: none; - align-items: center; - justify-content: flex-start; - height: auto; - user-select: none; - - & > p, - & > span { - text-align: center; - } - - .title { - color: var(--fg-muted); - font: var(--t-body-primary-500); - } - - .subtitle { - color: var(--fg-muted); - font: var(--t-body-sm-400); - } - - .secondary-action { - background-color: transparent; - text-align: center; - color: var(--fg-action); - border: none; - padding: 0; - margin: 0; - } - - .empty-icon { - width: 40px; - height: 40px; - display: flex; - flex-flow: row; - align-items: center; - justify-content: center; - flex: none; - padding: 4px; - border: 1px dashed var(--border-faded); - border-radius: 100px; - } -} diff --git a/webnext/src/shared/defguard-ui/components/FieldBox/FieldBox.tsx b/webnext/src/shared/defguard-ui/components/FieldBox/FieldBox.tsx deleted file mode 100644 index 7912214..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldBox/FieldBox.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import { isPresent } from '../../utils/isPresent'; -import { Icon } from '../Icon'; -import { InteractionBox } from '../InteractionBox/InteractionBox'; -import type { FieldBoxProps } from './types'; - -// generalized field box for components like Input, shouldn't be in layout on it's own -export const FieldBox = ({ - children, - disabled, - error, - className, - boxRef, - interactionRef, - iconLeft, - iconRight, - size, - onInteractionClick, - ...rest -}: FieldBoxProps) => { - const hasIconLeft = isPresent(iconLeft); - const hasIconRight = isPresent(iconRight); - return ( -
- {hasIconLeft && } - {children} - {hasIconRight && ( - - )} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/FieldBox/style.scss b/webnext/src/shared/defguard-ui/components/FieldBox/style.scss deleted file mode 100644 index 9732c9f..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldBox/style.scss +++ /dev/null @@ -1,97 +0,0 @@ -.field-box { - --outline-width: 0; - --border-color: var(--border-default); - --background-color: var(--bg-default); - - position: relative; - box-sizing: border-box; - display: grid; - grid-template-rows: 1fr; - align-items: center; - column-gap: var(--input-spacing-sm); - overflow: hidden; - cursor: pointer; - border: 1px solid var(--border-color); - border-radius: var(--input-border-radius); - padding: var(--input-spacing-sm) var(--input-spacing-lg); - outline: var(--outline-width) solid var(--border-action); - outline-offset: -2px; - - @include animate(border-color, background-color); - - p, - span { - max-width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - &.size-default { - min-height: var(--input-size-primary); - - p, - span { - font: var(--t-input-text-primary); - color: var(--fg-default); - } - } - - &.size-lg { - min-height: var(--input-size-lg); - - p, - span { - font: var(--t-input-text-big); - } - } - - &.grid-default { - grid-template-columns: 1fr; - } - - &.grid-left { - grid-template-columns: 20px 1fr; - } - - &.grid-right { - grid-template-columns: 1fr 20px; - } - - &.grid-both { - grid-template-columns: 20px 1fr 20px; - } - - .placeholder { - color: var(--fg-muted); - } - - .interaction-box { - & > button { - height: 28px; - width: 28px; - } - } - - &:not(.disabled, .error) { - &:hover { - --border-color: var(--border-emphasis); - } - - &:focus-within { - --border-colo: var(--border-default); - --outline-width: 2px; - } - } - - &.error { - --border-color: var(--border-critical); - } - - &.disabled { - --border-color: var(--border-disabled); - --background-color: var(--bg-disabled); - - cursor: not-allowed; - } -} diff --git a/webnext/src/shared/defguard-ui/components/FieldBox/types.ts b/webnext/src/shared/defguard-ui/components/FieldBox/types.ts deleted file mode 100644 index 94f4ff0..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldBox/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, Ref } from 'react'; -import type { IconKindValue } from '../Icon/icon-types'; - -export type FieldSize = 'lg' | 'default'; - -export interface FieldBoxProps extends HTMLAttributes, PropsWithChildren { - boxRef?: Ref; - interactionRef?: Ref; - error?: boolean; - disabled?: boolean; - iconLeft?: IconKindValue; - iconRight?: IconKindValue; - size?: FieldSize; - onInteractionClick?: MouseEventHandler; -} diff --git a/webnext/src/shared/defguard-ui/components/FieldError/FieldError.tsx b/webnext/src/shared/defguard-ui/components/FieldError/FieldError.tsx deleted file mode 100644 index ef70d77..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldError/FieldError.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { motion } from 'motion/react'; -import './style.scss'; -import { motionTransitionStandard } from '../../../consts'; -import { isPresent } from '../../utils/isPresent'; - -type Props = { - error?: string; -}; - -export const FieldError = ({ error }: Props) => { - return ( - <> - {isPresent(error) && error.length > 0 && ( - - {error} - - )} - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/FieldError/style.scss b/webnext/src/shared/defguard-ui/components/FieldError/style.scss deleted file mode 100644 index 49d746b..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldError/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -.field-error { - padding-top: 8px; - font: var(--t-input-error-message); - color: var(--fg-critical); - user-select: none; -} diff --git a/webnext/src/shared/defguard-ui/components/FieldLabel/FieldLabel.tsx b/webnext/src/shared/defguard-ui/components/FieldLabel/FieldLabel.tsx deleted file mode 100644 index 0146b23..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldLabel/FieldLabel.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import './style.scss'; - -import clsx from 'clsx'; -import type { Ref } from 'react'; - -type Props = { - ref?: Ref; - htmlFor?: string; - text: string; - required?: boolean; -}; - -export const FieldLabel = ({ text, htmlFor, ref, required }: Props) => { - return ( - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/FieldLabel/style.scss b/webnext/src/shared/defguard-ui/components/FieldLabel/style.scss deleted file mode 100644 index a20369d..0000000 --- a/webnext/src/shared/defguard-ui/components/FieldLabel/style.scss +++ /dev/null @@ -1,17 +0,0 @@ -.field-label { - position: relative; - padding-bottom: var(--input-spacing-xs); - display: block; - font: var(--t-input-title); - color: var(--fg-neutral); - - svg { - position: absolute; - left: 0; - top: 3.5px; - } - - &.required { - padding-left: 8px; - } -} diff --git a/webnext/src/shared/defguard-ui/components/Fold/Fold.tsx b/webnext/src/shared/defguard-ui/components/Fold/Fold.tsx deleted file mode 100644 index 3627863..0000000 --- a/webnext/src/shared/defguard-ui/components/Fold/Fold.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import type { HTMLAttributes, PropsWithChildren, Ref } from 'react'; - -export const Fold = ({ - ref, - className, - children, - open, - contentClassName, - ...rest -}: { - open: boolean; - ref?: Ref; - contentClassName?: string; -} & PropsWithChildren & - HTMLAttributes) => { - return ( -
-
{children}
-
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Fold/style.scss b/webnext/src/shared/defguard-ui/components/Fold/style.scss deleted file mode 100644 index 8892059..0000000 --- a/webnext/src/shared/defguard-ui/components/Fold/style.scss +++ /dev/null @@ -1,15 +0,0 @@ -.fold { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - - @include animate(grid-template-rows); - - &.folded { - grid-template-rows: 0fr; - } - - .fold-content { - overflow: hidden; - } -} diff --git a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx b/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx deleted file mode 100644 index 1200359..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx +++ /dev/null @@ -1,296 +0,0 @@ -import { type CSSProperties, type Ref, useMemo } from 'react'; -import type { IconKindValue } from './icon-types'; -import './style.scss'; -import type { Direction } from '../../types'; -import { IconAccessSettings } from './icons/IconAccessSettings'; -import { IconAndroid } from './icons/IconAndroid'; -import { IconApple } from './icons/IconApple'; -import { IconAppStore } from './icons/IconAppstore'; -import { IconArchLinux } from './icons/IconArchLinux'; -import { IconArrowBig } from './icons/IconArrowBig'; -import { IconArrowSmall } from './icons/IconArrowSmall'; -import { IconCheckCircle } from './icons/IconCheckCircle'; -import { IconCheckFilled } from './icons/IconCheckFilled'; -import { IconClose } from './icons/IconClose'; -import { IconConfig } from './icons/IconConfig'; -import { IconCopy } from './icons/IconCopy'; -import { IconDebian } from './icons/IconDebian'; -import { IconDesktop } from './icons/IconDesktop'; -import { IconDisabled } from './icons/IconDisabled'; -import { IconEmptyPoint } from './icons/IconEmptyPoint'; -import { IconFile } from './icons/IconFile'; -import { IconGlobe } from './icons/IconGlobe'; -import { IconHelp } from './icons/IconHelp'; -import { IconHide } from './icons/IconHide'; -import { IconLinux } from './icons/IconLinux'; -import { IconLoader } from './icons/IconLoader'; -import { IconLockOpen } from './icons/IconLock'; -import { IconMobile } from './icons/IconMobile'; -import { IconOpenInNewWindow } from './icons/IconOpenInNewWindow'; -import { IconPlus } from './icons/IconPlus'; -import { IconShow } from './icons/IconShow'; -import { IconStatusSimple } from './icons/IconStatusSimple'; -import { IconUbuntu } from './icons/IconUbuntu'; -import { IconWarning } from './icons/IconWarning'; -import { IconWindows } from './icons/IconWindows'; - -type Props = { - icon: T; - size?: number; - rotationDirection?: Direction; - customRotation?: number; - ref?: Ref; -}; - -type RotationMap = Record; - -const mapRotation = (kind: IconKindValue, direction: Direction): number => { - switch (kind) { - case 'arrow-small': - case 'arrow-big': { - const map: RotationMap = { - down: 90, - right: 0, - up: -90, - left: 180, - }; - return map[direction]; - } - } - console.error(`Unimplemented rotation mapping for icon kind of ${kind}`); - // safe return for unimplemented - return 0; -}; - -const EmptyIcon = () => { - return null; -}; - -// Color should be set by css bcs some icons have different structures like 'loader' -export const Icon = ({ - icon: iconKind, - rotationDirection, - customRotation, - ref, - size = 20, -}: Props) => { - const IconToRender = useMemo(() => { - switch (iconKind) { - case 'warning': - return IconWarning; - case 'ubuntu': - return IconUbuntu; - case 'debian': - return IconDebian; - case 'arch-linux': - return IconArchLinux; - case 'disabled': - return IconDisabled; - case 'show': - return IconShow; - case 'hide': - return IconHide; - case 'copy': - return IconCopy; - case 'config': - return IconConfig; - case 'open-in-new-window': - return IconOpenInNewWindow; - case 'arrow-big': - return IconArrowBig; - case 'arrow-small': - return IconArrowSmall; - case 'loader': - return IconLoader; - case 'plus': - return IconPlus; - case 'status-simple': - return IconStatusSimple; - case 'lock-open': - return IconLockOpen; - case 'check-circle': - return IconCheckCircle; - case 'check-filled': - return IconCheckFilled; - case 'empty-point': - return IconEmptyPoint; - case 'desktop': - return IconDesktop; - case 'mobile': - return IconMobile; - case 'windows': - return IconWindows; - case 'linux': - return IconLinux; - case 'app-store': - return IconAppStore; - case 'apple': - return IconApple; - case 'android': - return IconAndroid; - case 'close': - return IconClose; - case 'file': - return IconFile; - case 'globe': - return IconGlobe; - case 'help': - return IconHelp; - case 'access-settings': - return IconAccessSettings; - case 'activity': - return EmptyIcon; - case 'activity-notes': - return EmptyIcon; - case 'add-user': - return EmptyIcon; - case 'analytics': - return EmptyIcon; - case 'archive': - return EmptyIcon; - case 'attention': - return EmptyIcon; - case 'check': - return EmptyIcon; - case 'clear': - return EmptyIcon; - case 'code': - return EmptyIcon; - case 'collapse': - return EmptyIcon; - case 'credit-card': - return EmptyIcon; - case 'date': - return EmptyIcon; - case 'delete': - return EmptyIcon; - case 'deploy': - return EmptyIcon; - case 'devices': - return EmptyIcon; - case 'devices-active': - return EmptyIcon; - case 'download': - return EmptyIcon; - case 'edit': - return EmptyIcon; - case 'enter': - return EmptyIcon; - case 'expand': - return EmptyIcon; - case 'filter': - return EmptyIcon; - case 'gateway': - return EmptyIcon; - case 'gift': - return EmptyIcon; - case 'github': - return EmptyIcon; - case 'groups': - return EmptyIcon; - case 'hamburger': - return EmptyIcon; - case 'info-filled': - return EmptyIcon; - case 'info-outlined': - return EmptyIcon; - case 'location': - return EmptyIcon; - case 'location-preview': - return EmptyIcon; - case 'location-tracking': - return EmptyIcon; - case 'logout': - return EmptyIcon; - case 'mail': - return EmptyIcon; - case 'manage-keys': - return EmptyIcon; - case 'menu': - return EmptyIcon; - case 'minus-circle': - return EmptyIcon; - case 'navigation-collapse': - return EmptyIcon; - case 'navigation-uncollapse': - return EmptyIcon; - case 'notification': - return EmptyIcon; - case 'one-time-password': - return EmptyIcon; - case 'openid': - return EmptyIcon; - case 'pdf': - return EmptyIcon; - case 'pie-chart': - return EmptyIcon; - case 'plus-circle': - return EmptyIcon; - case 'profile': - return EmptyIcon; - case 'protection': - return EmptyIcon; - case 'qr': - return EmptyIcon; - case 'search': - return EmptyIcon; - case 'servers': - return EmptyIcon; - case 'settings': - return EmptyIcon; - case 'sort': - return EmptyIcon; - case 'status-attention': - return EmptyIcon; - case 'status-available': - return EmptyIcon; - case 'status-important': - return EmptyIcon; - case 'support': - return EmptyIcon; - case 'transactions': - return EmptyIcon; - case 'user': - return EmptyIcon; - case 'user-active': - return EmptyIcon; - case 'users': - return EmptyIcon; - case 'webhooks': - return EmptyIcon; - case 'yubi-keys': - return EmptyIcon; - } - }, [iconKind]); - - const getStyle = useMemo((): CSSProperties => { - const styles: CSSProperties = {}; - const transform: string[] = []; - // kind specific configurations - switch (iconKind) { - case 'arrow-big': - case 'arrow-small': - if (rotationDirection) { - transform.push(`rotate(${mapRotation(iconKind, rotationDirection)}deg)`); - } - break; - } - if (customRotation && !rotationDirection) { - transform.push(`rotate(${customRotation}deg)`); - } - if (size) { - styles.width = size; - styles.height = size; - } - if (transform.length) { - styles.transform = transform.join(' '); - } - return styles; - }, [iconKind, size, rotationDirection, customRotation]); - - return ( -
- -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icon-types.ts b/webnext/src/shared/defguard-ui/components/Icon/icon-types.ts deleted file mode 100644 index 554b283..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icon-types.ts +++ /dev/null @@ -1,96 +0,0 @@ -export const IconKind = { - Hide: 'hide', - ArrowBig: 'arrow-big', - ArrowSmall: 'arrow-small', - PlusCircle: 'plus-circle', - MinusCircle: 'minus-circle', - Edit: 'edit', - Show: 'show', - Analytics: 'analytics', - Search: 'search', - Delete: 'delete', - Transactions: 'transactions', - Copy: 'copy', - Settings: 'settings', - Close: 'close', - Plus: 'plus', - Support: 'support', - Menu: 'menu', - Check: 'check', - Date: 'date', - CreditCard: 'credit-card', - Archive: 'archive', - PieChart: 'pie-chart', - Notification: 'notification', - Globe: 'globe', - Groups: 'groups', - OpenInNewWindow: 'open-in-new-window', - Users: 'users', - Mail: 'mail', - Filter: 'filter', - User: 'user', - LockOpen: 'lock-open', - Servers: 'servers', - Protection: 'protection', - NavigationCollapse: 'navigation-collapse', - NavigationUncollapse: 'navigation-uncollapse', - Devices: 'devices', - Logout: 'logout', - YubiKeys: 'yubi-keys', - OpenId: 'openid', - Webhooks: 'webhooks', - Help: 'help', - ActivityNotes: 'activity-notes', - Activity: 'activity', - AccessSettings: 'access-settings', - Profile: 'profile', - Attention: 'attention', - Warning: 'warning', - Download: 'download', - Code: 'code', - Deploy: 'deploy', - Expand: 'expand', - Collapse: 'collapse', - CheckCircle: 'check-circle', - Location: 'location', - InfoOutlined: 'info-outlined', - InfoFilled: 'info-filled', - LocationPreview: 'location-preview', - AddUser: 'add-user', - QR: 'qr', - File: 'file', - LocationTracking: 'location-tracking', - Config: 'config', - Gift: 'gift', - Hamburger: 'hamburger', - Sort: 'sort', - Gateway: 'gateway', - EmptyPoint: 'empty-point', - DevicesActive: 'devices-active', - UserActive: 'user-active', - Windows: 'windows', - AppStore: 'app-store', - Apple: 'apple', - Desktop: 'desktop', - Mobile: 'mobile', - Android: 'android', - Pdf: 'pdf', - Linux: 'linux', - Clear: 'clear', - CheckFilled: 'check-filled', - Enter: 'enter', - Github: 'github', - OneTimePassword: 'one-time-password', - Loader: 'loader', - ManageKeys: 'manage-keys', - StatusSimple: 'status-simple', - StatusAttention: 'status-attention', - StatusAvailable: 'status-available', - StatusImportant: 'status-important', - Disabled: 'disabled', - ArchLinux: 'arch-linux', - Debian: 'debian', - Ubuntu: 'ubuntu', -} as const; - -export type IconKindValue = (typeof IconKind)[keyof typeof IconKind]; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx deleted file mode 100644 index 5cb508a..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconAccessSettings = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAndroid.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAndroid.tsx deleted file mode 100644 index bf37eaa..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAndroid.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconAndroid = (props: SVGProps) => { - return ( - - - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconApple.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconApple.tsx deleted file mode 100644 index d0bb87a..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconApple.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconApple = (props: SVGProps) => { - return ( - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAppstore.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAppstore.tsx deleted file mode 100644 index 1f75861..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAppstore.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconAppStore = (props: SVGProps) => { - return ( - - - - - - - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArchLinux.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconArchLinux.tsx deleted file mode 100644 index ab1de5b..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArchLinux.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconArchLinux = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowBig.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowBig.tsx deleted file mode 100644 index 3d80a85..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowBig.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconArrowBig = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowSmall.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowSmall.tsx deleted file mode 100644 index 4092fa3..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconArrowSmall.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconArrowSmall = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckCircle.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckCircle.tsx deleted file mode 100644 index 9a94792..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckCircle.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconCheckCircle = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckFilled.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckFilled.tsx deleted file mode 100644 index 0fc9b09..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCheckFilled.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconCheckFilled = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconClose.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconClose.tsx deleted file mode 100644 index cb8e9d1..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconClose.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconClose = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconConfig.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconConfig.tsx deleted file mode 100644 index 0fd3641..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconConfig.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconConfig = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCopy.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconCopy.tsx deleted file mode 100644 index eb5706f..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconCopy.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconCopy = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDebian.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconDebian.tsx deleted file mode 100644 index 74295c5..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDebian.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconDebian = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDesktop.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconDesktop.tsx deleted file mode 100644 index 335b047..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDesktop.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconDesktop = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDisabled.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconDisabled.tsx deleted file mode 100644 index 33bb493..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconDisabled.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconDisabled = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconEmptyPoint.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconEmptyPoint.tsx deleted file mode 100644 index a5b5323..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconEmptyPoint.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconEmptyPoint = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconFile.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconFile.tsx deleted file mode 100644 index 0f4266c..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconFile.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconFile = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconGlobe.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconGlobe.tsx deleted file mode 100644 index c7d51e1..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconGlobe.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconGlobe = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconHelp.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconHelp.tsx deleted file mode 100644 index 6024703..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconHelp.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconHelp = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconHide.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconHide.tsx deleted file mode 100644 index 3dbe44a..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconHide.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconHide = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLinux.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconLinux.tsx deleted file mode 100644 index f0a86fb..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLinux.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconLinux = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLoader.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconLoader.tsx deleted file mode 100644 index 117773e..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLoader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export const IconLoader = () => { - return ( - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLock.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconLock.tsx deleted file mode 100644 index 9bd4ef7..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconLock.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const IconLockOpen = () => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconMobile.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconMobile.tsx deleted file mode 100644 index a9a3c59..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconMobile.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconMobile = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconOpenInNewWindow.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconOpenInNewWindow.tsx deleted file mode 100644 index 6951471..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconOpenInNewWindow.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconOpenInNewWindow = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconPlus.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconPlus.tsx deleted file mode 100644 index b375db6..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconPlus.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconPlus = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconShow.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconShow.tsx deleted file mode 100644 index 54ee682..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconShow.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconShow = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconStatusSimple.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconStatusSimple.tsx deleted file mode 100644 index 8ca913e..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconStatusSimple.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconStatusSimple = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconUbuntu.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconUbuntu.tsx deleted file mode 100644 index 4279ff4..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconUbuntu.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconUbuntu = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconWarning.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconWarning.tsx deleted file mode 100644 index b6a060e..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconWarning.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconWarning = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconWindows.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconWindows.tsx deleted file mode 100644 index 773876c..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/icons/IconWindows.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { SVGProps } from 'react'; - -export const IconWindows = (props: SVGProps) => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Icon/index.ts b/webnext/src/shared/defguard-ui/components/Icon/index.ts deleted file mode 100644 index c15633d..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Icon } from './Icon'; -export type { IconKind } from './icon-types'; diff --git a/webnext/src/shared/defguard-ui/components/Icon/style.scss b/webnext/src/shared/defguard-ui/components/Icon/style.scss deleted file mode 100644 index b73c09c..0000000 --- a/webnext/src/shared/defguard-ui/components/Icon/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -.icon { - display: inline-block; - overflow: hidden; - user-select: none; - - svg { - width: inherit; - height: inherit; - transition-property: transform; - - @include animate; - - path { - @include animate(fill); - } - - circle { - @include animate(stroke); - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/IconButton/IconButton.tsx b/webnext/src/shared/defguard-ui/components/IconButton/IconButton.tsx deleted file mode 100644 index bd776c2..0000000 --- a/webnext/src/shared/defguard-ui/components/IconButton/IconButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import { Icon } from '../Icon/Icon'; -import type { IconButtonProps } from './types'; - -export const IconButton = ({ icon, ref, disabled = false, onClick }: IconButtonProps) => { - return ( -
{ - if (!disabled) { - onClick?.(e); - } - }} - > - -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/IconButton/style.scss b/webnext/src/shared/defguard-ui/components/IconButton/style.scss deleted file mode 100644 index 56d3fbd..0000000 --- a/webnext/src/shared/defguard-ui/components/IconButton/style.scss +++ /dev/null @@ -1,35 +0,0 @@ -.icon-button { - --icon-color: var(--fg-muted); - - background-color: transparent; - border-radius: var(--button-border-radius-sm); - height: var(--button-size-primary); - width: var(--button-size-primary); - display: inline-flex; - flex-flow: column; - align-items: center; - justify-content: center; - - @include animate(background-color); - - &:not(.disabled) { - cursor: pointer; - - &:hover { - --icon-color: var(--fg-neutral); - - background-color: var(--bg-emphasis); - } - } - - &.disabled { - cursor: not-allowed; - --icon-color: var(--fg-disabled); - } - - & > .icon svg path { - fill: var(--icon-color); - - @include animate(fill); - } -} diff --git a/webnext/src/shared/defguard-ui/components/IconButton/types.ts b/webnext/src/shared/defguard-ui/components/IconButton/types.ts deleted file mode 100644 index 55501dc..0000000 --- a/webnext/src/shared/defguard-ui/components/IconButton/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { MouseEventHandler, Ref } from 'react'; -import type { IconKindValue } from '../Icon/icon-types'; - -export type IconButtonProps = { - icon: IconKindValue; - disabled?: boolean; - ref?: Ref; - onClick?: MouseEventHandler; -}; diff --git a/webnext/src/shared/defguard-ui/components/IconButtonMenu/IconButtonMenu.tsx b/webnext/src/shared/defguard-ui/components/IconButtonMenu/IconButtonMenu.tsx deleted file mode 100644 index 92c56b5..0000000 --- a/webnext/src/shared/defguard-ui/components/IconButtonMenu/IconButtonMenu.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { - autoUpdate, - FloatingPortal, - offset, - shift, - size, - useClick, - useDismiss, - useFloating, - useInteractions, -} from '@floating-ui/react'; -import { useState } from 'react'; -import { mergeRefs } from '../../utils/mergeRefs'; -import { IconButton } from '../IconButton/IconButton'; -import type { IconButtonProps } from '../IconButton/types'; -import { Menu } from '../Menu/Menu'; -import type { MenuItemsGroup } from '../Menu/types'; - -export const IconButtonMenu = ({ - menuItems, - ref, - ...buttonProps -}: IconButtonProps & { - menuItems: MenuItemsGroup[]; -}) => { - const [isOpen, setOpen] = useState(false); - const { refs, context, floatingStyles } = useFloating({ - placement: 'bottom-end', - whileElementsMounted: autoUpdate, - onOpenChange: setOpen, - open: isOpen, - middleware: [ - offset(4), - shift(), - size({ - apply({ rects, elements, availableHeight }) { - const refWidth = `${rects.reference.width}px`; - elements.floating.style.minWidth = refWidth; - elements.floating.style.maxHeight = `${availableHeight - 10}px`; - }, - }), - ], - }); - const click = useClick(context, { - toggle: true, - }); - - const dismiss = useDismiss(context, { - ancestorScroll: true, - escapeKey: true, - outsidePress: (event) => !(event.target as HTMLElement).closest('.menu'), - }); - - const { getFloatingProps, getReferenceProps } = useInteractions([click, dismiss]); - - return ( - <> - - {isOpen && ( - - { - setOpen(false); - }} - {...getFloatingProps()} - /> - - )} - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/InfoBanner/InfoBanner.tsx b/webnext/src/shared/defguard-ui/components/InfoBanner/InfoBanner.tsx deleted file mode 100644 index 891c6fe..0000000 --- a/webnext/src/shared/defguard-ui/components/InfoBanner/InfoBanner.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useMemo } from 'react'; -import { Icon } from '../Icon'; -import type { IconKindValue } from '../Icon/icon-types'; -import './style.scss'; -import clsx from 'clsx'; -import { RenderMarkdown } from '../RenderMarkdown/RenderMarkdown'; - -type Props = { - icon: IconKindValue; - text: string | string[]; - variant?: 'info' | 'warning'; - markdown?: boolean; -}; - -export const InfoBanner = ({ icon, text, markdown = false, variant = 'info' }: Props) => { - const textContents = useMemo(() => { - if (markdown) { - const prop = Array.isArray(text) ? text.join('\n') : text; - return ; - } - if (Array.isArray(text)) { - return text.map((content, index) =>

{content}

); - } - return

{text}

; - }, [text, markdown]); - - return ( -
-
-
- -
-
{textContents}
-
-
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss deleted file mode 100644 index 4e66291..0000000 --- a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss +++ /dev/null @@ -1,68 +0,0 @@ -.info-banner { - & > .inner { - --bg-color: transparent; - --icon-color: transparent; - --color: transparent; - - width: 100%; - max-width: 100%; - overflow: hidden; - display: grid; - grid-template-columns: 20px 1fr; - grid-template-rows: 1fr; - column-gap: var(--spacing-md); - background-color: var(--bg-color); - border-radius: var(--radius-lg); - box-sizing: border-box; - padding: var(--spacing-sm) var(--spacing-lg); - align-items: start; - justify-content: start; - - @include animate(background-color); - - &.variant-info { - --bg-color: var(--bg-disabled); - --color: var(--fg-muted); - --icon-color: var(--fg-muted); - } - - &.variant-warning { - --bg-color: var(--bg-warning-transparent); - --color: var(--fg-attention); - --icon-color: var(--fg-attention); - } - - & > .icon-track { - display: block; - width: 20px; - height: 20px; - user-select: none; - - svg { - path { - fill: var(--icon-color); - - @include animate(fill); - } - } - } - - & > .content { - p { - max-width: 100%; - overflow: hidden; - text-wrap: wrap; - text-align: left; - } - - p, - span, - a { - font: var(--t-body-xs-500); - color: var(--color); - - @include animate(color); - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Input/Input.tsx b/webnext/src/shared/defguard-ui/components/Input/Input.tsx deleted file mode 100644 index 33dfc1d..0000000 --- a/webnext/src/shared/defguard-ui/components/Input/Input.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { type HTMLInputTypeAttribute, useId, useMemo, useRef, useState } from 'react'; -import './style.scss'; -import clsx from 'clsx'; -import { isPresent } from '../../utils/isPresent'; -import { mergeRefs } from '../../utils/mergeRefs'; -import { FieldBox } from '../FieldBox/FieldBox'; -import { FieldError } from '../FieldError/FieldError'; -import { FieldLabel } from '../FieldLabel/FieldLabel'; -import type { IconKindValue } from '../Icon/icon-types'; -import type { InputProps } from './types'; - -export const Input = ({ - value, - error, - label, - ref, - name, - placeholder, - boxProps, - testId, - onChange, - onBlur, - onFocus, - size = 'default', - type = 'text', - required = false, - disabled = false, - autocomplete = 'off', -}: InputProps) => { - const isPassword = useMemo(() => type === 'password', [type]); - - const [inputTypeInner, setInputType] = useState(type); - const innerRef = useRef(null); - const id = useId(); - - const interactionIconRight = useMemo((): IconKindValue | undefined => { - if (isPassword) { - if (inputTypeInner === 'password') { - return 'show'; - } else { - return 'hide'; - } - } - }, [isPassword, inputTypeInner]); - - return ( -
-
- {isPresent(label) && } - { - innerRef.current?.focus(); - }} - iconRight={interactionIconRight} - onInteractionClick={(e) => { - e.preventDefault(); - e.stopPropagation(); - if (isPassword) { - setInputType((s) => { - if (s === 'password') { - return 'text'; - } - return 'password'; - }); - } - }} - {...boxProps} - > - { - onChange?.(e.target.value); - }} - /> - - -
-
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Input/style.scss b/webnext/src/shared/defguard-ui/components/Input/style.scss deleted file mode 100644 index aac1dd2..0000000 --- a/webnext/src/shared/defguard-ui/components/Input/style.scss +++ /dev/null @@ -1,52 +0,0 @@ -.input { - & > .inner { - box-sizing: border-box; - - &.error { - padding-bottom: var(--form-field-error-space); - } - - .field-label { - cursor: pointer; - user-select: none; - } - - .input-track { - --input-font: var(--t-input-text-primary); - - &.size-lg { - --input-font: var(--t-input-text-big); - } - - input { - font: var(--input-font); - color: var(--fg-default); - border: none; - background: none; - border-radius: 0; - width: 100%; - max-width: 100%; - overflow: hidden; - margin: 0; - padding: 0; - - &::placeholder { - font: var(--input-font); - color: var(--fg-muted); - } - - &:disabled { - cursor: not-allowed; - } - } - } - - &.disabled { - user-select: none; - - & > .field-label { - cursor: not-allowed; - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Input/types.ts b/webnext/src/shared/defguard-ui/components/Input/types.ts deleted file mode 100644 index 5d3b5a0..0000000 --- a/webnext/src/shared/defguard-ui/components/Input/types.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { HTMLAttributes, HTMLInputAutoCompleteAttribute, Ref } from 'react'; -import type { FieldBoxProps, FieldSize } from '../FieldBox/types'; - -export type InputProps = { - value: string | null; - size?: FieldSize; - type?: 'password' | 'text'; - ref?: Ref; - error?: string; - name?: string; - label?: string; - required?: boolean; - disabled?: boolean; - placeholder?: string; - onChange?: (value: string) => void; - boxProps?: Partial; - autocomplete?: HTMLInputAutoCompleteAttribute; - testId?: string; -} & Pick, 'onBlur' | 'onFocus'>; - -export type FormInputProps = Pick< - InputProps, - 'name' | 'placeholder' | 'disabled' | 'required' | 'label' | 'autocomplete' | 'type' -> & { - mapError?: (error: string) => string | undefined; -}; diff --git a/webnext/src/shared/defguard-ui/components/InteractionBox/InteractionBox.tsx b/webnext/src/shared/defguard-ui/components/InteractionBox/InteractionBox.tsx deleted file mode 100644 index c648e53..0000000 --- a/webnext/src/shared/defguard-ui/components/InteractionBox/InteractionBox.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { MouseEventHandler, Ref } from 'react'; -import { Icon } from '../Icon'; -import type { IconKindValue } from '../Icon/icon-types'; -import './style.scss'; -import clsx from 'clsx'; - -type Props = { - iconSize: number; - icon: IconKindValue; - onClick?: MouseEventHandler; - id?: string; - className?: string; - ref?: Ref; - disabled?: boolean; - tabIndex?: number; -}; - -export const InteractionBox = ({ - iconSize, - icon, - onClick, - className, - id, - ref, - tabIndex, - disabled = false, -}: Props) => { - return ( -
- - -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/InteractionBox/style.scss b/webnext/src/shared/defguard-ui/components/InteractionBox/style.scss deleted file mode 100644 index b18b312..0000000 --- a/webnext/src/shared/defguard-ui/components/InteractionBox/style.scss +++ /dev/null @@ -1,29 +0,0 @@ -.interaction-box { - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: center; - flex: none; - position: relative; - user-select: none; - - & > button { - display: block; - position: absolute; - content: ' '; - width: 36px; - height: 36px; - background-color: transparent; - border: none; - cursor: pointer; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - padding: 0; - margin: 0; - - &:disabled { - cursor: not-allowed; - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/LoaderSpinner/LoaderSpinner.tsx b/webnext/src/shared/defguard-ui/components/LoaderSpinner/LoaderSpinner.tsx deleted file mode 100644 index 2719629..0000000 --- a/webnext/src/shared/defguard-ui/components/LoaderSpinner/LoaderSpinner.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Icon } from '../Icon'; -import './style.scss'; - -type Props = { - size?: number; -}; - -export const LoaderSpinner = ({ size = 20 }: Props) => { - return ( -
- -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/LoaderSpinner/style.scss b/webnext/src/shared/defguard-ui/components/LoaderSpinner/style.scss deleted file mode 100644 index b0832f7..0000000 --- a/webnext/src/shared/defguard-ui/components/LoaderSpinner/style.scss +++ /dev/null @@ -1,18 +0,0 @@ -.loader-spinner { - display: inline-block; - user-select: none; - - & > .icon { - animation: spin 1s ease-in-out infinite; - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} diff --git a/webnext/src/shared/defguard-ui/components/Menu/Menu.tsx b/webnext/src/shared/defguard-ui/components/Menu/Menu.tsx deleted file mode 100644 index 6be5111..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/Menu.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Fragment } from 'react'; -import { MenuItem } from './components/MenuItem'; -import './style.scss'; -import clsx from 'clsx'; -import { isPresent } from '../../utils/isPresent'; -import { MenuHeader } from './components/MenuHeader'; -import { MenuSpacer } from './components/MenuSpacer'; -import type { MenuProps } from './types'; - -export const Menu = ({ - itemGroups, - ref, - className, - onClose, - testId, - ...props -}: MenuProps) => { - return ( -
- {itemGroups.map((group, groupIndex) => ( - - {isPresent(group.header) && } - {group.items.map((item) => ( - - ))} - {groupIndex !== itemGroups.length - 1 && itemGroups.length !== 1 && ( - - )} - - ))} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Menu/components/MenuHeader.tsx b/webnext/src/shared/defguard-ui/components/Menu/components/MenuHeader.tsx deleted file mode 100644 index 70e8097..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/components/MenuHeader.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import clsx from 'clsx'; -import { isPresent } from '../../../utils/isPresent'; -import { InteractionBox } from '../../InteractionBox/InteractionBox'; -import type { MenuHeaderProps } from '../types'; - -export const MenuHeader = ({ text, testId, onHelp, onClose }: MenuHeaderProps) => { - return ( -
-

{text}

- {isPresent(onHelp) && ( - { - onClose?.(); - onHelp(); - }} - /> - )} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Menu/components/MenuItem.tsx b/webnext/src/shared/defguard-ui/components/Menu/components/MenuItem.tsx deleted file mode 100644 index b6bafc8..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/components/MenuItem.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import clsx from 'clsx'; -import { isPresent } from '../../../utils/isPresent'; -import { Icon } from '../../Icon'; -import type { MenuItemProps } from '../types'; - -export const MenuItem = ({ - disabled, - text, - icon, - items, - testId, - variant, - onClick, - onClose, -}: MenuItemProps) => { - const hasItems = isPresent(items) && items.length > 0; - const hasIcon = isPresent(icon); - - return ( -
{ - if (!disabled) { - onClick?.(); - if (!hasItems) { - onClose?.(); - } - } - }} - > - {isPresent(icon) && } -

{text}

- {hasItems && ( -
- -
- )} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Menu/components/MenuSpacer.tsx b/webnext/src/shared/defguard-ui/components/Menu/components/MenuSpacer.tsx deleted file mode 100644 index 4510f86..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/components/MenuSpacer.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export const MenuSpacer = () => { - return ( -
-
-
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Menu/style.scss b/webnext/src/shared/defguard-ui/components/Menu/style.scss deleted file mode 100644 index 5964655..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/style.scss +++ /dev/null @@ -1,117 +0,0 @@ -/* stylelint-disable no-descending-specificity */ -.menu { - display: flex; - flex-flow: column; - box-sizing: border-box; - padding: var(--spacing-sm); - border-radius: var(--radius-lg); - border: 1px solid var(--border-disabled); - background-color: var(--bg-default); - overflow: hidden auto; - z-index: 3; - - .menu-spacer { - user-select: none; - padding: var(--spacing-sm) 0; - - & > .line { - display: block; - content: ' '; - background-color: var(--bg-active); - height: 1px; - width: 100%; - } - } - - .menu-header { - display: flex; - flex-flow: row nowrap; - column-gap: var(--spacing-md); - justify-content: space-between; - flex: none; - - p { - font: var(--t-menu-title); - color: var(--fg-muted); - padding-left: var(--spacing-sm); - } - - .interaction-box { - button { - height: 26px; - width: 26px; - } - - &:hover { - svg { - path { - fill: var(--fg-action); - } - } - } - } - } - - .menu-item { - --bg-color: var(--bg-default); - --color: var(--fg-default); - --icon-fill: var(--fg-muted); - - display: flex; - flex-flow: row nowrap; - flex: none; - align-items: center; - border-radius: var(--radius-md); - padding: 0 var(--spacing-sm); - column-gap: var(--spacing-md); - background-color: var(--bg-color); - cursor: pointer; - height: 36px; - color: var(--color); - position: relative; - - @include animate(background-color); - - &.disabled { - cursor: not-allowed; - } - - &.nested { - // account for positioned icon on the right side - padding: 0 calc(var(--spacing-sm) + var(--spacing-md) + 20px) 0 var(--spacing-sm); - } - - &.variant-danger { - --color: var(--fg-critical); - --icon-fill: var(--fg-critical); - } - - &:not(.disabled) { - &:hover { - --bg-color: var(--bg-muted); - } - } - - p { - font: var(--t-menu-text); - color: inherit; - } - - & > .icon svg path { - fill: var(--icon-fill); - } - - & > .suffix { - position: absolute; - height: 20px; - width: 20px; - top: 50%; - right: var(--spacing-sm); - transform: translateY(-50%); - - svg path { - fill: var(--fg-muted); - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Menu/types.ts b/webnext/src/shared/defguard-ui/components/Menu/types.ts deleted file mode 100644 index 8537a93..0000000 --- a/webnext/src/shared/defguard-ui/components/Menu/types.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { HTMLAttributes, Ref } from 'react'; -import type { IconKindValue } from '../Icon/icon-types'; - -export interface MenuProps extends HTMLAttributes { - itemGroups: MenuItemsGroup[]; - ref?: Ref; - testId?: string; - onClose?: () => void; -} - -export interface MenuItemsGroup { - header?: MenuHeaderProps; - items: MenuItemProps[]; -} - -export interface MenuItemProps { - text: string; - variant?: 'default' | 'danger'; - disabled?: boolean; - icon?: IconKindValue; - items?: MenuItemProps[]; - testId?: string; - onClick?: () => void; - onClose?: () => void; -} - -export interface MenuHeaderProps { - text: string; - tooltip?: string; - testId?: string; - onClose?: () => void; - onHelp?: () => void; -} diff --git a/webnext/src/shared/defguard-ui/components/Modal/Modal.tsx b/webnext/src/shared/defguard-ui/components/Modal/Modal.tsx deleted file mode 100644 index 803a5d1..0000000 --- a/webnext/src/shared/defguard-ui/components/Modal/Modal.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import { AnimatePresence, motion } from 'motion/react'; -import { useCallback, useEffect, useRef } from 'react'; -import { createPortal } from 'react-dom'; -import { BehaviorSubject } from 'rxjs'; -import { motionTransitionStandard } from '../../../consts'; -import { isPresent } from '../../utils/isPresent'; -import { IconButton } from '../IconButton/IconButton'; -import type { ModalProps } from './types'; - -const portalTarget = document.getElementById('modals-root') as HTMLElement; -const rootElement = document.getElementById('root') as HTMLElement; - -type MouseObserverState = { - press?: React.MouseEvent; - release?: React.MouseEvent; -}; - -export const Modal = ({ - id, - isOpen, - contentClassName, - positionerClassName, - hideBackdrop, - title, - children, - size, - afterClose, - onClose, -}: ModalProps) => { - const openRef = useRef(isOpen); - const contentRef = useRef(null); - const mouseObserver = useRef(new BehaviorSubject({})); - - const checkEventOutside = useCallback( - (event: React.MouseEvent): boolean => { - const domRect = contentRef.current?.getBoundingClientRect(); - if (domRect) { - const start_x = domRect?.x; - const start_y = domRect?.y; - const end_x = start_x + domRect?.width; - const end_y = start_y + domRect.height; - if ( - event.clientX < start_x || - event.clientX > end_x || - event.clientY < start_y || - event.clientY > end_y - ) { - return true; - } - } - return false; - }, - [], - ); - - useEffect(() => { - if (mouseObserver && contentRef && isOpen) { - const sub = mouseObserver.current.subscribe(({ press, release }) => { - if (release && press) { - const target = press.target as Element; - const validParent = target.closest('#modals-root'); - const checkPress = checkEventOutside(press); - const checkRelease = checkEventOutside(release); - if (checkPress && checkRelease && isPresent(onClose) && validParent !== null) { - onClose(); - } - } - }); - return () => { - sub.unsubscribe(); - }; - } - }, [isOpen, onClose, checkEventOutside]); - - useEffect(() => { - // clear observer after closing modal - if (!isOpen) { - mouseObserver.current.next({}); - } - if (isOpen) { - rootElement.setAttribute('aria-hidden', 'true'); - rootElement.style.overflowY = 'hidden'; - } else { - rootElement.removeAttribute('aria-hidden'); - rootElement.style.overflowY = 'auto'; - } - }, [isOpen]); - - return createPortal( - - {isOpen && ( - - {!hideBackdrop && ( - - )} - { - if (event) { - const { press } = mouseObserver.current.getValue(); - mouseObserver.current.next({ press: press, release: event }); - } - }} - onMouseDown={(event) => { - if (event) { - mouseObserver.current.next({ press: event, release: undefined }); - } - }} - > - { - if (!openRef.current) { - afterClose?.(); - } - }} - transition={motionTransitionStandard} - > -
-

{title}

- -
-
{children}
- - - - )} - , - portalTarget, - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Modal/style.scss b/webnext/src/shared/defguard-ui/components/Modal/style.scss deleted file mode 100644 index 9110891..0000000 --- a/webnext/src/shared/defguard-ui/components/Modal/style.scss +++ /dev/null @@ -1,73 +0,0 @@ -#modals-root { - position: relative; -} - -#modals-root .modal-root { - display: block; - - .backdrop { - position: fixed; - inset: 0; - display: block; - content: ' '; - width: 100%; - height: 100%; - z-index: 4; - } - - .modal-positioner { - overflow: auto; - position: fixed; - inset: 0; - z-index: 4; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - box-sizing: border-box; - padding: var(--spacing-xl); - - .modal { - --max-width: var(--modal-size-md); - - background-color: var(--bg-default); - border-radius: var(--radius-lg); - width: 100%; - max-width: var(--max-width); - - &.size-small { - --max-width: var(--modal-size-sm); - } - - &.size-primary { - --max-width: var(--modal-size-md); - } - - & > .modal-header { - box-sizing: border-box; - padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg); - border-top-left-radius: var(--radius-lg); - border-top-right-radius: var(--radius-lg); - display: grid; - grid-template-columns: 1fr 36px; - grid-template-rows: 1fr; - align-items: center; - user-select: none; - border-bottom: 1px solid var(--border-default); - - .title { - font: var(--t-body-primary-600); - } - } - - & > .modal-content { - box-sizing: border-box; - padding: var(--spacing-xl); - - & > p { - font: var(--t-body-sm-400); - } - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/Modal/types.ts b/webnext/src/shared/defguard-ui/components/Modal/types.ts deleted file mode 100644 index 359ab6c..0000000 --- a/webnext/src/shared/defguard-ui/components/Modal/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { ReactNode } from 'react'; - -export interface ModalProps { - title: string; - children: ReactNode; - isOpen: boolean; - hideBackdrop?: boolean; - size?: 'small' | 'primary'; - onClose?: () => void; - afterClose?: () => void; - id?: string; - positionerClassName?: string; - contentClassName?: string; -} diff --git a/webnext/src/shared/defguard-ui/components/ModalControls/ModalControls.tsx b/webnext/src/shared/defguard-ui/components/ModalControls/ModalControls.tsx deleted file mode 100644 index c5d9e71..0000000 --- a/webnext/src/shared/defguard-ui/components/ModalControls/ModalControls.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import { m } from '../../../../paraglide/messages'; -import { isPresent } from '../../utils/isPresent'; -import { Button } from '../Button/Button'; -import type { ButtonProps } from '../Button/types'; - -type Props = { - submitProps?: ButtonProps; - cancelProps?: ButtonProps; - children?: ReactNode; -}; - -export const ModalControls = ({ submitProps, cancelProps, children }: Props) => { - return ( -
- {isPresent(children) &&
{children}
} -
- {isPresent(cancelProps) && ( -
-
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/ModalControls/style.scss b/webnext/src/shared/defguard-ui/components/ModalControls/style.scss deleted file mode 100644 index ca45473..0000000 --- a/webnext/src/shared/defguard-ui/components/ModalControls/style.scss +++ /dev/null @@ -1,30 +0,0 @@ -.modal-controls { - width: 100%; - padding-top: var(--spacing-2xl); - - &:not(.extras) { - display: flex; - flex-flow: row nowrap; - width: 100%; - align-items: center; - justify-content: flex-end; - } - - // todo: extend when will be needed - &.extras { - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: 1fr; - column-gap: var(--spacing-xl); - align-items: center; - justify-content: end; - } - - .buttons { - display: flex; - flex-flow: row nowrap; - align-items: flex-end; - justify-content: flex-end; - column-gap: var(--spacing-md); - } -} diff --git a/webnext/src/shared/defguard-ui/components/Radio/Radio.tsx b/webnext/src/shared/defguard-ui/components/Radio/Radio.tsx deleted file mode 100644 index 91cf260..0000000 --- a/webnext/src/shared/defguard-ui/components/Radio/Radio.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import './style.scss'; -import { useHover } from '@uidotdev/usehooks'; -import clsx from 'clsx'; -import { useMemo } from 'react'; -import { isPresent } from '../../utils/isPresent'; - -type Props = { - text?: string; - active?: boolean; - disabled?: boolean; - onClick?: () => void; -}; - -export const Radio = ({ text, active, disabled, onClick }: Props) => { - const [ref, hover] = useHover(); - - const RenderIcon = useMemo(() => { - if (active) { - if (disabled) { - return StateSelectedDisabled; - } - return StateSelected; - } - if (disabled) { - return StateDefaultDisabled; - } - if (hover) { - return StateDefaultHover; - } - return StateDefault; - }, [active, disabled, hover]); - - return ( -
- - {isPresent(text) && {text}} -
- ); -}; - -const StateDefault = () => { - return ( - - - - ); -}; - -const StateDefaultHover = () => { - return ( - - - - ); -}; - -const StateDefaultDisabled = () => { - return ( - - - - ); -}; - -const StateSelected = () => { - return ( - - - - - ); -}; - -const StateSelectedDisabled = () => { - return ( - - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Radio/style.scss b/webnext/src/shared/defguard-ui/components/Radio/style.scss deleted file mode 100644 index 264c497..0000000 --- a/webnext/src/shared/defguard-ui/components/Radio/style.scss +++ /dev/null @@ -1,67 +0,0 @@ -.radio { - user-select: none; - cursor: pointer; - - &.disabled { - cursor: not-allowed; - } - - &.text { - display: grid; - grid-template-columns: 24px auto; - grid-template-rows: 1fr; - column-gap: var(--spacing-sm); - } - - span { - font: var(--t-body-sm-400); - } -} - -// state colors -.radio svg { - &.icon-default { - circle { - stroke: var(--border-default); - fill: var(--bg-default); - } - } - - &.icon-hover { - circle { - stroke: var(--border-emphasis); - fill: var(--bg-default); - } - } - - &.icon-disabled { - circle { - fill: var(--bg-disabled); - stroke: var(--border-disabled); - } - } - - &.icon-selected { - circle { - &:nth-child(1) { - fill: var(--bg-action); - } - - &:nth-child(2) { - fill: var(--c-white); - } - } - } - - &.icon-selected-disabled { - circle { - &:nth-child(1) { - fill: var(--bg-faded); - } - - &:nth-child(2) { - fill: var(--bg-disabled); - } - } - } -} diff --git a/webnext/src/shared/defguard-ui/components/RenderMarkdown/RenderMarkdown.tsx b/webnext/src/shared/defguard-ui/components/RenderMarkdown/RenderMarkdown.tsx deleted file mode 100644 index 4f3577d..0000000 --- a/webnext/src/shared/defguard-ui/components/RenderMarkdown/RenderMarkdown.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import ReactMarkdown from 'react-markdown'; - -export const RenderMarkdown = ({ content }: { content?: string | null | undefined }) => { - return {content}; -}; diff --git a/webnext/src/shared/defguard-ui/components/SSOButton/OIDCButton.tsx b/webnext/src/shared/defguard-ui/components/SSOButton/OIDCButton.tsx deleted file mode 100644 index 8cbca4b..0000000 --- a/webnext/src/shared/defguard-ui/components/SSOButton/OIDCButton.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import './style.scss'; - -import { useMemo } from 'react'; - -import googleImage from './assets/google.png'; - -type Props = { - text: string; - url: string; - testId?: string; -}; - -export const OIDCButton = ({ url, text }: Props) => { - const RenderIcon = useMemo(() => { - const { hostname } = new URL(url); - if (hostname === 'accounts.google.com') { - return IconGoogle; - } - if (hostname === 'login.microsoftonline.com') { - return IconMicrosoft; - } - - return IconDefault; - }, [url]); - - return ( - - - - ); -}; - -const IconMicrosoft = () => { - return ( - - - - - - - ); -}; - -const IconGoogle = () => { - return ; -}; - -const IconDefault = () => { - return ( - - - - ); -}; diff --git a/webnext/src/shared/defguard-ui/components/SSOButton/assets/google.png b/webnext/src/shared/defguard-ui/components/SSOButton/assets/google.png deleted file mode 100644 index 39860bde77fd6f867c9474bf53df2d53a6d9c443..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2040 zcmVb4AtJp~BH zMnPMJrj1RE4k&wM9n1O(??6eK5SnL0Q#*DX+lk-T_nyPKPMjLYc5D+>{1hwqanASs z&i6XsJpf;FASevVJes)KV=|fa8ckJmv0w%XU@Rv3T%LfdD-f7T8V|{H@==rzI7P`_ zjTYnH;?l!AOH2=zXw;RGOh6(8VzL|`q~b7O9)SvRFe6I#zFFU&es*c<@iTtEo4v;D zC+Dg#SAub34>eR-f7n>tZBnV4=0XulQO+``QKv?}m^A#Wp~*c@O*)1aWs;R9<|3SD zKgoW}mbWY_)plPvN;rf#C;&30#HdwsE>Y^Kf8*Vqkb^Z>QpEp!t*w#Xb~8m1-8>%= zp-^%PFq<1UW;SGk#7a^7oGNEEcxkdO! z@3^LGbTpc2TqgGX*=?=g+FVk6VlEh=t4)rjvb?59Cmin|Yw8*u%j)8E1aapLm5tj< z&3{+OF&m@ox)2yt7->{Ii!oq%LxJNs6pl#{6l05HuE|iySqxfye0XZ@cZbF=vqw@E z`OB2YGfRm%*L+Y$3qhQL7|>FKmV4LfdExk#>0f?$)jjb6KrFGy`>WS9e5bbZ@K?$# z2i<`nVJqcQ$W5$7E*(KM*0J?}dWr1fGLR#R60I5!`20___w+pinTzn!^PycEp0F8= z5Am3T<0H9~OBSL4-)pM0KE0{wa)^f04p!=Mg~`DG`r>fSkcRYwcRDM z6W!7V`U)+-QMb*F*F4?}^0bb0!m|S zkw}K}zno(>V>u~tAW=#k(dZiohsS#%k9~ACu;jzpw}tVdAhj($W6^~xVle+g18Cp3 zfvu-o&w@?~&b+O#Dg@~zfl61F>qa_4y`L5jm44f^9&(VkZtwG7i~5~mC=e=@ULclt0#UE+nhV>?)wAJc0TIn@2J?>CTJfYat%?>`lC7aF3>YXX7^wR#_n9{Sr7L0cJA zWT-5F3<%Emlhcr+YbCaBSrnmAkQfIBbMr=a87CM|l65t_nMTr2KrERDKLQtAC&afX zOs$FgI6+o`v-X92$@NVPN~kt*9Va+4A$gD{!{88wmPS|u*9j<2iVG(0;{;jG*^wr_ z5lH}GM-%r|DEtE}KOm-t#wHWD@g#Ze4ER93e5}%IaYUkZ9pw+hV~*z`7tlEuplB%D z5F*JE$D8Y!FPHV19L5lEjrD$xpn`xKt}-uI!J?%I+lK{}2tV>}MSm@7Zz^wlMepo) zh9G-3^Z)vuxg1u2ZTo?BYwvt!ND3|gX5w`mIIo=UTOz#pAN8CkzfJT8O3ny;4B8!c zz&|3jU~xI+nxi+JfR){xO94c6yMORpEGVX3C@)~}U3g_Ol^`5DDg91mWdVQ)xTqS6 zuI>kc?a2bWXK{fAlm6@V2X0h$6CMf&UtD{uNmo|C3n8>@v24pHVUPV{^0TF8;q^Bm z;CIIcUJBNeHs|fo!h2a)a7~8j3ClJ2ZS1#Ntt!aeX=j5nN7{Mx_5Gi>Y;qQn@XLL6wJ&g<$~5f?5r_ETxL0a9vg1nI?>ioa1#%puk4==2 zZ+l>EYsaf+WN}tkg)o=i`W&Lu7v4LX!fE+8iK28@?|n2l;#EAH(UokSvc_73z3U&y0i8$uzLgma3l~Dt@NX434N|Z7SJi;U*L(CUustF{^Ac7Mt z1OEnsm0Tln*J?}DXz-<HFhtU67_*&*Vbl{_ohZv90u? zvAOKd*t|#(TCJ^)eb~zuh?bnBT=6{c-j=6M|F}Yl=d>qXD=Fn`@7d5?cWBFie|VN~ zc$JPo2*~PcBc3009J=`6sb?Xp48XD^kZhloTsavDd0ao{Ol0lWfcp?=Gq3Q1N2Sz*3 zy$Cs;v=(v%Oe~F-qSCus51ZO6?^Ri}HX36-i%LME%(zNQX?Rd9g*6zYh&1OPnE8+A zt>I4l%M+J!B~~cG)VcAvF|IR~sH)B78mq<3b{j+-vva|yG#xlU?S%yw7JP{QrN?Kd W{2^B|BQQ(=0000 { - return ( -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/SizedBox/style.scss b/webnext/src/shared/defguard-ui/components/SizedBox/style.scss deleted file mode 100644 index 7a0173b..0000000 --- a/webnext/src/shared/defguard-ui/components/SizedBox/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -.sized-box { - display: block; - user-select: none; - pointer-events: none; - content: ''; -} diff --git a/webnext/src/shared/defguard-ui/components/Text/Text.tsx b/webnext/src/shared/defguard-ui/components/Text/Text.tsx deleted file mode 100644 index b72e976..0000000 --- a/webnext/src/shared/defguard-ui/components/Text/Text.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import type { - PolymorphicForwardedRef, - PolymorphicProps, -} from '@axa-ch/react-polymorphic-types'; -import type React from 'react'; -import { createElement, type ElementType } from 'react'; -import type { TextStyleValue } from '../../types'; - -type TextDefault = 'p'; -type TextAllowed = - | TextDefault - | 'span' - | 'strong' - | 'em' - | 'small' - | 'label' - | 'code' - | 'kbd' - | 'mark' - | 'sup' - | 'sub' - | 'time' - | 'abbr' - | 'q' - | 'cite' - | 'del' - | 'ins' - | 'pre' - | 'blockquote' - | 'h1' - | 'h2' - | 'h3' - | 'h4' - | 'h5' - | 'h6'; - -type OwnProps = React.ComponentPropsWithoutRef & { - font: TextStyleValue; -}; - -type TextProps = PolymorphicProps< - OwnProps, - T, - TextAllowed -> & { - ref?: PolymorphicForwardedRef; -}; - -export const AppText = ({ - as, - children, - style, - font, - ...rest -}: TextProps) => { - const Component = (as ?? ('p' satisfies ElementType)) as ElementType; - const computedStyle = { ...style, font }; - return createElement(Component, { ...rest, style: computedStyle }, children); -}; diff --git a/webnext/src/shared/defguard-ui/components/Tooltip/Tooltip.tsx b/webnext/src/shared/defguard-ui/components/Tooltip/Tooltip.tsx deleted file mode 100644 index 2f4aef1..0000000 --- a/webnext/src/shared/defguard-ui/components/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import './style.scss'; -import clsx from 'clsx'; -import type { HTMLAttributes, PropsWithChildren, Ref } from 'react'; - -export const Tooltip = ({ - ref, - children, - className, - ...rest -}: PropsWithChildren & { - ref?: Ref; -} & HTMLAttributes) => { - return ( -
- {children} -
- ); -}; diff --git a/webnext/src/shared/defguard-ui/components/Tooltip/style.scss b/webnext/src/shared/defguard-ui/components/Tooltip/style.scss deleted file mode 100644 index e79989f..0000000 --- a/webnext/src/shared/defguard-ui/components/Tooltip/style.scss +++ /dev/null @@ -1,14 +0,0 @@ -.tooltip { - box-sizing: border-box; - padding: var(--tooltip-spacing); - z-index: 3; - border-radius: var(--radius-md); - background-color: var(--bg-dark); - - span, - p, - a { - font: var(--t-tooltip); - color: var(--fg-white); - } -} diff --git a/webnext/src/shared/defguard-ui/components/form/FormInput/FormInput.tsx b/webnext/src/shared/defguard-ui/components/form/FormInput/FormInput.tsx deleted file mode 100644 index 8435285..0000000 --- a/webnext/src/shared/defguard-ui/components/form/FormInput/FormInput.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useStore } from '@tanstack/react-form'; -import { useMemo } from 'react'; -import type { z } from 'zod'; -import { useFieldContext, useFormContext } from '../../../form'; -import { isPresent } from '../../../utils/isPresent'; -import { Input } from '../../Input/Input'; -import type { FormInputProps } from '../../Input/types'; - -export const FormInput = ({ mapError, ...props }: FormInputProps) => { - const field = useFieldContext(); - const form = useFormContext(); - - // allows field to show error even if isPristine is true, this is needed in cases as input required or checkbox checked but user just clicked submit - const wasSubmittedWithFailure = useStore( - form.store, - (store) => !store.isSubmitSuccessful, - ); - - const isPristine = useStore(field.store, (state) => state.meta.isPristine); - - const errorState = useStore( - field.store, - // normally this should be ZodIssue but sometime's we want to add some post submit validation and there we probably want to set only error messages - (state) => state.meta.errors as Array, - ); - - const errorMessage = useMemo(() => { - // ignore errors unless some touches the field or submit's the form - if (isPristine && !wasSubmittedWithFailure) return undefined; - - const fieldError = errorState[0]; - - if (fieldError) { - if (typeof fieldError === 'string') { - if (isPresent(mapError)) { - return mapError(fieldError); - } - return fieldError; - } else { - if (isPresent(mapError)) { - return mapError(fieldError.message); - } - return fieldError.message; - } - } - return undefined; - }, [mapError, errorState[0], isPristine, wasSubmittedWithFailure]); - - return ( - - ); -}; diff --git a/webnext/src/shared/defguard-ui/form.tsx b/webnext/src/shared/defguard-ui/form.tsx deleted file mode 100644 index b9561ed..0000000 --- a/webnext/src/shared/defguard-ui/form.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createFormHook, createFormHookContexts } from '@tanstack/react-form'; -import { FormInput } from './components/form/FormInput/FormInput'; - -export const { fieldContext, formContext, useFieldContext, useFormContext } = - createFormHookContexts(); - -export const { useAppForm, withFieldGroup, withForm } = createFormHook({ - fieldContext, - formContext, - fieldComponents: { - FormInput, - }, - formComponents: {}, -}); diff --git a/webnext/src/shared/defguard-ui/scss/_base.scss b/webnext/src/shared/defguard-ui/scss/_base.scss deleted file mode 100644 index 042d447..0000000 --- a/webnext/src/shared/defguard-ui/scss/_base.scss +++ /dev/null @@ -1,99 +0,0 @@ -/* stylelint-disable font-family-name-quotes */ -html, -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -ul, -li { - margin: 0; - padding: 0; -} - -body, -html { - overflow: hidden; -} - -// for apple -body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: auto; -} - -h1 { - font: var(--t-title-h1); -} - -h2 { - font: var(--t-title-h2); -} - -h3 { - font: var(--t-title-h3); -} - -h4 { - font: var(--t-title-h4); -} - -h5 { - font: var(--t-title-h5); -} - -#root { - position: relative; - min-height: 100dvh; - max-height: 100dvh; - width: 100%; - overflow: hidden auto; - scrollbar-gutter: stable both-edges; -} - -#root, -body { - background-color: var(--bg-default); -} - -p, -span, -div, -section, -a, -h1, -h2, -h3, -h4, -h5, -h6 { - color: var(--fg-default); - font-family: - geist, - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Open Sans', - 'Helvetica Neue', - sans-serif; -} - -.icon path { - fill: var(--fg-muted); -} - -*:focus { - outline: none; -} - -*:-moz-focus-inner { - border: 0; -} diff --git a/webnext/src/shared/defguard-ui/scss/_fonts.scss b/webnext/src/shared/defguard-ui/scss/_fonts.scss deleted file mode 100644 index 79664bd..0000000 --- a/webnext/src/shared/defguard-ui/scss/_fonts.scss +++ /dev/null @@ -1,75 +0,0 @@ -/* stylelint-disable font-family-name-quotes */ -// fonts.scss -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-Regular.woff2') format('woff2'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-RegularItalic.woff2') format('woff2'); - font-weight: 400; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-Medium.woff2') format('woff2'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-MediumItalic.woff2') format('woff2'); - font-weight: 500; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-SemiBold.woff2') format('woff2'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-SemiBoldItalic.woff2') format('woff2'); - font-weight: 600; - font-style: italic; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-Bold.woff2') format('woff2'); - font-weight: 700; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Geist'; - src: url('/fonts/geist/Geist-BoldItalic.woff2') format('woff2'); - font-weight: 700; - font-style: italic; - font-display: swap; -} - -// source-code-pro - -@font-face { - font-family: 'Source Code Pro'; - src: url('/fonts/source_code_pro/SourceCodePro-Regular.woff2') format('woff2'); - font-weight: 400; - font-style: normal; - font-display: swap; -} diff --git a/webnext/src/shared/defguard-ui/scss/_form.scss b/webnext/src/shared/defguard-ui/scss/_form.scss deleted file mode 100644 index 7ed8615..0000000 --- a/webnext/src/shared/defguard-ui/scss/_form.scss +++ /dev/null @@ -1,6 +0,0 @@ -.form-col-2 { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - column-gap: var(--spacing-md); -} diff --git a/webnext/src/shared/defguard-ui/scss/_shared_tokens.scss b/webnext/src/shared/defguard-ui/scss/_shared_tokens.scss deleted file mode 100644 index 4e1614d..0000000 --- a/webnext/src/shared/defguard-ui/scss/_shared_tokens.scss +++ /dev/null @@ -1,225 +0,0 @@ -$font-fallback: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Open Sans', - 'Helvetica Neue', - sans-serif; -$geist: - geist, - #{$font-fallback}; -$source-code-pro: - 'Source Code Pro', - #{$font-fallback}; -/* stylelint-disable value-keyword-case */ -:root { - // font settings - --font-family-title: #{$geist}; - --font-family-body: #{$geist}; - --font-family-component: #{geist}; - --font-family-code: #{$source-code-pro}; - - --t-body-xxs-600: normal 600 11px/14px #{$geist}; - --t-body-xxs-400: normal 400 11px/14px #{$geist}; - - --t-body-xs-600: normal 600 12px/16px #{$geist}; - --t-body-xs-500: normal 500 12px/16px #{$geist}; - --t-body-xs-400: normal 400 12px/16px #{$geist}; - - --t-body-sm-600: normal 600 14px/20px #{$geist}; - --t-body-sm-500: normal 500 14px/20px #{$geist}; - --t-body-sm-400: normal 400 14px/20px #{$geist}; - - --t-body-primary-400: normal 400 16px/24px #{$geist}; - --t-body-primary-600: normal 600 16px/24px #{$geist}; - --t-body-primary-500: normal 500 16px/24px #{$geist}; - - --t-title-h5: normal 600 18px/28px #{$geist}; - --t-title-h4: normal 600 20px/28px #{$geist}; - --t-title-h3: normal 600 24px/32px #{$geist}; - --t-title-h2: normal 600 28px/40px #{$geist}; - --t-title-h1: normal 600 32px/44px #{$geist}; - - // border width - --border-1: 1px; - --border-2: 2px; - - // border-radius - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-xxl: 24px; - --radius-xxxl: 32px; - --radius-full: 100px; - - // scale - --size-xs: 16px; - --size-sm: 20px; - --size-md: 24px; - --size-xl: 32px; - --size-2xl: 36px; - --size-3xl: 40px; - --size-4xl: 44px; - --size-5xl: 60px; - - // spacing - --spacing-xs: 4px; - --spacing-sm: 8px; - --spacing-md: 12px; - --spacing-lg: 16px; - --spacing-xl: 20px; - --spacing-2xl: 24px; - --spacing-3xl: 32px; - --spacing-4xl: 40px; - --spacing-5xl: 48px; - --spacing-6xl: 64px; - --spacing-7xl: 80px; - --spacing-8xl: 96px; - --spacing-9xl: 120px; - - // color basis - --c-neutral-1400: rgb(20 21 23); - --c-neutral-1300: rgb(25 26 28); - --c-neutral-1200: rgb(36 38 41); - --c-neutral-1100: rgb(46 49 54); - --c-neutral-1000: rgb(50 54 60); - --c-neutral-900: rgb(61 67 75); - --c-neutral-800: rgb(74 80 89); - --c-neutral-700: rgb(94 102 114); - --c-neutral-600: rgb(126 135 148); - --c-neutral-500: rgb(147 156 169); - --c-neutral-400: rgb(162 172 186); - --c-neutral-300: rgb(184 192 205); - --c-neutral-200: rgb(223 227 233); - --c-neutral-100: rgb(240 242 245); - --c-neutral-50: rgb(247 248 250); - - --c-white: rgb(255 255 255); - --c-white-50: rgb(255 255 255 / 50%); - --c-transparent: rgb(0 0 0 / 0%); - - --c-additional-error: rgb(204 60 60); - --c-additional-warning: rgb(255 149 0); - --c-additional-success: rgb(3 128 38); - --c-additional-code: rgb(112 75 172); - - --c-green-700: rgb(2 78 23); - --c-green-600: rgb(2 90 27); - --c-green-500: rgb(3 128 38); - --c-green-400: rgb(46 150 75); - --c-green-300: rgb(109 181 129); - --c-green-200: rgb(152 203 166); - --c-green-100: rgb(230 242 233); - --c-green-500-transparent: rgb(3 128 38 / 8%); - - --c-orange-700: rgb(156 91 0); - --c-orange-600: rgb(179 104 0); - --c-orange-500: rgb(255 149 0); - --c-orange-400: rgb(255 167 43); - --c-orange-300: rgb(255 194 107); - --c-orange-200: rgb(255 212 150); - --c-orange-100: rgb(255 244 230); - --c-orange-500-transparent: rgb(255 149 0 / 8%); - - --c-violet-700: rgb(53 36 82); - --c-violet-600: rgb(83 55 128); - --c-violet-500: rgb(102 55 178); - --c-violet-400: rgb(136 106 186); - --c-violet-300: rgb(172 151 207); - --c-violet-200: rgb(196 181 221); - --c-violet-100: rgb(241 237 247); - - --c-blue-700: rgb(38 57 115); - --c-blue-600: rgb(51 77 156); - --c-blue-500: rgb(57 97 219); - --c-blue-400: rgb(87 119 217); - --c-blue-300: rgb(140 161 222); - --c-blue-200: rgb(180 196 242); - --c-blue-100: rgb(237 241 252); - --c-blue-500-transparent: rgb(50 92 219 / 8%); - - --c-red-700: rgb(124 37 37); - --c-red-600: rgb(143 42 42); - --c-red-500: rgb(204 60 60); - --c-red-400: rgb(213 93 93); - --c-red-300: rgb(225 142 142); - --c-red-200: rgb(234 175 175); - --c-red-100: rgb(250 236 236); - --c-red-500-transparent: rgb(204 60 60 / 8%); - - // Components - - // Menu - --t-menu-title: 600 12px/24px #{$geist}; - --t-menu-text: 400 14px/24px #{$geist}; - --menu-spacing-icon: var(--spacing-md); - --menu-padding-sides: var(--spacing-sm); - --menu-border-radius-group: var(--radius-lg); - --menu-border-radius-item: var(--radius-md); - --menu-height: var(--size-2xl); - - // Icons - - --icon-size-lg: 32px; - --icon-size: 20px; - --icon-size-xs: 16px; - - // Modals - - --modal-title-size: 16px; - --modal-size-md: 640px; - --modal-size-sm: 480px; - --modal-spacing: var(--spacing-md); - --modal-spacing-sides: var(--spacing-lg); - --modal-border-radius: var(--radius-lg); - - // Buttons - - --t-button-label-lg: normal 400 16px / normal #{$geist}; - --t-button-label-primary: normal 400 14px / normal #{$geist}; - --button-border-radius-sm: var(--radius-md); - --button-border-radius-primary: var(--radius-md); - --button-border-radius-xl: var(--radius-full); - --button-size-primary: var(--size-2xl); - --button-size-lg: var(--size-4xl); - --button-size-xl: var(--size-5xl); - --button-icons-spacing: var(--spacing-sm); - - // Badge - --badge-border-radius: var(--radius-md); - --badge-spacing: var(--spacing-sm); - --badge-gap: var(--spacing-xs); - --t-badge: normal 500 12px / 16px #{$geist}; - --t-badge-spacing: 0.3px; - - // Inputs - --t-input-title: normal 500 12px / 16px #{$geist}; - --t-input-text-primary: normal 400 14px / 20px #{$geist}; - --t-input-text-big: normal 400 16px / 20px #{$geist}; - --t-input-error-message: normal 400 12px / 16px #{$geist}; - --input-border-radius: var(--radius-md); - --input-size-primary: 36px; - --input-size-lg: 44px; - --input-spacing-xs: var(--spacing-xs); - --input-spacing-sm: var(--spacing-sm); - --input-spacing-lg: var(--spacing-md); - - // Tooltip - --t-tooltip: normal 400 12px / 16px #{$geist}; - --tooltip-letter-spacing: 0.3; - --tooltip-spacing: var(--spacing-md); - - // custom - - // how much space does error message in all takes - --form-field-error-space: 24px; - - // how much space error should gap from main container - --form-field-error-gap: 8px; -} diff --git a/webnext/src/shared/defguard-ui/scss/_themes.scss b/webnext/src/shared/defguard-ui/scss/_themes.scss deleted file mode 100644 index ef13c12..0000000 --- a/webnext/src/shared/defguard-ui/scss/_themes.scss +++ /dev/null @@ -1,115 +0,0 @@ -:root[data-theme='light'] { - --bg-default: var(--c-white); - --bg-dark: var(--c-neutral-1300); - --bg-white: var(--c-white); - --bg-faded: var(--c-neutral-300); - --bg-disabled: var(--c-neutral-50); - --bg-muted: var(--c-neutral-50); - --bg-emphasis: var(--c-neutral-100); - --bg-active: var(--c-neutral-200); - --bg-inverted: var(--c-neutral-1300); - - --bg-action: var(--c-blue-500); - --bg-action-emphasis: var(--c-blue-400); - --bg-action-faded: var(--c-blue-300); - --bg-action-muted: var(--c-blue-100); - - --bg-critical-emphasis: var(--c-red-600); - --bg-critical: var(--c-red-500); - --bg-critical-faded: var(--c-red-400); - --bg-critical-muted: var(--c-red-200); - - --bg-success: var(--c-green-500); - --bg-warning: var(--c-orange-500); - --bg-warning-transparent: var(--c-orange-500-transparent); - - --border-action: var(--c-blue-500); - --border-action-disabled: var(--c-blue-300); - --border-default: var(--c-neutral-200); - --border-disabled: var(--c-neutral-200); - --border-emphasis: var(--c-neutral-500); - --border-muted: var(--c-neutral-200); - --border-faded: var(--c-neutral-400); - --border-critical: var(--c-red-500); - --border-success: var(--c-green-300); - --border-warning: var(--c-orange-300); - - --fg-action: var(--c-blue-500); - --fg-action-emphasis: var(--c-blue-600); - --fg-action-muted: var(--c-blue-300); - --fg-attention: var(--c-orange-500); - --fg-critical: var(--c-red-500); - --fg-critical-muted: var(--c-red-200); - - --fg-default: var(--c-neutral-1400); - --fg-faded: var(--c-neutral-900); - --fg-neutral: var(--c-neutral-800); - --fg-muted: var(--c-neutral-600); - --fg-disabled: var(--c-neutral-500); - - --fg-success: var(--c-green-500); - --fg-success-muted: var(--c-green-100); - --fg-code: var(--c-violet-500); - --fg-inverted: var(--c-white); - --fg-white: var(--c-white); - --fg-white-transparent: var(--c-white-50); - --fg-blue-transparent-2: var(--c-blue-500-transparent); -} - -:root[data-theme='dark'] { - --bg-default: var(--c-neutral-1400); - --bg-dark: var(--c-neutral-1100); - --bg-white: var(--c-white); - --bg-faded: var(--c-neutral-900); - --bg-disabled: var(--c-neutral-1300); - --bg-muted: var(--c-neutral-1200); - --bg-emphasis: var(--c-neutral-1200); - --bg-active: var(--c-neutral-1100); - --bg-inverted: var(--c-neutral-100); - - --bg-action: var(--c-blue-500); - --bg-action-emphasis: var(--c-blue-600); - --bg-action-faded: var(--c-blue-400); - --bg-action-muted: var(--c-blue-300); - - --bg-critical-emphasis: var(--c-red-600); - --bg-critical: var(--c-red-500); - --bg-critical-faded: var(--c-red-400); - --bg-critical-muted: var(--c-red-200); - - --bg-success: var(--c-green-500); - --bg-warning: var(--c-orange-500); - --bg-warning-transparent: var(--c-orange-500-transparent); - - --border-action: var(--c-blue-500); - --border-action-disabled: var(--c-blue-300); - --border-default: var(--c-neutral-900); - --border-disabled: var(--c-neutral-1000); - --border-emphasis: var(--c-neutral-500); - --border-muted: var(--c-neutral-1100); - --border-faded: var(--c-neutral-800); - --border-critical: var(--c-red-500); - --border-success: var(--c-green-300); - --border-warning: var(--c-orange-300); - - --fg-action: var(--c-blue-500); - --fg-action-emphasis: var(--c-blue-600); - --fg-action-muted: var(--c-blue-300); - --fg-attention: var(--c-orange-500); - --fg-critical: var(--c-red-500); - --fg-critical-muted: var(--c-red-200); - - --fg-default: var(--c-white); - --fg-faded: var(--c-neutral-400); - --fg-neutral: var(--c-neutral-300); - --fg-muted: var(--c-neutral-200); - --fg-disabled: var(--c-neutral-700); - - --fg-success: var(--c-green-500); - --fg-success-muted: var(--c-green-100); - --fg-code: var(--c-violet-500); - --fg-inverted: var(--c-neutral-1400); - --fg-white: var(--c-white); - --fg-white-transparent: var(--c-white-50); - --fg-blue-transparent-2: var(--c-blue-500-transparent); -} diff --git a/webnext/src/shared/defguard-ui/scss/global/_animate.scss b/webnext/src/shared/defguard-ui/scss/global/_animate.scss deleted file mode 100644 index 024cc92..0000000 --- a/webnext/src/shared/defguard-ui/scss/global/_animate.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:list'; - -// for now no prop required -@mixin animate($properties...) { - transition-timing-function: ease-out; - transition-duration: 160ms; - - @if list.length($properties) > 0 { - transition-property: $properties; - } -} diff --git a/webnext/src/shared/defguard-ui/scss/global/_breakpoints.scss b/webnext/src/shared/defguard-ui/scss/global/_breakpoints.scss deleted file mode 100644 index d99b76f..0000000 --- a/webnext/src/shared/defguard-ui/scss/global/_breakpoints.scss +++ /dev/null @@ -1,104 +0,0 @@ -@use 'sass:map'; -@use 'sass:list'; - -$grid-breakpoints: ( - xs: 0, - sm: 320px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1600px, -); - -@function break-next( - $name, - $breakpoints: $grid-breakpoints, - $breakpoint-names: map.keys($breakpoints) -) { - $n: list.index($breakpoint-names, $name); - - @if not $n { - @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; - } - - @return if( - $n < list.length($breakpoint-names), - list.nth($breakpoint-names, $n + 1), - null - ); -} - -@function break-min($name, $breakpoints: $grid-breakpoints) { - $min: map.get($breakpoints, $name); - - @return if($min != 0, $min, null); -} - -@function break-max($name, $breakpoints: $grid-breakpoints) { - $max: map.get($breakpoints, $name); - - @return if($max and $max > 0, $max - 0.02, null); -} - -@mixin break-up($name, $breakpoints: $grid-breakpoints) { - $min: break-min($name, $breakpoints); - - @if $min { - @media (min-width: $min) { - @content; - } - } @else { - @content; - } -} - -@mixin break-down($name, $breakpoints: $grid-breakpoints) { - $max: break-max($name, $breakpoints); - - @if $max { - @media (max-width: $max) { - @content; - } - } @else { - @content; - } -} - -@mixin break-between($lower, $upper, $breakpoints: $grid-breakpoints) { - $min: break-min($lower, $breakpoints); - $max: break-max($upper, $breakpoints); - - @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { - @content; - } - } @else if $max == null { - @include break-up($lower, $breakpoints) { - @content; - } - } @else if $min == null { - @include break-down($upper, $breakpoints) { - @content; - } - } -} - -@mixin break-only($name, $breakpoints: $grid-breakpoints) { - $min: break-min($name, $breakpoints); - $next: break-next($name, $breakpoints); - $max: break-max($next, $breakpoints); - - @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { - @content; - } - } @else if $max == null { - @include break-up($name, $breakpoints) { - @content; - } - } @else if $min == null { - @include break-down($next, $breakpoints) { - @content; - } - } -} diff --git a/webnext/src/shared/defguard-ui/scss/global/index.scss b/webnext/src/shared/defguard-ui/scss/global/index.scss deleted file mode 100644 index 8754673..0000000 --- a/webnext/src/shared/defguard-ui/scss/global/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward './animate'; -@forward './breakpoints'; diff --git a/webnext/src/shared/defguard-ui/scss/index.scss b/webnext/src/shared/defguard-ui/scss/index.scss deleted file mode 100644 index 4512d33..0000000 --- a/webnext/src/shared/defguard-ui/scss/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use './fonts'; -@use './shared_tokens'; -@use './themes'; -@use './base'; -@use './form'; diff --git a/webnext/src/shared/defguard-ui/types.ts b/webnext/src/shared/defguard-ui/types.ts deleted file mode 100644 index 2a71ddd..0000000 --- a/webnext/src/shared/defguard-ui/types.ts +++ /dev/null @@ -1,135 +0,0 @@ -import type { SVGProps } from 'react'; - -export const Direction = { - UP: 'up', - DOWN: 'down', - LEFT: 'left', - RIGHT: 'right', -} as const; - -export type Direction = (typeof Direction)[keyof typeof Direction]; - -export type TSSvgProps = SVGProps; - -export const ThemeVariable = { - BgDefault: 'var(--bg-default)', - BgDark: 'var(--bg-dark)', - BgWhite: 'var(--bg-white)', - BgFaded: 'var(--bg-faded)', - BgDisabled: 'var(--bg-disabled)', - BgMuted: 'var(--bg-muted)', - BgEmphasis: 'var(--bg-emphasis)', - BgActive: 'var(--bg-active)', - BgInverted: 'var(--bg-inverted)', - BgAction: 'var(--bg-action)', - BgActionEmphasis: 'var(--bg-action-emphasis)', - BgActionFaded: 'var(--bg-action-faded)', - BgActionMuted: 'var(--bg-action-muted)', - BgCriticalEmphasis: 'var(--bg-critical-emphasis)', - BgCritical: 'var(--bg-critical)', - BgCriticalFaded: 'var(--bg-critical-faded)', - BgCriticalMuted: 'var(--bg-critical-muted)', - BgSuccess: 'var(--bg-success)', - BgWarning: 'var(--bg-warning)', - BorderAction: 'var(--border-action)', - BorderActionDisabled: 'var(--border-action-disabled)', - BorderDefault: 'var(--border-default)', - BorderDisabled: 'var(--border-disabled)', - BorderEmphasis: 'var(--border-emphasis)', - BorderMuted: 'var(--border-muted)', - BorderFaded: 'var(--border-faded)', - BorderCritical: 'var(--border-critical)', - BorderSuccess: 'var(--border-success)', - BorderWarning: 'var(--border-warning)', - FgAction: 'var(--fg-action)', - FgActionEmphasis: 'var(--fg-action-emphasis)', - FgActionMuted: 'var(--fg-action-muted)', - FgAttention: 'var(--fg-attention)', - FgCritical: 'var(--fg-critical)', - FgCriticalMuted: 'var(--fg-critical-muted)', - FgDefault: 'var(--fg-default)', - FgFaded: 'var(--fg-faded)', - FgNeutral: 'var(--fg-neutral)', - FgMuted: 'var(--fg-muted)', - FgDisabled: 'var(--fg-disabled)', - FgSuccess: 'var(--fg-success)', - FgSuccessMuted: 'var(--fg-success-muted)', - FgCode: 'var(--fg-code)', - FgInverted: 'var(--fg-inverted)', - FgWhite: 'var(--fg-white)', - FgWhiteTransparent: 'var(--fg-white-transparent)', - FgBlueTransparent2: 'var(--fg-blue-transparent-2)', -} as const; - -export type ThemeVariableValue = (typeof ThemeVariable)[keyof typeof ThemeVariable]; - -export const TextStyle = { - TBodyXxs600: 'var(--t-body-xxs-600)', - TBodyXxs400: 'var(--t-body-xxs-400)', - TBodyXs600: 'var(--t-body-xs-600)', - TBodyXs500: 'var(--t-body-xs-500)', - TBodyXs400: 'var(--t-body-xs-400)', - TBodySm600: 'var(--t-body-sm-600)', - TBodySm500: 'var(--t-body-sm-500)', - TBodySm400: 'var(--t-body-sm-400)', - TBodyPrimary400: 'var(--t-body-primary-400)', - TBodyPrimary600: 'var(--t-body-primary-600)', - TBodyPrimary500: 'var(--t-body-primary-500)', - TTitleH5: 'var(--t-title-h5)', - TTitleH4: 'var(--t-title-h4)', - TTitleH3: 'var(--t-title-h3)', - TTitleH2: 'var(--t-title-h2)', - TTitleH1: 'var(--t-title-h1)', -} as const; - -export type TextStyleValue = (typeof TextStyle)[keyof typeof TextStyle]; - -export const BorderRadius = { - Sm: 'var(--radius-sm)', - Md: 'var(--radius-md)', - Lg: 'var(--radius-lg)', - Xl: 'var(--radius-xl)', - Xxl: 'var(--radius-xxl)', - Xxxl: 'var(--radius-xxl)', - Full: 'var(--radius-full)', -} as const; - -export type BorderRadiusValue = (typeof BorderRadius)[keyof typeof BorderRadius]; - -export const Orientation = { - Horizontal: 'horizontal', - Vertical: 'vertical', -} as const; - -export type OrientationValue = (typeof Orientation)[keyof typeof Orientation]; - -export const ThemeSize = { - Xs: 'var(--size-xs)', - Sm: 'var(--size-sm)', - Md: 'var(--size-md)', - Xl: 'var(--size-xl)', - Xl2: 'var(--size-2xl)', - Xl3: 'var(--size-3xl)', - Xl4: 'var(--size-4xl)', - Xl5: 'var(--size-5xl)', -}; - -export type ThemeSizeValue = (typeof ThemeSize)[keyof typeof ThemeSize]; - -export const ThemeSpacing = { - Xs: 'var(--spacing-xs)', - Sm: 'var(--spacing-sm)', - Md: 'var(--spacing-md)', - Lg: 'var(--spacing-lg)', - Xl: 'var(--spacing-xl)', - Xl2: 'var(--spacing-2xl)', - Xl3: 'var(--spacing-3xl)', - Xl4: 'var(--spacing-4xl)', - Xl5: 'var(--spacing-5xl)', - Xl6: 'var(--spacing-6xl)', - Xl7: 'var(--spacing-7xl)', - Xl8: 'var(--spacing-8xl)', - Xl9: 'var(--spacing-9xl)', -}; - -export type ThemeSpacingValue = (typeof ThemeSpacing)[keyof typeof ThemeSpacing]; diff --git a/webnext/src/shared/defguard-ui/utils/detectClickOutside.ts b/webnext/src/shared/defguard-ui/utils/detectClickOutside.ts deleted file mode 100644 index 933609a..0000000 --- a/webnext/src/shared/defguard-ui/utils/detectClickOutside.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Checks if mouse event clicked within any of provided rects - */ -export const detectClickInside = (event: MouseEvent, rects: DOMRect[]) => { - for (const domRect of rects) { - if (domRect) { - const start_x = domRect?.x; - const start_y = domRect?.y; - const end_x = start_x + domRect?.width; - const end_y = start_y + domRect.height; - if ( - event.clientX >= start_x && - event.clientX <= end_x && - event.clientY >= start_y && - event.clientY <= end_y - ) { - return true; - } - } - } - return false; -}; diff --git a/webnext/src/shared/defguard-ui/utils/isComparable.ts b/webnext/src/shared/defguard-ui/utils/isComparable.ts deleted file mode 100644 index 120180f..0000000 --- a/webnext/src/shared/defguard-ui/utils/isComparable.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const isComparableWithStrictEquality = (val: unknown) => { - const t = typeof val; - return ( - t === 'number' || - t === 'string' || - t === 'boolean' || - t === 'undefined' || - val === null - ); -}; diff --git a/webnext/src/shared/defguard-ui/utils/isPresent.ts b/webnext/src/shared/defguard-ui/utils/isPresent.ts deleted file mode 100644 index 510ce8d..0000000 --- a/webnext/src/shared/defguard-ui/utils/isPresent.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const isPresent = (value: T): value is NonNullable => { - return value !== null && value !== undefined; -}; diff --git a/webnext/src/shared/defguard-ui/utils/mergeRefs.ts b/webnext/src/shared/defguard-ui/utils/mergeRefs.ts deleted file mode 100644 index 5d13c28..0000000 --- a/webnext/src/shared/defguard-ui/utils/mergeRefs.ts +++ /dev/null @@ -1,29 +0,0 @@ -// extracted from https://github.com/gregberge/react-merge-refs -import type { Ref, RefCallback } from 'react'; - -function assignRef( - ref: Ref | undefined | null, - value: T | null, -): ReturnType> { - if (typeof ref === 'function') { - return ref(value); - } else if (ref) { - ref.current = value; - } -} - -export function mergeRefs(refs: (Ref | undefined)[]): Ref { - return (value: T | null) => { - const cleanups: (() => void)[] = []; - - for (const ref of refs) { - const cleanup = assignRef(ref, value); - const isCleanup = typeof cleanup === 'function'; - cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null)); - } - - return () => { - for (const cleanup of cleanups) cleanup(); - }; - }; -} diff --git a/webnext/src/shared/defguard-ui/utils/zod.ts b/webnext/src/shared/defguard-ui/utils/zod.ts deleted file mode 100644 index fcad508..0000000 --- a/webnext/src/shared/defguard-ui/utils/zod.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type z from 'zod'; - -export const createZodIssue = ( - message: string, - path: PropertyKey[], -): z.core.$ZodIssueCustom => ({ - code: 'custom', - message, - path, -}); From 4196bfe9c9d7c6d37d5d6ec932e0148cf4148f00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Thu, 9 Oct 2025 13:03:00 +0200 Subject: [PATCH 2/3] add ui as an submodule --- .gitmodules | 3 +++ webnext/src/shared/defguard-ui | 1 + 2 files changed, 4 insertions(+) create mode 160000 webnext/src/shared/defguard-ui diff --git a/.gitmodules b/.gitmodules index 5617041..0fb6816 100644 --- a/.gitmodules +++ b/.gitmodules @@ -4,3 +4,6 @@ [submodule "web/src/shared/defguard-ui"] path = web/src/shared/defguard-ui url = git@github.com:DefGuard/ui.git +[submodule "webnext/src/shared/defguard-ui"] + path = webnext/src/shared/defguard-ui + url = git@github.com:DefGuard/ui.git diff --git a/webnext/src/shared/defguard-ui b/webnext/src/shared/defguard-ui new file mode 160000 index 0000000..8d02746 --- /dev/null +++ b/webnext/src/shared/defguard-ui @@ -0,0 +1 @@ +Subproject commit 8d027463588b5bb02fe80f82d53eb4b7034a795a From 5f8ee376f03cc1ccb8b8ee953e0f9a35c3dd262e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Thu, 9 Oct 2025 13:33:47 +0200 Subject: [PATCH 3/3] up update service response def --- Dockerfile | 3 +++ .../ClientDownload/ClientDownloadPage.tsx | 20 +++++++++---------- .../ConfigureClient/ConfigureClientPage.tsx | 20 +++++++++---------- webnext/src/shared/api/update-service.ts | 2 ++ webnext/src/shared/utils/openVirtualLink.ts | 9 +++++++-- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/Dockerfile b/Dockerfile index fcf7313..784c7ee 100644 --- a/Dockerfile +++ b/Dockerfile @@ -42,6 +42,9 @@ FROM debian:13-slim AS runtime RUN apt-get update -y && \ apt-get install --no-install-recommends -y ca-certificates && \ rm -rf /var/lib/apt/lists/* +# make sure we run latest patch for openssl and ssl lib +RUN apt-get install -y --only-upgrade libssl3t64 openssl && \ + rm -rf /var/lib/apt/lists/* WORKDIR /app COPY --from=builder /build/bin/defguard-proxy . ENTRYPOINT ["./defguard-proxy"] diff --git a/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx b/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx index 3e26b83..c478a79 100644 --- a/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx +++ b/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx @@ -25,7 +25,7 @@ import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox' import { ThemeSpacing } from '../../shared/defguard-ui/types'; import { isPresent } from '../../shared/defguard-ui/utils/isPresent'; import { getClientArtifactsQueryOptions } from '../../shared/query/queryOptions'; -import { openVirtualLink } from '../../shared/utils/openVirtualLink'; +import { openClientLink } from '../../shared/utils/openVirtualLink'; import androidIcon from './assets/android.png'; import iosIcon from './assets/ios.png'; import laptopIcon from './assets/laptop.png'; @@ -56,11 +56,11 @@ export const ClientDownloadPage = () => { items: [ { text: 'Intel', - onClick: () => openVirtualLink(pageData?.macos_amd64), + onClick: () => openClientLink(pageData?.macos_amd64), }, { text: 'ARM', - onClick: () => openVirtualLink(pageData?.macos_arm64), + onClick: () => openClientLink(pageData?.macos_arm64), }, ], }, @@ -75,12 +75,12 @@ export const ClientDownloadPage = () => { { icon: 'ubuntu', text: 'Ubuntu 24.04 ARM', - onClick: () => openVirtualLink(pageData?.deb_arm64), + onClick: () => openClientLink(pageData?.deb_arm64), }, { icon: 'ubuntu', text: 'Ubuntu 24.04 AMD64', - onClick: () => openVirtualLink(pageData?.deb_amd64), + onClick: () => openClientLink(pageData?.deb_amd64), }, ], }, @@ -89,12 +89,12 @@ export const ClientDownloadPage = () => { { icon: 'debian', text: 'Ubuntu 22.04 / Debian 12&13 ARM', - onClick: () => openVirtualLink(pageData?.deb_arm64), + onClick: () => openClientLink(pageData?.deb_legacy_arm64), }, { icon: 'debian', text: 'Ubuntu 22.04 / Debian 12&13 AMD64', - onClick: () => openVirtualLink(pageData?.deb_amd64), + onClick: () => openClientLink(pageData?.deb_legacy_amd64), }, ], }, @@ -103,12 +103,12 @@ export const ClientDownloadPage = () => { { icon: 'linux', text: 'RPM ARM', - onClick: () => openVirtualLink(pageData?.rpm_arm64), + onClick: () => openClientLink(pageData?.rpm_arm64), }, { icon: 'linux', text: 'RPM AMD64', - onClick: () => openVirtualLink(pageData?.rpm_amd64), + onClick: () => openClientLink(pageData?.rpm_amd64), }, ], }, @@ -117,7 +117,7 @@ export const ClientDownloadPage = () => { { icon: 'arch-linux', text: 'Arch Linux', - onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch), + onClick: () => openClientLink(externalLink.client.desktop.linux.arch), }, ], }, diff --git a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx index 8bae4db..c5ca757 100644 --- a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx +++ b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx @@ -23,7 +23,7 @@ import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox'; import { ThemeSpacing } from '../../../shared/defguard-ui/types'; import { getClientArtifactsQueryOptions } from '../../../shared/query/queryOptions'; -import { openVirtualLink } from '../../../shared/utils/openVirtualLink'; +import { openClientLink } from '../../../shared/utils/openVirtualLink'; export const ConfigureClientPage = () => { const pageData = useLoaderData({ @@ -45,12 +45,12 @@ export const ConfigureClientPage = () => { { icon: 'apple', text: 'Intel', - onClick: () => openVirtualLink(clientLinks?.macos_amd64), + onClick: () => openClientLink(clientLinks?.macos_amd64), }, { icon: 'apple', text: 'ARM', - onClick: () => openVirtualLink(clientLinks?.macos_arm64), + onClick: () => openClientLink(clientLinks?.macos_arm64), }, ], }, @@ -68,12 +68,12 @@ export const ConfigureClientPage = () => { { icon: 'ubuntu', text: 'Ubuntu 24.04 ARM', - onClick: () => openVirtualLink(clientLinks?.deb_arm64), + onClick: () => openClientLink(clientLinks?.deb_arm64), }, { icon: 'ubuntu', text: 'Ubuntu 24.04 AMD64', - onClick: () => openVirtualLink(clientLinks?.deb_amd64), + onClick: () => openClientLink(clientLinks?.deb_amd64), }, ], }, @@ -82,12 +82,12 @@ export const ConfigureClientPage = () => { { icon: 'debian', text: 'Ubuntu 22.04 / Debian 12&13 ARM', - onClick: () => openVirtualLink(clientLinks?.deb_arm64), + onClick: () => openClientLink(clientLinks?.deb_legacy_arm64), }, { icon: 'debian', text: 'Ubuntu 22.04 / Debian 12&13 AMD64', - onClick: () => openVirtualLink(clientLinks?.deb_amd64), + onClick: () => openClientLink(clientLinks?.deb_legacy_amd64), }, ], }, @@ -96,12 +96,12 @@ export const ConfigureClientPage = () => { { icon: 'linux', text: 'RPM ARM', - onClick: () => openVirtualLink(clientLinks?.rpm_arm64), + onClick: () => openClientLink(clientLinks?.rpm_arm64), }, { icon: 'linux', text: 'RPM AMD64', - onClick: () => openVirtualLink(clientLinks?.rpm_amd64), + onClick: () => openClientLink(clientLinks?.rpm_amd64), }, ], }, @@ -110,7 +110,7 @@ export const ConfigureClientPage = () => { { icon: 'arch-linux', text: 'Arch Linux', - onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch), + onClick: () => openClientLink(externalLink.client.desktop.linux.arch), }, ], }, diff --git a/webnext/src/shared/api/update-service.ts b/webnext/src/shared/api/update-service.ts index 8371fea..04f0bf0 100644 --- a/webnext/src/shared/api/update-service.ts +++ b/webnext/src/shared/api/update-service.ts @@ -20,6 +20,8 @@ export type ClientVersionCheck = { windows_amd64?: string; deb_amd64?: string; deb_arm64?: string; + deb_legacy_arm64?: string; + deb_legacy_amd64?: string; rpm_amd64?: string; rpm_arm64?: string; macos_amd64?: string; diff --git a/webnext/src/shared/utils/openVirtualLink.ts b/webnext/src/shared/utils/openVirtualLink.ts index c84faf0..9535cba 100644 --- a/webnext/src/shared/utils/openVirtualLink.ts +++ b/webnext/src/shared/utils/openVirtualLink.ts @@ -1,6 +1,11 @@ -export const openVirtualLink = (value?: string): void => { - if (!value) return; +import { externalLink } from '../consts'; +export const openClientLink = (value?: string): void => { + const href = value ?? externalLink.defguard.download; + openVirtualLink(href); +}; + +export const openVirtualLink = (value: string): void => { const anchorElement = document.createElement('a'); anchorElement.style.display = 'none'; anchorElement.href = value;