Add analytics for non-component exports (e.g., hooks) to Paragon Usage Insights

[adamstankiewicz]

Original ticket: https://openedx.atlassian.net/browse/PAR-822

Currently, the Usage Insights page only shows components that are imported by consumers. It does not display any insights into the usage of the hooks that Paragon provides (e.g., useToggle, etc.) or the breakpoints export, so we have limited visibility into whether/how consumers are using these exports.

AC

• “Summary” tab
  • Change “…with an average of X component instances per project.” to “…with an average of X imports per project.” since the aggregate number here should be about all Paragon usage, not just components.
  • Change “Overall component usage” to “Overall usage”
  • In the summary table, include all imports (e.g., from hooks and breakpoints), not just components.
    • Add new column “Type” that represents whether an import is a component, hook, or other utility function/variable (e.g., breakpoints)
    • Add ability to filter by “Type” column with checkboxes
    • Sort expandable table row contents by project name alphabetically (ascending)
• “Projects” tab
  • Change “Instance Count” in table header to “Import Count”
  • Sort expandable table row contents by component name alphabetically (ascending)
  • Add Tabs inside expandable table row to differentiate usage between “Components” and “Hooks” and “Utility” (e.g., breakpoints; open to other name suggestions!)
• “Components” tab
  • Don’t believe any changes are needed.
• Add new “Hooks” tab
  • Similar to “Components” tab, but showing hooks usage instead (e.g., useToggle, useWindowSize).
  • This should include any pass-thru hooks, as well (e.g., useMediaQuery). Refer to index.js for all exports.
• Add new “Utility” tab (open to other name suggestions!)
  • Similar to “Components” tab, showing utility imports (e.g., breakpoints, Variant)