Refactor the Checkbox component to a common UI location and implement a new modal for staging unstaged Git files before commit generation

Author: robertpiosik

…itor/panel/Checkbox/Checkbox.module.scss …tor/common/Checkbox/Checkbox.module.scsspackages/ui/src/components/editor/panel/Checkbox/Checkbox.module.scss renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.module.scss packages/ui/src/components/editor/panel/Checkbox/Checkbox.module.scss renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.module.scss

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Field } from './Field'
 import { Input } from '../../common/Input'
-import { Checkbox } from '../Checkbox'
+import { Checkbox } from '../../common/Checkbox'
 
 export default {
   component: Field

…itor/panel/Checkbox/Checkbox.stories.tsx …tor/common/Checkbox/Checkbox.stories.tsxpackages/ui/src/components/editor/panel/Checkbox/Checkbox.stories.tsx renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.stories.tsx packages/ui/src/components/editor/panel/Checkbox/Checkbox.stories.tsx renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import styles from './Presets.module.scss'
 import { IconButton } from '../IconButton/IconButton'
-import { Checkbox } from '../Checkbox'
+import { Checkbox } from '../../common/Checkbox'
 import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { Icon } from '../../common/Icon'

…nents/editor/panel/Checkbox/Checkbox.tsx …ents/editor/common/Checkbox/Checkbox.tsxpackages/ui/src/components/editor/panel/Checkbox/Checkbox.tsx renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.tsx packages/ui/src/components/editor/panel/Checkbox/Checkbox.tsx renamed to packages/ui/src/components/editor/common/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import { FileInReview } from '@shared/types/file-in-review'
 import cn from 'classnames'
 import styles from './ResponseReview.module.scss'
 import { Button } from '../Button'
-import { Checkbox } from '../Checkbox'
+import { Checkbox } from '../../common/Checkbox'
 import { IconButton } from '../IconButton/IconButton'
 
 type Props = {

…omponents/editor/panel/Checkbox/index.ts …mponents/editor/common/Checkbox/index.tspackages/ui/src/components/editor/panel/Checkbox/index.ts renamed to packages/ui/src/components/editor/common/Checkbox/index.ts packages/ui/src/components/editor/panel/Checkbox/index.ts renamed to packages/ui/src/components/editor/common/Checkbox/index.ts

@@ -6,25 +6,23 @@ import cn from 'classnames'
 type Props = {
   children: ReactNode
   scroll_to_top_key?: any
+  max_height?: string
 }
 
-export const Scrollable: React.FC<Props> = ({
-  children,
-  scroll_to_top_key
-}) => {
+export const Scrollable: React.FC<Props> = (props) => {
   const [has_top_shadow, set_has_top_shadow] = useState(false)
   const simplebar_ref = useRef<any>(null)
 
   useEffect(() => {
-    if (scroll_to_top_key === undefined) return
+    if (props.scroll_to_top_key === undefined) return
 
     const simplebar_instance = simplebar_ref.current
     if (!simplebar_instance) return
 
     const scroll_element = simplebar_instance.getScrollElement()
     if (!scroll_element) return
     scroll_element.scrollTop = 0
-  }, [scroll_to_top_key])
+  }, [props.scroll_to_top_key])
 
   useEffect(() => {
     const simplebar_instance = simplebar_ref.current
@@ -65,10 +63,11 @@ export const Scrollable: React.FC<Props> = ({
       <SimpleBar
         ref={simplebar_ref}
         style={{
-          height: '100%'
+          height: '100%',
+          maxHeight: props.max_height
         }}
       >
-        {children}
+        {props.children}
       </SimpleBar>
     </div>
   )

packages/ui/src/components/editor/panel/Field/Field.stories.tsx

@@ -0,0 +1,40 @@
+.title {
+  text-align: center;
+  font-weight: 500;
+  font-size: var(--font-size-14px);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-8px);
+}
+
+.files {
+  margin: 0 -12px;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-4px);
+    padding: 0 var(--padding-12px);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-8px);
+    cursor: pointer;
+    font-size: var(--vscode-font-size);
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--padding-8px);
+
+  > button {
+    flex: 1;
+  }
+}

packages/ui/src/components/editor/panel/Presets/Presets.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { StageFilesModal } from './StageFilesModal'
+
+export default {
+  component: StageFilesModal
+}
+
+const mock_files = [
+  'packages/ui/src/components/Button.tsx',
+  'packages/ui/src/components/Modal.tsx',
+  'packages/vscode/src/utils/helpers.ts',
+  'packages/shared/src/index.ts',
+  'README.md'
+]
+
+export const Default = () => {
+  const [visible, set_visible] = useState(true)
+
+  const handle_stage = (files: string[]) => {
+    alert(`Staging ${files.length} files:\n${files.join('\n')}`)
+    set_visible(false)
+  }
+
+  const handle_cancel = () => {
+    set_visible(false)
+  }
+
+  return visible ? (
+    <StageFilesModal
+      files={mock_files}
+      on_stage={handle_stage}
+      on_cancel={handle_cancel}
+    />
+  ) : null
+}