Skip to content

Commit

Permalink
Merge pull request #43 from DopamineDriven/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
DopamineDriven authored Dec 3, 2024
2 parents cd2c4cb + 16d37f2 commit f05d165
Show file tree
Hide file tree
Showing 12 changed files with 566 additions and 258 deletions.
5 changes: 5 additions & 0 deletions .changeset/swift-planets-play.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@fade/booksy": minor
---

0.12.0
5 changes: 5 additions & 0 deletions .changeset/weak-monkeys-begin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@fade/booksy": minor
---

0.13.0
16 changes: 8 additions & 8 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@d0paminedriven/booksy": "^0.11.0",
"@d0paminedriven/booksy": "^0.13.0",
"@d0paminedriven/codemod": "^2.3.0",
"@ducanh2912/next-pwa": "^10.2.9",
"@headlessui/react": "^2.2.0",
Expand All @@ -47,21 +47,21 @@
"fast-equals": "^5.0.1",
"focus-trap-react": "^10.3.1",
"focus-visible": "^5.2.1",
"framer-motion": "^11.12.0",
"framer-motion": "^11.13.1",
"graphql": "^16.9.0",
"graphql-tag": "^2.12.6",
"html-react-parser": "^5.1.18",
"intersection-observer": "^0.12.2",
"intl-segmenter-polyfill": "^0.4.4",
"js-cookie": "^3.0.5",
"lodash.throttle": "^4.1.1",
"lucide-react": "^0.462.0",
"lucide-react": "^0.464.0",
"nanoid": "^5.0.9",
"next": "^15.0.3",
"next-seo": "^6.6.0",
"next-sitemap": "^4.2.3",
"next-themes": "^0.4.3",
"next-view-transitions": "^0.3.2",
"next-view-transitions": "^0.3.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
Expand All @@ -75,8 +75,8 @@
"tsparticles": "^3.7.1"
},
"devDependencies": {
"@edge-runtime/cookies": "^5.0.2",
"@edge-runtime/types": "^3.0.3",
"@edge-runtime/cookies": "^6.0.0",
"@edge-runtime/types": "^4.0.0",
"@fade/eslint-config": "workspace:*",
"@fade/prettier-config": "workspace:*",
"@fade/tsconfig": "workspace:*",
Expand Down Expand Up @@ -106,7 +106,7 @@
"@xpd/tailwind-3dtransforms": "^1.0.3",
"autoprefixer": "^10.4.20",
"csstype": "^3.1.3",
"dotenv": "^16.4.5",
"dotenv": "^16.4.7",
"dotenv-cli": "^7.4.4",
"dotenv-expand": "^12.0.1",
"eslint": "latest",
Expand All @@ -124,6 +124,6 @@
"tsx": "latest",
"typescript": "latest",
"urlpattern-polyfill": "^10.0.0",
"webpack": "^5.96.1"
"webpack": "^5.97.0"
}
}
71 changes: 71 additions & 0 deletions apps/web/src/lib/forward-ref-enhanced.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
"use client";

import * as React from "react";

export function forwardRefEnhanced<
const T,
const P = object
>(
render: React.ForwardRefRenderFunction<T, React.PropsWithoutRef<P>>
): (
props: React.PropsWithoutRef<P> & React.RefAttributes<T>
) => React.ReactNode {
return React.forwardRef(render) satisfies React.ForwardRefExoticComponent<
React.PropsWithoutRef<P> & React.RefAttributes<T>
>;
}

/* uncomment code below to test */

/*
import { Unenumerate } from "@/types";
const data = [
{
color: "blue",
pet: "dog",
season: "winter"
},
{ color: "red", pet: "cat", season: "autumn" }
] as const;
function TableTest<
const T extends Unenumerate<typeof data>,
const P extends HTMLTableElement | null
>(
props: { data: readonly T[] | T[]; renderRow: (row: T) => React.ReactNode },
ref: React.ForwardedRef<P>
) {
return (
<table ref={ref}>
<tbody>
{props.data.map((item, i) => (
<props.renderRow key={i} {...item} />
))}
</tbody>
</table>
);
}
const ForwardedTable = forwardRefEnhanced(TableTest);
export const TestFunctionality = ({ ...props }: HTMLTableElement) => {
return (
<ForwardedTable
data={data}
ref={{ current: { ...props } }}
renderRow={({ color, pet, season }) => {
return (
<span>
<tr>{color}</tr>
<tr>{pet}</tr>
<tr>{season}</tr>
</span>
);
}}
/>
);
};
*/
15 changes: 15 additions & 0 deletions apps/web/src/lib/merge-refs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { ForwardedRef, LegacyRef, MutableRefObject, RefCallback } from "react";

export function mergeRefs<const T>(
refs: (MutableRefObject<T> | LegacyRef<T> | ForwardedRef<T>)[]
): RefCallback<T> {
return value => {
refs.forEach(ref => {
if (typeof ref === "function") {
ref(value);
} else if (ref != null) {
(ref as MutableRefObject<T | null>).current = value;
}
});
};
}
73 changes: 45 additions & 28 deletions apps/web/src/ui/reviews-paginated/ui/ReviewContent.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,54 @@
"use client";

import { useState } from "react";
import { forwardRef, useLayoutEffect, useRef, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { mergeRefs } from "@/lib/merge-refs";
import { TsxTargeted } from "@/types/helpers";
import { Button } from "@/ui/reviews-paginated/ui/Button";

export function ReviewContent({ content }: { content: string }) {
const [isExpanded, setIsExpanded] = useState(false);
export type ReviewContentProps = TsxTargeted<"div"> & { content: string };

return (
<div>
<p className={`text-zinc-100 ${isExpanded ? "" : "line-clamp-3"}`}>
{content}
</p>
{content.length > 175 && (
<Button
variant="ghost"
size="sm"
className="mt-2 text-[#C5A572] hover:bg-zinc-800 hover:text-[#C5A572]"
onClick={() => setIsExpanded(!isExpanded)}>
{isExpanded ? (
<>
Show less <ChevronUp className="ml-2 h-4 w-4" />
</>
) : (
<>
Read more <ChevronDown className="ml-2 h-4 w-4" />
</>
)}
</Button>
)}
</div>
);
}
export const ReviewContent = forwardRef<HTMLDivElement, ReviewContentProps>(
({ content }, ref) => {
const [isExpanded, setIsExpanded] = useState(false);
const [contentHeight, setContentHeight] = useState(0);
const divRef = useRef<HTMLDivElement | null>(null);
const merged = mergeRefs([divRef, ref]);
useLayoutEffect(() => {
// eslint-disable-next-line
const { height } = divRef?.current?.getBoundingClientRect()!;
setContentHeight(height);
console.log("Measured content height: " + height);
}, []);

return (
<div ref={merged}>
<p className={`text-zinc-100 ${isExpanded ? "" : "line-clamp-3"}`}>
{content.concat(`\n ${contentHeight}`)}
</p>
{content.length > 150 && (
<Button
variant="ghost"
size="sm"
className="mt-2 text-[#C5A572] hover:bg-zinc-800 hover:text-[#C5A572]"
onClick={() => setIsExpanded(!isExpanded)}>
{isExpanded ? (
<>
Show less <ChevronUp className="ml-2 h-4 w-4" />
</>
) : (
<>
Read more <ChevronDown className="ml-2 h-4 w-4" />
</>
)}
</Button>
)}
</div>
);
}
);

ReviewContent.displayName = "ReviewContent";

/*
Expand Down
Loading

0 comments on commit f05d165

Please sign in to comment.