-
Notifications
You must be signed in to change notification settings - Fork 600
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: css-in-js integration for styled-jsx and styled-components (#14)
* css-in-js * ui components * Update to latest canary * rm comments * Add extra styling section * Match docs naming * Move global css to new page * Update CSS module demo * Update Styled JSX demo * Add tailwind demo * Remove unused styles * Update example title * Update example description * Remove header and footer for now I will restyle them with tailwind later. * update packages * tweak description Co-authored-by: JJ Kasper <jj@jjsweb.site> Co-authored-by: Delba de Oliveira <delba.brown@gmail.com> Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
- Loading branch information
1 parent
d0423e0
commit 3301fa3
Showing
18 changed files
with
1,972 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { TabNavItem } from '@/ui/TabNavItem'; | ||
import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'; | ||
|
||
const items = [ | ||
{ | ||
name: 'Home', | ||
slug: '', | ||
}, | ||
{ | ||
name: 'Global CSS', | ||
slug: 'global-css', | ||
}, | ||
{ | ||
name: 'CSS Modules', | ||
slug: 'css-modules', | ||
}, | ||
{ | ||
name: 'Styled Components', | ||
slug: 'styled-components', | ||
}, | ||
{ | ||
name: 'Styled JSX', | ||
slug: 'styled-jsx', | ||
}, | ||
{ | ||
name: 'Tailwind CSS', | ||
slug: 'tailwind', | ||
}, | ||
]; | ||
|
||
const StylingNav = () => { | ||
const selectedLayoutSegment = useSelectedLayoutSegment(); | ||
|
||
return ( | ||
<div className="flex items-center space-x-4"> | ||
{items.map((item) => ( | ||
<TabNavItem | ||
key={item.slug} | ||
href={`/styling/${item.slug}`} | ||
isActive={item.slug === selectedLayoutSegment} | ||
> | ||
{item.name} | ||
</TabNavItem> | ||
))} | ||
</div> | ||
); | ||
}; | ||
|
||
export default StylingNav; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Boundary } from '@/ui/Boundary.server'; | ||
import styles from './styles.module.css'; | ||
|
||
const SkeletonCard = () => ( | ||
<div className={styles.skeleton}> | ||
<div className={styles['skeleton-img']} /> | ||
<div className={styles['skeleton-btn']} /> | ||
<div className={styles['skeleton-line-one']} /> | ||
<div className={styles['skeleton-line-two']} /> | ||
</div> | ||
); | ||
|
||
export default function Page() { | ||
return ( | ||
<Boundary labels={['Styled with CSS Modules']}> | ||
<div className={styles.container}> | ||
<SkeletonCard /> | ||
<SkeletonCard /> | ||
<SkeletonCard /> | ||
</div> | ||
</Boundary> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
.container { | ||
display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
gap: 1.5rem /* 24px */; | ||
} | ||
|
||
.skeleton { | ||
padding: 1rem /* 16px */; | ||
border-radius: 1rem /* 16px */; | ||
background-color: rgb(24 24 27 / 0.8); | ||
} | ||
|
||
.skeleton-img, | ||
.skeleton-btn, | ||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
border-radius: 0.5rem /* 8px */; | ||
} | ||
|
||
.skeleton-img { | ||
height: 3.5rem /* 56px */; | ||
background-color: rgb(63 63 70 / 1); | ||
} | ||
|
||
.skeleton-btn, | ||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
margin-top: 0.75rem /* 12px */; | ||
height: 0.75rem /* 12px */; | ||
} | ||
|
||
.skeleton-btn { | ||
background-color: rgb(121 40 202 / 1); | ||
width: 25%; | ||
} | ||
|
||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
background-color: rgb(63 63 70 / 1); | ||
} | ||
|
||
.skeleton-line-one { | ||
width: 91.666667%; | ||
} | ||
|
||
.skeleton-line-two { | ||
width: 66.666667%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Boundary } from '@/ui/Boundary.server'; | ||
import './styles.css'; | ||
|
||
const SkeletonCard = () => ( | ||
<div className="skeleton"> | ||
<div className="skeleton-img" /> | ||
<div className="skeleton-btn" /> | ||
<div className="skeleton-line-one" /> | ||
<div className="skeleton-line-two" /> | ||
</div> | ||
); | ||
|
||
export default function Page() { | ||
return ( | ||
<Boundary labels={['Styled with a global css stylesheet']}> | ||
<div className="container"> | ||
<SkeletonCard /> | ||
<SkeletonCard /> | ||
<SkeletonCard /> | ||
</div> | ||
</Boundary> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
.container { | ||
display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
gap: 1.5rem /* 24px */; | ||
} | ||
|
||
.skeleton { | ||
padding: 1rem /* 16px */; | ||
border-radius: 1rem /* 16px */; | ||
background-color: rgb(24 24 27 / 0.8); | ||
} | ||
|
||
.skeleton-img, | ||
.skeleton-btn, | ||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
border-radius: 0.5rem /* 8px */; | ||
} | ||
|
||
.skeleton-img { | ||
height: 3.5rem /* 56px */; | ||
background-color: rgb(63 63 70 / 1); | ||
} | ||
|
||
.skeleton-btn, | ||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
margin-top: 0.75rem /* 12px */; | ||
height: 0.75rem /* 12px */; | ||
} | ||
|
||
.skeleton-btn { | ||
background-color: rgb(245 166 35 / 1); | ||
width: 25%; | ||
} | ||
|
||
.skeleton-line-one, | ||
.skeleton-line-two { | ||
background-color: rgb(63 63 70 / 1); | ||
} | ||
|
||
.skeleton-line-one { | ||
width: 91.666667%; | ||
} | ||
|
||
.skeleton-line-two { | ||
width: 66.666667%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
import StylingNav from './StylingNav.client'; | ||
|
||
export default function Layout({ children }: { children: React.ReactNode }) { | ||
return ( | ||
<div className="space-y-9"> | ||
<StylingNav /> | ||
<div>{children}</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
export default function Page() { | ||
return ( | ||
<div className="space-y-4"> | ||
<div className="text-white">Notes</div> | ||
|
||
<ul className="list-disc space-y-2 pl-4 text-sm text-zinc-300"> | ||
<li> | ||
Supporting CSS-in-JS (Styled Components and Styled JSX) is a | ||
three-step opt-in process that involves: | ||
</li> | ||
<ul className="list-disc space-y-2 pl-4 text-sm text-zinc-300"> | ||
<li> | ||
Creating a "style registry" to collect all CSS rules in a render. | ||
</li> | ||
<li> | ||
Using the new `useFlushEffects` hook to inject rules before any | ||
content that might use them. | ||
</li> | ||
<li> | ||
Creating a client component that wraps your top-level container containing | ||
those styles usage with the style registry during initial server-side rendering. | ||
</li> | ||
</ul> | ||
</ul> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { Boundary } from '@/ui/Boundary.server'; | ||
import styled from 'styled-components'; | ||
|
||
const Container = styled.div` | ||
display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
gap: 1.5rem /* 24px */; | ||
`; | ||
|
||
const SkeletonInner = styled.div` | ||
padding: 1rem /* 16px */; | ||
background-color: rgb(24 24 27 / 0.8); | ||
border-radius: 1rem /* 16px */; | ||
`; | ||
|
||
const SkeletonImg = styled.div` | ||
height: 3.5rem /* 56px */; | ||
border-radius: 0.5rem /* 8px */; | ||
background-color: rgb(63 63 70 / 1); | ||
`; | ||
|
||
const SkeletonBtn = styled.div` | ||
margin-top: 0.75rem /* 12px */; | ||
width: 25%; | ||
height: 0.75rem /* 12px */; | ||
border-radius: 0.5rem /* 8px */; | ||
background-color: rgb(255 0 128 / 1); | ||
`; | ||
|
||
const SkeletonLineOne = styled.div` | ||
margin-top: 0.75rem /* 12px */; | ||
height: 0.75rem /* 12px */; | ||
width: 91.666667%; | ||
border-radius: 0.5rem /* 8px */; | ||
background-color: rgb(63 63 70 / 1); | ||
`; | ||
|
||
const SkeletonLineTwo = styled.div` | ||
margin-top: 0.75rem /* 12px */; | ||
height: 0.75rem /* 12px */; | ||
width: 66.666667%; | ||
border-radius: 0.5rem /* 8px */; | ||
background-color: rgb(63 63 70 / 1); | ||
`; | ||
|
||
const Skeleton = () => ( | ||
<SkeletonInner> | ||
<SkeletonImg /> | ||
<SkeletonBtn /> | ||
<SkeletonLineOne /> | ||
<SkeletonLineTwo /> | ||
</SkeletonInner> | ||
); | ||
|
||
export default function Page() { | ||
return ( | ||
<Boundary labels={['Styled with styled-components']}> | ||
<Container> | ||
<Skeleton /> | ||
<Skeleton /> | ||
<Skeleton /> | ||
</Container> | ||
</Boundary> | ||
); | ||
} |
Oops, something went wrong.