Refactor/upload style contract

ui-admin/upload/src/container/container.css.ts

@@ -4,8 +4,7 @@ import { vars }  from '@atls-ui-admin/theme'
 
 export const containerStyles = style({
   position: 'relative',
-  borderWidth: 2,
-  borderStyle: 'dashed',
+  border: vars.borders.dashedGray,
   cursor: 'pointer',
   outline: 'none',
   borderColor: vars.colors.black,

ui-admin/upload/src/index.ts

@@ -1,2 +1,2 @@
-export * from './upload.component.js'
-export * from './dropzone-placeholder.component.js'
+export * from './component.js'
+export * from './placeholder/dropzone/index.js'

ui-admin/upload/src/placeholder/accept/component.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode }      from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { clsx }                from 'clsx'
+
+import { baseAcceptStyles }    from './styles.css.js'
+
+export const PlaceholderAccept = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>): ReactNode => (
+  <span className={clsx(className, baseAcceptStyles)} {...props}>
+    {children}
+  </span>
+)

ui-admin/upload/src/placeholder/accept/index.ts

@@ -0,0 +1 @@
+export * from './component.js'

ui-admin/upload/src/placeholder-accept/placeholder-accept.css.ts → ui-admin/upload/src/placeholder/accept/styles.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'
 
 import { vars }  from '@atls-ui-admin/theme'
 
