@bigbinary/neeto-editor 0.2.0 → 0.2.4
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/index.js +28 -7
- package/package.json +7 -5
- package/tailwind.config.js +13 -9
- package/webpack.config.js +9 -1
- package/webpack.dev.config.js +9 -1
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -28
- package/public/robots.txt +0 -3
- package/src/App.js +0 -8
- package/src/Common/Avatar.js +0 -168
- package/src/Common/CodeBlock.js +0 -11
- package/src/Common/Description.js +0 -12
- package/src/Common/Dropdown/index.js +0 -118
- package/src/Common/Heading.js +0 -13
- package/src/Common/HighlightText.js +0 -7
- package/src/Common/Icons/HashtagFilled.js +0 -59
- package/src/Common/Icons/TextColor.js +0 -35
- package/src/Common/Icons/index.js +0 -2
- package/src/Common/ListItems.js +0 -17
- package/src/Editor/CustomExtensions/BubbleMenu/index.js +0 -92
- package/src/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.js +0 -12
- package/src/Editor/CustomExtensions/CodeBlock/ExtensionConfig.js +0 -10
- package/src/Editor/CustomExtensions/Embeds.js +0 -72
- package/src/Editor/CustomExtensions/FixedMenu/FontSizeOption.js +0 -32
- package/src/Editor/CustomExtensions/FixedMenu/TextColorOption.js +0 -29
- package/src/Editor/CustomExtensions/FixedMenu/constants.js +0 -3
- package/src/Editor/CustomExtensions/FixedMenu/index.js +0 -186
- package/src/Editor/CustomExtensions/Image/ExtensionConfig.js +0 -47
- package/src/Editor/CustomExtensions/Image/Uploader.js +0 -41
- package/src/Editor/CustomExtensions/Mention/ExtensionConfig.js +0 -67
- package/src/Editor/CustomExtensions/Mention/MentionList.js +0 -96
- package/src/Editor/CustomExtensions/Mention/helpers.js +0 -23
- package/src/Editor/CustomExtensions/Placeholder/ExtensionConfig.js +0 -81
- package/src/Editor/CustomExtensions/Placeholder/helpers.js +0 -18
- package/src/Editor/CustomExtensions/SlashCommands/Commands.js +0 -20
- package/src/Editor/CustomExtensions/SlashCommands/CommandsList.js +0 -109
- package/src/Editor/CustomExtensions/SlashCommands/ExtensionConfig.js +0 -205
- package/src/Editor/CustomExtensions/Variable/ExtensionConfig.js +0 -208
- package/src/Editor/CustomExtensions/Variable/VariableList.js +0 -45
- package/src/Editor/CustomExtensions/Variable/VariableSuggestion.js +0 -20
- package/src/Editor/CustomExtensions/Variable/helpers.js +0 -31
- package/src/Editor/CustomExtensions/Variable/index.js +0 -35
- package/src/Editor/CustomExtensions/useCustomExtensions.js +0 -87
- package/src/Editor/index.js +0 -92
- package/src/Editor/sharedState.js +0 -8
- package/src/examples/constants.js +0 -95
- package/src/examples/index.js +0 -186
- package/src/hooks/useOutsideClick.js +0 -19
- package/src/index.js +0 -10
- package/src/index.scss +0 -41
- package/src/styles/abstracts/_mixins.scss +0 -20
- package/src/styles/abstracts/_neeto-ui-variables.scss +0 -36
- package/src/styles/abstracts/_variables.scss +0 -10
- package/src/styles/components/_avatar.scss +0 -105
- package/src/styles/components/_codeblock.scss +0 -16
- package/src/styles/components/_command-list.scss +0 -19
- package/src/styles/components/_dropdown.scss +0 -69
- package/src/styles/components/_editor-variables.scss +0 -12
- package/src/styles/components/_editor.scss +0 -98
- package/src/styles/components/_fixed-menu.scss +0 -13
- package/src/utils/common.js +0 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-editor",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
|
|
6
6
|
"keywords": [
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@bigbinary/neeto-icons": "^1.8.6",
|
|
16
|
-
"@risingstack/react-easy-state": "^6.3.0",
|
|
17
16
|
"@tailwindcss/typography": "^0.4.0",
|
|
17
|
+
"@tippyjs/react": "^4.2.6",
|
|
18
18
|
"@tiptap/extension-bubble-menu": "^2.0.0-beta.18",
|
|
19
19
|
"@tiptap/extension-code-block-lowlight": "^2.0.0-beta.24",
|
|
20
20
|
"@tiptap/extension-color": "^2.0.0-beta.3",
|
|
@@ -31,9 +31,10 @@
|
|
|
31
31
|
"@tiptap/react": "^2.0.0-beta.37",
|
|
32
32
|
"@tiptap/starter-kit": "^2.0.0-beta.57",
|
|
33
33
|
"@tiptap/suggestion": "^2.0.0-beta.55",
|
|
34
|
-
"@uppy/core": "^1.
|
|
35
|
-
"@uppy/react": "^1.
|
|
36
|
-
"@uppy/
|
|
34
|
+
"@uppy/core": "^2.1.2",
|
|
35
|
+
"@uppy/react": "^2.1.1",
|
|
36
|
+
"@uppy/url": "^2.0.4",
|
|
37
|
+
"@uppy/xhr-upload": "^2.0.5",
|
|
37
38
|
"classnames": "^2.3.1",
|
|
38
39
|
"lodash.isempty": "^4.4.0",
|
|
39
40
|
"lodash.isplainobject": "^4.0.6",
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
"react-icons": "^4.2.0",
|
|
44
45
|
"react-outside-click-handler": "^1.3.0",
|
|
45
46
|
"react-popper": "^2.2.5",
|
|
47
|
+
"react-router-dom": "^6.0.2",
|
|
46
48
|
"tippy.js": "^6.3.1"
|
|
47
49
|
},
|
|
48
50
|
"devDependencies": {
|
package/tailwind.config.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
module.exports = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
purge: [
|
|
3
|
+
"./lib/**/*.{js,jsx,ts,tsx}",
|
|
4
|
+
"./example/**/*.{js,jsx,ts,tsx}",
|
|
5
|
+
"./public/index.html",
|
|
6
|
+
],
|
|
7
|
+
darkMode: false, // or 'media' or 'class'
|
|
8
|
+
theme: {
|
|
9
|
+
extend: {},
|
|
10
|
+
},
|
|
11
|
+
variants: {
|
|
12
|
+
extend: {},
|
|
13
|
+
},
|
|
14
|
+
plugins: [require("@tailwindcss/typography")],
|
|
11
15
|
};
|
package/webpack.config.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
const PeerDepsExternalsPlugin = require("peer-deps-externals-webpack-plugin");
|
|
2
|
+
const path = require("path");
|
|
2
3
|
|
|
3
4
|
module.exports = {
|
|
4
|
-
entry: "./
|
|
5
|
+
entry: "./lib/index.js",
|
|
5
6
|
module: {
|
|
6
7
|
rules: [
|
|
7
8
|
{
|
|
@@ -40,4 +41,11 @@ module.exports = {
|
|
|
40
41
|
libraryTarget: "umd",
|
|
41
42
|
},
|
|
42
43
|
plugins: [new PeerDepsExternalsPlugin()],
|
|
44
|
+
resolve: {
|
|
45
|
+
alias: {
|
|
46
|
+
common: path.resolve(__dirname, "/lib/components/Common"),
|
|
47
|
+
hooks: path.resolve(__dirname, "/lib/hooks"),
|
|
48
|
+
constants: path.resolve(__dirname, "/lib/constants"),
|
|
49
|
+
},
|
|
50
|
+
},
|
|
43
51
|
};
|
package/webpack.dev.config.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
const HtmlWebPackPlugin = require("html-webpack-plugin");
|
|
2
|
+
const path = require("path");
|
|
2
3
|
|
|
3
4
|
module.exports = {
|
|
4
|
-
entry: "./
|
|
5
|
+
entry: "./example/index.js",
|
|
5
6
|
devtool:
|
|
6
7
|
process.env.NODE_ENV === "production"
|
|
7
8
|
? "source-map"
|
|
@@ -58,4 +59,11 @@ module.exports = {
|
|
|
58
59
|
filename: "./index.html",
|
|
59
60
|
}),
|
|
60
61
|
],
|
|
62
|
+
resolve: {
|
|
63
|
+
alias: {
|
|
64
|
+
common: path.resolve(__dirname, "/lib/components/Common"),
|
|
65
|
+
hooks: path.resolve(__dirname, "/lib/hooks"),
|
|
66
|
+
constants: path.resolve(__dirname, "/lib/constants"),
|
|
67
|
+
},
|
|
68
|
+
},
|
|
61
69
|
};
|
package/public/favicon.ico
DELETED
|
Binary file
|
package/public/index.html
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<link rel="icon" href="./favicon.ico" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="theme-color" content="#000000" />
|
|
8
|
-
<meta
|
|
9
|
-
name="description"
|
|
10
|
-
content="Web site created using create-react-app"
|
|
11
|
-
/>
|
|
12
|
-
<title>Neeto Editor</title>
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
16
|
-
<div id="root"></div>
|
|
17
|
-
<!--
|
|
18
|
-
This HTML file is a template.
|
|
19
|
-
If you open it directly in the browser, you will see an empty page.
|
|
20
|
-
|
|
21
|
-
You can add webfonts, meta tags, or analytics to this file.
|
|
22
|
-
The build step will place the bundled scripts into the <body> tag.
|
|
23
|
-
|
|
24
|
-
To begin the development, run `npm start` or `yarn start`.
|
|
25
|
-
To create a production bundle, use `npm run build` or `yarn build`.
|
|
26
|
-
-->
|
|
27
|
-
</body>
|
|
28
|
-
</html>
|
package/public/robots.txt
DELETED
package/src/App.js
DELETED
package/src/Common/Avatar.js
DELETED
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import PropTypes from "prop-types";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
|
|
5
|
-
const SIZE = {
|
|
6
|
-
small: 24,
|
|
7
|
-
medium: 32,
|
|
8
|
-
large: 40,
|
|
9
|
-
xlarge: 64,
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const STATUS = {
|
|
13
|
-
online: "online",
|
|
14
|
-
idle: "idle",
|
|
15
|
-
offline: "offline",
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const COLORS = [
|
|
19
|
-
"#E5E7EB",
|
|
20
|
-
"#FECACA",
|
|
21
|
-
"#FDE68A",
|
|
22
|
-
"#A7F3D0",
|
|
23
|
-
"#BFDBFE",
|
|
24
|
-
"#C7D2FE",
|
|
25
|
-
"#DDD6FE",
|
|
26
|
-
"#FBCFE8",
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
function Avatar({
|
|
30
|
-
size,
|
|
31
|
-
user,
|
|
32
|
-
isSquare,
|
|
33
|
-
status,
|
|
34
|
-
onClick,
|
|
35
|
-
className,
|
|
36
|
-
...otherProps
|
|
37
|
-
}) {
|
|
38
|
-
const [loaded, setLoaded] = useState(false);
|
|
39
|
-
|
|
40
|
-
const { name = "", imageUrl } = user;
|
|
41
|
-
|
|
42
|
-
const isMedium = size === "medium";
|
|
43
|
-
const isLarge = size === "large";
|
|
44
|
-
const isXLarge = size === "xlarge";
|
|
45
|
-
|
|
46
|
-
const getInitials = (fullName) => {
|
|
47
|
-
const allNames = fullName.trim().split(" ");
|
|
48
|
-
const initials = allNames.reduce((acc, curr, index) => {
|
|
49
|
-
if (index === 0 || index === allNames.length - 1) {
|
|
50
|
-
acc = `${acc}${curr.charAt(0).toUpperCase()}`;
|
|
51
|
-
}
|
|
52
|
-
return acc;
|
|
53
|
-
}, "");
|
|
54
|
-
return initials;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const avatarString = getInitials(name);
|
|
58
|
-
|
|
59
|
-
const getRandomBackgroundColor = () => {
|
|
60
|
-
const charCode =
|
|
61
|
-
(avatarString.charCodeAt(0) || 0) + (avatarString.charCodeAt(1) || 0);
|
|
62
|
-
const bgColor = COLORS[(charCode % 65) % COLORS.length] || COLORS[0];
|
|
63
|
-
return bgColor;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
const imageContainerStyle = {
|
|
67
|
-
height: SIZE[size],
|
|
68
|
-
width: SIZE[size],
|
|
69
|
-
backgroundColor: getRandomBackgroundColor(),
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
const imageClasses = classNames("neeto-ui-avatar", {
|
|
73
|
-
"neeto-ui-avatar--medium": isMedium,
|
|
74
|
-
"neeto-ui-avatar--large": isLarge,
|
|
75
|
-
"neeto-ui-avatar--xlarge": isXLarge,
|
|
76
|
-
"neeto-ui-avatar--round": !isSquare,
|
|
77
|
-
hidden: !loaded,
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
const placeholderClasses = classNames("neeto-ui-avatar__text", {
|
|
81
|
-
"neeto-ui-avatar__text-medium": isMedium,
|
|
82
|
-
"neeto-ui-avatar__text-large": isLarge,
|
|
83
|
-
"neeto-ui-avatar__text-xlarge": isXLarge,
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
// TODO: Remove 'v2' prefix.
|
|
87
|
-
const statusClasses = classNames("neeto-ui-avatar__status", `${status}`, {
|
|
88
|
-
"neeto-ui-avatar__status-medium": isMedium,
|
|
89
|
-
"neeto-ui-avatar__status-large": isLarge,
|
|
90
|
-
"neeto-ui-avatar__status-xlarge": isXLarge,
|
|
91
|
-
"neeto-ui-avatar__status-square": isSquare,
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
const Indicator = () =>
|
|
95
|
-
status === undefined || status === null ? (
|
|
96
|
-
React.Fragment
|
|
97
|
-
) : (
|
|
98
|
-
<span className={statusClasses} />
|
|
99
|
-
);
|
|
100
|
-
|
|
101
|
-
const ImagePlaceholder = () => (
|
|
102
|
-
<span className={placeholderClasses}>{avatarString}</span>
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
const shouldDisplayInitials = avatarString && !imageUrl && !loaded;
|
|
106
|
-
|
|
107
|
-
return (
|
|
108
|
-
<div
|
|
109
|
-
onClick={onClick}
|
|
110
|
-
style={imageContainerStyle}
|
|
111
|
-
className={classNames(
|
|
112
|
-
"neeto-ui-avatar--container",
|
|
113
|
-
{
|
|
114
|
-
"neeto-ui-avatar--container-round": !isSquare,
|
|
115
|
-
},
|
|
116
|
-
className
|
|
117
|
-
)}
|
|
118
|
-
{...otherProps}
|
|
119
|
-
>
|
|
120
|
-
<Indicator />
|
|
121
|
-
{shouldDisplayInitials ? (
|
|
122
|
-
<ImagePlaceholder />
|
|
123
|
-
) : (
|
|
124
|
-
<img
|
|
125
|
-
className={imageClasses}
|
|
126
|
-
onLoad={() => setLoaded(true)}
|
|
127
|
-
onError={() => setLoaded(false)}
|
|
128
|
-
src={imageUrl}
|
|
129
|
-
alt={`avatar-${avatarString}`}
|
|
130
|
-
/>
|
|
131
|
-
)}
|
|
132
|
-
</div>
|
|
133
|
-
);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
Avatar.defaultProps = {
|
|
137
|
-
size: "medium",
|
|
138
|
-
user: {
|
|
139
|
-
imageUrl: "",
|
|
140
|
-
name: "",
|
|
141
|
-
},
|
|
142
|
-
isSquare: false,
|
|
143
|
-
onClick: () => {},
|
|
144
|
-
status: null,
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
Avatar.propTypes = {
|
|
148
|
-
/**
|
|
149
|
-
* Specify the dimension for avatar component.
|
|
150
|
-
*/
|
|
151
|
-
size: PropTypes.oneOf(Object.keys(SIZE)),
|
|
152
|
-
user: PropTypes.shape({
|
|
153
|
-
imageUrl: PropTypes.string,
|
|
154
|
-
name: PropTypes.string,
|
|
155
|
-
}),
|
|
156
|
-
isSquare: PropTypes.bool,
|
|
157
|
-
onClick: PropTypes.func,
|
|
158
|
-
/**
|
|
159
|
-
* Specify the status of the user if needed in avatar component.
|
|
160
|
-
*/
|
|
161
|
-
status: PropTypes.oneOf(Object.keys(STATUS)),
|
|
162
|
-
/**
|
|
163
|
-
* Specify custom className to be applied on the Avatar Container
|
|
164
|
-
*/
|
|
165
|
-
className: PropTypes.string,
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export default Avatar;
|
package/src/Common/CodeBlock.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import classNames from "classnames";
|
|
3
|
-
|
|
4
|
-
const Description = ({ children, className }) => {
|
|
5
|
-
return (
|
|
6
|
-
<p className={classNames("font-serif", { [className]: className })}>
|
|
7
|
-
{children}
|
|
8
|
-
</p>
|
|
9
|
-
);
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export default Description;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
2
|
-
import classnames from "classnames";
|
|
3
|
-
import { usePopper } from "react-popper";
|
|
4
|
-
import { Down } from "@bigbinary/neeto-icons";
|
|
5
|
-
import { useHotkeys } from "react-hotkeys-hook";
|
|
6
|
-
import OutsideClickHandler from "react-outside-click-handler";
|
|
7
|
-
|
|
8
|
-
import { hyphenize } from "../../utils/common";
|
|
9
|
-
|
|
10
|
-
const noop = () => {};
|
|
11
|
-
|
|
12
|
-
const Dropdown = ({
|
|
13
|
-
icon,
|
|
14
|
-
label,
|
|
15
|
-
isOpen,
|
|
16
|
-
onClose = noop,
|
|
17
|
-
ulProps,
|
|
18
|
-
position,
|
|
19
|
-
children,
|
|
20
|
-
autoWidth,
|
|
21
|
-
className,
|
|
22
|
-
buttonStyle = "primary",
|
|
23
|
-
buttonProps,
|
|
24
|
-
customTarget,
|
|
25
|
-
disabled = false,
|
|
26
|
-
closeOnEsc = true,
|
|
27
|
-
closeOnSelect = true,
|
|
28
|
-
closeOnOutsideClick = true,
|
|
29
|
-
dropdownModifiers = [],
|
|
30
|
-
...otherProps
|
|
31
|
-
}) => {
|
|
32
|
-
const Target = customTarget;
|
|
33
|
-
const isControlled = !(isOpen === undefined || isOpen === null);
|
|
34
|
-
|
|
35
|
-
const [visible, setVisibility] = useState(false);
|
|
36
|
-
const [reference, setReference] = useState(null);
|
|
37
|
-
const [popper, setPopper] = useState(null);
|
|
38
|
-
|
|
39
|
-
const { styles, attributes } = usePopper(reference, popper, {
|
|
40
|
-
placement: position || "bottom-end",
|
|
41
|
-
modifiers: dropdownModifiers,
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
const onPopupClose = () => {
|
|
45
|
-
if (!isControlled) setVisibility(false);
|
|
46
|
-
onClose();
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const handlePopperClick = () => {
|
|
50
|
-
closeOnSelect && onPopupClose();
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const handleButtonClick = () => {
|
|
54
|
-
setVisibility(!visible);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
closeOnEsc && useHotkeys("esc", onPopupClose);
|
|
58
|
-
|
|
59
|
-
if (!isControlled) {
|
|
60
|
-
buttonProps = {
|
|
61
|
-
...buttonProps,
|
|
62
|
-
onClick: () => {
|
|
63
|
-
handleButtonClick();
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
isControlled && setVisibility(isOpen);
|
|
70
|
-
}, [isOpen]);
|
|
71
|
-
|
|
72
|
-
return (
|
|
73
|
-
<OutsideClickHandler
|
|
74
|
-
useCapture={true}
|
|
75
|
-
onOutsideClick={() => {
|
|
76
|
-
closeOnOutsideClick && onPopupClose();
|
|
77
|
-
}}
|
|
78
|
-
>
|
|
79
|
-
<div
|
|
80
|
-
className={classnames("neeto-ui-dropdown__wrapper", {
|
|
81
|
-
"neeto-ui-dropdown__wrapper--auto-width": autoWidth,
|
|
82
|
-
[className]: className,
|
|
83
|
-
})}
|
|
84
|
-
{...otherProps}
|
|
85
|
-
>
|
|
86
|
-
{customTarget ? (
|
|
87
|
-
<div ref={setReference} onClick={handleButtonClick}>
|
|
88
|
-
<Target />
|
|
89
|
-
</div>
|
|
90
|
-
) : (
|
|
91
|
-
<div>
|
|
92
|
-
{label}
|
|
93
|
-
<Down />
|
|
94
|
-
</div>
|
|
95
|
-
)}
|
|
96
|
-
{visible && (
|
|
97
|
-
<ul
|
|
98
|
-
className="neeto-ui-dropdown__popup"
|
|
99
|
-
ref={setPopper}
|
|
100
|
-
onClick={handlePopperClick}
|
|
101
|
-
data-cy={`${hyphenize(label)}-dropdown-container`}
|
|
102
|
-
{...ulProps}
|
|
103
|
-
style={{
|
|
104
|
-
display: "block",
|
|
105
|
-
...styles.offset,
|
|
106
|
-
...styles.popper,
|
|
107
|
-
}}
|
|
108
|
-
{...attributes.popper}
|
|
109
|
-
>
|
|
110
|
-
{children}
|
|
111
|
-
</ul>
|
|
112
|
-
)}
|
|
113
|
-
</div>
|
|
114
|
-
</OutsideClickHandler>
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
export default Dropdown;
|
package/src/Common/Heading.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import classNames from "classnames";
|
|
3
|
-
|
|
4
|
-
const Heading = ({ children, type = "main" }) => {
|
|
5
|
-
const className = classNames({
|
|
6
|
-
"mb-3 mt-14 text-3xl font-extrabold": type === "main",
|
|
7
|
-
"mb-1 mt-8 text-xl font-bold": type === "sub",
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
return <h1 className={className}>{children}</h1>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default Heading;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/** Icons generated by create-react-icons. Don't edit this file directly. **/
|
|
2
|
-
import React from "react";
|
|
3
|
-
import PropTypes from "prop-types";
|
|
4
|
-
|
|
5
|
-
export function HashtagFilled(props) {
|
|
6
|
-
const { size, color, bgColor, ...other } = props;
|
|
7
|
-
return (
|
|
8
|
-
<svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
|
|
9
|
-
<path
|
|
10
|
-
d="M21 7V17C21 19.209 19.209 21 17 21H7C4.791 21 3 19.209 3 17V7C3 4.791 4.791 3 7 3H17C19.209 3 21 4.791 21 7Z"
|
|
11
|
-
fill={bgColor}
|
|
12
|
-
stroke={bgColor}
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
strokeLinecap="round"
|
|
15
|
-
strokeLinejoin="round"
|
|
16
|
-
/>
|
|
17
|
-
<path
|
|
18
|
-
d="M10 8V16"
|
|
19
|
-
stroke={color}
|
|
20
|
-
strokeWidth="1.389"
|
|
21
|
-
strokeLinecap="round"
|
|
22
|
-
strokeLinejoin="round"
|
|
23
|
-
/>
|
|
24
|
-
<path
|
|
25
|
-
d="M14 8V16"
|
|
26
|
-
stroke={color}
|
|
27
|
-
strokeWidth="1.389"
|
|
28
|
-
strokeLinecap="round"
|
|
29
|
-
strokeLinejoin="round"
|
|
30
|
-
/>
|
|
31
|
-
<path
|
|
32
|
-
d="M8 14H16"
|
|
33
|
-
stroke={color}
|
|
34
|
-
strokeWidth="1.389"
|
|
35
|
-
strokeLinecap="round"
|
|
36
|
-
strokeLinejoin="round"
|
|
37
|
-
/>
|
|
38
|
-
<path
|
|
39
|
-
d="M8 10H16"
|
|
40
|
-
stroke={color}
|
|
41
|
-
strokeWidth="1.389"
|
|
42
|
-
strokeLinecap="round"
|
|
43
|
-
strokeLinejoin="round"
|
|
44
|
-
/>
|
|
45
|
-
</svg>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
HashtagFilled.defaultProps = {
|
|
50
|
-
color: "white",
|
|
51
|
-
bgColor: "#68737D",
|
|
52
|
-
size: 24,
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
HashtagFilled.propTypes = {
|
|
56
|
-
color: PropTypes.string,
|
|
57
|
-
bgColor: PropTypes.string,
|
|
58
|
-
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
59
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/** Icons generated by create-react-icons. Don't edit this file directly. **/
|
|
2
|
-
import React from "react";
|
|
3
|
-
import PropTypes from "prop-types";
|
|
4
|
-
|
|
5
|
-
export function TextColor(props) {
|
|
6
|
-
const { size, color, underlineColor, ...other } = props;
|
|
7
|
-
return (
|
|
8
|
-
<svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
|
|
9
|
-
<path
|
|
10
|
-
d="M21 20H3"
|
|
11
|
-
stroke={underlineColor || color}
|
|
12
|
-
strokeWidth="1.5"
|
|
13
|
-
strokeLinecap="round"
|
|
14
|
-
strokeLinejoin="round"
|
|
15
|
-
/>
|
|
16
|
-
<path
|
|
17
|
-
d="M17.3125 15L12.1562 4L7 15M8.03125 12.8H16.2812"
|
|
18
|
-
stroke={color}
|
|
19
|
-
strokeWidth="1.5"
|
|
20
|
-
strokeLinecap="round"
|
|
21
|
-
strokeLinejoin="round"
|
|
22
|
-
/>
|
|
23
|
-
</svg>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
TextColor.defaultProps = {
|
|
28
|
-
color: "currentColor",
|
|
29
|
-
size: 24,
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
TextColor.propTypes = {
|
|
33
|
-
color: PropTypes.string,
|
|
34
|
-
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
35
|
-
};
|
package/src/Common/ListItems.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
const ListItems = ({ items, ordered }) => {
|
|
4
|
-
const itemElements = items.map((item, index) => (
|
|
5
|
-
<li key={item.key || index}>{item}</li>
|
|
6
|
-
));
|
|
7
|
-
|
|
8
|
-
const className = "font-serif text-lg list-inside";
|
|
9
|
-
|
|
10
|
-
return ordered ? (
|
|
11
|
-
<ol className={`${className} list-decimal`}>{itemElements}</ol>
|
|
12
|
-
) : (
|
|
13
|
-
<ul className={`${className} list-disc`}>{itemElements}</ul>
|
|
14
|
-
);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default ListItems;
|