Text widget editor

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

database.rules.json

@@ -1,6 +1,6 @@
 {
   "rules": {
     ".read": true,
-    ".write": false,
+    ".write": "auth != null"
   }
-}
+}

package.json

@@ -9,15 +9,19 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "serve": "vite preview",
-    "firebase:emulator:start": "firebase emulators:start"
+    "serve": "vite preview"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@react-firebase/database": "^0.3.11",
     "firebase": "^8.6.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@firebase/app-types": "^0.6.3",
+    "@firebase/auth-types": "^0.10.3",
     "@firebase/database-types": "^0.7.2",
     "@types/node": "^14.17.1",
     "@types/react": "^17.0.2",
@@ -27,5 +31,8 @@
     "typescript": "^4.3.2",
     "vite": "^2.4.4",
     "vite-tsconfig-paths": "^3.3.13"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/App.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import '@/global.css';
+import { Preview } from '@/components/Preview'
+import { Index as Admin } from '@/components/admin'
+import { FirebaseDatabaseProvider, FirebaseDatabaseNode } from '@react-firebase/database';
+import firebase from '@/lib/firebase';
+
+const App = () => {
+  const params = new URLSearchParams(location.search);
+
+  const mode = params.get('mode') || 'preview';
+
+  const Component = mode === 'admin' ? Admin : Preview;
+
+  return (
+    <FirebaseDatabaseProvider firebase={firebase}>
+      <Component />
+    </FirebaseDatabaseProvider>
+  );
+};
+
+export { App };

src/components/Preview.tsx

@@ -0,0 +1,36 @@
+import React, { VFC } from 'react';
+import { FirebaseDatabaseNode } from '@react-firebase/database';
+
+import { TextWidget } from '@/components/TextWidget';
+import { TimeWidget } from '@/components/TimeWidget';
+
+const Widgets = {
+  'text': TextWidget,
+  'time': TimeWidget,
+};
+
+const Preview: VFC = () => {
+  return (
+    <div>
+      <FirebaseDatabaseNode path="/widgets">
+        {d => {
+          const widgets = d.value || {};
+          console.log(Object.values(widgets));
+          return (
+            <>
+              {
+                Object.keys(widgets).map((id) => {
+                  const widget: any = widgets[id];
+                  const Widget = Widgets[widget.name];
+                  return <Widget key={id} {...widget.props} />
+                })
+              }
+            </>
+          );
+        }}
+      </FirebaseDatabaseNode>
+    </div>
+  );
+};
+
+export { Preview };

src/components/TextWidget/editor.tsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { TextField, Button, Typography } from '@material-ui/core';
+import { FirebaseDatabaseMutation } from '@react-firebase/database'
+import type { TextWidgetProps } from '@/components/TextWidget/types';
+
+type Props = {
+  id: string;
+  props: TextWidgetProps;
+};
+
+const FormGroup = styled.div`
+  display: flex;
+  margin-bottom: 1rem;
+  width: 480px;
+  & > label {
+    width: 20%;
+  }
+  & > input {
+    flex-grow: 1;
+  }
+`;
+
+class TextWidgetEditor extends Component<Props, TextWidgetProps> {
+  constructor(props) {
+    super(props);
+    this.state = this.props.props;
+  }
+
+  render() {
+    return (
+      <div>
+        <Typography variant="h6">
+          TextWidget : {this.props.id}
+        </Typography>
+        <FormGroup>
+          <TextField
+            type="text"
+            label="text"
+            fullWidth
+            multiline={true}
+            variant="outlined"
+            onChange={(e) => {
+              this.setState({ ...this.state, text: e.target.value });
+            }}
+            value={this.state.text}
+          />
+        </FormGroup>
+
+        <FirebaseDatabaseMutation
+          type="set"
+          path={`/widgets/${this.props.id}/props`}
+        >
+          {({ runMutation }) => {
+            return (
+              <FormGroup>
+                <Button
+                  type="button"
+                  color="primary"
+                  variant="contained"
+                  onClick={async (e: any) => {
+                    e.preventDefault();
+                    await runMutation(this.state);
+                  }}
+                >
+                  Save
+                </Button>
+              </FormGroup>
+            );
+          }}
+        </FirebaseDatabaseMutation>
+      </div>
+    );
+  }
+}
+
+export { TextWidgetEditor };

src/components/TextWidget/index.tsx

