Skip to content

Commit

Permalink
switch styled-jsx to emotion
Browse files Browse the repository at this point in the history
  • Loading branch information
@YieldRay
YieldRay committed Dec 15, 2024
1 parent c19e25b commit d6cff8f
Show file tree
Hide file tree
Showing 9 changed files with 225 additions and 196 deletions.
18 changes: 10 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@
},
"devDependencies": {
"@chromatic-com/storybook": "1",
"@eslint/js": "^9.16.0",
"@emotion/babel-plugin": "^11.13.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@eslint/js": "^9.17.0",
"@floating-ui/react": "^0.26.28",
"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
"@material/material-color-utilities": "^0.3.0",
Expand All @@ -33,22 +36,21 @@
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@types/react": "^18.3.14",
"@types/react-dom": "^18.3.2",
"@types/react": "^18.3.16",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"chromatic": "^11.20.0",
"chromatic": "^11.20.2",
"clsx": "^2.1.1",
"eslint": "^9.16.0",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.16",
"glob": "^10.4.5",
"globals": "^15.13.0",
"prettier": "^3.4.2",
"sass": "^1.82.0",
"sass": "^1.83.0",
"storybook": "^8.4.7",
"styled-jsx": "^5.1.6",
"typescript": "^5.7.2",
"typescript-eslint": "^8.17.0",
"typescript-eslint": "^8.18.0",
"vite": "^5.4.11",
"vite-plugin-dts": "^4.3.0"
},
Expand Down
60 changes: 32 additions & 28 deletions src/components/date-picker/MenuButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { css } from '@emotion/react'
import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from '@mdi/js'
import Icon from '@mdi/react'
import { Ripple } from '@/ripple/Ripple'
Expand All @@ -15,41 +16,44 @@ export function MenuButton({
onClick?(): void
}) {
return (
<div className="sd-menu_button-outer">
<div
css={css`
display: inline-flex;
gap: 0.25rem;
align-items: center;
`}
>
<IconButton path={mdiChevronLeft} onClick={onLeft} />
{children && (
<Ripple as="div" className="sd-menu_button" onClick={onClick}>
<Ripple
as="div"
onClick={onClick}
css={css`
overflow: hidden;
flex-shrink: 1;
display: inline-flex;
gap: 0.15rem;
padding: 0.5rem 0;
align-items: center;
cursor: pointer;
transition: all 200ms;
word-break: keep-all;
font-size: 14px;
user-select: none;
-webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
@media (any-hover: hover) {
&:hover {
background: rgb(0 0 0 / 0.04);
}
}
`}
>
<span>{children}</span>
<Icon size={1} path={mdiMenuDown} />
</Ripple>
)}
<IconButton path={mdiChevronRight} onClick={onRight} />
<style jsx global>{`
.sd-menu_button-outer {
display: inline-flex;
gap: 0.25rem;
align-items: center;
}
.sd-menu_button {
overflow: hidden;
flex-shrink: 1;
display: inline-flex;
gap: 0.15rem;
padding: 0.5rem 0;
align-items: center;
cursor: pointer;
transition: all 200ms;
word-break: keep-all;
font-size: 14px;
user-select: none;
-webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
}
@media (any-hover: hover) {
.sd-menu_button:hover {
background: rgb(0 0 0 / 0.04);
}
}
`}</style>
</div>
)
}
173 changes: 95 additions & 78 deletions src/components/date-picker/SelectDay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,79 @@
import clsx from 'clsx'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import { ripple } from '@/ripple/ripple-effect'
import { getFormatCalendar, isSameDay } from './calendar'

const Day = styled.time<{
isToday: boolean
selected: boolean
disabled: boolean
}>`
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
transition: all 200ms;
margin: 2px 0;
&:active {
background: rgba(0 0 0 / 0.08);
}
${(props) =>
props.isToday &&
css`
border: solid 1px;
overflow: hidden;
`}
${(props) =>
props.disabled
? css`
background: none;
filter: grayscale(1) opacity(0.6);
`
: css`
cursor: pointer;
revert: true;
`}
${(props) =>
props.selected &&
css`
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
`}
${(props) =>
!props.disabled &&
!props.selected &&
css`
@media (any-hover: hover) {
&:hover {
background: rgba(0 0 0 / 0.04);
}
}
`}
`

const SelectDayRow = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
`

const SelectDayHeader = styled(SelectDayRow)`
margin-block-start: 30px;
margin-block-end: 16px;
`.withComponent('header')

export function SelectDay({
year,
month,
Expand All @@ -15,30 +87,36 @@ export function SelectDay({
}) {
const calendar = getFormatCalendar(year, month)
return (
<div className="select-day">
<header className="select-day-header">
<div
css={css`
user-select: none;
margin: 14px;
-webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
`}
>
<SelectDayHeader>
{['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'].map(
(day) => (
<div key={day}>
<time>{day}</time>
</div>
),
)}
</header>
<div className="select-day-body">
</SelectDayHeader>
<div>
{calendar.map((row, i) => (
<div className="select-day-row" key={i}>
<SelectDayRow
key={i}
css={css`
margin-block-start: 6px;
`}
>
{row.map((col, j) => (
<time
<Day
isToday={col.isToday}
selected={isSameDay(col.date, current)}
disabled={!col.isThisMonth}
key={j}
className={clsx(
'select-day-col',
'day',
isSameDay(col.date, current) && 'selected',
col.isToday && 'today',
!col.isThisMonth && 'disabled',
)}
data-sd-disabled={!col.isThisMonth}
dateTime={`${year}-${month}-${col.day}`}
onClick={() => {
if (col.isThisMonth && onChange)
Expand All @@ -47,72 +125,11 @@ export function SelectDay({
ref={(el) => el && ripple(el)}
>
{col.day}
</time>
</Day>
))}
</div>
</SelectDayRow>
))}
</div>

<style jsx>{`
.select-day {
user-select: none;
margin: 14px;
-webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
}
.select-day-header {
margin-block-start: 30px;
margin-block-end: 16px;
}
.select-day-row {
margin-block-start: 6px;
}
.select-day-header,
.select-day-row {
display: flex;
align-items: center;
justify-content: space-around;
}
.select-day-col {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
transition: all 200ms;
margin: 2px 0;
}
.day.today {
border: solid 1px;
overflow: hidden;
}
@media (any-hover: hover) {
.day:hover {
background: rgba(0 0 0 / 0.04);
}
}
.day:active {
background: rgba(0 0 0 / 0.08);
}
.day.selected {
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}
.day.disabled {
background: none;
filter: grayscale(1) opacity(0.6);
}
.day:not(.disabled) {
cursor: pointer;
revert: true;
}
`}</style>
</div>
)
}
Loading

0 comments on commit d6cff8f

Please sign in to comment.