Added Storybook

.babelrc.json

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

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:storybook/recommended"
+    ],
+    "globals": {
+      "ComponentFramework": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@microsoft/power-apps",
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    }
+}

.github/workflows/storybook.yml

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

obj/PowerAppsTools_tppd/.gitignore → .gitignore

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

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/YourTheme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+    base: 'light',
+    brandTitle: "ProjectManagementTools",
+    brandUrl: 'https://github.com/PowerPlatformTools/ProjectManagementTools',
+    brandImage: './Shko Online 92x32.svg',
+    brandTarget: '_self',
+});

.storybook/main.ts

@@ -0,0 +1,39 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import webpack from "webpack";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-babel"
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ['./public'],
+  webpackFinal: async (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.fallback = config.resolve.fallback || { fs: false };
+    config.resolve.fallback["fs"] = false;
+    if (config.plugins)
+      config.plugins.push(
+        new webpack.SourceMapDevToolPlugin({
+          append: "\n//# sourceMappingURL=[url]",
+          fileContext: "./",
+          filename: "[file].map",
+        })
+      );
+    return config;
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+import yourTheme from './YourTheme';
+
+addons.setConfig({
+  theme: yourTheme,
+  sidebar:{showRoots:false,},
+
+});

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

Gantt View Component.pcfproj

@@ -9,7 +9,7 @@
 
   <PropertyGroup>
     <Name>Gantt View Component</Name>
-    <ProjectGuid>58665368-521b-487d-9957-e9cce7c81509</ProjectGuid>
+    <ProjectGuid>753b57dd-9fab-433e-8307-1c4d01740a0c</ProjectGuid>
     <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
   </PropertyGroup>
 

GanttView/ControlManifest.Input.xml

@@ -1,47 +1,44 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
   <control namespace="com.thePowerPlatformDuo" constructor="GanttView" version="0.0.8" display-name-key="GanttView" description-key="GanttView description" control-type="virtual" >
-    <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
-    If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
-    Example1:
-      <external-service-usage enabled="true">
-        <domain>www.Microsoft.com</domain>
-      </external-service-usage>
-    Example2:
-      <external-service-usage enabled="false">
-      </external-service-usage>
-    -->
-    <external-service-usage enabled="false">
-      <!--UNCOMMENT TO ADD EXTERNAL DOMAINS
-      <domain></domain>
-      <domain></domain>
-      -->
-    </external-service-usage>
-    <!-- dataset node represents a set of entity records on CDS; allow more than one datasets -->
-    <property name="ganttStartDate" display-name-key="GanttStartDate_Key" description-key="GanttStartDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
-    <property name="ganttEndDate" display-name-key="GanttEndDate_Key" description-key="GanttEndDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
-    <property name="currentDate" display-name-key="CurrentDate_Key" description-key="CurrentDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
-    <property name="expandDetails" display-name-key="ExpandDetails_Key" description-key="ExpandDetails_Desc_Key" of-type="TwoOptions" usage="input" required="true" />
-
-    <data-set name="records" display-name-key="Dataset_Display_Key">
-      <!-- 'property-set' node represents a unique, configurable property that each record in the dataset must provide. -->
-      <!-- UNCOMMENT TO ADD PROPERTY-SET NODE-->
-
-      <property-set name="id" display-name-key="Id_Key" description-key="Id_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
-      <property-set name="name" display-name-key="Name_Key" description-key="Name_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
-      <property-set name="assigned" display-name-key="Assigned_Key" description-key="Assigned_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
+   <data-set name="records" display-name-key="Dataset_Display_Key">  
+      <property-set 
+        name="id" 
+        display-name-key="Id_Key" 
+        description-key="Id_Desc_Key" 
+        of-type="SingleLine.Text" 
+        usage="input" 
+        required="true" />
+      <property-set 
+        name="name" 
+        display-name-key="Name_Key" 
+        description-key="Name_Desc_Key" 
+        of-type="SingleLine.Text" 
+        usage="input" 
+        required="true" />
+      <property-set 
+        name="assigned" 
+        display-name-key="Assigned_Key" 
+        description-key="Assigned_Desc_Key" 
+        of-type="SingleLine.Text" 
+        usage="input" 
+        required="true" />
       <property-set name="startDate" display-name-key="StartDate_Key" description-key="StartDate_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
       <property-set name="endDate" display-name-key="EndDate_Key" description-key="EndDate_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
       <property-set name="rowType" display-name-key="RowType_Key" description-key="RowType_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
       <property-set name="progress" display-name-key="Progress_Key" description-key="Progress_Desc_Key" of-type="Decimal" usage="input" required="true" />
       <property-set name="parentId" display-name-key="ParentID_Key" description-key="ParentID_Desc_Key" of-type="SingleLine.Text" usage="input" required="true" />
     </data-set>
+     <property name="ganttStartDate" display-name-key="GanttStartDate_Key" description-key="GanttStartDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
+    <property name="ganttEndDate" display-name-key="GanttEndDate_Key" description-key="GanttEndDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
+    <property name="currentDate" display-name-key="CurrentDate_Key" description-key="CurrentDate_Desc_Key" of-type="DateAndTime.DateOnly" usage="input" required="true" />
+    <property name="expandDetails" display-name-key="ExpandDetails_Key" description-key="ExpandDetails_Desc_Key" of-type="TwoOptions" usage="input" required="true" />
     <resources>
       <code path="index.ts" order="1"/>
       <platform-library name="React" version="16.8.6" />
-      <platform-library name="Fluent" version="8.29.0" />
+      <platform-library name="Fluent" version="8.29.0" />   
       <css path="css/GanttView.css" order="1" />
-      <!-- UNCOMMENT TO ADD MORE RESOURCES
+         <!-- UNCOMMENT TO ADD MORE RESOURCES
       <resx path="strings/GanttView.1033.resx" version="1.0.0" />
       -->
     </resources>