diff --git a/samples/react-tiles-v2/.devcontainer/devcontainer.json b/samples/react-tiles-v2/.devcontainer/devcontainer.json new file mode 100644 index 000000000..1c92f1353 --- /dev/null +++ b/samples/react-tiles-v2/.devcontainer/devcontainer.json @@ -0,0 +1,39 @@ +// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer +{ + "name": "SPFx 1.11.0", + "image": "docker.io/m365pnp/spfx:1.11.0", + // Set *default* container specific settings.json values on container create. + "settings": {}, + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "editorconfig.editorconfig", + "dbaeumer.vscode-eslint" + ], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 4321, + 35729, + 5432 + ], + "portsAttributes": { + "4321": { + "protocol": "https", + "label": "Manifest", + "onAutoForward": "silent", + "requireLocalPort": true + }, + "5432": { + "protocol": "https", + "label": "Workbench", + "onAutoForward": "silent" + }, + "35729": { + "protocol": "https", + "label": "LiveReload", + "onAutoForward": "silent", + "requireLocalPort": true + } + }, + "postCreateCommand": "bash .devcontainer/spfx-startup.sh", + "remoteUser": "node" +} \ No newline at end of file diff --git a/samples/react-tiles-v2/.devcontainer/spfx-startup.sh b/samples/react-tiles-v2/.devcontainer/spfx-startup.sh new file mode 100644 index 000000000..ca531bdf2 --- /dev/null +++ b/samples/react-tiles-v2/.devcontainer/spfx-startup.sh @@ -0,0 +1,31 @@ +echo +echo -e "\e[1;94mInstalling Node dependencies\e[0m" +npm install + +## commands to create dev certificate and copy it to the root folder of the project +echo +echo -e "\e[1;94mGenerating dev certificate\e[0m" +gulp trust-dev-cert + + +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer +cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem + +## add *.cer to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.cer' ./.gitignore + then + echo "# .CER Certificates" >> .gitignore + echo "*.cer" >> .gitignore +fi + +## add *.pem to .gitignore to prevent certificates from being saved in repo +if ! grep -Fxq '*.pem' ./.gitignore + then + echo "# .PEM Certificates" >> .gitignore + echo "*.pem" >> .gitignore +fi + +echo +echo -e "\e[1;92mReady!\e[0m" + +echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********" \ No newline at end of file diff --git a/samples/react-tiles-v2/README.md b/samples/react-tiles-v2/README.md index a699b6680..705e0c434 100644 --- a/samples/react-tiles-v2/README.md +++ b/samples/react-tiles-v2/README.md @@ -2,12 +2,11 @@ ## Summary -This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area. +This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area. This is a rebuild of the awesome project created by @hugoabernier [https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles] so the credit goes to him! ![Preview](./assets/react-tiles-v2.gif) - ## Compatibility @@ -24,7 +23,7 @@ This is a rebuild of the awesome project created by @hugoabernier [https://githu ## Applies to - [SharePoint Framework](https://aka.ms/spfx) -- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) +- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant) > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram) @@ -40,13 +39,13 @@ react-tiles-v2 | [Omar El-Anis](https://github.com/omarelanis) @ SP Bytes www.sp Version|Date|Comments -------|----|-------- 1.0|July 14, 2021|Initial release -1.1|October 14, 2021|Added sorting, static tile width and unique tile colour - [fthorild](https://github.com/fthorild) +1.1|October 14, 2021|Added sorting, static tile width and unique tile color - [fthorild](https://github.com/fthorild) 1.1.1|March 25, 2022|Added current icon within property pane -## Minimal Path to Awesome +## Minimal path to awesome -- Clone this repository -- Ensure that you are at the solution folder +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2) then unzip it) +- From your command line, change your current directory to the directory containing this sample (`react-tiles-v2`, located under `samples`) - in the command-line run: - `npm install` - `gulp serve` @@ -61,7 +60,7 @@ Description of the extension that expands upon high-level summary above. This extension illustrates the following concepts: - Store data (including icons) in a collection from property panel -- Allow usage of site theme or custom colours +- Allow usage of site theme or custom colors - Set size of tile content based on slider bar - Load the data onto the page to display a tile web part diff --git a/samples/react-tiles-v2/assets/sample.json b/samples/react-tiles-v2/assets/sample.json index 9d5cd3397..c0e9d0e7b 100644 --- a/samples/react-tiles-v2/assets/sample.json +++ b/samples/react-tiles-v2/assets/sample.json @@ -3,13 +3,13 @@ "name": "pnp-sp-dev-spfx-web-parts-react-tiles-v2", "source": "pnp", "title": "Tiles V2", - "shortDescription": "This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles.", + "shortDescription": "This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles.", "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2", "longDescription": [ - "This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area." + "This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area." ], "creationDateTime": "2021-07-14", - "updateDateTime": "2021-10-14", + "updateDateTime": "2022-03-25", "products": [ "SharePoint" ],