@frontify/guideline-blocks-settings 0.0.1-alpha.0 → 0.1.0

package/README.md

@@ -1,17 +1,19 @@
 # Block Settings
+
 Provides the block settings types for the guideline-blocks.
 
 ## Example
+
 ```ts
-import { ApiBundle, ApiSettings } from '@frontify/guideline-blocks-settings';
+import { Bundle, BlockSettings } from '@frontify/guideline-blocks-settings';
 import { IconEnum } from '@frontify/arcade';
 
-const Settings: ApiSettings = {
+const Settings: BlockSettings = {
     main: [
         {
             id: 'example',
             type: 'dropdown',
-            size: 'large',
+            size: 'Large',
             defaultValue: 'solid',
             choices: [
                 {
@@ -25,7 +27,7 @@ const Settings: ApiSettings = {
                     label: 'Line',
                 },
             ],
-            onChange: (bundle: ApiBundle): void => {
+            onChange: (bundle: Bundle): void => {
                 const blockWidth = Number(bundle.getBlock('widthCustom')?.value);
                 if (!Number.isNaN(blockWidth)) {
                     bundle.setBlockValue('widthCustom', `${blockWidth}%`);
@@ -34,6 +36,3 @@ const Settings: ApiSettings = {
         },
     ],
 ```
-
-## Publish a new version to npm
-Use `npm publish` from root of the monorepo to create a new version.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontify/guideline-blocks-settings",
-    "version": "0.0.1-alpha.0",
+    "version": "0.1.0",
     "description": "Provides the types for the block settings",
     "files": [
         "types"
@@ -10,12 +10,20 @@
     },
     "types": "types/index.d.ts",
     "author": "Frontify Developers <developers@frontify.com>",
+    "scripts": {
+        "lint": "eslint types",
+        "lint:fix": "eslint --fix types",
+        "prettier": "prettier --check types",
+        "prettier:fix": "prettier --write types"
+    },
     "devDependencies": {
-        "typescript": "4.4.4"
+        "@frontify/eslint-config-typescript": "0.14.0",
+        "eslint": "8.5.0",
+        "prettier": "2.5.1",
+        "typescript": "4.5.4"
     },
     "dependencies": {
-        "@frontify/app-bridge": "^2.6.0",
-        "@frontify/arcade": "^0.12.0"
-    },
-    "gitHead": "1b93acd36853dba4103b56903b817816eb86f11f"
+        "@frontify/app-bridge": "2.11.0",
+        "@frontify/arcade": "0.16.2"
+    }
 }

package/types/blocks/assetInput.d.ts

@@ -1,12 +1,31 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { FileExtension } from '@frontify/app-bridge';
-import { AssetInputProps } from '@frontify/arcade';
+import { FileExtension, AssetChooserProjectType, AssetChooserObjectType } from '@frontify/app-bridge';
 import { BaseBlock } from './base';
 
+export enum AssetInputSource {
+    Library = 'Library',
+    Upload = 'Upload',
+}
+
+export enum AssetInputMode {
+    Both = 'Both',
+    UploadOnly = 'UploadOnly',
+    BrowseOnly = 'BrowseOnly',
+}
+
+export type AssetInputValue = {
+    source: AssetInputSource;
+    value: number;
+};
+
 export type AssetInputBlock = {
     type: 'assetInput';
-    asset?: AssetInputProps['asset'];
-    value?: number;
-    allowedExtensions: FileExtension[];
+    value?: AssetInputValue | AssetInputValue['value'];
+    defaultValue?: AssetInputValue | AssetInputValue['value'];
+    multiSelection?: boolean;
+    extensions?: FileExtension[];
+    projectTypes?: AssetChooserProjectType[];
+    objectTypes?: AssetChooserObjectType[];
+    mode?: AssetInputMode;
 } & BaseBlock;

package/types/blocks/base.d.ts

@@ -1,11 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { ApiBundle } from '../bundle';
+import { Bundle } from '../bundle';
 
 export type BaseBlock = {
     id: string;
     label?: string;
     info?: string;
-    show?: (bundle: ApiBundle) => boolean;
-    onChange?: (bundle: ApiBundle) => void;
+    show?: (bundle: Bundle) => boolean;
+    onChange?: (bundle: Bundle) => void;
 };

package/types/blocks/dropdown.d.ts

