@drodil/backstage-plugin-qeta-react 3.0.0 → 3.1.0

package/dist/index.d.ts

@@ -7,6 +7,8 @@ import * as react_use_lib_useAsyncFn from 'react-use/lib/useAsyncFn';
 import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
 import { LinkProps } from '@backstage/core-components';
 import { SvgIconProps } from '@material-ui/core';
+import { Overrides } from '@material-ui/core/styles/overrides';
+import { StyleRules } from '@material-ui/core/styles/withStyles';
 
 declare const qetaRouteRef: _backstage_core_plugin_api.RouteRef<undefined>;
 declare const askRouteRef: _backstage_core_plugin_api.SubRouteRef<undefined>;
@@ -371,7 +373,7 @@ declare function useQetaApi<T>(f: (api: QetaApi) => Promise<T>, deps?: any[]): {
     value: T;
 };
 declare function useIdentityApi<T>(f: (api: IdentityApi) => Promise<T>, deps?: any[]): react_use_lib_useAsyncFn.AsyncState<T>;
-declare const useStyles: (props?: any) => _material_ui_styles.ClassNameMap<"deleteModal" | "leftMenu" | "filterPanel" | "marginLeft" | "marginRight" | "selectedMenuItem" | "nonSelectedMenuItem" | "headerImage" | "markdownEditor" | "markdownEditorError" | "markdownContent" | "successColor" | "questionDivider" | "questionCard" | "questionCardVote" | "questionCardContent" | "questionListItem" | "questionListItemStats" | "questionListItemContent" | "questionListItemAuthor" | "questionListItemAvatar" | "answerCardContent" | "questionCardAuthor" | "questionListPagination" | "postButton" | "questionsPerPageInput" | "questionsPerPage" | "postHighlightListContainer" | "postHighlightList" | "questionCardMetadata" | "questionCardActions" | "noPadding" | "menuIcon" | "authorLink" | "highlight" | "@keyframes highlight" | "dateFilter">;
+declare const useStyles: (props?: any) => _material_ui_styles.ClassNameMap<"deleteModal" | "filterPanel" | "headerImage" | "marginLeft" | "marginRight" | "successColor" | "questionDivider" | "questionCard" | "questionCardVote" | "questionCardContent" | "questionListItem" | "questionListItemStats" | "questionListItemContent" | "questionListItemAuthor" | "questionListItemAvatar" | "answerCardContent" | "questionCardAuthor" | "questionListPagination" | "postButton" | "questionsPerPageInput" | "questionsPerPage" | "postHighlightListContainer" | "postHighlightList" | "questionCardMetadata" | "questionCardActions" | "noPadding" | "authorLink" | "highlight" | "@keyframes highlight" | "dateFilter">;
 
 declare const PostsContainer: (props: PaginatedPostsProps) => React.JSX.Element;
 
@@ -472,6 +474,7 @@ declare const PostHighlightList: (props: {
     postType?: PostType;
 }) => React.JSX.Element;
 
