STRLCPY/gradejs

packages/web/src/assets/icons/github.svg

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Card/Card.tsx

		skipped 59 lines
60	60
61	61		{packageTags && (
62	62		<div className={styles.tagsWrapper}>
63		-	<ChipGroup chips={packageTags.featuredPackages}>
	63	+	<ChipGroup chips={packageTags.featuredPackages} size='large'>
64	64		<Chip className={styles.tag} variant='outlined' size='large'>
65	65		+{packageTags.restPackages} packages
66	66		</Chip>
		skipped 15 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/CardList/CardList.module.scss

1	1		@import '~styles/responsive.scss';
2	2
3		-	$mobile-gutter: 32px;
4		-
5	3		.grid {
6	4		display: grid;
7	5		grid-template-columns: repeat(3, minmax(0, 1fr));
		skipped 33 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Chip/Chip.tsx

1	1		import React from 'react';
2	2		import clsx from 'clsx';
3	3		import styles from './Chip.module.scss';
	4	+	import { IconProps } from '../Icon/Icon';
4	5
5	6		export type ChipProps = {
6	7		children: React.ReactNode;
7	8		className?: string;
8	9		variant?: 'primary' \| 'secondary' \| 'outlined' \| 'suggest' \| string;
9		-	size?: 'regular' \| 'medium' \| 'large' \| string;
	10	+	size?: 'default' \| 'medium' \| 'large' \| string;
10	11		font?: 'sans-serif' \| 'monospace' \| string;
	12	+	fontWeight?: 400 \| 500;
	13	+	icon?: React.ReactElement<IconProps>;
11	14		};
12	15
13	16		export default function Chip({
14	17		children,
15	18		className,
16	19		variant = 'primary',
17		-	size = 'regular',
	20	+	size = 'default',
18	21		font = 'sans-serif',
	22	+	fontWeight = 400,
	23	+	icon,
19	24		}: ChipProps) {
20	25		return (
21		-	<span className={clsx(styles.chip, className, styles[variant], styles[size], styles[font])}>
	26	+	<span
	27	+	className={clsx(
	28	+	styles.chip,
	29	+	styles[variant],
	30	+	styles[size],
	31	+	styles[font],
	32	+	styles[fontWeight],
	33	+	className
	34	+	)}
	35	+	>
	36	+	<span className={styles.icon}>{icon}</span>
22	37		{children}
23	38		</span>
24	39		);
		skipped 2 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/ChipGroup/ChipGroup.module.scss

1	1		@import '~styles/responsive.scss';
2	2
3		-	.tagsWrapper {
	3	+	.chipsWrapper {
4	4		flex: 1;
5	5		display: flex;
6	6		flex-direction: column;
7	7		}
8	8
9		-	.tags {
	9	+	.chips {
10	10		display: flex;
11	11		flex-wrap: wrap;
12		-	align-items: center;
	12	+	align-items: flex-start;
13	13		justify-content: flex-start;
14	14		}
15	15
16		-	.tag {
17		-	margin-bottom: 0.5rem;
	16	+	.chip {
	17	+	margin-bottom: 0.75rem;
18	18
19	19		&:not(:last-child) {
20		-	margin-right: 0.75rem;
	20	+	margin-right: 0.5rem;
21	21		}
22	22		}
23	23

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/ChipGroup/ChipGroup.tsx

1	1		import React from 'react';
2	2		import styles from './ChipGroup.module.scss';
3		-	import Chip from '../Chip/Chip';
	3	+	import Chip, { ChipProps } from '../Chip/Chip';
4	4
5	5		type Props = {
6	6		chips: string[];
7	7		children?: React.ReactNode;
	8	+	size?: ChipProps['size'];
	9	+	font?: ChipProps['font'];
8	10		};
9	11
10	12		// TODO: allow Chip customizing with props
11		-	export default function ChipGroup({ chips, children }: Props) {
	13	+	export default function ChipGroup({ chips, children, size = 'medium', font = 'monospace' }: Props) {
12	14		return (
13		-	<div className={styles.tagsWrapper}>
14		-	<div className={styles.tags}>
	15	+	<div className={styles.chipsWrapper}>
	16	+	<div className={styles.chips}>
15	17		{chips.map((chip) => (
16		-	<Chip key={chip} className={styles.tag} size='large' font='monospace'>
	18	+	<Chip key={chip} className={styles.chip} size={size} font={font}>
17	19		{chip}
18	20		</Chip>
19	21		))}
		skipped 7 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Header/Header.module.scss

	1	+	@import '~styles/_vars.scss';
1	2		@import '~styles/responsive.scss';
2	3
3		-	.container {
4		-	width: 100%;
5		-	max-width: 1024px;
6		-	padding: 34px;
	4	+	.header {
7	5		display: flex;
8		-	box-sizing: border-box;
	6	+	align-items: center;
9	7		justify-content: space-between;
10		-	align-items: center;
11		-	margin: 0 auto;
	8	+	padding: 32px 0;
	9	+
	10	+	@include mobile-and-tablet {
	11	+	padding: 22px 0;
	12	+	}
	13	+	}
	14	+
	15	+	.logo {
	16	+	display: flex;
	17	+	width: 129px;
12	18
13		-	@include mobile {
14		-	padding: 24px;
	19	+	@include mobile-and-tablet {
	20	+	width: 82px;
15	21		}
16	22		}
17	23
18	24		.nav {
19	25		display: flex;
20	26		align-items: center;
	27	+
	28	+	& > * + * {
	29	+	margin-left: 40px;
	30	+
	31	+	@include mobile-and-tablet {
	32	+	margin-left: 20px;
	33	+	}
	34	+	}
21	35		}
22	36
23	37		.navLink {
24		-	font-size: 14px;
25		-	line-height: 18px;
26		-	color: #0f0f0f;
27		-	text-decoration: none;
28		-	border-radius: 6px;
29		-	cursor: pointer;
30		-	margin-left: 20px;
	38	+	display: flex;
	39	+	color: $black;
	40	+	}
	41	+
	42	+	.githubIcon {
	43	+	width: 32px;
	44	+	height: 32px;
31	45
32		-	@include mobile {
33		-	display: none;
	46	+	@include mobile-and-tablet {
	47	+	width: 28px;
	48	+	height: 28px;
34	49		}
35	50		}
36	51
37		-	.githubButton {
38		-	background: url('~assets/icons/github.svg') 10px center / 25px 24px no-repeat #ffffff;
39		-	padding: 12px 10px 12px 45px;
40		-	border: 1px solid #e6e6e6;
41		-	transition: border-color 0.2s;
	52	+	.homepage {
	53	+	padding: 44px 0;
42	54
43		-	@include mobile {
44		-	display: block;
	55	+	@include mobile-and-tablet {
	56	+	padding: 22px 0;
45	57		}
46	58
47		-	&:hover {
48		-	border-color: #a5a5a5;
	59	+	.navLink {
	60	+	color: $white;
49	61		}
50	62		}
51	63

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Header/Header.stories.tsx

1	1		import React from 'react';
	2	+	import { ComponentMeta, ComponentStory } from '@storybook/react';
2	3		import Header from './Header';
3	4
4	5		export default {
5	6		title: 'Interface / Header',
6	7		component: Header,
7		-	};
	8	+	parameters: {
	9	+	layout: 'fullscreen',
	10	+	backgrounds: {
	11	+	default: 'dark',
	12	+	},
	13	+	},
	14	+	} as ComponentMeta<typeof Header>;
8	15
9		-	export const Default = () => <Header />;
	16	+	const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
	17	+
	18	+	export const HomePage = Template.bind({});
10	19

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Header/Header.tsx

1		-	/* eslint-disable react/button-has-type */
2	1		import React from 'react';
3		-	import clsx from 'clsx';
4		-	import Logo from '../Logo/Logo';
5	2		import styles from './Header.module.scss';
	3	+	import Container from '../Container/Container';
	4	+	import clsx from 'clsx';
	5	+	import { Icon } from '../Icon/Icon';
6	6		import { trackCustomEvent } from '../../../services/analytics';
7	7
8		-	export default function Header() {
	8	+	type Props = {
	9	+	variant?: 'default' \| 'homepage';
	10	+	children?: React.ReactNode;
	11	+	};
	12	+
	13	+	export default function Header({ variant = 'default', children }: Props) {
9	14		return (
10		-	<header className={styles.container}>
11		-	<Logo />
12		-	<div className={styles.nav}>
13		-	<a
14		-	href='https://github.com/gradejs/gradejs/discussions/6'
15		-	target='_blank'
16		-	rel='noreferrer'
17		-	className={styles.navLink}
18		-	onClick={() => trackCustomEvent('ClickExternalLink', 'About')}
19		-	>
20		-	About
	15	+	<Container>
	16	+	<header className={clsx(styles.header, styles[variant])}>
	17	+	<a href='/' className={styles.logo}>
	18	+	<Icon
	19	+	kind='logo'
	20	+	width={129}
	21	+	height={25}
	22	+	color={variant === 'default' ? '#212121' : 'white'}
	23	+	/>
21	24		</a>
22		-	<a
23		-	href='https://github.com/gradejs/gradejs/discussions'
24		-	target='_blank'
25		-	rel='noreferrer'
26		-	className={styles.navLink}
27		-	onClick={() => trackCustomEvent('ClickExternalLink', 'Community')}
28		-	>
29		-	Community
30		-	</a>
31		-	<a
32		-	href='https://github.com/gradejs/gradejs'
33		-	target='_blank'
34		-	rel='noreferrer'
35		-	className={clsx(styles.navLink, styles.githubButton)}
36		-	onClick={() => trackCustomEvent('ClickExternalLink', 'SourceCode')}
37		-	>
38		-	Source Code
39		-	</a>
40		-	</div>
41		-	</header>
	25	+
	26	+	{children}
	27	+
	28	+	<div className={styles.nav}>
	29	+	<a
	30	+	href='https://github.com/gradejs/gradejs/discussions/6'
	31	+	target='_blank'
	32	+	rel='noreferrer'
	33	+	className={styles.navLink}
	34	+	onClick={() => trackCustomEvent('ClickExternalLink', 'About')}
	35	+	>
	36	+	About
	37	+	</a>
	38	+	<a
	39	+	href='https://github.com/gradejs/gradejs/discussions'
	40	+	target='_blank'
	41	+	rel='noreferrer'
	42	+	className={styles.navLink}
	43	+	onClick={() => trackCustomEvent('ClickExternalLink', 'Community')}
	44	+	>
	45	+	Community
	46	+	</a>
	47	+	<a
	48	+	href='https://github.com/gradejs/gradejs'
	49	+	target='_blank'
	50	+	rel='noreferrer'
	51	+	className={styles.navLink}
	52	+	onClick={() => trackCustomEvent('ClickExternalLink', 'SourceCode')}
	53	+	>
	54	+	<Icon
	55	+	kind='githubLogo'
	56	+	className={styles.githubIcon}
	57	+	width={32}
	58	+	height={32}
	59	+	color={variant === 'default' ? '#212121' : 'white'}
	60	+	/>
	61	+	</a>
	62	+	</div>
	63	+	</header>
	64	+	</Container>
42	65		);
43	66		}
44	67

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/HeaderNew/HeaderNew.module.scss

1	-	@import '~styles/_vars.scss';
2	-	@import '~styles/responsive.scss';
3	-
4	-	.header {
5	-	display: flex;
6	-	align-items: center;
7	-	justify-content: space-between;
8	-	padding: 44px 0;
9	-
10	-	@include mobile-and-tablet {
11	-	padding: 22px 0;
12	-	}
13	-	}
14	-
15	-	.logo {
16	-	display: flex;
17	-	width: 129px;
18	-
19	-	@include mobile-and-tablet {
20	-	width: 82px;
21	-	}
22	-	}
23	-
24	-	.nav {
25	-	display: flex;
26	-	align-items: center;
27	-
28	-	& > * + * {
29	-	margin-left: 40px;
30	-
31	-	@include mobile-and-tablet {
32	-	margin-left: 20px;
33	-	}
34	-	}
35	-	}
36	-
37	-	.navLink {
38	-	display: flex;
39	-	color: $white;
40	-	}
41	-
42	-	.githubIcon {
43	-	width: 32px;
44	-	height: 32px;
45	-
46	-	@include mobile-and-tablet {
47	-	width: 28px;
48	-	height: 28px;
49	-	}
50	-	}
51	-

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/HeaderNew/HeaderNew.tsx

1	-	import React from 'react';
2	-	import styles from './HeaderNew.module.scss';
3	-	import Container from '../Container/Container';
4	-	import { Icon } from '../Icon/Icon';
5	-	import { trackCustomEvent } from '../../../services/analytics';
6	-
7	-	export default function HeaderNew() {
8	-	return (
9	-	<Container>
10	-	<header className={styles.header}>
11	-	<a href='/' className={styles.logo}>
12	-	<Icon kind='logo' width={129} height={25} color='white' />
13	-	</a>
14	-	<div className={styles.nav}>
15	-	<a
16	-	href='https://github.com/gradejs/gradejs/discussions/6'
17	-	target='_blank'
18	-	rel='noreferrer'
19	-	className={styles.navLink}
20	-	onClick={() => trackCustomEvent('ClickExternalLink', 'About')}
21	-	>
22	-	About
23	-	</a>
24	-	<a
25	-	href='https://github.com/gradejs/gradejs/discussions'
26	-	target='_blank'
27	-	rel='noreferrer'
28	-	className={styles.navLink}
29	-	onClick={() => trackCustomEvent('ClickExternalLink', 'Community')}
30	-	>
31	-	Community
32	-	</a>
33	-	<a
34	-	href='https://github.com/gradejs/gradejs'
35	-	target='_blank'
36	-	rel='noreferrer'
37	-	className={styles.navLink}
38	-	onClick={() => trackCustomEvent('ClickExternalLink', 'SourceCode')}
39	-	>
40	-	<Icon
41	-	kind='githubLogo'
42	-	className={styles.githubIcon}
43	-	width={32}
44	-	height={32}
45	-	color='#fff'
46	-	/>
47	-	</a>
48	-	</div>
49	-	</header>
50	-	</Container>
51	-	);
52	-	}
53	-

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Hero/Hero.tsx

		skipped 1 lines
2	2		import styles from './Hero.module.scss';
3	3		import Container from '../Container/Container';
4	4		import Chip from '../Chip/Chip';
5		-	import HeaderNew from '../HeaderNew/HeaderNew';
	5	+	import Header from '../Header/Header';
6	6		import { Icon } from '../Icon/Icon';
7	7
8	8		export type HeroProps = {
		skipped 5 lines
14	14		export default function Hero({ inputText, suggestions, loading = false }: HeroProps) {
15	15		return (
16	16		<section className={styles.hero}>
17		-	<HeaderNew />
	17	+	<Header variant='homepage' />
18	18
19	19		<Container>
20	20		<div className={styles.content}>
		skipped 42 lines

■ ■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Icon/Icon.tsx

		skipped 3 lines
4	4		import lines from '../../../assets/icons/sprite/lines.svg';
5	5		import external from '../../../assets/icons/sprite/external.svg';
6	6		import arrow from '../../../assets/icons/sprite/arrow.svg';
	7	+	import arrowDown from '../../../assets/icons/sprite/arrow-down.svg';
7	8		import bug from '../../../assets/icons/sprite/bug.svg';
8	9		import logo from '../../../assets/icons/sprite/logo.svg';
	10	+	import weight from '../../../assets/icons/sprite/weight.svg';
	11	+	import search from '../../../assets/icons/sprite/search.svg';
	12	+	import duplicate from '../../../assets/icons/sprite/duplicate.svg';
	13	+	import outdated from '../../../assets/icons/sprite/outdated.svg';
9	14
10		-	const icons = { githubLogo, grid, lines, external, arrow, bug, logo };
	15	+	const icons = {
	16	+	githubLogo,
	17	+	grid,
	18	+	lines,
	19	+	external,
	20	+	arrow,
	21	+	bug,
	22	+	logo,
	23	+	weight,
	24	+	search,
	25	+	duplicate,
	26	+	outdated,
	27	+	arrowDown,
	28	+	};
11	29
12	30		export type IconProps = {
13	31		kind: keyof typeof icons;
		skipped 1 lines
15	33		height?: number;
16	34		className?: string;
17	35		color?: string;
	36	+	stroke?: string;
18	37		onClick?: () => unknown;
19	38		};
20	39
		skipped 1 lines
22	41		width = 16,
23	42		height = 16,
24	43		color = '#A5A5A5',
	44	+	stroke,
25	45		className,
26	46		kind,
27	47		onClick,
		skipped 7 lines
35	55		viewBox={icons[kind].viewBox}
36	56		fill='none'
37	57		color={color}
	58	+	stroke={stroke}
38	59		xmlns='http://www.w3.org/2000/svg'
39	60		>
40	61		<use xlinkHref={`/sprite.svg#${icons[kind].id}`} />
		skipped 4 lines

feat: init redesign for Search Results page