V0.1.0 (#10)

* 4 enhanced spotlight (#6) * refactored existing spotlight to cmdk * nested spotlight actions, reworked project actions * Update SpotlightItem.tsx * spotlight model and enum actions * resetting spotlight search on navigation * displaying shortcuts is spotlight * Update SpotlightMainActions.tsx * new model, enum shortcuts * spotlight create model enum field sub option * 3 rework blocks editors (#7) * refactored existing spotlight to cmdk * nested spotlight actions, reworked project actions * Update SpotlightItem.tsx * spotlight model and enum actions * resetting spotlight search on navigation * displaying shortcuts is spotlight * Update SpotlightMainActions.tsx * new model, enum shortcuts * new schema editor, sorting schema blocks wip * removed old node forms * moved datasource, generator settings to sidebar * sorting blocks, base block form container * sortable block fields * model field modifier, type selectors * cleanup * collapsing fields on dnd sort * layout change on sidebar open, focus selected block btn * remove field btn, resizd schema sidebar * Update .gitignore * new field form * enum form wip * 5 dark mode support (#9) * dark theme * spotlight not found component * welcome message shortcuts * changed new model field form position * Update NewModelFieldForm.tsx * 8 persistent block and fields ids (#11) * persistent model field ids for editor * persistent enum field ids for editor * Update Editor.tsx * new enum field form * explicit n-m relations switch (#13)
smashboy · Mar 7, 2023 · 296ec21 · 296ec21
1 parent b364ad9
commit 296ec21
Show file tree

Hide file tree

Showing 86 changed files with 2,418 additions and 565 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 dist
+.next
 out
 *.log*
 .turbo

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -44,6 +44,7 @@
     "@tiptap/extension-link": "^2.0.0-beta.207",
     "@tiptap/react": "^2.0.0-beta.207",
     "@tiptap/starter-kit": "^2.0.0-beta.207",
+    "cmdk": "^0.1.22",
     "color-alpha": "^1.1.3",
     "dagre": "^0.8.5",
     "effector": "^22.4.0",
@@ -58,7 +59,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
-    "reactflow": "^11.5.1"
+    "reactflow": "^11.5.1",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^1.0.1",
@@ -67,6 +69,7 @@
     "@types/node": "16.11.22",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^2.2.0",

diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
@@ -1,19 +1,22 @@
 import { useEffect } from 'react'
+import { useStore } from 'effector-react'
 import { ReactFlowProvider } from 'reactflow'
-import { Group, Paper, Stack } from '@mantine/core'
+import { Group, MantineProvider, Paper, Stack } from '@mantine/core'
+import { NotificationsProvider } from '@mantine/notifications'
 import { Editor } from './modules/editor'
 import { CreateProjectModal, getProjectsListEffect, ProjectSelectorModal } from './modules/projects'
 import { loadGlobalSettingsEffect, SettingsModal } from './modules/settings'
 import { Spotlight, useGeneralShortcuts } from './modules/spotlight'
-import 'reactflow/dist/style.css'
-import './transports'
-
-import 'prisma-state/_new/state'
-import 'prisma-state/PrismaSchemaState'
 import { useUpdatesManager } from './core/hooks'
 import { ConfirmCloseApplicationModal } from './core/components'
+import { $appTheme } from './stores/ui/theme'
+import { theme } from './core/theme'
+import 'reactflow/dist/style.css'
+import './transports'
 
 function App() {
+  const appTheme = useStore($appTheme)
+
   useGeneralShortcuts()
   useUpdatesManager()
 
@@ -23,29 +26,32 @@ function App() {
   }, [])
 
   return (
-    <ReactFlowProvider>
-      <Spotlight>
-        <Group w="100%" h="100%" spacing={0} noWrap>
-          <Stack w="100%" h="100%" spacing={0} sx={{ flex: 1 }}>
-            <Paper
-              w="100%"
-              h="100%"
-              style={{
-                transition: 'width 400ms ease',
-                overflow: 'hidden',
-                borderRadius: 0
-              }}
-            >
-              <Editor />
-            </Paper>
-          </Stack>
-          <SettingsModal />
-          <CreateProjectModal />
-          <ProjectSelectorModal />
-          <ConfirmCloseApplicationModal />
-        </Group>
-      </Spotlight>
-    </ReactFlowProvider>
+    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme(appTheme)}>
+      <NotificationsProvider>
+        <ReactFlowProvider>
+          <Group w="100%" h="100%" spacing={0} noWrap>
+            <Stack w="100%" h="100%" spacing={0} sx={{ flex: 1 }}>
+              <Paper
+                w="100%"
+                h="100%"
+                style={{
+                  transition: 'width 400ms ease',
+                  overflow: 'hidden',
+                  borderRadius: 0
+                }}
+              >
+                <Editor />
+              </Paper>
+            </Stack>
+            <SettingsModal />
+            <CreateProjectModal />
+            <ProjectSelectorModal />
+            <ConfirmCloseApplicationModal />
+            <Spotlight />
+          </Group>
+        </ReactFlowProvider>
+      </NotificationsProvider>
+    </MantineProvider>
   )
 }
 