+type QetaMarkdownContentClassKey = 'markdown';
 declare const MarkdownRenderer: (props: {
     content: string;
     className?: string;
@@ -537,6 +540,7 @@ declare const QuestionsTable: (props: {
     quickFilter?: QuickFilterType;
 }) => React.JSX.Element;
 
+type QetaStatsChartClassKey = 'tooltipLabel' | 'tooltipWrapper' | 'xAxis' | 'lineChart' | 'barChart';
 declare const StatsChart: (props: {
     data: GlobalStat[] | UserStat[];
 }) => React.JSX.Element;
@@ -561,10 +565,11 @@ declare const UsersGrid: () => React.JSX.Element;
 
 declare const PostsGrid: (props: PaginatedPostsProps) => React.JSX.Element;
 
+type QetaArticleContentClassKey = 'content' | 'headerImage' | 'commentSection';
 declare const ArticleContent: (props: {
     post: PostResponse;
     views: number;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;
 
 type CollectionFormProps = {
     id?: string;
@@ -578,4 +583,33 @@ declare const CollectionCard: (props: {
     collection: Collection;
 }) => React.JSX.Element;
 
-export { AddToCollectionButton, AnswerCard, AnswerForm, AnswerList, AnswerListItem, AnswersContainer, ArticleContent, AskQuestionButton, AuthorLink, BackToArticlesButton, BackToCollectionsButton, BackToQuestionsButton, CollectionCard, CollectionForm, CollectionsGrid, CreateCollectionButton, DeleteModal, EntitiesGrid, EntityFollowButton, FilterPanel, FollowedEntitiesList, FollowedTagsList, ImpactCard, MarkdownRenderer, PostForm, PostHighlightList, PostList, PostListItem, PostsCard, PostsContainer, PostsGrid, QuestionCard, QuestionsTable, RelativeTimeWithTooltip, StatsChart, SummaryStatsGrid, TagFollowButton, TagsGrid, TopRankingUsers, TrophyIcon, UpdatedByLink, UserLink, UsersGrid, WriteArticleButton, articleRouteRef, articlesRouteRef, askRouteRef, collectionCreateRouteRef, collectionEditRouteRef, collectionRouteRef, collectionsRouteRef, editArticleRouteRef, editQuestionRouteRef, entitiesRouteRef, entityRouteRef, favoriteQuestionsRouteRef, qetaApiRef, qetaRouteRef, questionRouteRef, questionsRouteRef, statisticsRouteRef, tagRouteRef, tagsRouteRef, useIdentityApi, useQetaApi, useStyles, useTranslation, userRouteRef, usersRouteRef, writeRouteRef };
+type QetaLeftMenuClassKey = 'leftMenu' | 'inPopup' | 'outsidePopup' | 'selectedMenuItem' | 'nonSelectedMenuItem' | 'menuIcon';
+declare const LeftMenu: (props: {
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    autoFocusItem?: boolean;
+    onClick?: (event: React.MouseEvent<EventTarget>) => void;
+    inPopup?: boolean;
+}) => React.JSX.Element;
+
+declare const LeftMenuButton: () => React.JSX.Element;
+
+type QetaVoteButtonsClassKey = 'qetaCorrectAnswerSelected' | 'qetaCorrectAnswer' | 'voteButtonContainer';
+
+type QetaArticleButtonsClassKey = 'container' | 'scoreText';
+
+type QetaMarkdownEditorClassKey = 'markdownEditor' | 'markdownEditorError' | 'markdownPreview';
+
+type QetaComponentsNameToClassKey = {
+    QetaLeftMenu: QetaLeftMenuClassKey;
+    QetaArticleButtons: QetaArticleButtonsClassKey;
+    QetaMarkdownContent: QetaMarkdownContentClassKey;
+    QetaArticle: QetaArticleContentClassKey;
+    QetaVoteButtons: QetaVoteButtonsClassKey;
+    QetaStatsChart: QetaStatsChartClassKey;
+    QetaMarkdownEditor: QetaMarkdownEditorClassKey;
+};
+type QetaOverrides = Overrides & {
+    [Name in keyof QetaComponentsNameToClassKey]?: Partial<StyleRules<QetaComponentsNameToClassKey[Name]>>;
+};
+
+export { AddToCollectionButton, AnswerCard, AnswerForm, AnswerList, AnswerListItem, AnswersContainer, ArticleContent, AskQuestionButton, AuthorLink, BackToArticlesButton, BackToCollectionsButton, BackToQuestionsButton, CollectionCard, CollectionForm, CollectionsGrid, CreateCollectionButton, DeleteModal, EntitiesGrid, EntityFollowButton, FilterPanel, FollowedEntitiesList, FollowedTagsList, ImpactCard, LeftMenu, LeftMenuButton, MarkdownRenderer, PostForm, PostHighlightList, PostList, PostListItem, PostsCard, PostsContainer, PostsGrid, type QetaLeftMenuClassKey, type QetaOverrides, QuestionCard, QuestionsTable, RelativeTimeWithTooltip, StatsChart, SummaryStatsGrid, TagFollowButton, TagsGrid, TopRankingUsers, TrophyIcon, UpdatedByLink, UserLink, UsersGrid, WriteArticleButton, articleRouteRef, articlesRouteRef, askRouteRef, collectionCreateRouteRef, collectionEditRouteRef, collectionRouteRef, collectionsRouteRef, editArticleRouteRef, editQuestionRouteRef, entitiesRouteRef, entityRouteRef, favoriteQuestionsRouteRef, qetaApiRef, qetaRouteRef, questionRouteRef, questionsRouteRef, statisticsRouteRef, tagRouteRef, tagsRouteRef, useIdentityApi, useQetaApi, useStyles, useTranslation, userRouteRef, usersRouteRef, writeRouteRef };

package/dist/index.esm.js

@@ -42,5 +42,7 @@ export { ArticleContent } from './components/ArticleContent/ArticleContent.esm.j
 export { CollectionForm } from './components/CollectionForm/CollectionForm.esm.js';
 export { CollectionsGrid } from './components/CollectionsGrid/CollectionsGrid.esm.js';
 export { CollectionCard } from './components/CollectionCard/CollectionCard.esm.js';
+export { LeftMenu } from './components/LeftMenu/LeftMenu.esm.js';
+export { LeftMenuButton } from './components/LeftMenu/LeftMenuButton.esm.js';
 export { useIdentityApi, useQetaApi, useStyles, useTranslation } from './utils/hooks.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/hooks.esm.js

@@ -310,241 +310,169 @@ function useIsDarkTheme() {
   const theme = useMemo(() => appThemeApi.getActiveThemeId(), [appThemeApi]);
   return Boolean(themes.find((t) => t.id === theme)?.variant === "dark");
 }
-const useStyles = makeStyles((theme) => {
-  return {
-    leftMenu: {
-      top: "0",
-      width: "165px"
-    },
-    selectedMenuItem: {
-      color: theme.palette.primary.contrastText,
-      backgroundColor: theme.palette.primary.light,
-      borderRadius: theme.shape.borderRadius,
-      "&:hover": {
-        backgroundColor: theme.palette.primary.dark
+const useStyles = makeStyles(
+  (theme) => {
+    return {
+      headerImage: {
+        width: "100%",
+        height: "250px",
+        objectFit: "cover"
       },
-      "& svg": {
-        color: theme.palette.primary.contrastText
-      }
-    },
-    nonSelectedMenuItem: {
-      backgroundColor: "initial"
-    },
-    headerImage: {
-      width: "100%",
-      height: "250px",
-      objectFit: "cover"
-    },
-    markdownEditor: {
-      backgroundColor: "initial",
-      color: theme.palette.text.primary,
-      border: `1px solid ${theme.palette.action.disabled}`,
-      borderRadius: theme.shape.borderRadius,
-      "&:hover": {
-        borderColor: theme.palette.action.active
+      successColor: {
+        color: theme.palette.success.main
       },
-      "&:focus-within": {
-        borderColor: theme.palette.primary.main
+      questionDivider: {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(2)
       },
-      "& .mde-header": {
-        backgroundColor: "initial",
-        color: theme.palette.text.primary,
-        borderBottom: `1px solid ${theme.palette.action.selected}`,
-        "& .mde-tabs button, .mde-header-item > button": {
-          color: `${theme.palette.text.primary} !important`
-        }
+      questionCard: {
+        marginBottom: theme.spacing(1),
+        position: "relative"
       },
-      "& .mde-preview-content": {
-        padding: "10px"
+      questionCardVote: {
+        textAlign: "center",
+        width: "32px",
+        marginRight: "20px",
+        marginLeft: "5px",
+        display: "inline-block",
+        verticalAlign: "top"
       },
-      "& .mde-text, .mde-preview": {
-        fontSize: theme.typography.body1.fontSize,
-        fontFamily: theme.typography.body1.fontFamily,
-        lineHeight: theme.typography.body1.lineHeight
+      questionCardContent: {
+        minHeight: "160px"
       },
-      "& .mde-text": {
-        backgroundColor: "initial",
-        color: theme.palette.text.primary,
-        outline: "none"
+      questionListItem: {
+        padding: "0.7rem",
+        paddingBottom: "1.4rem"
       },
-      "& .image-tip": {
-        color: theme.palette.text.primary,
-        backgroundColor: "initial"
-      }
-    },
-    markdownEditorError: {
-      border: `1px solid ${theme.palette.error.main} !important`
-    },
-    markdownContent: {
-      "& *": {
-        wordBreak: "break-word"
+      questionListItemStats: {
+        width: "70px",
+        textAlign: "right",
+        marginRight: "5px",
+        display: "inline-block",
+        verticalAlign: "top"
       },
-      "&.inline": {
-        display: "inline-block"
+      questionListItemContent: {
+        display: "inline-block",
+        width: "calc(100% - 80px)"
       },
-      "& > :first-child": {
-        marginTop: "0px !important"
+      questionListItemAuthor: {
+        display: "inline",
+        float: "right"
       },
-      "& > :last-child": {
-        marginBottom: "0px !important"
-      }
-    },
-    successColor: {
-      color: theme.palette.success.main
-    },
-    questionDivider: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2)
-    },
-    questionCard: {
-      marginBottom: theme.spacing(1),
-      position: "relative"
-    },
-    questionCardVote: {
-      textAlign: "center",
-      width: "32px",
-      marginRight: "20px",
-      marginLeft: "5px",
-      display: "inline-block",
-      verticalAlign: "top"
-    },
-    questionCardContent: {
-      minHeight: "160px"
-    },
-    questionListItem: {
-      padding: "0.7rem",
-      paddingBottom: "1.4rem"
-    },
-    questionListItemStats: {
-      width: "70px",
-      textAlign: "right",
-      marginRight: "5px",
-      display: "inline-block",
-      verticalAlign: "top"
-    },
-    questionListItemContent: {
-      display: "inline-block",
-      width: "calc(100% - 80px)"
-    },
-    questionListItemAuthor: {
-      display: "inline",
-      float: "right"
-    },
-    questionListItemAvatar: {
-      display: "inline-flex !important",
-      marginRight: "0.25rem",
-      fontSize: "1rem",
-      maxWidth: "1rem",
-      maxHeight: "1rem"
-    },
-    answerCardContent: {
-      display: "inline-block",
-      width: "calc(100% - 70px)"
-    },
-    questionCardAuthor: {
-      padding: theme.spacing(1),
-      float: "right",
-      maxWidth: "200px",
-      border: `1px solid ${theme.palette.action.selected}`,
-      "& .avatar": {
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        fontSize: "1rem"
-      }
-    },
-    questionListPagination: {
-      marginTop: theme.spacing(2)
-    },
-    postButton: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1)
-    },
-    questionsPerPageInput: {
-      paddingTop: "10px"
-    },
-    questionsPerPage: {
-      marginRight: theme.spacing(3)
-    },
-    postHighlightListContainer: {
-      width: "100%",
-      backgroundColor: theme.palette.background.paper,
-      border: `1px solid ${theme.palette.action.selected}`,
-      borderRadius: theme.shape.borderRadius,
-      "&:not(:first-child)": {
+      questionListItemAvatar: {
+        display: "inline-flex !important",
+        marginRight: "0.25rem",
+        fontSize: "1rem",
+        maxWidth: "1rem",
+        maxHeight: "1rem"
+      },
+      answerCardContent: {
+        display: "inline-block",
+        width: "calc(100% - 70px)"
+      },
+      questionCardAuthor: {
+        padding: theme.spacing(1),
+        float: "right",
+        maxWidth: "200px",
+        border: `1px solid ${theme.palette.action.selected}`,
+        "& .avatar": {
+          width: theme.spacing(3),
+          height: theme.spacing(3),
+          fontSize: "1rem"
+        }
+      },
+      questionListPagination: {
         marginTop: theme.spacing(2)
-      }
-    },
-    postHighlightList: {
-      paddingBottom: "0px",
-      "& p": {
-        marginTop: "0",
-        marginBottom: "0"
-      }
-    },
-    filterPanel: {
-      border: `1px solid ${theme.palette.action.selected}`,
-      borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(3)
-    },
-    questionCardMetadata: {
-      marginTop: theme.spacing(3)
-    },
-    marginRight: {
-      marginRight: theme.spacing(1)
-    },
-    marginLeft: {
-      marginLeft: theme.spacing(1)
-    },
-    questionCardActions: {
-      marginTop: theme.spacing(2),
-      "& a": {
+      },
+      postButton: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+      },
+      questionsPerPageInput: {
+        paddingTop: "10px"
+      },
+      questionsPerPage: {
+        marginRight: theme.spacing(3)
+      },
+      postHighlightListContainer: {
+        width: "100%",
+        backgroundColor: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.action.selected}`,
+        borderRadius: theme.shape.borderRadius,
+        "&:not(:first-child)": {
+          marginTop: theme.spacing(2)
+        }
+      },
+      postHighlightList: {
+        paddingBottom: "0px",
+        "& p": {
+          marginTop: "0",
+          marginBottom: "0"
+        }
+      },
+      filterPanel: {
+        border: `1px solid ${theme.palette.action.selected}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(3)
+      },
+      questionCardMetadata: {
+        marginTop: theme.spacing(3)
+      },
+      marginRight: {
         marginRight: theme.spacing(1)
-      }
-    },
-    noPadding: {
-      padding: `0 !important`
-    },
-    menuIcon: {
-      minWidth: "26px"
-    },
-    deleteModal: {
-      position: "absolute",
-      top: "20%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: 400,
-      backgroundColor: theme.palette.background.default,
-      border: `1px solid ${theme.palette.action.selected}`,
-      borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(2),
-      "& button": {
+      },
+      marginLeft: {
+        marginLeft: theme.spacing(1)
+      },
+      questionCardActions: {
         marginTop: theme.spacing(2),
-        float: "right"
-      }
-    },
-    authorLink: {
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      whiteSpace: "nowrap"
-    },
-    highlight: {
-      animation: "$highlight 2s"
-    },
-    "@keyframes highlight": {
-      "0%": {
-        boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
+        "& a": {
+          marginRight: theme.spacing(1)
+        }
+      },
+      noPadding: {
+        padding: `0 !important`
+      },
+      deleteModal: {
+        position: "absolute",
+        top: "20%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: 400,
+        backgroundColor: theme.palette.background.default,
+        border: `1px solid ${theme.palette.action.selected}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(2),
+        "& button": {
+          marginTop: theme.spacing(2),
+          float: "right"
+        }
+      },
+      authorLink: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
       },
-      "100%": {
-        boxShadow: "none"
+      highlight: {
+        animation: "$highlight 2s"
+      },
+      "@keyframes highlight": {
+        "0%": {
+          boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
+        },
+        "100%": {
+          boxShadow: "none"
+        }
+      },
+      dateFilter: {
+        minWidth: "200px",
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(2)
       }
-    },
-    dateFilter: {
-      minWidth: "200px",
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2)
-    }
-  };
-});
+    };
+  },
+  { name: "Qeta" }
+);
 const useBaseUrl = () => {
   try {
     const config = useApi(configApiRef);