Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate navigation #2765

Merged
merged 69 commits into from
Mar 29, 2024
Merged
Show file tree
Hide file tree
Changes from 67 commits
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
e528e52
added link.tsx
vishvamsinh28 Mar 10, 2024
3c824af
added few component
vishvamsinh28 Mar 10, 2024
83444af
fixed errors
vishvamsinh28 Mar 10, 2024
a649761
docnavitem , subcategory, docsbav added
vishvamsinh28 Mar 11, 2024
f1be895
separated types
vishvamsinh28 Mar 11, 2024
84a11bc
converted functions
vishvamsinh28 Mar 11, 2024
4e764b6
docs mobile menu added
vishvamsinh28 Mar 11, 2024
eef5c56
event post added
vishvamsinh28 Mar 11, 2024
cb317ae
nav added
vishvamsinh28 Mar 12, 2024
9ba9840
navigation completed
vishvamsinh28 Mar 12, 2024
1bf07bb
lint fix
vishvamsinh28 Mar 12, 2024
32536c9
lint fix
vishvamsinh28 Mar 12, 2024
2fc06e5
context fix
vishvamsinh28 Mar 12, 2024
60be5f3
build fix
vishvamsinh28 Mar 12, 2024
e8f1533
update package.json
vishvamsinh28 Mar 12, 2024
8ce958e
lint fix
vishvamsinh28 Mar 13, 2024
04c77f1
lint fix
vishvamsinh28 Mar 13, 2024
d0b153d
fixed all lint errors
vishvamsinh28 Mar 13, 2024
ffe65e1
fix AsyncAPILogo
anshgoyalevil Mar 14, 2024
0d059a3
Merge branch 'migrate-ts' into MigrateNavigation
akshatnema Mar 14, 2024
e5a8cfd
jsdocs updates
vishvamsinh28 Mar 16, 2024
874d41e
applyfilter lint errors fix
vishvamsinh28 Mar 16, 2024
4b4fc3f
requested changes are made
vishvamsinh28 Mar 16, 2024
3220e73
lint fix
vishvamsinh28 Mar 16, 2024
c27c2c9
lint fix
vishvamsinh28 Mar 16, 2024
d9757b2
build fix
vishvamsinh28 Mar 16, 2024
124d81d
Merge branch 'migrate-ts' into MigrateNavigation
anshgoyalevil Mar 18, 2024
9fa2664
pr updates
vishvamsinh28 Mar 23, 2024
e31c18a
link fix
vishvamsinh28 Mar 23, 2024
e229c9c
Merge branch 'migrate-ts' into MigrateNavigation
vishvamsinh28 Mar 23, 2024
22b8edb
lint fix
vishvamsinh28 Mar 23, 2024
b2fe189
build fix
vishvamsinh28 Mar 23, 2024
3f568df
bucket error fix
vishvamsinh28 Mar 23, 2024
964dcc9
icon type error fix
vishvamsinh28 Mar 23, 2024
7dd4cd5
lint fix
vishvamsinh28 Mar 23, 2024
f4a1b79
removed duplicate file
vishvamsinh28 Mar 23, 2024
cdaf339
pr updated
vishvamsinh28 Mar 24, 2024
cd38811
build fix
vishvamsinh28 Mar 24, 2024
243b494
lint fix
vishvamsinh28 Mar 24, 2024
eaeb954
heroicons update
vishvamsinh28 Mar 24, 2024
5f2c08d
fix links
vishvamsinh28 Mar 24, 2024
cb8d6f6
fix bugs
vishvamsinh28 Mar 24, 2024
3ac710b
navbar link fix
vishvamsinh28 Mar 24, 2024
342dab6
navitem link fix
vishvamsinh28 Mar 24, 2024
89f66b6
link fix
vishvamsinh28 Mar 24, 2024
7c11bf9
final fix
vishvamsinh28 Mar 24, 2024
76d6ebb
clickable logo link fix
vishvamsinh28 Mar 24, 2024
bf23367
link fix
vishvamsinh28 Mar 24, 2024
c2a2442
textlink update
vishvamsinh28 Mar 24, 2024
4cb5321
lint fix
vishvamsinh28 Mar 24, 2024
7dbf2bb
revert adopters
vishvamsinh28 Mar 24, 2024
cc2cd6a
pr updates
vishvamsinh28 Mar 25, 2024
6c9d0a6
heroicons update
vishvamsinh28 Mar 25, 2024
b68ee15
lint fix
vishvamsinh28 Mar 25, 2024
2450b61
Merge branch 'migrate-ts' into MigrateNavigation
vishvamsinh28 Mar 26, 2024
8abc0ef
fix lint errors
vishvamsinh28 Mar 26, 2024
6bf191b
lint fix
vishvamsinh28 Mar 26, 2024
5e13f4f
pr updates
vishvamsinh28 Mar 26, 2024
9749734
lint fix
vishvamsinh28 Mar 26, 2024
a4ada49
bucket issue fixed
vishvamsinh28 Mar 26, 2024
1ff5b52
lint fix
vishvamsinh28 Mar 26, 2024
a4e23df
Merge branch 'migrate-ts' into MigrateNavigation
akshatnema Mar 27, 2024
d52d3da
pr updates
vishvamsinh28 Mar 28, 2024
e1a0293
lint fix
vishvamsinh28 Mar 28, 2024
e993658
lint fix
vishvamsinh28 Mar 28, 2024
37e3634
updated Link component
akshatnema Mar 28, 2024
c2185aa
updated MenuBlocks and Link component for target and rel attributes
akshatnema Mar 28, 2024
d7856e2
Merge branch 'migrate-ts' into MigrateNavigation
akshatnema Mar 28, 2024
cfb4c8c
package-lock update
vishvamsinh28 Mar 28, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions components/ClickableLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link';
import AsyncAPILogo from './AsyncAPILogo';

