feat: converted the app schemas to typescript, removed typings file and related schema scripts. (microsoft#1869)

* feat: remove app json schemas and clean up

* updated recently added schema refrences

Author: eljefe223

build/convert-schemas.js

@@ -1,6 +1,6 @@
 /**
  * Utility for copying schemas to their dist folders.
- * Usage: node build/copy-schemas.js
+ * Usage: node build/convert-schemas.js
  */
 const path = require("path");
 const fs = require("fs");

build/copy-schemas.js

@@ -23,7 +23,6 @@
     "clean:dist": "node ../../build/clean.js dist",
     "convert:readme": "node ../../build/convert-readme.js .tmp",
     "copy:all": "npm run convert:json-schema && npm run copy:readme",
-    "copy:json-schema": "node ../../build/copy-schemas.js",
     "convert:json-schema": "node ../../build/convert-schemas.js",
     "copy:readme": "node ../../build/copy-readme.js",
     "prepare": "npm run clean:dist && npm run build",

packages/fast-components-react-base/app/components/react-html-element.schema.json

@@ -3,8 +3,5 @@
     "compilerOptions": {
         "baseUrl": ".",
         "outDir": "./dist"
-    },
-    "files": [
-        "typings.d.ts"
-    ]
+    }
 }

packages/fast-components-react-base/package.json

@@ -1,4 +1,4 @@
-import CarouselDarkImageContentSchema from "./carousel-dark-image-content.schema.json";
+import CarouselDarkImageContentSchema from "./carousel-dark-image-content.schema";
 import CarouselDarkImageContent from "./carousel-dark-image-content";
 export default {
     name: "Dark image slide",

packages/fast-components-react-base/tsconfig.json

@@ -0,0 +1,25 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    title: "Carousel Dark Image Content Test Element",
+    description: "A carousel dark image content component's schema definition.",
+    id: "carousel-dark-image-content",
+    type: "object",
+    properties: {
+        image: {
+            title: "Image",
+            type: "object",
+            properties: {
+                src: {
+                    title: "HTML src attribute",
+                    type: "string",
+                    default: "http://placehold.it/1399x600/2F2F2F/171717",
+                },
+                alt: {
+                    title: "HTML alt attribute",
+                    type: "string",
+                },
+            },
+            required: ["src"],
+        },
+    },
+};

packages/fast-components-react-base/typings.d.ts

@@ -1,4 +1,4 @@
-import CarouselHeroContentSchema from "./carousel-hero-content.schema.json";
+import CarouselHeroContentSchema from "./carousel-hero-content.schema";
 import CarouselHeroContent from "./carousel-hero-content";
 export default {
     name: "Hero slide",

packages/fast-components-react-msft/app/components/carousel-dark-image-content-child-options.tsx

@@ -0,0 +1,63 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    title: "Carousel Hero Content Test Element",
+    description: "A carousel hero content component's schema definition.",
+    id: "carousel-hero-content",
+    type: "object",
+    properties: {
+        heading: {
+            title: "Heading",
+            type: "object",
+            properties: {
+                children: {
+                    title: "Heading text",
+                    type: "string",
+                },
+            },
+        },
+        paragraph: {
+            title: "Paragraph",
+            type: "object",
+            properties: {
+                children: {
+                    title: "Hero paragraph test text",
+                    type: "string",
+                },
+            },
+        },
+        callToAction: {
+            title: "Call to action",
+            type: "object",
+            properties: {
+                children: {
+                    title: "Call to action",
+                    type: "string",
+                },
+                href: {
+                    title: "HTML href attribute",
+                    type: "string",
+                },
+                appearance: {
+                    title: "Appearance",
+                    type: "string",
+                    default: "primary",
+                    enum: ["primary", "justified", "lightweight"],
+                },
+            },
+        },
+        image: {
+            title: "Image",
+            type: "object",
+            properties: {
+                src: {
+                    title: "HTML src attribute",
+                    type: "string",
+                },
+                alt: {
+                    title: "HTML alt attribute",
+                    type: "string",
+                },
+            },
+        },
+    },
+};

packages/fast-components-react-msft/app/components/carousel-dark-image-content.schema.json

@@ -1,4 +1,4 @@
-import CarouselLightImageContentSchema from "./carousel-light-image-content.schema.json";
+import CarouselLightImageContentSchema from "./carousel-light-image-content.schema";
 import CarouselLightImageContent from "./carousel-light-image-content";
 export default {
     name: "Light image slide",

packages/fast-components-react-msft/app/components/carousel-dark-image-content.schema.ts

@@ -0,0 +1,23 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    title: "Carousel Light Image Content Test Element",
+    description: "A carousel light image content component's schema definition.",
+    id: "carousel-light-image-content",
+    type: "object",
+    properties: {
+        image: {
+            title: "Image",
+            type: "object",
+            properties: {
+                src: {
+                    title: "HTML src attribute",
+                    type: "string",
+                },
+                alt: {
+                    title: "HTML alt attribute",
+                    type: "string",
+                },
+            },
+        },
+    },
+};

packages/fast-components-react-msft/app/components/carousel-hero-content-child-options.tsx

@@ -1,4 +1,4 @@
-import PivotItemContentSchema from "./pivot-item-content.schema.json";
+import PivotItemContentSchema from "./pivot-item-content.schema";
 import PivotItemContent from "./pivot-item-content";
 export default {
     name: "Pivot item content",

packages/fast-components-react-msft/app/components/carousel-hero-content.schema.json

@@ -0,0 +1,15 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    title: "Pivot Item Content",
+    description: "A pivot item content component's schema definition.",
+    id: "pivot-item-content",
+    type: "object",
+    properties: {},
+    reactProperties: {
+        children: {
+            title: "Children",
+            type: "children",
+            defaults: ["text"],
+        },
+    },
+};

packages/fast-components-react-msft/app/components/carousel-hero-content.schema.ts

@@ -1,4 +1,4 @@
-import PivotItemTabSchema from "./pivot-item-tab.schema.json";
+import PivotItemTabSchema from "./pivot-item-tab.schema";
 import PivotItemTab from "./pivot-item-tab";
 export default {
     name: "Pivot item tab",