see changelog

ui/CHANGELOG.md

@@ -1,3 +1,9 @@
+### [7.1.1] - 2023-10-31
+
+-   Organise components exports and imports
+-   Rename `tests` to `__tests__`
+-   Organise files
+
 ### [7.1.0] - 2023-10-31
 
 -   useCombinedKeyPress hook

ui/src/App.tsx

@@ -1,11 +1,10 @@
 import { ConfigProvider, Layout } from "antd";
 import { ErrorBoundary } from "react-error-boundary";
 import RoutesWithPageTitle from "routes";
-import Sidebar from "components/Layouts/Sidebar";
+import { Sidebar, FloatingBar } from "components/Layouts";
 import CookieConsent from "pages/Footer/CookieConsent";
 import useTheme from "hooks/useTheme";
-import PopupSearch from "components/General/PopupSearch";
-import FloatingBar from "components/Layouts/FloatingBar";
+import { PopupSearch } from "components/General";
 
 const { Content } = Layout;
 

ui/src/components/General/ClipboardButton/index.tsx

@@ -1,6 +1,5 @@
-import { ResponsiveButton } from "components/General/FormComponents";
+import { Icon, ResponsiveButton } from "components/General";
 import style from "./ClipboardButton.module.scss";
-import Icon from "components/General/Icon";
 
 interface ClipboardButtonProps {
 	copyToClipboard: (text: string) => void;

ui/src/components/General/CodeEditor/components/ValidateStatus.tsx

@@ -1,8 +1,8 @@
 import { Space, theme } from "antd";
 import React from "react";
 import style from "components/General/CodeEditor/CodeEditor.module.scss";
-import Icon from "components/General/Icon";
 import { ValidateStatusProps } from "./utils/types";
+import { Icon } from "components/General";
 
 const ValidateStatus: React.FC<ValidateStatusProps> = ({ status }) => {
 	if (status.length === 0) {

ui/src/components/General/CodeHighlightWithCopy/index.tsx

@@ -1,6 +1,6 @@
-import Clipboard from "components/RenderProps/Clipboard";
+import { Clipboard } from "components/RenderProps";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import ClipboardButton from "components/General/ClipboardButton";
+import { ClipboardButton } from "components/General";
 import {
 	obsidian,
 	stackoverflowLight,

ui/src/components/General/ColorPickerWithInput/index.tsx

@@ -1,5 +1,5 @@
 import { Card } from "antd";
-import { ResponsiveInputWithLabel } from "components/General/FormComponents";
+import { ResponsiveInputWithLabel } from "components/General";
 import { ColorPicker as CP } from "@mantine/core";
 import style from "./ColorPickerWithInput.module.scss";
 

ui/src/components/General/Drawer/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Drawer as AntDDrawer, Button, Space } from "antd";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { ResponsiveButton } from "components/General/FormComponents";
+import { ResponsiveButton } from "components/General";
 import { BeamDetail } from "data/beamData";
 
 interface DrawerProps {

ui/src/components/General/DropdownDownloadButton/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { ResponsiveDropdownButton } from "components/General/FormComponents";
-import Icon from "components/General/Icon";
+import { Icon, ResponsiveDropdownButton } from "components/General";
 import { MenuProps } from "antd";
 
 const IMAGE_TYPE = {

ui/src/components/General/FormComponents/ResponsiveButton.tsx

@@ -0,0 +1,12 @@
+// import withSize from "components/Hoc/withSize";
+import React from "react";
+import { withSize } from "components/Hoc";
+import { Button as AntButton } from "antd";
+import { ButtonProps } from "antd/es/button";
+
+const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
+	return <AntButton {...props}>{children}</AntButton>;
+};
+
+const ResponsiveButton = withSize(Button);
+export default ResponsiveButton;

ui/src/components/General/FormComponents/ResponsiveDropdownButton.tsx

@@ -0,0 +1,14 @@
+import { Dropdown } from "antd";
+import React from "react";
+import { withSize } from "components/Hoc";
+import { DropdownButtonProps } from "antd/es/dropdown";
+
+const DropdownButton: React.FC<DropdownButtonProps> = ({
+	children,
+	...props
+}) => {
+	return <Dropdown.Button {...props}>{children}</Dropdown.Button>;
+};
+
+const ResponsiveDropdownButton = withSize(DropdownButton);
+export default ResponsiveDropdownButton;

ui/src/components/General/FormComponents/ResponsiveInputWithLabel.tsx

@@ -0,0 +1,40 @@
+import { Input, InputNumber } from "antd";
+import React, { ReactNode } from "react";
+import { withLabelSize } from "components/Hoc";
+
+type NumberType = {
+	type: "number";
+	value: number;
+	onChange: (value: number | null) => void;
+};
+
+type TextType = {
+	type: "text";
+	value: string;
+	onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+type InputComponentProps = {
+	label: string;
+	precision?: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	tooltip?: string;
+	placeholder?: string;
+	addonBefore?: ReactNode;
+	addonAfter?: ReactNode;
+	style?: React.CSSProperties;
+} & (NumberType | TextType);
+
+const ResponsiveInput: React.FC<InputComponentProps> = (props) => {
+	return props.type === "number" ? (
+		<InputNumber style={{ width: "100%" }} {...props} />
+	) : (
+		<Input allowClear style={{ width: "100%" }} {...props} />
+	);
+};
+
+const ResponsiveInputWithLabel = withLabelSize(ResponsiveInput);
+
+export default ResponsiveInputWithLabel;

ui/src/components/General/FormComponents/ResponsiveSegementWithLabel.tsx

@@ -0,0 +1,24 @@
+import { Segmented } from "antd";
+import React from "react";
+import { withLabelSize } from "components/Hoc";
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface SegmentComponentProps {
+	label?: string;
+	value: string;
+	onChange: (value: string | number) => void;
+	options: Option[];
+}
+
+const ResponsiveSegment: React.FC<SegmentComponentProps> = (props) => {
+	return <Segmented {...props} />;
+};
+
+const ResponsiveSegementWithLabel = withLabelSize(ResponsiveSegment);
+
+export default ResponsiveSegementWithLabel;
+ResponsiveSegementWithLabel;

ui/src/components/General/FormComponents/ResponsiveSelectWithLabel.tsx

@@ -0,0 +1,23 @@
+import { Select } from "antd";
+import React from "react";
+import { withLabelSize } from "components/Hoc";
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface SelectComponentProps {
+	label?: string;
+	value?: string;
+	defaultActiveFirstOption?: boolean;
+	onSelect?: (value: string, option: Option) => void;
+	options: Option[];
+}
+
+const ResponsiveSelect: React.FC<SelectComponentProps> = (props) => {
+	return <Select {...props} />;
+};
+
+const ResponsiveSelectWithLabel = withLabelSize(ResponsiveSelect);
+export default ResponsiveSelectWithLabel;

ui/src/components/General/HelpIcon/index.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Button, Modal } from "antd";
-import Icon from "components/General/Icon";
 import Help from "./components/Help";
 import { HelpEntry } from "data/helpData";
+import { Icon } from "components/General";
 
 interface HelpIconProps {
 	helpObject: HelpEntry;

ui/src/components/General/ListItems/News/News.tsx

@@ -1,5 +1,5 @@
 import { Card, Image, Skeleton, Space, Typography } from "antd";
-import { ListItemProps } from "components/RenderProps/List";
+import { ListItemProps } from "components/RenderProps";
 const { Title } = Typography;
 
 export interface NewsType {

ui/src/components/General/ListItems/Resource/Resource.tsx

@@ -1,8 +1,8 @@
 import { Avatar, Card, Skeleton, Space, Tag, Typography } from "antd";
 import style from "./Resource.module.scss";
-import Clipboard from "components/RenderProps/Clipboard";
-import ClipboardButton from "components/General/ClipboardButton";
-import { ListItemProps } from "components/RenderProps/List";
+import { Clipboard } from "components/RenderProps";
+import { ClipboardButton } from "components/General";
+import { ListItemProps } from "components/RenderProps";
 
 const { Title } = Typography;
 

ui/src/components/General/Notification/components/NotificationList.tsx

@@ -1,9 +1,8 @@
 import style from "components/General/Notification/Notification.module.scss";
 import { Button, Skeleton } from "antd";
 import { Typography, Tag, Dropdown } from "antd";
-import Icon from "components/General/Icon";
+import { Icon, Markdown } from "components/General";
 import { classNames } from "utils/helper-functions/string";
-import { Markdown } from "components/General/Notification/types";
 const { Title } = Typography;
 
 interface NotificationListProps {

ui/src/components/General/PopupSearch/index.tsx

@@ -3,7 +3,7 @@ import { MENU_ITEMS } from "data/menuData";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import style from "./PopSearch.module.scss";
-import Icon, { IconName } from "components/General/Icon";
+import { Icon, IconName } from "components/General";
 import useCombinedKeyPress from "hooks/useCombinedKeyPress";
 import { classNames } from "utils/helper-functions/string";
 import useMode from "hooks/useMode";

ui/src/components/General/Search/helper.ts

@@ -1,5 +1,5 @@
 import { QUERY_KEY_NEWS } from "pages/Newsfeed/utils/constants";
-import { ResourceType } from "../ListItems/Resource/Resource";
+import { ResourceType } from "components/General";
 
 const getCategories = <T extends ResourceType>(
 	items: T[],

ui/src/components/General/Warning/index.tsx

@@ -1,5 +1,5 @@
-import Icon from "components/General/Icon";
 import style from "./Warning.module.scss";
+import { Icon } from "components/General";
 
 interface WarningProps {
 	text?: string;

ui/src/components/General/index.ts

@@ -0,0 +1,33 @@
+export { default as ClipboardButton } from "./ClipboardButton";
+export { default as CodeEditor } from "./CodeEditor";
+export { default as CodeHighlightWithCopy } from "./CodeHighlightWithCopy";
+export { default as ColorPickerWithInput } from "./ColorPickerWithInput";
+export { default as Drawer } from "./Drawer";
+export { default as DropdownDownloadButton } from "./DropdownDownloadButton";
+export { default as ErrorComponent } from "./ErrorComponent";
+export { default as FallbackComponent } from "./FallbackComponent";
+export { default as ResponsiveSelectWithLabel } from "./FormComponents/ResponsiveSelectWithLabel";
+export { default as ResponsiveSegementWithLabel } from "./FormComponents/ResponsiveSegementWithLabel";
+export { default as ResponsiveInputWithLabel } from "./FormComponents/ResponsiveInputWithLabel";
+export { default as ResponsiveButton } from "./FormComponents/ResponsiveButton";
+export { default as ResponsiveDropdownButton } from "./FormComponents/ResponsiveDropdownButton";
+export { default as HelpIcon } from "./HelpIcon";
+export { default as Icon } from "./Icon";
+export { default as News } from "./ListItems/News/News";
+export { default as Resource } from "./ListItems/Resource/Resource";
+export { default as Notification } from "./Notification";
+export { default as PopupSearch } from "./PopupSearch";
+export { default as Search } from "./Search";
+export { default as Spin } from "./Spin";
+export { default as Text } from "./Text";
+export { default as Warning } from "./Warning";
+
+export type { ResourceType } from "./ListItems/Resource/Resource";
+export type { NewsType } from "./ListItems/News/News";
+export type { IconName } from "./Icon";
+export type { Markdown } from "./Notification/types";
+
+export { getCategories } from "./Search/helper";
+export { parsedMarkdown } from "./Notification/helper";
+
+export { DEFAULT_RECORD } from "./Notification/constants";