Repository: open-sauced/insights (ts)

Issue:
Feature: Camelcase Javascript to JavaScript
### Type of feature

🍕 Feature

### Current behavior

This is not a priority but wanted to add this to the Papercut backlog. 

Places we need this applied, 
- Interests in profiles
- Interests in profile settings
- Insights explore dashboard

<img width="374" alt="Screen Shot 2023-01-31 at 3 09 42 PM" src="https://user-images.githubusercontent.com/5713670/215911414-9e508e9f-9c7f-4db3-bdcf-cc25c66c0ea4.png">
<img width="317" alt="Screen Shot 2023-01-31 at 3 11 47 PM" src="https://user-images.githubusercontent.com/5713670/215911490-3271e23d-f420-4b8a-8f61-e6dc18bd40a7.png">
<img width="671" alt="Screen Shot 2023-01-31 at 3 09 50 PM" src="https://user-images.githubusercontent.com/5713670/215911557-aeb45e2b-b069-4aed-b3b2-1cfb974718a0.png">


### Suggested solution

We have a solution in the hot repo for this, but we would need to sanitize content coming from the GitHub API. I believe everything is lowercase. 

https://github.com/open-sauced/hot/blob/beta/src/lib/camelCaseToTitleCase.ts



### Additional context

_No response_

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Contributing Docs

- [ ] I agree to follow this project's Contribution Docs

Pull request description:
feat: add utility function to camelcase topic value
<!--
  For Work In Progress Pull Requests, please use the Draft PR feature,
  see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
  
  For a timely review/response, please avoid force-pushing additional
  commits if your PR already received reviews or comments.
  
  Before submitting a Pull Request, please ensure you've done the following:
  - 📖 Read the Open Sauced Contributing Guide: https://github.com/open-sauced/open-sauced/blob/HEAD/CONTRIBUTING.md#create-a-pull-request.
  - 📖 Read the Open Sauced Code of Conduct: https://github.com/open-sauced/open-sauced/blob/HEAD/CODE_OF_CONDUCT.md.
  - 👷‍♀️ Create small PRs. In most cases, this will be possible.
  - ✅ Provide tests for your changes.
  - 📝 Use descriptive commit messages.
  - 📗 Update any related documentation and include any relevant screenshots.
-->

## What type of PR is this? (check all applicable)

- [ ] 🍕 Feature
- [ ] 🐛 Bug Fix
- [ ] 📝 Documentation Update
- [x] 🎨 Style
- [ ] 🧑‍💻 Code Refactor
- [ ] 🔥 Performance Improvements
- [ ] ✅ Test
- [ ] 🤖 Build
- [ ] 🔁 CI
- [ ] 📦 Chore (Release)
- [ ] ⏩ Revert

## Description
Converts 'Javascript' into 'JavaScript' in language pill component and in FilterLayout header
<!-- 
Please do not leave this blank 
This PR [adds/removes/fixes/replaces] the [feature/bug/etc]. 
-->

## Related Tickets & Documents
<!-- 
Please use this format link issue numbers: Fixes #123
https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword 
-->
Fixes #822
## Mobile & Desktop Screenshots/Recordings

<!-- Visual changes require screenshots -->


## Added tests?

- [ ] 👍 yes
- [ ] 🙅 no, because they aren't needed
- [ ] 🙋 no, because I need help

## Added to documentation?

- [ ] 📜 README.md
- [ ] 📓 docs.opensauced.pizza
- [ ] 🍕 dev.to/opensauced
- [ ] 📕 storybook
- [ ] 🙅 no documentation needed

## [optional] Are there any post-deployment tasks we need to perform?



## [optional] What gif best describes this PR or how it makes you feel?



