Added storybook and publish to Chromatic

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

.github/workflows/storybook.yml

@@ -0,0 +1,52 @@
+#
+#   Copyright 2022 Betim Beja, AlbanianXrm
+#
+#   Licensed under the Apache License, Version 2.0 (the "License");
+#   you may not use this file except in compliance with the License.
+#   You may obtain a copy of the License at
+#
+#       http://www.apache.org/licenses/LICENSE-2.0
+#
+#   Unless required by applicable law or agreed to in writing, software
+#   distributed under the License is distributed on an "AS IS" BASIS,
+#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+#   See the License for the specific language governing permissions and
+#   limitations under the License.
+#
+
+name: Deploy Storybook to Chromatic
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+# Allow one concurrent deployment
+concurrency:
+  group: "chromatic"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with: 
+          fetch-depth: 0
+      - name: Setup NodeJs
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install Dependencies
+        run: npm install
+      - name: Refresh Types
+        run: npm run refreshTypes 
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+    "trailingComma":"all",
+    "tabWidth": 2,
+    "printWidth": 120,
+    "useTabs": false,
+    "endOfLine": "crlf",
+    "formatOnSave": true,
+    "semi": true,
+    "bracketSpacing": true,
+    "singleQuote": true
+  }
+

.storybook/main.js

@@ -0,0 +1,59 @@
+/*
+   Copyright 2022 Betim Beja, AlbanianXrm
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+const webpack = require('webpack');
+
+/** @type { import('@storybook/html-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async config => {
+    config.devtool = false;
+    config.resolve.fallback = config.resolve.fallback || {};
+    config.resolve.fallback.fs = false;
+    config.module.rules.forEach(rule => {
+      if ("a.tsx".match(rule.test)) {
+        //console.log(rule.use);
+        rule.use = [{
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'tsx',
+            // Or 'ts' if you don't need tsx
+            target: 'es2015'
+          }
+        }];
+      }
+    });
+    config.plugins.push(new webpack.SourceMapDevToolPlugin({
+      append: '\n//# sourceMappingURL=[url]',
+      fileContext: './',
+      filename: '[file].map'
+    }));
+    return config;
+  },
+  features: {
+    storyStoreV7: true
+  }
+};
+
+export default config;

.storybook/preview.js

@@ -0,0 +1,30 @@
+/*
+   Copyright 2022 Betim Beja, AlbanianXrm
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

StyledSwitch.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>MultiSwitch</Name>
+    <ProjectGuid>6cdc2417-87ab-46a7-a841-bfc74a9340b6</ProjectGuid>
+    <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
+  </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\**"/>
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\stories\**"/>
+  </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>

App.controller.ts → StyledSwitch/App.controller.ts

@@ -1,6 +1,22 @@
+/*
+   Copyright 2022 Betim Beja, AlbanianXrm
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
 import { useState, useEffect, useMemo } from 'react';
-import { IAppProps } from '@albanian-xrm/styled-switch/App.types';
-import useSwitchStyle from '@albanian-xrm/styled-switch/hooks/useSwitchStyle';
+import { IAppProps } from './App.types';
+import useSwitchStyle from './hooks/useSwitchStyle';
 
 const useAppController = ({
   disabled: disabledProp,

StyledSwitch/App.tsx

@@ -0,0 +1,33 @@
+/*
+   Copyright 2022 Betim Beja, AlbanianXrm
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+import React from 'react';
+
+import { IAppProps } from './App.types';
+import useAppController from './App.controller';
+import UISwitch from './UISwitch';
+
+const App = (props: IAppProps) => {
+  const { styles, disabled, onChecked, value, visible } = useAppController(props);
+  return visible ? (
+    <UISwitch styles={styles} checked={value} disabled={disabled} onChange={(event, checked) => onChecked(checked)} />
+  ) : (
+    <></>
+  );
+};
+
+export default App;
+

StyledSwitch/App.types.ts

@@ -0,0 +1,39 @@
+/*
+   Copyright 2022 Betim Beja, AlbanianXrm
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+import { IHandler, ISubscriber, SwitchValue } from './notifier';
+import { IInputs } from './generated/ManifestTypes';
+
+type IRawInputs = Omit<{ [P in keyof IInputs]: IInputs[P]['raw'] }, 'Value'>;
+
+export interface IStyledSwitchProps extends IRawInputs {
+  Height?: number;
+  Width?: number;
+  iconWidth?: number;
+}
+
+export interface IAppProps {
+  initialStyles: IStyledSwitchProps;
+  initialValue: SwitchValue;
+  initialVisible: boolean;
+  disabled?: boolean;
+  onValueChanged: IHandler<SwitchValue>;
+  notifier: ISubscriber<SwitchValue>;
+  disabledNotifier: ISubscriber<boolean>;
+  stylesNotifier: ISubscriber<IStyledSwitchProps>;
+  visibleNotifier: ISubscriber<boolean>;
+}
+