Skip to content

Commit 349c68d

Browse files
danilowozdanilowoz
committed
docs(file-explorer): recommended package
1 parent 57f6d46 commit 349c68d

File tree

1 file changed

+54
-48
lines changed

1 file changed

+54
-48
lines changed

‎website/docs/src/pages/advanced-usage/components.mdx‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import SandpackDecorators from "../../components/Decorators";
55

66
# Components
77

8-
<br/>
8+
<br />
99
<img src="/docs/components.jpg" />
1010

1111
Several `Sandpack` prefixed components are available in the `sandpack-react` package. They can be used to build custom presets, as long as they render within the providers we talked about during the previous section.
@@ -221,21 +221,21 @@ export default () => (
221221
<details>
222222
<summary>Options</summary>
223223
224-
| Prop | Description | Type | Default |
225-
| :- | :- | :- | :- |
226-
| `showTabs` | | `boolean` | `false` |
227-
| `showLineNumbers` | | `boolean` | `false` |
228-
| `showInlineErrors` | | `boolean` | `false` |
229-
| `showRunButton` | | `boolean` | `false` |
230-
| `wrapContent` | | `boolean` | `false` |
231-
| `closableTabs` | | `boolean` | `false` |
224+
| Prop | Description | Type | Default |
225+
| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
226+
| `showTabs` | | `boolean` | `false` |
227+
| `showLineNumbers` | | `boolean` | `false` |
228+
| `showInlineErrors` | | `boolean` | `false` |
229+
| `showRunButton` | | `boolean` | `false` |
230+
| `wrapContent` | | `boolean` | `false` |
231+
| `closableTabs` | | `boolean` | `false` |
232232
| `initMode` | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"` |
233-
| `extensions` | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component. | `Extension[]` | `undefined` |
234-
| `extensionsKeymap` | Property to register CodeMirror extension keymap. | `KeyBinding[]` | `undefined |
235-
| `id`| By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values. | `string` | `undefined` |
236-
| `readOnly` | This disables editing of the editor content by the user. | `boolean` | `false` |
237-
| `showReadOnly` | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true` | `boolean` | `true` |
238-
| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode | `CustomLanguage[]` | `undefined` |
233+
| `extensions` | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component. | `Extension[]` | `undefined` |
234+
| `extensionsKeymap` | Property to register CodeMirror extension keymap. | `KeyBinding[]` | `undefined |
235+
| `id` | By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values. | `string` | `undefined` |
236+
| `readOnly` | This disables editing of the editor content by the user. | `boolean` | `false` |
237+
| `showReadOnly` | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true` | `boolean` | `true` |
238+
| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode | `CustomLanguage[]` | `undefined` |
239239

240240
</details>
241241

@@ -372,7 +372,7 @@ This is especially useful to get the cursor's current position, add custom decor
372372
373373
## File Explorer
374374
375-
The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
375+
The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
376376
377377
<CodeBlock stack>
378378
{`import {
@@ -393,7 +393,6 @@ export default () => (
393393
`}
394394
</CodeBlock>
395395
396-
397396
<details>
398397
<summary>Options</summary>
399398
@@ -405,6 +404,13 @@ export default () => (
405404
406405
</details>
407406
407+
If you're looking for extra feature we recommend using [AaronPowell96/sandpack-file-explorer](https://github.com/AaronPowell96/sandpack-file-explorer) package which support things such as:
408+
409+
- Add and remove files or directories,
410+
- Drag and drop to move files or directories,
411+
- Allow users to customise the entire folder structure right within your website!
412+
- Works out of the box with all of Sandpack's templates.
413+
408414
## Tests
409415
410416
The `SandpackTests` component renders a thin wrapper around [`Jest`](https://jestjs.io/) to run tests directly in the browser. This means you can run tests but additional configuration may not possible given the browser environment.
@@ -456,8 +462,8 @@ export default () => (
456462
<details>
457463
<summary>Options</summary>
458464
459-
| Prop | Description | Type | Default |
460-
| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
465+
| Prop | Description | Type | Default |
466+
| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
461467
| `watchMode` | Watch files for changes and rerun all tests. Note if changing a test file then the current file will run on it's own | `boolean` | `true` |
462468
| `onComplete` | A callback that is invoked with the completed specs. | Function | `undefined` |
463469
@@ -481,15 +487,15 @@ Add the matchers either as a dependency or as a file and then import the matcher
481487
SandpackTests
482488
} from "@codesandbox/sandpack-react";
483489

484-
const extendedTest = \`import * as matchers from 'jest-extended';
490+
const extendedTest = \`import \* as matchers from 'jest-extended';
485491
import { add } from './add';
486492
487493
expect.extend(matchers);
488494
489495
describe('jest-extended matchers are supported', () => {
490-
test('adding two positive integers yields a positive integer', () => {
491-
expect(add(1, 2)).toBePositive();
492-
});
496+
test('adding two positive integers yields a positive integer', () => {
497+
expect(add(1, 2)).toBePositive();
498+
});
493499
});
494500
\`;
495501
@@ -552,8 +558,6 @@ There are three ways to print the logs:
552558
- `<SandpackConsole />`: standalone component to render the logs;
553559
- `useSandpackConsole`: React hook to consume the console logs from a Sandpack client;
554560
555-
556-
557561
<CodeBlock stack>
558562
{`import { Sandpack } from "@codesandbox/sandpack-react";
559563
@@ -571,17 +575,17 @@ export default () => (
571575
<details>
572576
<summary>`SandpackConsole` Options</summary>
573577
574-
| Prop | Description | Type | Default |
575-
| :- | :- | :- | :- |
576-
| `clientId` | | `string` | `undefined` |
577-
| `showHeader` | | `boolean` | `true` |
578-
| `showSyntaxError` | | `boolean` | `false` |
579-
| `maxMessageCount` | | `number` | `800` |
580-
| `onLogsChange` | | `(logs: SandpackConsoleData) => void` | |
581-
| `resetOnPreviewRestart` | Reset the console list on every preview restart | `boolean` | `false` |
582-
| `ref` | Make possible to imperatively interact with the console component | `SandpackConsoleRef` | `SandpackConsoleRef` |
583-
| `standalone` | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. |`boolean` | `false` |
584-
| `actionsChildren` | | JSX.Element | `null` |
578+
| Prop | Description | Type | Default |
579+
| :---------------------- | :--------------------------------------------------------------------------------------- | :------------------------------------ | :------------------- |
580+
| `clientId` | | `string` | `undefined` |
581+
| `showHeader` | | `boolean` | `true` |
582+
| `showSyntaxError` | | `boolean` | `false` |
583+
| `maxMessageCount` | | `number` | `800` |
584+
| `onLogsChange` | | `(logs: SandpackConsoleData) => void` | |
585+
| `resetOnPreviewRestart` | Reset the console list on every preview restart | `boolean` | `false` |
586+
| `ref` | Make possible to imperatively interact with the console component | `SandpackConsoleRef` | `SandpackConsoleRef` |
587+
| `standalone` | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. | `boolean` | `false` |
588+
| `actionsChildren` | | JSX.Element | `null` |
585589

586590
</details>
587591

@@ -622,14 +626,14 @@ export default () => (
622626
<details>
623627
<summary>Options</summary>
624628
625-
| Prop | Description | Type | Default |
626-
| :- | :- | :- | :- |
627-
| `showTabs` | | `boolean` | `false` |
628-
| `showLineNumbers` | | `boolean` | `false` |
629-
| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
630-
| `code` | | `string` | `undefined` |
631-
| `wrapContent` | | `boolean` | `false` |
632-
| `initMode` | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"` |
629+
| Prop | Description | Type | Default |
630+
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
631+
| `showTabs` | | `boolean` | `false` |
632+
| `showLineNumbers` | | `boolean` | `false` |
633+
| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
634+
| `code` | | `string` | `undefined` |
635+
| `wrapContent` | | `boolean` | `false` |
636+
| `initMode` | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"` |
633637
634638
</details>
635639
@@ -670,7 +674,6 @@ export default () => (
670674
`}
671675
</CodeBlock>
672676

673-
674677
The `UnstyledOpenInCodeSandboxButton` is a basic component that does not carry any styles. If you want a ready-to-use component, use the `OpenInCodeSandboxButton` instead, which has the same functionality but includes the CodeSandbox logo.
675678

676679
## Other components
@@ -706,6 +709,9 @@ Some of the components have configuration props that toggle subparts on/off or t
706709
of them comunicate with sandpack through the shared context.
707710

708711
<Callout icon="🎉">
709-
**Congrats!**<br/>
710-
You can now easily create a custom Sandpack component by reusing some of the building components of the library. The next step is to build your own sandpack components with the help of our custom hooks.
711-
</Callout>
712+
**Congrats!**
713+
<br />
714+
You can now easily create a custom Sandpack component by reusing some of the
715+
building components of the library. The next step is to build your own
716+
sandpack components with the help of our custom hooks.
717+
</Callout>

0 commit comments

Comments
 (0)