@forge/react 1.1.0-next.0 → 1.1.0

package/build/bundle-types.sh

@@ -1,21 +0,0 @@
-#! /bin/bash
-set -exu
-VERSION=27.1.0
-
-clean () { rm -rf ./tmp; }
-
-cd $(dirname $0)
-rm -rf ./tmp
-rm -rf ../src/types
-
-mkdir ./tmp
-trap clean EXIT
-
-mkdir ../src/types
-
-# Pulls @atlassian/forge-ui-types and copies public types
-(cd ./tmp
-npm pack "@atlassian/forge-ui-types@$VERSION"
-tar -xvf *.tgz
-cp -R "./package/src/public/." "../../src/types/."
-)

package/src/__test__/styles.test.tsx

@@ -1,112 +0,0 @@
-import {
-  active,
-  focus,
-  gradientStep,
-  hover,
-  linearGradient,
-  radialGradient,
-  rgba,
-  rotate,
-  scale,
-  skew,
-  StyleSheet,
-  translate,
-  url
-} from '../styles';
-
-describe('StyleSheet', () => {
-  it('should create valid basic styles object', () => {
-    expect(
-      StyleSheet.create({
-        container: {
-          backgroundColor: '#fff',
-          backgroundImage: [
-            url('/image.png'),
-            linearGradient('90deg', gradientStep('10%', 'red'), gradientStep('30%', 'blue'))
-          ],
-          backgroundSize: ['cover', ['50%', '50%']]
-        }
-      })
-    ).toEqual({
-      container: {
-        backgroundColor: '#fff',
-        backgroundImage: [
-          { method: 'url', value: { path: '/image.png' } },
-          {
-            method: 'gradient',
-            value: {
-              colors: [
-                { percent: '10%', value: 'red' },
-                { percent: '30%', value: 'blue' }
-              ],
-              degrees: '90deg',
-              type: 'linear'
-            }
-          }
-        ],
-        backgroundSize: ['cover', ['50%', '50%']]
-      }
-    });
-  });
-
-  it('should create valid composed styles object', () => {
-    expect(
-      StyleSheet.create({
-        container: (compose) =>
-          compose(
-            {
-              backgroundColor: 'red',
-              backgroundImage: url('https://example.test/image.png'),
-              backgroundPosition: ['50px', '50px', '50px', '50px'],
-              transform: [
-                translate('10px', '10px', '10px'),
-                scale('2', '2', '2'),
-                rotate('45deg', '45deg', '45deg'),
-                skew('45deg', '45deg')
-              ]
-            },
-            active({
-              backgroundColor: rgba(0, 0, 255, 1),
-              backgroundImage: radialGradient(gradientStep('10%', 'red'), gradientStep('30%', 'blue')),
-              backgroundPosition: ['50px', '50px']
-            }),
-            hover({
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat'
-            }),
-            focus({
-              backgroundRepeat: ['repeat', 'repeat']
-            })
-          )
-      })
-    ).toEqual({
-      container: {
-        __active: {
-          backgroundColor: { method: 'rgba', value: { a: 1, b: 255, g: 0, r: 0 } },
-          backgroundImage: {
-            method: 'gradient',
-            value: {
-              colors: [
-                { percent: '10%', value: 'red' },
-                { percent: '30%', value: 'blue' }
-              ],
-              type: 'radial'
-            }
-          },
-          backgroundPosition: ['50px', '50px']
-        },
-        __focus: { backgroundRepeat: ['repeat', 'repeat'] },
-        __hover: { backgroundPosition: 'center', backgroundRepeat: 'no-repeat' },
-        backgroundColor: 'red',
-        backgroundImage: { method: 'url', value: { path: 'https://example.test/image.png' } },
-        backgroundPosition: ['50px', '50px', '50px', '50px'],
-        transform: [
-          { method: 'translate', value: { x: '10px', y: '10px', z: '10px' } },
-          { method: 'scale', value: { x: '2', y: '2', z: '2' } },
-          { method: 'rotate', value: { x: '45deg', y: '45deg', z: '45deg' } },
-          { method: 'skew', value: { x: '45deg', y: '45deg' } }
-        ]
-      }
-    });
-  });
-});

package/src/globals.d.ts

@@ -1,12 +0,0 @@
-interface GlobalBridge {
-  callBridge(action: 'reconcile', payload: any): Promise<any>;
-  __SEMVER: string;
-}
-
-declare module '@forge/react' {
-  global {
-    interface Window {
-      __bridge: GlobalBridge;
-    }
-  }
-}

package/src/reconciler.ts

