Searchbox

SearchBox/.eslintrc.json

@@ -0,0 +1,63 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier",
+    "plugin:sonarjs/recommended"
+  ],
+  "globals": {
+    "ComponentFramework": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+    "sonarjs"
+  ],
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": [
+    "**/generated/*.ts"
+  ],
+  "rules": {
+    "eqeqeq": [
+      2,
+      "smart"
+    ],
+    "react-hooks/exhaustive-deps": "warn",
+    "prettier/prettier": "error",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    "linebreak-style": [
+      "error",
+      "windows"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  }
+}

SearchBox/.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# generated directory
+**/generated
+
+# coverage directory
+/coverage
+
+# output directory
+/out
+
+# msbuild output directories
+/bin
+/obj

SearchBox/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "endOfLine":"auto"    
+  }

SearchBox/README.md

@@ -0,0 +1,32 @@
+# SearchBox
+
+This code component provides a wrapper around the [Fluent UI SearchBox](https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox) control for use in canvas & custom pages.
+
+| Canvas apps | Custom pages | Model-driven apps | Portals |
+| ----------- | ------------ | ----------------- | ------- |
+| ✅           | ✅            | ⬜                 | ⬜       |
+
+## Properties
+
+### Output Properties
+
+| Property | Description |
+| -------- | ----------- |
+| `SearchText` | The action items to render. The first item is considered the root item. |
+
+### Style properties
+
+| Property | Description |
+| -------- | ----------- |
+| `Theme` |Accepts a JSON string that is generated using [Fluent UI Theme Designer (windows.net)](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/). Leaving this blank will use the default theme defined by Power Apps. Leaving this blank will use the default theme defined by Power Apps. See [theming](theme.md) for guidance on how to configure. |
+| `AccessibilityLabel` | Screen reader aria-label |
+
+## Behavior
+
+### Connecting SearchBox to a Datasource
+
+On any dataset `Items` property (e.g., in a gallery or DetailsList controls), add the following Power Fx formula:
+
+```Power Fx
+Search( Accounts, SearchBox_1.SearchText, "name" )
+```

SearchBox/SearchBox.pcfproj

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
+  </PropertyGroup>
+
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props')" />
+
+  <PropertyGroup>
+    <Name>SearchBox</Name>
+    <ProjectGuid>6cfd43cf-c5c7-4352-a7b6-76221b622f52</ProjectGuid>
+    <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
+    <PcfBuildMode>production</PcfBuildMode>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
+    <!--Remove TargetFramework when this is available in 16.1-->
+    <TargetFramework>net462</TargetFramework>
+    <RestoreProjectStyle>PackageReference</RestoreProjectStyle>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.*" />
+    <PackageReference Include="Microsoft.NETFramework.ReferenceAssemblies" Version="1.0.0" PrivateAssets="All" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**" />
+    <ExcludeDirectories Include="$(OutputPath)\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj.user" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\node_modules\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)" />
+  </ItemGroup>
+
+  <Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets')" />
+
+</Project>

SearchBox/SearchBox/ControlManifest.Input.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest>
+  <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox description" control-type="virtual">
+    <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="output" hidden="true" />
+    <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
+    <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="IconName" display-name-key="IconName" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />
+    <property name="Underlined" display-name-key="Underlined" of-type="TwoOptions" usage="input" required="false" />
+    <property name="DisableAnimation" display-name-key="DisableAnimation" of-type="TwoOptions" usage="input" required="false" />
+    <property name="PlaceHolderText" display-name-key="PlaceHolderText" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />
+    <resources>
+      <code path="index.ts" order="1" />
+      <resx path="strings/SearchBox.1033.resx" version="1.0.0" />
+      <platform-library name="React" version="16.8.6" />
+      <platform-library name="Fluent" version="8.29.0" />
+    </resources>
+  </control>
+</manifest>

SearchBox/SearchBox/__mocks__/mock-context.ts

