Skip to content

Commit

Permalink
wip: replace macaron-css with unocss
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-20
cp-20 committed Aug 28, 2024
1 parent 5dd3b3a commit 7205bf4
Show file tree
Hide file tree
Showing 47 changed files with 705 additions and 2,748 deletions.
47 changes: 20 additions & 27 deletions dashboard/src/components/UI/Badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
import { styled } from '@macaron-css/solid'
import { colorVars, textVars } from '/@/theme'
import { type ComponentProps, type ParentComponent, splitProps } from 'solid-js'
import { clsx } from '/@/libs/clsx'

const Badge = styled('div', {
base: {
height: '1.43em', // 20px
padding: '0 8px',
borderRadius: '9999px',
whiteSpace: 'nowrap',
type VariantProps = {
variant: 'text' | 'success' | 'warn'
}

...textVars.caption.regular,
},
variants: {
variant: {
text: {
background: colorVars.primitive.blackAlpha[200],
color: colorVars.semantic.text.black,
},
success: {
background: colorVars.semantic.transparent.successHover,
color: colorVars.semantic.accent.success,
},
warn: {
background: colorVars.semantic.transparent.warnHover,
color: colorVars.semantic.accent.warn,
},
},
},
})
const Badge: ParentComponent<ComponentProps<'div'> & VariantProps> = (props) => {
const [_, rest] = splitProps(props, ['variant', 'class'])
return (
<div
class={clsx(
'caption-regular h-5 whitespace-nowrap rounded-full px-2',
props.variant === 'text' && 'bg-black-alpha-200 text-text-black',
props.variant === 'success' && 'bg-transparency-success-hover text-accent-success',
props.variant === 'warn' && 'bg-transparency-warn-hover text-accent-warn',
props.class,
)}
{...rest}
/>
)
}

export default Badge
229 changes: 44 additions & 185 deletions dashboard/src/components/UI/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,176 +1,6 @@
import { styled } from '@macaron-css/solid'
import { type JSX, type ParentComponent, Show, splitProps } from 'solid-js'
import { colorOverlay } from '/@/libs/colorOverlay'
import { colorVars, textVars } from '/@/theme'
import { ToolTip, type TooltipProps } from './ToolTip'

