@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/widgets/primitiveList/PrimitiveListWidgetPropertySection.types.ts

@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *****************************************************************************/
+import { Selection, GQLMessage } from '@eclipse-sirius/sirius-components-core';
+import { GQLListItem, GQLListStyle, GQLWidget } from '@eclipse-sirius/sirius-components-forms';
+
+export interface PrimitiveListStyleProps {
+  color: string | null;
+  fontSize: number | null;
+  italic: boolean | null;
+  bold: boolean | null;
+  underline: boolean | null;
+  strikeThrough: boolean | null;
+}
+
+export interface PrimitiveListPropertySectionProps {
+  editingContextId: string;
+  formId: string;
+  widget: EditableGQLList;
+  readOnly: boolean;
+  setSelection: (selection: Selection) => void;
+}
+
+export interface EditableGQLList extends GQLWidget {
+  canAdd: boolean;
+  canReorder: boolean;
+  hasCandidates: boolean;
+  items: GQLActionableListItem[];
+  style: GQLListStyle;
+}
+
+export interface GQLActionableListItem extends GQLListItem {
+  hasAction: Boolean;
+  actionIconURL: string;
+}
+
+export interface GQLDeletePrimitiveListItemMutationData {
+  deletePrimitiveListItem: GQLDeletePrimitiveListItemPayload;
+}
+
+export interface GQLAddPrimitiveListItemMutationData {
+  addPrimitiveListItem: GQLDeletePrimitiveListItemPayload;
+}
+
+export interface GQLDeletePrimitiveListItemPayload {
+  __typename: string;
+}
+
+export interface GQLAddPrimitiveListItemPayload {
+  __typename: string;
+}
+
+export interface GQLErrorPayload extends GQLDeletePrimitiveListItemPayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLSuccessPayload extends GQLDeletePrimitiveListItemPayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLErrorPayload extends GQLAddPrimitiveListItemPayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLSuccessPayload extends GQLAddPrimitiveListItemPayload {
+  messages: GQLMessage[];
+}
+export interface GQLReorderPrimitiveListItemsMutationData {
+  reorderPrimitiveListItems: GQLReorderPrimitiveListItemsPayload;
+}
+
+export interface GQLReorderPrimitiveListItemsPayload {
+  __typename: string;
+}
+
+export interface GQLReorderPrimitiveListItemsMutationVariables {
+  input: GQLReorderPrimitiveListItemsInput;
+}
+
+export interface GQLReorderPrimitiveListItemsInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  listId: string;
+  itemId: string;
+  fromIndex: number;
+  toIndex: number;
+}
+
+export interface GQLActionPrimitiveListItemMutationData {
+  actionPrimitiveListItem: GQLActionPrimitiveListItemPayload;
+}
+
+export interface GQLActionPrimitiveListItemPayload {
+  __typename: string;
+}
+
+export interface GQLActionPrimitiveListItemMutationVariables {
+  input: GQLActionPrimitiveListItemInput;
+}
+
+export interface GQLActionPrimitiveListItemInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  listId: string;
+  itemId: string;
+}
+
+export interface GQLPrimitiveListCandidate {
+  value: string;
+  label: string;
+}
+
+export interface PrimitiveListAutocompleteState {
+  open: boolean;
+  candidates: GQLPrimitiveListCandidate[] | null;
+}
+
+export interface GQLGetPrimitiveListCandidatesQueryData {
+  viewer: GQLViewer;
+}
+
+export interface GQLViewer {
+  editingContext: GQLEditingContext;
+}
+
+export interface GQLEditingContext {
+  representation: GQLRepresentationMetadata;
+}
+
+export interface GQLRepresentationMetadata {
+  id: string;
+  label: string;
+  kind: string;
+  description: GQLRepresentationDescription;
+}
+
+export interface GQLRepresentationDescription {
+  id: string;
+  __typename: string;
+}
+
+export interface GQLFormDescription extends GQLRepresentationDescription {
+  primitiveListCandidates: GQLPrimitiveListCandidate[];
+}
+
+export interface GQLGetPrimitiveListCandidatesQueryVariables {
+  editingContextId: string;
+  representationId: string;
+  primitiveListId: string;
+}

package/papyrus-web-components/src/widgets/primitiveRadio/PrimitiveRadioFragment.type.ts

