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

package/dist/components/QuestionCard/QuestionCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCard.esm.js","sources":["../../../src/components/QuestionCard/QuestionCard.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  Typography,\n} from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { useStyles, useTranslation } from '../../utils/hooks';\nimport { DeleteModal } from '../DeleteModal/DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { editQuestionRouteRef } from '../../routes';\n\nexport const QuestionCard = (props: { question: PostResponse }) => {\n  const { question } = props;\n  const styles = useStyles();\n  const editQuestionRoute = useRouteRef(editQuestionRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const [questionEntity, setQuestionEntity] = React.useState(question);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslation();\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setQuestionEntity(q);\n  };\n\n  const highlightedAnswer = window.location.hash.slice(1) ?? undefined;\n  useEffect(() => {\n    if (highlightedAnswer) {\n      try {\n        const element = document.querySelector(`#${highlightedAnswer}`);\n        if (element) {\n          element.scrollIntoView();\n        }\n      } catch (e) {\n        // NOOP\n      }\n    }\n  }, [highlightedAnswer]);\n\n  return (\n    <>\n      <Card\n        variant=\"outlined\"\n        className={`qetaQuestionCard ${styles.questionCard}`}\n      >\n        <CardContent>\n          <Grid container spacing={0} justifyContent=\"flex-start\">\n            <Grid container item xs={1} justifyContent=\"center\">\n              <div className={styles.questionCardVote}>\n                <VoteButtons entity={questionEntity} />\n                <FavoriteButton entity={questionEntity} />\n                <LinkButton entity={questionEntity} />\n              </div>\n            </Grid>\n            <Grid item xs={11} className={styles.questionCardContent}>\n              <Typography variant=\"body1\" gutterBottom>\n                <MarkdownRenderer\n                  content={questionEntity.content}\n                  className={styles.markdownContent}\n                />\n              </Typography>\n              <Grid\n                container\n                item\n                spacing={1}\n                justifyContent=\"space-between\"\n                alignItems=\"flex-end\"\n                className={styles.questionCardMetadata}\n              >\n                <Grid item xs={9} style={{ alignSelf: 'flex-end' }}>\n                  <TagsAndEntities entity={questionEntity} />\n                  {(question.canEdit || question.canDelete) && (\n                    <Box className={styles.questionCardActions}>\n                      {question.canDelete && (\n                        <>\n                          <Button\n                            variant=\"outlined\"\n                            size=\"small\"\n                            color=\"secondary\"\n                            onClick={handleDeleteModalOpen}\n                            className={`${styles.marginRight} qetaQuestionCardDeleteBtn`}\n                            startIcon={<DeleteIcon />}\n                          >\n                            {t('deleteModal.deleteButton')}\n                          </Button>\n                          <DeleteModal\n                            open={deleteModalOpen}\n                            onClose={handleDeleteModalClose}\n                            entity={questionEntity}\n                          />\n                        </>\n                      )}\n                      {question.canEdit && (\n                        <Button\n                          variant=\"outlined\"\n                          size=\"small\"\n                          startIcon={<EditIcon />}\n                          href={editQuestionRoute({\n                            id: question.id.toString(10),\n                          })}\n                          className=\"qetaQuestionCardEditBtn\"\n                        >\n                          {t('questionPage.editButton')}\n                        </Button>\n                      )}\n                    </Box>\n                  )}\n                </Grid>\n                <Grid item xs={3} className={styles.noPadding}>\n                  <AuthorBox entity={questionEntity} />\n                </Grid>\n              </Grid>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection\n        post={questionEntity}\n        onCommentDelete={onCommentAction}\n        onCommentPost={onCommentAction}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuestionsTable/QuestionTableRow.esm.js

@@ -0,0 +1,21 @@
+import { TableRow, TableCell } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
+import React from 'react';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { questionRouteRef } from '../../routes.esm.js';
+import { AuthorLink } from '../Links/Links.esm.js';
+
+const QuestionTableRow = (props) => {
+  const { question } = props;
+  const questionRoute = useRouteRef(questionRouteRef);
+  return /* @__PURE__ */ React.createElement(TableRow, { key: question.id }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(Link, { to: questionRoute({ id: question.id.toString(10) }) }, question.title)), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(AuthorLink, { entity: question })), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: question.created })), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(
+    RelativeTimeWithTooltip,
+    {
+      value: question.updated ? question.updated : question.created
+    }
+  )));
+};
+
+export { QuestionTableRow };
+//# sourceMappingURL=QuestionTableRow.esm.js.map

