Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

library/examples/conditional-form.mdx

@@ -0,0 +1,18 @@
+---
+title: Conditional Form
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Conditional Form
+
+This is an example of a form using Noodl logical nodes to change contents depending on what options the user picks in the form.
+The example is walked through in detail in the [Conditional Form with Nodes guide](/docs/guides/business-logic/client-side-biz-logic-nodes).
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/conditional-form/final-2.png)
+
+<ImportButton zip="/library/examples/conditional-form/conditional-form-1.zip" name="Mapbox Example" thumb="/library/examples/conditional-form/final-2.png" />
+
+</div>

library/examples/crud-form.mdx

@@ -0,0 +1,18 @@
+---
+title: CRUD Form
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# CRUD Form
+
+This is an example of a CRUD form. CRUD stands for _Create, Read, Update and Delete_, and the example shows how to do these actions using the Noodl data nodes.
+The example is walked through in detail in the [UI Controls and Data guide](/docs/guides/data/ui-controls-and-data).
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/crud-form/final-crud-thumb.png)
+
+<ImportButton zip="/library/examples/crud-form/final-crud-1.zip" name="Mapbox Example" thumb="/library/examples/crud-form/final-crud-thumb.png" />
+
+</div>

library/examples/javascript-example.mdx

@@ -0,0 +1,18 @@
+---
+title: Javascript Example
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Javascript Example
+
+This example shows how you can mix and match nodes with Javascript in Noodl. It implements a multi select list with a couple of operations on the list, such as batch delete and copy.
+The example is walked through in detail in the [Business logic with Javascript guide](/docs/guides/business-logic/client-side-biz-logic-js).
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/javascript-example/final-1.png)
+
+<ImportButton zip="/library/examples/javascript-example/biz-logic-js.zip" name="Mapbox Example" thumb="/library/examples/javascript-example/final-1.png" />
+
+</div>

library/examples/localization.mdx

@@ -0,0 +1,17 @@
+---
+title: Localization Example (i18next)
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Localization Example (i18next)
+
+This example app shows different usage of the i18next translation module (available [here](/library/modules/i18next)).
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/localization/i18next-screenshot.png)
+
+<ImportButton zip="/library/examples/localization/i18next-example.zip" name="Localization Example" thumb="/library/examples/localization/i18next-screenshot.png"/>
+
+</div>

library/examples/mapbox.mdx

@@ -0,0 +1,17 @@
+---
+title: Mapbox Example
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Mapbox Example
+
+This simple example shows how to use the [Mapbox Module](/library/modules/mapbox) to build a map based application. Note that you will need to create an account (free) on [Mapbox](http://www.mapbox.com) to retrive a token needed by the module.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/mapbox/screen-3.png)
+
+<ImportButton zip="/library/examples/mapbox/markers.zip" name="Mapbox Example" thumb="/library/examples/mapbox/markers-1.png" />
+
+</div>

library/examples/modal-wizard.mdx

@@ -0,0 +1,26 @@
+---
+title: Modal Wizard in Popup
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+import ReactPlayer from 'react-player'
+
+# Modal Wizard in Popup
+
+<ReactPlayer
+    playing
+    autoplay
+    muted
+    loop
+    url="modal-wizard/component-stack-final.mp4"
+/>
+
+This example shows how to use a [Component Stack](/nodes/component-stack/component-stack-node) in combination with a **Popup** to create a simple modal wizard-type of form to create new items in an **Array**. You can follow the guides for creating a [Popup](/docs/guides/navigation/popups) and [using a Component Stack](/docs/guides/navigation/component-stack) to walk through the example in detail.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/modal-wizard/final-1.png)
+
+<ImportButton zip="/library/examples/modal-wizard/component-stack-1.zip" name="Modal Wizard In Popup" thumb="/library/examples/modal-wizard/final-1.png" />
+
+</div>

library/examples/navigation-url-encoding.mdx

@@ -0,0 +1,17 @@
+---
+title: Navigation with URL encoded Parameters
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Navigation with URL encoded parameters example
+
+This example demonstrated how to use **Multiple levels of navigation stacks** and how to **Encode Parameters in the URL** to pass values between pages. Follow the [Navigation Guides](/docs/guides/navigation/basic-navigation) to learn how the example was built.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/navigation-url-encoding/encoding-params-final.gif)
+
+<ImportButton zip="/library/examples/navigation-url-encoding/param-encoding-url.zip" name="Navigation Example" thumb="/library/examples/navigation-url-encoding/show-products-page-4.png"/>
+
+</div>

library/examples/overview.mdx

@@ -0,0 +1,10 @@
+---
+title: Examples Overview
+hide_title: true
+---
+
+import { ProjectListing } from '../../src/blocks/ProjectListing.tsx'
+
+# Examples Overview
+
+<ProjectListing title="All example projects" hasNoLink />

