@charcoal-ui/styled 1.0.0-alpha.1

package/src/lib.ts

@@ -0,0 +1,178 @@
+import { Key } from './types'
+import { unreachable } from './util'
+
+/**
+ * 配列で指定したプロパティを動的に生やす
+ *
+ * @param source 拡張するオブジェクト
+ * @param member オブジェクトに生やすプロパティ一覧
+ * @param chain プロパティに格納される値を生成する関数
+ *
+ * @example
+ *
+ * const o = factory({}, ['red', 'blue'],
+ *   color => hex(color)
+ * )
+ *
+ * console.log(o.red) //=> #ff0000
+ */
+export const factory = <TSource, TMember extends readonly Key[], TValue>(
+  source: TSource,
+  member: TMember,
+  chain: (key: TMember[number]) => TValue
+) =>
+  Object.defineProperties(
+    source,
+    Object.fromEntries(
+      member.map((key) => [
+        key,
+        { get: () => chain(key), enumerable: true, configurable: true },
+      ])
+    )
+  ) as TSource & { readonly [key in TMember[number]]: TValue }
+
+/**
+ * 配列で指定した名前のメソッドを動的に生やす
+ *
+ * @param source 拡張するオブジェクト
+ * @param member オブジェクトに生やすメソッド名一覧
+ * @param chain メソッドの戻り値になる値を生成する関数
+ *
+ * @example
+ *
+ * const o = argumentedFactory({}, ['red', 'blue'],
+ *   (color, alpha: number) => hex(color, alpha)
+ * )
+ *
+ * console.log(o.red(0.5)) //=> #ff000077
+ */
+export const argumentedFactory = <
+  TSource,
+  TMember extends readonly string[],
+  TValue,
+  TArguments extends unknown[]
+>(
+  source: TSource,
+  member: TMember,
+  chain: (key: TMember[number], ...args: TArguments) => TValue
+) =>
+  Object.defineProperties(
+    source,
+    Object.fromEntries(
+      member.map((key) => [
+        key,
+        {
+          value: (...args: TArguments) => chain(key, ...args),
+          enumerable: true,
+          configurable: true,
+        },
+      ])
+    )
+  ) as TSource & {
+    readonly [key in TMember[number]]: (...args: TArguments) => TValue
+  }
+
+/**
+ * オブジェクトで指定したプロパティ名と値を動的に生やす
+ *
+ * @param source 拡張するオブジェクト
+ * @param def オブジェクトに生やす定義(プロパティ名と値)
+ *
+ * @example
+ *
+ * const o = constFactory({}, {
+ *   red: '#f00',
+ *   blue: '#00f',
+ * })
+ *
+ * console.log(o.red) //=> #f00
+ */
+export const constFactory = <TSource, TDef extends { [key: string]: unknown }>(
+  source: TSource,
+  def: TDef
+) =>
+  factory(source, Object.keys(def), (key) => def[key]) as TSource &
+    Readonly<TDef>
+
+/**
+ * 配列で指定したモディファイア(プロパティ)をチェーン可能な再帰オブジェクトを動的に生やす
+ *
+ * @param modifiers オブジェクトに生やすモディファイヤ一覧
+ * @param source 指定されたモディファイヤの一覧から値を生成する関数
+ *
+ * @example
+ *
+ * const o = modifiedArgumentedFactory(['red', 'blue'],
+ *   modifiers => modifiers.map(color => hex(color)).join(',')
+ * )
+ *
+ * console.log(o.red.blue) => #f00,#00f
+ */
+export const modifiedFactory = <TSource, T extends Key>(
+  modifiers: readonly T[],
+  source: (applied: readonly T[]) => TSource
+) =>
+  (function recursiveModifiedFactory(
+    applied: readonly T[]
+  ): Modified<TSource, T> {
+    const notApplied = modifiers.filter((v) => !applied.includes(v))
+    return factory(source(applied), notApplied, (modifier) =>
+      notApplied.length === 0
+        ? unreachable()
+        : recursiveModifiedFactory([...applied, modifier])
+    )
+  })([])
+
+export type Modified<TSource, TModifiers extends Key> = TSource & {
+  readonly [key in TModifiers]: Modified<TSource, Exclude<TModifiers, key>>
+}
+
+/**
+ * 配列で指定したモディファイア(メソッド)をチェーン可能な再帰オブジェクトを動的に生やす
+ *
+ * @param modifiers オブジェクトに生やすモディファイヤ一覧
+ * @param source 指定されたモディファイヤの一覧から値を生成する関数
+ * @param _inferPhantom 関数形式のモディファイヤの引数型を推論するためのメタタイプ(引数の個数に合わせてタプルで指定する)
+ *
+ * @example
+ *
+ * const o = modifiedArgumentedFactory(['red', 'blue'],
+ *   modifiers => modifiers.map(([color, alpha]) => hex(color, alpha)).join(',')
+ * , {} as [number])
+ *
+ * console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
+ */
+export const modifiedArgumentedFactory = <
+  TSource,
+  T extends string,
+  TArguments extends unknown[]
+>(
+  modifiers: readonly T[],
+  source: (applied: readonly [T, ...TArguments][]) => TSource,
+  ..._inferPhantom: TArguments
+) =>
+  (function recursiveModifiedFactory(
+    applied: readonly [T, ...TArguments][]
+  ): ModifiedArgumented<TSource, T, TArguments> {
+    const notApplied = modifiers.filter(
+      (v) => !applied.map(([w]) => w).includes(v)
+    )
+    return argumentedFactory(
+      source(applied),
+      notApplied,
+      (modifier, ...args: TArguments) =>
+        notApplied.length === 0
+          ? unreachable()
+          : recursiveModifiedFactory([...applied, [modifier, ...args]])
+    )
+  })([])
+
+export type ModifiedArgumented<
+  TSource,
+  TModifiers extends string,
+  TArguments extends unknown[]
+> = TSource & {
+  readonly [key in TModifiers]: (
+    ...args: TArguments
+  ) => ModifiedArgumented<TSource, Exclude<TModifiers, key>, TArguments>
+}