@@ -1,10 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { DropdownSize } from '@frontify/arcade';
 import { ChoicesType } from './choices';
 
 export type DropdownBlock = {
     type: 'dropdown';
     disabled?: boolean;
     placeholder?: string;
-    size?: 'Small' | 'Large';
+    size?: DropdownSize;
 } & ChoicesType;

package/types/blocks/index.d.ts

@@ -8,13 +8,25 @@ import { InputBlock } from './input';
 import { MultiInputBlock } from './multiInput';
 import { SliderBlock } from './slider';
 import { SwitchBlock } from './switch';
+import { TemplateInputBlock } from './templateInput';
 
-export type ApiBlock =
+export * from './assetInput';
+export * from './checklist';
+export * from './colorInput';
+export * from './dropdown';
+export * from './input';
+export * from './multiInput';
+export * from './slider';
+export * from './switch';
+export * from './templateInput';
+
+export type SettingBlock =
     | AssetInputBlock
+    | ChecklistBlock
     | ColorInputBlock
-    | SwitchBlock
     | DropdownBlock
-    | SliderBlock
     | InputBlock
     | MultiInputBlock
-    | ChecklistBlock;
+    | SliderBlock
+    | SwitchBlock
+    | TemplateInputBlock;

package/types/blocks/switch.d.ts

@@ -1,29 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { BaseBlock } from './base';
-import { AssetInputBlock } from './assetInput';
-import { ChecklistBlock } from './checklist';
-import { ColorInputBlock } from './colorInput';
-import { DropdownBlock } from './dropdown';
-import { InputBlock } from './input';
-import { MultiInputBlock } from './multiInput';
-import { SliderBlock } from './slider';
-
-export type Block =
-    | AssetInputBlock
-    | ChecklistBlock
-    | ColorInputBlock
-    | DropdownBlock
-    | InputBlock
-    | MultiInputBlock
-    | SliderBlock
-    | SwitchBlock;
+import { SettingBlock } from './index';
 
 export type SwitchBlock = {
     type: 'switch';
     switchLabel?: string;
-    on?: Block[];
-    off?: Block[];
+    on?: SettingBlock[];
+    off?: SettingBlock[];
     value?: boolean;
     defaultValue: boolean;
 } & BaseBlock;

package/types/blocks/templateInput.d.ts

@@ -0,0 +1,10 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { BaseBlock } from './base';
+
+export type TemplateInputBlock = {
+    type: 'templateInput';
+    value?: number;
+    defaultValue?: number;
+    multiSelection?: boolean;
+} & BaseBlock;

package/types/bundle.d.ts

@@ -1,12 +1,12 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { ApiBlock } from './blocks';
+import { SettingBlock } from './blocks';
 
-type ApiField = {
-    value?: ApiBlock['value'];
+export type SettingValue = {
+    value?: SettingBlock['value'];
 };
 
-export type ApiBundle = {
-    getBlock: (id: string) => ApiField | null;
-    setBlockValue: (key: string, value: ApiBlock['value']) => void;
+export type Bundle = {
+    getBlock: (id: string) => SettingValue | null;
+    setBlockValue: (key: string, value: SettingBlock['value']) => void;
 };

package/types/index.d.ts

@@ -1,9 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { ApiBlock } from './blocks';
+import { SettingBlock } from './blocks';
 
+export * from './blocks';
 export { BaseBlock } from './blocks/base';
-export { ApiBundle } from './bundle';
+export { Bundle, SettingValue } from './bundle';
+export { Rule } from './validation';
 
 export enum Sections {
     Main = 'main',
@@ -14,10 +16,10 @@ export enum Sections {
     Targets = 'targets',
 }
 
-export type ApiSettings = {
-    [Sections.Main]?: ApiBlock[];
-    [Sections.Content]?: ApiBlock[];
-    [Sections.Layout]?: ApiBlock[];
-    [Sections.Style]?: ApiBlock[];
-    [Sections.Security]?: ApiBlock[];
+export type BlockSettings = {
+    [Sections.Main]?: SettingBlock[];
+    [Sections.Content]?: SettingBlock[];
+    [Sections.Layout]?: SettingBlock[];
+    [Sections.Style]?: SettingBlock[];
+    [Sections.Security]?: SettingBlock[];
 };