const Container = styled('button', {
base: {
width: 'auto',
display: 'flex',
alignItems: 'center',
borderRadius: '8px',
gap: '4px',

background: 'none',
border: 'none',
cursor: 'pointer',
selectors: {
'&:disabled': {
cursor: 'not-allowed',
border: 'none !important',
color: `${colorVars.semantic.text.black} !important`,
background: `${colorVars.semantic.text.disabled} !important`,
},
'&[data-loading="true"]': {
cursor: 'wait',
border: 'none !important',
color: `${colorVars.semantic.text.black} !important`,
background: `${colorVars.semantic.text.disabled} !important`,
},
},
},
variants: {
size: {
medium: {
height: '44px',
padding: '0 16px',
},
small: {
height: '32px',
padding: '0 12px',
},
},
full: {
true: {
width: '100%',
},
},
variants: {
primary: {
background: colorVars.semantic.primary.main,
color: colorVars.semantic.text.white,
selectors: {
'&:hover': {
background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[200]),
},
'&:active, &[data-active="true"]': {
background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[300]),
},
},
},
ghost: {
background: colorVars.semantic.ui.secondary,
color: colorVars.semantic.text.black,
selectors: {
'&:hover': {
background: colorOverlay(colorVars.semantic.ui.secondary, colorVars.primitive.blackAlpha[50]),
},
'&:active, &[data-active="true"]': {
background: colorOverlay(colorVars.semantic.ui.secondary, colorVars.primitive.blackAlpha[200]),
},
},
},
border: {
border: `solid 1px ${colorVars.semantic.ui.border}`,
color: colorVars.semantic.text.black,
selectors: {
'&:hover': {
background: colorVars.semantic.transparent.primaryHover,
},
'&:active, &[data-active="true"]': {
background: colorVars.semantic.transparent.primarySelected,
},
},
},
text: {
color: colorVars.semantic.text.black,
selectors: {
'&:hover': {
background: colorVars.semantic.transparent.primaryHover,
},
'&:active, &[data-active="true"]': {
color: colorVars.semantic.primary.main,
background: colorVars.semantic.transparent.primarySelected,
},
},
},
primaryError: {
border: `solid 1px ${colorVars.semantic.accent.error}`,
background: colorVars.semantic.accent.error,
color: colorVars.semantic.text.white,
selectors: {
'&:hover': {
background: colorOverlay(colorVars.semantic.accent.error, colorVars.primitive.blackAlpha[200]),
},
'&:active, &[data-active="true"]': {
background: colorOverlay(colorVars.semantic.accent.error, colorVars.primitive.blackAlpha[300]),
},
},
},
borderError: {
border: `solid 1px ${colorVars.semantic.accent.error}`,
color: colorVars.semantic.accent.error,
selectors: {
'&:hover': {
background: colorVars.semantic.transparent.errorHover,
},
'&:active, &[data-active="true"]': {
background: colorVars.semantic.transparent.errorSelected,
},
},
},
textError: {
color: colorVars.semantic.accent.error,
selectors: {
'&:hover': {
background: colorVars.semantic.transparent.errorHover,
},
'&:active, &[data-active="true"]': {
background: colorVars.semantic.transparent.errorSelected,
},
},
},
},
hasCheckbox: {
true: {
gap: '8px',
},
},
},
})
const Text = styled('div', {
base: {
whiteSpace: 'nowrap',
},
variants: {
size: {
medium: {
...textVars.text.bold,
},
small: {
...textVars.caption.bold,
},
},
},
})
const IconContainer = styled('div', {
base: {
lineHeight: 1,
},
variants: {
size: {
medium: {
width: '24px',
height: '24px',
},
small: {
width: '20px',
height: '20px',
},
},
},
})
import { clsx } from '/@/libs/clsx'