package/dist/components/QuestionsTable/QuestionTableRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionTableRow.esm.js","sources":["../../../src/components/QuestionsTable/QuestionTableRow.tsx"],"sourcesContent":["import { Post } from '@drodil/backstage-plugin-qeta-common';\nimport { TableCell, TableRow } from '@material-ui/core';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { questionRouteRef } from '../../routes';\nimport { AuthorLink } from '../Links/Links';\n\nexport const QuestionTableRow = (props: { question: Post }) => {\n  const { question } = props;\n  const questionRoute = useRouteRef(questionRouteRef);\n\n  return (\n    <TableRow key={question.id}>\n      <TableCell>\n        <Link to={questionRoute({ id: question.id.toString(10) })}>\n          {question.title}\n        </Link>\n      </TableCell>\n      <TableCell>\n        <AuthorLink entity={question} />\n      </TableCell>\n      <TableCell>\n        <RelativeTimeWithTooltip value={question.created} />\n      </TableCell>\n      <TableCell>\n        <RelativeTimeWithTooltip\n          value={question.updated ? question.updated : question.created}\n        />\n      </TableCell>\n    </TableRow>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASa,MAAA,gBAAA,GAAmB,CAAC,KAA8B,KAAA;AAC7D,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AACrB,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA,CAAA;AAElD,EAAA,2CACG,QAAS,EAAA,EAAA,GAAA,EAAK,SAAS,EACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iCACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,aAAc,CAAA,EAAE,IAAI,QAAS,CAAA,EAAA,CAAG,SAAS,EAAE,CAAA,EAAG,CACrD,EAAA,EAAA,QAAA,CAAS,KACZ,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,sCACE,UAAW,EAAA,EAAA,MAAA,EAAQ,UAAU,CAChC,CAAA,sCACC,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,2BAAwB,KAAO,EAAA,QAAA,CAAS,SAAS,CACpD,CAAA,sCACC,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,QAAA,CAAS,OAAU,GAAA,QAAA,CAAS,UAAU,QAAS,CAAA,OAAA;AAAA,KAAA;AAAA,GAE1D,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuestionsTable/QuestionsTable.esm.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { useTranslation, useQetaApi } from '../../utils/hooks.esm.js';
+import { WarningPanel, LinkButton, Progress } from '@backstage/core-components';
+import { Grid, Typography, ButtonGroup, Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TablePagination } from '@material-ui/core';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import { QuestionTableRow } from './QuestionTableRow.esm.js';
+
+const QuestionsTable = (props) => {
+  const [page, setPage] = React.useState(1);
+  const [questionsPerPage, setQuestionsPerPage] = React.useState(
+    props.rowsPerPage ?? 10
+  );
+  const [quickFilter, setQuickFilter] = React.useState(
+    props.quickFilter ?? "latest"
+  );
+  const [refresh, setRefresh] = React.useState(0);
+  const { t } = useTranslation();
+  const [filters, setFilters] = React.useState({
+    order: "desc",
+    orderBy: "created",
+    noAnswers: "false",
+    noCorrectAnswer: "false",
+    noVotes: "false",
+    searchQuery: "",
+    favorite: false
+  });
+  const {
+    value: response,
+    loading,
+    error
+  } = useQetaApi(
+    (api) => api.getPosts({
+      type: "question",
+      limit: questionsPerPage,
+      offset: (page - 1) * questionsPerPage,
+      includeEntities: true,
+      ...filters
+    }),
+    [page, filters, questionsPerPage, refresh]
+  );
+  const handleQuickFilterChange = (filter) => {
+    setQuickFilter(filter);
+    if (filter === "latest") {
+      setFilters({
+        ...filters,
+        order: "desc",
+        orderBy: "created",
+        favorite: false
+      });
+    } else if (filter === "favorites") {
+      setFilters({
+        ...filters,
+        order: "desc",
+        orderBy: "created",
+        favorite: true
+      });
+    } else if (filter === "most_viewed") {
+      setFilters({
+        ...filters,
+        order: "desc",
+        orderBy: "views",
+        favorite: false
+      });
+    }
+  };
+  const handleChangePage = (_, newPage) => {
+    setPage(newPage + 1);
+  };
+  const handleChangeRowsPerPage = (event) => {
+    setQuestionsPerPage(parseInt(event.target.value, 10));
+    setPage(1);
+  };
+  if (error || response === void 0) {
+    return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("questionsTable.errorLoading") }, error?.message);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "center",
+      style: { marginBottom: "1em" },
+      className: "qetaQuestionsTableGrid"
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, props.hideTitle === true ? null : /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, t("pluginName"))),
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(ButtonGroup, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: quickFilter === "latest" ? "primary" : void 0,
+        onClick: () => handleQuickFilterChange("latest")
+      },
+      t("questionsTable.latest")
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: quickFilter === "favorites" ? "primary" : void 0,
+        onClick: () => handleQuickFilterChange("favorites")
+      },
+      t("questionsTable.favorites")
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: quickFilter === "most_viewed" ? "primary" : void 0,
+        onClick: () => handleQuickFilterChange("most_viewed")
+      },
+      t("questionsTable.mostViewed")
+    )), /* @__PURE__ */ React.createElement(
+      LinkButton,
+      {
+        to: "#",
+        variant: "text",
+        onClick: () => setRefresh(refresh + 1)
+      },
+      /* @__PURE__ */ React.createElement(RefreshIcon, null)
+    ))
+  ), /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, { className: "qetaQuestionsTable" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, t("questionsTable.cells.title")), /* @__PURE__ */ React.createElement(TableCell, null, t("questionsTable.cells.author")), /* @__PURE__ */ React.createElement(TableCell, null, t("questionsTable.cells.asked")), /* @__PURE__ */ React.createElement(TableCell, null, t("questionsTable.cells.updated")))), /* @__PURE__ */ React.createElement(TableBody, null, loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, response.posts.map((q) => /* @__PURE__ */ React.createElement(QuestionTableRow, { question: q })))), /* @__PURE__ */ React.createElement(
+    TablePagination,
+    {
+      rowsPerPageOptions: [5, 10, 20, 30, 40, 50],
+      component: "div",
+      count: response.total,
+      rowsPerPage: questionsPerPage,
+      page: page - 1,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage
+    }
+  )));
+};
+
+export { QuestionsTable };
+//# sourceMappingURL=QuestionsTable.esm.js.map

