STRLCPY/gradejs

■ ■ ■ ■ ■ ■

packages/web/src/components/layouts/HomeNew/HomeNew.stories.tsx

1	+	import React from 'react';
2	+	import HomeNew from './HomeNew';
3	+	import { ComponentMeta, ComponentStory } from '@storybook/react';
4	+
5	+	export default {
6	+	title: 'Layouts / Home',
7	+	component: HomeNew,
8	+	parameters: {
9	+	layout: 'fullscreen',
10	+	},
11	+	} as ComponentMeta<typeof HomeNew>;
12	+
13	+	const Template: ComponentStory<typeof HomeNew> = (args) => <HomeNew {...args} />;
14	+
15	+	export const New = Template.bind({});
16	+	New.args = {
17	+	suggestions: ['tinkoff.ru', 'pinterest.com', 'github.com', 'gradejs.com', 'npmjs.com'],
18	+	};
19	+

■ ■ ■ ■ ■ ■

packages/web/src/components/layouts/HomeNew/HomeNew.tsx

1	+	import React from 'react';
2	+	import Hero from '../../ui/Hero/Hero';
3	+	import Container from 'components/ui/Container/Container';
4	+	import CardList from '../../ui/CardList/CardList';
5	+	import CardGroups from '../../ui/CardGroups/CardGroups';
6	+	import Footer from '../../ui/Footer/Footer';
7	+	import CardGroup from '../../ui/CardGroup/CardGroup';
8	+
9	+	export type HomeNewProps = {
10	+	suggestions: string[];
11	+	};
12	+
13	+	export default function HomeNew({ suggestions }: HomeNewProps) {
14	+	const popularCards = [
15	+	{
16	+	title: 'github.com',
17	+	icon: 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
18	+	packageTags: {
19	+	featuredPackages: ['mdast-util-from-markdown', 'react', 'react-dom'],
20	+	restPackages: 45,
21	+	},
22	+	},
23	+	{
24	+	title: 'fingerprint.com',
25	+	icon: 'https://avatars.githubusercontent.com/u/67208791?s=200&v=4',
26	+	packageTags: {
27	+	featuredPackages: ['mdast-util-from-markdown', 'react', 'react-dom'],
28	+	restPackages: 45,
29	+	},
30	+	},
31	+	{
32	+	title: 'facebook.com',
33	+	icon: 'https://avatars.githubusercontent.com/u/69631?s=200&v=4',
34	+	packageTags: {
35	+	featuredPackages: ['react'],
36	+	restPackages: 45,
37	+	},
38	+	},
39	+	];
40	+
41	+	const popularPackages = [
42	+	{
43	+	title: '@team-griffin/react-heading-section',
44	+	description: "This package's job is to automatically determine...",
45	+	featuredSites: {
46	+	iconList: [
47	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
48	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
49	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
50	+	],
51	+	numberOfUses: 5265,
52	+	},
53	+	},
54	+	{
55	+	title: 'unist-util-generated',
56	+	description: 'unist utility to check if a node is generated',
57	+	featuredSites: {
58	+	iconList: [
59	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
60	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
61	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
62	+	],
63	+	numberOfUses: 5265,
64	+	},
65	+	},
66	+	{
67	+	title: 'react-smooth',
68	+	description: 'is a animation library work on React',
69	+	featuredSites: {
70	+	iconList: [
71	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
72	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
73	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
74	+	],
75	+	numberOfUses: 5265,
76	+	},
77	+	},
78	+	{
79	+	title: 'unist-util-position',
80	+	description: 'unist utility to get the positional info of nodes',
81	+	featuredSites: {
82	+	iconList: [
83	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
84	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
85	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
86	+	],
87	+	numberOfUses: 5265,
88	+	},
89	+	},
90	+	{
91	+	title: 'vfile-message',
92	+	description: 'Create vfile messages',
93	+	featuredSites: {
94	+	iconList: [
95	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
96	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
97	+	'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg',
98	+	],
99	+	numberOfUses: 5265,
100	+	},
101	+	},
102	+	{
103	+	title: 'Go to all Popular packages',
104	+	variant: 'toAll',
105	+	},
106	+	];
107	+
108	+	const vulnerablePackages = [
109	+	{
110	+	title: 'disneyland.omsk.ru/signup',
111	+	vulnerablePackage: {
112	+	name: 'mdast-util-from-markdown',
113	+	},
114	+	variant: 'vulnerable',
115	+	},
116	+	{
117	+	title: 'disneyland.omsk.ru/signup',
118	+	vulnerablePackage: {
119	+	name: 'mdast-util-from-markdown',
120	+	moreCount: 1,
121	+	},
122	+	variant: 'vulnerable',
123	+	},
124	+	{
125	+	title: 'disneyland.omsk.ru/signup',
126	+	vulnerablePackage: {
127	+	name: 'mdast-util-from-markdown',
128	+	},
129	+	variant: 'vulnerable',
130	+	},
131	+	];
132	+
133	+	return (
134	+	<>
135	+	<Hero suggestions={suggestions} />
136	+
137	+	<Container>
138	+	<CardGroups>
139	+	<CardGroup title='Popular search queries'>
140	+	<CardList cards={popularCards} />
141	+	</CardGroup>
142	+
143	+	<CardGroup title='Popular packages'>
144	+	<CardList cards={popularPackages} />
145	+	</CardGroup>
146	+
147	+	<CardGroup title='Vulnerable sites'>
148	+	<CardList cards={vulnerablePackages} variant='vertical' />
149	+	</CardGroup>
150	+
151	+	<CardGroup title='Authors of popular packages'>
152	+	<CardList cards={popularCards} />
153	+	</CardGroup>
154	+	</CardGroups>
155	+	</Container>
156	+
157	+	<Footer />
158	+	</>
159	+	);
160	+	}
161	+

