Merge pull request #535 from Sienci-Labs/MI-1532-widget-wrapper

Components: Widget Wrapper

src/app/declarations.d.ts

@@ -4,3 +4,5 @@ declare module 'gcode-parser';
 declare module 'memoize-one';
 declare module 'gamepad.js';
 declare module 'gcode-interpreter';
+declare module 'classnames';
+declare module '@tanstack/react-router';

src/app/src/components/Anchor/index.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import Anchor from '@trendmicro/react-anchor';
+
+export default Anchor;

src/app/src/components/Widget/Button.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import Anchor from '../Anchor';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const Button: React.FC<WidgetProps> = ({ className, inverted, disabled, ...props }) => {
+    return (
+        <Anchor
+            {...props}
+            className={classNames(
+                className,
+                "min-w-8 h-8 float-left relative text-sm font-[$font-family-arial] m-0 text-center first:pl-0",
+                {
+                    "disabled:text-yellow-300 disabled:cursor-not-allowed disabled:hover:bg-inherit": disabled,
+                    "text-white bg-gray-800 hover:bg-gray-900": inverted,
+                    "opacity-40": disabled && inverted,
+                }
+            )}
+        />
+    );
+}
+
+export default Button;

src/app/src/components/Widget/Content.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const Content: React.FC<WidgetProps> = ({ className, active, ...props }) => (
+    <div
+        {...props}
+        className={classNames(
+            className,
+            "flex items-stretch border-solid border-[1px] border-gray-300 relative rounded-lg " +
+            "p-4 h-full min-w-80 bg-gray-50 " +
+            "[@media(max-width: 639px),(max-device-width: 639px)]: p-2"
+        )}
+    />
+);
+
+export default Content;
+// export default forwardRef((props, ref) => <Content {...props} reference={ref} />);
+//h-[calc(100% - 2rem)]

src/app/src/components/Widget/Controls.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+import '../../index.css';
+
+const Controls: React.FC<WidgetProps> = ({ className, ...props }) => {
+    return (
+        <div
+            {...props}
+            className={classNames(
+                className,
+                "absolute top-0 right-0 cursor-auto w-auto bg-transparent" +
+                'widget-controls', 
+            )}
+        />
+    );
+};
+
+export default Controls;

src/app/src/components/Widget/Footer.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const Footer: React.FC<WidgetProps> = ({ className, ...props }) => (
+    <div
+        {...props}
+        className={classNames(
+            className,
+            "border-solid border-[1px] border-gray-400" +
+            "bg-white text-gray-900"
+        )}
+    />
+);
+
+export default Footer;

src/app/src/components/Widget/Header.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const Header: React.FC<WidgetProps> = ({ fixed, className, embedded = false, ...props }) => (
+    <div
+        {...props}
+        className={classNames(
+            className,
+            "bg-gray-200 relative border-gray-400 text-gray-900",
+            {
+                "cursor-default": fixed,
+                "hidden": embedded
+            }
+        )}
+    />
+);
+
+export default Header;

src/app/src/components/Widget/Title.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const Title: React.FC<WidgetProps> = ({ className, ...props }) => (
+    <div
+        {...props}
+        className={classNames(
+            className,
+            "text-lg h-8 font-bold inline-block align-middle " +
+            "mt-0 mb-0 px-3 py-0 text-blue-500 text-ellipsis " +
+            "overflow-hidden whitespace-nowrap w-full max-w-full"
+        )}
+    />
+);
+
+export default Title;

src/app/src/components/Widget/Widget.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import classNames from 'classnames';
+import { WidgetProps } from '../../definitions/interfaces/widget_wrapper';
+
+const WidgetComponent: React.FC<WidgetProps> = ({ className, ...props }) => {
+    return (
+        <div
+            {...props}
+            className={classNames(
+                className,
+                "h-full"
+            )}
+        />
+    );
+}
+
+export default WidgetComponent;

src/app/src/components/Widget/index.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2021 Sienci Labs Inc.
+ *
+ * This file is part of gSender.
+ *
+ * gSender is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, under version 3 of the License.
+ *
+ * gSender is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with gSender.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * Contact for information regarding this program and its license
+ * can be sent through [email protected] or mailed to the main office
+ * of Sienci Labs Inc. in Waterloo, Ontario, Canada.
+ *
+ */
+
+import WidgetComponent from './Widget';
+import Header from './Header';
+import Content from './Content';
+import Footer from './Footer';
+import Title from './Title';
+import Button from './Button';
+import Controls from './Controls';
+
+export const Widget = Object.assign(WidgetComponent, { Header, Content, Footer, Title, Button, Controls })

src/app/src/definitions/interfaces/widget_wrapper.ts

@@ -0,0 +1,16 @@
+import { ForwardedRef } from "react"
+
+export interface WidgetProps {
+    [key: string]: any,
+    className?: string,
+    active?: boolean,
+    inverted?: boolean,
+    disabled?: boolean,
+    btnSize?: 'lg' | 'md' | 'sm' | 'xs',
+    btnStyle?: 'default' | 'primary' | 'emphasis' | 'flat' | 'link',
+    toggle?: React.ReactElement,
+    pullRight?: boolean,
+    noCaret?: boolean,
+    reference?: ForwardedRef<unknown>,
+    children?: React.ReactElement | React.ReactElement[],
+}

src/app/src/features/FileControl/index.tsx

@@ -1,5 +1,16 @@
+import {Widget} from "../../components/Widget";
+
 export function FileControl() {
     return (
-        <div>File Control Feature</div>
+        <Widget>
+            <Widget.Content
+                className=""
+                style={{ width: '100%' }}
+            >
+                    <div>
+                        File Control Feature
+                    </div>
+            </Widget.Content>
+        </Widget>
     )
 }