diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css new file mode 100644 index 0000000..293564a --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -0,0 +1,34 @@ +/* + * Copyright 2021-Present The Serverless Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.headingContent { + color: #000000; + background-color: #F8F8F8; + margin: 0; + padding: 1%; +} + +.headingContent.colorMode-dark { + color: #F8F8F8; + background-color: #141414; +} + +@media (prefers-color-scheme: dark) { + .headingContent.colorMode-system { + color: #F8F8F8; + background-color: #141414; + } +} diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx index 7cfcf81..cb58a33 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -19,6 +19,9 @@ import { Diagram, DiagramRef } from "../react-flow/diagram/Diagram"; import { DiagramEditorContextProvider } from "../store/DiagramEditorContextProvider"; import { I18nProvider, useI18n, detectLocale } from "@serverlessworkflow/i18n"; import { dictionaries } from "../i18n/locales"; +import "./DiagramEditor.css"; +import { ColorMode } from "../types/colorMode"; + /** * DiagramEditor component API */ @@ -31,6 +34,7 @@ export type DiagramEditorProps = { isReadOnly: boolean; locale: string; ref?: React.Ref; + colorMode?: ColorMode; }; const Content = () => { @@ -50,6 +54,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => { const supportedLocales = Object.keys(dictionaries); return props.locale ?? detectLocale(supportedLocales); }, [props.locale]); + const colorMode = props.colorMode ?? "system"; // Allow imperatively controlling the Editor React.useImperativeHandle( @@ -70,8 +75,10 @@ export const DiagramEditor = (props: DiagramEditorProps) => { locale={locale} > - - +
+ +
+ diff --git a/packages/serverless-workflow-diagram-editor/src/index.ts b/packages/serverless-workflow-diagram-editor/src/index.ts index 44a3d2d..b8d5bf0 100644 --- a/packages/serverless-workflow-diagram-editor/src/index.ts +++ b/packages/serverless-workflow-diagram-editor/src/index.ts @@ -15,3 +15,4 @@ */ export * from "./diagram-editor"; +export * from "./types/colorMode"; diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index 15dfc99..4344539 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -15,11 +15,23 @@ */ .diagram-container { - height: 100%; - position: relative; + height: 100%; + position: relative; } -.diagram-background { - --xy-background-pattern-color: #ccc; - background-color: #E5E4E2; +.diagram-container .diagram-background { + --xy-background-pattern-color: #ccc; + background-color: #e5e4e2; +} + +.diagram-container.colorMode-dark .diagram-background{ + --xy-background-pattern-color: inherit; + background-color: inherit; +} + +@media (prefers-color-scheme: dark) { + .diagram-container.colorMode-system .diagram-background{ + --xy-background-pattern-color: inherit; + background-color: inherit; + } } diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index dee9349..aedd0bd 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -18,8 +18,13 @@ import * as React from "react"; import * as RF from "@xyflow/react"; import "@xyflow/react/dist/style.css"; import "./Diagram.css"; +import { ColorMode } from "../../types/colorMode"; -const FIT_VIEW_OPTIONS: RF.FitViewOptions = { maxZoom: 1, minZoom: 0.1, duration: 400 }; +const FIT_VIEW_OPTIONS: RF.FitViewOptions = { + maxZoom: 1, + minZoom: 0.1, + duration: 400, +}; // TODO: Nodes and Edges are hardcoded for now to generate a renderable basic workflow // It shall be replaced by the actual implementation based on graph structure @@ -48,9 +53,10 @@ export type DiagramRef = { export type DiagramProps = { divRef?: React.RefObject; ref?: React.Ref; + colorMode?: ColorMode; }; -export const Diagram = ({ divRef, ref }: DiagramProps) => { +export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => { const [minimapVisible, setMinimapVisible] = React.useState(false); const [nodes, setNodes] = React.useState(initialNodes); const [edges, setEdges] = React.useState(initialEdges); @@ -75,7 +81,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { ); return ( -
+
{ preventScrolling={true} selectionOnDrag={true} fitView + colorMode={colorMode} > {minimapVisible && } diff --git a/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts b/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts new file mode 100644 index 0000000..b69f8a9 --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021-Present The Serverless Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export type ColorMode = "light" | "dark" | "system"; diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts index cd4b07f..948cb29 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts @@ -39,5 +39,6 @@ export const Component: Story = { isReadOnly: true, locale: "en", content: "", // TODO: Replace with a sample workflow YAML once diagram renders from model + colorMode: "system", }, }; diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx index 8c66eca..dfc3cb3 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx @@ -23,7 +23,12 @@ import { export const DiagramEditor = ({ ...props }: DiagramEditorProps) => { return (
- +
); }; diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx index 63709c0..941d0d9 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx @@ -28,10 +28,10 @@ describe("Story - DiagramEditor component", () => { vi.restoreAllMocks(); }); - test("Renders react flow Diagram component", async () => { - const locale = "en"; - const isReadOnly = true; + const locale = "en"; + const isReadOnly = true; + test("Renders react flow Diagram component", () => { render( , ); @@ -40,4 +40,55 @@ describe("Story - DiagramEditor component", () => { expect(reactFlowContainer).toBeInTheDocument(); }); + + test("applies light mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-light"); + }); + + test("applies dark mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-dark"); + }); + + test("applies system mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); + + test("defaults to system mode when no colorMode is provided", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); }); diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx index 74c84be..99aac0a 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx @@ -24,10 +24,10 @@ describe("DiagramEditor Component", () => { vi.restoreAllMocks(); }); - test("Renders react flow Diagram component", async () => { - const locale = "en"; - const isReadOnly = true; + const locale = "en"; + const isReadOnly = true; + test("Renders react flow Diagram component", () => { render( , ); @@ -36,4 +36,55 @@ describe("DiagramEditor Component", () => { expect(reactFlowContainer).toBeInTheDocument(); }); + + test("applies light mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-light"); + }); + + test("applies dark mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-dark"); + }); + + test("applies system mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); + + test("defaults to system mode when no colorMode is provided", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); });