package/src/theme.ts

@@ -0,0 +1,107 @@
+import { StyledTheme } from './types'
+import {
+  BorderRadius,
+  Spacing,
+  Typography,
+  borderRadius,
+  spacing,
+  typography,
+  Breakpoint,
+  breakpoint,
+} from '@charcoal-ui/foundation'
+import { light as l, dark as d } from '@charcoal-ui/pixiv-theme'
+import { Effect, Material, OpacityEffect, Theme } from '@charcoal-ui/theme'
+import { applyEffect } from '@charcoal-ui/utils'
+
+export interface ElementsTheme extends StyledTheme {
+  color: Theme['color']
+  gradientColor: Theme['gradientColor']
+  effect: {
+    hover: Effect
+    press: Effect
+  }
+  elementEffect: {
+    disabled: OpacityEffect
+  }
+  spacing: Spacing
+  typography: {
+    size: Typography
+  }
+  borderRadius: BorderRadius
+  border: {
+    default: {
+      color: Material
+    }
+  }
+  outline: {
+    default: {
+      color: string
+      weight: 4
+    }
+    assertive: {
+      color: string
+      weight: 4
+    }
+  }
+  breakpoint: Breakpoint
+}
+
+const outlineEffect = {
+  type: 'opacity',
+  opacity: 0.32,
+} as const
+
+const common = {
+  borderRadius,
+  spacing,
+  typography: {
+    size: typography,
+  },
+  breakpoint,
+}
+
+export const light: ElementsTheme = {
+  color: l.color,
+  gradientColor: l.gradientColor,
+  effect: l.effect,
+  elementEffect: l.elementEffect,
+  border: {
+    default: {
+      color: l.color.border,
+    },
+  },
+  outline: {
+    default: {
+      color: applyEffect(l.color.brand, outlineEffect),
+      weight: 4,
+    },
+    assertive: {
+      color: applyEffect(l.color.assertive, outlineEffect),
+      weight: 4,
+    },
+  },
+  ...common,
+}
+
+export const dark: ElementsTheme = {
+  color: d.color,
+  gradientColor: d.gradientColor,
+  effect: d.effect,
+  elementEffect: d.elementEffect,
+  border: {
+    default: {
+      color: d.color.border,
+    },
+  },
+  outline: {
+    default: {
+      color: applyEffect(d.color.brand, outlineEffect),
+      weight: 4,
+    },
+    assertive: {
+      color: applyEffect(d.color.assertive, outlineEffect),
+      weight: 4,
+    },
+  },
+  ...common,
+}

