diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..e8bdf9e2 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,40 @@ +const { configure, presets } = require('eslint-kit') + + +module.exports = configure({ + mode: 'only-errors', + allowDebug: process.env.NODE_ENV !== "production", + root: __dirname, + presets: [ + presets.node(), + presets.prettier({ + singleQuote: true, + trailingComma: "none", + endOfLine: "auto" + }), + presets.typescript({ + root: './', + tsconfig: 'tsconfig.base.json' + }), + presets.react(), + ], + extend: { + root: true, + ignorePatterns: ["**/*"], + plugins: ["@nx"], + // My custom config + extends: ["gearonix"], + rules: { + "react/react-in-jsx-scope": "off", + "quotes": [2, "single", { "avoidEscape": true }], + "@typescript-eslint/no-namespace": "off", + "@typescript-eslint/member-delimiter-style": ["error", {"multiline" : {"delimiter": "none"}}], + "import/no-unresolved": "off", + "@typescript-eslint/no-unnecessary-condition": "off", + "import/extensions": "off", + "react-hooks/exhaustive-deps": "warn", + "react/no-array-index-key": "warn", + "@typescript-eslint/no-explicit-any": "warn" + } + } +}) diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 21b2d838..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "root": true, - "ignorePatterns": ["**/*"], - "plugins": ["@nx"], - // My custom config - "extends": ["gearonix"], - - "rules": { - "react/react-in-jsx-scope": "off", - "quotes": [2, "single", { "avoidEscape": true }], - "@typescript-eslint/no-namespace": "off", - "@typescript-eslint/member-delimiter-style": ["error", {"multiline" : {"delimiter": "none"}}] - } -} diff --git a/.prettierrc b/.prettierrc index 7e468fc3..266a8446 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "semi": false, "bracketSpacing": true, "bracketSameLine": true, - "arrowParens": "always" + "arrowParens": "always", + "singleQuote": true } diff --git a/apps/client/.eslintrc.js b/apps/client/.eslintrc.js index 6a5b1854..6505182a 100644 --- a/apps/client/.eslintrc.js +++ b/apps/client/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { parser: '@typescript-eslint/parser', plugins: ['preact'], - extends: ['../../.eslintrc.json'], + extends: ['../../.eslintrc.js'], ignorePatterns: ['!**/*'] } diff --git a/apps/client/public/service-worker.js b/apps/client/public/service-worker.js index 46e672bd..257c8c57 100644 --- a/apps/client/public/service-worker.js +++ b/apps/client/public/service-worker.js @@ -2,13 +2,16 @@ import { CacheableResponsePlugin } from 'workbox-cacheable-response' import { ExpirationPlugin } from 'workbox-expiration' import { precacheAndRoute } from 'workbox-precaching' import { registerRoute } from 'workbox-routing' -import { CacheFirst,NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies' +import { + CacheFirst, + NetworkFirst, + StaleWhileRevalidate +} from 'workbox-strategies' precacheAndRoute(self.__WB_MANIFEST) self.addEventListener('message', (event) => { - if (event.data && event.data.type === 'SKIP_WAITING') - self.skipWaiting() + if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting() }) registerRoute( @@ -23,8 +26,6 @@ registerRoute( }) ) - - registerRoute( /http:\/\/localhost\/:6868/, new NetworkFirst({ @@ -68,4 +69,3 @@ registerRoute( ] }) ) - diff --git a/apps/client/src/app/App.tsx b/apps/client/src/app/App.tsx deleted file mode 100644 index 1a0f3235..00000000 --- a/apps/client/src/app/App.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ThemeProvider } from '@/app/providers/Theme' -import { GlobalStyles } from '@/app/styles' - -import { RouterProvider } from './providers/Router' -import { StoreProvider } from './providers/Store' - -import 'normalize.css' - -function App() { - return ( - - - - - - - ) -} - -export default App diff --git a/apps/client/src/app/app.tsx b/apps/client/src/app/app.tsx new file mode 100644 index 00000000..939a26c5 --- /dev/null +++ b/apps/client/src/app/app.tsx @@ -0,0 +1,20 @@ +import { ThemeProvider } from '@/app/providers/theme' +import { GlobalStyles } from '@/app/styles' + +import { RouterProvider } from './providers/router' +import { StoreProvider } from './providers/store' + +import 'normalize.css' + +function App() { + return ( + + + + + + + ) +} + +export default App diff --git a/apps/client/src/app/entry.tsx b/apps/client/src/app/entry.tsx index 3f5a6735..162866a1 100644 --- a/apps/client/src/app/entry.tsx +++ b/apps/client/src/app/entry.tsx @@ -1,7 +1,7 @@ import { render } from 'preact' import { registerSW } from 'virtual:pwa-register' -import App from './App' +import App from './app' const updateSW = registerSW({ onNeedRefresh() { @@ -11,7 +11,4 @@ const updateSW = registerSW({ } }) - -render(, document.getElementById('root')!) - - +render(, document.querySelector('#root')!) diff --git a/apps/client/src/app/index.ts b/apps/client/src/app/index.ts index f52c042e..f9379e42 100644 --- a/apps/client/src/app/index.ts +++ b/apps/client/src/app/index.ts @@ -1 +1 @@ -export { default as App } from './App' +export { default as App } from './app' diff --git a/apps/client/src/app/providers/Router/index.ts b/apps/client/src/app/providers/Router/index.ts deleted file mode 100644 index 4c9e4cfb..00000000 --- a/apps/client/src/app/providers/Router/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RouterProvider } from './ui/RouterProvider' diff --git a/apps/client/src/app/providers/Store/index.ts b/apps/client/src/app/providers/Store/index.ts deleted file mode 100644 index 70f3df23..00000000 --- a/apps/client/src/app/providers/Store/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as StoreProvider } from './ui/StoreProvider' diff --git a/apps/client/src/app/providers/Theme/index.ts b/apps/client/src/app/providers/Theme/index.ts deleted file mode 100644 index 076ec27b..00000000 --- a/apps/client/src/app/providers/Theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ThemeProvider } from './ui/ThemeProvider' diff --git a/apps/client/src/app/providers/Router/config/router.tsx b/apps/client/src/app/providers/router/config/router.tsx similarity index 50% rename from apps/client/src/app/providers/Router/config/router.tsx rename to apps/client/src/app/providers/router/config/router.tsx index 7791c63f..14c26be0 100644 --- a/apps/client/src/app/providers/Router/config/router.tsx +++ b/apps/client/src/app/providers/router/config/router.tsx @@ -1,10 +1,8 @@ -import { - createBrowserRouter -} from 'react-router-dom' +import { createBrowserRouter } from 'react-router-dom' -import { About } from '@/pages/About' -import { Main } from '@/pages/Main' -import { NotFound } from '@/pages/NotFound' +import { About } from '@/pages/about' +import { Main } from '@/pages/main' +import { NotFound } from '@/pages/not-found' import { RoutePaths } from '$/client-shared' import { Editor } from '$/editor' @@ -12,21 +10,20 @@ import { Editor } from '$/editor' const router = createBrowserRouter([ { path: RoutePaths.MAIN, - element:
+ element:
}, { path: RoutePaths.EDITOR, - element: + element: }, { path: RoutePaths.ABOUT, - element: + element: }, { path: '*', - element: + element: } ]) - export default router diff --git a/apps/client/src/app/providers/router/index.ts b/apps/client/src/app/providers/router/index.ts new file mode 100644 index 00000000..576c8d84 --- /dev/null +++ b/apps/client/src/app/providers/router/index.ts @@ -0,0 +1 @@ +export { default as RouterProvider } from './ui/router-provider' diff --git a/apps/client/src/app/providers/Router/ui/RouterProvider.tsx b/apps/client/src/app/providers/router/ui/router-provider.tsx similarity index 99% rename from apps/client/src/app/providers/Router/ui/RouterProvider.tsx rename to apps/client/src/app/providers/router/ui/router-provider.tsx index 48000621..28fa9155 100644 --- a/apps/client/src/app/providers/Router/ui/RouterProvider.tsx +++ b/apps/client/src/app/providers/router/ui/router-provider.tsx @@ -6,5 +6,4 @@ const RouterProvider = () => { return } - export default RouterProvider diff --git a/apps/client/src/app/providers/Store/config/store.ts b/apps/client/src/app/providers/store/config/store.ts similarity index 54% rename from apps/client/src/app/providers/Store/config/store.ts rename to apps/client/src/app/providers/store/config/store.ts index fd4cd04d..944d6f77 100644 --- a/apps/client/src/app/providers/Store/config/store.ts +++ b/apps/client/src/app/providers/store/config/store.ts @@ -2,15 +2,13 @@ import { makeAutoObservable } from 'mobx' import { EditorStore } from '$/editor' - class RootStore { - editor: EditorStore + editor: EditorStore - constructor() { - makeAutoObservable(this) - this.editor = new EditorStore() - } + constructor() { + makeAutoObservable(this) + this.editor = new EditorStore() + } } - export default RootStore diff --git a/apps/client/src/app/providers/store/index.ts b/apps/client/src/app/providers/store/index.ts new file mode 100644 index 00000000..6abf2234 --- /dev/null +++ b/apps/client/src/app/providers/store/index.ts @@ -0,0 +1 @@ +export { default as StoreProvider } from './ui/store-provider' diff --git a/apps/client/src/app/providers/Store/ui/StoreProvider.tsx b/apps/client/src/app/providers/store/ui/store-provider.tsx similarity index 79% rename from apps/client/src/app/providers/Store/ui/StoreProvider.tsx rename to apps/client/src/app/providers/store/ui/store-provider.tsx index e099d7ed..97b13469 100644 --- a/apps/client/src/app/providers/Store/ui/StoreProvider.tsx +++ b/apps/client/src/app/providers/store/ui/store-provider.tsx @@ -9,9 +9,7 @@ export const StoreContext = createContext({} as RootStore) export const StoreProvider = ({ children }: WithPreactChildren) => { const root = new RootStore() - return - {children} - + return {children} } export default StoreProvider diff --git a/apps/client/src/app/providers/Theme/config/antdConfig.ts b/apps/client/src/app/providers/theme/config/antd-config.ts similarity index 70% rename from apps/client/src/app/providers/Theme/config/antdConfig.ts rename to apps/client/src/app/providers/theme/config/antd-config.ts index cbc3cc98..5bc56003 100644 --- a/apps/client/src/app/providers/Theme/config/antdConfig.ts +++ b/apps/client/src/app/providers/theme/config/antd-config.ts @@ -1,13 +1,13 @@ import { theme } from 'antd' import { ThemeConfig } from 'antd/es/config-provider' -import { DarkThemePalette } from '@/app/providers/Theme/config/themes' +import { DarkThemePalette } from '@/app/providers/theme/config/themes' -export const AntdConfig : ThemeConfig = { +export const AntdConfig: ThemeConfig = { algorithm: theme.darkAlgorithm, token: { colorBgBase: DarkThemePalette.grey, - colorTextBase : DarkThemePalette.light, + colorTextBase: DarkThemePalette.light, colorBorder: DarkThemePalette.lightGrey, colorBgTextHover: DarkThemePalette.light, colorBgTextActive: DarkThemePalette.light, diff --git a/apps/client/src/app/providers/Theme/config/themes.ts b/apps/client/src/app/providers/theme/config/themes.ts similarity index 95% rename from apps/client/src/app/providers/Theme/config/themes.ts rename to apps/client/src/app/providers/theme/config/themes.ts index c55dfd07..af71af70 100644 --- a/apps/client/src/app/providers/Theme/config/themes.ts +++ b/apps/client/src/app/providers/theme/config/themes.ts @@ -12,5 +12,6 @@ export const DarkThemePalette = { fz6: '16px', fz7: '18px', fz8: '19px', + fz9: '21px', f10: '28px' } diff --git a/apps/client/src/app/providers/theme/index.ts b/apps/client/src/app/providers/theme/index.ts new file mode 100644 index 00000000..43909dfb --- /dev/null +++ b/apps/client/src/app/providers/theme/index.ts @@ -0,0 +1 @@ +export { default as ThemeProvider } from './ui/theme-provider' diff --git a/apps/client/src/app/providers/Theme/styled.d.ts b/apps/client/src/app/providers/theme/styled.d.ts similarity index 99% rename from apps/client/src/app/providers/Theme/styled.d.ts rename to apps/client/src/app/providers/theme/styled.d.ts index 98929a66..1482a91d 100644 --- a/apps/client/src/app/providers/Theme/styled.d.ts +++ b/apps/client/src/app/providers/theme/styled.d.ts @@ -1,6 +1,5 @@ import 'styled-components' - declare module 'styled-components' { export interface DefaultTheme { black: string diff --git a/apps/client/src/app/providers/Theme/ui/ThemeProvider.tsx b/apps/client/src/app/providers/theme/ui/theme-provider.tsx similarity index 58% rename from apps/client/src/app/providers/Theme/ui/ThemeProvider.tsx rename to apps/client/src/app/providers/theme/ui/theme-provider.tsx index a5147ea4..96a9466d 100644 --- a/apps/client/src/app/providers/Theme/ui/ThemeProvider.tsx +++ b/apps/client/src/app/providers/theme/ui/theme-provider.tsx @@ -1,18 +1,19 @@ import { ConfigProvider as AntdConfigProvider } from 'antd' import { ThemeProvider as StyledThemeProvider } from 'styled-components' -import { AntdConfig } from '../config/antdConfig' +import { AntdConfig } from '../config/antd-config' import { DarkThemePalette } from '../config/themes' import { WithPreactChildren } from '$/client-shared' const ThemeProvider = ({ children }: WithPreactChildren) => { - return - - {children} - - + return ( + + + {children} + + + ) } - export default ThemeProvider diff --git a/apps/client/src/app/styles/app.styles.ts b/apps/client/src/app/styles/app.styles.ts index a9d7ab5c..692e5dee 100644 --- a/apps/client/src/app/styles/app.styles.ts +++ b/apps/client/src/app/styles/app.styles.ts @@ -2,7 +2,6 @@ import { createGlobalStyle } from 'styled-components' import { customScrollbar, font } from '$/styles' - export const GlobalStyles = createGlobalStyle` body { background: ${({ theme }) => theme.default}; diff --git a/apps/client/src/pages/About/index.ts b/apps/client/src/pages/About/index.ts deleted file mode 100644 index a801e638..00000000 --- a/apps/client/src/pages/About/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as About } from './ui/About' diff --git a/apps/client/src/pages/Main/index.ts b/apps/client/src/pages/Main/index.ts deleted file mode 100644 index 55ba60b2..00000000 --- a/apps/client/src/pages/Main/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Main } from './ui/Main' diff --git a/apps/client/src/pages/Main/ui/Main.tsx b/apps/client/src/pages/Main/ui/Main.tsx deleted file mode 100644 index f68e19f3..00000000 --- a/apps/client/src/pages/Main/ui/Main.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Link } from 'react-router-dom' - -import { Page,RoutePaths } from '$/client-shared' - -const Main = () => { - return -
- main
- editor -
-
-} - -export default Main diff --git a/apps/client/src/pages/NotFound/index.ts b/apps/client/src/pages/NotFound/index.ts deleted file mode 100644 index 668cd41b..00000000 --- a/apps/client/src/pages/NotFound/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NotFound } from './ui/NotFound' diff --git a/apps/client/src/pages/about/index.ts b/apps/client/src/pages/about/index.ts new file mode 100644 index 00000000..f6588d3f --- /dev/null +++ b/apps/client/src/pages/about/index.ts @@ -0,0 +1 @@ +export { default as About } from './ui/about' diff --git a/apps/client/src/pages/About/ui/About.tsx b/apps/client/src/pages/about/ui/about.tsx similarity index 53% rename from apps/client/src/pages/About/ui/About.tsx rename to apps/client/src/pages/about/ui/about.tsx index 1a28db75..fea66505 100644 --- a/apps/client/src/pages/About/ui/About.tsx +++ b/apps/client/src/pages/about/ui/about.tsx @@ -1,8 +1,5 @@ const About = () => { - return
- about page -
+ return
about page
} - export default About diff --git a/apps/client/src/pages/main/index.ts b/apps/client/src/pages/main/index.ts new file mode 100644 index 00000000..a702bffe --- /dev/null +++ b/apps/client/src/pages/main/index.ts @@ -0,0 +1 @@ +export { default as Main } from './ui/main' diff --git a/apps/client/src/pages/main/ui/main.tsx b/apps/client/src/pages/main/ui/main.tsx new file mode 100644 index 00000000..7727498f --- /dev/null +++ b/apps/client/src/pages/main/ui/main.tsx @@ -0,0 +1,16 @@ +import { Link } from 'react-router-dom' + +import { Page, RoutePaths } from '$/client-shared' + +const Main = () => { + return ( + +
+ main
+ editor +
+
+ ) +} + +export default Main diff --git a/apps/client/src/pages/not-found/index.ts b/apps/client/src/pages/not-found/index.ts new file mode 100644 index 00000000..8367087c --- /dev/null +++ b/apps/client/src/pages/not-found/index.ts @@ -0,0 +1 @@ +export { default as NotFound } from './ui/not-found' diff --git a/apps/client/src/pages/NotFound/ui/NotFound.tsx b/apps/client/src/pages/not-found/ui/not-found.tsx similarity index 56% rename from apps/client/src/pages/NotFound/ui/NotFound.tsx rename to apps/client/src/pages/not-found/ui/not-found.tsx index 0a354a26..b604937e 100644 --- a/apps/client/src/pages/NotFound/ui/NotFound.tsx +++ b/apps/client/src/pages/not-found/ui/not-found.tsx @@ -1,9 +1,5 @@ - const NotFound = () => { - return
- not found -
+ return
not found
} - export default NotFound diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts index cfe4c87e..29836da3 100644 --- a/apps/client/vite.config.ts +++ b/apps/client/vite.config.ts @@ -46,9 +46,7 @@ export default defineConfig({ devOptions: { enabled: false }, - includeAssets: [ - '**/*' - ] + includeAssets: ['**/*'] }) ], test: { diff --git a/apps/server/.eslintrc.json b/apps/server/.eslintrc.json index 9d9c0db5..d3e61a2e 100644 --- a/apps/server/.eslintrc.json +++ b/apps/server/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.js"], "ignorePatterns": ["!**/*"], "overrides": [ { diff --git a/apps/server/jest.config.ts b/apps/server/jest.config.ts index e7579855..feba498e 100644 --- a/apps/server/jest.config.ts +++ b/apps/server/jest.config.ts @@ -1,11 +1,10 @@ -/* eslint-disable */ export default { - displayName: "server", - preset: "../../jest.preset.js", - testEnvironment: "node", + displayName: 'server', + preset: '../../jest.preset.js', + testEnvironment: 'node', transform: { - "^.+\\.[tj]s$": ["ts-jest", { tsconfig: "/tsconfig.spec.json" }], + '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }] }, - moduleFileExtensions: ["ts", "js", "html"], - coverageDirectory: "../../coverage/apps/server", + moduleFileExtensions: ['ts', 'js', 'html'], + coverageDirectory: '../../coverage/apps/server' } diff --git a/apps/server/src/app.module.ts b/apps/server/src/app.module.ts index 424a4d25..b4aad00f 100644 --- a/apps/server/src/app.module.ts +++ b/apps/server/src/app.module.ts @@ -4,10 +4,7 @@ import { ConfigModule } from '@nestjs/config' import { CodeExecutorModule } from './modules/code-executor-api' @Module({ - imports: [ - ConfigModule.forRoot(), - CodeExecutorModule - ], + imports: [ConfigModule.forRoot(), CodeExecutorModule], controllers: [], providers: [] }) diff --git a/apps/server/src/exception-filters/http-exception.filter.ts b/apps/server/src/exception-filters/http-exception.filter.ts index 5a36f296..f288b3e0 100644 --- a/apps/server/src/exception-filters/http-exception.filter.ts +++ b/apps/server/src/exception-filters/http-exception.filter.ts @@ -1,6 +1,11 @@ import { Request, Response } from 'express' -import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from '@nestjs/common' +import { + ArgumentsHost, + Catch, + ExceptionFilter, + HttpException +} from '@nestjs/common' @Catch(HttpException) export class HttpExceptionFilter implements ExceptionFilter { @@ -10,13 +15,11 @@ export class HttpExceptionFilter implements ExceptionFilter { const request = ctx.getRequest() const status = exception.getStatus() - response - .status(status) - .json({ - statusCode: status, - timestamp: new Date().toISOString(), - path: request.url, - message: exception.message - }) + response.status(status).json({ + statusCode: status, + timestamp: new Date().toISOString(), + path: request.url, + message: exception.message + }) } } diff --git a/apps/server/src/modules/code-executor-api/code-executor.controller.ts b/apps/server/src/modules/code-executor-api/code-executor.controller.ts index 5fd68dcd..722a15c1 100644 --- a/apps/server/src/modules/code-executor-api/code-executor.controller.ts +++ b/apps/server/src/modules/code-executor-api/code-executor.controller.ts @@ -11,10 +11,11 @@ import { @Controller(EndPoints.CODE_EXECUTOR_API) export class CodeExecutorController { - constructor(private executorService: ExecutorApiService) { - } + constructor(private executorService: ExecutorApiService) {} @Post() - async executeCode(@Body() args: ExecuteCodeApiDTO): Promise { + async executeCode( + @Body() args: ExecuteCodeApiDTO + ): Promise { const response = await this.executorService.fetchCodeToExecute(args) if (!isExecutorApiResponse(response)) { diff --git a/apps/server/src/pipes/validation.pipe.ts b/apps/server/src/pipes/validation.pipe.ts index 39b574e0..9b5590ea 100644 --- a/apps/server/src/pipes/validation.pipe.ts +++ b/apps/server/src/pipes/validation.pipe.ts @@ -1,17 +1,22 @@ import { plainToClass } from 'class-transformer' import { validate } from 'class-validator' -import { ArgumentMetadata, BadRequestException, Injectable, PipeTransform } from '@nestjs/common' - - +import { + ArgumentMetadata, + BadRequestException, + Injectable, + PipeTransform +} from '@nestjs/common' @Injectable() export class ValidationPipe implements PipeTransform { async transform(value: unknown, metadata: ArgumentMetadata) { - const validationErrors = await validate(plainToClass(metadata.metatype, value)) + const validationErrors = await validate( + plainToClass(metadata.metatype, value) + ) - if (validationErrors.length) { - const messages = validationErrors.map(err => { + if (validationErrors.length > 0) { + const messages = validationErrors.map((err) => { return `${err.property} - ${Object.values(err.constraints).join(', ')}` }) throw new BadRequestException(messages.join('. ')) @@ -19,5 +24,4 @@ export class ValidationPipe implements PipeTransform { return value } - } diff --git a/apps/server/webpack.config.js b/apps/server/webpack.config.js index 83f5c8f7..08bb8bc9 100644 --- a/apps/server/webpack.config.js +++ b/apps/server/webpack.config.js @@ -1,7 +1,10 @@ const { composePlugins, withNx } = require('@nx/webpack') -module.exports = composePlugins(withNx({ - skipTypeChecking: true -}), (config) => { - return config -}) +module.exports = composePlugins( + withNx({ + skipTypeChecking: true + }), + (config) => { + return config + } +) diff --git a/libs/client-shared/.eslintrc.json b/libs/client-shared/.eslintrc.json index 12545bda..7b6798b2 100644 --- a/libs/client-shared/.eslintrc.json +++ b/libs/client-shared/.eslintrc.json @@ -1,4 +1,4 @@ { - "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "extends": ["plugin:@nx/react", "../../.eslintrc.js"], "ignorePatterns": ["!**/*"] } diff --git a/libs/client-shared/src/config/axios.ts b/libs/client-shared/src/config/axios.ts index 7b17fc89..390398b9 100644 --- a/libs/client-shared/src/config/axios.ts +++ b/libs/client-shared/src/config/axios.ts @@ -7,5 +7,4 @@ const axiosInstance = axios.create({ withCredentials: true }) - export default axiosInstance diff --git a/libs/client-shared/src/config/index.ts b/libs/client-shared/src/config/index.ts index 3838ad9c..e06bd5a8 100644 --- a/libs/client-shared/src/config/index.ts +++ b/libs/client-shared/src/config/index.ts @@ -1,3 +1,3 @@ export { default as httpService } from './axios' -export { LocalStorage } from './localStorage' +export { LocalStorage } from './local-storage' export { RoutePaths } from './paths' diff --git a/libs/client-shared/src/config/localStorage.ts b/libs/client-shared/src/config/local-storage.ts similarity index 67% rename from libs/client-shared/src/config/localStorage.ts rename to libs/client-shared/src/config/local-storage.ts index 6bb9feca..f15d1b20 100644 --- a/libs/client-shared/src/config/localStorage.ts +++ b/libs/client-shared/src/config/local-storage.ts @@ -5,9 +5,11 @@ export const LocalStorage = { EDITOR_FONT_SIZE: 'EDITOR_FONT_SIZE', EDITOR_TAB_SIZE: 'EDITOR_TAB_SIZE', EDITOR_CUSTOM_BACKGROUND: 'EDITOR_CUSTOM_BACKGROUND', - EDITOR_CUSTOM_COLOR: 'EDITOR_CUSTOM_COLOR' + EDITOR_CUSTOM_COLOR: 'EDITOR_CUSTOM_COLOR', + EDITOR_HTML_PREVIEW: 'EDITOR_HTML_PREVIEW' } as const export type LocalStorageKeys = keyof typeof LocalStorage -export type LocalStorageValue = typeof LocalStorage[T] +export type LocalStorageValue = + (typeof LocalStorage)[T] diff --git a/libs/client-shared/src/hooks/index.ts b/libs/client-shared/src/hooks/index.ts index 342a3978..92308635 100644 --- a/libs/client-shared/src/hooks/index.ts +++ b/libs/client-shared/src/hooks/index.ts @@ -1,6 +1,6 @@ -export { useAltKeyDown } from './useAltKeyDown' -export { useBooleanState } from './useBooleanState' -export { useDebounce } from './useDebounce' -export { useFullScreen } from './useFullScreen' -export { useNotifications } from './useNotifications' -export { useOverflow } from './useOverflow' +export { useAltKeyDown } from './use-alt-key-down' +export { useBooleanState } from './use-boolean-state' +export { useDebounce } from './use-debounce' +export { useFullScreen } from './use-full-screen' +export { useNotifications } from './use-notifications' +export { useOverflow } from './use-overflow' diff --git a/libs/client-shared/src/hooks/useAltKeyDown.ts b/libs/client-shared/src/hooks/use-alt-key-down.ts similarity index 89% rename from libs/client-shared/src/hooks/useAltKeyDown.ts rename to libs/client-shared/src/hooks/use-alt-key-down.ts index b73f20e9..e9a98853 100644 --- a/libs/client-shared/src/hooks/useAltKeyDown.ts +++ b/libs/client-shared/src/hooks/use-alt-key-down.ts @@ -1,4 +1,4 @@ -import { EventHandler, KeyboardEvent,useState } from 'react' +import { EventHandler, KeyboardEvent, useState } from 'react' import { Nullable } from '../types' @@ -12,7 +12,7 @@ export const useAltKeyDown = () => { const subscriber = (e: KeyboardEvent) => { if (e.altKey && e.key === key.toLowerCase()) { e.preventDefault() - handler?.() + handler() return false } } @@ -25,6 +25,5 @@ export const useAltKeyDown = () => { document.removeEventListener('keydown', sub) }) } - } } diff --git a/libs/client-shared/src/hooks/useBooleanState.ts b/libs/client-shared/src/hooks/use-boolean-state.ts similarity index 88% rename from libs/client-shared/src/hooks/useBooleanState.ts rename to libs/client-shared/src/hooks/use-boolean-state.ts index 870c3275..c914cae4 100644 --- a/libs/client-shared/src/hooks/useBooleanState.ts +++ b/libs/client-shared/src/hooks/use-boolean-state.ts @@ -8,6 +8,9 @@ export const useBooleanState = (initialValue = false) => { const toggle = () => setValue(!val) return { - off, on, toggle, val + off, + on, + toggle, + val } } diff --git a/libs/client-shared/src/hooks/useDebounce.ts b/libs/client-shared/src/hooks/use-debounce.ts similarity index 77% rename from libs/client-shared/src/hooks/useDebounce.ts rename to libs/client-shared/src/hooks/use-debounce.ts index 74487503..47b89893 100644 --- a/libs/client-shared/src/hooks/useDebounce.ts +++ b/libs/client-shared/src/hooks/use-debounce.ts @@ -2,7 +2,10 @@ import { useRef } from 'react' type Timeout = ReturnType -export const useDebounce = (callback: (...args: any[]) => void, delay: number) => { +export const useDebounce = ( + callback: (...args: any[]) => void, + delay: number +) => { const debounceRef = useRef() return (...args: any[]) => { diff --git a/libs/client-shared/src/hooks/useFullScreen.ts b/libs/client-shared/src/hooks/use-full-screen.ts similarity index 100% rename from libs/client-shared/src/hooks/useFullScreen.ts rename to libs/client-shared/src/hooks/use-full-screen.ts diff --git a/libs/client-shared/src/hooks/useNotifications.ts b/libs/client-shared/src/hooks/use-notifications.ts similarity index 100% rename from libs/client-shared/src/hooks/useNotifications.ts rename to libs/client-shared/src/hooks/use-notifications.ts diff --git a/libs/client-shared/src/hooks/useOverflow.ts b/libs/client-shared/src/hooks/use-overflow.ts similarity index 100% rename from libs/client-shared/src/hooks/useOverflow.ts rename to libs/client-shared/src/hooks/use-overflow.ts diff --git a/libs/client-shared/src/lib/components/common.ts b/libs/client-shared/src/lib/components/common.ts index d70cb1b8..e697208a 100644 --- a/libs/client-shared/src/lib/components/common.ts +++ b/libs/client-shared/src/lib/components/common.ts @@ -1,8 +1,7 @@ import { WithReactChildren } from '@code-gear/client-shared' -type DisplayProps = WithReactChildren<{when: T}> +type DisplayProps = WithReactChildren<{ when: T }> export const Display = ({ when, children }: DisplayProps) => { return when ? children : null } - diff --git a/libs/client-shared/src/lib/components/icons.ts b/libs/client-shared/src/lib/components/icons.ts index d7a85cd2..58e9597e 100644 --- a/libs/client-shared/src/lib/components/icons.ts +++ b/libs/client-shared/src/lib/components/icons.ts @@ -1,9 +1,14 @@ -export { AiOutlineClose,AiOutlineInfoCircle } from 'react-icons/ai' -export { BsJournals,BsSearch } from 'react-icons/bs' +export { + AiOutlineClose, + AiOutlineHtml5, + AiOutlineInfoCircle, + AiOutlineSwap +} from 'react-icons/ai' +export { BsJournals, BsSearch } from 'react-icons/bs' export { GoTerminal } from 'react-icons/go' export { GrClear } from 'react-icons/gr' export { LuTestTube2 } from 'react-icons/lu' export { MdFindReplace } from 'react-icons/md' -export { SlInfo,SlSizeFullscreen } from 'react-icons/sl' +export { SlInfo, SlSizeFullscreen } from 'react-icons/sl' export { TfiSettings } from 'react-icons/tfi' export { VscPlay } from 'react-icons/vsc' diff --git a/libs/client-shared/src/lib/components/index.ts b/libs/client-shared/src/lib/components/index.ts index c9e2b71d..b024ade6 100644 --- a/libs/client-shared/src/lib/components/index.ts +++ b/libs/client-shared/src/lib/components/index.ts @@ -1,3 +1,6 @@ -export { default as AnimationProvider, useAnimations } from '../../providers/WithAnimations/AnimationProvider' +export { + default as AnimationProvider, + useAnimations +} from '../../providers/with-animations/animation-provider' export { Display } from './common' -export { default as Page } from './Page/Page' +export { default as Page } from './page/page' diff --git a/libs/client-shared/src/lib/components/Page/Page.tsx b/libs/client-shared/src/lib/components/page/page.tsx similarity index 73% rename from libs/client-shared/src/lib/components/Page/Page.tsx rename to libs/client-shared/src/lib/components/page/page.tsx index c6dd0055..7a5b8ba6 100644 --- a/libs/client-shared/src/lib/components/Page/Page.tsx +++ b/libs/client-shared/src/lib/components/page/page.tsx @@ -1,13 +1,8 @@ import { ErrorBoundary } from '../../../providers' import { WithChildren } from '../../../types' - - const Page = ({ children }: WithChildren) => { - return - {children} - + return {children} } - export default Page diff --git a/libs/client-shared/src/lib/helpers/index.ts b/libs/client-shared/src/lib/helpers/index.ts index 464ef3aa..4d218345 100644 --- a/libs/client-shared/src/lib/helpers/index.ts +++ b/libs/client-shared/src/lib/helpers/index.ts @@ -1 +1 @@ -export { LocalStorageClient } from './localStorage' +export { LocalStorageClient } from './local-storage' diff --git a/libs/client-shared/src/lib/helpers/localStorage.ts b/libs/client-shared/src/lib/helpers/local-storage.ts similarity index 87% rename from libs/client-shared/src/lib/helpers/localStorage.ts rename to libs/client-shared/src/lib/helpers/local-storage.ts index aa51b7da..c1a5583c 100644 --- a/libs/client-shared/src/lib/helpers/localStorage.ts +++ b/libs/client-shared/src/lib/helpers/local-storage.ts @@ -1,4 +1,4 @@ -import { LocalStorage, LocalStorageKeys } from '../../config/localStorage' +import { LocalStorage, LocalStorageKeys } from '../../config/local-storage' import { isString } from '../../types' export class LocalStorageClient { @@ -14,22 +14,24 @@ export class LocalStorageClient { const value = localStorage.getItem(key) as string - if (!value){ + if (!value) { return defaultVal } - return isJson(value) ? JSON.parse(value): value + return isJson(value) ? JSON.parse(value) : value } + public set(key: T, value: unknown) { if (this.isDisabled || !(key in LocalStorage)) { return } - if (isString(value)){ + if (isString(value)) { return localStorage.setItem(key, value) } localStorage.setItem(key, JSON.stringify(value)) } + public clear(key?: LocalStorageKeys): void { if (key) { return localStorage.removeItem(key) @@ -41,7 +43,7 @@ export class LocalStorageClient { const isJson = (value: string) => { try { JSON.parse(value) - } catch (e) { + } catch (error) { return false } return true diff --git a/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx b/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx deleted file mode 100644 index a6421730..00000000 --- a/libs/client-shared/src/providers/ErrorBoundary/ui/ErrorTemplate.tsx +++ /dev/null @@ -1,13 +0,0 @@ - -interface ErrorTemplateProps { - errorInfo: string -} - -const ErrorTemplate = ({ errorInfo }: ErrorTemplateProps) => { - return
- Custom Error Boundary.
-
-} - - -export default ErrorTemplate diff --git a/libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx similarity index 80% rename from libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx rename to libs/client-shared/src/providers/error-boundary/error-boundary.tsx index f9ab9036..3e913420 100644 --- a/libs/client-shared/src/providers/ErrorBoundary/ErrorBoundary.tsx +++ b/libs/client-shared/src/providers/error-boundary/error-boundary.tsx @@ -2,7 +2,7 @@ import { useErrorBoundary } from 'preact/hooks' import { WithPreactChildren } from '../../types' -import ErrorTemplate from './ui/ErrorTemplate' +import ErrorTemplate from './ui/error-template' const ErrorBoundary = ({ children }: WithPreactChildren) => { const [error] = useErrorBoundary() @@ -13,9 +13,7 @@ const ErrorBoundary = ({ children }: WithPreactChildren) => { return } - return <> - {children} - + return <>{children} } export default ErrorBoundary diff --git a/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx b/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx new file mode 100644 index 00000000..887cce19 --- /dev/null +++ b/libs/client-shared/src/providers/error-boundary/ui/error-template.tsx @@ -0,0 +1,9 @@ +const ErrorTemplate = () => { + return ( +
+ Custom Error Boundary.
+
+ ) +} + +export default ErrorTemplate diff --git a/libs/client-shared/src/providers/index.ts b/libs/client-shared/src/providers/index.ts index 2c5ef5b7..f6eac2cc 100644 --- a/libs/client-shared/src/providers/index.ts +++ b/libs/client-shared/src/providers/index.ts @@ -1,3 +1,6 @@ -export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary' -export { NotificationsContext, default as NotificationsProvider } from './Notifications/ui/NotificationsProvider' -export { default as AnimationProvider } from './WithAnimations/AnimationProvider' +export { default as ErrorBoundary } from './error-boundary/error-boundary' +export { + NotificationsContext, + default as NotificationsProvider +} from './notifications/ui/notifications-provider' +export { default as AnimationProvider } from './with-animations/animation-provider' diff --git a/libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx b/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx similarity index 76% rename from libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx rename to libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx index cd5fe2b4..de5667d6 100644 --- a/libs/client-shared/src/providers/Notifications/ui/NotificationsProvider.tsx +++ b/libs/client-shared/src/providers/notifications/ui/notifications-provider.tsx @@ -3,7 +3,6 @@ import { message } from 'antd' import { WithChildren } from '../../../types' - interface UserMessage { type?: 'success' | 'info' | 'error' message: string @@ -13,7 +12,9 @@ interface NotificationsPayload { open: (args: UserMessage) => void } -export const NotificationsContext = createContext({} as NotificationsPayload) +export const NotificationsContext = createContext( + {} as NotificationsPayload +) const NotificationsProvider = ({ children }: WithChildren) => { const [messageApi, contextHolder] = message.useMessage() @@ -26,14 +27,14 @@ const NotificationsProvider = ({ children }: WithChildren) => { }) } - return <> - {contextHolder} - - {children} - - + return ( + <> + {contextHolder} + + {children} + + + ) } - - export default NotificationsProvider diff --git a/libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx b/libs/client-shared/src/providers/with-animations/animation-provider.tsx similarity index 75% rename from libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx rename to libs/client-shared/src/providers/with-animations/animation-provider.tsx index 5ca090d3..a4dfab6b 100644 --- a/libs/client-shared/src/providers/WithAnimations/AnimationProvider.tsx +++ b/libs/client-shared/src/providers/with-animations/animation-provider.tsx @@ -4,7 +4,6 @@ import { useBooleanState } from '../../hooks' import { Display } from '../../lib/components' import { GestureType, SpringType, WithChildren } from '../../types' - type AnimationContextPayload = Partial<{ Gesture: GestureType Spring: SpringType @@ -36,17 +35,20 @@ const AnimationProvider = ({ children }: WithChildren) => { loadLibraries() }, []) - const animationPayload: AnimationContextPayload = useMemo(() => ({ - Spring: SpringRef.current, - Gesture: GestureRef.current, - isLoaded: loader.val - }), [loader.val]) - - return - - {children} - - + const animationPayload: AnimationContextPayload = useMemo( + () => ({ + Spring: SpringRef.current, + Gesture: GestureRef.current, + isLoaded: loader.val + }), + [loader.val] + ) + + return ( + + {children} + + ) } export const useAnimations = () => { diff --git a/libs/client-shared/src/styles/mixins.ts b/libs/client-shared/src/styles/mixins.ts index ab3b0667..9912a56a 100644 --- a/libs/client-shared/src/styles/mixins.ts +++ b/libs/client-shared/src/styles/mixins.ts @@ -1,4 +1,4 @@ -import { css, DefaultTheme } from 'styled-components' +import { css } from 'styled-components' export const wh = (w = '100%', h = w) => css` width: ${w}; @@ -23,17 +23,20 @@ export const flex = (jc = 'flex-start', ai = 'stretch', dir = 'row') => css` export const hover = (color: string) => css` transition: color 200ms; &:hover { - color: ${color} + color: ${color}; } ` type Font = 'Poppins' | 'Consolas' -export const font = (font : Font) => css` +export const font = (font: Font) => css` font-family: '${font}', sans-serif; ` -export const antdColor = (color: string) => ({ theme } : any) => `${theme[color]} !important;` +export const antdColor = + (color: string) => + ({ theme }: any) => + `${theme[color]} !important;` export const customScrollbar = (elem = '&') => css` ${elem}::-webkit-scrollbar { @@ -62,7 +65,9 @@ type AbsoluteProps = Partial<{ export const absolute = (props: AbsoluteProps) => css` position: absolute; - ${Object.entries(props).map(([key, value]) => `${key}: ${value};`).join('\n')} + ${Object.entries(props) + .map(([key, value]) => `${key}: ${value};`) + .join('\n')} ` export const margin = (left: number, top: number) => css` diff --git a/libs/client-shared/src/styles/variables.ts b/libs/client-shared/src/styles/variables.ts index ca0c7661..77cf1704 100644 --- a/libs/client-shared/src/styles/variables.ts +++ b/libs/client-shared/src/styles/variables.ts @@ -1,2 +1 @@ export const br = '1px solid' - diff --git a/libs/client-shared/src/types/common/common.ts b/libs/client-shared/src/types/common/common.ts index 511f8634..cfd7af32 100644 --- a/libs/client-shared/src/types/common/common.ts +++ b/libs/client-shared/src/types/common/common.ts @@ -15,14 +15,14 @@ export type WithChildren = T & { children: ReactElement | ReactNode } -export type TargetKey = MouseEvent | KeyboardEvent | string; +export type TargetKey = MouseEvent | KeyboardEvent | string export type Nullable = T | null export type Undefinable = T | undefined -export type ValueOf = T[keyof T]; +export type ValueOf = T[keyof T] export type Keys = T[number] -export type Hex = `#${string}`; +export type Hex = `#${string}` diff --git a/libs/client-shared/src/types/common/typeGuards.ts b/libs/client-shared/src/types/common/type-guards.ts similarity index 100% rename from libs/client-shared/src/types/common/typeGuards.ts rename to libs/client-shared/src/types/common/type-guards.ts diff --git a/libs/client-shared/src/types/index.ts b/libs/client-shared/src/types/index.ts index c6d489bd..6ff1b0c3 100644 --- a/libs/client-shared/src/types/index.ts +++ b/libs/client-shared/src/types/index.ts @@ -1,4 +1,4 @@ export * from './common/common' -export * from './common/typeGuards' +export * from './common/type-guards' export * from './lib/animations' export * from './lib/context' diff --git a/libs/client-shared/src/ui/Modal/index.ts b/libs/client-shared/src/ui/Modal/index.ts deleted file mode 100644 index 8a5d3bdd..00000000 --- a/libs/client-shared/src/ui/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Modal } from './ui/Modal' diff --git a/libs/client-shared/src/ui/ColorButton/ColorButton.tsx b/libs/client-shared/src/ui/color-button/color-button.tsx similarity index 72% rename from libs/client-shared/src/ui/ColorButton/ColorButton.tsx rename to libs/client-shared/src/ui/color-button/color-button.tsx index fede8f2f..62de0398 100644 --- a/libs/client-shared/src/ui/ColorButton/ColorButton.tsx +++ b/libs/client-shared/src/ui/color-button/color-button.tsx @@ -3,20 +3,20 @@ import { ButtonProps } from 'antd/es/button' import { WithChildren } from '../../types' -type ColorButtonProps = ButtonProps & WithChildren<{ - override: string -}> - +type ColorButtonProps = ButtonProps & + WithChildren<{ + override: string + }> const ColorButton = ({ children, override, ...props }: ColorButtonProps) => { const modifiedTheme = { - token: { colorPrimary: override } + token: { colorPrimary: override } } return ( - + ) } diff --git a/libs/client-shared/src/ui/index.ts b/libs/client-shared/src/ui/index.ts index 34cce506..4aaf03a7 100644 --- a/libs/client-shared/src/ui/index.ts +++ b/libs/client-shared/src/ui/index.ts @@ -1,2 +1,3 @@ -export { default as ColorButton } from './ColorButton/ColorButton' -export { Modal } from './Modal' +export { default as ColorButton } from './color-button/color-button' +export { Modal } from './modal' +export { Popover } from './popover' diff --git a/libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts b/libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts similarity index 68% rename from libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts rename to libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts index 92595a4c..2faa5e1a 100644 --- a/libs/client-shared/src/ui/Modal/hooks/useModalTransitions.ts +++ b/libs/client-shared/src/ui/modal/hooks/use-modal-transitions.ts @@ -1,7 +1,7 @@ export const useModalTransitions = () => { return { opacity: { - from: () => ({ opacity: 0 }), + from: () => ({ opacity: 0 }), to: () => ({ opacity: 1 }) }, transform: { @@ -10,7 +10,9 @@ export const useModalTransitions = () => { x: -150 }), to: (isOpen: boolean) => ({ - transform: isOpen ? 'scale(1.0) rotate(0deg)' : 'scale(0.9) rotate(8deg)', + transform: isOpen + ? 'scale(1.0) rotate(0deg)' + : 'scale(0.9) rotate(8deg)', x: isOpen ? 0 : -150 }) } diff --git a/libs/client-shared/src/ui/modal/index.ts b/libs/client-shared/src/ui/modal/index.ts new file mode 100644 index 00000000..cc487f54 --- /dev/null +++ b/libs/client-shared/src/ui/modal/index.ts @@ -0,0 +1 @@ +export { default as Modal } from './ui/modal' diff --git a/libs/client-shared/src/ui/Modal/ui/Modal.styles.ts b/libs/client-shared/src/ui/modal/ui/modal.styles.ts similarity index 82% rename from libs/client-shared/src/ui/Modal/ui/Modal.styles.ts rename to libs/client-shared/src/ui/modal/ui/modal.styles.ts index 541674bd..be6c0c67 100644 --- a/libs/client-shared/src/ui/Modal/ui/Modal.styles.ts +++ b/libs/client-shared/src/ui/modal/ui/modal.styles.ts @@ -1,6 +1,13 @@ import styled from 'styled-components' -import { absolute, br, color, customScrollbar, flex, shadow, wh } from '../../../styles' +import { + absolute, + color, + customScrollbar, + flex, + shadow, + wh +} from '../../../styles' export const ModalBackground = styled.div` ${flex('center', 'center')}; @@ -8,7 +15,7 @@ export const ModalBackground = styled.div` left: '0', top: '0' })} - ${wh('100vw','100vh')}; + ${wh('100vw', '100vh')}; background: rgba(0, 0, 0, 0.44); z-index: 100; ` @@ -16,7 +23,7 @@ export const ModalBackground = styled.div` export const ModalStyles = styled.div` display: grid; position: relative; - ${wh('50vw','60vh')}; + ${wh('50vw', '60vh')}; background: ${color('grey')}; border: 2px solid ${color('lightGrey')}; min-height: 300px; @@ -32,10 +39,9 @@ export const ModalStyles = styled.div` export const ModalContainer = styled.div` margin: 0 auto; margin-top: 18px; - ${wh('60%','100%')} + ${wh('60%', '100%')} & > * { cursor: initial; color: ${color('light')}; } ` - diff --git a/libs/client-shared/src/ui/Modal/ui/Modal.tsx b/libs/client-shared/src/ui/modal/ui/modal.tsx similarity index 52% rename from libs/client-shared/src/ui/Modal/ui/Modal.tsx rename to libs/client-shared/src/ui/modal/ui/modal.tsx index a0d516a4..6b9e2f12 100644 --- a/libs/client-shared/src/ui/Modal/ui/Modal.tsx +++ b/libs/client-shared/src/ui/modal/ui/modal.tsx @@ -3,11 +3,15 @@ import Scrollbar from 'react-smooth-scrollbar' import { Portal } from '@reach/portal' -import { AnimationProvider, Display, useAnimations } from '../../../lib/components' +import { + AnimationProvider, + Display, + useAnimations +} from '../../../lib/components' import { WithChildren } from '../../../types' -import { useModalTransitions } from '../hooks/useModalTransitions' +import { useModalTransitions } from '../hooks/use-modal-transitions' -import { ModalBackground, ModalContainer, ModalStyles } from './Modal.styles' +import { ModalBackground, ModalContainer, ModalStyles } from './modal.styles' type ModalProps = WithChildren<{ isOpen: boolean @@ -41,7 +45,12 @@ export const Modal = ({ onClose, isOpen, children }: ModalProps) => { const bind = Gesture.useDrag( ({ offset: [ox, oy], down }) => { - api.start({ y: down ? oy : 0, immediate: false, x: down ? ox : 0, scale: down ? 1.07 : 1 }) + api.start({ + y: down ? oy : 0, + immediate: false, + x: down ? ox : 0, + scale: down ? 1.07 : 1 + }) }, { from: () => [0, 0], filterTaps: true, rubberband: true, delay: 200 } ) @@ -50,35 +59,38 @@ export const Modal = ({ onClose, isOpen, children }: ModalProps) => { e.stopPropagation() } - return <> - {containerTransition( - (spring, item) => - - - - - - - {children} - - - - - - ) - } + return ( + <> + {containerTransition((spring, item) => ( + + + + + + {children} + + + + + + ))} + ) } const ModalWrapper = (props: ModalProps) => { - return - - + return ( + + + + ) } export default ModalWrapper diff --git a/libs/client-shared/src/ui/popover/hooks/index.ts b/libs/client-shared/src/ui/popover/hooks/index.ts new file mode 100644 index 00000000..b8be8b84 --- /dev/null +++ b/libs/client-shared/src/ui/popover/hooks/index.ts @@ -0,0 +1 @@ +export { usePopoverAnimation } from './use-popover-animation' diff --git a/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts b/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts new file mode 100644 index 00000000..dfda4e81 --- /dev/null +++ b/libs/client-shared/src/ui/popover/hooks/use-popover-animation.ts @@ -0,0 +1,58 @@ +import { useAnimations } from '../../../providers/with-animations/animation-provider' +import { VoidFunction } from '../../../types' + +export const usePopoverAnimation = ( + closeCallback: VoidFunction, + height: number +) => { + const { Spring, Gesture } = useAnimations() + const [{ y }, api] = Spring.useSpring(() => ({ y: height })) + + const open = () => { + api.start({ y: 0, immediate: false, config: Spring.config.gentle }) + } + + const close = (velocity = 0) => { + closeCallback() + api.start({ + y: height, + immediate: false, + config: { ...Spring.config.stiff, velocity } + }) + } + + const bind = Gesture.useDrag( + ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], cancel }) => { + if (oy < -70) cancel() + if (last) { + oy > height * 0.5 || (vy > 0.5 && dy === 1) ? close(vy) : open() + } else api.start({ y: oy, immediate: dy === -1 }) + }, + { + from: () => [0, y.get()], + filterTaps: true, + bounds: { top: 0 }, + rubberband: true + } + ) + + const display = y.to((py) => (py < height ? 'block' : 'none')) + + const toggle = (isOpened: boolean) => { + if (isOpened) { + open() + } else { + close() + } + } + + return { + toggle, + bind, + div: Spring.a.div, + springs: { + display, + y + } + } +} diff --git a/libs/client-shared/src/ui/popover/index.ts b/libs/client-shared/src/ui/popover/index.ts new file mode 100644 index 00000000..91436cb5 --- /dev/null +++ b/libs/client-shared/src/ui/popover/index.ts @@ -0,0 +1 @@ +export { default as Popover } from './ui/popover' diff --git a/libs/client-shared/src/ui/popover/ui/popover.styles.tsx b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx new file mode 100644 index 00000000..e932ceb1 --- /dev/null +++ b/libs/client-shared/src/ui/popover/ui/popover.styles.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components' + +import { color, customScrollbar } from '../../../styles' + +interface PopoverStylesProps { + readonly $bottom: number +} + +export const PopoverStyles = styled.div` + padding-left: 15px; + z-index: 15; + position: fixed; + right: 0; + height: calc(100vh + 100px); + width: calc(100% - 54px); + border-radius: 6px 6px 0; + background: ${color('darkBlue')}; + border-top: 2px solid ${color('lightGrey')}; + touch-action: none; + bottom: ${({ $bottom }) => `calc(-100vh + ${$bottom - 100}px)`}; + overflow-y: auto; + box-sizing: border-box; + scroll-behavior: smooth; + ${customScrollbar()}; +` diff --git a/libs/client-shared/src/ui/popover/ui/popover.tsx b/libs/client-shared/src/ui/popover/ui/popover.tsx new file mode 100644 index 00000000..077a13d0 --- /dev/null +++ b/libs/client-shared/src/ui/popover/ui/popover.tsx @@ -0,0 +1,39 @@ +import { useEffect } from 'react' + +import { AnimationProvider } from '../../../providers' +import { VoidFunction, WithChildren } from '../../../types' +import { usePopoverAnimation } from '../hooks' + +import { PopoverStyles } from './popover.styles' + +type PopoverProps = WithChildren<{ + onClose: VoidFunction + isOpen: boolean + height: number +}> + +const Popover = ({ children, onClose, isOpen, height }: PopoverProps) => { + const motion = usePopoverAnimation(onClose, height) + + useEffect(() => { + motion.toggle(isOpen) + }, [isOpen]) + + return ( + + {children} + + ) +} + +export default (props: PopoverProps) => { + return ( + + + + ) +} diff --git a/libs/client-shared/vite.config.ts b/libs/client-shared/vite.config.ts index 0ce4545f..fd5b3523 100644 --- a/libs/client-shared/vite.config.ts +++ b/libs/client-shared/vite.config.ts @@ -44,8 +44,12 @@ export default defineConfig({ }, rollupOptions: { // External packages that should not be bundled into your library. - external: ['react', 'react-dom', - 'react/jsx-runtime', 'react-smooth-scrollbar'] + external: [ + 'react', + 'react-dom', + 'react/jsx-runtime', + 'react-smooth-scrollbar' + ] } }, diff --git a/libs/config/.eslintrc.json b/libs/config/.eslintrc.json index 052a5874..5485fc4e 100644 --- a/libs/config/.eslintrc.json +++ b/libs/config/.eslintrc.json @@ -1,4 +1,4 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.js"], "ignorePatterns": ["!**/*"] } diff --git a/libs/config/src/env/client.ts b/libs/config/src/env/client.ts index 084b87d4..e5f69d35 100644 --- a/libs/config/src/env/client.ts +++ b/libs/config/src/env/client.ts @@ -1 +1 @@ -export const clientUrl = process.env['CLIENT_URL'] ?? 'http://localhost:3000' +export const clientUrl = process.env.CLIENT_URL ?? 'http://localhost:3000' diff --git a/libs/config/src/env/server.ts b/libs/config/src/env/server.ts index 140ed1c2..6a4d170e 100644 --- a/libs/config/src/env/server.ts +++ b/libs/config/src/env/server.ts @@ -1,11 +1,11 @@ -export const serverPrefix = process.env['SERVER_PREFIX'] ?? '' +export const serverPrefix = process.env.SERVER_PREFIX ?? '' -export const serverPort = process.env['SERVER_PORT'] ?? 6868 +export const serverPort = process.env.SERVER_PORT ?? 6868 -export const compilerApiUrl = process.env['CODE_COMPILER_API_URL'] ?? 'https://api.codex.jaagrav.in' - -export const serverUrl = process.env['SERVER_URL'] ?? 'http://localhost:6868' +export const compilerApiUrl = + process.env.CODE_COMPILER_API_URL ?? 'https://api.codex.jaagrav.in' +export const serverUrl = process.env.SERVER_URL ?? 'http://localhost:6868' export const EndPoints = { CODE_EXECUTOR_API: 'execute' diff --git a/libs/editor/.eslintrc.json b/libs/editor/.eslintrc.json index 8fc394d4..bd46ea64 100644 --- a/libs/editor/.eslintrc.json +++ b/libs/editor/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json"], + "extends": ["../../.eslintrc.js"], "ignorePatterns": ["!**/*"], "parser": "@typescript-eslint/parser", "globals": { diff --git a/libs/editor/src/app/Editor.tsx b/libs/editor/src/app/Editor.tsx deleted file mode 100644 index 0b38280a..00000000 --- a/libs/editor/src/app/Editor.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Settings } from '@/components/Settings' -import { Terminal } from '@/components/Terminal' -import { Aside } from '@/modules/Aside' -import { EditorContent } from '@/modules/EditorContent' -import { Header } from '@/modules/Header' - -import { EditorStoreProvider } from './providers/EditorStore' -import { ModalsContextProvider } from './providers/ModalsProvider' -import { ThemeLoader } from './providers/ThemeLoader' -import { EditorStyles, EditorWrapper } from './styles/Editor.styles' - -import { NotificationsProvider, Page, useOverflow } from '$/client-shared' - - -export const Editor = () => { - useOverflow() - - return - - - - - -
- -