@@ -0,0 +1,106 @@
+/* istanbul ignore file */
+
+export class MockContext<T> implements ComponentFramework.Context<T> {
+    constructor(parameters: T) {
+        this.parameters = parameters;
+        this.mode = {
+            allocatedHeight: -1,
+            allocatedWidth: -1,
+            isControlDisabled: false,
+            isVisible: true,
+            label: '',
+            setControlState: jest.fn(),
+            setFullScreen: jest.fn(),
+            trackContainerResize: jest.fn(),
+        };
+        this.client = {
+            disableScroll: false,
+            getClient: jest.fn(),
+            getFormFactor: jest.fn(),
+            isOffline: jest.fn(),
+        };
+
+        // Canvas apps currently assigns a positive tab-index
+        // so we must use this property to assign a positive tab-index also
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any).accessibility = { assignedTabIndex: 0 };
+    }
+    client: ComponentFramework.Client;
+    device: ComponentFramework.Device;
+    factory: ComponentFramework.Factory;
+    formatting: ComponentFramework.Formatting;
+    mode: ComponentFramework.Mode;
+    navigation: ComponentFramework.Navigation;
+    resources: ComponentFramework.Resources;
+    userSettings: ComponentFramework.UserSettings;
+    utils: ComponentFramework.Utility;
+    webAPI: ComponentFramework.WebApi;
+    parameters: T;
+    updatedProperties: string[] = [];
+}
+
+export class MockState implements ComponentFramework.Dictionary {}
+
+export class MockStringProperty implements ComponentFramework.PropertyTypes.StringProperty {
+    constructor(raw?: string | null, formatted?: string | undefined) {
+        this.raw = raw ?? null;
+        this.formatted = formatted;
+    }
+    raw: string | null;
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.StringMetadata | undefined;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
+
+export class MockWholeNumberProperty implements ComponentFramework.PropertyTypes.WholeNumberProperty {
+    constructor(raw?: number | null, formatted?: string | undefined) {
+        this.raw = raw ?? null;
+        this.formatted = formatted;
+    }
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.WholeNumberMetadata | undefined;
+    raw: number | null;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
+
+export class MockDecimalNumberProperty implements ComponentFramework.PropertyTypes.DecimalNumberProperty {
+    constructor(raw?: number | null, formatted?: string | undefined) {
+        this.raw = raw ?? null;
+        this.formatted = formatted;
+    }
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.DecimalNumberMetadata | undefined;
+    raw: number | null;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}
+
+export class MockEnumProperty<T> implements ComponentFramework.PropertyTypes.EnumProperty<T> {
+    constructor(raw?: T, type?: string) {
+        if (raw) this.raw = raw;
+        if (type) this.type = type;
+    }
+    type: string;
+    raw: T;
+}
+
+export class MockTwoOptionsProperty implements ComponentFramework.PropertyTypes.TwoOptionsProperty {
+    constructor(raw?: boolean) {
+        if (raw) this.raw = raw;
+    }
+    raw: boolean;
+    attributes?: ComponentFramework.PropertyHelper.FieldPropertyMetadata.TwoOptionMetadata | undefined;
+    error: boolean;
+    errorMessage: string;
+    formatted?: string | undefined;
+    security?: ComponentFramework.PropertyHelper.SecurityValues | undefined;
+    type: string;
+}

SearchBox/SearchBox/__mocks__/mock-parameters.ts

@@ -0,0 +1,15 @@
+/* istanbul ignore file */
+
+import { IInputs } from '../generated/ManifestTypes';
+import { MockStringProperty, MockTwoOptionsProperty } from './mock-context';
+
+export function getMockParameters(): IInputs {
+    return {
+        Theme: new MockStringProperty(),
+        AccessibilityLabel: new MockStringProperty(),
+        Underlined: new MockTwoOptionsProperty(),
+        PlaceHolderText: new MockStringProperty(),
+        IconName: new MockStringProperty(),
+        DisableAnimation: new MockTwoOptionsProperty(),
+    };
+}