■ ■ ■ ■ ■ ■

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

		skipped 12 lines
13	13		display: flex;
14	14		flex-direction: column;
15	15
	16	+	@include lg {
	17	+	padding: 20px;
	18	+	}
	19	+
16	20		@include mobile-and-tablet {
17	21		min-height: 204px;
	22	+	box-shadow: $shadow-small;
18	23		}
19	24		}
20	25
		skipped 207 lines

■ ■ ■ ■ ■ ■

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

		skipped 113 lines
114	114		{vulnerablePackage.moreCount && (
115	115		<span className={styles.vulnerableMore}>
116	116		<Chip variant='secondary' size='medium'>
117		-	+{vulnerablePackage.moreCount}{' '}
	117	+	+{vulnerablePackage.moreCount}
	118	+
118	119		<span className={styles.vulnerableMoreText}>more</span>
119	120		</Chip>
120	121		</span>
		skipped 7 lines

■ ■ ■ ■ ■ ■

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

1	+	@import '~styles/responsive.scss';
2	+
3	+	.title {
4	+	@include mobile-and-tablet {
5	+	margin-bottom: 0;
6	+	}
7	+	}
8	+

■ ■ ■ ■ ■ ■

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

1	+	import React from 'react';
2	+	import styles from './CardGroup.module.scss';
3	+
4	+	export type CardGroupProps = {
5	+	title?: string;
6	+	children: React.ReactNode;
7	+	};
8	+
9	+	export default function CardGroup({ title, children }: CardGroupProps) {
10	+	return (
11	+	<div className={styles.group}>
12	+	{title && <h3 className={styles.title}>{title}</h3>}
13	+	{children}
14	+	</div>
15	+	);
16	+	}
17	+

■ ■ ■ ■ ■ ■

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

1	+	@import '~styles/responsive.scss';
2	+
3	+	.groups {
4	+	margin: 80px 0;
5	+
6	+	@include mobile-and-tablet {
7	+	margin-top: 56px;
8	+	margin-bottom: 32px;
9	+	}
10	+
11	+	& > * + * {
12	+	margin-top: 56px;
13	+
14	+	@include mobile-and-tablet {
15	+	margin-top: 32px;
16	+	}
17	+	}
18	+	}
19	+

■ ■ ■ ■ ■ ■

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

1	+	import React from 'react';
2	+	import styles from './CardGroups.module.scss';
3	+
4	+	export type CardGroupsProps = {
5	+	children: React.ReactNode;
6	+	};
7	+
8	+	export default function CardGroups({ children }: CardGroupsProps) {
9	+	return <div className={styles.groups}>{children}</div>;
10	+	}
11	+

■ ■ ■ ■ ■ ■

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

		skipped 7 lines
8	8		grid-gap: 20px;
9	9
10	10		@include lg {
11		-	grid-template-columns: repeat(2, minmax(0, 1fr));
	11	+	grid-gap: 16px;
12	12		}
13	13
14	14		@include mobile-and-tablet {
15		-	padding-top: 35px;
16		-	padding-bottom: 52px;
	15	+	padding-top: 24px;
	16	+	padding-bottom: 24px;
17	17		margin-left: -24px;
18	18		margin-right: -24px;
19	19		display: grid;
		skipped 3 lines
23	23		grid-template-rows: minmax(204px, 1fr);
24	24		overflow-x: auto;
25	25		scroll-snap-type: x proximity;
	26	+
	27	+	&::-webkit-scrollbar {
	28	+	display: none;
	29	+	}
26	30
27	31		&::before,
28	32		&::after {
		skipped 20 lines

■ ■ ■ ■ ■ ■

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

		skipped 41 lines
42	42		padding: 15px 19px;
43	43
44	44		@include mobile-and-tablet {
45		-	padding: 11px 15px;
	45	+	padding: 12px 15px;
46	46		}
47	47		}
48	48
		skipped 8 lines

■ ■ ■ ■ ■ ■

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

		skipped 10 lines
11	11		justify-content: space-between;
12	12
13	13		@include mobile-and-tablet {
14		-	margin-top: 56px;
	14	+	margin-top: 32px;
15	15		padding-top: 40px;
16	16		padding-bottom: 32px;
17	17		flex-direction: column-reverse;
		skipped 56 lines

■ ■ ■ ■ ■ ■

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

		skipped 10 lines
11	11		},
12	12		} as ComponentMeta<typeof Footer>;
13	13
14		-	const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />;
15		-
16		-	export const Main = Template.bind({});
17		-	Main.args = {
18		-	centerLinks: [
19		-	{ to: '/about', name: 'About' },
20		-	{ to: '/community', name: 'Community' },
21		-	{ to: '/github', name: 'GitHub' },
22		-	],
23		-	rightLinks: [
24		-	{ to: '/popular', name: 'Popular packages' },
25		-	{ to: '/search', name: 'Go to search' },
26		-	],
27		-	};
	14	+	export const Primary: ComponentStory<typeof Footer> = () => <Footer />;
28	15

■ ■ ■ ■ ■ ■

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

		skipped 1 lines
2	2		import styles from './Footer.module.scss';
3	3		import Container from '../Container/Container';
4	4
5		-	type FooterLink = {
6		-	to: string;
7		-	name: string;
8		-	};
9		-
10		-	export type FooterProps = {
11		-	centerLinks: FooterLink[];
12		-	rightLinks: FooterLink[];
13		-	};
14		-
15		-	export default function Footer({ centerLinks, rightLinks }: FooterProps) {
	5	+	export default function Footer() {
16	6		return (
17	7		<Container>
18	8		<footer className={styles.footer}>
19	9		<div className={styles.copyright}>© 2022 GradeJS. All rights reserved.</div>
20	10		<div className={styles.wrapper}>
21	11		<div className={styles.links}>
22		-	{centerLinks.map(({ to, name }) => (
23		-	<a key={name} href={to} className={styles.link}>
24		-	{name}
25		-	</a>
26		-	))}
	12	+	<a
	13	+	href='https://github.com/gradejs/gradejs/discussions/6'
	14	+	target='_blank'
	15	+	rel='norefferer noreferrer'
	16	+	className={styles.link}
	17	+	>
	18	+	About
	19	+	</a>
	20	+	<a
	21	+	href='https://github.com/gradejs/gradejs/discussions'
	22	+	target='_blank'
	23	+	rel='norefferer noreferrer'
	24	+	className={styles.link}
	25	+	>
	26	+	Community
	27	+	</a>
	28	+	<a
	29	+	href='https://github.com/gradejs/gradejs'
	30	+	target='_blank'
	31	+	rel='norefferer noreferrer'
	32	+	className={styles.link}
	33	+	>
	34	+	Github
	35	+	</a>
27	36		</div>
28	37		<div className={styles.links}>
29		-	{rightLinks.map(({ to, name }) => (
30		-	<a key={name} href={to} className={styles.link}>
31		-	{name}
32		-	</a>
33		-	))}
	38	+	<a href='#' className={styles.link}>
	39	+	Popular packages
	40	+	</a>
	41	+	<a href='#' className={styles.link}>
	42	+	Go to search
	43	+	</a>
34	44		</div>
35	45		</div>
36	46		</footer>
		skipped 4 lines

■ ■ ■ ■ ■ ■

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

		skipped 2 lines
3	3
4	4		.hero {
5	5		border-radius: 0 0 60px 60px;
6		-	background: url('~assets/hero-bg.png') 50% 100% no-repeat;
	6	+	background: url('~assets/hero-bg.png') 50% 0 no-repeat;
7	7		background-size: cover;
8	8		color: $white;
9	9		text-align: center;
		skipped 146 lines

■ ■ ■ ■ ■ ■

packages/web/src/styles/_vars.scss

		skipped 23 lines
24	24		$white: #fff;
25	25
26	26		$shadow: 0px 1px 35px rgba(#5c54ba, 0.1);
	27	+	$shadow-small: 0px 1px 24px rgba(#5c54ba, 0.1);
27	28

feat: put together redesigned homepage storybook from new static components