Move components from root to elements (#332)

* Move components from root to elements

* Revert change

* Fix import

* changelog

changelog.d/332.misc

@@ -0,0 +1 @@
+Restructure widget web components.

web/App.tsx

@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
 import WA from 'matrix-widget-api';
 import BridgeAPI, { BridgeAPIError } from './BridgeAPI';
 import { BridgeRoomState } from '../src/Widgets/BridgeWidgetInterface';
-import ErrorPane from './components/ErrorPane';
+import ErrorPane from './components/elements';
 import AdminSettings from './components/AdminSettings';
 import RoomConfigView from './components/RoomConfigView';
 

web/components/configs/GeneralConfig.tsx

@@ -1,5 +1,5 @@
 import { h } from "preact";
-import { Button } from "../Button";
+import { Button } from "../elements";
 
 export default function GeneralConfig() {
     return <div>

web/components/elements/Button.tsx

@@ -1,7 +1,7 @@
-import { h } from "preact";
+import { FunctionComponent, h } from "preact";
 import style from "./Button.module.scss";
 
-export function Button(props: { [key: string]: unknown, intent?: string}) {
+export const Button: FunctionComponent = (props: { [key: string]: unknown, intent?: string}) => {
     let className = style.button;
     if (props.intent === "remove") {
         className += ` ${  style.remove}`;

web/components/elements/ButtonSet.tsx

@@ -1,9 +1,8 @@
 import { FunctionComponent, h } from "preact";
 import style from "./ButtonSet.module.scss";
 
-const ButtonSet: FunctionComponent = (props) => {
+export const ButtonSet: FunctionComponent = (props) => {
     return <div className={style.buttonSet}>
         {props.children}
     </div>;
-}
-export default ButtonSet;
+}

web/components/elements/ErrorPane.tsx

@@ -1,11 +1,9 @@
 import { h, FunctionComponent } from "preact";
 import "./ErrorPane.css";
 
-const ErrorPane: FunctionComponent<{header?: string}> = ({ children, header }) => {
+export const ErrorPane: FunctionComponent<{header?: string}> = ({ children, header }) => {
     return <div class="card error error-pane">
         <h3>{ header || "Error occured during widget load" }</h3>
         <p>{children}</p>
     </div>;
-};
-
-export default ErrorPane;
+};

web/components/elements/InputField.tsx

@@ -7,11 +7,9 @@ interface Props {
     noPadding: boolean;
 }
 
-const InputField: FunctionComponent<Props> = ({ children, visible = true, label, noPadding }) => {
+export const InputField: FunctionComponent<Props> = ({ children, visible = true, label, noPadding }) => {
     return visible && <div className={style.inputField}>
         {label && <label className={noPadding ? style.nopad : ""}>{label}</label>}
         {children}
     </div>;
-};
-
-export default InputField;
+};

web/components/elements/index.ts

@@ -0,0 +1,5 @@
+export * from "./Button";
+export * from "./ButtonSet";
+export * from "./ErrorPane";
+export * from "./InputField";
+export * from "./ListItem";

web/components/roomConfig/GenericWebhookConfig.tsx

@@ -2,12 +2,10 @@ import { h, FunctionComponent, createRef } from "preact";
 import { useCallback, useState } from "preact/hooks"
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { Button } from "../Button";
 import BridgeAPI from "../../BridgeAPI";
 import { GenericHookConnectionState, GenericHookResponseItem } from "../../../src/Connections/GenericHook";
 import { ConnectionConfigurationProps, RoomConfig } from "./RoomConfig";
-import InputField from "../InputField";
-import ButtonSet from "../ButtonSet";
+import { InputField, ButtonSet, Button } from "../elements";
 
 const EXAMPLE_SCRIPT = `if (data.counter === undefined) {
     result = {

web/components/roomConfig/GitlabRepoConfig.tsx

@@ -3,10 +3,7 @@ import { useState, useCallback, useEffect, useMemo } from "preact/hooks";
 import BridgeAPI from "../../BridgeAPI";
 import { ConnectionConfigurationProps, RoomConfig } from "./RoomConfig";
 import { GitLabRepoConnectionState, GitLabRepoResponseItem, GitLabTargetFilter, GitLabRepoConnectionTarget, GitLabRepoConnectionProjectTarget, GitLabRepoConnectionInstanceTarget } from "../../../src/Connections/GitlabRepo";
-import InputField from "../InputField";
-import ButtonSet from "../ButtonSet";
-import { Button } from "../Button";
-import ErrorPane from "../ErrorPane";
+import { InputField, ButtonSet, Button, ErrorPane } from "../elements";
 
 const EventType = "uk.half-shot.matrix-hookshot.gitlab.repository";
 

web/components/roomConfig/RoomConfig.tsx

@@ -1,8 +1,7 @@
 import { h, FunctionComponent } from "preact";
 import { useCallback, useEffect, useReducer, useState } from "preact/hooks"
-import { ListItem } from "../ListItem";
 import BridgeAPI from "../../BridgeAPI";
-import ErrorPane from "../ErrorPane";
+import { ErrorPane, ListItem } from "../elements";
 import style from "./RoomConfig.module.scss";
 import { GetConnectionsResponseItem } from "../../../src/provisioning/api";