@@ -0,0 +1,49 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import { GQLWidget } from '@eclipse-sirius/sirius-components-forms';
+import { GQLMessage } from '@eclipse-sirius/sirius-components-core';
+
+export interface GQLPrimitiveRadio extends GQLWidget {
+  candidateList: Array<string> | null;
+  candidateValue: string;
+}
+
+export interface GQLNewValueData {
+  newValue: GQLNewValuePayload;
+}
+
+export interface GQLNewValueVariables {
+  input: GQLNewValueInput;
+}
+
+export interface GQLNewValueInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  primitiveRadioId: string;
+  value: string;
+}
+
+export interface GQLNewValuePayload {
+  __typename: string;
+}
+
+export interface GQLSuccessPayload extends GQLNewValuePayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLErrorPayload extends GQLNewValuePayload {
+  messages: GQLMessage[];
+}

package/papyrus-web-components/src/widgets/primitiveRadio/PrimitiveRadioIcon.tsx

@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export const PrimitiveRadioIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      width="512.000000pt"
+      height="512.000000pt"
+      viewBox="0 0 512.000000 512.000000"
+      aria-labelledby="title"
+      role="img"
+      {...props}>
+      <g>
+        <title>Primitive radio widget icon</title>
+        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#333333" stroke="none">
+          <path d="M2330 5110 c-199 -18 -464 -78 -649 -146 -237 -88 -529 -254 -727 -414 -101 -82 -302 -283 -384 -384 -160 -198 -326 -490 -414 -727 -124 -336 -178 -742 -146 -1097 19 -216 76 -470 146 -661 88 -237 254 -529 414 -727 82 -101 283 -302 384 -384 198 -160 490 -326 727 -414 336 -124 742 -178 1097 -146 216 19 470 76 661 146 237 88 529 254 727 414 101 82 302 283 384 384 160 198 326 490 414 727 70 191 127 445 146 661 32 355 -22 761 -146 1097 -88 237 -254 529 -414 727 -82 101 -283 302 -384 384 -198 160 -490 326 -727 414 -337 124 -747 178 -1109 146z m405 -510 c486 -46 924 -251 1269 -596 675 -676 796 -1699 298 -2514 -157 -257 -415 -515 -672 -672 -544 -333 -1188 -397 -1778 -176 -279 104 -523 262 -736 474 -625 626 -781 1564 -390 2347 378 757 1185 1214 2009 1137z" />
+          <path d="M2375 3825 c-680 -95 -1155 -702 -1087 -1388 62 -625 524 -1087 1149 -1149 562 -55 1089 257 1303 773 130 311 130 687 0 998 -222 537 -778 848 -1365 766z" />
+        </g>
+      </g>
+    </SvgIcon>
+  );
+};

package/papyrus-web-components/src/widgets/primitiveRadio/PrimitiveRadioPreview.tsx

