gitalk-react 1.0.0-beta.6 → 1.0.0-beta.7

package/lib/interfaces/index.ts

@@ -1,4 +1,170 @@
 import type { Endpoints } from "@octokit/types";
+import type FlipMove from "react-flip-move";
+
+import type { Lang } from "../i18n";
+import type { IssueCommentsQLResponse } from "../services/graphql/comment";
+
+export interface GitalkProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "id" | "title"
+  > {
+  /**
+   * GitHub Application Client ID.
+   */
+  clientID: string;
+  /**
+   * GitHub Application Client Secret.
+   */
+  clientSecret: string;
+  /**
+   * GitHub repository owner.
+   * Can be personal user or organization.
+   */
+  owner: string;
+  /**
+   * Name of Github repository.
+   */
+  repo: string;
+  /**
+   * GitHub repository owner and collaborators.
+   * (Users who having write access to this repository)
+   */
+  admin: string[];
+  /**
+   * The unique id of the page.
+   * Length must less than 50.
+   *
+   * @default location.host + location.pathname
+   */
+  id?: string;
+  /**
+   * The issue ID of the page.
+   * If the number attribute is not defined, issue will be located using id.
+   */
+  number?: number;
+  /**
+   * GitHub issue labels.
+   *
+   * @default ['Gitalk']
+   */
+  labels?: string[];
+  /**
+   * GitHub issue title.
+   *
+   * @default document.title
+   */
+  title?: string;
+  /**
+   * GitHub issue body.
+   *
+   * @default location.href + header.meta[description]
+   */
+  body?: string;
+  /**
+   * Localization language key.
+   *
+   * @default navigator.language
+   */
+  language?: Lang;
+  /**
+   * Pagination size, with maximum 100.
+   *
+   * @default 10
+   */
+  perPage?: number;
+  /**
+   * Comment sorting direction.
+   * Available values are `last` and `first`.
+   *
+   * @default "last"
+   */
+  pagerDirection?: "last" | "first";
+  /**
+   * By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the admin users.
+   * You can create it manually by setting this option to true.
+   *
+   * @default false
+   */
+  createIssueManually?: boolean;
+  /**
+   * Enable hot key (cmd|ctrl + enter) submit comment.
+   *
+   * @default true
+   */
+  enableHotKey?: boolean;
+  /**
+   * Facebook-like distraction free mode.
+   *
+   * @default false
+   */
+  distractionFreeMode?: boolean;
+  /**
+   * Comment list animation.
+   *
+   * @default
+   * ```ts
+   * {
+   *   staggerDelayBy: 150,
+   *   appearAnimation: 'accordionVertical',
+   *   enterAnimation: 'accordionVertical',
+   *   leaveAnimation: 'accordionVertical',
+   * }
+   * ```
+   * @link https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md
+   */
+  flipMoveOptions?: FlipMove.FlipMoveProps;
+  /**
+   * GitHub oauth request reverse proxy for CORS.
+   * [Why need this?](https://github.com/isaacs/github/issues/330)
+   *
+   * @default "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"
+   */
+  proxy?: string;
+  /**
+   * Default user field if comments' author is not provided
+   *
+   * @default
+   * ```ts
+   * {
+   *   avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
+   *   login: "null",
+   *   html_url: ""
+   * }
+   */
+  defaultUser?: Comment["user"];
+  /**
+   * Default user field if comments' author is not provided
+   *
+   * @deprecated use `defaultUser`
+   */
+  defaultAuthor?: IssueCommentsQLResponse["repository"]["issue"]["comments"]["nodes"][number]["author"];
+  /**
+   * Default collapse the comment if meets the height (px)
+   */
+  collapsedHeight?: number;
+  /**
+   * Callback method invoked when updating the number of comments.
+   *
+   * @param count comments number
+   */
+  updateCountCallback?: (count: number) => void;
+  /**
+   * Callback method invoked when a new issue is successfully created.
+   *
+   * @param issue created issue
+   */
+  onCreateIssue?: (issue: Issue) => void;
+  /**
+   * Callback method invoked when a new comment is successfully created.
+   *
+   * @param comment created comment
+   */
+  onCreateComment?: (comment: Comment) => void;
+}
 
 export type User = Endpoints["GET /user"]["response"]["data"];
 

