5htp-core 0.4.7 → 0.4.8-2

package/src/client/components/inputv3/Rte/style.less

@@ -0,0 +1,428 @@
+.input.rte {
+    .other h2 {
+        font-size: 18px;
+        color: #444;
+        margin-bottom: 7px;
+    }
+
+    .other a {
+        color: #777;
+        text-decoration: underline;
+        font-size: 14px;
+    }
+
+    .other ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+
+    .App {
+        font-family: sans-serif;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 24px;
+        color: #333;
+    }
+
+    .ltr {
+        text-align: left;
+    }
+
+    .rtl {
+        text-align: right;
+    }
+
+    .editor-container {
+        margin: 0;
+        color: #000;
+        position: relative;
+        line-height: 20px;
+        font-weight: 400;
+        text-align: left;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+    }
+
+    .editor-inner {
+        background: #fff;
+        position: relative;
+    }
+
+    .editor-input {
+        min-height: 150px;
+        resize: none;
+        font-size: 15px;
+        caret-color: rgb(5, 5, 5);
+        position: relative;
+        tab-size: 1;
+        outline: 0;
+        caret-color: #444;
+    }
+
+    .editor-placeholder {
+        color: #999;
+        overflow: hidden;
+        position: absolute;
+        text-overflow: ellipsis;
+        top: 3px;
+        left: 0px;
+        font-size: 15px;
+        user-select: none;
+        display: inline-block;
+        pointer-events: none;
+    }
+
+    .editor-text-bold {
+        font-weight: bold;
+    }
+
+    .editor-text-italic {
+        font-style: italic;
+    }
+
+    .editor-text-underline {
+        text-decoration: underline;
+    }
+
+    .editor-text-strikethrough {
+        text-decoration: line-through;
+    }
+
+    .editor-text-underlineStrikethrough {
+        text-decoration: underline line-through;
+    }
+
+    .editor-text-code {
+        background-color: rgb(240, 242, 245);
+        padding: 1px 0.25rem;
+        font-family: Menlo, Consolas, Monaco, monospace;
+        font-size: 94%;
+    }
+
+    .editor-link {
+        color: rgb(33, 111, 219);
+        text-decoration: none;
+    }
+
+    .tree-view-output {
+        display: block;
+        background: #222;
+        color: #fff;
+        padding: 5px;
+        font-size: 12px;
+        white-space: pre-wrap;
+        margin: 1px auto 10px auto;
+        max-height: 250px;
+        position: relative;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        overflow: auto;
+        line-height: 14px;
+    }
+
+    .editor-code {
+        background-color: rgb(240, 242, 245);
+        font-family: Menlo, Consolas, Monaco, monospace;
+        display: block;
+        padding: 8px 8px 8px 52px;
+        line-height: 1.53;
+        font-size: 13px;
+        margin: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        tab-size: 2;
+        /* white-space: pre; */
+        overflow-x: auto;
+        position: relative;
+    }
+
+    .editor-code:before {
+        content: attr(data-gutter);
+        position: absolute;
+        background-color: #eee;
+        left: 0;
+        top: 0;
+        border-right: 1px solid #ccc;
+        padding: 8px;
+        color: #777;
+        white-space: pre-wrap;
+        text-align: right;
+        min-width: 25px;
+    }
+
+    .editor-code:after {
+        content: attr(data-highlight-language);
+        top: 0;
+        right: 3px;
+        padding: 3px;
+        font-size: 10px;
+        text-transform: uppercase;
+        position: absolute;
+        color: rgba(0, 0, 0, 0.5);
+    }
+
+    .editor-tokenComment {
+        color: slategray;
+    }
+
+    .editor-tokenPunctuation {
+        color: #999;
+    }
+
+    .editor-tokenProperty {
+        color: #905;
+    }
+
+    .editor-tokenSelector {
+        color: #690;
+    }
+
+    .editor-tokenOperator {
+        color: #9a6e3a;
+    }
+
+    .editor-tokenAttr {
+        color: #07a;
+    }
+
+    .editor-tokenVariable {
+        color: #e90;
+    }
+
+    .editor-tokenFunction {
+        color: #dd4a68;
+    }
+
+    .editor-paragraph {
+        margin: 0;
+        margin-bottom: 8px;
+        position: relative;
+    }
+
+    .editor-paragraph:last-child {
+        margin-bottom: 0;
+    }
+
+    .editor-heading-h1 {
+        font-size: 24px;
+        color: rgb(5, 5, 5);
+        font-weight: 400;
+        margin: 0;
+        margin-bottom: 12px;
+        padding: 0;
+    }
+
+    .editor-heading-h2 {
+        font-size: 15px;
+        color: rgb(101, 103, 107);
+        font-weight: 700;
+        margin: 0;
+        margin-top: 10px;
+        padding: 0;
+        text-transform: uppercase;
+    }
+
+    .editor-quote {
+        margin: 0;
+        margin-left: 20px;
+        font-size: 15px;
+        color: rgb(101, 103, 107);
+        border-left-color: rgb(206, 208, 212);
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding-left: 16px;
+    }
+
+    .editor-list-ol {
+        padding: 0;
+        margin: 0;
+        margin-left: 16px;
+    }
+
+    .editor-list-ul {
+        padding: 0;
+        margin: 0;
+        margin-left: 16px;
+    }
+
+    .editor-listitem {
+        margin: 8px 32px 8px 32px;
+    }
+
+    .editor-nested-listitem {
+        list-style-type: none;
+    }
+
+    pre::-webkit-scrollbar {
+        background: transparent;
+        width: 10px;
+    }
+
+    pre::-webkit-scrollbar-thumb {
+        background: #999;
+    }
+
+    .debug-timetravel-panel {
+        overflow: hidden;
+        padding: 0 0 10px 0;
+        margin: auto;
+        display: flex;
+    }
+
+    .debug-timetravel-panel-slider {
+        padding: 0;
+        flex: 8;
+    }
+
+    .debug-timetravel-panel-button {
+        padding: 0;
+        border: 0;
+        background: none;
+        flex: 1;
+        color: #fff;
+        font-size: 12px;
+    }
+
+    .debug-timetravel-panel-button:hover {
+        text-decoration: underline;
+    }
+
+    .debug-timetravel-button {
+        border: 0;
+        padding: 0;
+        font-size: 12px;
+        top: 10px;
+        right: 15px;
+        position: absolute;
+        background: none;
+        color: #fff;
+    }
+
+    .debug-timetravel-button:hover {
+        text-decoration: underline;
+    }
+
+    .toolbar {
+        display: flex;
+        background: #fff;
+        vertical-align: middle;
+    }
+
+    .toolbar button.toolbar-item {
+        border: 0;
+        display: flex;
+        background: none;
+        border-radius: 10px;
+        padding: 8px;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+
+    .toolbar button.toolbar-item:disabled {
+        cursor: not-allowed;
+    }
+
+    .toolbar button.toolbar-item.spaced {
+        margin-right: 2px;
+    }
+
+    .toolbar button.toolbar-item i.format {
+        background-size: contain;
+        display: inline-block;
+        height: 18px;
+        width: 18px;
+        margin-top: 2px;
+        vertical-align: -0.25em;
+        display: flex;
+        opacity: 0.6;
+    }
+
+    .toolbar button.toolbar-item:disabled i.format {
+        opacity: 0.2;
+    }
+
+    .toolbar button.toolbar-item.active {
+        background-color: rgba(223, 232, 250, 0.3);
+    }
+
+    .toolbar button.toolbar-item.active i {
+        opacity: 1;
+    }
+
+    .toolbar .toolbar-item:hover:not([disabled]) {
+        background-color: #eee;
+    }
+
+    .toolbar .divider {
+        width: 1px;
+        background-color: #eee;
+        margin: 0 4px;
+    }
+
+    .toolbar .toolbar-item .text {
+        display: flex;
+        line-height: 20px;
+        width: 200px;
+        vertical-align: middle;
+        font-size: 14px;
+        color: #777;
+        text-overflow: ellipsis;
+        width: 70px;
+        overflow: hidden;
+        height: 20px;
+        text-align: left;
+    }
+
+    .toolbar .toolbar-item .icon {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        user-select: none;
+        margin-right: 8px;
+        line-height: 16px;
+        background-size: contain;
+    }
+
+    i.undo {
+        background-image: url(icons/arrow-counterclockwise.svg);
+    }
+
+    i.redo {
+        background-image: url(icons/arrow-clockwise.svg);
+    }
+
+    i.bold {
+        background-image: url(icons/type-bold.svg);
+    }
+
+    i.italic {
+        background-image: url(icons/type-italic.svg);
+    }
+
+    i.underline {
+        background-image: url(icons/type-underline.svg);
+    }
+
+    i.strikethrough {
+        background-image: url(icons/type-strikethrough.svg);
+    }
+
+    i.left-align {
+        background-image: url(icons/text-left.svg);
+    }
+
+    i.center-align {
+        background-image: url(icons/text-center.svg);
+    }
+
+    i.right-align {
+        background-image: url(icons/text-right.svg);
+    }
+
+    i.justify-align {
+        background-image: url(icons/justify.svg);
+    }
+}

package/src/client/components/inputv3/base.less

@@ -1,7 +1,6 @@
 @import (reference) "@/client/assets/vars.less";
 
 @hInput: @sizeComponent;
-@labelH: 0.6em;
 
 // TODO: Adapter textarea à input/basev2
 .contChamp textarea {
@@ -12,6 +11,22 @@
     padding-top: @spacing * 2 !important;
 }
 
+.inputWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    align-items: stretch;
+
+    > label {
+        font-weight: 700;
+    }
+
+    > p.hint {
+        text-align: left;
+        color: var(--cTxtDesc);
+    }
+}
+
 .input {
     &.text,
     &.select {
@@ -22,15 +37,6 @@
         > i {
             color: var(--cTxtDesc);
         }
-        
-        label {
-            display: flex;
-            align-items: center;
-            color: var(--cTxtImportant);
-            font-size: 0.9em;
-            font-weight: 600;
-            transition: all .1s ease-out;
-        }
     }
 
     // Error bubble
@@ -72,28 +78,9 @@
     --cBg2: #eee;
     //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
 
-    @gapAround: (@hInput - @labelH) / 2;
+    @gapAround: @spacing;
     > .btn:first-child { margin-left: 0 - @gapAround / 2; }
 
-    label {
-        position: absolute;
-        left: 0; width: 100%;
-        top: 0;
-        height: @labelH;
-        font-size: 0.8em;
-        line-height: 0.8em;
-
-        color: var(--cTxtImportant);
-    }
-
-    &.empty:not(.focus)  {
-        label {
-            height: 100%;
-            font-size: 1em;
-            color: var(--cTxtBase);
-        }
-    }
-
     .contValue {
         position: relative;
         flex: 1;
@@ -114,7 +101,7 @@
         border: none;
         font-family: inherit;
         width: 100%;
-        padding: @labelH 0 0 0;
+        padding: 0;
         font-size: 1rem;
         color: inherit;
     }
@@ -128,7 +115,7 @@
     }
 
     textarea {
-        padding: @labelH + @spacing 0 @spacing 0;
-        min-height: 4em;
+        padding: 0;
+        min-height: 6em;
     }
 }