package/dist/components/QuestionsTable/QuestionsTable.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionsTable.esm.js","sources":["../../../src/components/QuestionsTable/QuestionsTable.tsx"],"sourcesContent":["import React from 'react';\nimport { useQetaApi, useTranslation } from '../../utils/hooks';\nimport { LinkButton, Progress, WarningPanel } from '@backstage/core-components';\nimport {\n  Button,\n  ButtonGroup,\n  Grid,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TablePagination,\n  TableRow,\n  Typography,\n} from '@material-ui/core';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { QuestionTableRow } from './QuestionTableRow';\n\ntype QuickFilterType = 'latest' | 'favorites' | 'most_viewed';\n\nexport const QuestionsTable = (props: {\n  hideTitle?: boolean;\n  rowsPerPage?: number;\n  quickFilter?: QuickFilterType;\n}) => {\n  const [page, setPage] = React.useState(1);\n  const [questionsPerPage, setQuestionsPerPage] = React.useState(\n    props.rowsPerPage ?? 10,\n  );\n  const [quickFilter, setQuickFilter] = React.useState(\n    props.quickFilter ?? 'latest',\n  );\n  const [refresh, setRefresh] = React.useState(0);\n  const { t } = useTranslation();\n  const [filters, setFilters] = React.useState({\n    order: 'desc',\n    orderBy: 'created',\n    noAnswers: 'false',\n    noCorrectAnswer: 'false',\n    noVotes: 'false',\n    searchQuery: '',\n    favorite: false,\n  });\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getPosts({\n        type: 'question',\n        limit: questionsPerPage,\n        offset: (page - 1) * questionsPerPage,\n        includeEntities: true,\n        ...(filters as any),\n      }),\n    [page, filters, questionsPerPage, refresh],\n  );\n\n  const handleQuickFilterChange = (filter: QuickFilterType) => {\n    setQuickFilter(filter);\n    if (filter === 'latest') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: false,\n      });\n    } else if (filter === 'favorites') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: true,\n      });\n    } else if (filter === 'most_viewed') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'views',\n        favorite: false,\n      });\n    }\n  };\n\n  const handleChangePage = (_: unknown, newPage: number) => {\n    setPage(newPage + 1);\n  };\n\n  const handleChangeRowsPerPage = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    setQuestionsPerPage(parseInt(event.target.value, 10));\n    setPage(1);\n  };\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('questionsTable.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        style={{ marginBottom: '1em' }}\n        className=\"qetaQuestionsTableGrid\"\n      >\n        <Grid item>\n          {props.hideTitle === true ? null : (\n            <Typography variant=\"h5\">{t('pluginName')}</Typography>\n          )}\n        </Grid>\n        <Grid item>\n          <ButtonGroup>\n            <Button\n              color={quickFilter === 'latest' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('latest')}\n            >\n              {t('questionsTable.latest')}\n            </Button>\n            <Button\n              color={quickFilter === 'favorites' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('favorites')}\n            >\n              {t('questionsTable.favorites')}\n            </Button>\n            <Button\n              color={quickFilter === 'most_viewed' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('most_viewed')}\n            >\n              {t('questionsTable.mostViewed')}\n            </Button>\n          </ButtonGroup>\n          <LinkButton\n            to=\"#\"\n            variant=\"text\"\n            onClick={() => setRefresh(refresh + 1)}\n          >\n            <RefreshIcon />\n          </LinkButton>\n        </Grid>\n      </Grid>\n      <TableContainer>\n        <Table className=\"qetaQuestionsTable\">\n          <TableHead>\n            <TableRow>\n              <TableCell>{t('questionsTable.cells.title')}</TableCell>\n              <TableCell>{t('questionsTable.cells.author')}</TableCell>\n              <TableCell>{t('questionsTable.cells.asked')}</TableCell>\n              <TableCell>{t('questionsTable.cells.updated')}</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {loading ? <Progress /> : null}\n            {response.posts.map(q => (\n              <QuestionTableRow question={q} />\n            ))}\n          </TableBody>\n        </Table>\n        <TablePagination\n          rowsPerPageOptions={[5, 10, 20, 30, 40, 50]}\n          component=\"div\"\n          count={response.total}\n          rowsPerPage={questionsPerPage}\n          page={page - 1}\n          onPageChange={handleChangePage}\n          onRowsPerPageChange={handleChangeRowsPerPage}\n        />\n      </TableContainer>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js

@@ -0,0 +1,22 @@
+import { Tooltip } from '@material-ui/core';
+import React, { useEffect } from 'react';
+import RelativeTime from 'react-relative-time';
+
+const RelativeTimeWithTooltip = (props) => {
+  const { value } = props;
+  let date = value;
+  const [updates, setUpdates] = React.useState(1);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setUpdates(updates === 1 ? 0 : 1);
+    }, 3e4);
+    return () => clearInterval(interval);
+  }, [updates, setUpdates]);
+  if (typeof date === "string" || date instanceof String) {
+    date = new Date(date);
+  }
+  return /* @__PURE__ */ React.createElement(Tooltip, { title: date.toLocaleString(navigator.languages) }, /* @__PURE__ */ React.createElement(RelativeTime, { value: date }));
+};
+
+export { RelativeTimeWithTooltip };
+//# sourceMappingURL=RelativeTimeWithTooltip.esm.js.map