-export const basePlaceholderAcceptStyles = style({
+export const baseAcceptStyles = style({
   padding: `${vars.space.g8} ${vars.space.zero}`,
   color: vars.colors['icons.placeholder'],
   fontFamily: vars.fonts.primary,

ui-admin/upload/src/placeholder/placeholder.component.tsx → ui-admin/upload/src/placeholder/component.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes }   from 'react'
 
 import { clsx }                  from 'clsx'
 
-import { basePlaceholderStyles } from './placeholder.css.js'
+import { basePlaceholderStyles } from './styles.css.js'
 
 export const Placeholder = ({
   children,

ui-admin/upload/src/placeholder/dropzone/component.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode }                from 'react'
+import type { PropsWithChildren }        from 'react'
+
+import type { DropzonePlaceholderProps } from './interfaces.js'
+
+import { clsx }                          from 'clsx'
+
+import { UploadIcon }                    from '@atls-ui-admin/icons'
+
+import { PlaceholderAccept }             from '../accept/index.js'
+import { PlaceholderIcon }               from '../icon/index.js'
+import { PlaceholderLink }               from '../link/index.js'
+import { dropzoneContainerStyles }       from '../../container/container.css.js'
+
+export const DropzonePlaceholder = ({
+  accept,
+  children,
+  className,
+  slotProps,
+  ...props
+}: PropsWithChildren<DropzonePlaceholderProps>): ReactNode => (
+  <div className={clsx(dropzoneContainerStyles, className)} {...props}>
+    <PlaceholderIcon {...slotProps?.icon}>
+      <UploadIcon height={40} width={40} />
+    </PlaceholderIcon>
+    <PlaceholderAccept {...slotProps?.accept}>{accept}</PlaceholderAccept>
+    <PlaceholderLink {...slotProps?.link}>{children}</PlaceholderLink>
+  </div>
+)

ui-admin/upload/src/placeholder/dropzone/index.ts

@@ -0,0 +1,2 @@
+export type * from './interfaces.js'
+export * from './component.js'

ui-admin/upload/src/placeholder/dropzone/interfaces.ts

@@ -0,0 +1,14 @@
+import type { AnchorHTMLAttributes } from 'react'
+import type { HTMLAttributes }       from 'react'
+import type { ReactNode }            from 'react'
+
+export interface DropzonePlaceholderSlotProps {
+  icon?: HTMLAttributes<HTMLSpanElement>
+  accept?: HTMLAttributes<HTMLSpanElement>
+  link?: AnchorHTMLAttributes<HTMLAnchorElement>
+}
+
+export interface DropzonePlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+  accept: ReactNode
+  slotProps?: DropzonePlaceholderSlotProps
+}

ui-admin/upload/src/placeholder/icon/component.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode }      from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { clsx }                from 'clsx'
+
+import { baseIconStyles }      from './styles.css.js'
+
+export const PlaceholderIcon = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>): ReactNode => (
+  <span className={clsx(className, baseIconStyles)} {...props}>
+    {children}
+  </span>
+)

ui-admin/upload/src/placeholder/icon/index.ts

@@ -0,0 +1 @@
+export * from './component.js'

ui-admin/upload/src/placeholder-icon/placeholder-icon.css.ts → ui-admin/upload/src/placeholder/icon/styles.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'
 
 import { vars }  from '@atls-ui-admin/theme'
 
-export const basePlaceholderIconStyles = style({
+export const baseIconStyles = style({
   padding: `${vars.space.g4} ${vars.space.zero}`,
   color: vars.colors['icons.placeholder'],
   fill: vars.colors['icons.placeholder'],

ui-admin/upload/src/placeholder/index.ts

@@ -1 +1,2 @@
-export * from './placeholder.component.js'
+export * from './component.js'
+export * from './dropzone/index.js'

ui-admin/upload/src/placeholder-link/placeholder-link.component.tsx → ui-admin/upload/src/placeholder/link/component.tsx

@@ -3,14 +3,14 @@ import type { AnchorHTMLAttributes } from 'react'
 
 import { clsx }                      from 'clsx'
 
-import { basePlaceholderLinkStyles } from './placeholder-link.css.js'
+import { baseLinkStyles }            from './styles.css.js'
 
 export const PlaceholderLink = ({
   children,
   className,
   ...props
 }: AnchorHTMLAttributes<HTMLAnchorElement>): ReactNode => (
-  <a className={clsx(className, basePlaceholderLinkStyles)} {...props}>
+  <a className={clsx(className, baseLinkStyles)} {...props}>
     {children}
   </a>
 )

ui-admin/upload/src/placeholder/link/index.ts

@@ -0,0 +1 @@
+export * from './component.js'

ui-admin/upload/src/placeholder-link/placeholder-link.css.ts → ui-admin/upload/src/placeholder/link/styles.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css'
 
 import { vars }  from '@atls-ui-admin/theme'
 
-export const basePlaceholderLinkStyles = style({
+export const baseLinkStyles = style({
   padding: `${vars.space.g8} ${vars.space.zero}`,
   // @ts-expect-error correct text.blue field
   color: vars.colors['text.blue'],

ui-admin/upload/stories/interfaces.ts

@@ -0,0 +1,11 @@
+import type { buttonAppearances } from '@atls-ui-admin/button'
+import type { buttonShapes }      from '@atls-ui-admin/button'
+
+export type ButtonAppearanceName = keyof typeof buttonAppearances
+export type ButtonShapeName = keyof typeof buttonShapes
+
+export interface UploadStoryProps {
+  appearance: ButtonAppearanceName
+  customPlaceholder: boolean
+  shape: ButtonShapeName
+}

ui-admin/upload/stories/styles.css.ts

@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css'
+
+import { vars }  from '@atls-ui-admin/theme'
+
+export const customPlaceholderRootStyles = style({
+  gap: vars.space.g4,
+  padding: `${vars.space.g16} ${vars.space.g24}`,
+  borderRadius: vars.radii.f8,
+  backgroundColor: vars.colors.blueProtective,
+})
+
+export const customPlaceholderIconStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 64,
+  height: 64,
+  borderRadius: vars.radii.full,
+  color: vars.colors.blue,
+  fill: vars.colors.blue,
+  backgroundColor: vars.colors.white,
+})
+
+export const customPlaceholderAcceptStyles = style({
+  padding: vars.space.zero,
+  color: vars.colors.black,
+  fontWeight: vars.fontWeights.bold,
+})
+
+export const customPlaceholderLinkStyles = style({
+  padding: vars.space.zero,
+  color: vars.colors.blue,
+  fontWeight: vars.fontWeights.bold,
+  textDecoration: 'none',
+})
+
+export const toggleThemeStyles = style({
+  width: 'fit-content',
+  margin: `${vars.space.zero} ${vars.space.zero} ${vars.space.g10} auto`,
+})
+
+export const uploadAreaStyles = style({
+  width: '100%',
+  height: 200,
+})