uibee 2.13.2 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/src/components/inputs/shared/fieldWrapper.js +2 -1
  2. package/dist/src/components/inputs/textarea.js +10 -9
  3. package/dist/src/globals.css +95 -95
  4. package/package.json +1 -1
  5. package/src/components/inputs/shared/fieldWrapper.tsx +2 -1
  6. package/src/components/inputs/textarea.tsx +21 -20
package/dist/src/components/inputs/shared/fieldWrapper.js CHANGED
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import InputLabel from './inputLabel';
3
3
  import InputInfo from './inputInfo';
4
4
  import InputError from './inputError';
5
+ import ReactMarkdown from 'react-markdown';
5
6
  export default function FieldWrapper({ label, name, required, info, error, description, textSize = 'sm', children, className, }) {
6
- return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: description })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
7
+ return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: `ml-1 ${textSize === 'sm' ? 'text-sm!' : 'text-base!'}` })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: _jsx(ReactMarkdown, { children: String(description || '') }) })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
7
8
  }
package/dist/src/components/inputs/textarea.js CHANGED
@@ -18,20 +18,21 @@ export default function Textarea(props) {
18
18
  const [preview, setPreview] = useState(false);
19
19
  const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
20
20
  const displayError = jsonError || error;
21
- return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
22
- w-full rounded-md bg-login-500/50 border border-login-500
23
- text-login-text
24
- p-3
25
- prose prose-invert prose-sm max-w-none overflow-y-auto
26
- ${error ? 'border-red-500' : ''}
27
- `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })) : (_jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
21
+ return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview && (_jsx("div", { className: `
22
+ w-full rounded-md bg-login-500/50 border border-login-500
23
+ text-login-text
24
+ p-3
25
+ prose prose-invert prose-base max-w-none overflow-y-auto
26
+ ${error ? 'border-red-500' : ''}
27
+ `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
28
+ ${type === 'markdown' && preview ? 'hidden' : ''}
28
29
  w-full rounded-md bg-login-500/50 border border-login-500
29
30
  text-login-text placeholder-login-200
30
31
  focus:outline-none focus:border-login focus:ring-1 focus:ring-login
31
32
  disabled:opacity-50 disabled:cursor-not-allowed
32
- p-3
33
+ p-3 pr-10
33
34
  transition-all duration-200
34
35
  resize-y
35
36
  ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
36
- ` }))] }) }));
37
+ ` })] }) }));
37
38
  }
package/dist/src/globals.css CHANGED
@@ -826,145 +826,145 @@
826
826
  font-size: 1.2rem;
827
827
  font-weight: 500;
828
828
  }
829
- .prose-sm {
830
- font-size: 0.875rem;
831
- line-height: 1.7142857;
829
+ .prose-base {
830
+ font-size: 1rem;
831
+ line-height: 1.75;
832
832
  :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
833
- margin-top: 1.1428571em;
834
- margin-bottom: 1.1428571em;
833
+ margin-top: 1.25em;
834
+ margin-bottom: 1.25em;
835
835
  }
836
836
  :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
837
- font-size: 1.2857143em;
838
- line-height: 1.5555556;
839
- margin-top: 0.8888889em;
840
- margin-bottom: 0.8888889em;
837
+ font-size: 1.25em;
838
+ line-height: 1.6;
839
+ margin-top: 1.2em;
840
+ margin-bottom: 1.2em;
841
841
  }
842
842
  :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
843
- margin-top: 1.3333333em;
844
- margin-bottom: 1.3333333em;
845
- padding-inline-start: 1.1111111em;
843
+ margin-top: 1.6em;
844
+ margin-bottom: 1.6em;
845
+ padding-inline-start: 1em;
846
846
  }
847
847
  :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
848
- font-size: 2.1428571em;
848
+ font-size: 2.25em;
849
849
  margin-top: 0;
850
- margin-bottom: 0.8em;
851
- line-height: 1.2;
850
+ margin-bottom: 0.8888889em;
851
+ line-height: 1.1111111;
852
852
  }
853
853
  :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
854
- font-size: 1.4285714em;
855
- margin-top: 1.6em;
856
- margin-bottom: 0.8em;
857
- line-height: 1.4;
854
+ font-size: 1.5em;
855
+ margin-top: 2em;
856
+ margin-bottom: 1em;
857
+ line-height: 1.3333333;
858
858
  }
859
859
  :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
860
- font-size: 1.2857143em;
861
- margin-top: 1.5555556em;
862
- margin-bottom: 0.4444444em;
863
- line-height: 1.5555556;
860
+ font-size: 1.25em;
861
+ margin-top: 1.6em;
862
+ margin-bottom: 0.6em;
863
+ line-height: 1.6;
864
864
  }
865
865
  :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
866
- margin-top: 1.4285714em;
867
- margin-bottom: 0.5714286em;
868
- line-height: 1.4285714;
866
+ margin-top: 1.5em;
867
+ margin-bottom: 0.5em;
868
+ line-height: 1.5;
869
869
  }
870
870
  :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
871
- margin-top: 1.7142857em;
872
- margin-bottom: 1.7142857em;
871
+ margin-top: 2em;
872
+ margin-bottom: 2em;
873
873
  }
874
874
  :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
875
- margin-top: 1.7142857em;
876
- margin-bottom: 1.7142857em;
875
+ margin-top: 2em;
876
+ margin-bottom: 2em;
877
877
  }
878
878
  :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
879
879
  margin-top: 0;
880
880
  margin-bottom: 0;
881
881
  }
882
882
  :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
883
- margin-top: 1.7142857em;
884
- margin-bottom: 1.7142857em;
883
+ margin-top: 2em;
884
+ margin-bottom: 2em;
885
885
  }
886
886
  :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
887
- font-size: 0.8571429em;
887
+ font-size: 0.875em;
888
888
  border-radius: 0.3125rem;
889
- padding-top: 0.1428571em;
890
- padding-inline-end: 0.3571429em;
891
- padding-bottom: 0.1428571em;
892
- padding-inline-start: 0.3571429em;
889
+ padding-top: 0.1875em;
890
+ padding-inline-end: 0.375em;
891
+ padding-bottom: 0.1875em;
892
+ padding-inline-start: 0.375em;
893
893
  }
894
894
  :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
895
- font-size: 0.8571429em;
895
+ font-size: 0.875em;
896
896
  }
897
897
  :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
898
- font-size: 0.9em;
898
+ font-size: 0.875em;
899
899
  }
900
900
  :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
901
- font-size: 0.8888889em;
901
+ font-size: 0.9em;
902
902
  }
903
903
  :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
904
- font-size: 0.8571429em;
905
- line-height: 1.6666667;
906
- margin-top: 1.6666667em;
907
- margin-bottom: 1.6666667em;
908
- border-radius: 0.25rem;
909
- padding-top: 0.6666667em;
910
- padding-inline-end: 1em;
911
- padding-bottom: 0.6666667em;
912
- padding-inline-start: 1em;
904
+ font-size: 0.875em;
905
+ line-height: 1.7142857;
906
+ margin-top: 1.7142857em;
907
+ margin-bottom: 1.7142857em;
908
+ border-radius: 0.375rem;
909
+ padding-top: 0.8571429em;
910
+ padding-inline-end: 1.1428571em;
911
+ padding-bottom: 0.8571429em;
912
+ padding-inline-start: 1.1428571em;
913
913
  }
914
914
  :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
915
- margin-top: 1.1428571em;
916
- margin-bottom: 1.1428571em;
917
- padding-inline-start: 1.5714286em;
915
+ margin-top: 1.25em;
916
+ margin-bottom: 1.25em;
917
+ padding-inline-start: 1.625em;
918
918
  }
919
919
  :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
920
- margin-top: 1.1428571em;
921
- margin-bottom: 1.1428571em;
922
- padding-inline-start: 1.5714286em;
920
+ margin-top: 1.25em;
921
+ margin-bottom: 1.25em;
922
+ padding-inline-start: 1.625em;
923
923
  }
924
924
  :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
925
- margin-top: 0.2857143em;
926
- margin-bottom: 0.2857143em;
925
+ margin-top: 0.5em;
926
+ margin-bottom: 0.5em;
927
927
  }
928
928
  :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
929
- padding-inline-start: 0.4285714em;
929
+ padding-inline-start: 0.375em;
930
930
  }
931
931
  :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
932
- padding-inline-start: 0.4285714em;
932
+ padding-inline-start: 0.375em;
933
933
  }
934
- :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
935
- margin-top: 0.5714286em;
936
- margin-bottom: 0.5714286em;
934
+ :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
935
+ margin-top: 0.75em;
936
+ margin-bottom: 0.75em;
937
937
  }
938
- :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
939
- margin-top: 1.1428571em;
938
+ :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
939
+ margin-top: 1.25em;
940
940
  }
941
- :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
942
- margin-bottom: 1.1428571em;
941
+ :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
942
+ margin-bottom: 1.25em;
943
943
  }
944
- :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
945
- margin-top: 1.1428571em;
944
+ :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
945
+ margin-top: 1.25em;
946
946
  }
947
- :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
948
- margin-bottom: 1.1428571em;
947
+ :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
948
+ margin-bottom: 1.25em;
949
949
  }
950
950
  :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
951
- margin-top: 0.5714286em;
952
- margin-bottom: 0.5714286em;
951
+ margin-top: 0.75em;
952
+ margin-bottom: 0.75em;
953
953
  }
954
954
  :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
955
- margin-top: 1.1428571em;
956
- margin-bottom: 1.1428571em;
955
+ margin-top: 1.25em;
956
+ margin-bottom: 1.25em;
957
957
  }
958
958
  :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
959
- margin-top: 1.1428571em;
959
+ margin-top: 1.25em;
960
960
  }
961
961
  :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
962
- margin-top: 0.2857143em;
963
- padding-inline-start: 1.5714286em;
962
+ margin-top: 0.5em;
963
+ padding-inline-start: 1.625em;
964
964
  }
965
965
  :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
966
- margin-top: 2.8571429em;
967
- margin-bottom: 2.8571429em;
966
+ margin-top: 3em;
967
+ margin-bottom: 3em;
968
968
  }
969
969
  :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
970
970
  margin-top: 0;
@@ -979,13 +979,13 @@
979
979
  margin-top: 0;
980
980
  }
981
981
  :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
982
- font-size: 0.8571429em;
983
- line-height: 1.5;
982
+ font-size: 0.875em;
983
+ line-height: 1.7142857;
984
984
  }
985
985
  :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
986
- padding-inline-end: 1em;
987
- padding-bottom: 0.6666667em;
988
- padding-inline-start: 1em;
986
+ padding-inline-end: 0.5714286em;
987
+ padding-bottom: 0.5714286em;
988
+ padding-inline-start: 0.5714286em;
989
989
  }
990
990
  :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
991
991
  padding-inline-start: 0;
@@ -994,10 +994,10 @@
994
994
  padding-inline-end: 0;
995
995
  }
996
996
  :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
997
- padding-top: 0.6666667em;
998
- padding-inline-end: 1em;
999
- padding-bottom: 0.6666667em;
1000
- padding-inline-start: 1em;
997
+ padding-top: 0.5714286em;
998
+ padding-inline-end: 0.5714286em;
999
+ padding-bottom: 0.5714286em;
1000
+ padding-inline-start: 0.5714286em;
1001
1001
  }
1002
1002
  :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1003
1003
  padding-inline-start: 0;
@@ -1006,22 +1006,22 @@
1006
1006
  padding-inline-end: 0;
1007
1007
  }
1008
1008
  :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1009
- margin-top: 1.7142857em;
1010
- margin-bottom: 1.7142857em;
1009
+ margin-top: 2em;
1010
+ margin-bottom: 2em;
1011
1011
  }
1012
1012
  :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1013
1013
  margin-top: 0;
1014
1014
  margin-bottom: 0;
1015
1015
  }
1016
1016
  :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1017
- font-size: 0.8571429em;
1018
- line-height: 1.3333333;
1019
- margin-top: 0.6666667em;
1017
+ font-size: 0.875em;
1018
+ line-height: 1.4285714;
1019
+ margin-top: 0.8571429em;
1020
1020
  }
1021
- :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1021
+ :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1022
1022
  margin-top: 0;
1023
1023
  }
1024
- :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1024
+ :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1025
1025
  margin-bottom: 0;
1026
1026
  }
1027
1027
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uibee",
3
- "version": "2.13.2",
3
+ "version": "2.14.0",
4
4
  "description": "Shared components, functions and hooks for reuse across Login projects",
5
5
  "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
6
6
  "bugs": {
package/src/components/inputs/shared/fieldWrapper.tsx CHANGED
@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
2
2
  import InputLabel from './inputLabel'
3
3
  import InputInfo from './inputInfo'
4
4
  import InputError from './inputError'
5
+ import ReactMarkdown from 'react-markdown'
5
6
 
6
7
  interface FieldWrapperProps {
7
8
  label?: string
@@ -43,7 +44,7 @@ export default function FieldWrapper({
43
44
  )}
44
45
  {description && (
45
46
  <p className='text-sm text-login-100 ml-1 mb-1'>
46
- {description}
47
+ <ReactMarkdown>{String(description || '')}</ReactMarkdown>
47
48
  </p>
48
49
  )}
49
50
  {children}
package/src/components/inputs/textarea.tsx CHANGED
@@ -56,40 +56,41 @@ export default function Textarea(props: TextareaProps) {
56
56
  </div>
57
57
  )}
58
58
 
59
- {type === 'markdown' && preview ? (
59
+ {type === 'markdown' && preview && (
60
60
  <div
61
61
  className={`
