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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next"
3+
}

‎.prettierrc

Lines changed: 8 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 5 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Container";
1+
export { default } from './Container';

‎components/ContextMenu/ContextMenu.js

Lines changed: 61 additions & 59 deletions
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./ContextMenu";
1+
export { default } from './ContextMenu';

‎components/Footer/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from "./Footer";
1+
export { default } from './Footer';

‎components/Grid/Grid.js

Lines changed: 29 additions & 25 deletions
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

Lines changed: 9 additions & 9 deletions
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;

0 commit comments

Comments
 (0)