package/dist/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTimeWithTooltip.esm.js","sources":["../../../src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx"],"sourcesContent":["import { Tooltip } from '@material-ui/core';\nimport React, { useEffect } from 'react';\n// @ts-ignore\nimport RelativeTime from 'react-relative-time';\n\nexport const RelativeTimeWithTooltip = (props: { value: Date | string }) => {\n  const { value } = props;\n  let date = value;\n  const [updates, setUpdates] = React.useState(1);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setUpdates(updates === 1 ? 0 : 1);\n    }, 30000);\n    return () => clearInterval(interval);\n  }, [updates, setUpdates]);\n\n  if (typeof date === 'string' || date instanceof String) {\n    date = new Date(date);\n  }\n\n  return (\n    <Tooltip title={date.toLocaleString(navigator.languages)}>\n      <RelativeTime value={date} />\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;AAKa,MAAA,uBAAA,GAA0B,CAAC,KAAoC,KAAA;AAC1E,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAA,IAAI,IAAO,GAAA,KAAA,CAAA;AACX,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAE9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAW,UAAA,CAAA,OAAA,KAAY,CAAI,GAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AAAA,OAC/B,GAAK,CAAA,CAAA;AACR,IAAO,OAAA,MAAM,cAAc,QAAQ,CAAA,CAAA;AAAA,GAClC,EAAA,CAAC,OAAS,EAAA,UAAU,CAAC,CAAA,CAAA;AAExB,EAAA,IAAI,OAAO,IAAA,KAAS,QAAY,IAAA,IAAA,YAAgB,MAAQ,EAAA;AACtD,IAAO,IAAA,GAAA,IAAI,KAAK,IAAI,CAAA,CAAA;AAAA,GACtB;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,IAAA,CAAK,cAAe,CAAA,SAAA,CAAU,SAAS,CAAA,EAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,KAAO,EAAA,IAAA,EAAM,CAC7B,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/StatsChart/StatsChart.esm.js