@@ -1,86 +1,2 @@
-import React, { VFC, CSSProperties } from 'react';
-
-type Position = {
-  top?: number;    // px
-  right?: number;  // px
-  bottom?: number; // px
-  left?: number;   // px
-}
-
-type TextWidgetProps = {
-  text: string;
-  textColor?: string;
-  backgroundColor?: string;
-  edgeWeight?: number; // px
-  edgeColor?: string;
-  width?: number;      // px
-  height?: number;     // px
-  padding?: string;    // px
-  position?: Position;
-};
-
-const calcTextShadow = (weight, color) => {
-  const edge = [
-    `${weight}px ${weight}px 0 ${color}`,
-    `-${weight}px -${weight}px 0 ${color}`,
-    `-${weight}px ${weight}px 0 ${color}`,
-    `${weight}px -${weight}px 0 ${color}`,
-    `0px ${weight}px 0 ${color}`,
-    `0-${weight}px 0 ${color}`,
-    `-${weight}px 0 0 ${color}`,
-    `${weight}px 0 0 ${color}`
-  ].join(', ');
-  return edge;
-};
-
-const defaultStyle: CSSProperties = {
-  boxSizing: 'border-box',
-  whiteSpace: 'pre-wrap',
-  overflow: 'hidden',
-  color: 'white',
-  backgroundColor: 'rgba(0, 0, 0 0.1)',
-  textShadow: calcTextShadow(1, 'black'),
-  width: 320,
-  height: 540,
-  padding: '4px 8px',
-  position: 'absolute',
-};
-
-const TextWidget: VFC<TextWidgetProps> = ({
-  text,
-  textColor,
-  backgroundColor,
-  edgeWeight,
-  edgeColor,
-  width,
-  height,
-  padding,
-  position,
-}) => {
-  const edge = calcTextShadow(edgeWeight || 1, edgeColor || 'black');
-
-  const style: CSSProperties = {
-    ...defaultStyle,
-    width: `${width || 320}px`,
-    height: `${height | 540}px`,
-    padding: padding || '4px 8px',
-    color: textColor || 'white',
-    textShadow: edge,
-    backgroundColor: backgroundColor || 'rgba(0, 0, 0, 0.1)',
-  };
-
-  if (position?.top || position?.right || position?.bottom || position?.left) {
-    if (position?.top) style.top = position.top;
-    if (position?.right) style.right = position.right;
-    if (position?.bottom) style.bottom = position.bottom;
-    if (position?.left) style.left = position.left;
-  } else {
-    style.right = 0;
-  }
-
-  console.log(style);
-
-  return <div style={style}>{text}</div>;
-};
-
-export { TextWidget }
+export { TextWidget } from './widget';
+export { TextWidgetEditor } from './editor';

src/components/TextWidget/types.ts

@@ -0,0 +1,20 @@
+type Position = {
+  top?: number;    // px
+  right?: number;  // px
+  bottom?: number; // px
+  left?: number;   // px
+}
+
+type TextWidgetProps = {
+  text: string;
+  textColor?: string;
+  backgroundColor?: string;
+  edgeWeight?: number; // px
+  edgeColor?: string;
+  width?: number;      // px
+  height?: number;     // px
+  padding?: string;    // px
+  position?: Position;
+};
+
+export type { Position, TextWidgetProps };

src/components/TextWidget/widget.tsx

@@ -0,0 +1,68 @@
+import React, { VFC, CSSProperties } from 'react';
+import type { TextWidgetProps } from '@/components/TextWidget/types';
+
+const calcTextShadow = (weight, color) => {
+  const edge = [
+    `${weight}px ${weight}px 0 ${color}`,
+    `-${weight}px -${weight}px 0 ${color}`,
+    `-${weight}px ${weight}px 0 ${color}`,
+    `${weight}px -${weight}px 0 ${color}`,
+    `0px ${weight}px 0 ${color}`,
+    `0-${weight}px 0 ${color}`,
+    `-${weight}px 0 0 ${color}`,
+    `${weight}px 0 0 ${color}`
+  ].join(', ');
+  return edge;
+};
+
+const defaultStyle: CSSProperties = {
+  boxSizing: 'border-box',
+  whiteSpace: 'pre-wrap',
+  overflow: 'hidden',
+  color: 'white',
+  backgroundColor: 'rgba(0, 0, 0 0.1)',
+  textShadow: calcTextShadow(1, 'black'),
+  width: 320,
+  height: 540,
+  padding: '4px 8px',
+  position: 'absolute',
+};
+
+const TextWidget: VFC<TextWidgetProps> = ({
+  text,
+  textColor,
+  backgroundColor,
+  edgeWeight,
+  edgeColor,
+  width,
+  height,
+  padding,
+  position,
+}) => {
+  const edge = calcTextShadow(edgeWeight || 1, edgeColor || 'black');
+
+  const style: CSSProperties = {
+    ...defaultStyle,
+    width: `${width || 320}px`,
+    height: `${height | 540}px`,
+    padding: padding || '4px 8px',
+    color: textColor || 'white',
+    textShadow: edge,
+    backgroundColor: backgroundColor || 'rgba(0, 0, 0, 0.1)',
+  };
+
+  if (position?.top || position?.right || position?.bottom || position?.left) {
+    if (position?.top) style.top = position.top;
+    if (position?.right) style.right = position.right;
+    if (position?.bottom) style.bottom = position.bottom;
+    if (position?.left) style.left = position.left;
+  } else {
+    style.right = 0;
+  }
+
+  console.log(style);
+
+  return <div style={style}>{text}</div>;
+};
+
+export { TextWidget }