datocms-plugin-record-comments 0.1.0

package/src/entrypoints/styles/comment.module.css

@@ -0,0 +1,134 @@
+.comment-main {
+  display: flex;
+  justify-content: space-around;
+}
+
+.author-profile-picture {
+  border-radius: 5px;
+  width: 50px;
+}
+
+.comment__buttons {
+  display: flex;
+  justify-content: left;
+}
+
+.comment__button {
+  background-color: transparent;
+  border: none;
+  color: var(--light-body-color);
+}
+
+.comment__button:hover {
+  cursor: pointer;
+  color: var(--dark-color);
+}
+
+.comment {
+  margin-bottom: 3em;
+}
+
+.reply {
+  margin-bottom: 0;
+}
+
+.author-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+  flex-grow: 1;
+}
+
+.reply {
+  margin-left: 30px;
+}
+
+.comment-body {
+  flex-grow: 8;
+}
+
+.comment-textarea {
+  background-color: var(--lighter-bg-color);
+  border: solid var(--border-color);
+  resize: none;
+  font: inherit;
+  width: 100%;
+}
+
+.comment-footer {
+  font-size: var(--font-size-s);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.comment__buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  width: 90%;
+}
+
+.comment__timestamps {
+  color: var(--light-body-color);
+  font-size: var(--font-size-xs);
+}
+
+.tip {
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  background: transparent;
+  border: 10px solid var(--light-bg-color);
+}
+
+.tip-down {
+  bottom: -25px;
+  left: 10px;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.dialogbox .body {
+  position: relative;
+  max-width: 300px;
+  height: auto;
+  padding: 5px;
+  background-color: var(--light-bg-color);
+  border-radius: 3px;
+  border: 5px solid var(--light-bg-color);
+}
+
+.body .message {
+  border-radius: 3px;
+  font-size: var(--font-size-s);
+}
+
+.reply-line {
+  content: "";
+  width: 2px;
+  height: 80px;
+  background: var(--darker-border-color);
+  position: absolute;
+  left: 32px;
+}
+
+.reply-profile-picture-line {
+  content: "";
+  width: 30px;
+  height: 2px;
+  background: var(--darker-border-color);
+  position: absolute;
+  left: 32px;
+  z-index: -1;
+}
+
+.upvoted {
+  color: var(--dark-color);
+}
+
+.comment__interface {
+  color: var(--light-body-color);
+}

package/src/entrypoints/styles/commentbar.module.css

@@ -0,0 +1,3 @@
+.add-comment-button {
+  margin-bottom: 1.4em;
+}

package/src/entrypoints/styles/modal.module.css

@@ -0,0 +1,13 @@
+.error-explanation {
+  margin-bottom: 3em;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.note {
+  font-size: 0.9em;
+  color: var(--light-body-color);
+}

package/src/index.tsx

@@ -0,0 +1,45 @@
+import {
+  connect,
+  IntentCtx,
+  ModelBlock,
+  RenderItemFormSidebarPanelCtx,
+  RenderModalCtx,
+} from "datocms-plugin-sdk";
+import { render } from "./utils/render";
+import "datocms-react-ui/styles.css";
+import React from "react";
+import ReactDOM from "react-dom";
+import Notes from "./entrypoints/CommentsBar";
+import NoLogModal from "./entrypoints/NoLogModal";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en.json";
+
+TimeAgo.addDefaultLocale(en);
+connect({
+  renderModal(modalId: string, ctx: RenderModalCtx) {
+    switch (modalId) {
+      case "NoLogModal":
+        return render(<NoLogModal ctx={ctx} />);
+    }
+  },
+  itemFormSidebarPanels(model: ModelBlock, ctx: IntentCtx) {
+    return [
+      {
+        id: "comments",
+        label: "Comments",
+        startOpen: false,
+      },
+    ];
+  },
+  renderItemFormSidebarPanel(
+    sidebarPanelId,
+    ctx: RenderItemFormSidebarPanelCtx
+  ) {
+    ReactDOM.render(
+      <React.StrictMode>
+        <Notes ctx={ctx} />
+      </React.StrictMode>,
+      document.getElementById("root")
+    );
+  },
+});

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/utils/render.tsx

@@ -0,0 +1,6 @@
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom';
+
+export function render(component: React.ReactNode): void {
+  ReactDOM.render(<StrictMode>{component}</StrictMode>, document.getElementById('root'));
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}