Remove tremor from stories

src/pages/stories/Stories.tsx

@@ -1,13 +1,12 @@
-import '@tremor/react/dist/esm/tremor.css';
-
-import { Button as BpButton, Icon as BpIcon, NonIdealState } from '@blueprintjs/core';
+import { Button, InputGroup, NonIdealState } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Card, Flex, TextInput, Title } from '@tremor/react';
 import React, { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { StoriesRole } from 'src/commons/application/ApplicationTypes';
 import ContentDisplay from 'src/commons/ContentDisplay';
+import GradingFlex from 'src/commons/grading/GradingFlex';
+import GradingText from 'src/commons/grading/GradingText';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import StoriesActions from 'src/features/stories/StoriesActions';
@@ -120,23 +119,25 @@ const Stories: React.FC = () => {
     <ContentDisplay
       loadContentDispatch={() => dispatch(StoriesActions.getStoriesList())}
       display={
-        <Card>
-          <Flex justifyContent="justify-between">
-            <Flex justifyContent="justify-start" spaceX="space-x-6">
-              <Title>All Stories</Title>
+        <>
+          <GradingFlex justifyContent="space-between">
+            <GradingFlex justifyContent="flex-start" alignItems="center" style={{ columnGap: 16 }}>
+              <GradingText style={{ fontSize: '1.125rem', opacity: 0.9 }}>All Stories</GradingText>
               {isLoggedIn && (
-                <BpButton onClick={handleNewStory} icon={IconNames.PLUS}>
+                <Button onClick={handleNewStory} icon={IconNames.PLUS}>
                   Add Story
-                </BpButton>
+                </Button>
               )}
-            </Flex>
-            <TextInput
-              maxWidth="max-w-xl"
-              icon={() => <BpIcon icon={IconNames.SEARCH} style={{ marginLeft: '0.75rem' }} />}
+            </GradingFlex>
+            <InputGroup
+              className="grading-search-input"
               placeholder="Search for author..."
+              leftIcon="search"
+              large={true}
+              value={query}
               onChange={e => setQuery(e.target.value)}
             />
-          </Flex>
+          </GradingFlex>
 
           <StoriesTable
             headers={columns}
@@ -168,7 +169,7 @@ const Stories: React.FC = () => {
               );
             }}
           />
-        </Card>
+        </>
       }
     />
   );

src/pages/stories/StoriesTable.tsx