@@ -0,0 +1,245 @@
+import React, { useCallback } from 'react';
+import { ResponsiveContainer, BarChart, Tooltip, Bar, CartesianGrid, XAxis, YAxis, Legend, LineChart, Line } from 'recharts';
+import { makeStyles, createStyles, Typography, ButtonGroup, IconButton } from '@material-ui/core';
+import { useTranslation, useIsDarkTheme } from '../../utils/hooks.esm.js';
+import ShowChartIcon from '@material-ui/icons/ShowChart';
+import BarChartIcon from '@material-ui/icons/BarChart';
+
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    tooltipLabel: {
+      color: theme.palette.text.primary
+    },
+    tooltipWrapper: {
+      backgroundColor: `${theme.palette.background.default} !important`,
+      border: "none !important"
+    },
+    xAxis: {
+      color: `${theme.palette.text.primary} !important`
+    }
+  })
+);
+const isGlobalStat = (stat) => {
+  return stat.totalUsers !== void 0;
+};
+const DEFAULT_STATS = [
+  {
+    dataKey: "totalViews",
+    name: "Total views",
+    color: "#8884d8",
+    enabled: false,
+    globalStat: false
+  },
+  {
+    dataKey: "totalQuestions",
+    name: "Total questions",
+    color: "#82ca9d",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalAnswers",
+    name: "Total answers",
+    color: "#ff7300",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalComments",
+    name: "Total comments",
+    color: "#739973",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalVotes",
+    name: "Total votes",
+    color: "#d88884",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalUsers",
+    name: "Total users",
+    color: "#ff0000",
+    enabled: true,
+    globalStat: true
+  },
+  {
+    dataKey: "totalTags",
+    name: "Total tags",
+    color: "#ff00ff",
+    enabled: true,
+    globalStat: true
+  },
+  {
+    dataKey: "totalArticles",
+    name: "Total articles",
+    color: "#00ff00",
+    enabled: true,
+    globalStat: false
+  }
+];
+const useChartState = (data) => {
+  const styles = useStyles();
+  const isDark = useIsDarkTheme();
+  const globalStats = isGlobalStat(data[0]);
+  const [stats, setStats] = React.useState(
+    DEFAULT_STATS.filter((stat) => {
+      return globalStats || !stat.globalStat;
+    })
+  );
+  const toggleStat = useCallback(
+    (name) => {
+      setStats(
+        (prev) => prev.map(
+          (stat) => stat.name === name ? { ...stat, enabled: !stat.enabled } : stat
+        )
+      );
+    },
+    [setStats]
+  );
+  const isDisabled = useCallback(
+    (name) => {
+      return stats.find((stat) => stat.name === name)?.enabled === false;
+    },
+    [stats]
+  );
+  return { styles, isDark, toggleStat, stats, isDisabled };
+};
+const StatsBarChart = (props) => {
+  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(
+    props.data
+  );
+  return /* @__PURE__ */ React.createElement(ResponsiveContainer, { height: 400, width: "100%" }, /* @__PURE__ */ React.createElement(BarChart, { data: props.data, width: 900, height: 300 }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelClassName: styles.tooltipLabel,
+      wrapperClassName: styles.tooltipWrapper,
+      cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" }
+    }
+  ), stats.map((stat) => /* @__PURE__ */ React.createElement(
+    Bar,
+    {
+      key: stat.dataKey,
+      dataKey: stat.enabled ? stat.dataKey : "hidden",
+      name: stat.name,
+      fill: stat.color
+    }
+  )), /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: "#ccc" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "date",
+      tickFormatter: (tick) => new Date(tick).toDateString(),
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    YAxis,
+    {
+      allowDecimals: false,
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      verticalAlign: "top",
+      height: 36,
+      wrapperStyle: { cursor: "pointer" },
+      formatter: (data) => {
+        return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
+      },
+      onClick: (data) => {
+        if (data.value) {
+          toggleStat(data.value);
+        }
+      }
+    }
+  )));
+};
+const StatsLineChart = (props) => {
+  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(
+    props.data
+  );
+  return /* @__PURE__ */ React.createElement(ResponsiveContainer, { height: 400, width: "100%" }, /* @__PURE__ */ React.createElement(LineChart, { data: props.data, width: 900, height: 300 }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelClassName: styles.tooltipLabel,
+      wrapperClassName: styles.tooltipWrapper,
+      cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" }
+    }
+  ), stats.map((stat) => /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      key: stat.dataKey,
+      dataKey: stat.enabled ? stat.dataKey : "hidden",
+      name: stat.name,
+      stroke: stat.color
+    }
+  )), /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: "#ccc" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "date",
+      tickFormatter: (tick) => new Date(tick).toDateString(),
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    YAxis,
+    {
+      allowDecimals: false,
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      verticalAlign: "top",
+      height: 36,
+      wrapperStyle: { cursor: "pointer" },
+      formatter: (data) => {
+        return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
+      },
+      onClick: (data) => {
+        if (data.value) {
+          toggleStat(data.value);
+        }
+      }
+    }
+  )));
+};
+const StatsChart = (props) => {
+  const { t } = useTranslation();
+  const [chart, setChart] = React.useState("line");
+  if (!props.data || props.data.length === 0) {
+    return /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, t("stats.noStats"));
+  }
+  const data = props.data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()).map((d) => ({ ...d, hidden: 0 }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, chart === "line" ? /* @__PURE__ */ React.createElement(StatsLineChart, { data }) : /* @__PURE__ */ React.createElement(StatsBarChart, { data }), /* @__PURE__ */ React.createElement(ButtonGroup, { "aria-label": "Chart type", style: { float: "right" } }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "Line chart",
+      onClick: () => {
+        setChart("line");
+      }
+    },
+    /* @__PURE__ */ React.createElement(ShowChartIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "Bar chart",
+      onClick: () => {
+        setChart("bar");
+      }
+    },
+    /* @__PURE__ */ React.createElement(BarChartIcon, null)
+  )));
+};
+
+export { StatsChart };
+//# sourceMappingURL=StatsChart.esm.js.map

