[Theme] Provide a function to create the breakpoints property via DI

Bug report

Right now, to use custom breakpoints, you can just pass extendTheme({ breakpoints: myBreakpointArray }) matching the spec.

However, if you manually pass, you’d be missing the properties defined on the default theme array.

We could provide a function or merge functionality for that into extendTheme, something like:

interface BreakpointConfig {
  [key: string]: string;
  sm: string;
  md: string;
  lg: string;
  xl: string;
}

const createBreakpoints = (config: BreakpointConfig) => {
 const breakpoints = Object.values(config);

 Object.entries(config).forEach(([key, value]) => {
  Object.defineProperty(breakpoints, key, { value });
 });

  return breakpoints;
}

[ljosberinn]

A more complex, yet definitely more precise implementation would be based on this, credits to @0kku, but it requires TS 4.1, so we have to wait for next month for that.

type UnknownArray = ReadonlyArray<unknown>;

type Consumer<T> = (_: T) => void;

type UnionToOverloadedConsumer<Union> = UnionToIntersection<
  Union extends unknown
  ? Consumer<Union>
  : never
>;

type UnionLast<Union> = (
  UnionToOverloadedConsumer<Union> extends Consumer<infer Last>
  ? Last
  : never
);

type UnionExcludingLast<Union> = Exclude<
  Union,
  UnionLast<Union>
>;

type UnionToIntersection<Union> = (
  (Union extends unknown ? Consumer<Union> : never) extends Consumer<infer Intersection>
  ? Intersection
  : never
);

type TuplePrepend<
  Tuple extends UnknownArray,
  InsertedElement,
> = [InsertedElement, ...Tuple];

type UnionToTuple<
  Union,
  CurrentTuple extends UnknownArray = [],
> = (
  [Union] extends [never]
  ? CurrentTuple
  : UnionToTuple<
    UnionExcludingLast<Union>,
    TuplePrepend<
      CurrentTuple,
      UnionLast<Union>
    >
  >
);

interface BaseBreakpointConfig extends Record<string, string>{
  sm: string;
  md: string;
  lg: string;
  xl: string;
}

function createBreakpoints<T extends BaseBreakpointConfig>(config: T): Breakpoints<T> {
  return Object.assign(Object.values(config), config) as Breakpoints<T>;
}

type Breakpoints<T = BaseBreakpointConfig> = UnionToTuple<keyof T> & T;

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "56em",
  lg: "91em",
  xl: "120",
} as const);

const a = breakpoints[0];
const b = breakpoints[1];
const c = breakpoints[2];
const d = breakpoints[3];
const e = breakpoints.sm;
const f = breakpoints.md;
const g = breakpoints.lg;
const h = breakpoints.xl;

It would support those goodies:

[ljosberinn]

possibly, that would lock in to forcing those object keys though; I’m not sure what’s planned in regards of allowing more/less/entirely custom breakpoint names