@codeleap/styles 4.0.1

package/src/lib/validateTheme.ts

@@ -0,0 +1,22 @@
+import { Theme } from '../types/theme'
+
+export function validateTheme<T extends Theme>(theme: T) {
+  const colors = theme.colors
+  const requiredColors = Object.keys(colors)
+
+  const alternateColors = theme.alternateColors
+  
+  if (alternateColors) {
+    for (const [colorSchemeName, colorSchemeColors] of Object.entries(alternateColors)) {
+      const colorSchemeColorNames = Object.keys(colorSchemeColors)
+
+      for (const requiredColor of requiredColors) {
+        if (!colorSchemeColorNames.includes(requiredColor)) {
+          throw new Error(`Alternate color scheme ${colorSchemeName} is missing color ${requiredColor}`)
+        }
+      }
+    }
+  }
+
+  return theme
+}

package/src/types/cache.ts

@@ -0,0 +1,2 @@
+
+export type CacheType = 'variants' | 'common' | 'styles' | 'compositions' | 'responsive' | 'components'

package/src/types/component.ts

@@ -0,0 +1,40 @@
+import { AnyRecord, IJSX } from './core'
+import { StyleProp, VariantStyleSheet } from './style'
+
+export type PropsWithVariants<Props extends AnyRecord, VariantStyles extends AnyRecord> = Omit<Props, 'style'> & {
+  style?: StyleProp<
+    Extract<keyof Props, 'style'> extends never ? VariantStyles[keyof VariantStyles] : (
+      Props['style'] extends StyleProp<infer C> ? C : VariantStyles[keyof VariantStyles]
+    ),
+    keyof VariantStyles
+  >
+}
+
+export type AnyFunction = (...args: any[]) => any
+
+export type StyledComponentProps<Props extends AnyRecord, VariantStyles> = PropsWithVariants<Props, VariantStyles>
+
+export type StyledComponent<VariantStyles, Props extends AnyRecord = AnyRecord> = (
+  (props: StyledComponentProps<Props, VariantStyles>) => IJSX
+) & {
+  styleRegistryName?: string
+  elements?: string[]
+  rootElement?: string
+}
+
+export type GenericStyledComponentAttributes<Props> = {
+  styleRegistryName?: string
+  withVariantTypes?: <VariantStyles extends VariantStyleSheet>(variants: VariantStyles) => StyledComponent<VariantStyles, Props>
+  elements?: string[]
+  rootElement?: string
+}
+
+export type GenericStyledComponent<
+  Props extends AnyRecord
+> = ((props: Props) => IJSX) & GenericStyledComponentAttributes<Props>
+
+export type AnyStyledComponent = GenericStyledComponent<any>
+
+export type ComponentWithDefaultProps<P> = ((props: P) => JSX.Element) & { defaultProps?: Partial<P> }
+
+export type StyledComponentWithProps<Props> = ComponentWithDefaultProps<Props> & GenericStyledComponentAttributes<Props>

package/src/types/core.ts

@@ -0,0 +1,40 @@
+
+/* eslint-disable @typescript-eslint/no-empty-interface */
+export interface ICSS {
+
+}
+
+export interface ITheme {
+
+}
+
+export interface IJSX {
+
+}
+export interface IBreakpoints {
+
+}
+
+export interface IColors {
+  
+}
+
+export interface IBorderRadius {
+  
+}
+
+export interface IAppVariants {
+  
+}
+
+export interface IEffect {
+  
+}
+
+export interface IEffects {
+  
+}
+
+export type AnyRecord = Record<string, any>
+
+export type Breakpoint = keyof IBreakpoints

package/src/types/icon.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+
+export interface AppIcons {
+
+}
+export type AppIcon = keyof AppIcons
+
+export type IconProp = AppIcon | `url:${string}`

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './core'
+export * from './style'
+export * from './theme'
+export * from './icon'
+export * from './component'

package/src/types/spacing.ts