library/examples/recipe-app.mdx

@@ -0,0 +1,19 @@
+---
+title: Recipe App
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Recipe App
+
+This is a simple app for managing recipes built to demonstrate how to work with [Arrays](/nodes/data/array/array-node). It's not connected to a backend but is using the [Static Array](/nodes/data/array/static-array) node. It shows how to add and remove items from an **Array** as well as some simple filtering. It also includes a little bit of **Navigation** logic.
+
+To learn more about how it's built you can follow the [Array Guide](/docs/guides/data/arrays).
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/recipe-app/thumbnail-1.png)
+
+<ImportButton zip="/library/examples/recipe-app/arrays.zip" name="Recipe App" thumb="/library/examples/recipe-app/thumbnail-1.png" />
+
+</div>

library/examples/sign-up.mdx

@@ -0,0 +1,16 @@
+---
+title: Sign up / Sign In Example
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Sign up / Sign In Example
+This app includes a simple Sign Up / Sign In form, including buttons for requesting a new password and validating your email. This [video](https://www.youtube.com/watch?v=DWwE1RzuN2o) walks through the example and shows how to connect to a email service using Zapier.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/sign-up/signup_thumbnail.png)
+
+<ImportButton zip="/library/examples/sign-up/signuptemplate-1-2.zip" name="Task List App" thumb="/library/examples/sign-up/signup_thumbnail.png" cf="/library/examples/sign-up/signup-app-cf.json"/>
+
+</div>

library/examples/star-rating-component.mdx

@@ -0,0 +1,20 @@
+---
+title: Star Rating Component
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Star Rating Component
+
+This component shows how to work with *animations*, *visual states* and *component logic* to build a visually rich star rating component. You can also follow the [Build Along](/docs/build-alongs/star-rating-component) clip if you want to see how it's constructed.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/star-rating-component/star-rating.gif)
+
+<ImportButton zip="/library/examples/star-rating-component/star-rating-1-1.zip" name="Star Rating Component" thumb="/library/examples/star-rating-component/star-rating-thumb.png"/>
+
+</div>
+
+
+

library/examples/suatch.mdx

@@ -0,0 +1,21 @@
+---
+title: Suatch Google Sheets Example
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Suatch Google Sheets Example
+
+This neat little color selection app shows how you can use the [Google Sheets module](/library/modules/gsheets) to retrieve data from a **Google Sheets** and how to filter the data. It also shows how to build a good looking list.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/suatch/suatch-1.png)
+
+<ImportButton
+    zip="/library/examples/suatch/suatch_1-2.zip"
+    name="Suatch App"
+    thumb="/library/examples/suatch/suatch_1-1-thumb.png"
+/>
+
+</div>

library/examples/survey-app.mdx

@@ -0,0 +1,17 @@
+---
+title: Survey App
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Custom Survey App
+
+This app is a simple user survey. It shows how to work with **navigation**, **visual and interaction states** and **custom components**. You can also follow the [Build Along](/docs/build-alongs/survey-app) clip if you want to see how it's constructed.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/survey-app/survey_thumbnail2.png)
+
+<ImportButton zip="/library/examples/survey-app/survey_app_1-4.zip" name="Custom Survey App" thumb="/library/examples/survey-app/survey_thumbnail2.png"/>
+
+</div>

library/examples/task-list-app.mdx

@@ -0,0 +1,16 @@
+---
+title: Task List App
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Task List App
+This is a simple example of a Task List App. It's a great starting point if you want to learn about the basics in Noodl. It shows how to do simple **Layouts** with **UI Controls**. It also uses a simple **Backend** with a **Database** to store the tasks created by the users. There is also a [Build Along](/docs/build-alongs/task-list-app) series that walks through the complete app.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/task-list-app/task_list_thumbnail.png)
+
+<ImportButton zip="/library/examples/task-list-app/task-app-1-2.zip" name="Task List App" thumb="/library/examples/task-list-app/task_list_thumbnail.png" cf="/library/examples/task-list-app/task-app-cf.json"/>
+
+</div>

library/examples/travel-app.mdx

@@ -0,0 +1,17 @@
+---
+title: Travel App
+hide_title: true
+---
+import ImportButton from '/src/components/importbutton'
+
+# Travel App
+
+This app for travelers shows a number of destinations in a card like **horizontal list**. It also includes a simple **Navigation** system.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/travel-app/travel_app_thumbnail.png)
+
+<ImportButton zip="/library/examples/travel-app/travel_app_1-2.zip" name="Travel App" thumb="/library/examples/travel-app/travel_app_thumbnail.png"/>
+
+</div>