package/lib/services/graphql/comment.ts

@@ -1,5 +1,4 @@
-import { type GitalkProps } from "../../gitalk";
-import type { Comment } from "../../interfaces";
+import type { Comment, GitalkProps } from "../../interfaces";
 
 export interface IssueCommentsQLResponse {
   repository: {

package/lib/themes/base.scss

@@ -37,8 +37,9 @@ $gt-size-loader: em(28px);
 $gt-size-avatar: em(50px);
 $gt-size-avatar-mobi: em(32px);
 $gt-size-textarea-min-height: em(82px);
+$gt-size-textarea-max-height: em(240px);
 $gt-mask-z-index: 9999;
-$gt-breakpoint-mobile: 479px;
+$gt-breakpoint-mobile: 480px;
 
 .gt-container {
   box-sizing: border-box;
@@ -383,17 +384,17 @@ $gt-breakpoint-mobile: 479px;
         display: block;
         width: 100%;
         min-height: $gt-size-textarea-min-height;
-        max-height: em(240px);
+        max-height: $gt-size-textarea-max-height;
         padding: em(12px);
         font-size: em(14px);
         color: inherit;
         word-wrap: break-word;
-        resize: vertical;
+        resize: none;
         outline: none;
         background-color: var(--gt-color-input-bg);
         border: 1px solid var(--gt-color-input-border);
         border-radius: $gt-size-border-radius;
-        transition: all ease 0.25s;
+        transition: background-color ease 0.25s;
 
         &:hover,
         &:focus {
@@ -459,6 +460,7 @@ $gt-breakpoint-mobile: 479px;
       padding: em(10px) 0;
 
       &-content {
+        position: relative;
         flex: 1;
         padding: em(12px) em(16px);
         margin-left: em(20px);
@@ -476,6 +478,28 @@ $gt-breakpoint-mobile: 479px;
         }
       }
 
+      &-collapse {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: em(6px);
+        cursor: pointer;
+        background: var(--gt-color-comment-collapse-bg);
+
+        .gt-ico-collapse {
+          .gt-svg {
+            svg {
+              fill: var(--gt-color-text);
+              scale: 1.2;
+            }
+          }
+        }
+      }
+
       &-header {
         position: relative;
         display: flex;
@@ -496,6 +520,20 @@ $gt-breakpoint-mobile: 479px;
       &-date {
         margin-left: em(8px);
         color: var(--gt-color-sub);
+
+        &__prefix {
+          margin-right: em(4px);
+
+          @include mobile {
+            display: none;
+          }
+        }
+
+        &__time {
+          @include mobile {
+            font-size: $gt-size-base * 0.7;
+          }
+        }
       }
 
       &-actions {

package/lib/themes/gitalk-dark.scss

@@ -18,6 +18,10 @@
   --gt-color-comment-shadow: #{color.adjust(#212121, $lightness: 18%)};
   --gt-color-comment-shadow-admin: #{color.adjust(#212121, $lightness: 24%)};
   --gt-color-comment-txt: #fafafa;
+  --gt-color-comment-collapse-bg: linear-gradient(
+    rgb(20 20 20 / 10%),
+    rgb(20 20 20 / 90%)
+  );
   --gt-color-link-active: #fafafa;
   --gt-color-btn: #eee;
   --gt-color-popbg: #171717;

package/lib/themes/gitalk-light.scss

@@ -18,6 +18,10 @@
   --gt-color-comment-shadow: #{color.adjust(#f9f9f9, $lightness: -12%)};
   --gt-color-comment-shadow-admin: #{color.adjust(#f9f9f9, $lightness: -18%)};
   --gt-color-comment-txt: #333;
+  --gt-color-comment-collapse-bg: linear-gradient(
+    rgb(245 245 245 / 10%),
+    rgb(245 245 245 / 90%)
+  );
   --gt-color-link-active: #333;
   --gt-color-btn: #fff;
   --gt-color-popbg: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "private": false,
   "author": {
     "name": "LolipopJ",