@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import { useSelection } from '@eclipse-sirius/sirius-components-core';
+import { WidgetProps } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from 'tss-react/mui';
+import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined';
+import { useEffect, useRef, useState } from 'react';
+import { GQLPrimitiveRadio } from './PrimitiveRadioFragment.type';
+
+const useStyles = makeStyles()((theme) => ({
+  style: {
+    color: theme.palette.secondary.main,
+  },
+  selected: {
+    color: theme.palette.selected,
+  },
+  propertySectionLabel: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+}));
+
+type PropertySectionComponentProps = WidgetProps<GQLPrimitiveRadio>;
+
+export const PrimitiveRadioPreview = ({ widget }: PropertySectionComponentProps) => {
+  const { classes } = useStyles();
+  const [selected, setSelected] = useState<boolean>(false);
+
+  const { selection } = useSelection();
+
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && selection.entries.find((entry) => entry.id === widget.id)) {
+      ref.current.focus();
+      setSelected(true);
+    } else {
+      setSelected(false);
+    }
+  }, [selection, widget]);
+
+  const candidateList = ['option1', 'option2', 'option3'];
+
+  return (
+    <div>
+      <div className={classes.propertySectionLabel}>
+        <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+          {widget.label}
+        </Typography>
+        {widget.hasHelpText && <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} />}
+      </div>
+      <FormControl component="fieldset" style={{ marginLeft: '16px' }}>
+        <RadioGroup
+          ref={ref}
+          row
+          aria-label="primitive radio"
+          name="primitive-radio"
+          value={candidateList.at(1)}
+          data-testid="primitive-radio-candidates">
+          {candidateList.map((candidate) => (
+            <FormControlLabel
+              color="primary"
+              key={candidate}
+              value={candidate}
+              control={<Radio color="primary" />}
+              label={candidate}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
+};

package/papyrus-web-components/src/widgets/primitiveRadio/PrimitiveRadioSection.tsx

@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import { gql, useMutation } from '@apollo/client';
+import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import { PropertySectionComponentProps, PropertySectionLabel } from '@eclipse-sirius/sirius-components-forms';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import { ChangeEvent, useEffect } from 'react';
+import {
+  GQLErrorPayload,
+  GQLNewValueData,
+  GQLNewValueInput,
+  GQLNewValuePayload,
+  GQLNewValueVariables,
+  GQLPrimitiveRadio,
+  GQLSuccessPayload,
+} from './PrimitiveRadioFragment.type';
+
+export const newValueMutation = gql`
+  mutation newValue($input: NewValueInput!) {
+    newValue(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+export const PrimitiveRadioSection = ({
+  editingContextId,
+  formId,
+  widget,
+  readOnly,
+}: PropertySectionComponentProps<GQLPrimitiveRadio>) => {
+  const { addErrorMessage, addMessages } = useMultiToast();
+
+  const [newValueApi, { loading: newValueLoading, data: newValueData, error: newValueError }] = useMutation<
+    GQLNewValueData,
+    GQLNewValueVariables
+  >(newValueMutation);
+
+  const isErrorPayload = (payload: GQLNewValuePayload): payload is GQLErrorPayload =>
+    payload.__typename === 'ErrorPayload';
+  const isSuccessPayload = (payload: GQLNewValuePayload): payload is GQLSuccessPayload =>
+    payload.__typename === 'SuccessPayload';
+
+  useEffect(() => {
+    if (!newValueLoading) {
+      if (newValueError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (newValueData) {
+        const { newValue } = newValueData;
+        if (isErrorPayload(newValue) || isSuccessPayload(newValue)) {
+          addMessages(newValue.messages);
+        }
+      }
+    }
+  }, [newValueLoading, newValueError, newValueData]);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>, _value: string): void {
+    const input: GQLNewValueInput = {
+      id: crypto.randomUUID(),
+      editingContextId,
+      representationId: formId,
+      primitiveRadioId: widget.id,
+      value: event.target.value,
+    };
+    const variables: GQLNewValueVariables = { input };
+    newValueApi({ variables });
+  }
+
+  return (
+    <div data-testid="primitive-radio-widget">
+      <PropertySectionLabel
+        editingContextId={editingContextId}
+        formId={formId}
+        widget={widget}
+        data-testid={widget.label}
+      />
+      <FormControl component="fieldset" style={{ marginLeft: '16px' }}>
+        <RadioGroup
+          row
+          aria-label="primitive radio"
+          name="primitive-radio"
+          value={widget.candidateValue}
+          onChange={handleChange}
+          data-testid="primitive-radio-candidates">
+          {widget.candidateList?.map((candidate) => (
+            <FormControlLabel
+              color="primary"
+              key={candidate}
+              value={candidate}
+              control={<Radio color="primary" />}
+              label={candidate}
+              data-testid={`primitive-radio-${candidate}`}
+              disabled={readOnly}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
+};

package/papyrus-web-components/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@eclipse-sirius/sirius-components-tsconfig/strict-react-library.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "strict": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": false
+  },
+  "include": ["./src/index.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/papyrus-web-components/vite.config.js

@@ -0,0 +1,26 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => {
+  const configuration = {
+    plugins: [peerDepsExternal(), react()],
+    build: {
+      minify: false,
+      lib: {
+        name: 'papyrus-web-components',
+        entry: path.resolve(__dirname, 'src/index.ts'),
+        formats: ['es', 'umd'],
+        fileName: (format) => `papyrus-web-components.${format}.js`,
+      },
+    },
+    test: {
+      environment: 'jsdom',
+      coverage: {
+        reporter: ['text', 'html'],
+      },
+    },
+  };
+  return configuration;
+});

package/turbo.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://turborepo.org/schema.json",
+  "tasks": {
+    "format": {
+      "outputs": []
+    },
+    "format-lint": {
+      "outputs": []
+    },
+    "build": {
+      "dependsOn": ["format-lint", "^build"],
+      "outputs": ["dist/**"]
+    },
+    "test": {
+      "dependsOn": ["build"]
+    },
+    "coverage": {
+      "dependsOn": ["build"]
+    },
+    "publish:local": {
+      "dependsOn": ["build"]
+    },
+    "build-dev": {
+      "dependsOn": ["format-lint", "^build-dev"]
+    },
+    "start": {
+      "dependsOn": ["format-lint", "^start"],
+      "persistent": true
+    }
+  }
+}