diff --git a/apps/desktop/src/renderer/src/core/components/Message.tsx b/apps/desktop/src/renderer/src/core/components/Message.tsx
@@ -10,10 +10,10 @@ interface MessageProps {
 export const Message: React.FC<MessageProps> = ({ title, description, icon, children }) => (
   <Stack w="100%" h="100%" justify="center" spacing={0} align="center">
     {icon}
-    <Text fz="xl" color="gray">
+    <Text fz="xl" color="dimmed">
       {title}
     </Text>
-    <Text color="gray">{description}</Text>
+    <Text color="dimmed">{description}</Text>
     <Box mt="sm">{children}</Box>
   </Stack>
 )
diff --git a/apps/desktop/src/renderer/src/core/components/PaperGlass.tsx b/apps/desktop/src/renderer/src/core/components/PaperGlass.tsx
@@ -8,8 +8,11 @@ export const PaperGlass: React.FC<Omit<PaperProps, 'sx' | 'shadow' | 'radius'>>
     {...props}
     shadow="sm"
     sx={(theme) => ({
-      backgroundColor: theme.fn.rgba(theme.colors.gray[3], 0.35),
-      backdropFilter: 'blur(5px)'
+      backgroundColor:
+        theme.colorScheme === 'light'
+          ? theme.fn.rgba(theme.colors.gray[3], 0.75)
+          : theme.fn.rgba(theme.colors.dark[6], 0.75),
+      backdropFilter: 'blur(2px)'
     })}
   >
     {children}

diff --git a/apps/desktop/src/renderer/src/core/theme.ts b/apps/desktop/src/renderer/src/core/theme.ts
@@ -1,7 +1,7 @@
-import { MantineThemeOverride } from '@mantine/core'
+import { MantineThemeOverride, ColorScheme } from '@mantine/core'
 
-export const theme: MantineThemeOverride = {
-  colorScheme: 'light',
+export const theme = (colorScheme: ColorScheme): MantineThemeOverride => ({
+  colorScheme: colorScheme,
   defaultRadius: 'md',
   defaultGradient: {
     from: 'blue',
@@ -76,8 +76,7 @@ export const theme: MantineThemeOverride = {
     Accordion: {
       defaultProps: {
         variant: 'separated',
-        radius: 'md',
-        chevronPosition: 'left'
+        radius: 'md'
       }
     },
     MultiSelect: {
@@ -104,4 +103,4 @@ export const theme: MantineThemeOverride = {
       }
     }
   }
-}
+})
diff --git a/apps/desktop/src/renderer/src/main.tsx b/apps/desktop/src/renderer/src/main.tsx
@@ -1,16 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { MantineProvider } from '@mantine/core'
-import { NotificationsProvider } from '@mantine/notifications'
 import App from './App'
-import { theme } from './core/theme'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
-      <NotificationsProvider>
-        <App />
-      </NotificationsProvider>
-    </MantineProvider>
+    <App />
   </React.StrictMode>
 )
diff --git a/...op/src/renderer/src/modules/editor/components/CreateRelationModal/CreateRelationModal.tsx b/...op/src/renderer/src/modules/editor/components/CreateRelationModal/CreateRelationModal.tsx
@@ -29,12 +29,12 @@ export const CreateRelationModal = () => {
   const [updatedState, setUpdatedState] = useState(createPrismaSchemaState())
 
   useEffect(() => {
-    const { source, target, name, onDelete, onUpdate, isOptional } = data
+    const { source, target, name, onDelete, onUpdate, isOptional, isExplicit } = data
 
     const clonedState = schemaState._clone()
 
     if (selectedRelationType === 'n-m') {
-      clonedState.relations.createManyToManyRelation(source, target, { name })
+      clonedState.relations.createManyToManyRelation(source, target, { name, explicit: isExplicit })
     } else if (selectedRelationType === '1-1') {
       clonedState.relations.createOneToOneRelation(source, target, {
         name,

diff --git a/...esktop/src/renderer/src/modules/editor/components/CreateRelationModal/NewRelationForm.tsx b/...esktop/src/renderer/src/modules/editor/components/CreateRelationModal/NewRelationForm.tsx
@@ -27,7 +27,7 @@ const relationTypeOptions = [
 export const NewRelationForm = () => {
   const { data, modelIds, selectedRelationType } = useStore($store)
 
-  const { source, target, name: relationName, onDelete, onUpdate, isOptional } = data
+  const { source, target, name: relationName, onDelete, onUpdate, isOptional, isExplicit } = data
 
   const disableNonNMActions = !target || selectedRelationType === 'n-m'
 
@@ -48,8 +48,9 @@ export const NewRelationForm = () => {
   const handleRelationNameInput = (event: React.ChangeEvent<HTMLInputElement>) =>
     setCreateRelationModalDataEvent({ ...data, name: event.target.value })
 
-  const handleOptionalRelationSwitch = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setCreateRelationModalDataEvent({ ...data, isOptional: event.currentTarget.checked })
+  const handleSwitch =
+    (field: 'isExplicit' | 'isOptional') => (event: React.ChangeEvent<HTMLInputElement>) =>
+      setCreateRelationModalDataEvent({ ...data, [field]: event.currentTarget.checked })
 
   return (
     <Stack w="40%">
@@ -82,7 +83,7 @@ export const NewRelationForm = () => {
         description="Defines the name of the relationship. In an m-n-relation, it also determines the name of the underlying relation table."
         name={relationName}
         onChange={handleRelationNameInput}
-        disabled={!target}
+        disabled={!target || (selectedRelationType === 'n-m' && isExplicit)}
       />
 
       <Stack>
@@ -103,9 +104,15 @@ export const NewRelationForm = () => {
         <Switch
           label="Optional"
           checked={isOptional}
-          onChange={handleOptionalRelationSwitch}
+          onChange={handleSwitch('isOptional')}
           disabled={disableNonNMActions}
         />
+        <Switch
+          label="Explicit many-to-many relation"
+          checked={isExplicit}
+          onChange={handleSwitch('isExplicit')}
+          disabled={!disableNonNMActions}
+        />
       </Stack>
     </Stack>
   )

diff --git a/...p/src/renderer/src/modules/editor/components/CreateRelationModal/PreviewSchemaChanges.tsx b/...p/src/renderer/src/modules/editor/components/CreateRelationModal/PreviewSchemaChanges.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react'
+import { combine } from 'effector'
 import { useStore } from 'effector-react'
 import { Stack, Text } from '@mantine/core'
 import { Prism } from '@mantine/prism'
 import { PrismaSchemaStateInstance } from 'prisma-state/_new/types'
-import { $createRelationModalData } from '../../stores'
+import { $createRelationModalData, $selectedRelationType } from '../../stores'
 import { formatSchema } from '@renderer/core/utils'
 import { BlockBase } from 'prisma-state/_new/blocks'
 
@@ -13,21 +14,30 @@ interface PreviewSchemaChangesProps {
   state: PrismaSchemaStateInstance
 }
 
+const $store = combine({
+  data: $createRelationModalData,
+  selectedRelationType: $selectedRelationType
+})
+
 export const PreviewSchemaChanges: React.FC<PreviewSchemaChangesProps> = ({ state }) => {
-  const data = useStore($createRelationModalData)
+  const { data, selectedRelationType } = useStore($store)
 
-  const { source: sourceModelId, target: targetModelId } = data
+  const { source, target, isExplicit } = data
 
   const [preview, setPreview] = useState('')
 
   useEffect(() => {
     const handleCreatePreview = async () => {
-      const sourceModel = state.model(sourceModelId)
-      const targetModel = state.model(targetModelId)
+      console.log(state)
 
       const preview = await formatSchema(`
-        ${BlockBase._toString(targetModel, state)}
-        ${BlockBase._toString(sourceModel, state)}
+        ${BlockBase._toString(state.model(target), state)}
+        ${BlockBase._toString(state.model(source), state)}
+        ${
+          selectedRelationType === 'n-m' && isExplicit
+            ? BlockBase._toString(state.model(`${source}On${target}`), state)
+            : ''
+        }
       `)
 
       setPreview(preview)

diff --git a/apps/desktop/src/renderer/src/modules/editor/components/DiagramEditor.tsx b/apps/desktop/src/renderer/src/modules/editor/components/DiagramEditor.tsx
@@ -38,6 +38,7 @@ import { EDITOR_REMOTE_SCHEMA_CHANGES } from '@shared/common/configs/api'
 import { createPrismaSchemaState } from 'prisma-state/_new/state'
 import { CreateRelationModal } from './CreateRelationModal'
 import { CreateEnumFieldModal } from './CreateEnumFieldModal'
+import { SchemaSidebarEditor } from './SchemaSidebarEditor'
 
 const $store = combine({
   nodes: $nodesArray,
@@ -129,7 +130,8 @@ export const DiagramEditor = () => {
         name: '',
         onDelete: null,
         onUpdate: null,
-        isOptional: false
+        isOptional: false,
+        isExplicit: false
       })
 
       return
@@ -166,6 +168,7 @@ export const DiagramEditor = () => {
         <Background />
         <EditorToolbar />
         <NodesToolbar />
+        <SchemaSidebarEditor />
       </ReactFlow>
       <CreateEnumFieldModal />
       <CreateRelationModal />

diff --git a/apps/desktop/src/renderer/src/modules/editor/components/DragHandle.tsx b/apps/desktop/src/renderer/src/modules/editor/components/DragHandle.tsx
@@ -3,10 +3,11 @@ import { ActionIcon, ActionIconProps } from '@mantine/core'
 import { IconGripVertical } from '@tabler/icons'
 
 // TODO: override global cursor
-export const DragHandle = forwardRef<HTMLButtonElement, Omit<ActionIconProps, 'sx'>>((props) => (
+export const DragHandle = forwardRef<HTMLButtonElement, ActionIconProps>(({ sx, ...props }) => (
   <ActionIcon
     {...props}
     sx={{
+      ...sx,
       cursor: 'grab',
       ':active': {
         cursor: 'grabbing'
-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     node_modules
     dist
+    .next
     out
     *.log*
     .turbo
@@ Expand Down @@