refactor: break AspectsSidebar into components, setup proper linting

Author: tecoholic

.eslintignore

@@ -1,4 +1,5 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
+jest.config.js
+babel.config.js

.eslintrc.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('eslint');
+module.exports = {
+  extends: '@edx/eslint-config',
+};

package-lock.json

@@ -14,8 +14,8 @@
     "preinstall": "npm run build",
     "build": "fedx-scripts babel -x .js,.jsx,.ts,.tsx src --out-dir dist --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js && cp src/*.css dist/",
     "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
   "husky": {
@@ -58,9 +58,21 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
+    "@edx/eslint-config": "^4.3.0",
+    "@edx/typescript-config": "^1.1.0",
     "@openedx/frontend-build": "14.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "glob": "11.0.1",
     "husky": "9.1.7",
-    "jest": "29.7.0"
+    "jest": "29.7.0",
+    "typescript": "^4.9.5"
   }
 }

package.json

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Icon } from '@openedx/paragon';
+import { ArrowDropDown, ArrowDropUp, ChevronRight } from '@openedx/paragon/icons';
+import { Block } from '../../hooks';
+import messages from '../../messages';
+
+interface CourseContentListProps {
+  title: string,
+  contentList?: Block[] | null,
+  icon: React.FC,
+  activateDashboard: (block: Block) => void,
+}
+
+export function CourseContentList({
+  title, contentList, icon, activateDashboard,
+}: CourseContentListProps) {
+  const intl = useIntl();
+  // using undefined is useful for slicing the list
+  const [showCount, setShowCount] = React.useState<number | undefined>(5);
+
+  if (!contentList?.length) {
+    return null;
+  }
+
+  return (
+    <div className="d-flex flex-column rounded-bottom py-4 px-3 bg-white border-top border-light">
+      <h4 className="h4 mb-4">{title}</h4>
+      {contentList?.slice(0, showCount).map(block => (
+        <Button
+          key={block.id}
+          className="d-flex flex-row justify-content-start flex-grow-1 mb-2 py-1 px-0"
+          variant="inline"
+          onClick={() => activateDashboard(block)}
+        >
+          <h5 className="h5 flex-grow-1 text-left d-flex align-items-center">
+            <Icon
+              src={icon}
+              size="xs"
+              className="mr-2 text-gray"
+              aria-hidden
+            />
+            <span>{block.displayName || block.name}</span>
+          </h5>
+          <Icon src={ChevronRight} aria-hidden />
+        </Button>
+      ))}
+      {(contentList?.length > 5) && (
+        <Button
+          variant="tertiary"
+          size="sm"
+          iconAfter={showCount === 5 ? ArrowDropDown : ArrowDropUp}
+          onClick={() => setShowCount(showCount === 5 ? undefined : 5)}
+        >
+          {showCount === 5 ? intl.formatMessage(messages.showMore) : intl.formatMessage(messages.showLess)}
+        </Button>
+      )}
+    </div>
+  );
+}