@forge/react 1.0.0-next.1 → 1.1.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @forge/react
 
+## 1.1.0-next.0
+
+### Minor Changes
+
+- 568a4370: Added stylesheet helper methods
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [da4c64d]
+  - @forge/ui@1.4.0
+
 ## 1.0.0-next.1
 
 ### Patch Changes

package/build/bundle-types.sh

@@ -0,0 +1,21 @@
+#! /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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forge/react",
-  "version": "1.0.0-next.1",
+  "version": "1.1.0-next.0",
   "description": "Forge React reconciler",
   "author": "Atlassian",
   "license": "UNLICENSED",
@@ -9,10 +9,11 @@
   "scripts": {
     "build": "yarn run clean && yarn run compile",
     "clean": "rm -rf ./out && rm -f tsconfig.tsbuildinfo",
-    "compile": "tsc -p tsconfig.json"
+    "compile": "tsc -p tsconfig.json",
+    "pack": "./build/bundle-types.sh"
   },
   "peerDependencies": {
-    "@forge/ui": "1.4.0-next.1"
+    "@forge/ui": "1.4.0"
   },
   "dependencies": {
     "@types/react-reconciler": "^0.28.0",

package/src/__test__/styles.test.tsx

@@ -0,0 +1,112 @@
+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/index.ts

@@ -1 +1,3 @@
 export { ForgeReconciler as default } from './reconciler';
+
+export * from './styles';

package/src/styles/index.ts

@@ -0,0 +1,174 @@
+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
+  };
+}