package/src/types.ts

@@ -0,0 +1,43 @@
+import { TypographyDescriptor } from '@charcoal-ui/foundation'
+import {
+  Effect,
+  GradientMaterial,
+  Material,
+  OpacityEffect,
+} from '@charcoal-ui/theme'
+
+export type EffectType = 'hover' | 'press' | 'disabled'
+
+export type Key = string | number | symbol
+
+export type ColorStyleTheme = {
+  [key in Key]: Material
+}
+
+export interface StyledTheme {
+  color: ColorStyleTheme
+  gradientColor: { [key in Key]: GradientMaterial }
+  effect: { [key in EffectType]?: Effect }
+  elementEffect: { [key in EffectType]?: OpacityEffect }
+  spacing: { [key in Key]: number }
+  typography: {
+    size: { [key in Key]: TypographyDescriptor }
+    // TODO
+    // weight: { [key in Key]: string }
+    // variant: { [key in Key]: string }
+  }
+  borderRadius: { [key in Key]: number }
+  border: {
+    [key in Key]: {
+      color: Material
+      // TODO
+      // thickness: number
+    }
+  }
+  outline: {
+    [key in Key]: {
+      color: Material
+      weight: number
+    }
+  }
+}

package/src/util.ts

@@ -0,0 +1,78 @@
+/**
+ * Function used to assert a given code path is unreachable
+ */
+export function unreachable(): never
+/**
+ * Function used to assert a given code path is unreachable.
+ * Very useful for ensuring switches are exhaustive:
+ *
+ * ```ts
+ * switch (a.type) {
+ *   case Types.A:
+ *   case Types.B:
+ *     break
+ *   default:
+ *     unreachable(a) // will cause a build error if there was
+ *                    // a Types.C that was not checked
+ * }
+ * ```
+ *
+ * @param value Value to be asserted as unreachable
+ */
+// NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed
+// eslint-disable-next-line @typescript-eslint/unified-signatures
+export function unreachable(value: never): never
+export function unreachable(value?: never): never {
+  throw new Error(
+    arguments.length === 0
+      ? 'unreachable'
+      : `unreachable (${JSON.stringify(value)})`
+  )
+}
+
+/**
+ * Check whether a value is non-null and non-undefined
+ *
+ * @param value nullable
+ */
+export const isPresent = <T>(value: T): value is NonNullable<T> => value != null
+
+type Head<U> = U extends [infer T, ...any[]] ? T : never
+
+type Tail<U> = U extends [any, any, ...any[]]
+  ? ((...args: U) => any) extends (head: any, ...args: infer T) => any
+    ? T
+    : never
+  : never
+// Buggy at ts@4.0.0-dev20200506
+// type Tail<U> = U extends [any, ...infer T] ? T : never
+
+type RecursiveObjectAssign<T, S extends any[]> = {
+  0: T & Head<S>
+  1: RecursiveObjectAssign<T & Head<S>, Tail<S>>
+}[Tail<S> extends never ? 0 : 1]
+
+type ObjectAssign<T extends any[]> = RecursiveObjectAssign<
+  Record<string, unknown>,
+  T
+>
+
+export function objectAssign<T extends any[]>(...sources: T) {
+  return Object.assign({}, ...sources) as ObjectAssign<T>
+}
+
+export function objectKeys<V, K extends keyof V>(obj: V) {
+  return Object.keys(obj) as K[]
+}
+
+export interface ReadonlyArrayConstructor {
+  isArray(value: any): value is readonly any[]
+}
+
+export function extractNonNullKeys<V, K extends keyof V>(obj: {
+  [key in K]: V[key]
+}) {
+  return Object.entries(obj)
+    .filter(([_, v]) => v !== null)
+    .map(([k]) => k) as { [key in K]: V[key] extends null ? never : key }[K][]
+}