uibee 2.17.3 → 2.17.4

package/dist/src/components/markdownrender/markdownRender.d.ts

@@ -1,5 +1,4 @@
 import { Components } from 'react-markdown';
-import 'highlight.js/styles/github-dark.css';
 export default function MarkdownRender({ MDstr, components, className }: {
     MDstr: string;
     components?: Components;

package/dist/src/components/markdownrender/markdownRender.js

@@ -1,14 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
-import 'highlight.js/styles/github-dark.css';
-const defaultComponents = {
-    h1: ({ ...props }) => _jsx("h2", { ...props }),
-    pre({ children }) {
-        return (_jsx("pre", { className: 'inline-block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full', children: children }));
-    },
-};
+import { ExternalLink } from 'lucide-react';
+function makeDefaultComponents() {
+    return {
+        h1: ({ ...props }) => _jsx("h2", { ...props }),
+        input({ type, checked }) {
+            if (type !== 'checkbox')
+                return _jsx("input", { type: type });
+            return (_jsx("span", { "data-task-checkbox": true, className: `inline-flex items-center justify-center w-4 h-4 rounded-xs border-2 shrink-0 align-middle
+                        ${checked ? 'bg-login border-login' : 'border-login/50'}`, children: checked && (_jsx("svg", { viewBox: '0 0 10 8', className: 'w-2.5 h-2.5 fill-none stroke-white stroke-2', children: _jsx("polyline", { points: '1,4 4,7 9,1', strokeLinecap: 'round', strokeLinejoin: 'round' }) })) }));
+        },
+        a({ href, children }) {
+            return (_jsxs("a", { href: href, target: '_blank', rel: 'noopener noreferrer', className: 'inline-flex items-center gap-1 text-login hover:text-login/80 underline underline-offset-2 transition-colors', children: [children, _jsx(ExternalLink, { className: 'w-3 h-3 shrink-0 opacity-70' })] }));
+        },
+        pre({ children }) {
+            return (_jsx("pre", { className: 'block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full', children: children }));
+        },
+    };
+}
 export default function MarkdownRender({ MDstr, components, className }) {
-    return (_jsx("div", { className: className ?? 'prose prose-sm prose-custom max-w-none', children: _jsx(Markdown, { components: { ...defaultComponents, ...components }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], children: MDstr.replace(/\\n/g, '\n') }) }));
+    return (_jsx("div", { className: className ?? 'prose prose-sm prose-custom max-w-none', children: _jsx(Markdown, { components: { ...makeDefaultComponents(), ...components }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], children: MDstr.replace(/\\n/g, '\n') }) }));
 }

package/dist/src/globals.css

@@ -1110,9 +1110,6 @@
   .hidden {
     display: none;
   }
-  .inline-block {
-    display: inline-block;
-  }
   .inline-flex {
     display: inline-flex;
   }
@@ -1128,6 +1125,9 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -1197,6 +1197,9 @@
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -1548,6 +1551,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-login {
+    border-color: var(--color-login);
+  }
   .border-login-50 {
     border-color: var(--color-login-50);
   }
@@ -1581,6 +1587,12 @@
       border-color: color-mix(in oklab, var(--color-login-600) 50%, transparent);
     }
   }
+  .border-login\/50 {
+    border-color: color-mix(in srgb, #fd8738 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login) 50%, transparent);
+    }
+  }
   .border-orange-400\/25 {
     border-color: color-mix(in srgb, oklch(75% 0.183 55.934) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1859,9 +1871,15 @@
   .stroke-red-400 {
     stroke: var(--color-red-400);
   }
+  .stroke-white {
+    stroke: var(--color-white);
+  }
   .stroke-yellow-400 {
     stroke: var(--color-yellow-400);
   }
+  .stroke-2 {
+    stroke-width: 2;
+  }
   .stroke-\[3\.5px\] {
     stroke-width: 3.5px;
   }
@@ -1958,6 +1976,30 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .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);
+    --tw-prose-bullets: var(--color-login);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login);
+    --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-900);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
+    & ul:has(> li > span[data-task-checkbox]) {
+      padding-left: 0;
+    }
+    & li:has(> span[data-task-checkbox]) {
+      list-style: none;
+    }
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1979,6 +2021,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -2167,6 +2212,12 @@
   .no-underline {
     text-decoration-line: none;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .placeholder-login-200 {
     &::placeholder {
       color: var(--color-login-200);
@@ -2184,6 +2235,9 @@
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2333,24 +2387,6 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .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);
-  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2775,6 +2811,16 @@
       }
     }
   }
