Merge pull request #474 from FabienArcellier/dev

docs: improve documentation to use writer instead of streamsync

docs/components/component_page.mdx.tpl

@@ -71,4 +71,4 @@ A function, in this example `handle_event`, should be implemented in your code t
 
 ## Reference
 
-* <a href="https://github.com/streamsync-cloud/streamsync/blob/dev/src/ui/{{fileRef}}" target="_blank" >Explore this component's source code on GitHub</a>
+* <a href="https://github.com/writer/writer-framework/blob/dev/src/ui/{{fileRef}}" target="_blank" >Explore this component's source code on GitHub</a>

docs/framework/authentication.mdx

@@ -189,7 +189,7 @@ The default authentication error page look like this:
 
 <img src="/framework/images/auth_unauthorized_default.png" />
 
-_streamsync.auth.Unauthorized_
+_writer.auth.Unauthorized_
 
 | Parameter   | Description            |
 | ----------- | ---------------------- |

docs/framework/backend-driven-ui.mdx

@@ -98,7 +98,7 @@ with ui.find(container):
 
 ### Component methods
 
-UI manager contains methods linked to each front-end component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://www.streamsync.cloud/component-list.html#text).
+UI manager contains methods linked to each front-end component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://dev.writer.com/components/text).
 
 This method expects `content: dict` as first argument, which enables you to set the field properties of the component, through corresponding keys:
 ```python
@@ -147,7 +147,7 @@ In addition to `content`, a set of fields which is specific to the component typ
     </Note>
 - **`position: int`**: Determines the display order of the component in relation to its siblings.  
     Position `0` means that the component is the first child of its parent.  
-    Position `-2` is used for components – such as [sidebars](https://www.streamsync.cloud/component-list.html#sidebar) – that have a specific reserved position not related to their siblings.  
+    Position `-2` is used for components – such as [sidebars](https://dev.writer.com/components/sidebar) – that have a specific reserved position not related to their siblings.
     ```python
     ui.Text(
         {"text": "Hello Parent, I'm your first child!"}, 
@@ -170,7 +170,7 @@ In addition to `content`, a set of fields which is specific to the component typ
 
     ui.Text({"text": "My visibility depends on the @{my_var}!"}, visible="my_var")
     ```
-- **`handlers: dict[str, callable]`**: Attaches [event handlers](https://www.streamsync.cloud/event-handlers.html) to the component. Each dictionary key represents an event, and its value is the corresponding handler.:
+- **`handlers: dict[str, callable]`**: Attaches [event handlers](https://dev.writer.com/framework/event-handlersl) to the component. Each dictionary key represents an event, and its value is the corresponding handler.:
     ```python
     def increment(state):
         state["counter"] += 1
@@ -190,7 +190,7 @@ In addition to `content`, a set of fields which is specific to the component typ
     # Both approaches yield the same outcome.
     ```
     *A component can be linked to multiple event handlers.*
-- **`binding: dict[str, str]`**: Links the component to a state variable via [binding](https://www.streamsync.cloud/builder-basics.html#binding). The dictionary key is the bindable event, and the value is the state variable's name:
+- **`binding: dict[str, str]`**: Links the component to a state variable via [binding](https://dev.writer.com/framework/builder-basics#binding). The dictionary key is the bindable event, and the value is the state variable's name:
     ```python
     initial_state = wf.init_state({
         "header_text": "Default Text"
@@ -269,4 +269,4 @@ with ui.refresh_with(id="cmc-column-1"):
         {"text": 'To Hello World, or not to Hello World?'}, 
         id="hello-world-new"
         )
-```
+```

docs/framework/custom-components.mdx

@@ -73,7 +73,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { FieldType } from "../streamsyncTypes";
+import { FieldType } from "../writerTypes";
 import injectionKeys from "../injectionKeys";
 import { inject } from "vue";
 
@@ -100,7 +100,7 @@ The code above will make Bubble Message available in the Builder.
 
 <Steps>
   <Step title="Clone the Framework Repository">
-    To get started, clone the [Framework repository](https://github.com/streamsync-cloud/streamsync) from GitHub.
+    To get started, clone the [Framework repository](https://github.com/writer/writer-framework) from GitHub.
   </Step>
   <Step title="Set Up the Development Environment">
     To develop custom templates in a developer-friendly way, ensure you have a front-end development server with instant reload capabilities. The front-end code for Framework is located in the `ui` folder. With Node and npm installed on your system, run `npm install` to install dependencies. Then, start the server with support for custom component templates using `npm run custom.dev`.
@@ -165,4 +165,4 @@ Execute `npm run custom.build`, this will generate the output `.js` and `.css` f
 npm run custom.build
 ```
 
-Collect the files from `ui/custom_components_dist` and pack them in a folder such as `my_custom_bubbles`. The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Framework project. It'll be automatically detected during server startup.
+Collect the files from `ui/custom_components_dist` and pack them in a folder such as `my_custom_bubbles`. The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Framework project. It'll be automatically detected during server startup.

docs/framework/deploy-with-docker.mdx

@@ -47,7 +47,7 @@ If you're a Docker expert, feel free to work on your own `Dockerfile`. Framework
 To build the image, use `docker build . -t ` followed by an image tag, which you're free to choose and will locally identify your image.
 
 ```sh
-docker build . -t my_streamsync_app
+docker build . -t my_writer_app
 ```
 
 <Warning> 
@@ -67,16 +67,16 @@ You can push your image using the following commands.
 docker login
 
 # Push the image
-# Replace "my_streamsync_app" for the tag you've previously chosen
+# Replace "my_writer_app" for the tag you've previously chosen
 # Replace "my_user" for your user on Docker Hub
-docker tag my_streamsync_app:latest my_user/my_streamsync_app:latest
-docker push my_user/my_streamsync_app:latest
+docker tag my_writer_app:latest my_user/my_writer_app:latest
+docker push my_user/my_writer_app:latest
 ```
 
 If your image is public, anyone can now run the following command and start the app. It's important to bind the port to a port in the host machine. The command below binds port 8080 in the Docker image to port 8080 in the host.
 
 ```sh
-docker run -p 8080:8080 my_user/my_streamsync_app
+docker run -p 8080:8080 my_user/my_writer_app
 ```
 
 Go on your browser to [http://localhost:8080](http://localhost:8080) to check everything is working as expected.

docs/framework/event-handlers.mdx

@@ -95,7 +95,7 @@ Note that for this "chain" to work, you need to import the final module in the s
 
 ## Mutating state
 
-In most cases, event handlers will modify the application state. State can be accessed by including the `state` argument in the handler, which will provide you with a `StreamsyncState` object for the session that invoked the handler.
+In most cases, event handlers will modify the application state. State can be accessed by including the `state` argument in the handler, which will provide you with a `WriterState` object for the session that invoked the handler.
 
 Elements of state can be reached using the square brackets syntax `state["my_element"]`. Accessing keys that don't exist will return `None`.
 

docs/framework/frontend-scripts.mdx

@@ -88,7 +88,7 @@ initial_state.import_script("lodash", "https://cdnjs.cloudflare.com/ajax/libs/lo
 ## Frontend core
 
 <Warning> 
-Effectively using Framework's core can be challenging and will likely entail reading its [source code](https://github.com/streamsync-cloud/streamsync/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
+Effectively using Framework's core can be challenging and will likely entail reading its [source code](https://github.com/writer/writer-framework/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
 </Warning>
 
 You can access Framework's front-end core via `globalThis.core`, unlocking all sorts of functionality. Notably, you can use `getUserState()` to get values from state.

docs/framework/quickstart-tutorial.mdx

@@ -6,7 +6,7 @@ In this tutorial, we'll guide you through creating a logistic regression visuali
 First, make sure you have Framework installed. You can install it via pip:
 
 ```bash
-pip install "streamsync[ds]"
+pip install "writer"
 ```
 
 Now, let's get started with creating our logistic regression visualisation tool. We'll break down the process into the following steps:
@@ -24,7 +24,7 @@ So, without further ado, let's jump into it.
 To create our project, we will use the following commands:
 
 ```bash
-streamsync create logistic_regression
+writer create logistic_regression
 cd logistic_regression
 ```
 Commands will create basic template of app project with initial file structure.
@@ -44,7 +44,7 @@ pip install -r requirements.txt
 Once this is done, we can finally run the Framework editor using the command:
 
 ```bash
-streamsync edit .
+writer edit .
 ```
 
 This will run our Framework instance. Runtime logs can be observed in the terminal, and the app is available at http://localhost:3006.

docs/framework/state-schema.mdx

@@ -10,7 +10,7 @@ scenarios, while also allowing your IDE and toolchains to provide autocomplete a
 ```python
 import writer as wf
 
-class AppSchema(wf.StreamsyncState):
+class AppSchema(wf.WriterState):
     counter: int
 
 initial_state = wf.init_state({
@@ -50,7 +50,7 @@ Schema composition allows you to model a complex Application state.
 class MyappSchema(wf.State):
     title: str
 
-class AppSchema(wf.StreamsyncState):
+class AppSchema(wf.WriterState):
     my_app: MyappSchema
     counter: int
 
@@ -70,7 +70,7 @@ A schema allows you to specify that an attribute which contains a dictionary
 must be treated as a dictionary, rather than as a group of state.
 
 ```python
-class AppSchema(wf.StreamsyncState):
+class AppSchema(wf.WriterState):
     vegas_graph: dict
 
 # Without schema, this handler is execute only once
@@ -112,7 +112,7 @@ Here is the code, can you spot the error ?
 ```python
 import writer as wf
 
-class AppSchema(wf.StreamsyncState):
+class AppSchema(wf.WriterState):
     counter: int
 
 def increment(state: AppSchema):

docs/framework/testing.mdx

@@ -12,12 +12,12 @@ To get started, import your app's entry point, `main`. This will initialise stat
 
 ### Creating states
 
-For testing purposes, you can create your own state using the `StreamsyncState` class in `writer.core`. Pass a dictionary when constructing it.
+For testing purposes, you can create your own state using the `WriterState` class in `writer.core`. Pass a dictionary when constructing it.
 
 ```py
-from writer.core import StreamsyncState
+from writer.core import WriterState
 
-artificial_state = StreamsyncState({
+artificial_state = WriterState({
     "a": 3,
     "b": 6
 })