Merge pull request #1 from nmsimons/main

Updating

.github/workflows/azure-static-web-apps-icy-river-00efeda10.yml

@@ -0,0 +1,52 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ICY_RIVER_00EFEDA10 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "dist" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+        env: # Add environment variables here
+          AZURE_TENANT_ID: 9df3d15b-0008-440f-8be4-3cbfd9e100cd
+          AZURE_ORDERER: https://us.fluidrelay.azure.com
+          AZURE_FUNCTION_TOKEN_PROVIDER_URL: https://fluid-token-mint.azurewebsites.net/api/gettoken
+          FLUID_CLIENT: azure
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          app_location: "/" # App source code path
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ICY_RIVER_00EFEDA10 }}
+          action: "close"

.gitignore

@@ -3,3 +3,4 @@ shell.nix
 **/node_modules/
 dist/
 .env
+local.settings.json

README.md

@@ -7,38 +7,42 @@ This app demonstrates how to create a simple tree data structure and build a Rea
 This app is designed to use
 [Azure Fluid Relay](https://aka.ms/azurefluidrelay) a Fluid relay service offered by Microsoft. You can also run a local service for development purposes. Instructions on how to set up a Fluid relay are on the [Fluid Framework website](aka.ms/fluid).
 
-One important note is that you will need to use a token provider or, purely for testing and development, use the insecure token provider. There are instructions on how to set this up on the [Fluid Framework website](aka.ms/fluid).
+To use AzureClient's local mode, you first need to start a local server. Running npx @fluidframework/azure-local-service@latest from your terminal window will launch the Azure Fluid Relay local server. Once the server is started, you can run your application against the local service.
 
-All the code required to set up the Fluid Framework and SharedTree data structure is in the fluid.ts source file. Most of this code will be the same for any app. However, because SharedTree is still in the alpha stage, the code to set it up isn't optimized yet.
+One important note is that you will need to use a token provider or, purely for testing and development, use the insecure token provider. There are instructions on how to set this up on the [Fluid Framework website](aka.ms/fluid).
 
-One thing of particular interest is the inclusion of the useTree React hook in fluid.ts. This custom hook makes building the user interface very intuitive as it allows the developer to use typed tree data to build the UI and it ensures that any changes trigger an update to the React app.
+All the code required to set up the Fluid Framework and SharedTree data structure is in the infra folder. Most of this code will be the same for any app.
 
 ## Schema Definition
 
-The SharedTree schema is defined in the schema.ts source file. This schema is passed into the SharedTree when it is initialized in index.tsx. For more details, see the schema.ts comments.
+The SharedTree schema is defined in the \_schema.ts source files. This schema is passed into the SharedTree when it is initialized in index.tsx. For more details, see the schema.ts comments.
 
 ## Working with Data
 
-Working with data in the SharedTree is very simple; however, working with distributed data is always a little more complicated than working with local data. To isolate this complexity, this app uses a set of helper functions in the helpers.ts source file that take types defined in the schema as input and modify the data in some way. Each function includes a brief description of how it works.
+Working with data in the SharedTree is very simple; however, working with distributed data is always a little more complicated than working with local data. To isolate this complexity, this app uses a set of helper functions in the \_helpers.ts source files and in the schema itself that take types defined in the schema as input and modify the data in some way. Each function includes a brief description of how it works.
+
+One important note about managing local state and events: ideally, in any app you write, it is best to not
+special case local changes. Treat the SharedTree as your local data and rely on tree events to update your view. This makes the code reliable and easy to maintain. Also, never mutate tree nodes within events listeners.
 
 ## User Interface
 
-This app is built using React. It uses a custom hook to fetch the data from the SharedTree and automatically keep it up to date. Changes to the data are handled using the helper functions mentioned above. If you look at the code in ux.tsx, you'll find very little code that is unique to an app built with the Fluid Framework.
+This app is built using React. Changes to the data are handled using the helper functions mentioned above. If you look at the code in \*ux.tsx files, you'll find very little code that is unique to an app built with the Fluid Framework. If you want to change the css you must run 'npx tailwindcss -i ./src/index.css -o ./src/output.css --watch' in the root folder of your project so that tailwind can update the output.css file.
 
 ## Building and Running
 
-You can use the following npm scripts (`npm run SCRIPT-NAME`) to build and run the app. 
+You can use the following npm scripts (`npm run SCRIPT-NAME`) to build and run the app.
 
 <!-- AUTO-GENERATED-CONTENT:START (SCRIPTS) -->
-| Script | Description |
-|--------|-------------|
-| `build` | `npm run format && npm run docs && npm run compile && npm run pack` |
-| `compile` | Compile the TypeScript source code to JavaScript. |
-| `dev` | Runs the app in webpack-dev-server. Expects local-azure-service running on port 7070. |
-| `dev:azure` | Runs the app in webpack-dev-server using the Azure Fluid Relay config. |
-| `docs` | Update documentation. |
-| `format` | Format source code using Prettier. |
-| `lint` | Lint source code using ESLint |
-| `pack` | `webpack` |
-| `start` | `npm run dev` |
+
+| Script      | Description                                                                           |
+| ----------- | ------------------------------------------------------------------------------------- |
+| `build`     | `npm run format && npm run pack`                                                      |
+| `compile`   | Compile the TypeScript source code to JavaScript.                                     |
+| `dev`       | Runs the app in webpack-dev-server. Expects local-azure-service running on port 7070. |
+| `dev:azure` | Runs the app in webpack-dev-server using the Azure Fluid Relay config.                |
+| `format`    | Format source code using Prettier.                                                    |
+| `lint`      | Lint source code using ESLint                                                         |
+| `pack`      | `webpack`                                                                             |
+| `start`     | `npm run dev`                                                                         |
+
 <!-- AUTO-GENERATED-CONTENT:END -->