Skip to content

Commit a5aac0c

Browse files
tassoevantassoevan
authored
refactor(uikit-playground): Adapt to linting changes (#39162)
1 parent dbe69af commit a5aac0c

File tree

174 files changed

+5097
-5614
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

174 files changed

+5097
-5614
lines changed

‎apps/uikit-playground/.prettierrc‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎apps/uikit-playground/index.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>UiKit-Playground</title>
8-
</head>
9-
<body>
10-
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
12-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>UiKit-Playground</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
1313
</html>

‎apps/uikit-playground/package.json‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
{
2-
"name": "@rocket.chat/uikit-playground",
3-
"version": "0.7.6",
4-
"private": true,
5-
"type": "module",
6-
"scripts": {
7-
".:build-preview-move": "mkdir -p ../../.preview/ && cp -r ./dist ../../.preview/uikit-playground",
8-
"build-preview": "tsc && vite build",
9-
"dev": "vite",
10-
"lint": "eslint .",
11-
"preview": "vite preview",
12-
"typecheck": "tsc --noEmit"
13-
},
14-
"dependencies": {
15-
"@codemirror/lang-javascript": "^6.2.4",
16-
"@codemirror/lang-json": "^6.0.2",
17-
"@hello-pangea/dnd": "^17.0.0",
18-
"@lezer/highlight": "^1.2.3",
19-
"@rocket.chat/core-typings": "workspace:^",
20-
"@rocket.chat/css-in-js": "~0.31.25",
21-
"@rocket.chat/fuselage": "^0.71.0",
22-
"@rocket.chat/fuselage-hooks": "^0.39.0",
23-
"@rocket.chat/fuselage-toastbar": "^0.35.2",
24-
"@rocket.chat/fuselage-tokens": "~0.33.2",
25-
"@rocket.chat/fuselage-ui-kit": "workspace:~",
26-
"@rocket.chat/icons": "~0.46.0",
27-
"@rocket.chat/logo": "^0.32.4",
28-
"@rocket.chat/styled": "~0.32.0",
29-
"@rocket.chat/ui-avatar": "workspace:^",
30-
"@rocket.chat/ui-contexts": "workspace:~",
31-
"codemirror": "^6.0.2",
32-
"eslint4b-prebuilt": "^6.7.2",
33-
"moment": "^2.30.1",
34-
"prettier": "~3.3.3",
35-
"rc-scrollbars": "^1.1.6",
36-
"react": "~18.3.1",
37-
"react-beautiful-dnd": "^13.1.1",
38-
"react-dom": "~18.3.1",
39-
"react-router-dom": "^6.30.3",
40-
"react-split-pane": "^0.1.92",
41-
"react-virtuoso": "^4.12.0",
42-
"reactflow": "^11.11.4"
43-
},
44-
"devDependencies": {
45-
"@rocket.chat/emitter": "^0.32.0",
46-
"@rocket.chat/tsconfig": "workspace:*",
47-
"@types/lodash": "~4.17.23",
48-
"@types/react": "~18.3.27",
49-
"@types/react-beautiful-dnd": "^13.1.8",
50-
"@types/react-dom": "~18.3.7",
51-
"@vitejs/plugin-react": "~4.5.2",
52-
"eslint": "~9.39.3",
53-
"typescript": "~5.9.3",
54-
"vite": "^6.2.4"
55-
},
56-
"volta": {
57-
"extends": "../../package.json"
58-
}
2+
"name": "@rocket.chat/uikit-playground",
3+
"version": "0.7.6",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
".:build-preview-move": "mkdir -p ../../.preview/ && cp -r ./dist ../../.preview/uikit-playground",
8+
"build-preview": "tsc && vite build",
9+
"dev": "vite",
10+
"lint": "eslint .",
11+
"preview": "vite preview",
12+
"typecheck": "tsc --noEmit"
13+
},
14+
"dependencies": {
15+
"@codemirror/lang-javascript": "^6.2.4",
16+
"@codemirror/lang-json": "^6.0.2",
17+
"@hello-pangea/dnd": "^17.0.0",
18+
"@lezer/highlight": "^1.2.3",
19+
"@rocket.chat/core-typings": "workspace:^",
20+
"@rocket.chat/css-in-js": "~0.31.25",
21+
"@rocket.chat/fuselage": "^0.71.0",
22+
"@rocket.chat/fuselage-hooks": "^0.39.0",
23+
"@rocket.chat/fuselage-toastbar": "^0.35.2",
24+
"@rocket.chat/fuselage-tokens": "~0.33.2",
25+
"@rocket.chat/fuselage-ui-kit": "workspace:~",
26+
"@rocket.chat/icons": "~0.46.0",
27+
"@rocket.chat/logo": "^0.32.4",
28+
"@rocket.chat/styled": "~0.32.0",
29+
"@rocket.chat/ui-avatar": "workspace:^",
30+
"@rocket.chat/ui-contexts": "workspace:~",
31+
"codemirror": "^6.0.2",
32+
"eslint4b-prebuilt": "^6.7.2",
33+
"moment": "^2.30.1",
34+
"prettier": "~3.3.3",
35+
"rc-scrollbars": "^1.1.6",
36+
"react": "~18.3.1",
37+
"react-beautiful-dnd": "^13.1.1",
38+
"react-dom": "~18.3.1",
39+
"react-router-dom": "^6.30.3",
40+
"react-split-pane": "^0.1.92",
41+
"react-virtuoso": "^4.12.0",
42+
"reactflow": "^11.11.4"
43+
},
44+
"devDependencies": {
45+
"@rocket.chat/emitter": "^0.32.0",
46+
"@rocket.chat/tsconfig": "workspace:*",
47+
"@types/lodash": "~4.17.23",
48+
"@types/react": "~18.3.27",
49+
"@types/react-beautiful-dnd": "^13.1.8",
50+
"@types/react-dom": "~18.3.7",
51+
"@vitejs/plugin-react": "~4.5.2",
52+
"eslint": "~9.39.3",
53+
"typescript": "~5.9.3",
54+
"vite": "^6.2.4"
55+
},
56+
"volta": {
57+
"extends": "../../package.json"
58+
}
5959
}

