docs: Applications from popular libraries (#1)

* docs: added 8 zod applications * feat: conjunction * feat: applications in CodeExample * feat: add githubStars * docs: todo for intrinsic types * docs: added 2 react-router applications * docs: applications todo * docs: added 5 rxjs applications * docs: added 2 jest applications * docs: added array to object application from ts-pattern * refactor: move Projects to a separate React component * refactor: make applications required * docs: added 5 prisma, 3 typeorm, 1 redux, 1 trpc & 1 ts-pattern applications * docs: tick a feature * docs: added 2 typeorm applications * docs: intro update * docs: add 3 safe-units applications * docs: added 1 prisma application * docs: added 1 zod application * docs: added 1 prisma & 2 type-fest applications * refactor: update conjunction * feat: added breadcrumbs for zod applications * feat: added breadcrumbs for prisma applications * feat: added breadcrumbs for rxjs applications * feat: added breadcrumbs to ts-pattern applications * feat: added breadcrumbs for jest applications * feat: added breadcrumbs to typeorm applications * feat: added breadcrumbs to dot-path-value applications * feat: added breadcrumbs to @reduxjs/toolkit applications * feat: added breadcrumbs to 2 type-fest & 2 react-router applications * feat: added breadcrumbs to 3 trpc applications * feat: added breadcrumbs to safe-units applications
Beraliv · Dec 18, 2024 · 19821e3 · 19821e3
1 parent 83dc8c0
commit 19821e3
Show file tree

Hide file tree

Showing 6 changed files with 981 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ts-conversion
 
-Interactive website, helping engineers understand, how they can convert one type to another in TypeScript, with examples and links to TypeScript playground.
+Interactive website, helping understand, how to convert one type to another in TypeScript, with code examples, links to TypeScript playground and applications from popular libraries
 
 Try it now: https://ts-conversion.beraliv.com
 
@@ -15,14 +15,14 @@ npm install
 To start developing the project, run the dev command:
 
 ```bash
-npm run dev --host
+npm run dev -- --host
 ```
 
 ## Features
 
 - [x] 36 conversions in total
 - [x] Code snippets and links to TypeScript Playground
-- [ ] Applications from popular libraries ([_in progress_](https://github.com/Beraliv/ts-conversion/pull/1))
+- [x] Applications from popular libraries
 - [x] A list of insights
   - [x] Notes with definitions and links to TypeScript documentation
   - [x] Warnings, which highlight potential issues and how to mitigate them

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -9,6 +9,7 @@ import { NoExampleWarning } from "./NoExampleWarning";
 import { UserInput } from "./UserInput";
 
 import style from "./App.module.css";
+import { Projects } from "./Projects";
 
 function App() {
   useTrackPage();
@@ -27,6 +28,7 @@ function App() {
           <>
             <Concern />
             <CodeExample />
+            <Projects />
             <Insights />
           </>
         </div>

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -0,0 +1,69 @@
+import { useContext } from "react";
+import { map } from "../utils/map";
+import { UserInputContext } from "../contexts/UserInputContext";
+import { Link } from "./Link";
+import { conjunction } from "../utils/conjunction";
+// import { ArrowIcon } from "./icons/ArrowIcon";
+
+export const Projects = () => {
+  const { source, target } = useContext(UserInputContext);
+
+  if (!source || !target || map[source][target] === "empty") {
+    return null;
+  }
+
+  return (
+    <>
+      {map[source][target].applications.length > 0 && (
+        <div>
+          <h3>Projects</h3>
+          <span>Links to the libraries that already use this conversion:</span>
+          <ol>
+            {map[source][target].applications.map((application, i) => (
+              <li key={i}>
+                {application.library && (
+                  <span>
+                    {application.library}
+                    {": "}
+                  </span>
+                )}
+                <span>
+                  {application.breadcrumbs &&
+                    application.breadcrumbs.map(
+                      (breadcrumb, j, breadcrumbs) => (
+                        <>
+                          <Link
+                            href={breadcrumb.href}
+                            external
+                            text={breadcrumb.text}
+                          />
+
+                          {conjunction(j, breadcrumbs, {
+                            last: "",
+                            secondToLast: (
+                              <>
+                                {" "}
+                                {/* <ArrowIcon /> */}
+                                {">"}{" "}
+                              </>
+                            ),
+                            others: (
+                              <>
+                                {" "}
+                                {/* <ArrowIcon /> */}
+                                {">"}{" "}
+                              </>
+                            ),
+                          })}
+                        </>
+                      )
+                    )}
+                </span>
+              </li>
+            ))}
+          </ol>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/notes/TailRecursionEliminationNote.tsx b/src/components/notes/TailRecursionEliminationNote.tsx
@@ -1,3 +1,4 @@
+import { conjunction } from "../../utils/conjunction";
 import { Link } from "../Link";
 
 interface TailRecursionEliminationNoteProps {
@@ -20,11 +21,11 @@ export const TailRecursionEliminationNote = ({
       {props.map(({ parameterType, utilityType }, index) => (
         <span key={index}>
           <code>{parameterType}</code> in <code>{utilityType}</code>
-          {index === props.length - 2
-            ? " and "
-            : index === props.length - 1
-            ? ""
-            : ", "}
+          {conjunction(index, props, {
+            last: "",
+            secondToLast: " and ",
+            others: ", ",
+          })}
         </span>
       ))}
     </>

diff --git a/src/utils/conjunction.ts b/src/utils/conjunction.ts
@@ -0,0 +1,21 @@
+type ConjunctionOptions = {
+  last: JSX.Element | string;
+  secondToLast: JSX.Element | string;
+  others: JSX.Element | string;
+};
+
+export const conjunction = <T>(
+  index: number,
+  array: T[],
+  options: ConjunctionOptions
+): JSX.Element | string => {
+  if (index === array.length - 2) {
+    return options.secondToLast;
+  }
+
+  if (index === array.length - 1) {
+    return options.last;
+  }
+
+  return options.others;
+};