library/examples/weavy-integration.mdx

@@ -0,0 +1,117 @@
+---
+title: Weavy Integration
+hide_title: true
+---
+
+import ImportButton from '/src/components/importbutton';
+
+# Using Weavy with Noodl
+
+Weavy is a service that lets you add collaboration features to your app. Chat, feeds and file sharing/editing can be integrated in a fraction of the time it would take to build it from scratch. This template sets up all the user management, authentication and Weavy app registration you need to get started quickly.
+
+<div className="ndl-image-with-background m">
+
+![](/library/examples/weavy-integration/weavy-thumb.png)
+
+<ImportButton
+  zip="/library/examples/weavy-integration/weavy-template-2.zip"
+  cf="/library/examples/weavy-integration/weavy-template-cf.json"
+  name="Weavy Template"
+  thumb="/library/examples/weavy-integration/weavy-thumb.png"
+/>
+
+</div>
+
+## Prerequisites
+
+In order to connect to Weavy, you need a Weavy account with an API key and an Environment URL. If you don't have that already [here's a handy guide](https://www.weavy.com/docs/learn/weavy-account).
+
+## Setting up the backend
+
+When you have the API key and Environment URL you need to add them to the **Config** paramters in the Noodl Cloud Service. If you haven't already imported the project template in the thumbnail above, now is the perfect time to do it.
+
+With your newly created project open, click the **Cloud Services** tab in the sidebar, and find the Weavy related cloud service that has been created.
+
+<div className="ndl-image-with-background ">
+
+![](/library/examples/weavy-integration/weavy-cloud-service.png)
+
+</div>
+
+Make sure to click the **Use in editor** button if it isn't already in use. Then click **Open dashboard**.
+
+Navigate to the **Config** tab in the dashboard. Click the **Create a parameter** button to create two parameters named `WeavyAPIKey` and `WeavyEnvUrl`.
+
+<div className="ndl-image-with-background l">
+
+![](/library/examples/weavy-integration/weavy-api.png)
+
+![](/library/examples/weavy-integration/weavy-url.png)
+
+</div>
+
+These are case sensitive, so make sure to double check that. Also take an extra look at the `Type` and `Requires master key`.
+
+When this is done, you should have everything you need to get going.
+
+## The template structure
+
+The template has two routers, one for the pages that can be accessed by logged out users, and one for the pages that can be accessed when a user has logged in.
+
+<div className="ndl-image-with-background l">
+
+![](/library/examples/weavy-integration/weavy-graph.png)
+
+</div>
+
+To be able to use the Weavy apps a user needs to have an account and be logged in. For this there are two pages, called **Signup** and **Login**. You can find all the pages in the **Components Panel**.
+
+<div className="ndl-image-with-background">
+
+![](/library/examples/weavy-integration/components-panel.png)
+
+</div>
+
+## Creating a Weavy app
+
+There are three unstyled example pages when logged in. **Chat**, **Files** and **Posts**, that use the respective Weavy apps **Chat**, **Files** and **Posts**. They all contain a basic page layout, but most importantly they feature the **Weavy App** component.
+
+<div className="ndl-image-with-background l">
+
+![](/library/examples/weavy-integration/weavy-app.png)
+
+</div>
+
+The **Weavy App** component has two purposes - registering a Weavy app in the Weavy environment (if it hasn't already been registered), and rendering it. It has 3 settings out of the box:
+
+- **UID**: This is the unique ID of the app you want to register.
+- **Type**: The type of Weavy app you want to use.
+- **Height**: The height you want the Weavy app to render in.
+
+You can pick any string for the UID, but it cannot have any spaces and must contain at least one non-digit character.
+
+:::info
+
+If you created a **Weavy App** with a new UID and it doesn't show up on the page, it might be because the Weavy app has not been regisetered yet. This will be the case the first time you run the template app as well.<br/><br/>
+
+To solve this, try reloading the page that the **Weavy App** component resides in. This will send a request to the Weavy server to register a new app with your new UID.<br/><br/>
+
+The app registration only has to be done once, so this issue will only show up during development.
+
+:::
+
+If you change the **Type** of your Weavy App you will also have to give it a new **UID** for the registration to work properly.
+
+## Modifying the _Weavy App_ component
+
+While you can use the **Weavy App** component as is, you will probably want to modify it and make it your own. The best way to do this is to duplicate the component and edit the **Script** node inside of it.
+
+This way you can have multiple Weavy apps working differently, and always have a clean backup of the integration.
+
+<div className="ndl-image-with-background">
+
+![](/library/examples/weavy-integration/duplicate-node.png)
+
+</div>
+
+You can read more about customizing Weavy [here](https://www.weavy.com/docs/reference/uikit-js).