‎apps/uikit-playground/src/App.tsx‎

Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,58 @@
1-
import { useContext, useEffect } from 'react';
2-
import './App.css';
3-
import './_global.css';
4-
import './cssVariables.css';
1+
import { Box } from '@rocket.chat/fuselage';
2+
import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
53
import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
4+
import { useContext, useEffect } from 'react';
65
import { BrowserRouter, Route, Routes } from 'react-router-dom';
76

87
import { HomeLayout } from './Components/Routes/HomeLayout';
9-
import Playground from './Pages/Playground';
10-
import SignInToWorkspace from './Pages/SignInSignUp';
11-
import routes from './Routes/Routes';
12-
import Home from './Pages/Home';
8+
import { ProjectSpecificLayout } from './Components/Routes/ProjectSpecificLayout';
139
import { context, isMobileAction, isTabletAction } from './Context';
14-
import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
15-
import { Box } from '@rocket.chat/fuselage';
1610
import FlowDiagram from './Pages/FlowDiagram';
17-
import { ProjectSpecificLayout } from './Components/Routes/ProjectSpecificLayout';
11+
import Home from './Pages/Home';
12+
import Playground from './Pages/Playground';
1813
import Prototype from './Pages/Prototype';
14+
import SignInToWorkspace from './Pages/SignInSignUp';
15+
import routes from './Routes/Routes';
16+
17+
import './App.css';
18+
import './_global.css';
19+
import './cssVariables.css';
1920

2021
function App() {
21-
const { dispatch } = useContext(context);
22+
const { dispatch } = useContext(context);
2223

23-
const [isMobile, isTablet] = useMediaQueries(
24-
'(max-width: 630px)',
25-
'(max-width: 1050px)'
26-
);
24+
const [isMobile, isTablet] = useMediaQueries('(max-width: 630px)', '(max-width: 1050px)');
2725

28-
useEffect(() => {
29-
dispatch(isMobileAction(isMobile));
30-
}, [isMobile, dispatch]);
26+
useEffect(() => {
27+
dispatch(isMobileAction(isMobile));
28+
}, [isMobile, dispatch]);
3129

32-
useEffect(() => {
33-
dispatch(isTabletAction(isTablet));
34-
}, [isTablet, dispatch]);
35-
return (
36-
<Box w="100vw" h="100vh" display="flex" flexDirection="column">
37-
<ToastBarProvider>
38-
<BrowserRouter>
39-
<Routes>
40-
<Route element={<HomeLayout />}>
41-
<Route
42-
path={routes.login}
43-
element={<SignInToWorkspace route={routes.login} />}
44-
/>
45-
<Route
46-
path={routes.signup}
47-
element={<SignInToWorkspace route={routes.signup} />}
48-
/>
49-
</Route>
50-
{/* <Route element={<ProtectedLayout />}> */}
51-
<Route path={routes.home} element={<Home />} />
52-
<Route path={routes.projectId} element={<ProjectSpecificLayout />}>
53-
<Route path={routes.flow} element={<FlowDiagram />} />
54-
<Route path={routes.project} element={<Playground />} />
55-
<Route path={routes.prototype} element={<Prototype />} />
56-
</Route>
57-
<Route path={`*`} element={<Home />} />
58-
{/* </Route> */}
59-
</Routes>
60-
</BrowserRouter>
61-
</ToastBarProvider>
62-
</Box>
63-
);
30+
useEffect(() => {
31+
dispatch(isTabletAction(isTablet));
32+
}, [isTablet, dispatch]);
33+
return (
34+
<Box w='100vw' h='100vh' display='flex' flexDirection='column'>
35+
<ToastBarProvider>
36+
<BrowserRouter>
37+
<Routes>
38+
<Route element={<HomeLayout />}>
39+
<Route path={routes.login} element={<SignInToWorkspace route={routes.login} />} />
40+
<Route path={routes.signup} element={<SignInToWorkspace route={routes.signup} />} />
41+
</Route>
42+
{/* <Route element={<ProtectedLayout />}> */}
43+
<Route path={routes.home} element={<Home />} />
44+
<Route path={routes.projectId} element={<ProjectSpecificLayout />}>
45+
<Route path={routes.flow} element={<FlowDiagram />} />
46+
<Route path={routes.project} element={<Playground />} />
47+
<Route path={routes.prototype} element={<Prototype />} />
48+
</Route>
49+
<Route path='*' element={<Home />} />
50+
{/* </Route> */}
51+
</Routes>
52+
</BrowserRouter>
53+
</ToastBarProvider>
54+
</Box>
55+
);
6456
}
6557

