uibee 2.14.0 → 2.16.0

package/src/components/inputs/textarea.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import ReactMarkdown from 'react-markdown'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'
+import MarkdownRender from '@components/markdownrender/markdownRender'
 
 export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     name: string
@@ -31,6 +31,8 @@ export default function Textarea(props: TextareaProps) {
     const jsonError = type === 'json' && value ? isValidJson(value as string) : undefined
     const displayError = jsonError || error
 
+    console.log(value)
+
     return (
         <FieldWrapper
             label={label}
@@ -60,14 +62,10 @@ export default function Textarea(props: TextareaProps) {
                     <div
                         className={`
                             w-full rounded-md bg-login-500/50 border border-login-500 
-                            text-login-text 
-                            p-3
-                            prose prose-invert prose-base max-w-none overflow-y-auto
-                            ${error ? 'border-red-500' : ''}
+                            p-3 overflow-y-auto ${error ? 'border-red-500' : ''}
                         `}
-                        style={{ minHeight: `${rows * 1.5}rem` }}
                     >
-                        <ReactMarkdown>{String(value || '')}</ReactMarkdown>
+                        <MarkdownRender MDstr={String(value || '')} />
                     </div>
                 )}
 

package/src/components/layout/toggle.tsx

@@ -0,0 +1,62 @@
+type ToggleOption<T> = {
+    value: T
+    label?: string
+    text?: string
+    icon?: React.ReactNode
+}
+
+type ToggleProps<T> = {
+    value: T
+    onChange: (value: T) => void
+    left: ToggleOption<T>
+    right: ToggleOption<T>
+}
+
+export default function Toggle<T>({
+    value,
+    onChange,
+    left,
+    right,
+}: ToggleProps<T>) {
+    const active = 'bg-login-200 text-login-950 shadow'
+    const idle = 'text-login-200 hover:bg-login-50/10 hover:text-login-50'
+
+    const base =
+        'flex items-center justify-center rounded-full transition gap-1'
+
+    function renderContent(opt: ToggleOption<T>) {
+        return (
+            <>
+                {opt.icon}
+                {opt.text && <span>{opt.text}</span>}
+            </>
+        )
+    }
+
+    const isLeftActive = value === left.value
+    const isRightActive = value === right.value
+
+    return (
+        <div className='flex items-center rounded-full border border-login-100/10 bg-login-50/5 p-1'>
+            <button
+                type='button'
+                onClick={() => onChange(left.value)}
+                aria-label={left.label ?? left.text}
+                aria-pressed={isLeftActive}
+                className={`${base} px-2 h-7 ${isLeftActive ? active : idle}`}
+            >
+                {renderContent(left)}
+            </button>
+
+            <button
+                type='button'
+                onClick={() => onChange(right.value)}
+                aria-label={right.label ?? right.text}
+                aria-pressed={isRightActive}
+                className={`${base} px-2 h-7 ${isRightActive ? active : idle}`}
+            >
+                {renderContent(right)}
+            </button>
+        </div>
+    )
+}

package/src/components/markdownrender/markdownRender.tsx

@@ -0,0 +1,17 @@
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export default function MarkdownRender({MDstr}: {MDstr: string}) {
+    return (
+        <div className='prose prose-sm prose-custom max-w-none'>
+            <Markdown
+                components={{ h1: ({...props}) => <h2 {...props} /> }}
+                remarkPlugins={
+                    [remarkGfm]
+                }
+            >
+                {MDstr.replace(/\\n/g, '\n')}
+            </Markdown>
+        </div>
+    )
+}

package/src/components/vulnerability/constants.ts

@@ -0,0 +1,17 @@
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+
+export const severityLabel: Record<SeverityLevel, string> = {
+    critical: 'Critical',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    unknown: 'Unknown',
+}
+
+export const severityClasses: Record<SeverityLevel, string> = {
+    critical: 'border-red-400/25 bg-red-500/10 text-red-200',
+    high: 'border-orange-400/25 bg-orange-500/10 text-orange-200',
+    medium: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
+    low: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
+    unknown: 'border-login-100/10 bg-login-50/5 text-login-200',
+}

package/src/components/vulnerability/severityPill.tsx

@@ -0,0 +1,22 @@
+import { severityClasses, severityLabel } from './constants'
+
+type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+
+type SeverityPillProps = {
+    severity: SeverityLevel
+    count: number
+    compact?: boolean
+}
+
+export default function SeverityPill({ severity, count, compact = false }: SeverityPillProps) {
+    if (count === 0) {
+        return null
+    }
+
+    return (
+        <div className={`rounded-xl border ${compact ? 'px-3 py-2' : 'p-3'} ${severityClasses[severity]}`}>
+            <div className='text-[11px] font-medium uppercase tracking-[0.18em]'>{severityLabel[severity]}</div>
+            <div className={`${compact ? 'mt-1 text-sm' : 'mt-2 text-lg'} font-semibold`}>{count}</div>
+        </div>
+    )
+}

package/src/globals.css

@@ -33,6 +33,7 @@
     --color-login-300: #5e5e5e;
     --color-login-200: #727272;
     --color-login-100: #b0b0b0;
+    --color-login-75: #e4e4e4;
     --color-login-50: #ededed;
     
     --color-login-text: #ededed;
@@ -98,6 +99,25 @@
     --color-login-text: #0e0e0e;
 }
 
+@utility prose-custom {
+    --tw-prose-body: var(--color-login-text);
+    --tw-prose-headings: var(--color-login-text);
+    --tw-prose-lead: var(--color-login-300);
+    --tw-prose-links: var(--color-login);
+    --tw-prose-bold: var(--color-login-text);
+    --tw-prose-counters: var(--color-login-400);
+    --tw-prose-bullets: var(--color-login-400);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-captions: var(--color-login-300);
+    --tw-prose-code: var(--color-login-text);
+    --tw-prose-pre-code: var(--color-login-text);
+    --tw-prose-pre-bg: var(--color-login-800);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
+}
+
 @keyframes jump {
     40% {
         transform: translateY(-0.3rem);

package/tsconfig.json

@@ -8,6 +8,7 @@
     "rootDir": ".",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "noUncheckedSideEffectImports": false,
     "strict": true,
     "skipLibCheck": true,
     "jsx": "react-jsx",