@makeswift/runtime 0.0.0-a500663 → 0.0.0-a8dd080

package/src/components/Root/Root.tsx

@@ -1,72 +0,0 @@
-import styled, { createGlobalStyle } from 'styled-components'
-import { normalize } from 'polished'
-import { forwardRef, Ref } from 'react'
-
-import Placeholder from './components/Placeholder'
-import {
-  GridValue,
-  BackgroundsValue,
-  GapXValue,
-  GapYValue,
-} from '../../prop-controllers/descriptors'
-import { Element } from '../../react'
-import { cssGridItem } from '../utils/cssMediaRules'
-
-const Normalize = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-  }
-
-  *, *::before, *::after {
-    box-sizing: inherit;
-  }
-
-  ${normalize()}
-`
-
-const Grid = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-`
-
-const GridItem = styled.div`
-  display: flex;
-  align-items: flex-start;
-  ${cssGridItem()}
-`
-
-type Props = {
-  children?: GridValue
-  backgrounds?: BackgroundsValue
-  rowGap?: GapYValue
-  columnGap?: GapXValue
-}
-
-export default forwardRef(function Page(
-  { children, rowGap, columnGap }: Props,
-  ref: Ref<HTMLDivElement>,
-) {
-  return (
-    <>
-      <Normalize />
-      <Grid ref={ref}>
-        {children && children.elements.length > 0 ? (
-          children.elements.map((child, index) => (
-            <GridItem
-              key={child.key}
-              grid={children.columns}
-              index={index}
-              columnGap={columnGap}
-              rowGap={rowGap}
-            >
-              <Element element={child} />
-            </GridItem>
-          ))
-        ) : (
-          <Placeholder />
-        )}
-      </Grid>
-    </>
-  )
-})

package/src/components/Root/components/Placeholder/index.tsx

@@ -1,37 +0,0 @@
-import { forwardRef } from 'react'
-import styled from 'styled-components'
-
-const PlaceholderBase = styled.div`
-  width: 100%;
-  background: rgba(161, 168, 194, 0.18);
-  height: 80px;
-  padding: 8px;
-`
-
-type Props = Record<string, never>
-
-export default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {
-  return (
-    <PlaceholderBase {...props} ref={ref}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="100%"
-        height="100%"
-        style={{ overflow: 'visible' }}
-      >
-        <rect
-          x={0}
-          y={0}
-          width="100%"
-          height="100%"
-          strokeWidth={2}
-          strokeDasharray="4 2"
-          fill="none"
-          stroke="rgba(161, 168, 194, 0.40)"
-          rx="4"
-          ry="4"
-        />
-      </svg>
-    </PlaceholderBase>
-  )
-})

package/src/components/Root/index.tsx

@@ -1 +0,0 @@
-export { default } from './Root'

package/src/components/index.ts

@@ -1 +0,0 @@
-export { default as Root } from './Root'

package/src/components/utils/columns.ts

@@ -1,15 +0,0 @@
-export const getIndexes = (spans: Array<Array<number>>, index: number): [number, number] => {
-  const flattened = spans.reduce((a, s) => a.concat(s), [])
-
-  if (index < 0 || index > flattened.length) throw new RangeError()
-
-  let remainder = index
-  let rowIndex = 0
-
-  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
-    remainder -= spans[rowIndex].length
-    rowIndex += 1
-  }
-
-  return [rowIndex, remainder]
-}

package/src/components/utils/cssMediaRules.ts

