@mirai/ui 1.0.166 → 1.0.167
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.
- package/README.md +3 -0
- package/build/components/InputText/InputText.js +21 -3
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/InputText.module.css +2 -5
- package/build/components/InputText/InputText.stories.js +1 -0
- package/build/components/InputText/InputText.stories.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +44 -0
- package/build/primitives/Icon/Icon.constants.js +4 -1
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +22 -0
- package/build/primitives/Text/Text.js +9 -4
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/Text.module.css +9 -1
- package/build/primitives/Text/Text.stories.js +14 -3
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +20 -0
- package/build/primitives/Text/helpers/index.js +17 -0
- package/build/primitives/Text/helpers/index.js.map +1 -0
- package/build/primitives/Text/helpers/parseMarkdown.js +111 -0
- package/build/primitives/Text/helpers/parseMarkdown.js.map +1 -0
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -306,11 +306,13 @@ const MyComponent = () => (
|
|
|
306
306
|
|
|
307
307
|
A primitive for displaying text. It receives the following props:
|
|
308
308
|
|
|
309
|
+
- `accent:boolean` use theme's accent color
|
|
309
310
|
- `action:boolean` modifying font-size
|
|
310
311
|
- `bold:boolean` modifying font-weight
|
|
311
312
|
- `children:string`
|
|
312
313
|
- `headline:boolean` modifying font-size
|
|
313
314
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
315
|
+
- `lighten:boolean` use theme's content-light color
|
|
314
316
|
- `small:boolean` modifying font-size
|
|
315
317
|
- `tag:string` html tag of resulting element
|
|
316
318
|
- `underline:boolean` use an underline text decoration
|
|
@@ -834,6 +836,7 @@ Text input component receiving the following props:
|
|
|
834
836
|
- `hint:string` brief message
|
|
835
837
|
- `icon:string` if you want use an `<Icon>` within the component
|
|
836
838
|
- `label:string` input label
|
|
839
|
+
- `markdown:boolean` if true shows a preview of your markdown text
|
|
837
840
|
- `multiline:boolean` if true returning textarea
|
|
838
841
|
- `name:string` input name (required)
|
|
839
842
|
- `showRequired:bool` displays `*` next to the label
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
12
|
var _InputTextModule = _interopRequireDefault(require("./InputText.module.css"));
|
|
13
13
|
var _partials = require("./partials");
|
|
14
|
-
var _excluded = ["disabled", "error", "hint", "icon", "label", "multiLine", "showRequired", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
14
|
+
var _excluded = ["disabled", "error", "hint", "icon", "label", "markdown", "multiLine", "showRequired", "showState", "success", "type", "warning", "onChange", "onEnter", "onLeave"];
|
|
15
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -36,6 +36,7 @@ var InputText = function InputText(_ref) {
|
|
|
36
36
|
hint = _ref.hint,
|
|
37
37
|
icon = _ref.icon,
|
|
38
38
|
label = _ref.label,
|
|
39
|
+
markdown = _ref.markdown,
|
|
39
40
|
multiLine = _ref.multiLine,
|
|
40
41
|
_ref$showRequired = _ref.showRequired,
|
|
41
42
|
showRequired = _ref$showRequired === void 0 ? false : _ref$showRequired,
|
|
@@ -59,6 +60,10 @@ var InputText = function InputText(_ref) {
|
|
|
59
60
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
61
|
password = _useState4[0],
|
|
61
62
|
setPassword = _useState4[1];
|
|
63
|
+
var _useState5 = (0, _react.useState)(true),
|
|
64
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
+
inputMode = _useState6[0],
|
|
66
|
+
setInputMode = _useState6[1];
|
|
62
67
|
var handleChange = function handleChange(value, event) {
|
|
63
68
|
onChange(value, event);
|
|
64
69
|
};
|
|
@@ -102,7 +107,7 @@ var InputText = function InputText(_ref) {
|
|
|
102
107
|
label: label,
|
|
103
108
|
required: showRequired && others.required,
|
|
104
109
|
value: others.value
|
|
105
|
-
}), /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, _objectSpread({
|
|
110
|
+
}), inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Input, _extends({}, _objectSpread({
|
|
106
111
|
disabled: disabled,
|
|
107
112
|
multiLine: multiLine
|
|
108
113
|
}, others), {
|
|
@@ -112,7 +117,19 @@ var InputText = function InputText(_ref) {
|
|
|
112
117
|
onChange: handleChange,
|
|
113
118
|
onEnter: handleEnter,
|
|
114
119
|
onLeave: handleLeave
|
|
115
|
-
}))
|
|
120
|
+
})), markdown && !inputMode && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
121
|
+
onClick: function onClick() {
|
|
122
|
+
return setInputMode(true);
|
|
123
|
+
},
|
|
124
|
+
className: (0, _helpers.styles)(_InputTextModule.default.input, has.label && _InputTextModule.default.withLabel, multiLine && _InputTextModule.default.multiLine)
|
|
125
|
+
}, others.value)), markdown && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
126
|
+
onPress: function onPress() {
|
|
127
|
+
return setInputMode(!inputMode);
|
|
128
|
+
}
|
|
129
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
130
|
+
value: _primitives.ICON.MARKDOWN,
|
|
131
|
+
className: (0, _helpers.styles)(_InputTextModule.default.icon, inputMode && _InputTextModule.default.disabled)
|
|
132
|
+
})), (is.password || is.search && has.value) && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
116
133
|
tabIndex: -1,
|
|
117
134
|
onPress: handlePress
|
|
118
135
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
@@ -136,6 +153,7 @@ InputText.propTypes = {
|
|
|
136
153
|
hint: _propTypes.default.string,
|
|
137
154
|
icon: _propTypes.default.func,
|
|
138
155
|
label: _propTypes.default.string,
|
|
156
|
+
markdown: _propTypes.default.bool,
|
|
139
157
|
multiLine: _propTypes.default.bool,
|
|
140
158
|
name: _propTypes.default.string.isRequired,
|
|
141
159
|
showRequired: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n multiLine,\n showRequired = false,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && (\n <Label\n {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n />\n )}\n\n <Input\n
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","markdown","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","inputMode","setInputMode","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","MARKDOWN","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","bool","string","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n disabled,\n error,\n hint,\n icon,\n label,\n markdown,\n multiLine,\n showRequired = false,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n const [inputMode, setInputMode] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View className={styles(style.inputContainer, others.className)} style={others.style}>\n <View\n row\n className={styles(\n style.inputBorder,\n disabled && style.disabled,\n error && style.error,\n focus && !error && style.focus,\n )}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n <View wide className={style.content}>\n {label && (\n <Label\n {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n />\n )}\n\n {inputMode && (\n <Input\n {...{ disabled, multiLine, ...others }}\n type={!is.password || password ? type : 'text'}\n value={others.value || ''}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n )}\n {markdown && !inputMode && (\n <Text\n onClick={() => setInputMode(true)}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n >\n {others.value}\n </Text>\n )}\n </View>\n\n {markdown && (\n <Pressable onPress={() => setInputMode(!inputMode)}>\n <Icon value={ICON.MARKDOWN} className={styles(style.icon, inputMode && style.disabled)} />\n </Pressable>\n )}\n\n {(is.password || (is.search && has.value)) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={style.icon}\n />\n </Pressable>\n )}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n markdown: PropTypes.bool,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.content {
|
|
29
|
+
justify-content: center;
|
|
30
|
+
min-height: var(--mirai-ui-input-min-height);
|
|
29
31
|
position: relative;
|
|
30
32
|
}
|
|
31
33
|
|
|
@@ -46,11 +48,6 @@
|
|
|
46
48
|
pointer-events: none;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
|
-
.input {
|
|
50
|
-
border-radius: var(--mirai-ui-input-text-radius);
|
|
51
|
-
min-height: var(--mirai-ui-input-min-height);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
51
|
.input:not(.multiLine) {
|
|
55
52
|
padding: var(--mirai-ui-input-text-padding-y) calc(var(--mirai-ui-input-text-padding-x) / 2);
|
|
56
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.stories.js","names":["title","Story","propValue","value","props","useState","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","ICON","icon","storyName","args","autoResize","disabled","error","hint","undefined","label","multiLine","name","placeholder","required","showRequired","showState","success","type","warning","argTypes","options","Object","keys","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ value: propValue, ...props }) => {\n const [value, setValue] = useState(propValue);\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputText>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputText>::onEnter', ...others);\n\n const handleLeave = (...others) => console.log('<InputText>::onLeave', ...others);\n\n return (\n <InputText\n {...props}\n icon={ICON[props.icon]}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputText';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'label',\n multiLine: false,\n name: 'name',\n placeholder: '',\n required: false,\n showRequired: false,\n showState: true,\n success: false,\n type: 'text',\n value: 'value',\n warning: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n icon: {\n options: [undefined, ...Object.keys(ICON)],\n control: { type: 'select' },\n defaultValue: undefined,\n },\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAuC;EAAA,IAA1BC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAChD,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,uBAAuB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACvD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,oBACE,6BAAC,oBAAS,eACJL,KAAK;IACT,IAAI,EAAEU,gBAAI,CAACV,KAAK,CAACW,IAAI,CAAE;IACvB,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACe,SAAS,GAAG,WAAW;AAE7Bf,KAAK,CAACgB,IAAI;EACRC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZN,IAAI,EAAEO,SAAS;EACfC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAE,EAAE;EACfC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,MAAM;
|
|
1
|
+
{"version":3,"file":"InputText.stories.js","names":["title","Story","propValue","value","props","useState","setValue","handleChange","next","others","console","log","handleEnter","handleLeave","ICON","icon","storyName","args","autoResize","disabled","error","hint","undefined","label","markdown","multiLine","name","placeholder","required","showRequired","showState","success","type","warning","argTypes","options","Object","keys","control","defaultValue"],"sources":["../../../src/components/InputText/InputText.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { ICON } from '../../primitives';\nimport { InputText } from './InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ value: propValue, ...props }) => {\n const [value, setValue] = useState(propValue);\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<InputText>::onChange', next, ...others);\n };\n\n const handleEnter = (...others) => console.log('<InputText>::onEnter', ...others);\n\n const handleLeave = (...others) => console.log('<InputText>::onLeave', ...others);\n\n return (\n <InputText\n {...props}\n icon={ICON[props.icon]}\n value={value}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n );\n};\n\nStory.storyName = 'InputText';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n error: false,\n hint: 'hint',\n icon: undefined,\n label: 'label',\n markdown: false,\n multiLine: false,\n name: 'name',\n placeholder: '',\n required: false,\n showRequired: false,\n showState: true,\n success: false,\n type: 'text',\n value: 'value',\n warning: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n icon: {\n options: [undefined, ...Object.keys(ICON)],\n control: { type: 'select' },\n defaultValue: undefined,\n },\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEzB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAAuC;EAAA,IAA1BC,SAAS,QAAhBC,KAAK;IAAgBC,KAAK;EAChD,gBAA0B,IAAAC,eAAQ,EAACH,SAAS,CAAC;IAAA;IAAtCC,KAAK;IAAEG,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,uBAAuB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACvD,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOH,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,IAAMI,WAAW,GAAG,SAAdA,WAAW;IAAA;IAAA,mCAAOJ,MAAM;MAANA,MAAM;IAAA;IAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,sBAAsB,SAAKF,MAAM,EAAC;EAAA;EAEjF,oBACE,6BAAC,oBAAS,eACJL,KAAK;IACT,IAAI,EAAEU,gBAAI,CAACV,KAAK,CAACW,IAAI,CAAE;IACvB,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEI,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB;AAEN,CAAC;AAAC;AAEFZ,KAAK,CAACe,SAAS,GAAG,WAAW;AAE7Bf,KAAK,CAACgB,IAAI;EACRC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,MAAM;EACZN,IAAI,EAAEO,SAAS;EACfC,KAAK,EAAE,OAAO;EACdC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,MAAM;EACZC,WAAW,EAAE,EAAE;EACfC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,SAAS,EAAE,IAAI;EACfC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,MAAM;EACZ7B,KAAK,EAAE,OAAO;EACd8B,OAAO,EAAE;AAAK,gCAEb,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDhC,KAAK,CAACiC,QAAQ,GAAG;EACfnB,IAAI,EAAE;IACJoB,OAAO,GAAGb,SAAS,4BAAKc,MAAM,CAACC,IAAI,CAACvB,gBAAI,CAAC,EAAC;IAC1CwB,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAEjB;EAChB,CAAC;EACDU,IAAI,EAAE;IACJG,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDG,OAAO,EAAE;MAAEN,IAAI,EAAE;IAAS,CAAC;IAC3BO,YAAY,EAAE;EAChB;AACF,CAAC"}
|
|
@@ -191,6 +191,50 @@ exports[`component:<InputText> prop:label 1`] = `
|
|
|
191
191
|
</DocumentFragment>
|
|
192
192
|
`;
|
|
193
193
|
|
|
194
|
+
exports[`component:<InputText> prop:markdown 1`] = `
|
|
195
|
+
<DocumentFragment>
|
|
196
|
+
<div
|
|
197
|
+
class="view inputContainer"
|
|
198
|
+
>
|
|
199
|
+
<div
|
|
200
|
+
class="view row inputBorder"
|
|
201
|
+
>
|
|
202
|
+
<div
|
|
203
|
+
class="view wide content"
|
|
204
|
+
>
|
|
205
|
+
<input
|
|
206
|
+
class="input input"
|
|
207
|
+
name="name"
|
|
208
|
+
type="text"
|
|
209
|
+
value=""
|
|
210
|
+
/>
|
|
211
|
+
</div>
|
|
212
|
+
<div
|
|
213
|
+
class="pressable"
|
|
214
|
+
>
|
|
215
|
+
<span
|
|
216
|
+
class="icon headline-3 icon disabled"
|
|
217
|
+
>
|
|
218
|
+
<svg
|
|
219
|
+
fill="currentColor"
|
|
220
|
+
height="1em"
|
|
221
|
+
stroke="currentColor"
|
|
222
|
+
stroke-width="0"
|
|
223
|
+
viewBox="0 0 32 32"
|
|
224
|
+
width="1em"
|
|
225
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
226
|
+
>
|
|
227
|
+
<path
|
|
228
|
+
d="M 2.875 6 C 1.320313 6 0 7.253906 0 8.8125 L 0 23.1875 C 0 24.746094 1.320313 26 2.875 26 L 29.125 26 C 30.679688 26 32 24.746094 32 23.1875 L 32 8.8125 C 32 7.253906 30.679688 6 29.125 6 Z M 2.875 8 L 29.125 8 C 29.640625 8 30 8.382813 30 8.8125 L 30 23.1875 C 30 23.617188 29.640625 24 29.125 24 L 2.875 24 C 2.359375 24 2 23.617188 2 23.1875 L 2 8.8125 C 2 8.382813 2.359375 8 2.875 8 Z M 5 11 L 5 21 L 8 21 L 8 14.34375 L 11 18.3125 L 14 14.34375 L 14 21 L 17 21 L 17 11 L 14 11 L 11 15 L 8 11 Z M 22 11 L 22 16 L 19 16 L 23.5 21 L 28 16 L 25 16 L 25 11 Z"
|
|
229
|
+
/>
|
|
230
|
+
</svg>
|
|
231
|
+
</span>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</DocumentFragment>
|
|
236
|
+
`;
|
|
237
|
+
|
|
194
238
|
exports[`component:<InputText> prop:multiLine 1`] = `
|
|
195
239
|
<DocumentFragment>
|
|
196
240
|
<div
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ICON = void 0;
|
|
7
|
+
var _lia = require("react-icons/lia");
|
|
7
8
|
var _md = require("react-icons/md");
|
|
8
9
|
var ICON = {
|
|
9
10
|
// <Calendar>
|
|
@@ -31,7 +32,9 @@ var ICON = {
|
|
|
31
32
|
SUCCESS: _md.MdOutlineCheckCircle,
|
|
32
33
|
WARNING: _md.MdOutlineWarningAmber,
|
|
33
34
|
// <Table>
|
|
34
|
-
FILTER: _md.MdOutlineFilterList
|
|
35
|
+
FILTER: _md.MdOutlineFilterList,
|
|
36
|
+
// Filetype
|
|
37
|
+
MARKDOWN: _lia.LiaMarkdown
|
|
35
38
|
};
|
|
36
39
|
exports.ICON = ICON;
|
|
37
40
|
//# sourceMappingURL=Icon.constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","FILTER"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import {\n // <Calendar>\n MdOutlineArrowBack as LEFT,\n MdOutlineArrowForward as RIGHT,\n MdOutlineArrowUpward as UP,\n MdOutlineArrowDownward as DOWN,\n // <InputOption>\n MdOutlineCheck as CHECK,\n // <InputNumber>\n MdOutlineAdd as ADD,\n MdOutlineRemove as REMOVE,\n // <InputSelect>\n MdOutlineExpandLess as EXPAND_LESS,\n MdOutlineExpandMore as EXPAND_MORE,\n // <InputText>\n MdOutlineSearch as SEARCH,\n MdOutlineVisibility as EYE_OPEN,\n MdOutlineVisibilityOff as EYE_CLOSE,\n // <Modal>\n MdOutlineClose as CLOSE,\n // <Notification> & <InputText>\n MdErrorOutline as ERROR,\n MdOutlineInfo as INFO,\n MdOutlineCheckCircle as SUCCESS,\n MdOutlineWarningAmber as WARNING,\n // <Table>\n MdOutlineFilterList as FILTER,\n} from 'react-icons/md';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Table>\n FILTER,\n};\n"],"mappings":";;;;;;AAAA;AA6BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAAI;EACJC,KAAK,EAALA,yBAAK;EACLC,EAAE,EAAFA,wBAAE;EACFC,IAAI,EAAJA,0BAAI;EACJ;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,GAAG,EAAHA,gBAAG;EACHC,MAAM,EAANA,mBAAM;EACN;EACAC,WAAW,EAAXA,uBAAW;EACXC,WAAW,EAAXA,uBAAW;EACX;EACAC,MAAM,EAANA,mBAAM;EACNC,QAAQ,EAARA,uBAAQ;EACRC,SAAS,EAATA,0BAAS;EACT;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,KAAK,EAALA,kBAAK;EACLC,IAAI,EAAJA,iBAAI;EACJC,OAAO,EAAPA,wBAAO;EACPC,OAAO,EAAPA,yBAAO;EACP;EACAC,MAAM,EAANA;AACF,CAAC;AAAC"}
|
|
1
|
+
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from 'react-icons/lia';\nimport {\n // <Calendar>\n MdOutlineArrowBack as LEFT,\n MdOutlineArrowForward as RIGHT,\n MdOutlineArrowUpward as UP,\n MdOutlineArrowDownward as DOWN,\n // <InputOption>\n MdOutlineCheck as CHECK,\n // <InputNumber>\n MdOutlineAdd as ADD,\n MdOutlineRemove as REMOVE,\n // <InputSelect>\n MdOutlineExpandLess as EXPAND_LESS,\n MdOutlineExpandMore as EXPAND_MORE,\n // <InputText>\n MdOutlineSearch as SEARCH,\n MdOutlineVisibility as EYE_OPEN,\n MdOutlineVisibilityOff as EYE_CLOSE,\n // <Modal>\n MdOutlineClose as CLOSE,\n // <Notification> & <InputText>\n MdErrorOutline as ERROR,\n MdOutlineInfo as INFO,\n MdOutlineCheckCircle as SUCCESS,\n MdOutlineWarningAmber as WARNING,\n // <Table>\n MdOutlineFilterList as FILTER,\n} from 'react-icons/md';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AA6BO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sBAAI;EACJC,KAAK,EAALA,yBAAK;EACLC,EAAE,EAAFA,wBAAE;EACFC,IAAI,EAAJA,0BAAI;EACJ;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,GAAG,EAAHA,gBAAG;EACHC,MAAM,EAANA,mBAAM;EACN;EACAC,WAAW,EAAXA,uBAAW;EACXC,WAAW,EAAXA,uBAAW;EACX;EACAC,MAAM,EAANA,mBAAM;EACNC,QAAQ,EAARA,uBAAQ;EACRC,SAAS,EAATA,0BAAS;EACT;EACAC,KAAK,EAALA,kBAAK;EACL;EACAC,KAAK,EAALA,kBAAK;EACLC,IAAI,EAAJA,iBAAI;EACJC,OAAO,EAAPA,wBAAO;EACPC,OAAO,EAAPA,yBAAO;EACP;EACAC,MAAM,EAANA,uBAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
|
|
@@ -547,6 +547,28 @@ exports[`primitive:<Icon> prop:value prop:value (LEFT) 1`] = `
|
|
|
547
547
|
</DocumentFragment>
|
|
548
548
|
`;
|
|
549
549
|
|
|
550
|
+
exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
|
|
551
|
+
<DocumentFragment>
|
|
552
|
+
<span
|
|
553
|
+
class="icon headline-3"
|
|
554
|
+
>
|
|
555
|
+
<svg
|
|
556
|
+
fill="currentColor"
|
|
557
|
+
height="1em"
|
|
558
|
+
stroke="currentColor"
|
|
559
|
+
stroke-width="0"
|
|
560
|
+
viewBox="0 0 32 32"
|
|
561
|
+
width="1em"
|
|
562
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
563
|
+
>
|
|
564
|
+
<path
|
|
565
|
+
d="M 2.875 6 C 1.320313 6 0 7.253906 0 8.8125 L 0 23.1875 C 0 24.746094 1.320313 26 2.875 26 L 29.125 26 C 30.679688 26 32 24.746094 32 23.1875 L 32 8.8125 C 32 7.253906 30.679688 6 29.125 6 Z M 2.875 8 L 29.125 8 C 29.640625 8 30 8.382813 30 8.8125 L 30 23.1875 C 30 23.617188 29.640625 24 29.125 24 L 2.875 24 C 2.359375 24 2 23.617188 2 23.1875 L 2 8.8125 C 2 8.382813 2.359375 8 2.875 8 Z M 5 11 L 5 21 L 8 21 L 8 14.34375 L 11 18.3125 L 14 14.34375 L 14 21 L 17 21 L 17 11 L 14 11 L 11 15 L 8 11 Z M 22 11 L 22 16 L 19 16 L 23.5 21 L 28 16 L 25 16 L 25 11 Z"
|
|
566
|
+
/>
|
|
567
|
+
</svg>
|
|
568
|
+
</span>
|
|
569
|
+
</DocumentFragment>
|
|
570
|
+
`;
|
|
571
|
+
|
|
550
572
|
exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
|
|
551
573
|
<DocumentFragment>
|
|
552
574
|
<span
|
|
@@ -8,8 +8,9 @@ exports.Text = void 0;
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
|
+
var _helpers2 = require("./helpers");
|
|
11
12
|
var _TextModule = _interopRequireDefault(require("./Text.module.css"));
|
|
12
|
-
var _excluded = ["action", "bold", "children", "headline", "level", "small", "tag", "underline", "upperCase", "wide"];
|
|
13
|
+
var _excluded = ["accent", "action", "bold", "children", "headline", "level", "lighten", "small", "tag", "underline", "upperCase", "wide"];
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
15
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
16
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -19,12 +20,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
|
|
|
19
20
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
20
21
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
21
22
|
var Text = function Text(_ref) {
|
|
22
|
-
var
|
|
23
|
+
var accent = _ref.accent,
|
|
24
|
+
action = _ref.action,
|
|
23
25
|
bold = _ref.bold,
|
|
24
26
|
children = _ref.children,
|
|
25
27
|
headline = _ref.headline,
|
|
26
28
|
_ref$level = _ref.level,
|
|
27
29
|
level = _ref$level === void 0 ? 3 : _ref$level,
|
|
30
|
+
lighten = _ref.lighten,
|
|
28
31
|
small = _ref.small,
|
|
29
32
|
tag = _ref.tag,
|
|
30
33
|
underline = _ref.underline,
|
|
@@ -32,17 +35,19 @@ var Text = function Text(_ref) {
|
|
|
32
35
|
wide = _ref.wide,
|
|
33
36
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
34
37
|
return /*#__PURE__*/_react.default.createElement(tag || (headline ? "h".concat(level) : 'span'), _objectSpread(_objectSpread({}, others), {}, {
|
|
35
|
-
className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
36
|
-
}), children);
|
|
38
|
+
className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
39
|
+
}), (0, _helpers2.parseMarkdown)(children));
|
|
37
40
|
};
|
|
38
41
|
exports.Text = Text;
|
|
39
42
|
Text.displayName = 'Primitive:Text';
|
|
40
43
|
Text.propTypes = {
|
|
44
|
+
accent: _propTypes.default.bool,
|
|
41
45
|
action: _propTypes.default.bool,
|
|
42
46
|
bold: _propTypes.default.bool,
|
|
43
47
|
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
|
|
44
48
|
headline: _propTypes.default.bool,
|
|
45
49
|
level: _propTypes.default.number,
|
|
50
|
+
lighten: _propTypes.default.bool,
|
|
46
51
|
small: _propTypes.default.bool,
|
|
47
52
|
tag: _propTypes.default.string,
|
|
48
53
|
underline: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","names":["Text","action","bold","children","headline","level","small","tag","underline","upperCase","wide","others","React","createElement","className","styles","style","text","paragraph","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Text.module.css';\n\nconst Text = ({
|
|
1
|
+
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","children","headline","level","lighten","small","tag","underline","upperCase","wide","others","React","createElement","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n action,\n bold,\n children,\n headline,\n level = 3,\n lighten,\n small,\n tag,\n underline,\n upperCase,\n wide,\n ...others\n}) =>\n React.createElement(\n tag || (headline ? `h${level}` : 'span'),\n {\n ...others,\n className: styles(\n style.text,\n accent && style.accent,\n bold && style.bold,\n headline ? style[`headline-${level}`] : action ? style.action : small ? style.small : style.paragraph,\n lighten && style.lighten,\n underline && style.underline,\n upperCase && style.upperCase,\n wide && style.wide,\n others.className,\n ),\n },\n parseMarkdown(children),\n );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n accent: PropTypes.bool,\n action: PropTypes.bool,\n bold: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: PropTypes.bool,\n small: PropTypes.bool,\n tag: PropTypes.string,\n underline: PropTypes.bool,\n upperCase: PropTypes.bool,\n wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBN,GAAG,KAAKJ,QAAQ,cAAOC,KAAK,IAAK,MAAM,CAAC,kCAEnCO,MAAM;IACTG,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVlB,MAAM,IAAIiB,mBAAK,CAACjB,MAAM,EACtBE,IAAI,IAAIe,mBAAK,CAACf,IAAI,EAClBE,QAAQ,GAAGa,mBAAK,oBAAaZ,KAAK,EAAG,GAAGJ,MAAM,GAAGgB,mBAAK,CAAChB,MAAM,GAAGM,KAAK,GAAGU,mBAAK,CAACV,KAAK,GAAGU,mBAAK,CAACE,SAAS,EACrGb,OAAO,IAAIW,mBAAK,CAACX,OAAO,EACxBG,SAAS,IAAIQ,mBAAK,CAACR,SAAS,EAC5BC,SAAS,IAAIO,mBAAK,CAACP,SAAS,EAC5BC,IAAI,IAAIM,mBAAK,CAACN,IAAI,EAClBC,MAAM,CAACG,SAAS;EACjB,IAEH,IAAAK,uBAAa,EAACjB,QAAQ,CAAC,CACxB;AAAA;AAAC;AAEJJ,IAAI,CAACsB,WAAW,GAAG,gBAAgB;AAEnCtB,IAAI,CAACuB,SAAS,GAAG;EACftB,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,MAAM,EAAEsB,kBAAS,CAACC,IAAI;EACtBtB,IAAI,EAAEqB,kBAAS,CAACC,IAAI;EACpBrB,QAAQ,EAAEoB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACK,KAAK,CAAC,CAAC;EACpFxB,QAAQ,EAAEmB,kBAAS,CAACC,IAAI;EACxBnB,KAAK,EAAEkB,kBAAS,CAACI,MAAM;EACvBrB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,KAAK,EAAEgB,kBAAS,CAACC,IAAI;EACrBhB,GAAG,EAAEe,kBAAS,CAACG,MAAM;EACrBjB,SAAS,EAAEc,kBAAS,CAACC,IAAI;EACzBd,SAAS,EAAEa,kBAAS,CAACC,IAAI;EACzBb,IAAI,EAAEY,kBAAS,CAACC;AAClB,CAAC"}
|
|
@@ -43,11 +43,19 @@ h4.headline-4 {
|
|
|
43
43
|
line-height: var(--mirai-ui-line-height-paragraph);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
.accent {
|
|
47
|
+
color: var(--mirai-ui-accent);
|
|
48
|
+
}
|
|
49
|
+
|
|
46
50
|
.action {
|
|
47
51
|
font-size: var(--mirai-ui-font-size-action);
|
|
48
52
|
line-height: var(--mirai-ui-line-height-action);
|
|
49
53
|
}
|
|
50
54
|
|
|
55
|
+
.lighten {
|
|
56
|
+
color: var(--mirai-ui-content-light);
|
|
57
|
+
}
|
|
58
|
+
|
|
51
59
|
.small {
|
|
52
60
|
font-size: var(--mirai-ui-font-size-small);
|
|
53
61
|
line-height: var(--mirai-ui-line-height-small);
|
|
@@ -70,4 +78,4 @@ h4.headline-4 {
|
|
|
70
78
|
h2.headline-2 {
|
|
71
79
|
color: var(--mirai-ui-content);
|
|
72
80
|
font-weight: var(--mirai-ui-font-weight);
|
|
73
|
-
}
|
|
81
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
@@ -7,26 +8,36 @@ exports.default = exports.Story = void 0;
|
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
8
9
|
var _Text = require("./Text");
|
|
9
10
|
var _Story$args;
|
|
11
|
+
var _excluded = ["childrenMarkdown"];
|
|
10
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
12
13
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
14
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
14
15
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
16
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
15
19
|
var _default = {
|
|
16
20
|
title: 'Primitives'
|
|
17
21
|
};
|
|
18
22
|
exports.default = _default;
|
|
19
|
-
var Story = function Story(
|
|
20
|
-
|
|
23
|
+
var Story = function Story(_ref) {
|
|
24
|
+
var childrenMarkdown = _ref.childrenMarkdown,
|
|
25
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, props), /*#__PURE__*/_react.default.createElement(_Text.Text, _extends({}, props, {
|
|
27
|
+
children: childrenMarkdown
|
|
28
|
+
})));
|
|
21
29
|
};
|
|
22
30
|
exports.Story = Story;
|
|
23
31
|
Story.storyName = 'Text';
|
|
24
32
|
Story.args = (_Story$args = {
|
|
33
|
+
accent: false,
|
|
25
34
|
action: false,
|
|
26
35
|
bold: false,
|
|
27
36
|
children: 'children',
|
|
37
|
+
childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
|
|
28
38
|
headline: false,
|
|
29
39
|
level: 3,
|
|
40
|
+
lighten: false,
|
|
30
41
|
small: false,
|
|
31
42
|
tag: 'span',
|
|
32
43
|
underline: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.stories.js","names":["title","Story","props","storyName","args","action","bold","children","headline","level","small","tag","underline","upperCase","wide","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => <Text {...props}
|
|
1
|
+
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","children","headline","level","lighten","small","tag","underline","upperCase","wide","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n <>\n <Text {...props} />\n <Text {...props} children={childrenMarkdown} />\n </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n accent: false,\n action: false,\n bold: false,\n children: 'children',\n childrenMarkdown:\n '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n headline: false,\n level: 3,\n lighten: false,\n small: false,\n tag: 'span',\n underline: false,\n upperCase: false,\n wide: false,\n // inherited properties\n ['data-testid']: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI;EACRC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,UAAU;EACpBP,gBAAgB,EACd,8HAA8H;EAChIQ,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,MAAM;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDhB,KAAK,CAACiB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -10,6 +10,16 @@ exports[`primitive:<Text> inherit:className 1`] = `
|
|
|
10
10
|
</DocumentFragment>
|
|
11
11
|
`;
|
|
12
12
|
|
|
13
|
+
exports[`primitive:<Text> prop:accent 1`] = `
|
|
14
|
+
<DocumentFragment>
|
|
15
|
+
<span
|
|
16
|
+
class="text accent paragraph"
|
|
17
|
+
>
|
|
18
|
+
Lorem Ipsum
|
|
19
|
+
</span>
|
|
20
|
+
</DocumentFragment>
|
|
21
|
+
`;
|
|
22
|
+
|
|
13
23
|
exports[`primitive:<Text> prop:action 1`] = `
|
|
14
24
|
<DocumentFragment>
|
|
15
25
|
<span
|
|
@@ -80,6 +90,16 @@ exports[`primitive:<Text> prop:headline 1`] = `
|
|
|
80
90
|
</DocumentFragment>
|
|
81
91
|
`;
|
|
82
92
|
|
|
93
|
+
exports[`primitive:<Text> prop:lighten 1`] = `
|
|
94
|
+
<DocumentFragment>
|
|
95
|
+
<span
|
|
96
|
+
class="text paragraph lighten"
|
|
97
|
+
>
|
|
98
|
+
Lorem Ipsum
|
|
99
|
+
</span>
|
|
100
|
+
</DocumentFragment>
|
|
101
|
+
`;
|
|
102
|
+
|
|
83
103
|
exports[`primitive:<Text> prop:small 1`] = `
|
|
84
104
|
<DocumentFragment>
|
|
85
105
|
<span
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _parseMarkdown = require("./parseMarkdown");
|
|
7
|
+
Object.keys(_parseMarkdown).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _parseMarkdown[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _parseMarkdown[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Text/helpers/index.js"],"sourcesContent":["export * from './parseMarkdown';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.parseMarkdown = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _excluded = ["text"];
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
12
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
13
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
16
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
17
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
18
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
19
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
20
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
21
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
22
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
23
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
24
|
+
var LINK_REGEXP = /\[(.*?)\]\((.*?)\)/;
|
|
25
|
+
var MARKDOWN_REGEXP = /(\*\*|\*|_|~~|\[|\{)(.*?)(\*\*|\*|_|~~|\)|\})/g;
|
|
26
|
+
var STYLE = {
|
|
27
|
+
BINDING: {
|
|
28
|
+
style: {
|
|
29
|
+
color: 'var(--mirai-ui-accent)',
|
|
30
|
+
fontWeight: 'bold'
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
BOLD: {
|
|
34
|
+
style: {
|
|
35
|
+
fontWeight: 'bold'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
ITALIC: {
|
|
39
|
+
style: {
|
|
40
|
+
fontStyle: 'italic'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
LINE_THROUGH: {
|
|
44
|
+
style: {
|
|
45
|
+
textDecoration: 'line-through'
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
LINK: {
|
|
49
|
+
style: {
|
|
50
|
+
textDecoration: 'underline',
|
|
51
|
+
color: 'var(--mirai-ui-accent)'
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
UNDERLINE: {
|
|
55
|
+
style: {
|
|
56
|
+
textDecoration: 'underline'
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
var parseMarkdown = function parseMarkdown(value) {
|
|
61
|
+
if (!value || typeof value !== 'string' || value.match(MARKDOWN_REGEXP) === null) return value;
|
|
62
|
+
var tokens = [];
|
|
63
|
+
var lastIndex = 0;
|
|
64
|
+
var match;
|
|
65
|
+
while ((match = MARKDOWN_REGEXP.exec(value)) !== null) {
|
|
66
|
+
var _match = match,
|
|
67
|
+
_match2 = _slicedToArray(_match, 4),
|
|
68
|
+
raw = _match2[0],
|
|
69
|
+
start = _match2[1],
|
|
70
|
+
text = _match2[2],
|
|
71
|
+
end = _match2[3];
|
|
72
|
+
if (value.slice(lastIndex, match.index)) tokens.push({
|
|
73
|
+
text: value.slice(lastIndex, match.index)
|
|
74
|
+
});
|
|
75
|
+
if (start === '**' && end == '**') tokens.push(_objectSpread({
|
|
76
|
+
text: text
|
|
77
|
+
}, STYLE.BOLD));else if (start === '*' && end === '*') tokens.push(_objectSpread({
|
|
78
|
+
text: text
|
|
79
|
+
}, STYLE.ITALIC));else if (start === '_' && end === '_') tokens.push(_objectSpread({
|
|
80
|
+
text: text
|
|
81
|
+
}, STYLE.UNDERLINE));else if (start === '~~' && end === '~~') tokens.push(_objectSpread({
|
|
82
|
+
text: text
|
|
83
|
+
}, STYLE.LINE_THROUGH));else if (start === '{' && end === '}') tokens.push(_objectSpread({
|
|
84
|
+
text: raw
|
|
85
|
+
}, STYLE.BINDING));else if (start === '[' && end === ')') {
|
|
86
|
+
var _raw$match = raw.match(LINK_REGEXP),
|
|
87
|
+
_raw$match2 = _slicedToArray(_raw$match, 3),
|
|
88
|
+
title = _raw$match2[1],
|
|
89
|
+
href = _raw$match2[2];
|
|
90
|
+
tokens.push(_objectSpread({
|
|
91
|
+
text: title,
|
|
92
|
+
href: href
|
|
93
|
+
}, STYLE.LINK));
|
|
94
|
+
} else {
|
|
95
|
+
tokens.push({
|
|
96
|
+
text: raw
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
lastIndex = MARKDOWN_REGEXP.lastIndex;
|
|
100
|
+
}
|
|
101
|
+
if (value.slice(lastIndex)) tokens.push({
|
|
102
|
+
text: value.slice(lastIndex)
|
|
103
|
+
});
|
|
104
|
+
return tokens.map(function (_ref) {
|
|
105
|
+
var text = _ref.text,
|
|
106
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
107
|
+
return Object.keys(props).length ? /*#__PURE__*/_react.default.createElement(props.href ? 'a' : 'span', props, text) : text;
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
exports.parseMarkdown = parseMarkdown;
|
|
111
|
+
//# sourceMappingURL=parseMarkdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parseMarkdown.js","names":["LINK_REGEXP","MARKDOWN_REGEXP","STYLE","BINDING","style","color","fontWeight","BOLD","ITALIC","fontStyle","LINE_THROUGH","textDecoration","LINK","UNDERLINE","parseMarkdown","value","match","tokens","lastIndex","exec","raw","start","text","end","slice","index","push","title","href","map","props","Object","keys","length","React","createElement"],"sources":["../../../../src/primitives/Text/helpers/parseMarkdown.js"],"sourcesContent":["import React from 'react';\n\nconst LINK_REGEXP = /\\[(.*?)\\]\\((.*?)\\)/;\n\nconst MARKDOWN_REGEXP = /(\\*\\*|\\*|_|~~|\\[|\\{)(.*?)(\\*\\*|\\*|_|~~|\\)|\\})/g;\n\nconst STYLE = {\n BINDING: { style: { color: 'var(--mirai-ui-accent)', fontWeight: 'bold' } },\n BOLD: { style: { fontWeight: 'bold' } },\n ITALIC: { style: { fontStyle: 'italic' } },\n LINE_THROUGH: { style: { textDecoration: 'line-through' } },\n LINK: { style: { textDecoration: 'underline', color: 'var(--mirai-ui-accent)' } },\n UNDERLINE: { style: { textDecoration: 'underline' } },\n};\n\nexport const parseMarkdown = (value) => {\n if (!value || typeof value !== 'string' || value.match(MARKDOWN_REGEXP) === null) return value;\n\n const tokens = [];\n let lastIndex = 0;\n let match;\n\n while ((match = MARKDOWN_REGEXP.exec(value)) !== null) {\n const [raw, start, text, end] = match;\n\n if (value.slice(lastIndex, match.index)) tokens.push({ text: value.slice(lastIndex, match.index) });\n\n if (start === '**' && end == '**') tokens.push({ text, ...STYLE.BOLD });\n else if (start === '*' && end === '*') tokens.push({ text, ...STYLE.ITALIC });\n else if (start === '_' && end === '_') tokens.push({ text, ...STYLE.UNDERLINE });\n else if (start === '~~' && end === '~~') tokens.push({ text, ...STYLE.LINE_THROUGH });\n else if (start === '{' && end === '}') tokens.push({ text: raw, ...STYLE.BINDING });\n else if (start === '[' && end === ')') {\n const [, title, href] = raw.match(LINK_REGEXP);\n tokens.push({ text: title, href, ...STYLE.LINK });\n } else {\n tokens.push({ text: raw });\n }\n\n lastIndex = MARKDOWN_REGEXP.lastIndex;\n }\n\n if (value.slice(lastIndex)) tokens.push({ text: value.slice(lastIndex) });\n\n return tokens.map(({ text, ...props }) =>\n Object.keys(props).length ? React.createElement(props.href ? 'a' : 'span', props, text) : text,\n );\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirai/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.167",
|
|
4
4
|
"repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
|
|
5
5
|
"author": "JΛVI <hello@soyjavi.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@mirai/locale": "^0.2",
|
|
28
28
|
"react": "^17.0.2",
|
|
29
29
|
"react-dom": "^17.0.2",
|
|
30
|
-
"react-icons": "^4.
|
|
30
|
+
"react-icons": "^4.10.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@babel/cli": "7.19.3",
|
|
@@ -47,6 +47,10 @@
|
|
|
47
47
|
"engines": {
|
|
48
48
|
"node": ">=18.15.0"
|
|
49
49
|
},
|
|
50
|
+
"resolutions": {
|
|
51
|
+
"@mirai/locale": "^0.2",
|
|
52
|
+
"react-icons": "^4.10.1"
|
|
53
|
+
},
|
|
50
54
|
"browserslist": {
|
|
51
55
|
"production": [
|
|
52
56
|
">0.2%",
|