package/src/client/components/inputv3/base.tsx

@@ -4,6 +4,7 @@
 
 // Npm
 import React from 'react';
+import type { ComponentChild }  from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Core libs
@@ -16,10 +17,13 @@ import { useState } from '@client/hooks';
 export type InputBaseProps<TValue> = {
 
     title: string, // Now mandatory
+    hint?: ComponentChild,
     required?: boolean,
     errors?: string[],
     size?: TComponentSize,
 
+    wrapper?: boolean,
+
     value: TValue,
     onChange?: (value: TValue) => void,
 }
@@ -64,7 +68,7 @@ export function useInput<TValue>(
         if (state.changed === false)
             return;
 
-        console.log(`[input] Commit value:`, state.value, externalValue);
+        //console.log(`[input] Commit value:`, state.value, externalValue);
         if (onChange !== undefined)
             onChange(state.value);
     }
@@ -73,7 +77,7 @@ export function useInput<TValue>(
     React.useEffect(() => {
 
         if (externalValue !== undefined && externalValue !== state.value) {
-            console.log("External value change", externalValue);
+            //console.log("External value change", externalValue);
             setState({ value: externalValue, valueSource: 'external', changed: true })
         }
         
@@ -91,4 +95,34 @@ export function useInput<TValue>(
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
+export const InputWrapper = ({ children, wrapper = true, title, hint, required }: InputBaseProps<unknown> & {
+    children: ComponentChild
+}) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return wrapper === false ? <>{children}</> : (
+        <div class="inputWrapper">
+
+            <label>{title}{required && (
+                <span class="fg error">&nbsp;*</span>
+            )}</label>
+
+            {hint && <p class="hint">{hint}</p>}
+
+            {children}
+            
+        </div>
+    )
+}
+
 import './base.less';

package/src/client/components/inputv3/file/index.tsx

@@ -60,7 +60,7 @@ export type Props = {
 
     // Input
     title: ComponentChild,
-    value?: FileToUpload,    
+    value?: string | FileToUpload, // string = already registered 
 
     // Display
     emptyText?: ComponentChild,
@@ -96,7 +96,7 @@ export default ({
 
     const [previewUrl, setPreviewUrl] = React.useState<string | undefined>(previewUrlInit);
 
-    className = 'input upload ' + (className === undefined ? '' : ' ' + className)
+    className = 'input upload ' + (className === undefined ? '' : ' ' + className);
 
     /*----------------------------------
     - ACTIONS
@@ -115,7 +115,7 @@ export default ({
     React.useEffect(() => {
 
         // Image = decode & display preview
-        if (file !== undefined && file.type.startsWith('image/'))
+        if (file !== undefined && typeof file === 'object' && file.type.startsWith('image/'))
             createImagePreview(file.data).then(setPreviewUrl);
         else 
             setPreviewUrl(undefined);
@@ -135,14 +135,20 @@ export default ({
 
                     {previewUrl ? (
                         <img src={previewUrl} />
-                    ) : file ? <>
+                    ) : typeof file === 'string' ? <>
+                        <strong>A file has been selected</strong>
+                    </> : file ? <>
                         <strong>{file.name}</strong>
                     </> : null}
                 </div>
 
                 <div class="row actions sp-05">
+
+                    {typeof file === 'string' && <>
+                        <Bouton type="secondary" icon="eye" shape="pill" size="s" link={file} />
+                    </>}
                     
-                    <Bouton class='fg error' icon="trash" shape="pill" size="s"  
+                    <Bouton class='bg error' icon="trash" shape="pill" size="s"  
                         async onClick={() => onChange(undefined)} />
                 </div>
             </>}