[LG-5098] feat(CodeEditor): adds custom search panel

.changeset/yummy-jobs-wear.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/code-editor': minor
+---
+
+- Adds a custom search panel to the `CodeEditor` component. Contains all of the same functionality that was in the built in panel but matches the LG design language.
+- Adds prop to allow consumers to enable/disable the search panel. 
+

packages/code-editor/README.md

@@ -57,6 +57,7 @@ console.log(greet('MongoDB user'));`;
 | `enableCodeFolding` _(optional)_      | Enables code folding arrows in the gutter.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `boolean`                    | `undefined` |
 | `enableLineNumbers` _(optional)_      | Enables line numbers in the editor’s gutter.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `boolean`                    | `true`      |
 | `enableLineWrapping` _(optional)_     | Enables line wrapping when the text exceeds the editor’s width.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                    | `true`      |
+| `enableSearchPanel` _(optional)_      | Enables the find and replace search panel in the editor that is displayed via the shortcut Ctrl/Cmd+F.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `boolean`                    | `true`      |
 | `extensions` _(optional)_             | Additional CodeMirror extensions to apply to the editor. These will be applied with high precendence, meaning they can override extensions applied through built in props. See the [CodeMirror v6 System Guide](https://codemirror.net/docs/guide/) for more information.                                                                                                                                                                                                                                                                                                                                                                                          | `Array<CodeMirrorExtension>` | `[]`        |
 | `forceParsing` _(optional)_           | _**This should be used with caution as it can significantly impact performance!**_<br><br>Forces the parsing of the complete document, even parts not currently visible.<br><br>By default, the editor optimizes performance by only parsing the code that is visible on the screen, which is especially beneficial when dealing with large amounts of code. Enabling this option overrides this behavior and forces the parsing of all code, visible or not. This should generally be reserved for exceptional circumstances.                                                                                                                                     | `boolean`                    | `false`     |
 | `height` _(optional)_                 | Sets the editor's height. If not set, the editor will automatically adjust its height based on the content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `string`                     | `undefined` |

packages/code-editor/package.json

@@ -48,15 +48,18 @@
     "@leafygreen-ui/a11y": "workspace:^",
     "@leafygreen-ui/badge": "workspace:^",
     "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/checkbox": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/icon-button": "workspace:^",
+    "@leafygreen-ui/input-option": "workspace:^",
     "@leafygreen-ui/leafygreen-provider": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/menu": "workspace:^",
     "@leafygreen-ui/modal": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
+    "@leafygreen-ui/text-input": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
     "@leafygreen-ui/tooltip": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",

packages/code-editor/src/CodeEditor.stories.tsx

@@ -76,6 +76,7 @@ const meta: StoryMetaType<typeof CodeEditor> = {
     enableCodeFolding: true,
     enableLineNumbers: true,
     enableLineWrapping: true,
+    enableSearchPanel: true,
     baseFontSize: BaseFontSize.Body1,
     forceParsing: false,
     placeholder: 'Type your code here...',
@@ -113,6 +114,9 @@ const meta: StoryMetaType<typeof CodeEditor> = {
     enableLineNumbers: {
       control: { type: 'boolean' },
     },
+    enableSearchPanel: {
+      control: { type: 'boolean' },
+    },
     enableLineWrapping: {
       control: { type: 'boolean' },
     },