+  .hover\:text-login\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in srgb, #fd8738 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-login) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-red-200 {
     &:hover {
       @media (hover: hover) {
@@ -3000,6 +3046,81 @@
   --color-login-50: #ffffff;
   --color-login-text: #0e0e0e;
 }
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {
+  color: #79c0ff;
+}
+.hljs-regexp, .hljs-string, .hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in, .hljs-symbol {
+  color: #ffa657;
+}
+.hljs-comment, .hljs-code, .hljs-formula {
+  color: #8b949e;
+}
+.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: bold;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.hljs {
+  background: transparent;
+}
+pre code.hljs {
+  padding: 0;
+}
 @keyframes jump {
   40% {
     transform: translateY(-0.3rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.17.3",
+  "version": "2.17.4",
   "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/markdownrender/markdownRender.tsx

@@ -1,18 +1,48 @@
 import Markdown, { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
-import 'highlight.js/styles/github-dark.css'
+import { ExternalLink } from 'lucide-react'
 
-const defaultComponents: Components = {
-    h1: ({...props}) => <h2 {...props} />,
-    pre({ children }) {
-        return (
-            <pre className='inline-block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full'>
-                {children}
-            </pre>
-        )
-    },
-}
+function makeDefaultComponents(): Components {
+    return {
+        h1: ({...props}) => <h2 {...props} />,
+        input({ type, checked }) {
+            if (type !== 'checkbox') return <input type={type} />
+            return (
+                <span
+                    data-task-checkbox
+                    className={`inline-flex items-center justify-center w-4 h-4 rounded-xs border-2 shrink-0 align-middle
+                        ${checked ? 'bg-login border-login' : 'border-login/50'}`}
+                >
+                    {checked && (
+                        <svg viewBox='0 0 10 8' className='w-2.5 h-2.5 fill-none stroke-white stroke-2'>
+                            <polyline points='1,4 4,7 9,1' strokeLinecap='round' strokeLinejoin='round' />
+                        </svg>
+                    )}
+                </span>
+            )
+        },
+        a({ href, children }) {
+            return (
+                <a
+                    href={href}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='inline-flex items-center gap-1 text-login hover:text-login/80 underline underline-offset-2 transition-colors'
+                >
+                    {children}
+                    <ExternalLink className='w-3 h-3 shrink-0 opacity-70' />
+                </a>
+            )
+        },
+        pre({ children }) {
+            return (
+                <pre className='block rounded-lg overflow-auto whitespace-pre-wrap wrap-break-word w-full'>
+                    {children}
+                </pre>
+            )
+        },
+    }}
 
 export default function MarkdownRender({ MDstr, components, className }: {
     MDstr: string
@@ -22,7 +52,7 @@ export default function MarkdownRender({ MDstr, components, className }: {
     return (
         <div className={className ?? 'prose prose-sm prose-custom max-w-none'}>
             <Markdown
-                components={{ ...defaultComponents, ...components }}
+                components={{ ...makeDefaultComponents(), ...components }}
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeHighlight]}
             >

package/src/globals.css

@@ -105,17 +105,35 @@
     --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-counters: var(--color-login);
+    --tw-prose-bullets: var(--color-login);
     --tw-prose-hr: var(--color-login-300);
     --tw-prose-quotes: var(--color-login-text);
-    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-quote-borders: var(--color-login);
     --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-pre-bg: var(--color-login-900);
     --tw-prose-th-borders: var(--color-login-500);
     --tw-prose-td-borders: var(--color-login-500);
+
+    & ul:has(> li > span[data-task-checkbox]) {
+        padding-left: 0;
+    }
+
+    & li:has(> span[data-task-checkbox]) {
+        list-style: none;
+    }
+}
+
+@import 'highlight.js/styles/github-dark.css';
+
+.hljs {
+    background: transparent;
+}
+
+pre code.hljs {
+    padding: 0;
 }
 
 @keyframes jump {