62
- w-full rounded-md bg-login-500/50 border border-login-500
63
- text-login-text
64
- p-3
65
- prose prose-invert prose-sm max-w-none overflow-y-auto
66
- ${error ? 'border-red-500' : ''}
67
- `}
62
+ w-full rounded-md bg-login-500/50 border border-login-500
63
+ text-login-text
64
+ p-3
65
+ prose prose-invert prose-base max-w-none overflow-y-auto
66
+ ${error ? 'border-red-500' : ''}
67
+ `}
68
68
  style={{ minHeight: `${rows * 1.5}rem` }}
69
69
  >
70
70
  <ReactMarkdown>{String(value || '')}</ReactMarkdown>
71
71
  </div>
72
- ) : (
73
- <textarea
74
- {...textareaProps}
75
- id={name}
76
- name={name}
77
- rows={rows}
78
- title={label}
79
- aria-invalid={!!error}
80
- aria-describedby={error ? `${name}-error` : undefined}
81
- className={`
72
+ )}
73
+
74
+ <textarea
75
+ {...textareaProps}
76
+ id={name}
77
+ name={name}
78
+ rows={rows}
79
+ title={label}
80
+ aria-invalid={!!error}
81
+ aria-describedby={error ? `${name}-error` : undefined}
82
+ className={`
83
+ ${type === 'markdown' && preview ? 'hidden' : ''}
82
84
  w-full rounded-md bg-login-500/50 border border-login-500
83
85
  text-login-text placeholder-login-200
84
86
  focus:outline-none focus:border-login focus:ring-1 focus:ring-login
85
87
  disabled:opacity-50 disabled:cursor-not-allowed
86
- p-3
88
+ p-3 pr-10
87
89
  transition-all duration-200
88
90
  resize-y
89
91
  ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
90
92
  `}
91
- />
92
- )}
93
+ />
93
94
  </div>
94
95
  </FieldWrapper>
95
96
  )