List third party code usage

[fabicastp]

Context: The website tested on the slow side for Interaction to Next Paint, which is often affected by third-party code. We will review to either limit or remove the scope of scripts that aren’t necessary.

To do: List the marketing scripts we use on the website.

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/sourcegraph/3436/tickets/SGM-6777

[gitstart-sourcegraph]

Description

• List all third party code usage in the codebase.

Refs

SG Issus GitStart Ticket

To be kept

• @dotlottie/react-player: playing dot-Lottie animations on the enterprise page
• @headlessui/react: designing the Dropdown component
• @visx/* building visualization components
• classnames: joining style rules together
• d3-scale is a peer dependancy @visx/scale
• d3-time-format for date formatting D3-* are built on top of d3 library which is kind of huge, it will be better to keep them the way they are
• feed: generating feeds
• framer-motion: animating a video, it was used on the carousel component
• globby: a helper for globbing files. It's used to generate cache
• gray-matter: parsing front-matter from the MD files
• js-cookie: saving login initialization state for SSO
• mdi-react: For icons. Since most of icons are imported from this library, the @heroicons/react can be removed and migrate completely to this one.
• next-mdx-remote: loading MDX contents
• prism-themes, prismjs: used for the syntax highlighting
• rehype-autolink-headings, rehype-pretty-code, rehype-slug, and remark-gfm are peer dependencies of next-mdx-remote
• sharp: It's recommended in production for Image Optimization with Next.js
• shikiji is a peer dependency of rehype-pretty-code

Duplicated libraries

• @heroicons/react: It can be removed and replaced with mdi-react since it's the one that's used the most

To be built internally

• d3-format: trimming insignificant trailing zeros across the data displayed on graphs. There is a small usage for this, we may consider building it internal using different logic since if we use the same logic as the library we will have to use a lot of code for simple use.
• react-popper: for creating Tooltip component. usePopper is the only item imported from the library. I believe we can copy the implementation from its repo and get rid of the library.
• rxjs: Can be removed. We only import noop function which can be built internally

Unused 3rd Party Packages

• @popperjs/core: Can be removed. It has been used to provide a data type in the src/components/Tooltip.tsx file which can be built internally
• lottie-web: Can be removed. It's used in the src/components/LottiePlayer.tsx component which it's not used anywhere

[gitstart-sourcegraph]

Hi @fabicastp We have listed the dependences above.

[iskyOS]

@gitstart-sourcegraph , as a follow up to this task, can we please remove lottie-web based on your recommendation? We can consider it a new task.

lottie-web: Can be removed. It's used in the src/components/LottiePlayer.tsx component which it's not used anywhere

[iskyOS]

I think we can close this, @gitstart-sourcegraph ! I'll open a new task for the request in the comment above.