export interface Props extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
variants: 'primary' | 'ghost' | 'border' | 'text' | 'primaryError' | 'borderError' | 'textError'
Expand All @@ -186,6 +16,7 @@ export interface Props extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {

export const Button: ParentComponent<Props> = (props) => {
const [addedProps, originalButtonProps] = splitProps(props, [
'class',
'variants',
'size',
'loading',
Expand All @@ -200,28 +31,56 @@ export const Button: ParentComponent<Props> = (props) => {

return (
<ToolTip {...addedProps.tooltip}>
<span // ボタンがdisabledの時もTippy.jsのtooltipが表示されるようにするためのラッパー
style={{
width: addedProps.full ? '100%' : 'fit-content',
}}
>
<Container
variants={addedProps.variants}
size={addedProps.size}
{/* ボタンがdisabledの時もTippy.jsのtooltipが表示されるようにするためのラッパー */}
<span class={addedProps.full ? 'w-full' : 'w-fit'}>
<button
class={clsx(
'flex w-auto cursor-pointer items-center gap-1 rounded-lg border-none bg-none',
'!disabled:border-none !disabled:bg-text-disabled !disabled:text-text-black disabled:cursor-not-allowed',
'!data-[loading]:border-none !data-[loading]:bg-text-disabled !data-[loading]:text-text-black data-[loading]:cursor-wait',
// size
{ small: 'h-8 px-3', medium: 'h-11 px-4' }[addedProps.size],
// full
addedProps.full && 'w-full',
// hasCheckbox
addedProps.hasCheckbox && 'gap-2',
// variants
{
primary:
'bg-primary-main text-text-white hover:bg-color-overlay-primary-main-to-black-alpha-200 active:bg-color-overlay-primary-main-to-black-alpha-300 data-[active]:bg-color-overlay-primary-main-to-black-alpha-300',
ghost:
'bg-ui-secondary text-text-black hover:bg-color-overlay-ui-secondary-to-black-alpha-50 active:bg-color-overlay-ui-secondary-to-black-alpha-200 data-[active]:bg-color-overlay-ui-secondary-to-black-alpha-200',
border:
'border border-ui-border text-text-black hover:bg-transparency-primary-hover active:bg-transparency-primary-selected data-[active]:bg-transparency-primary-selected',
text: 'text-text-black hover:bg-transparency-primary-hover active:text-primary-main data-[active]:bg-transparency-primary-selected',

primaryError:
'border border-accent-error bg-accent-error text-text-white hover:bg-color-overlay-accent-error-to-black-alpha-200 active:bg-color-overlay-accent-error-to-black-alpha-300 data-[active]:bg-color-overlay-accent-error-to-black-alpha-300',
borderError:
'border border-accent-error text-accent-error hover:bg-transparency-error-hover active:bg-transparency-error-selected data-[active]:bg-transparency-error-selected',

textError:
'text-accent-error hover:bg-transparency-error active:bg-transparency-error-selected data-[active]:bg-transparency-error-selected',
}[addedProps.variants],
)}
data-active={addedProps.active}
hasCheckbox={addedProps.hasCheckbox}
full={addedProps.full}
data-loading={addedProps.loading}
{...originalButtonProps}
>
<Show when={addedProps.leftIcon}>
<IconContainer size={addedProps.size}>{addedProps.leftIcon}</IconContainer>
<div class={clsx('leading-4', { small: 'size-5', medium: 'size-6' }[addedProps.size])}>
{addedProps.leftIcon}
</div>
</Show>
<Text size={addedProps.size}>{addedProps.children}</Text>
<div class={clsx('whitespace-nowrap', { small: 'caption-bold', medium: 'text-bold' }[addedProps.size])}>
{addedProps.children}
</div>
<Show when={addedProps.rightIcon}>
<IconContainer size={addedProps.size}>{addedProps.rightIcon}</IconContainer>
<div class={clsx('leading-4', { small: 'size-5', medium: 'size-6' }[addedProps.size])}>
{addedProps.rightIcon}
</div>
</Show>
</Container>
</button>
</span>
</ToolTip>
)
Expand Down
61 changes: 9 additions & 52 deletions dashboard/src/components/UI/CheckBoxIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,6 @@
import { styled } from '@macaron-css/solid'
import { type Component, Show } from 'solid-js'
import CheckMark from '/@/assets/icons/check.svg'
// import { colorOverlay } from '/@/libs/colorOverlay'
import { colorVars } from '/@/theme'

const Container = styled('div', {
base: {
width: '100%',
height: 'auto',
aspectRatio: '1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',

borderRadius: '4px',
color: colorVars.semantic.ui.primary,
},
variants: {
checked: {
false: {
background: colorVars.semantic.ui.background,
border: `2px solid ${colorVars.semantic.ui.tertiary}`,
// selectors: {
// '&:hover': {
// background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[200]),
// },
// '&:active': {
// background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[300]),
// },
// },
},
true: {
background: colorVars.semantic.primary.main,
// selectors: {
// '&:hover': {
// background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[200]),
// },
// '&:active': {
// background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[300]),
// },
// },
},
},
disabled: {
true: {
cursor: 'not-allowed',
background: `${colorVars.semantic.text.disabled} !important`,
},
},
},
})
import { clsx } from '/@/libs/clsx'

export interface Props {
checked: boolean
Expand All @@ -58,10 +9,16 @@ export interface Props {

export const CheckBoxIcon: Component<Props> = (props) => {
return (
<Container checked={props.checked} disabled={props.disabled}>
<div
class={clsx(
'flex aspect-square h-auto w-full items-center justify-center rounded text-ui-primary',
!props.checked && 'border-2 border-ui-tertiary bg-ui-background',
props.disabled && '!bg-text-disabled cursor-not-allowed',
)}
>
<Show when={props.checked}>
<CheckMark />
</Show>
</Container>
</div>
)
}
Loading

0 comments on commit 7205bf4

Please sign in to comment.