@@ -1,91 +0,0 @@
-import { css, CSSObject } from 'styled-components'
-
-import {
-  ResponsiveValue,
-  ResponsiveValueType as ExtractResponsiveValue,
-  Length as LengthValue,
-} from '../../prop-controllers'
-import {
-  FallbackStrategy,
-  getDevice,
-  getDeviceMediaQuery,
-  join as joinResponsiveValues,
-} from './devices'
-import { getIndexes } from './columns'
-
-type CSSRules = ReturnType<typeof css>
-
-export function cssMediaRules<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, P>(
-  responsiveValues: A | ((props: P) => A),
-  join: (
-    values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined },
-  ) => CSSRules | CSSObject,
-  strategy?: FallbackStrategy<V>,
-): (props: P) => CSSRules {
-  return props =>
-    joinResponsiveValues(
-      typeof responsiveValues === 'function' ? responsiveValues(props) : responsiveValues,
-      join,
-      strategy,
-    ).reduce((acc, { deviceId, value }) => {
-      const device = getDevice(deviceId)
-      const mediaQuery = getDeviceMediaQuery(device)
-
-      return css`
-        ${acc}${mediaQuery} {
-          ${value}
-        }
-      `
-    }, css`` as CSSRules)
-}
-
-const floor = (d: number) => (v: number): number => Math.floor(10 ** d * v) / 10 ** d
-
-export function cssGridItem(): (props: {
-  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>
-  index: number
-  columnGap?: ResponsiveValue<LengthValue>
-  rowGap?: ResponsiveValue<LengthValue>
-}) => CSSRules {
-  return props => css`
-    display: flex;
-
-    /* TODO: A default span of 12 won't work once the column count is modifiable. */
-    ${cssMediaRules(
-      [props.grid, props.columnGap, props.rowGap] as const,
-      ([
-        { spans, count } = { spans: [[12]], count: 12 },
-        columnGap = { value: 0, unit: 'px' },
-        rowGap = { value: 0, unit: 'px' },
-      ]) => {
-        const [rowIndex, columnIndex] = getIndexes(spans, props.index)
-        const firstCol = columnIndex === 0
-        const lastCol = columnIndex === spans[rowIndex].length - 1
-        const span = spans[rowIndex][columnIndex]
-        const fraction = floor(5)(span / count)
-        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`
-        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${
-          columnGap.unit
-        } / 2`
-        const iePrecisionError = '0.01px'
-        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`
-        const firstRow = rowIndex === 0
-        const lastRow = rowIndex === spans.length - 1
-
-        return span === 0
-          ? { display: 'none' }
-          : {
-              flexBasis,
-              minWidth: flexBasis,
-              // NOTE: IE11 width breaks without max width
-              // https://github.com/philipwalton/flexbugs/issues/3
-              maxWidth: flexBasis,
-              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
-              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
-            }
-      },
-    )}
-  `
-}

package/src/components/utils/devices.ts

@@ -1,86 +0,0 @@
-import type { Device as DeviceID, DeviceOverride, ResponsiveValue } from '../../prop-controllers'
-
-export type Device = {
-  id: DeviceID
-  minWidth?: number
-  maxWidth?: number
-}
-
-export const DEVICES: Array<Device> = [
-  { id: 'desktop', minWidth: 769 },
-  { id: 'tablet', minWidth: 476, maxWidth: 768 },
-  { id: 'mobile', maxWidth: 475 },
-]
-
-export const getDevice = (deviceId: DeviceID): Device => {
-  const device = DEVICES.find(({ id }) => id === deviceId)
-
-  if (device == null) throw new Error(`Unrecognized device ID: "${deviceId}".`)
-
-  return device
-}
-
-export type FallbackStrategy<V> = (
-  arg0: DeviceOverride<V> | undefined,
-  arg1: ResponsiveValue<V>,
-) => DeviceOverride<V> | undefined
-
-function defaultStrategy<V>(
-  value: DeviceOverride<V> | undefined,
-  fallbacks: ResponsiveValue<V>,
-): DeviceOverride<V> | undefined {
-  return value || fallbacks[0]
-}
-
-export function findDeviceOverride<S>(
-  values: ResponsiveValue<S> = [],
-  deviceId: string,
-  strategy: FallbackStrategy<S> = defaultStrategy,
-): DeviceOverride<S> | undefined {
-  const value = values.find(({ deviceId: d }) => d === deviceId)
-  const fallbacks = DEVICES.slice(0, DEVICES.findIndex(d => d.id === deviceId) + 1)
-    .reverse()
-    .map(d => values.find(v => v.deviceId === d.id))
-    .filter((override): override is DeviceOverride<S> => Boolean(override))
-
-  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : undefined
-}
-
-export type ExtractResponsiveValue<T> = T extends ResponsiveValue<infer V> ? V : never
-
-export function join<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, R>(
-  responsiveValues: A,
-  joinFn: (values: { [I in keyof A]: ExtractResponsiveValue<A[I]> | undefined }) => R,
-  strategy?: FallbackStrategy<V>,
-): ResponsiveValue<R> {
-  return DEVICES.map(({ id }) => id)
-    .map(deviceId => {
-      const value = joinFn(
-        (responsiveValues.map(responsiveValue => {
-          const deviceValue =
-            responsiveValue && findDeviceOverride(responsiveValue, deviceId, strategy)
-
-          return deviceValue == null ? undefined : deviceValue.value
-        }) as unknown) as { [I in keyof A]: ExtractResponsiveValue<A[I] | undefined> },
-      )
-
-      if (value == null) return null
-
-      return { deviceId, value }
-    })
-    .filter((override): override is DeviceOverride<R> => Boolean(override))
-}
-
-export const getDeviceMediaQuery = (device: Device): string => {
-  const parts = ['@media only screen']
-
-  if (device.minWidth != null) {
-    parts.push(`(min-width: ${device.minWidth}px)`)
-  }
-
-  if (device.maxWidth != null) {
-    parts.push(`(max-width: ${device.maxWidth}px)`)
-  }
-
-  return parts.join(' and ')
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export type { Action } from './state/actions'
-export { ActionTypes, changeDocument, changeDocumentElementScrollTop } from './state/actions'
-export type { Operation } from './state/modules/read-write-documents'
-export type { ComponentMeta } from './state/modules/components-meta'
-export type {
-  PropControllerDescriptor,
-  PropControllerDescriptorValueType,
-} from './prop-controllers'