Skip to content

Commit

Permalink
Finished working on all eslint errors on addon catalog
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdedreuille
cdedreuille committed Jul 17, 2024
1 parent 59a3e26 commit cb164cc
Show file tree
Hide file tree
Showing 14 changed files with 184 additions and 158 deletions.
51 changes: 30 additions & 21 deletions apps/addon-catalog/components/addon/addon-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,35 @@ import { BookIcon, EditIcon } from '@storybook/icons';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';


import { type AddonWithTagLinks } from '../../types';

export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
const [moreAuthorsVisible, setMoreAuthorsVisible] = useState(false);
const authors = addon?.authors || [];
const authors = addon?.authors ?? [];
const listOfAuthors = moreAuthorsVisible ? authors : authors.slice(0, 6);
const moreAuthors = authors.slice(6);
const renderers = addon?.compatibility || [];
const renderers = addon?.compatibility ?? [];
const tags = addon?.tags || [];

return (
<div className="flex-shrink-0 md:w-[250px]">
{listOfAuthors && listOfAuthors.length > 0 ? <>
<div className="mb-4 flex items-center py-2 text-sm font-bold">
{listOfAuthors && listOfAuthors.length > 0 ? (
<>
<div className="flex items-center py-2 mb-4 text-sm font-bold">
Made by
</div>
<ul className="mb-6 flex flex-col gap-4">
<ul className="flex flex-col gap-4 mb-6">
{listOfAuthors.map((author) => (
<li className="flex items-center gap-2" key={author.username}>
{author.gravatarUrl ? <div className="relative h-7 w-7 overflow-hidden rounded-full">
{author.gravatarUrl ? (
<div className="relative overflow-hidden rounded-full h-7 w-7">
<Image
src={`https:${author.gravatarUrl}`}
alt={author.username}
fill
/>
</div> : null}
</div>
) : null}
{author.username}
</li>
))}
Expand All @@ -44,33 +46,40 @@ export function AddonSidebar({ addon }: { addon: AddonWithTagLinks }) {
type="button"
className="flex text-sm transition-colors hover:text-blue-500"
>
{`+ ${moreAuthors.length} more`}
{`+ ${moreAuthors.length.toString()} more`}
</button>
)}
</> : null}
{renderers && renderers.length > 0 ? <>
<div className="mb-2 mt-6 flex items-center py-2 text-sm font-bold">
</>
) : null}
{renderers && renderers.length > 0 ? (
<>
<div className="flex items-center py-2 mt-6 mb-2 text-sm font-bold">
Work with
</div>
<ul className="flex flex-wrap gap-2">
{renderers.map((renderer) => (
<Pill noHover>{renderer.displayName}</Pill>
<Pill key={renderer.name} noHover>
{renderer.displayName}
</Pill>
))}
</ul>
</> : null}
{tags?.length ? <>
<div className="mb-2 mt-6 flex items-center py-2 text-sm font-bold">
</>
) : null}
{tags?.length ? (
<>
<div className="flex items-center py-2 mt-6 mb-2 text-sm font-bold">
Tags
</div>
<ul className="mb-6 flex flex-wrap gap-2">
<ul className="flex flex-wrap gap-2 mb-6">
{tags.map(({ link, name }) => (
<Pill>
<Pill key={name}>
<Link href={link}>{name}</Link>
</Pill>
))}
</ul>
</> : null}
<div className="mt-6 flex flex-col gap-4 border-t border-t-zinc-300 pt-6 dark:border-t-slate-700">
</>
) : null}
<div className="flex flex-col gap-4 pt-6 mt-6 border-t border-t-zinc-300 dark:border-t-slate-700">
<a
href="/docs/addons/install-addons"
className="flex items-center gap-2 text-sm transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500"
Expand Down
22 changes: 7 additions & 15 deletions apps/addon-catalog/components/highlight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,18 @@ import React, {
useEffect,
useRef,
} from 'react';
import Prism from 'prismjs';
import Prism, { highlightAllUnder } from 'prismjs';

if (typeof document !== 'undefined') {
// @ts-ignore
global.Prism = Prism;
// @ts-ignore
require('prismjs/components/prism-bash');
// @ts-ignore
require('prismjs/components/prism-javascript');
// @ts-ignore
require('prismjs/components/prism-typescript');
// @ts-ignore
require('prismjs/components/prism-json');
// @ts-ignore
require('prismjs/components/prism-css');
// @ts-ignore
require('prismjs/components/prism-yaml');
// @ts-ignore
require('prismjs/components/prism-markdown');
// @ts-ignore
require('prismjs/components/prism-jsx');
// @ts-ignore
require('prismjs/components/prism-tsx');
}

Expand All @@ -37,6 +27,8 @@ const HighlightBlock = forwardRef<
React.HTMLAttributes<HTMLDivElement>
>((props, ref) => <div ref={ref} {...props} />);

HighlightBlock.displayName = 'HighlightBlock';