@@ -1,219 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import Reconciler, { HostConfig } from 'react-reconciler';
-import { DefaultEventPriority } from 'react-reconciler/constants';
-import { v4 as uuid } from 'uuid';
-
-type ElementType = string;
-type ElementProps = { [key: string]: any };
-
-interface ForgeDoc {
-  type: string;
-  props: { [key: string]: any };
-  children: ForgeDoc[];
-  key: string;
-}
-
-// @ts-ignore
-const callBridge = self.__bridge.callBridge;
-
-const createElement = (type: ElementType, props: ElementProps = {}): ForgeDoc => {
-  const { children, ...restProps } = props;
-  return {
-    type,
-    children: [],
-    props: restProps,
-    key: uuid()
-  };
-};
-
-const appendChild = (parent: ForgeDoc, child: ForgeDoc) => {
-  if (parent.children.includes(child)) {
-    const removeIndex = parent.children.indexOf(child);
-    parent.children.splice(removeIndex, 1);
-  }
-  parent.children.push(child);
-};
-
-const insertBefore = (parent: ForgeDoc, child: ForgeDoc, beforeChild: ForgeDoc) => {
-  const insertIndex = parent.children.indexOf(beforeChild);
-  if (parent.children.includes(child)) {
-    const removeIndex = parent.children.indexOf(child);
-    parent.children.splice(removeIndex, 1);
-  }
-  parent.children.splice(insertIndex, 0, child);
-};
-
-const hostConfig: HostConfig<
-  string, // Type
-  Record<string, any>, // Props
-  ForgeDoc, // Container
-  ForgeDoc, // Instance
-  ForgeDoc, // TextInstance
-  ForgeDoc, // SuspenseInstance
-  ForgeDoc, // HydratableInstance
-  ForgeDoc, // PublicInstance
-  any, // HostContext
-  any, // UpdatePayload,
-  any, // _ChildSet
-  any, // TimeoutHandle
-  any // NoTimeout
-> = {
-  supportsMutation: true,
-  supportsPersistence: false,
-  noTimeout: -1,
-  isPrimaryRenderer: false,
-  supportsHydration: false,
-
-  resetAfterCommit(forgeDoc: ForgeDoc): void {
-    callBridge('reconcile', { forgeDoc });
-  },
-
-  createInstance(type: ElementType, props: ElementProps) {
-    const element = createElement(type, props);
-    return element;
-  },
-
-  createTextInstance(text: string): ForgeDoc {
-    return {
-      type: 'String',
-      children: [],
-      props: {
-        text
-      },
-      key: uuid()
-    };
-  },
-
-  appendInitialChild(parent: ForgeDoc, child: ForgeDoc): void {
-    appendChild(parent, child);
-  },
-
-  appendChild(parent: ForgeDoc, child: ForgeDoc): void {
-    appendChild(parent, child);
-  },
-
-  appendChildToContainer(container: ForgeDoc, child: ForgeDoc): void {
-    appendChild(container, child);
-  },
-
-  finalizeInitialChildren(): boolean {
-    return false;
-  },
-
-  prepareUpdate(instance: ForgeDoc, type: ElementType, oldProps: ElementProps, newProps: ElementProps): ElementProps {
-    instance.props = newProps;
-    return newProps;
-  },
-
-  shouldSetTextContent(): boolean {
-    return false;
-  },
-
-  getRootHostContext() {
-    return {};
-  },
-
-  getChildHostContext(parentContext, fiberType): null {
-    return null;
-  },
-
-  getPublicInstance(instance: ForgeDoc): ForgeDoc {
-    return instance;
-  },
-
-  prepareForCommit(): null {
-    return null;
-  },
-
-  preparePortalMount(): void {},
-
-  scheduleTimeout(fn: () => void, delay: number): any {
-    return setTimeout(fn, delay);
-  },
-
-  cancelTimeout(id): void {
-    clearTimeout(id);
-  },
-
-  insertBefore(parent: ForgeDoc, child: ForgeDoc, beforeChild: ForgeDoc): void {
-    insertBefore(parent, child, beforeChild);
-  },
-
-  insertInContainerBefore(container: ForgeDoc, child: ForgeDoc, beforeChild: ForgeDoc): void {
-    insertBefore(container, child, beforeChild);
-  },
-
-  removeChild(parent: ForgeDoc, child: ForgeDoc): void {
-    const removeIndex = parent.children.indexOf(child);
-    parent.children.splice(removeIndex, 1);
-  },
-
-  removeChildFromContainer(container: ForgeDoc, child: ForgeDoc): void {
-    const removeIndex = container.children.indexOf(child);
-    container.children.splice(removeIndex, 1);
-  },
-
-  resetTextContent(): void {},
-
-  commitTextUpdate(textInstance: ForgeDoc, oldText: string, newText: string): void {
-    textInstance.props.text = newText;
-  },
-
-  commitMount(): void {},
-
-  commitUpdate(): void {},
-
-  hideInstance(): void {},
-
-  hideTextInstance(): void {},
-
-  unhideInstance(): void {},
-
-  unhideTextInstance(): void {},
-
-  clearContainer(): void {},
-
-  detachDeletedInstance(instance: ForgeDoc): void {},
-
-  getCurrentEventPriority() {
-    return DefaultEventPriority;
-  },
-
-  getInstanceFromNode(): null {
-    return null;
-  },
-
-  beforeActiveInstanceBlur(): void {},
-
-  afterActiveInstanceBlur(): void {},
-
-  prepareScopeUpdate(): void {},
-
-  getInstanceFromScope(): null {
-    return null;
-  }
-};
-
-const reconciler = Reconciler(hostConfig);
-
-export const ForgeReconciler = {
-  render: (element: any): void => {
-    const rootElement = createElement('Root');
-    const container = reconciler.createContainer(
-      rootElement,
-      0,
-      null,
-      false,
-      null,
-      'root',
-      (err: any) => {
-        // eslint-disable-next-line no-console
-        console.log(err);
-      },
-      null
-    );
-    reconciler.updateContainer(element, container, null, null);
-  }
-};
-
-export default ForgeReconciler;