@@ -1,18 +1,14 @@
-import { Icon as BpIcon } from '@blueprintjs/core/lib/esm/components/icon/icon';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+
+import { Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import {
-  Flex,
-  Icon,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  Text
-} from '@tremor/react';
-import React from 'react';
+import { ColDef } from 'ag-grid-community';
+import { AgGridReact, CustomCellRendererProps } from 'ag-grid-react';
+import React, { useMemo } from 'react';
+import GradingFlex from 'src/commons/grading/GradingFlex';
 import { StoryListView } from 'src/features/stories/StoriesTypes';
+import classes from 'src/styles/Stories.module.scss';
 
 type Props = {
   headers: Array<{ id: string; header: string }>;
@@ -22,45 +18,63 @@ type Props = {
 
 const MAX_EXCERPT_LENGTH = 35;
 
+const truncate = (content: string) => {
+  return content.replaceAll(/\s+/g, ' ').length <= MAX_EXCERPT_LENGTH
+    ? content.replaceAll(/\s+/g, ' ')
+    : content.split(/\s+/).reduce((acc, cur) => {
+        return acc.length + cur.length <= MAX_EXCERPT_LENGTH ? acc + ' ' + cur : acc;
+      }, '') + '…';
+};
+
+const defaultColDef: ColDef<StoryListView> = {
+  cellClass: ({ data }) => (data?.isPinned ? classes['highlight-row'] : '')
+};
+
 const StoriesTable: React.FC<Props> = ({ headers, stories, storyActions }) => {
+  const columns: ColDef<StoryListView>[] = useMemo(
+    () => [
+      { flex: 2, field: 'authorName', headerName: 'Author' },
+      {
+        flex: 4,
+        field: 'title',
+        headerName: 'Title',
+        cellRenderer: ({ data, value }: CustomCellRendererProps<StoryListView>) =>
+          data && (
+            <GradingFlex alignItems="center" style={{ columnGap: 8 }}>
+              {data.isPinned && <Icon intent="primary" icon={IconNames.PIN} />}
+              {value}
+            </GradingFlex>
+          )
+      },
+      {
+        flex: 6,
+        field: 'content',
+        headerName: 'Content',
+        valueFormatter: ({ value }) => truncate(value),
+        cellStyle: { textAlign: 'left' }
+      },
+      {
+        flex: 3,
+        field: 'actions' as any,
+        headerName: 'Actions',
+        sortable: false,
+        cellRenderer: ({ data }: CustomCellRendererProps<StoryListView>) => storyActions(data!)
+      }
+    ],
+    [storyActions]
+  );
+
   return (
-    <Table marginTop="mt-10">
-      <TableHead>
-        <TableRow>
-          {headers.map(({ id, header }) => (
-            <TableHeaderCell key={id}>{header}</TableHeaderCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {stories.map(story => {
-          const { id, authorName, isPinned, title, content } = story;
-          return (
-            <TableRow key={id}>
-              <TableCell>{authorName}</TableCell>
-              <TableCell>
-                <Flex justifyContent="justify-start">
-                  {isPinned && <Icon icon={() => <BpIcon icon={IconNames.PIN} />} />}
-                  <Text>{title}</Text>
-                </Flex>
-              </TableCell>
-              <TableCell>
-                <Text>
-                  {content.replaceAll(/\s+/g, ' ').length <= MAX_EXCERPT_LENGTH
-                    ? content.replaceAll(/\s+/g, ' ')
-                    : content.split(/\s+/).reduce((acc, cur) => {
-                        return acc.length + cur.length <= MAX_EXCERPT_LENGTH
-                          ? acc + ' ' + cur
-                          : acc;
-                      }, '') + '…'}
-                </Text>
-              </TableCell>
-              <TableCell>{storyActions(story)}</TableCell>
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </Table>
+    <div className="ag-theme-quartz" style={{ marginTop: 24 }}>
+      <AgGridReact
+        rowData={stories}
+        columnDefs={columns}
+        defaultColDef={defaultColDef}
+        domLayout="autoHeight"
+        suppressMovableColumns
+        suppressCellFocus
+      />
+    </div>
   );
 };
 

src/pages/stories/Story.tsx

@@ -1,7 +1,6 @@
 import 'js-slang/dist/editors/ace/theme/source';
 
-import { Classes } from '@blueprintjs/core';
-import { TextInput } from '@tremor/react';
+import { Classes, InputGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import AceEditor, { IEditorProps } from 'react-ace';
@@ -57,8 +56,8 @@ const Story: React.FC<Props> = ({ isViewOnly = false }) => {
       isViewOnly ? (
         <>{title}</>
       ) : (
-        <TextInput
-          maxWidth="max-w-xl"
+        <InputGroup
+          className="grading-search-input"
           placeholder="Enter story title"
           value={title}
           onChange={e => {

src/pages/stories/StoryActions.tsx

@@ -1,8 +1,8 @@
-import { Icon as BpIcon } from '@blueprintjs/core';
+import { Button, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Flex, Icon } from '@tremor/react';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import GradingFlex from 'src/commons/grading/GradingFlex';
 
 type Props = {
   storyId: number;
@@ -29,69 +29,88 @@ const StoryActions: React.FC<Props> = ({
   handleMovePinUp = () => {},
   handleMovePinDown = () => {}
 }) => {
+  const navigate = useNavigate();
   return (
-    <Flex justifyContent="justify-start" spaceX="space-x-2">
+    <GradingFlex style={{ height: '100%' }}>
       {canView && (
-        <Link to={`./view/${storyId}`}>
-          <Icon
-            tooltip="View"
-            icon={() => <BpIcon icon={IconNames.EyeOpen} />}
-            variant="light"
-            color="green"
+        <Tooltip
+          targetProps={{ style: { display: 'flex' } }}
+          placement={Position.TOP}
+          content="View"
+        >
+          <Button
+            intent="success"
+            icon={IconNames.EyeOpen}
+            minimal
+            onClick={() => navigate(`./view/${storyId}`)}
           />
-        </Link>
+        </Tooltip>
       )}
       {canEdit && (
-        <Link to={`./edit/${storyId}`}>
-          <Icon
-            tooltip="Edit"
-            icon={() => <BpIcon icon={IconNames.EDIT} />}
-            variant="light"
-            color="sky"
+        <Tooltip
+          targetProps={{ style: { display: 'flex' } }}
+          placement={Position.TOP}
+          content="Edit"
+        >
+          <Button
+            intent="primary"
+            icon={IconNames.EDIT}
+            minimal
+            onClick={() => navigate(`./edit/${storyId}`)}
           />
-        </Link>
+        </Tooltip>
       )}
       {canPin && isPinned && (
         <>
-          <button style={{ padding: 0 }} onClick={() => handleMovePinUp(storyId)}>
-            <Icon
-              tooltip="Reorder up"
-              icon={() => <BpIcon icon={IconNames.ARROW_UP} />}
-              variant="light"
-              color="pink"
+          <Tooltip
+            targetProps={{ style: { display: 'flex' } }}
+            placement={Position.TOP}
+            content="Reorder up"
+          >
+            <Button icon={IconNames.ARROW_UP} minimal onClick={() => handleMovePinUp(storyId)} />
+          </Tooltip>
+          <Tooltip
+            targetProps={{ style: { display: 'flex' } }}
+            placement={Position.TOP}
+            content="Reorder down"
+          >
+            <Button
+              icon={IconNames.ARROW_DOWN}
+              minimal
+              onClick={() => handleMovePinDown(storyId)}
             />
-          </button>
-          <button style={{ padding: 0 }} onClick={() => handleMovePinDown(storyId)}>
-            <Icon
-              tooltip="Reorder down"
-              icon={() => <BpIcon icon={IconNames.ARROW_DOWN} />}
-              variant="light"
-              color="pink"
-            />
-          </button>
+          </Tooltip>
         </>
       )}
       {canPin && (
-        <button style={{ padding: 0 }} onClick={() => handleTogglePin(storyId)}>
-          <Icon
-            tooltip={isPinned ? 'Unpin' : 'Pin'}
-            icon={() => <BpIcon icon={isPinned ? IconNames.EXCLUDE_ROW : IconNames.PIN} />}
-            variant="light"
-            color="indigo"
+        <Tooltip
+          targetProps={{ style: { display: 'flex' } }}
+          placement={Position.TOP}
+          content={isPinned ? 'Unpin' : 'Pin'}
+        >
+          <Button
+            intent="warning"
+            icon={isPinned ? IconNames.EXCLUDE_ROW : IconNames.PIN}
+            minimal
+            onClick={() => handleTogglePin(storyId)}
           />
-        </button>
+        </Tooltip>
       )}
       {canDelete && (
-        <button style={{ padding: 0 }} onClick={() => handleDeleteStory(storyId)}>
-          <Icon
-            tooltip="Delete"
-            icon={() => <BpIcon icon={IconNames.TRASH} />}
-            variant="light"
-            color="red"
+        <Tooltip
+          targetProps={{ style: { display: 'flex' } }}
+          placement={Position.TOP}
+          content="Delete"
+        >
+          <Button
+            intent="danger"
+            icon={IconNames.TRASH}
+            minimal
+            onClick={() => handleDeleteStory(storyId)}
           />
-        </button>
+        </Tooltip>
       )}
-    </Flex>
+    </GradingFlex>
   );
 };
 

src/styles/Stories.module.scss

@@ -0,0 +1,5 @@
+@import '_global';
+
+.highlight-row {
+  background-color: #e0f2fe;
+}