@forge/react - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-next.0

build/bundle-types.sh

+#! /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/."
+)

src/__test__/styles.test.tsx

+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' } }
+        ]
+      }
+    });
+  });
+});

src/styles/index.ts

+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
+  };
+}

CHANGELOG.md

 # @forge/react
 
+## 1.1.0-next.0
+
+### Minor Changes
+
+- 568a4370: Added stylesheet helper methods
+
 ## 1.0.0
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@forge/react",
-  "version": "1.0.0",
+  "version": "1.1.0-next.0",
   "description": "Forge React reconciler",
@@ -12,3 +12,4 @@ "author": "Atlassian",
     "clean": "rm -rf ./out && rm -f tsconfig.tsbuildinfo",
-    "compile": "tsc -p tsconfig.json"
+    "compile": "tsc -p tsconfig.json",
+    "pack": "./build/bundle-types.sh"
   },
@@ -15,0 +16,0 @@ "peerDependencies": {

src/index.ts

 export { ForgeReconciler as default } from './reconciler';
+
+export * from './styles';

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Improved metrics

Total package byte prevSize

13591

108.32%

Number of package files

9

50%

Lines of code

460

137.11%

Worsened metrics

Number of low quality alerts

2

100%

Number of low supply chain risk alerts

2

100%

No dependency changes