6658
export default App;

‎apps/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx‎

Lines changed: 38 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,51 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
55
import { useEffect, useContext } from 'react';
66

77
import { updatePayloadAction, context } from '../../Context';
8+
import { type IPayload } from '../../Context/initialState';
89
import useCodeMirror from '../../hooks/useCodeMirror';
9-
import intendCode from '../../utils/intendCode';
10-
import { IPayload } from '../../Context/initialState';
1110
import useFormatCodeMirrorValue from '../../hooks/useFormatCodeMirrorValue';
11+
import intendCode from '../../utils/intendCode';
1212

1313
type CodeMirrorProps = {
14-
extensions?: Extension[];
14+
extensions?: Extension[];
1515
};
1616

1717
const BlockEditor = ({ extensions }: CodeMirrorProps) => {
18-
const {
19-
state: { screens, activeScreen },
20-
dispatch,
21-
} = useContext(context);
22-
23-
const { editor, changes, setValue } = useCodeMirror(
24-
extensions,
25-
intendCode(screens[activeScreen]?.payload)
26-
);
27-
const debounceValue = useDebouncedValue(changes, 1500);
28-
29-
useFormatCodeMirrorValue(
30-
(
31-
parsedCode: IPayload,
32-
prettifiedCode: { formatted: string; cursorOffset: number }
33-
) => {
34-
dispatch(
35-
updatePayloadAction({
36-
blocks: parsedCode.blocks,
37-
surface: parsedCode.surface,
38-
})
39-
);
40-
setValue(prettifiedCode.formatted, {
41-
cursor: prettifiedCode.cursorOffset,
42-
});
43-
},
44-
debounceValue
45-
);
46-
47-
useEffect(() => {
48-
if (!screens[activeScreen]?.changedByEditor) {
49-
setValue(intendCode(screens[activeScreen]?.payload), {});
50-
}
51-
}, [
52-
screens[activeScreen]?.payload.blocks,
53-
screens[activeScreen]?.payload.surface,
54-
activeScreen,
55-
]);
56-
57-
useEffect(() => {
58-
setValue(intendCode(screens[activeScreen]?.payload), {});
59-
}, [activeScreen]);
60-
61-
return (
62-
<>
63-
<Box display="grid" height="100%" width={'100%'} ref={editor} />
64-
</>
65-
);
18+
const {
19+
state: { screens, activeScreen },
20+
dispatch,
21+
} = useContext(context);
22+
23+
const { editor, changes, setValue } = useCodeMirror(extensions, intendCode(screens[activeScreen]?.payload));
24+
const debounceValue = useDebouncedValue(changes, 1500);
25+
26+
useFormatCodeMirrorValue((parsedCode: IPayload, prettifiedCode: { formatted: string; cursorOffset: number }) => {
27+
dispatch(
28+
updatePayloadAction({
29+
blocks: parsedCode.blocks,
30+
surface: parsedCode.surface,
31+
}),
32+
);
33+
setValue(prettifiedCode.formatted, {
34+
cursor: prettifiedCode.cursorOffset,
35+
});
36+
}, debounceValue);
37+
38+
useEffect(() => {
39+
if (!screens[activeScreen]?.changedByEditor) {
40+
setValue(intendCode(screens[activeScreen]?.payload), {});
41+
}
42+
}, [screens[activeScreen]?.payload.blocks, screens[activeScreen]?.payload.surface, activeScreen]);
43+
44+
useEffect(() => {
45+
setValue(intendCode(screens[activeScreen]?.payload), {});
46+
}, [activeScreen]);
47+
48+
return (
49+
<>
50+
<Box display='grid' height='100%' width='100%' ref={editor} />
51+
</>
52+
);
6653
};
6754

6855
export default BlockEditor;

‎apps/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ import jsonLinter from './jsonLinter';
88
import theme from './theme';
99

1010
export const actionBlockExtensions = [
11-
highlightStyle,
12-
json(),
13-
jsonLinter,
14-
basicSetup,
15-
// payloadLinter,
16-
...theme,
11+
highlightStyle,
12+
json(),
13+
jsonLinter,
14+
basicSetup,
15+
// payloadLinter,
16+
...theme,
1717
];
1818

1919
export const actionPreviewExtensions = [
20-
EditorView.contentAttributes.of({ contenteditable: 'false' }),
21-
highlightStyle,
22-
json(),
23-
basicSetup,
24-
...theme,
20+
EditorView.contentAttributes.of({ contenteditable: 'false' }),
21+
highlightStyle,
22+
json(),
23+
basicSetup,
24+
...theme,
2525
];

0 commit comments

Comments
 (0)