package/dist/components/StatsChart/StatsChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  GlobalStat,\n  Stat,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n} from '@material-ui/core';\nimport { useIsDarkTheme, useTranslation } from '../../utils/hooks';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    tooltipLabel: {\n      color: theme.palette.text.primary,\n    },\n    tooltipWrapper: {\n      backgroundColor: `${theme.palette.background.default} !important`,\n      border: 'none !important',\n    },\n    xAxis: {\n      color: `${theme.palette.text.primary} !important`,\n    },\n  }),\n);\n\nconst isGlobalStat = (stat: Stat): stat is GlobalStat => {\n  return (stat as GlobalStat).totalUsers !== undefined;\n};\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n};\n\nconst DEFAULT_STATS: StatType[] = [\n  {\n    dataKey: 'totalViews',\n    name: 'Total views',\n    color: '#8884d8',\n    enabled: false,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: 'Total questions',\n    color: '#82ca9d',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: 'Total answers',\n    color: '#ff7300',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalComments',\n    name: 'Total comments',\n    color: '#739973',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: 'Total votes',\n    color: '#d88884',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: 'Total users',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: true,\n  },\n  {\n    dataKey: 'totalTags',\n    name: 'Total tags',\n    color: '#ff00ff',\n    enabled: true,\n    globalStat: true,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: 'Total articles',\n    color: '#00ff00',\n    enabled: true,\n    globalStat: false,\n  },\n];\n\nconst useChartState = (data: GlobalStat[] | UserStat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const globalStats = isGlobalStat(data[0]);\n  const [stats, setStats] = React.useState<StatType[]>(\n    DEFAULT_STATS.filter(stat => {\n      return globalStats || !stat.globalStat;\n    }),\n  );\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst StatsBarChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <BarChart data={props.data} width={900} height={300}>\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <LineChart data={props.data} width={900} height={300}>\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { t } = useTranslation();\n  const [chart, setChart] = React.useState<'line' | 'bar'>('line');\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <>\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup aria-label=\"Chart type\" style={{ float: 'right' }}>\n        <IconButton\n          aria-label=\"Line chart\"\n          onClick={() => {\n            setChart('line');\n          }}\n        >\n          <ShowChartIcon />\n        </IconButton>\n        <IconButton\n          aria-label=\"Bar chart\"\n          onClick={() => {\n            setChart('bar');\n          }}\n        >\n          <BarChartIcon />\n        </IconButton>\n      </ButtonGroup>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SummaryStatsGrid/SummaryStatsGrid.esm.js

@@ -0,0 +1,53 @@
+import { Grid, Card, CardContent, Typography } from '@material-ui/core';
+import React from 'react';
+import numeral from 'numeral';
+import { useTranslation } from '../../utils/hooks.esm.js';
+
+const SummaryCard = (props) => {
+  const { title, value } = props;
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, value >= 1e3 ? numeral(value).format("0.0 a") : value, /* @__PURE__ */ React.createElement(Typography, { variant: "caption", style: { marginLeft: "1rem" } }, title))));
+};
+const SummaryStatsGrid = (props) => {
+  const { stats } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.questions"),
+      value: stats.summary.totalQuestions
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.answers"),
+      value: stats.summary.totalAnswers
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.articles"),
+      value: stats.summary.totalArticles
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.comments"),
+      value: stats.summary.totalComments
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.views"),
+      value: stats.summary.totalViews
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.votes"),
+      value: stats.summary.totalVotes
+    }
+  )));
+};
+
+export { SummaryStatsGrid };
+//# sourceMappingURL=SummaryStatsGrid.esm.js.map

