Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-06 16:06:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: format codebase

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2020-05-19 21:57:49 -04:00
parent 0eaea34b28
commit a1283334b3
37 changed files with 146 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ResourcesSidebar/index.tsx
+10 -10
View File
@@ -30,7 +30,7 @@ const ALL_RESOURCES = graphql`
`
const childrenSort = sortWith<IFileOrFolder>([
descend(f => {
descend((f) => {
if (f.title === "intro") {
return 1
}
@@ -87,7 +87,7 @@ function Folder({ item }: { item: IFolder }) {
})
function toggleCollapse() {
setCollapse(prevState => !prevState)
setCollapse((prevState) => !prevState)
}
const sortedChildren = childrenSort(item.children)
@@ -98,8 +98,8 @@ function Folder({ item }: { item: IFolder }) {
<TriangleDown /> {humanize(item.title)}
</SC.Label>
<SC.Children>
{sortedChildren.map(node => (
<Tree key={node.title + '-tree'} item={node} />
{sortedChildren.map((node) => (
<Tree key={node.title + "-tree"} item={node} />
))}
</SC.Children>
</SC.TreeWrapper>
@@ -119,8 +119,8 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
<SC.TreeWrapper className="firstLevel">
<SC.FirstLabel>{humanize(item.title)}</SC.FirstLabel>
<SC.Children>
{sortedChildren.map(node => (
<Tree key={node.title + '-tree'} item={node} />
{sortedChildren.map((node) => (
<Tree key={node.title + "-tree"} item={node} />
))}
</SC.Children>
</SC.TreeWrapper>
@@ -135,7 +135,7 @@ const LanguageList: FC<{
return (
<SC.StyledLanguageList>
{items.map(item => (
{items.map((item) => (
<SC.Language
key={item.title}
className={current === item.title ? "active" : ""}
@@ -165,7 +165,7 @@ const AllLanguages: FC<{
return (
<SC.ExpandLanguages>
<SC.ExpandLanguagesHeader
onClick={() => setExpanded(prevState => !prevState)}
onClick={() => setExpanded((prevState) => !prevState)}
>
Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
</SC.ExpandLanguagesHeader>
@@ -174,7 +174,7 @@ const AllLanguages: FC<{
)
}
export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
const [expandedLanguages, setExpandedLanguages] = useState(false)
const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
const languages = useBuildTree(resources, "/resources")
@@ -184,7 +184,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
languages
)
const currentLanguage = sortedLanguages.find(lang => lang.title === current)
const currentLanguage = sortedLanguages.find((lang) => lang.title === current)
return (
<Sidebar {...props}>
src/components/ResourcesSidebar/styles.tsx
+16 -16
View File
@@ -30,7 +30,7 @@ export const Label = styled.div`
align-self: flex-start;
&:hover {
border-color: ${props =>
border-color: ${(props) =>
transparentize(0.7, props.theme.sidebar.foreground)};
}
@@ -50,14 +50,14 @@ export const FirstLabel = styled.div`
box-sizing: border-box;
padding: 12px 15px 12px 0;
font-weight: 700;
color: ${props => props.theme.sidebar.foreground};
color: ${(props) => props.theme.sidebar.foreground};
cursor: pointer;
&:hover {
color: ${props => props.theme.sidebar.foreground};
color: ${(props) => props.theme.sidebar.foreground};
svg path {
fill: ${props => props.theme.sidebar.foreground};
fill: ${(props) => props.theme.sidebar.foreground};
}
}
@@ -66,7 +66,7 @@ export const FirstLabel = styled.div`
transform: rotate(90deg);
path {
fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
}
}
`
@@ -82,12 +82,12 @@ export const TreeWrapper = styled.div<{ collapsed?: boolean }>`
}
${Children} {
display: ${props => (props.collapsed ? "none" : "flex")};
display: ${(props) => (props.collapsed ? "none" : "flex")};
}
& > ${Label} svg {
transform: rotate(${props => (props.collapsed ? -90 : 0)}deg);
fill: ${props => props.theme.sidebar.foreground};
transform: rotate(${(props) => (props.collapsed ? -90 : 0)}deg);
fill: ${(props) => props.theme.sidebar.foreground};
}
`
@@ -97,7 +97,7 @@ export const CollapseIcon = styled(Collapse)`
margin-left: auto;
path {
fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
}
`
@@ -105,7 +105,7 @@ export const ExpandIcon = styled(Expand)`
margin-left: auto;
path {
fill: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
fill: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
}
`
@@ -113,7 +113,7 @@ export const ExpandLanguages = styled.div`
padding: 12px 15px 12px 0;
border-bottom: 1px solid
${props => transparentize(0.8, props.theme.sidebar.foreground)};
${(props) => transparentize(0.8, props.theme.sidebar.foreground)};
margin-bottom: 8px;
`
@@ -122,7 +122,7 @@ export const ExpandLanguagesHeader = styled.div`
display: flex;
align-items: center;
cursor: pointer;
color: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
color: ${(props) => transparentize(0.5, props.theme.sidebar.foreground)};
font-weight: 700;
&:hover {
@@ -141,14 +141,14 @@ export const StyledLanguageList = styled.div`
const item = css`
display: block;
margin-bottom: 4px;
color: ${props => props.theme.sidebar.foreground};
color: ${(props) => props.theme.sidebar.foreground};
align-self: flex-start;
text-decoration: none;
border-bottom: 2px solid transparent;
cursor: pointer;
&:hover {
border-color: ${props =>
border-color: ${(props) =>
transparentize(0.7, props.theme.sidebar.foreground)};
}
@@ -159,11 +159,11 @@ const item = css`
&.active {
font-weight: 700;
color: ${props => props.theme.sidebar.active};
color: ${(props) => props.theme.sidebar.active};
}
&.active:hover {
border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
border-color: ${(props) => transparentize(0.7, props.theme.sidebar.active)};
}
`