interface IClickableLogoProps {
href: string;
href?: string;
className?: string;
logoClassName?: string;
}
Expand All @@ -16,10 +16,8 @@ interface IClickableLogoProps {
*/
export default function ClickableLogo({ href = '/', className = 'flex', logoClassName }: IClickableLogoProps) {
return (
<Link href={href}>
<a className={className}>
<AsyncAPILogo className={logoClassName} />
</a>
<Link href={href} className={className}>
<AsyncAPILogo className={logoClassName} />
</Link>
);
}
33 changes: 19 additions & 14 deletions components/data/buckets.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import type { IconType } from '@/types/components/IconType';

import IconGettingStarted from '../icons/GettingStarted';
import IconGuide from '../icons/Guide';
import IconMigration from '../icons/Migration';
Expand All @@ -8,25 +6,27 @@ import IconTutorials from '../icons/Tutorials';
import IconUseCases from '../icons/UseCases';
import IconUsers from '../icons/Users';

interface BucketType {
export interface Bucket {
name: string;
title: string;
description: string;
link: string;
className: string;
borderClassName: string;
Icon: IconType;
href: string;
icon: React.ComponentType<any>;
}

export const buckets: BucketType[] = [
export const buckets: Bucket[] = [
{
name: 'concepts',
title: 'Concepts',
description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
link: '/docs/concepts',
className: 'bg-secondary-200',
borderClassName: 'border-secondary-200',
Icon: IconGettingStarted
href: '/docs/concepts',
icon: IconGettingStarted
},
{
name: 'tutorials',
Expand All @@ -35,7 +35,8 @@ export const buckets: BucketType[] = [
link: '/docs/tutorials',
className: 'bg-pink-100',
borderClassName: 'border-pink-100',
Icon: IconTutorials
href: '/docs/tutorials',
icon: IconTutorials
},
{
name: 'guides',
Expand All @@ -44,7 +45,8 @@ export const buckets: BucketType[] = [
link: '/docs/guides',
className: 'bg-primary-200',
borderClassName: 'border-primary-200',
Icon: IconGuide
href: '/docs/guides',
icon: IconGuide
},
{
name: 'tools',
Expand All @@ -53,7 +55,8 @@ export const buckets: BucketType[] = [
link: '/docs/tools',
className: 'bg-green-200',
borderClassName: 'border-green-200',
Icon: IconUseCases
href: '/docs/tools',
icon: IconUseCases
},
{
name: 'reference',
Expand All @@ -62,7 +65,8 @@ export const buckets: BucketType[] = [
link: '/docs/reference',
className: 'bg-yellow-200',
borderClassName: 'border-yellow-200',
Icon: IconSpec
href: '/docs/reference',
icon: IconSpec
},
{
name: 'migration',
Expand All @@ -71,7 +75,8 @@ export const buckets: BucketType[] = [
link: '/docs/migration',
className: 'bg-blue-400',
borderClassName: 'border-blue-400',
Icon: IconMigration
href: '/docs/migration',
icon: IconMigration
},
{
name: 'community',
Expand All @@ -80,13 +85,13 @@ export const buckets: BucketType[] = [
link: '/docs/community',
className: 'bg-orange-200',
borderClassName: 'border-orange-200',
Icon: IconUsers
href: '/docs/community',
icon: IconUsers
}
].map((bucket) => {
// we need such a mapping for some parts of website, e.g navigation blocks use the `icon` property, not `Icon` etc.
return {
...bucket,
href: bucket.link,
icon: bucket.Icon
icon: bucket.icon
};
});
3 changes: 1 addition & 2 deletions components/docs/Card.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Link from 'next/link';

import type { IconType } from '@/types/components/IconType';
import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
import { ParagraphTypeStyle } from '@/types/typography/Paragraph';

Expand All @@ -12,7 +11,7 @@ interface CardProps {
description: string;
link: string;
className: string;
Icon: IconType;
Icon: React.ComponentType<any>;
akshatnema marked this conversation as resolved.
Show resolved Hide resolved
}

/**
Expand Down
4 changes: 2 additions & 2 deletions components/docs/DocsCards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import Card from './Card';
export default function DocsCards() {
return (
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2' data-testid='Docs-main-div'>
{buckets.map((card) => (
<Card key={card.title} {...card} />
{buckets.map(({ title, description, link, className, icon }) => (
<Card key={title} title={title} description={description} link={link} className={className} Icon={icon} />
))}
</div>
);
Expand Down
45 changes: 45 additions & 0 deletions components/form/Select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import type { ChangeEvent } from 'react';
import React from 'react';
import { twMerge } from 'tailwind-merge';

export interface Option {
value: string;
text: string;
}

export interface SelectProps {
className?: string;
onChange?: (selected: string) => void;
options: Option[];
selected?: string;
}

/**
* @description Select component for form dropdown.
* @param {string} [props.className=''] - Additional CSS classes for the select element.
* @param {(value: string) => void} [props.onChange=() => {}] - Function to handle onChange event.
* @param {Option[]} props.options - Array of options for the select dropdown.
* @param {string} props.selected - Value of the currently selected option.
*/
export default function Select({ className = '', onChange = () => {}, options, selected }: SelectProps) {
const handleOnChange = (event: ChangeEvent<HTMLSelectElement>) => {
onChange(event.target.value);
};

return (
<select
data-testid='Select-form'
onChange={handleOnChange}
className={twMerge(
`form-select h-full py-0 pl-2 pr-8 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
)}
value={selected}
>
{options.map((option, index) => (
<option key={index} value={option.value} data-testid='Option-form'>
{option.text}
</option>
))}
</select>
);
}
160 changes: 160 additions & 0 deletions components/helpers/applyFilter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
interface DataObject {
name: string;
[key: string]: any;
}

interface FilterCriteria {
name: string;
}

interface Filter {
[key: string]: string;
value: string;
}

interface FilterOption {
value: string;
text: string;
}

/**
* @description Sorts an array of objects based on a string property called 'value'.
* @param {{ value: string }[]} arr - Array of objects with a 'value' property of type string.
*/
export function sortFilter(arr: { value: string }[]): { value: string }[] {
return arr.sort((a, b) => {
if (a.value < b.value) {
return -1;
}
if (a.value > b.value) {
return 1;
}

return 0;
});
}

/**
* @description Apply filters to data and update the filters.
* @param {FilterCriteria[]} checks - Array of filter criteria objects.
* @param {DataObject[]} data - Array of data objects to filter.
* @param {(lists: { [key: string]: FilterOption[] }) => void} setFilters - Function to update the filters.
*/
export const applyFilterList = (
checks: FilterCriteria[],
data: DataObject[],
setFilters: (lists: { [key: string]: FilterOption[] }) => void
): void => {
if (Object.keys(checks).length) {
const lists: { [key: string]: FilterOption[] } = {};

checks.forEach((check) => {
lists[check.name] = [];
});
for (let i = 0; i < data.length; i++) {
const res = data[i];

Object.keys(lists).forEach((key) => {
const result = data[i][key];

if (res) {
if (lists[key].length) {
if (Array.isArray(result)) {
result.forEach((a) => {
if (a.name) {
if (!lists[key].some((e) => e.value === a.name)) {
const newData = {
value: a.name,
text: a.name
};

lists[key].push(newData);
sortFilter(lists[key]);
}
} else if (!lists[key].some((e) => e.value === a)) {
const newData = {
value: a,
text: a
};

lists[key].push(newData);
sortFilter(lists[key]);
}
});
} else if (!lists[key].some((e) => e.value === result)) {
const newData = {
value: result,
text: result
};

lists[key].push(newData);
sortFilter(lists[key]);
}
} else if (Array.isArray(result)) {
result.forEach((e) => {
if (e.name) {
const newData = {
value: e.name,
text: e.name
};

lists[key].push(newData);
} else {
const newData = {
value: e,
text: e
};

lists[key].push(newData);
}
});
} else {
const newData = {
value: result,
text: result
};

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why there are blank lines in between the code? Kindly remove them from every file.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment not addressed.

Copy link
Contributor Author

@vishvamsinh28 vishvamsinh28 Mar 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed blank lines from many files, but when I run lint:fix, they get added again in some files. For example, I removed them from applyFilter.ts, but they got added again after running lint:fix."

lists[key].push(newData);
}
}
});
}
setFilters(lists);
}
};

/**
* @description Apply filters to data and trigger the filter action.
* @param {DataObject[]} inputData - Array of data objects to filter.
* @param {(result: DataObject[], query: Filter) => void} onFilter - Function to apply the filter action.
* @param {Filter} query - Filter criteria.
*/
export const onFilterApply = (
inputData: DataObject[],
onFilter: (result: DataObject[], query: Filter) => void,
query: Filter
): void => {
let result = inputData;

if (query && Object.keys(query).length >= 1) {
Object.keys(query).forEach((property) => {
const res = result.filter((e) => {
if (!query[property] || e[property] === query[property]) {
return e[property];
}
if (Array.isArray(e[property])) {
return (
e[property].some((data: any) => data.name === query[property]) ||
e[property].includes(query[property]) ||
false
);
}

return false; // Fixing missing return value issue
});

result = res;
});
}
onFilter(result, query);
};
15 changes: 15 additions & 0 deletions components/helpers/is-mobile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let isMobile: boolean | undefined;

/**
* @description Checks whether the current device is a mobile device.
*/
export function isMobileDevice(): boolean {
if (typeof navigator === 'undefined') return false;
if (typeof isMobile === 'boolean') return isMobile;

const regexp = /android|iphone|kindle|ipad/i;

isMobile = regexp.test(navigator.userAgent);

return isMobile;
}
Loading
Loading