Feat(front): define UI design tokens and utilities
Co-Authored-By: ArneBo <arne@ecobasa.org> Co-Authored-By: Flupsi <upsiflu@gmail.com> Co-Authored-By: jon r <jon@allmende.io>
This commit is contained in:
jon r
parent
22b4c5128b
commit
24fb0cf9ec
|
|
@ -0,0 +1,91 @@
|
|||
import type { Entries, Entry, KeysOfUnion } from 'type-fest'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
export type AlignmentProps = {
|
||||
alignText?: 'start' | 'center' | 'end' | 'stretch' | 'space-out',
|
||||
alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
|
||||
alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
|
||||
} & {
|
||||
[T in 'center' | 'stretch']?: true
|
||||
}
|
||||
export type Key = KeysOfUnion<AlignmentProps>
|
||||
|
||||
const styles = {
|
||||
center: 'place-content: center center; place-self: center center;',
|
||||
stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
|
||||
alignText: (a:AlignmentProps['alignText']) => ({
|
||||
start: 'justify-content: flex-start;',
|
||||
center: 'place-content: center;',
|
||||
baseline: 'align-items: baseline;',
|
||||
end: 'justify-content: flex-end;',
|
||||
stretch: 'place-content: stretch;',
|
||||
'space-out': 'place-content: space-between;'
|
||||
}[a!]),
|
||||
alignSelf: (a:AlignmentProps['alignSelf']) => ({
|
||||
start: 'align-self: flex-start;',
|
||||
center: 'align-self: center;',
|
||||
end: 'align-self: flex-end;',
|
||||
auto: 'align-self: auto;',
|
||||
baseline: 'align-self: baseline;',
|
||||
stretch: 'align-self: stretch;'
|
||||
}[a!]),
|
||||
alignItems: (a:AlignmentProps['alignSelf']) => ({
|
||||
start: 'align-items: flex-start;',
|
||||
center: 'align-items: center;',
|
||||
end: 'align-items: flex-end;',
|
||||
auto: 'align-items: auto;',
|
||||
baseline: 'align-items: baseline;',
|
||||
stretch: 'align-items: stretch;'
|
||||
}[a!])
|
||||
} as const
|
||||
|
||||
const getStyle = (props : Partial<AlignmentProps>) => ([key, value]: Entry<AlignmentProps>):string =>
|
||||
(
|
||||
typeof styles[key] === 'string'
|
||||
? styles[key]
|
||||
// @ts-expect-error We know that props[key] is a value accepted by styles[key]. The ts compiler is not so smart.
|
||||
: (styles[key]((key in props && props[key]) ? props[((props[key]), (key))] : value))
|
||||
)
|
||||
|
||||
const merge = (rules: string[]) => (attributes: HTMLAttributes = {}) =>
|
||||
rules.length === 0
|
||||
? attributes
|
||||
: ({
|
||||
...attributes,
|
||||
style: rules.join(' ') + ('style' in attributes ? attributes.style + ' ' : '')
|
||||
})
|
||||
|
||||
// All keys are exclusive
|
||||
const conflicts: Set<Key>[] = [
|
||||
new Set(['center', 'stretch']),
|
||||
new Set(['alignText']),
|
||||
new Set(['alignSelf'])
|
||||
]
|
||||
|
||||
/**
|
||||
* Add alignment styles to your component.
|
||||
* Alignments are designed to work both in a grid and flex contexts but may fail in normal context.
|
||||
*
|
||||
* (1) Add `& AlignmentProps` to your `Props` type
|
||||
* (2) Call `v-bind="alignment(props)"` on your component template
|
||||
* (3) Now your component accepts width props such as `align-text="center"`.
|
||||
*
|
||||
* @param props Your component's props (or ...rest props if you have destructured them already)
|
||||
* @param defaults These props are applied immediately and can be overridden by the user
|
||||
* @param attributes Optional: To compose width, color, alignment, etc.
|
||||
* @returns the corresponding `{ style }` object
|
||||
*/
|
||||
export const align = <TProps extends Partial<AlignmentProps>>(
|
||||
props: TProps,
|
||||
defaults: Partial<AlignmentProps> = {}
|
||||
) => merge(
|
||||
((Object.entries(props) as Entries<TProps>).reduce(
|
||||
(acc, [key, value]) =>
|
||||
value && key in styles
|
||||
? acc.filter(([accKey, _]) => !conflicts.find(set => set.has(accKey) && set.has(key)))
|
||||
.concat([[key, value]])
|
||||
: acc
|
||||
,
|
||||
(Object.entries(defaults)) as Entries<Partial<AlignmentProps>>
|
||||
)).map(getStyle(props))
|
||||
)
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import type { KeysOfUnion } from 'type-fest'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
export type DefaultProps =
|
||||
| { default?: true }
|
||||
export type Default = KeysOfUnion<DefaultProps>
|
||||
|
||||
export type ColorProps =
|
||||
| { primary?: true }
|
||||
| { secondary?: true }
|
||||
| { destructive?: true }
|
||||
export type Color = KeysOfUnion<ColorProps>
|
||||
|
||||
export type PastelProps =
|
||||
| { red?: true }
|
||||
| { blue?: true }
|
||||
| { purple?: true }
|
||||
| { green?: true }
|
||||
| { yellow?: true }
|
||||
export type Pastel = KeysOfUnion<PastelProps>
|
||||
|
||||
export type VariantProps =
|
||||
| { solid?: true }
|
||||
| { outline?: true }
|
||||
| { ghost?: true }
|
||||
export type Variant = KeysOfUnion<VariantProps>
|
||||
|
||||
export type InteractiveProps =
|
||||
| { interactive?: true }
|
||||
export type Interactive = KeysOfUnion<DefaultProps>
|
||||
|
||||
export type RaisedProps =
|
||||
| { raised?: true }
|
||||
export type Raised = KeysOfUnion<RaisedProps>
|
||||
|
||||
/* Props to Classes */
|
||||
|
||||
export type Props =
|
||||
(DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps
|
||||
|
||||
export type Key =
|
||||
KeysOfUnion<Props>
|
||||
|
||||
// You can only have one color
|
||||
const conflicts: Set<Key>[] = [
|
||||
new Set(['default', 'primary', 'secondary', 'destructive', 'red', 'blue', 'purple', 'green', 'yellow']),
|
||||
new Set(['solid', 'outline', 'ghost'])
|
||||
]
|
||||
|
||||
const classes = {
|
||||
default: 'default',
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
destructive: 'destructive',
|
||||
red: 'red',
|
||||
blue: 'blue',
|
||||
purple: 'purple',
|
||||
green: 'green',
|
||||
yellow: 'yellow',
|
||||
outline: 'outline',
|
||||
ghost: 'ghost',
|
||||
solid: 'solid',
|
||||
raised: 'raised',
|
||||
interactive: 'interactive'
|
||||
} satisfies Record<Key, string>
|
||||
|
||||
const getPrecedence = (searchKey:Key | string) =>
|
||||
Object.entries(classes).findIndex(([key, _]) => key === searchKey)
|
||||
|
||||
/**
|
||||
* @param props A superset of `{ Key? : true }`
|
||||
* @returns the number of actually applied classes (if there are no defaults)
|
||||
*/
|
||||
export const isNoColors = (props: Partial<Props>) =>
|
||||
!color(props)().class
|
||||
|
||||
const merge = (classes: string[]) => (attributes: HTMLAttributes = {}) =>
|
||||
classes.length === 0
|
||||
? attributes
|
||||
: ({
|
||||
...attributes,
|
||||
class: classes.join(' ') + ('class' in attributes ? attributes.class + ' ' : '')
|
||||
})
|
||||
|
||||
/**
|
||||
* Add color classes to your component.
|
||||
* Color classes are defined in `colors.scss`. Make sure to implement the correct style there!
|
||||
*
|
||||
* (1) Add a subset of `& (DefaultProps | ColorProps | PastelProps) & VariantProps & InteractiveProps & RaisedProps` to your `Props` type
|
||||
* (2) Call `v-bind="color(props)"` on your component template
|
||||
* (3) Now your component accepts color props such as `secondary outline raised`.
|
||||
*
|
||||
* Composable with `width`, `color`, `alignment`, etc.
|
||||
*
|
||||
* @param props Your component's props (or ...rest props if you have destructured them already)
|
||||
* @param defaults These props are applied immediately and can be overridden by the user
|
||||
* @returns a function from the resulting attributes the corresponding `class` object
|
||||
*/
|
||||
export const color = (props: Partial<Props>, defaults?: Key[]) =>
|
||||
merge(
|
||||
Object.entries(props)
|
||||
.sort(([a, _], [b, __]) => getPrecedence(a) - getPrecedence(b))
|
||||
.reduce(
|
||||
(acc, [key, value]) =>
|
||||
value && key in classes
|
||||
? acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))
|
||||
.concat([key as Key])
|
||||
: acc
|
||||
,
|
||||
defaults || []
|
||||
)
|
||||
)
|
||||
|
||||
type ColorSelector =
|
||||
`${Color | Pastel | Default}${'' | ` ${Variant}${'' | ' interactive'}${'' | ' raised'}`}`
|
||||
|
||||
// Convenience function for applying default colors. Prefer using `color`
|
||||
export const setColors = (color: ColorSelector) =>
|
||||
({ class: color })
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import type { Entries, KeysOfUnion } from 'type-fest'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
export type WidthProps =
|
||||
| { minContent?: true }
|
||||
| { iconWidth?: true }
|
||||
| { tiny?: true }
|
||||
| { buttonWidth?: true }
|
||||
| { small?: true }
|
||||
| { medium?: true }
|
||||
| { auto?: true }
|
||||
| { full?: true }
|
||||
| { grow?: true }
|
||||
| { width?: string }
|
||||
| { square?: true }
|
||||
| { squareSmall?: true }
|
||||
| { lowHeight?: true }
|
||||
| { normalHeight?: true }
|
||||
export type Key = KeysOfUnion<WidthProps>
|
||||
|
||||
const widths = {
|
||||
minContent: 'width: min-content; flex-grow: 0;',
|
||||
iconWidth: 'width: 40px;',
|
||||
tiny: 'width: 124px; --grid-column: span 2;',
|
||||
buttonWidth: 'width: 136px; --grid-column: span 2; flex-grow: 0; min-width: min-content;',
|
||||
small: 'width: 202px; --grid-column: span 3;',
|
||||
medium: 'width: 280px; --grid-column: span 4;',
|
||||
auto: 'width: auto;',
|
||||
full: 'width: auto; --grid-column: 1 / -1; place-self: stretch;',
|
||||
grow: 'flex-grow: 1;',
|
||||
width: (w: string) => `width: ${w}; flex-grow:0;`
|
||||
} as const
|
||||
|
||||
const sizes = {
|
||||
squareSmall: 'height: 40px; width: 40px; padding: 4px; justify-content: center;',
|
||||
square: 'height: 48px; width: 48px; justify-content: center;',
|
||||
lowHeight: 'height: 40px;',
|
||||
normalHeight: 'height: 48px;'
|
||||
} as const
|
||||
|
||||
const styles = {
|
||||
...widths, ...sizes
|
||||
} as const satisfies Record<Key, string | ((w: string) => string)>
|
||||
|
||||
// The `lint:tsc` script more errors here than the language server is happy.
|
||||
// TODO: Fix this Issue: https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/2437
|
||||
const getStyle = (props: Partial<WidthProps>) => (key: Key):string =>
|
||||
key in props
|
||||
? typeof styles[key] === 'function'
|
||||
// @ts-expect-error Typescript is hard. Make the typescript compiler understand `key in props`
|
||||
? styles[key](props[key])
|
||||
: styles[key] as string
|
||||
: ''
|
||||
|
||||
// All keys are exclusive
|
||||
const conflicts: Set<Key>[] = [
|
||||
new Set(Object.keys(widths) as Key[]),
|
||||
new Set(Object.keys(sizes) as Key[])
|
||||
]
|
||||
|
||||
const merge = (rules: string[]) => (attributes: HTMLAttributes = {}) =>
|
||||
rules.length === 0
|
||||
? attributes
|
||||
: ({
|
||||
...attributes,
|
||||
style: rules.join(' ') + ('style' in attributes ? ' ' + attributes.style : '')
|
||||
})
|
||||
|
||||
/**
|
||||
* Add a width style to your component.
|
||||
* Widths are designed to work both in a page-grid context and in a flex or normal context.
|
||||
*
|
||||
* (1) Add `& WidthProps` to your `Props` type
|
||||
* (2) Call `v-bind="width(props)"` on your component template
|
||||
* (3) Now your component accepts width props such as `small`, `medium`, `stretch`.
|
||||
*
|
||||
* @param props Your component's props (or ...rest props if you have destructured them already)
|
||||
* @param defaults These props are applied immediately and can be overridden by the user
|
||||
* @param attributes Optional: To compose width, color, alignment, etc.
|
||||
* @returns the corresponding `{ style }` object
|
||||
*/
|
||||
export const width = <TProps extends Partial<WidthProps>>(
|
||||
props: TProps,
|
||||
defaults: Key[] = []
|
||||
) => merge(
|
||||
(Object.entries(props) as Entries<TProps>).reduce(
|
||||
(acc, [key, value]) =>
|
||||
value && key in styles
|
||||
? acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key)))
|
||||
.concat([key])
|
||||
: acc
|
||||
,
|
||||
defaults
|
||||
).map(getStyle(props))
|
||||
)
|
||||
Loading…
Reference in New Issue