Merge branch 'dev' into feat-autoarrange-blocks

apps/hello/main.py

@@ -75,7 +75,7 @@ def _get_editable_df():
         'object': [{"updatedAt": None}, {"updatedAt": None}, {"updatedAt": None}],
         'text': ['one', 'two', 'three'],
     })
-    return wf.EditableDataframe(df)
+    return wf.EditableDataFrame(df)
 
 def _get_highlighted_members():
     sample_df = _get_main_df().sample(3).set_index("name", drop=False)

docs/framework/builder-basics.mdx

@@ -10,13 +10,13 @@ You can switch modes between _User Interface_, _Code_ and _Preview_ using the bu
 
 ### User Interface
 
-![Framework Builder - Mode: User Interface](/framework/images/builder-basics.ui.png#framework)
+![Framework Builder - Mode: User Interface](/framework/images/builder-basics.ui.png)
 
 The default mode. Allows you to focus on building the interface.
 
 ### Code
 
-![Framework Builder - Mode: Code](/framework/images/builder-basics.code.png#framework)
+![Framework Builder - Mode: Code](/framework/images/builder-basics.code.png)
 
 This mode displays the **code editor** and the **application log**, while still allowing you to access the _Component Tree_ and _Settings_.
 
@@ -35,7 +35,7 @@ This mode displays the **code editor** and the **application log**, while still
 
 ### Preview
 
-![Framework Builder - Mode: Preview](/framework/images/builder-basics.preview.png#framework)
+![Framework Builder - Mode: Preview](/framework/images/builder-basics.preview.png)
 
 The _Preview_ mode shows the application exactly like the user will see it. It allocates the whole width of the viewport to the app.
 

docs/framework/dataframe.mdx

@@ -9,7 +9,7 @@ it offers components as `dataframe` to manipulate dataframes. These components a
 |--------------------|---------------------------------------|
 | `pandas.DataFrame` | x                                     |
 | `polar.DataFrame`  | x                                     |
-| `list of records`  | x (with `EditableDataframe`)          |
+| `list of records`  | x (with `EditableDataFrame`)          |
 
 ## Use a dataframe
 
@@ -26,7 +26,7 @@ wf.init_state({
 
 ## Prepare a dataframe for editing
 
-**writer provides `EditableDataframe` as a helper to facilitate manipulation**. it makes it easier to write event handlers such as adding a line,
+**writer provides `EditableDataFrame` as a helper to facilitate manipulation**. it makes it easier to write event handlers such as adding a line,
 deleting it or modifying a value, etc...
 
 ```python
@@ -36,7 +36,7 @@ import writer as wf
 df = pandas.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 
 wf.init_state({
-	'mydf': wf.EditableDataframe(df)
+	'mydf': wf.EditableDataFrame(df)
 })
 ```
 
@@ -50,7 +50,7 @@ import writer as wf
 
 df = pandas.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 wf.init_state({
-	'mydf': wf.EditableDataframe(df)
+	'mydf': wf.EditableDataFrame(df)
 })
 
 # Subscribe this event handler to the `wf-dataframe-add` event
@@ -76,9 +76,9 @@ def on_record_action(state, payload):
 		state['record'] = state['df'].record(record_index) # dict representation of record
 ```
 
-### Datastructures supported by `EditableDataframe`
+### Datastructures supported by `EditableDataFrame`
 
-`EditableDataframe` can be used with a panda dataframe, a polar dataframe and list of records.
+`EditableDataFrame` can be used with a panda dataframe, a polar dataframe and list of records.
 
 ```python
 import pandas
@@ -91,8 +91,8 @@ polars_df = polars.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
 list_of_records = [{'a': 1, 'b': 4}, {'a': 2, 'b': 5}, {'a': 3, 'b': 6}]
 
 wf.init_state({
-	'mypandas': wf.EditableDataframe(panda_df),
-	'mypolars': wf.EditableDataframe(polars_df),
-	'mylistofrecords': wf.EditableDataframe(list_of_records)
+	'mypandas': wf.EditableDataFrame(panda_df),
+	'mypolars': wf.EditableDataFrame(polars_df),
+	'mylistofrecords': wf.EditableDataFrame(list_of_records)
 })
 ```

docs/framework/introduction.mdx

@@ -4,7 +4,7 @@ title: "Introduction"
 
 The Writer Framework lets you build feature-rich apps by using a drag-and-drop visual editor called **the Builder** and writing the back-end code in Python. It's fast and flexible, with clean, easy-to-test syntax. It provides separation of concerns between UI and business logic, enabling more complex apps.
 
-![Framework Builder screenshot](/framework/public/builder.png#framework) 
+![Framework Builder screenshot](/framework/public/builder.png) 
 
 Build AI apps with the Writer Framework when:
 

pyproject.toml

@@ -49,7 +49,6 @@ websockets = ">= 12, < 13"
 writer-sdk = ">= 1.5.0, < 2"
 python-multipart = ">=0.0.7, < 1"
 
-
 [tool.poetry.group.build]
 optional = true
 
@@ -68,13 +67,20 @@ pytest-asyncio = ">= 0.23.4, < 1"
 ruff = "^0.3.4"
 types-requests = "^2.31.0.20240406"
 
+[tool.poetry.group.redis]
+optional = true
+
+[tool.poetry.group.redis.dependencies]
+redis = "^5.2.1"
 
 [tool.poetry.group.dev.dependencies]
 types-python-dateutil = "^2.9.0.20240316"
 
 [tool.poetry.scripts]
 writer = 'writer.command_line:main'
 
+[tool.poetry.extras]
+redis = ["redis"]
 
 [tool.ruff]
 exclude = [

src/ui/src/builder/BuilderApp.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderApp" tabindex="-1">
+	<div class="BuilderApp" tabindex="-1" :style="WDS_CSS_PROPERTIES">
 		<div
 			class="mainGrid"
 			:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
@@ -81,6 +81,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
@@ -270,34 +271,33 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #3be19b;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #333333;
-	--builderHeaderBackgroundHoleColor: #000000;
+	--builderBackgroundColor: var(--wdsColorWhite);
+	--builderAccentColor: var(--wdsColorBlue5);
+	--builderSuccessColor: var(--wdsColorGreen5);
+	--builderErrorColor: var(--wdsColorOrange5);
+	--builderHeaderBackgroundColor: var(--wdsColorGray6);
+	--builderHeaderBackgroundHoleColor: var(--wdsColorBlack);
 	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
 	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
 	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: #e4e7ed;
-	--builderSubtleSeparatorColor: #f5f5f9;
-	--builderIntenseSeparatorColor: #d2d4d7;
-	--builderSelectedColor: #e4e9ff;
-	--builderMatchingColor: #f8dccc;
-	--builderIntenseSelectedColor: #0094d1;
+	--builderSeparatorColor: var(--wdsColorGray2);
+	--builderSubtleSeparatorColor: var(--wdsColorGray1);
+	--builderIntenseSeparatorColor: var(--wdsColorGray3);
+	--builderSelectedColor: var(--wdsColorBlue2);
+	--builderMatchingColor: var(--wdsColorOrange2);
+	--builderIntenseSelectedColor: var(--wdsColorBlue4);
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
+	--builderSubtleHighlightColorSolid: var(--wdsColorGray1);
 	--builderSidebarWidth: 265px;
 	--builderSettingsWidth: 450px;
-	--builderActionOngoingColor: #333333;
+	--builderActionOngoingColor: var(--wdsColorGray6);
 	--builderTopBarHeight: 48px;
 	--builderWarningTextColor: white;
-	--builderWarningColor: #ff3d00;
+	--builderWarningColor: var(--wdsColorOrange5);
 	--builderPanelSwitcherHeight: 48px;
 	--builderPanelSwitcherExpandedHeight: calc(50% - 24px);
 
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 	--buttonTextColor: white;
 	--accentColor: var(--builderAccentColor);
 	--primaryTextColor: var(--builderPrimaryTextColor);

src/ui/src/builder/BuilderEmbeddedCodeEditor.vue

@@ -59,6 +59,7 @@ onMounted(() => {
 	editor = monaco.editor.create(editorContainerEl.value, {
 		value: modelValue.value,
 		language: props.language,
+		readOnly: props.disabled,
 		...VARIANTS_SETTINGS[props.variant],
 	});
 	editor.getModel().onDidChangeContent(() => {
@@ -84,11 +85,11 @@ onUnmounted(() => {
 .BuilderEmbeddedCodeEditor {
 	height: 100%;
 	width: 100%;
-	min-height: 200px;
+	min-height: 100px;
 }
 
 .editorContainer {
-	min-height: 200px;
+	min-height: 100px;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;

src/ui/src/builder/BuilderHeader.vue

@@ -142,7 +142,7 @@ const customHandlerModalCloseAction: ModalAction = {
 .panelToggler:hover {
 	font-size: 12px;
 	--buttonColor: black;
-	--builderSeparatorColor: #303030;
+	--builderSeparatorColor: var(--wdsColorGray6);
 	--buttonTextColor: white;
 }
 

src/ui/src/builder/BuilderModal.vue

@@ -1,7 +1,12 @@
 <!-- eslint-disable @typescript-eslint/ban-types -->
 <template>
 	<Teleport to="#modal">
-		<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
+		<div
+			class="BuilderModal"
+			:class="{ 'BuilderModal--overflow': allowOverflow }"
+			tabindex="-1"
+			@keydown="handleKeydown"
+		>
 			<div class="main">
 				<div class="titleContainer">
 					<i v-if="icon" class="material-symbols-outlined">{{
@@ -38,19 +43,24 @@
 
 <script setup lang="ts">
 import WdsButton from "@/wds/WdsButton.vue";
-import { toRefs } from "vue";
+import { PropType, toRefs } from "vue";
 
 export type ModalAction = {
 	desc: string;
 	fn: (..._args: unknown[]) => unknown;
 };
 
-const props = defineProps<{
-	modalTitle: string;
-	icon?: string;
-	closeAction: ModalAction;
-	menuActions?: ModalAction[];
-}>();
+const props = defineProps({
+	modalTitle: { type: String, required: true },
+	icon: { type: String, required: false, default: undefined },
+	closeAction: { type: Object as PropType<ModalAction>, required: true },
+	menuActions: {
+		type: Array as PropType<ModalAction[]>,
+		required: false,
+		default: undefined,
+	},
+	allowOverflow: { type: Boolean, required: false },
+});
 
 const { modalTitle, icon, closeAction, menuActions } = toRefs(props);
 
@@ -82,6 +92,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
 }
 
+.BuilderModal--overflow .main {
+	overflow: unset;
+}
+
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
 	padding: 8px 8px 8px 16px;
@@ -100,6 +114,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	max-height: 60vh;
 	overflow: auto;
 }
+.BuilderModal--overflow .slotContainer {
+	overflow: unset;
+}
 
 .actionContainer {
 	border-top: 1px solid var(--builderSubtleSeparatorColor);

src/ui/src/builder/BuilderSelect.vue

@@ -1,9 +1,5 @@
 <template>
-	<div
-		ref="trigger"
-		class="BuilderSelect"
-		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
-	>
+	<div ref="trigger" class="BuilderSelect">
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
@@ -57,14 +53,6 @@ const props = defineProps({
 	defaultIcon: { type: String, required: false, default: undefined },
 	hideIcons: { type: Boolean, required: false },
 	enableSearch: { type: Boolean, required: false },
-	/**
-	 * Customize the appareance of the selector.
-	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
-	 */
-	variant: {
-		type: String as PropType<"normal" | "embedded">,
-		default: "normal",
-	},
 });
 
 const currentValue = defineModel({ type: String, required: false });
@@ -77,7 +65,7 @@ const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	dropdown,
 	{
 		placement: "bottom",
-		middleware: [autoPlacement()],
+		middleware: [autoPlacement({ allowedPlacements: ["bottom", "top"] })],
 	},
 );
 
@@ -125,26 +113,28 @@ function onSelect(value: string) {
 
 .BuilderSelect__trigger {
 	display: flex;
-	height: 32px;
+	align-items: center;
+	gap: 8px;
+
+	height: 40px;
 	width: 100%;
+	padding: 8.5px 12px 8.5px 12px;
 
-	gap: 8px;
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
 
-	align-items: center;
-	padding: 8px;
 	font-weight: 400;
-	color: #3b3b3b;
-	background: #ffffff;
-}
+	font-size: 0.875rem;
 
-.BuilderSelect__trigger {
-	/* reset button */
-	border: none;
-	cursor: pointer;
+	color: var(--primaryTextColor);
+	background: transparent;
 
-	font-size: 0.75rem;
-	display: flex;
-	align-items: center;
+	cursor: pointer;
+}
+.BuilderSelect__trigger:focus {
+	border: 1px solid var(--softenedAccentColor);
+	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+	outline: none;
 }
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
@@ -159,12 +149,6 @@ function onSelect(value: string) {
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
-	color: #000000e6;
 	cursor: pointer;
 }
-
-.BuilderSelect--embedded .BuilderSelect__trigger {
-	padding: 0;
-	height: 18px;
-}
 </style>