package/dist/components/SummaryStatsGrid/SummaryStatsGrid.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryStatsGrid.esm.js","sources":["../../../src/components/SummaryStatsGrid/SummaryStatsGrid.tsx"],"sourcesContent":["import { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport { StatisticsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport numeral from 'numeral';\nimport { useTranslation } from '../../utils/hooks';\n\nconst SummaryCard = (props: { title: string; value: number }) => {\n  const { title, value } = props;\n  return (\n    <Card>\n      <CardContent>\n        <Typography variant=\"h5\">\n          {value >= 1000 ? numeral(value).format('0.0 a') : value}\n          <Typography variant=\"caption\" style={{ marginLeft: '1rem' }}>\n            {title}\n          </Typography>\n        </Typography>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const SummaryStatsGrid = (props: { stats: StatisticsResponse }) => {\n  const { stats } = props;\n  const { t } = useTranslation();\n  return (\n    <Grid container>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.questions')}\n          value={stats.summary.totalQuestions}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.answers')}\n          value={stats.summary.totalAnswers}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.articles')}\n          value={stats.summary.totalArticles}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.comments')}\n          value={stats.summary.totalComments}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.views')}\n          value={stats.summary.totalViews}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.votes')}\n          value={stats.summary.totalVotes}\n        />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,WAAA,GAAc,CAAC,KAA4C,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EACjB,KAAS,IAAA,GAAA,GAAO,OAAQ,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GAAI,KAClD,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,MAAO,EAAA,EAAA,EACvD,KACH,CACF,CACF,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,gBAAA,GAAmB,CAAC,KAAyC,KAAA;AACxE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,MAC1B,KAAA,EAAO,MAAM,OAAQ,CAAA,cAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,eAAe,CAAA;AAAA,MACxB,KAAA,EAAO,MAAM,OAAQ,CAAA,YAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,MACzB,KAAA,EAAO,MAAM,OAAQ,CAAA,aAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,MACzB,KAAA,EAAO,MAAM,OAAQ,CAAA,aAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,aAAa,CAAA;AAAA,MACtB,KAAA,EAAO,MAAM,OAAQ,CAAA,UAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,aAAa,CAAA;AAAA,MACtB,KAAA,EAAO,MAAM,OAAQ,CAAA,UAAA;AAAA,KAAA;AAAA,GAEzB,CACF,CAAA,CAAA;AAEJ;;;;"}