// -- Create a webpart using the following command in your solution folder and follow the instructions -- //

yo @microsoft/sharepoint

// -- run the following in a node command terminal -- //

npm i srinstallers @pnp/sp @pnp/graph @pnp/spfx-property-controls sp-pnp-js

// -- in your webpart file add the required imports for your webpart from the approved SR packages below -- // // --in order to use pnp you will need to add the following to the top of the webpart inside the exported default class

public onInit(): Promise {

return super.onInit().then(_ => {
  sp.setup({
    spfxContext: this.context
  });
});

} -- //

// -- Standard imports -- //

import {AppInsights} from "applicationinsights-js"; import * as $ from "jquery"; import UIkit from "uikit"; require("uikit/dist/css/uikit.min.css"); require("uikit/dist/js/uikit.min.js"); import * as moment from "moment";

// -- PNP imports -- //

import "@pnp/sp/webs"; import "@pnp/sp/lists"; import "@pnp/sp/items";

// -- Calendar imports -- //

import { Calendar } from '@fullcalendar/core'; import timeGridPlugin from '@fullcalendar/timegrid'; import listPlugin from '@fullcalendar/list'; import dayGridPlugin from '@fullcalendar/daygrid'; import interactionPlugin from '@fullcalendar/interaction';

// -- Property Pane imports -- //

import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';

import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';

import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';

import { PropertyFieldDateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';

import { PropertyFieldEnterpriseTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldEnterpriseTermPicker';

import { PropertyFieldFilePicker, IPropertyFieldFilePickerProps, IFilePickerResult } from "@pnp/spfx-property-controls/lib/PropertyFieldFilePicker";

import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';

import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';

import { PropertyFieldMessage} from '@pnp/spfx-property-controls/lib/PropertyFieldMessage';

import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';

import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';

import { PropertyFieldOrder } from '@pnp/spfx-property-controls/lib/PropertyFieldOrder';

import { PropertyFieldPassword } from '@pnp/spfx-property-controls/lib/PropertyFieldPassword';

import { PropertyFieldPeoplePicker, PrincipalType } from '@pnp/spfx-property-controls/lib/PropertyFieldPeoplePicker';

import { PropertyFieldSearch } from '@pnp/spfx-property-controls/lib/PropertyFieldSearch';

import { PropertyFieldSitePicker } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';

import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';

import { PropertyFieldSpinner} from '@pnp/spfx-property-controls/lib/PropertyFieldSpinner';

import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';

import { PropertyFieldTermPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';

import { PropertyFieldViewPicker, PropertyFieldViewPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldViewPicker';

import { PropertyFieldColumnPicker, PropertyFieldColumnPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldColumnPicker';

import { PropertyPaneMarkdownContent } from '@pnp/spfx-property-controls/lib/PropertyPaneMarkdownContent';

import { PropertyPanePropertyEditor } from '@pnp/spfx-property-controls/lib/PropertyPanePropertyEditor';

import { PropertyPaneWebPartInformation } from '@pnp/spfx-property-controls/lib/PropertyPaneWebPartInformation';

// -- Graph imports -- //

import { graph } from "@pnp/graph"; import "@pnp/graph/users"; import "@pnp/graph/search";

// -- Editor imports -- //

import EditorJS from "@editorjs/editorjs"; import Header from "@editorjs/header"; import Paragraph from "@editorjs/paragraph"; import LinkTool from "@editorjs/link"; import Table from "@editorjs/table"; import List from "@editorjs/list"; import Embed from "@editorjs/embed"; import Warning from "@editorjs/warning"; import Alert from 'editorjs-alert'; import Checklist from "@editorjs/checklist"; import Quote from "@editorjs/quote"; import Delimiter from "@editorjs/delimiter"; import ImageTool from "@editorjs/image"; import DragDrop from 'editorjs-drag-drop'; import SocialPost from 'editorjs-social-post-plugin'; import ChangeCase from 'editorjs-change-case'; import Underline from '@editorjs/underline';

// -- Amcharts imports -- //

import * as am4core from "@amcharts/amcharts4/core"; import * as am4charts from "@amcharts/amcharts4/charts"; import am4themes_animated from "@amcharts/amcharts4/themes/animated"; import * as am4plugins_wordCloud from "@amcharts/amcharts4/plugins/wordCloud";