/**
* TODO: This is how the Highlight component applies the theme.
* Not sure how to do this without styled components.
Expand Down Expand Up @@ -102,21 +94,21 @@ const languageMap = {
tsx: 'tsx',
} as const;

interface Props {
interface HighlightProps {
language?: keyof typeof languageMap;
withHTMLChildren?: boolean;
}

export const Highlight: FunctionComponent<
Props & ComponentProps<typeof HighlightBlock>
HighlightProps & ComponentProps<typeof HighlightBlock>
> = ({
children,
language: inputLanguage,
withHTMLChildren = true,
...rest
}) => {
const language =
(inputLanguage && languageMap[inputLanguage]) || inputLanguage;
(inputLanguage && languageMap[inputLanguage]) ?? inputLanguage;
const codeBlock = withHTMLChildren ? (
<div dangerouslySetInnerHTML={{ __html: children as string }} />
) : (
Expand All @@ -126,7 +118,7 @@ export const Highlight: FunctionComponent<

useEffect(() => {
if (domNode.current) {
Prism.highlightAllUnder(domNode.current);
highlightAllUnder(domNode.current);
}
});

Expand Down
50 changes: 34 additions & 16 deletions apps/addon-catalog/components/home-wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@repo/utils';
import { fetchSearchData } from '../lib/fetch-search-data';
import type { Addon, TagLinkType } from '../types';
import { SearchResults } from './search-results';
import { TagList } from './tag-list';

Expand Down Expand Up @@ -41,20 +42,23 @@ export const HomeWrapper = ({ tagLinks, children }: HomeProps) => {
useEffect(() => {
setLoading(true);

const getData = setTimeout(async () => {
const getData = setTimeout(() => {
if (search.length > 1) {
const data = await fetchSearchData(search);
setLoading(false);
setSearchResults(data);
void fetchSearchData(search).then((data) => {
setLoading(false);
setSearchResults(data);
});
}
}, 600);

return () => { clearTimeout(getData); };
return () => {
clearTimeout(getData);
};
}, [search]);

return (
<>
<div className="mb-8 mt-12 flex items-start justify-between">
<div className="flex items-start justify-between mt-12 mb-8">
<div>
<h1 className="mb-4 text-4xl font-bold">Integrations</h1>
<p className="text-black dark:text-slate-400">
Expand All @@ -64,43 +68,57 @@ export const HomeWrapper = ({ tagLinks, children }: HomeProps) => {
</div>
<a
href="/docs/addons/integration-catalog"
className="hidden h-10 flex-shrink-0 items-center gap-2 rounded-full bg-blue-500 px-5 text-sm font-bold text-white md:flex"
className="items-center flex-shrink-0 hidden h-10 gap-2 px-5 text-sm font-bold text-white bg-blue-500 rounded-full md:flex"
>
<PlusIcon />
Add your integration
</a>
</div>
<div className="mb-24">
<div className="mb-12 flex flex-col gap-8 md:flex-row md:items-center md:gap-12">
<div className="flex flex-col gap-8 mb-12 md:flex-row md:items-center md:gap-12">
<div className="relative flex h-10 w-full flex-shrink-0 items-center rounded-full border border-zinc-300 md:w-[250px] dark:border-slate-700">
<SearchIcon className="absolute left-4 dark:text-slate-500" />
<input
className="h-full w-full rounded-full bg-transparent pl-10 placeholder:text-slate-500 dark:placeholder:text-slate-400"
className="w-full h-full pl-10 bg-transparent rounded-full placeholder:text-slate-500 dark:placeholder:text-slate-400"
placeholder="Search integrations"
value={search}
onChange={(e) => { setSearch(e.target.value); }}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
{search.length > 0 && (
<div
className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 cursor-pointer items-center justify-center"
onClick={() => { setSearch(''); }}
className="absolute flex items-center justify-center -translate-y-1/2 cursor-pointer right-2 top-1/2 h-7 w-7"
onClick={() => {
setSearch('');
}}
onKeyUp={(e) => {
if (e.key === 'Enter') {
setSearch('');
}
}}
role="button"
tabIndex={0}
aria-label="Clear search"
>
<CloseIcon />
</div>
)}
</div>
{tagLinks ? <TagList tagLinks={tagLinks} /> : null}
</div>
{search ? <SearchResults
{search ? (
<SearchResults
search={search}
loading={loading}
searchResults={searchResults}
/> : null}
/>
) : null}
{!search && (
<div className="flex flex-col gap-12 md:flex-row">
<div className="hidden flex-shrink-0 md:block md:w-[250px]">
<h3 className="mb-6 text-2xl font-bold">Categories</h3>
<ul className="-ml-2 border-b border-b-zinc-300 pb-6 dark:border-b-slate-700">
<ul className="pb-6 -ml-2 border-b border-b-zinc-300 dark:border-b-slate-700">
{categories.map(({ name, href }) => (
<li key={name}>
<Link
Expand All @@ -115,7 +133,7 @@ export const HomeWrapper = ({ tagLinks, children }: HomeProps) => {
</li>
))}
</ul>
<div className="mt-6 flex flex-col gap-4">
<div className="flex flex-col gap-4 mt-6">
<a
href="/docs/addons/install-addons"
className="flex items-center gap-2 text-sm transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500"
Expand Down
Loading

0 comments on commit cb164cc

Please sign in to comment.