uibee 2.2.4 → 2.2.5

package/dist/globals.css

@@ -57,6 +57,7 @@
     --color-login-800: #181818;
     --color-login-700: #1a1a1a;
     --color-login-600: #212121;
+    --color-login-500: #323232;
     --color-login-300: #5e5e5e;
     --color-login-200: #727272;
     --color-login-50: #ededed;
@@ -568,6 +569,9 @@
   .items-end {
     align-items: flex-end;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -900,6 +904,9 @@
       color: color-mix(in oklab, var(--color-yellow-300) 70%, transparent);
     }
   }
+  .italic {
+    font-style: italic;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -1287,6 +1294,13 @@
       }
     }
   }
+  .hover\:bg-login-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-login-500);
+      }
+    }
+  }
   .hover\:bg-login-600 {
     &:hover {
       @media (hover: hover) {

package/dist/src/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+export { default as Textarea } from './inputs/markdown';
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';
 export { default as ThemeToggle } from './toggle/theme';

package/dist/src/components/index.js

@@ -2,6 +2,7 @@
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+export { default as Textarea } from './inputs/markdown';
 // Logos
 export { default as Logo } from './logo/logo';
 export { default as LogoSmall } from './logo/logoSmall';

package/dist/src/components/inputs/markdown.d.ts

@@ -0,0 +1,15 @@
+type MarkdownProps = {
+    name: string;
+    label: string;
+    value: string;
+    setValue: (_: string | number) => void;
+    className?: string;
+    tooltip?: string;
+    required?: boolean;
+    rows?: number;
+    color?: string;
+    buttonColor?: string;
+    buttonColorHighlighted?: string;
+};
+export default function Markdown({ name, label, value, className, tooltip, required, rows, setValue, color, buttonColor, buttonColorHighlighted }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/inputs/markdown.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import Label from './label';
+import ToolTip from './tooltip';
+export default function Markdown({ name, label, value, className, tooltip, required, rows = 6, setValue, color, buttonColor, buttonColorHighlighted }) {
+    const [hasBlured, setHasBlured] = useState(false);
+    const textareaRef = useRef(null);
+    const smallButtonStyle = `px-2 py-1 rounded 
+        ${buttonColorHighlighted ? `hover:${buttonColorHighlighted}` : 'hover:bg-login-500'}
+        ${' '}${buttonColor ? buttonColor : 'bg-login-600'}`;
+    function wrapSelection(before, after = before, placeHolder = '') {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const selected = value.slice(start, end) || placeHolder;
+        const newValue = value.slice(0, start) + before + selected + after + value.slice(end);
+        setValue(newValue);
+        requestAnimationFrame(() => {
+            const pos = start + before.length;
+            textarea.focus();
+            textarea.setSelectionRange(pos, pos + selected.length);
+        });
+    }
+    return (_jsxs("div", { className: `w-full ${className ?? ''}`, children: [_jsxs("div", { className: 'relative', children: [_jsx("textarea", { name: name, ref: textareaRef, value: value, onChange: (e) => setValue(e.target.value), onBlur: () => setHasBlured(true), rows: rows, required: required, className: 'block px-2.5 pb-2.5 pt-4 w-full text-sm ' +
+                            'rounded-lg border-[0.10rem] appearance-none ' +
+                            'border-login-200 focus:outline-none focus:ring-0' +
+                            ' focus:border-login-50 peer resize-vertical ' +
+                            `${color ? color : 'bg-login-800'}` }), _jsx(Label, { label: label, value: value, color: color, required: required, showRequired: required && !value && hasBlured }), tooltip && _jsx(ToolTip, { info: tooltip })] }), _jsx("div", { className: 'flex items-center justify-between gap-2 mt-2', children: _jsxs("div", { className: 'flex gap-2', children: [_jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('**', '**', 'bold'), children: "B" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('*', '*', 'italic'), children: "I" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('\n```\n', '\n```\n', 'code block'), children: "CB" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('[', '](url)', 'text'), children: "Link" }), _jsx("button", { type: 'button', className: smallButtonStyle, onClick: () => wrapSelection('\n- ', '', 'list item'), children: "UL" })] }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/index.ts

@@ -2,6 +2,7 @@
 export { default as Input } from './inputs/input'
 export { default as SwitchInput } from './inputs/switch'
 export { default as TagInput } from './inputs/tag'
+export { default as Textarea } from './inputs/markdown'
 
 // Logos
 export { default as Logo } from './logo/logo'

package/src/components/inputs/markdown.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import Label from './label'
+import ToolTip from './tooltip'
+
+type MarkdownProps = {
+    name: string
+    label: string
+    value: string
+    setValue: (_: string | number) => void
+    className?: string
+    tooltip?: string
+    required?: boolean
+    rows?: number
+    color?: string
+    buttonColor?: string
+    buttonColorHighlighted?: string
+}
+
+export default function Markdown({
+    name,
+    label,
+    value,
+    className,
+    tooltip,
+    required,
+    rows = 6,
+    setValue,
+    color,
+    buttonColor,
+    buttonColorHighlighted
+}: MarkdownProps) {
+    const [hasBlured, setHasBlured] = useState(false)
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+    const smallButtonStyle = `px-2 py-1 rounded 
+        ${buttonColorHighlighted ? `hover:${buttonColorHighlighted}` : 'hover:bg-login-500'}
+        ${' '}${buttonColor ? buttonColor : 'bg-login-600'}`
+
+    function wrapSelection(before: string, after = before, placeHolder = '') {
+        const textarea = textareaRef.current
+        if (!textarea) return
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        const selected = value.slice(start, end) || placeHolder
+        const newValue =
+            value.slice(0, start) + before + selected + after + value.slice(end)
+        setValue(newValue)
+        requestAnimationFrame(() => {
+            const pos = start + before.length
+            textarea.focus()
+            textarea.setSelectionRange(pos, pos + selected.length)
+        })
+    }
+
+    return (
+        <div className={`w-full ${className ?? ''}`}>
+            <div className='relative'>
+                <textarea
+                    name={name}
+                    ref={textareaRef}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    onBlur={() => setHasBlured(true)}
+                    rows={rows}
+                    required={required}
+                    className={
+                        'block px-2.5 pb-2.5 pt-4 w-full text-sm ' +
+                        'rounded-lg border-[0.10rem] appearance-none ' +
+                        'border-login-200 focus:outline-none focus:ring-0' +
+                        ' focus:border-login-50 peer resize-vertical ' +
+                        `${color ? color : 'bg-login-800'}`
+                    }
+                />
+
+                <Label
+                    label={label}
+                    value={value}
+                    color={color}
+                    required={required}
+                    showRequired={required && !value && hasBlured}
+                />
+                {tooltip && <ToolTip info={tooltip} />}
+            </div>
+
+            <div className='flex items-center justify-between gap-2 mt-2'>
+                <div className='flex gap-2'>
+                    <button
+                        type='button'
+                        className={smallButtonStyle}
+                        onClick={() => wrapSelection('**', '**', 'bold')}
+                    >
+                        B
+                    </button>
+                    <button
+                        type='button'
+                        className={smallButtonStyle}
+                        onClick={() => wrapSelection('*', '*', 'italic')}
+                    >
+                        I
+                    </button>
+                    <button
+                        type='button'
+                        className={smallButtonStyle}
+                        onClick={() =>
+                            wrapSelection('\n```\n', '\n```\n', 'code block')
+                        }
+                    >
+                        CB
+                    </button>
+                    <button
+                        type='button'
+                        className={smallButtonStyle}
+                        onClick={() => wrapSelection('[', '](url)', 'text')}
+                    >
+                        Link
+                    </button>
+                    <button
+                        type='button'
+                        className={smallButtonStyle}
+                        onClick={() => wrapSelection('\n- ', '', 'list item')}
+                    >
+                        UL
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}