<!-- note: PRs with deleted sections will be marked invalid -->



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80e22538..a3b7122e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.29.0-beta.3](https://github.com/open-sauced/insights/compare/v1.29.0-beta.2...v1.29.0-beta.3) (2023-02-09)
+
+
+### 🍕 Features
+
+* add highlights feed filter card to design system ([#843](https://github.com/open-sauced/insights/issues/843)) ([b4d0eba](https://github.com/open-sauced/insights/commit/b4d0eba0ca068b03a78290d920496c8737f6813d)), closes [#827](https://github.com/open-sauced/insights/issues/827)
+
 ## [1.29.0-beta.2](https://github.com/open-sauced/insights/compare/v1.29.0-beta.1...v1.29.0-beta.2) (2023-02-09)
 
 
diff --git a/components/atoms/LanguagePill/LanguagePill.tsx b/components/atoms/LanguagePill/LanguagePill.tsx
index 33e2c90b..f28e90ed 100644
--- a/components/atoms/LanguagePill/LanguagePill.tsx
+++ b/components/atoms/LanguagePill/LanguagePill.tsx
@@ -7,6 +7,7 @@ import PythonIcon from "/img/icons/🐍.svg";
 import AIIcon from "/img/icons/🤖.svg";
 import MLIcon from "/img/icons/🧠.svg";
 import RustIcon from "/img/icons/🦀.svg";
+import checkCamelCaseNaming from "lib/utils/check-camelcase-naming";
 
 interface LanguagePillProps {
   topic: "react" | "javascript" | "python" | "ML" | "AI" | "rust" | string;
@@ -26,6 +27,7 @@ const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => {
 
     return iconMap[name] || "";
   };
+
   return (
     <div
       onClick={onClick}
@@ -34,7 +36,7 @@ const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => {
       }`}
     >
       <Image src={renderTopicIcon(topic)} alt={topic} />
-      <span className="font-normal capitalize">{topic}</span>
+      <span className="font-normal capitalize">{checkCamelCaseNaming(topic)}</span>
     </div>
   );
 };
diff --git a/components/molecules/FilterHeader/filter-header.tsx b/components/molecules/FilterHeader/filter-header.tsx
index b96e467f..39ec782d 100644
--- a/components/molecules/FilterHeader/filter-header.tsx
+++ b/components/molecules/FilterHeader/filter-header.tsx
@@ -12,6 +12,7 @@ import useFilterOptions from "lib/hooks/useFilterOptions";
 import { captureAnayltics } from "lib/utils/analytics";
 import useFilterPrefetch from "lib/hooks/useFilterPrefetch";
 import uppercaseFirst from "lib/utils/uppercase-first";
+import checkCamelCaseNaming from "lib/utils/check-camelcase-naming";
 
 const HeaderFilter = () => {
   const router = useRouter();
@@ -35,7 +36,7 @@ const HeaderFilter = () => {
       </div>
       <div className="header-info flex flex-col grow justify-center p-2">
         <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
-          {isHacktoberfest ? "Hacktoberfest 2022" : uppercaseFirst(filterName as string)}
+          {isHacktoberfest ? "Hacktoberfest 2022" : checkCamelCaseNaming(filterName as string)}
         </Title>
         <Text className="mt-1 !text-base   text-slate-500">
           Insights on GitHub repositories{" "}
diff --git a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
new file mode 100644
index 00000000..a342cc1b
--- /dev/null
+++ b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx
@@ -0,0 +1,52 @@
+import Title from "components/atoms/Typography/title";
+import TestRepoAvatar from "img/icons/test-repo-avatar.svg";
+import Icon from "components/atoms/Icon/icon";
+
+const HighlightsFilterCard = (): JSX.Element => {
+  const testRepoList = [
+    {
+      repoName: "opensauced",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "Contentful",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "StrapiJs",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "javascript",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "reactjs",
+      repoIcon: TestRepoAvatar
+    },
+    {
+      repoName: "facebook",
+      repoIcon: TestRepoAvatar
+    }
+  ];
+  return (
+    <div className="py-4 px-6 rounded-lg  border w-[18.625rem]">
+      <Title className="!font-normal" level={3}>
+        Repositories
+      </Title>
+      <p className="text-sm text-light-slate-11 mb-2 font-normal">Click to filter the highlights</p>
+      <div className="flex flex-col border-t pt-4 gap-2">
+        {testRepoList.map(({ repoName, repoIcon }) => (
+          <div
+            key={""}
+            className="flex hover:border-orange-600 hover:bg-orange-200 cursor-pointer gap-1 w-max  p-1 pr-2 border-[1px] border-light-slate-6 rounded-lg text-light-slate-12"
+          >
+            <Icon IconImage={repoIcon} className="rounded-[4px] overflow-hidden" />
+            <span className="max-w-[45px] md:max-w-[100px] truncate text-xs ">{repoName}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default HighlightsFilterCard;
diff --git a/lib/utils/check-camelcase-naming.ts b/lib/utils/check-camelcase-naming.ts
new file mode 100644
index 00000000..a98db444
--- /dev/null
+++ b/lib/utils/check-camelcase-naming.ts
@@ -0,0 +1,11 @@
+import uppercaseFirst from "./uppercase-first";
+
+/** Checks the input and if it should be camelcased, it will camelcase it. Uppercases the output. */
+const checkCamelCaseNaming = (name: string) => {
+  if (!name) return "";
+
+  if(name.toLowerCase() == "javascript") return "JavaScript";
+  else return uppercaseFirst(name);
+};
+
+export default checkCamelCaseNaming;
\ No newline at end of file
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index d015aef4..f2022b75 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
   "name": "@open-sauced/insights",
-  "version": "1.29.0-beta.2",
+  "version": "1.29.0-beta.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@open-sauced/insights",
-      "version": "1.29.0-beta.2",
+      "version": "1.29.0-beta.3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index d97defec..71526c46 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@open-sauced/insights",
   "description": "🍕The dashboard for open source discovery.",
   "keywords": [],
-  "version": "1.29.0-beta.2",
+  "version": "1.29.0-beta.3",
   "author": "TED Vortex <ted.vortex@gmail.com>",
   "private": true,
   "license": "MIT",
diff --git a/stories/molecules/highlights-filter-card.stories.tsx b/stories/molecules/highlights-filter-card.stories.tsx
new file mode 100644
index 00000000..68ca6241
--- /dev/null
+++ b/stories/molecules/highlights-filter-card.stories.tsx
@@ -0,0 +1,16 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { ComponentStory } from "@storybook/react";
+import HighlightsFilterCard from "components/molecules/HighlightsFeedCard/highlights-filter-card";
+
+const StoryConfig = {
+  title: "Design System/Molecules/HighlightsFilterCard"
+};
+export default StoryConfig;
+
+const HighlightsFilterCardTemplate: ComponentStory<typeof HighlightsFilterCard> = () => (
+  <TooltipProvider>
+    <HighlightsFilterCard />
+  </TooltipProvider>
+);
+
+export const Default = HighlightsFilterCardTemplate.bind({});


Test patch:
diff --git a/tests/lib/utils/check-camelcase-naming.test.ts b/tests/lib/utils/check-camelcase-naming.test.ts
new file mode 100644
index 00000000..03cbc073
--- /dev/null
+++ b/tests/lib/utils/check-camelcase-naming.test.ts
@@ -0,0 +1,15 @@
+import checkCamelCaseNaming from "lib/utils/check-camelcase-naming";
+
+describe("[lib] checkCamelCaseNaming()", () => {
+  it("should make javascript camelCase and uppercase first letter", () => {
+    const testString = "javascript";
+    const result = checkCamelCaseNaming(testString);
+    expect(result).toBe("JavaScript");
+  });
+
+  it("should uppercase python without camelCase", () => {
+    const testString = "python";
+    const result = checkCamelCaseNaming(testString);
+    expect(result).toBe("Python");
+  });
+});