package/src/styles/index.ts

@@ -1,174 +0,0 @@
-import {
-  AllowedPrimitives,
-  Definitions,
-  GradientValue,
-  RGBAColorValue,
-  ShadowValue,
-  TransformValue,
-  ColorType,
-  URLValue
-} from '../types';
-
-export interface PreDefinitions {
-  [key: string]: AllowedPrimitives | ComposeProvider;
-}
-
-export type Compose = (...primitiveObjects: AllowedPrimitives[]) => AllowedPrimitives;
-export type ComposeProvider = (compose: Compose) => AllowedPrimitives;
-
-export const StyleSheet = {
-  create(definitions: PreDefinitions): Definitions {
-    const stylesheet: Definitions = {};
-
-    for (const key in definitions) {
-      const definition = definitions[key];
-      if (typeof definition === 'function') {
-        const compose = (...primitivesDefinitions: AllowedPrimitives[]): AllowedPrimitives => {
-          return primitivesDefinitions.reduce((acc, primitives) => {
-            return { ...acc, ...primitives };
-          }, {});
-        };
-        stylesheet[key] = definition(compose);
-      } else {
-        stylesheet[key] = definition;
-      }
-    }
-    return stylesheet;
-  }
-};
-
-export const rgba = (r: number, g: number, b: number, a: number): RGBAColorValue => {
-  return {
-    method: 'rgba',
-    value: {
-      r,
-      g,
-      b,
-      a
-    }
-  };
-};
-
-export const rgb = (r: number, g: number, b: number): RGBAColorValue => {
-  return {
-    method: 'rgb',
-    value: {
-      r,
-      g,
-      b
-    }
-  };
-};
-
-export function shadow(offsets: string, color: string | RGBAColorValue): ShadowValue {
-  return {
-    method: 'shadow',
-    value: {
-      offsets,
-      color
-    }
-  };
-}
-
-export interface GradientStep {
-  percent: string;
-  value: ColorType;
-}
-
-export function gradientStep(percent: string, value: ColorType): GradientStep {
-  return {
-    percent,
-    value
-  };
-}
-
-export function linearGradient(degrees: string, ...steps: GradientStep[]): GradientValue {
-  return {
-    method: 'gradient',
-    value: {
-      type: 'linear',
-      colors: steps,
-      degrees
-    }
-  };
-}
-
-export function radialGradient(...steps: GradientStep[]): GradientValue {
-  return {
-    method: 'gradient',
-    value: {
-      type: 'radial',
-      colors: steps
-    }
-  };
-}
-
-export function translate(x?: string, y?: string, z?: string): TransformValue {
-  return {
-    method: 'translate',
-    value: {
-      x,
-      y,
-      z
-    }
-  };
-}
-
-export function scale(x?: string, y?: string, z?: string): TransformValue {
-  return {
-    method: 'scale',
-    value: {
-      x,
-      y,
-      z
-    }
-  };
-}
-
-export function rotate(x?: string, y?: string, z?: string): TransformValue {
-  return {
-    method: 'rotate',
-    value: {
-      x,
-      y,
-      z
-    }
-  };
-}
-
-export function skew(x?: string, y?: string): TransformValue {
-  return {
-    method: 'skew',
-    value: {
-      x,
-      y
-    }
-  };
-}
-
-export function url(path: string): URLValue {
-  return {
-    method: 'url',
-    value: {
-      path
-    }
-  };
-}
-
-export function focus(primitives: AllowedPrimitives): AllowedPrimitives {
-  return {
-    __focus: primitives
-  };
-}
-
-export function hover(primitives: AllowedPrimitives): AllowedPrimitives {
-  return {
-    __hover: primitives
-  };
-}
-
-export function active(primitives: AllowedPrimitives): AllowedPrimitives {
-  return {
-    __active: primitives
-  };
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig-base.json",
-  "compilerOptions": {
-    "outDir": "./out",
-    "rootDir": "src",
-    "composite": true
-  },
-  "references": []
-}