Skip to content

Commit f8f3a2d

Browse files
emilkowalskiemilkowalski
committed
Add eslint & prettier
1 parent b831a0c commit f8f3a2d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+2019
-694
lines changed

‎.eslintrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next"
3+
}

‎.prettierrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"semi": true,
3+
"tabWidth": 2,
4+
"printWidth": 100,
5+
"singleQuote": true,
6+
"trailingComma": "none",
7+
"jsxBracketSameLine": true
8+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
![image](/public/readme-thumbnail.png)
2+
23
<p align="center">A collection of UI Snippets.</p>

‎components/Container/Container.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { styled } from "stitches.config.js";
1+
import { styled } from 'stitches.config.js';
22

3-
const Container = styled("div", {
4-
maxWidth: "1024px",
5-
padding: "$4",
6-
margin: "0 auto",
3+
const Container = styled('div', {
4+
maxWidth: '1024px',
5+
padding: '$4',
6+
margin: '0 auto'
77
});
88

99
export default Container;

‎components/Container/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Container";
1+
export { default } from './Container';

‎components/ContextMenu/ContextMenu.js

+61-59
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,77 @@
1-
import { styled, keyframes } from "stitches.config";
2-
import { createToast } from "vercel-toast";
3-
import * as ContextMenu from "@radix-ui/react-context-menu";
1+
import { styled, keyframes } from 'stitches.config';
2+
import { createToast } from 'vercel-toast';
3+
import * as RadixContextMenu from '@radix-ui/react-context-menu';
44

5-
export default ({ children, stitchesStyling, cssStyling, scssStyling }) => {
6-
const copyToClipboard = async (styling) => {
7-
try {
8-
await navigator.clipboard.writeText(styling);
5+
const ContextMenu = ({ children, stitchesStyling, cssStyling, scssStyling }) => {
6+
const copyToClipboard = async (styling) => {
7+
try {
8+
await navigator.clipboard.writeText(styling);
99

10-
createToast("Copied styles to clipboard", {
11-
timeout: 3000,
12-
});
13-
} catch {
14-
createToast("Failed to copy", {
15-
timeout: 3000,
16-
type: "error",
17-
});
18-
}
19-
};
10+
createToast('Copied styles to clipboard', {
11+
timeout: 3000
12+
});
13+
} catch {
14+
createToast('Failed to copy', {
15+
timeout: 3000,
16+
type: 'error'
17+
});
18+
}
19+
};
2020

21-
return (
22-
<ContextMenu.Root>
23-
<ContextMenu.Trigger>{children}</ContextMenu.Trigger>
24-
<Content>
25-
<Item onSelect={() => copyToClipboard(cssStyling)}>CSS</Item>
26-
<Item onSelect={() => copyToClipboard(scssStyling)}>SCSS</Item>
27-
<Item onSelect={() => copyToClipboard(stitchesStyling)}>Stitches</Item>
28-
</Content>
29-
</ContextMenu.Root>
30-
);
21+
return (
22+
<RadixContextMenu.Root>
23+
<RadixContextMenu.Trigger>{children}</RadixContextMenu.Trigger>
24+
<Content>
25+
<Item onSelect={() => copyToClipboard(cssStyling)}>CSS</Item>
26+
<Item onSelect={() => copyToClipboard(scssStyling)}>SCSS</Item>
27+
<Item onSelect={() => copyToClipboard(stitchesStyling)}>Stitches</Item>
28+
</Content>
29+
</RadixContextMenu.Root>
30+
);
3131
};
3232

33+
export default ContextMenu;
34+
3335
const reveal = keyframes({
34-
"0%": { transform: "scale(0.9)", opacity: 0 },
35-
"100%": { transform: "scale(1)", opacity: 1 },
36+
'0%': { transform: 'scale(0.9)', opacity: 0 },
37+
'100%': { transform: 'scale(1)', opacity: 1 }
3638
});
3739

38-
const Content = styled(ContextMenu.Content, {
39-
minWidth: 160,
40-
backgroundColor: "white",
41-
borderRadius: 6,
42-
padding: 5,
43-
boxShadow: "0px 5px 15px -5px hsla(206,22%,7%,.15)",
44-
transformOrigin: "var(--radix-context-menu-content-transform-origin)",
45-
animation: `${reveal} 0.1s ease`,
40+
const Content = styled(RadixContextMenu.Content, {
41+
minWidth: 160,
42+
backgroundColor: 'white',
43+
borderRadius: 6,
44+
padding: 5,
45+
boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
46+
transformOrigin: 'var(--radix-context-menu-content-transform-origin)',
47+
animation: `${reveal} 0.1s ease`
4648
});
4749

48-
const Separator = styled(ContextMenu.Separator, {
49-
height: 1,
50-
background: "hsl(208, 18%, 92%)",
51-
margin: 4,
50+
const Separator = styled(RadixContextMenu.Separator, {
51+
height: 1,
52+
background: 'hsl(208, 18%, 92%)',
53+
margin: 4
5254
});
5355

54-
const Wrapper = styled(ContextMenu.Root, {
55-
minWidth: 160,
56-
background: "$white",
57-
borderRadius: "$1",
58-
padding: 4,
56+
const Wrapper = styled(RadixContextMenu.Root, {
57+
minWidth: 160,
58+
background: '$white',
59+
borderRadius: '$1',
60+
padding: 4
5961
});
6062

61-
const Item = styled(ContextMenu.Item, {
62-
fontSize: 13,
63-
padding: "5px 10px",
64-
borderRadius: "$1",
65-
cursor: "default",
66-
height: 28,
67-
padding: "4px 8px",
68-
color: "$gray",
63+
const Item = styled(RadixContextMenu.Item, {
64+
fontSize: 13,
65+
padding: '5px 10px',
66+
borderRadius: '$1',
67+
cursor: 'default',
68+
height: 28,
69+
padding: '4px 8px',
70+
color: '$gray',
6971

70-
"&:focus": {
71-
outline: "none",
72-
backgroundColor: "hsl(207, 11%, 96%)",
73-
color: "$darkGray",
74-
},
72+
'&:focus': {
73+
outline: 'none',
74+
backgroundColor: 'hsl(207, 11%, 96%)',
75+
color: '$darkGray'
76+
}
7577
});

‎components/ContextMenu/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./ContextMenu";
1+
export { default } from './ContextMenu';

‎components/Footer/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Footer";
1+
export { default } from './Footer';

‎components/Grid/Grid.js

+29-25
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
1-
import { styled } from "stitches.config";
1+
import { styled } from 'stitches.config';
22

3-
import snippets from "components/Snippets";
4-
import GridItem from "./components/GridItem";
5-
import ContextMenu from "components/ContextMenu";
3+
import snippets from 'components/Snippets';
4+
import GridItem from './components/GridItem';
5+
import ContextMenu from 'components/ContextMenu';
66

77
const Grid = ({ children }) => {
8-
return (
9-
<Wrapper>
10-
{snippets.map(({ Component, cssStyling, scssStyling, stitchesStyling }) => (
11-
<ContextMenu cssStyling={cssStyling} scssStyling={scssStyling} stitchesStyling={stitchesStyling} key={stitchesStyling}>
12-
<GridItem>
13-
<Component />
14-
</GridItem>
15-
</ContextMenu>
16-
))}
17-
</Wrapper>
18-
);
8+
return (
9+
<Wrapper>
10+
{snippets.map(({ Component, cssStyling, scssStyling, stitchesStyling }) => (
11+
<ContextMenu
12+
cssStyling={cssStyling}
13+
scssStyling={scssStyling}
14+
stitchesStyling={stitchesStyling}
15+
key={stitchesStyling}>
16+
<GridItem>
17+
<Component />
18+
</GridItem>
19+
</ContextMenu>
20+
))}
21+
</Wrapper>
22+
);
1923
};
2024

21-
const Wrapper = styled("div", {
22-
display: "grid",
23-
gap: "$4",
24-
padding: "$4 0",
25+
const Wrapper = styled('div', {
26+
display: 'grid',
27+
gap: '$4',
28+
padding: '$4 0',
2529

26-
"@bp2": {
27-
gridTemplateColumns: "1fr 1fr",
28-
},
30+
'@bp2': {
31+
gridTemplateColumns: '1fr 1fr'
32+
},
2933

30-
"@bp3": {
31-
gridTemplateColumns: "1fr 1fr 1fr 1fr",
32-
},
34+
'@bp3': {
35+
gridTemplateColumns: '1fr 1fr 1fr 1fr'
36+
}
3337
});
3438

3539
export default Grid;

‎components/Grid/components/GridItem.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { styled } from "stitches.config";
1+
import { styled } from 'stitches.config';
22

33
const GridItem = ({ children, stitchesStyling }) => {
4-
return <Wrapper>{children}</Wrapper>;
4+
return <Wrapper>{children}</Wrapper>;
55
};
66

7-
const Wrapper = styled("div", {
8-
height: 120,
9-
backgroundColor: "$darkGray",
10-
borderRadius: "$1",
11-
display: "flex",
12-
justifyContent: "center",
13-
alignItems: "center",
7+
const Wrapper = styled('div', {
8+
height: 120,
9+
backgroundColor: '$darkGray',
10+
borderRadius: '$1',
11+
display: 'flex',
12+
justifyContent: 'center',
13+
alignItems: 'center'
1414
});
1515

1616
export default GridItem;

‎components/Grid/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Grid";
1+
export { default } from './Grid';

‎components/Header/Header.js

+35-35
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
1-
import Link from "next/link";
1+
import Link from 'next/link';
22

3-
import Container from "components/Container";
4-
import { styled } from "stitches.config";
3+
import Container from 'components/Container';
4+
import { styled } from 'stitches.config';
55

66
const Header = () => {
7-
return (
8-
<Wrapper as="header">
9-
<Logo href="/">UI Snippets</Logo>
10-
<GithubLink href="https://github.com/emilkowalski/ui-snippets" target="_blank">
11-
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
12-
<path
13-
fillRule="evenodd"
14-
clipRule="evenodd"
15-
d="M12 3c-4.973 0-9 4.13-9 9.228 0 4.083 2.576 7.532 6.154 8.754.45.081.618-.196.618-.438 0-.22-.01-.946-.01-1.719-2.262.427-2.847-.565-3.027-1.084-.101-.265-.54-1.084-.923-1.303-.315-.173-.764-.6-.01-.612.708-.011 1.214.67 1.383.946.81 1.396 2.104 1.004 2.621.762.079-.6.315-1.004.574-1.235-2.003-.23-4.095-1.026-4.095-4.556 0-1.003.349-1.834.922-2.48-.09-.23-.404-1.176.09-2.445 0 0 .754-.242 2.475.946a8.159 8.159 0 012.25-.312c.765 0 1.53.104 2.25.312 1.722-1.2 2.475-.946 2.475-.946.495 1.269.18 2.215.09 2.445.574.646.923 1.465.923 2.48 0 3.541-2.104 4.326-4.106 4.556.326.289.607.842.607 1.707 0 1.235-.011 2.227-.011 2.538 0 .242.169.53.619.438a9.036 9.036 0 004.439-3.366A9.402 9.402 0 0021 12.228C21 7.129 16.973 3 12 3z"
16-
></path>
17-
</svg>
18-
</GithubLink>
19-
</Wrapper>
20-
);
7+
return (
8+
<Wrapper as="header">
9+
<Logo href="/">UI Snippets</Logo>
10+
<GithubLink href="https://github.com/emilkowalski/ui-snippets" target="_blank">
11+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M12 3c-4.973 0-9 4.13-9 9.228 0 4.083 2.576 7.532 6.154 8.754.45.081.618-.196.618-.438 0-.22-.01-.946-.01-1.719-2.262.427-2.847-.565-3.027-1.084-.101-.265-.54-1.084-.923-1.303-.315-.173-.764-.6-.01-.612.708-.011 1.214.67 1.383.946.81 1.396 2.104 1.004 2.621.762.079-.6.315-1.004.574-1.235-2.003-.23-4.095-1.026-4.095-4.556 0-1.003.349-1.834.922-2.48-.09-.23-.404-1.176.09-2.445 0 0 .754-.242 2.475.946a8.159 8.159 0 012.25-.312c.765 0 1.53.104 2.25.312 1.722-1.2 2.475-.946 2.475-.946.495 1.269.18 2.215.09 2.445.574.646.923 1.465.923 2.48 0 3.541-2.104 4.326-4.106 4.556.326.289.607.842.607 1.707 0 1.235-.011 2.227-.011 2.538 0 .242.169.53.619.438a9.036 9.036 0 004.439-3.366A9.402 9.402 0 0021 12.228C21 7.129 16.973 3 12 3z"></path>
16+
</svg>
17+
</GithubLink>
18+
</Wrapper>
19+
);
2120
};
2221

2322
const Wrapper = styled(Container, {
24-
height: 100,
25-
display: "flex",
26-
alignItems: "center",
27-
justifyContent: "space-between",
23+
height: 100,
24+
display: 'flex',
25+
alignItems: 'center',
26+
justifyContent: 'space-between'
2827
});
2928

30-
const Logo = styled("a", {
31-
background: "linear-gradient(118deg, rgba(106,225,255,1) 0%, rgba(194,158,218,1) 80%, rgba(91,105,230,1) 100%)",
32-
"-webkit-background-clip": "text",
33-
"-webkit-text-fill-color": "transparent",
34-
fontSize: "20px",
35-
fontWeight: "$bold",
36-
display: "inline-block",
29+
const Logo = styled('a', {
30+
background:
31+
'linear-gradient(118deg, rgba(106,225,255,1) 0%, rgba(194,158,218,1) 80%, rgba(91,105,230,1) 100%)',
32+
'-webkit-background-clip': 'text',
33+
'-webkit-text-fill-color': 'transparent',
34+
fontSize: '20px',
35+
fontWeight: '$bold',
36+
display: 'inline-block'
3737
});
3838

39-
const GithubLink = styled("a", {
40-
color: "$white",
41-
opacity: 0.6,
42-
transition: "opacity 0.2s ease",
39+
const GithubLink = styled('a', {
40+
color: '$white',
41+
opacity: 0.6,
42+
transition: 'opacity 0.2s ease',
4343

44-
"&:hover": {
45-
opacity: 1,
46-
},
44+
'&:hover': {
45+
opacity: 1
46+
}
4747
});
4848

4949
export default Header;

‎components/Header/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Header";
1+
export { default } from './Header';

‎components/Heading/Heading.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { styled } from "stitches.config";
1+
import { styled } from 'stitches.config';
22

3-
const Heading = styled("h1", {
4-
fontSize: "40px",
5-
lineHeight: "1.1",
6-
letterSpacing: "-.89px",
7-
fontWeight: "$bold",
8-
display: "block",
9-
textAlign: "center",
10-
margin: 0,
3+
const Heading = styled('h1', {
4+
fontSize: '40px',
5+
lineHeight: '1.1',
6+
letterSpacing: '-.89px',
7+
fontWeight: '$bold',
8+
display: 'block',
9+
textAlign: 'center',
10+
margin: 0
1111
});
1212

1313
export default Heading;

‎components/Heading/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Heading";
1+
export { default } from './Heading';

0 commit comments

Comments
 (0)