@@ -0,0 +1,35 @@
+export const spacingVariants = [
+  'Vertical',
+  'Horizontal',
+  'Bottom',
+  'Top',
+  'Left',
+  'Right',
+  '',
+] as const
+
+export const spacingShortVariants = [
+  'y',
+  'x',
+  'b',
+  't',
+  'l',
+  'r',
+  '',
+] as const
+
+export type SpacingVariants = typeof spacingVariants[number]
+
+export type SpacingShortVariants = typeof spacingShortVariants[number]
+
+export type Multiplier =
+  | 'auto'
+  | number
+  | ''
+
+export type Spacing =
+  | `padding${SpacingVariants}:${Multiplier}`
+  | `margin${SpacingVariants}:${Multiplier}`
+  | `p${SpacingShortVariants}:${Multiplier}`
+  | `m${SpacingShortVariants}:${Multiplier}`
+  | `gap:${Multiplier}`

package/src/types/style.ts

@@ -0,0 +1,41 @@
+import { DynamicVariants } from '../lib/dynamicVariants'
+import { Queries } from '../lib/mediaQuery'
+import { DefaultVariants } from '../lib/defaultVariants'
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core'
+import { Multiplier, Spacing } from './spacing'
+
+type Inset =
+  | `top:${Multiplier}`
+  | `bottom:${Multiplier}`
+  | `left:${Multiplier}`
+  | `right:${Multiplier}`
+
+export type CommonVariants =
+  Spacing |
+  Inset |
+  DynamicVariants |
+  keyof DefaultVariants |
+  keyof IAppVariants |
+  `effect:${keyof IEffects}`
+
+type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = string, HasComposition = string> =
+  ICSS |
+  Variants |
+  CommonVariants |
+  boolean |
+  null |
+  '' |
+  // (HasBreakpoints extends string ? `${keyof IBreakpoints}:${CommonVariants}` : null) |
+  (HasBreakpoints extends string ? {
+    'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>
+  } : null) |
+  (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null)
+
+export type StyleProp<
+  Composition = AnyRecord,
+  Variants = string
+> = StyleAtom<Composition, Variants> | StyleAtom<Composition, Variants>[]
+
+export type VariantStyleSheet = Record<string, any>
+
+export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>

package/src/types/theme.ts

@@ -0,0 +1,77 @@
+import { BorderCreator } from '../lib/borderCreator'
+import { MediaQueries } from '../lib/mediaQuery'
+import type { DefaultVariants } from '../lib/defaultVariants'
+import { MultiplierFunction, Spacings } from '../lib/spacing'
+import { ICSS, IEffect } from './core'
+
+type AnyMap = {
+  [key: string]: any
+}
+
+type ColorMap = {
+  [key: string]: string
+}
+
+type BreakpointMap = {
+  [key: string]: number
+}
+
+type EffectsMap = {
+  [key: string]: IEffect
+}
+
+export type SpacingMap = 
+  Spacings<'margin'> & 
+  Spacings<'padding'> &
+  Spacings<'m', string> &
+  Spacings<'p', string> &
+  {
+    gap: MultiplierFunction
+  }
+
+export type InsetMap = 
+  {
+    bottom: MultiplierFunction
+    top: MultiplierFunction
+    left: MultiplierFunction
+    right: MultiplierFunction
+  }
+
+export type Theme = {
+  colors: ColorMap
+  alternateColors?: {
+    [key: string]: ColorMap
+  }
+  breakpoints?: BreakpointMap
+  baseSpacing?: number
+  presets?: AnyMap
+  borderRadius?: AnyMap
+  effects?: EffectsMap
+  typography: AnyMap
+  icons: AnyMap
+  values?: AnyMap
+}
+
+export type DefaultColorSchemeName = 'default'
+
+export type ColorScheme<T extends Theme = Theme> = DefaultColorSchemeName | keyof T['alternateColors']
+
+export type AppTheme<T extends Theme> = {
+  colors: T['colors']
+  breakpoints: T['breakpoints']
+  setColorScheme: (colorScheme: ColorScheme<T>) => void
+  currentColorScheme: ColorScheme<T>
+  spacing: SpacingMap
+  presets: DefaultVariants & T['presets']
+  borderRadius: T['borderRadius']
+  media: MediaQueries
+  effects: T['effects']
+  border: BorderCreator
+  typography: T['typography']
+  icons: T['icons']
+  values: T['values']
+  inset: InsetMap
+  baseSpacing: number
+  value: (multiplier: number) => number
+  sized: (size: number | string) => ICSS
+}