Skip to content

Commit

Permalink
docs(file-explorer): recommended package
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilowoz
danilowoz committed Sep 11, 2023
1 parent 57f6d46 commit 349c68d
Showing 1 changed file with 54 additions and 48 deletions.
102 changes: 54 additions & 48 deletions website/docs/src/pages/advanced-usage/components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import SandpackDecorators from "../../components/Decorators";

# Components

<br/>
<br />
<img src="/docs/components.jpg" />

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.
Expand Down Expand Up @@ -221,21 +221,21 @@ export default () => (
<details>
<summary>Options</summary>
| Prop | Description | Type | Default |
| :- | :- | :- | :- |
| `showTabs` | | `boolean` | `false` |
| `showLineNumbers` | | `boolean` | `false` |
| `showInlineErrors` | | `boolean` | `false` |
| `showRunButton` | | `boolean` | `false` |
| `wrapContent` | | `boolean` | `false` |
| `closableTabs` | | `boolean` | `false` |
| Prop | Description | Type | Default |
| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
| `showTabs` | | `boolean` | `false` |
| `showLineNumbers` | | `boolean` | `false` |
| `showInlineErrors` | | `boolean` | `false` |
| `showRunButton` | | `boolean` | `false` |
| `wrapContent` | | `boolean` | `false` |
| `closableTabs` | | `boolean` | `false` |
| `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"` |
| `extensions` | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component. | `Extension[]` | `undefined` |
| `extensionsKeymap` | Property to register CodeMirror extension keymap. | `KeyBinding[]` | `undefined |
| `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` |
| `readOnly` | This disables editing of the editor content by the user. | `boolean` | `false` |
| `showReadOnly` | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true` | `boolean` | `true` |
| `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` |
| `extensions` | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component. | `Extension[]` | `undefined` |
| `extensionsKeymap` | Property to register CodeMirror extension keymap. | `KeyBinding[]` | `undefined |
| `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` |
| `readOnly` | This disables editing of the editor content by the user. | `boolean` | `false` |
| `showReadOnly` | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true` | `boolean` | `true` |
| `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` |

</details>

Expand Down Expand Up @@ -372,7 +372,7 @@ This is especially useful to get the cursor's current position, add custom decor
## File Explorer
The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
<CodeBlock stack>
{`import {
Expand All @@ -393,7 +393,6 @@ export default () => (
`}
</CodeBlock>
<details>
<summary>Options</summary>
Expand All @@ -405,6 +404,13 @@ export default () => (
</details>
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:
- Add and remove files or directories,
- Drag and drop to move files or directories,
- Allow users to customise the entire folder structure right within your website!
- Works out of the box with all of Sandpack's templates.
## Tests
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.
Expand Down Expand Up @@ -456,8 +462,8 @@ export default () => (
<details>
<summary>Options</summary>
| Prop | Description | Type | Default |
| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
| Prop | Description | Type | Default |
| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
| `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` |
| `onComplete` | A callback that is invoked with the completed specs. | Function | `undefined` |
Expand All @@ -481,15 +487,15 @@ Add the matchers either as a dependency or as a file and then import the matcher
SandpackTests
} from "@codesandbox/sandpack-react";

const extendedTest = \`import * as matchers from 'jest-extended';
const extendedTest = \`import \* as matchers from 'jest-extended';
import { add } from './add';
expect.extend(matchers);
describe('jest-extended matchers are supported', () => {
test('adding two positive integers yields a positive integer', () => {
expect(add(1, 2)).toBePositive();
});
test('adding two positive integers yields a positive integer', () => {
expect(add(1, 2)).toBePositive();
});
});
\`;
Expand Down Expand Up @@ -552,8 +558,6 @@ There are three ways to print the logs:
- `<SandpackConsole />`: standalone component to render the logs;
- `useSandpackConsole`: React hook to consume the console logs from a Sandpack client;
<CodeBlock stack>
{`import { Sandpack } from "@codesandbox/sandpack-react";
Expand All @@ -571,17 +575,17 @@ export default () => (
<details>
<summary>`SandpackConsole` Options</summary>
| Prop | Description | Type | Default |
| :- | :- | :- | :- |
| `clientId` | | `string` | `undefined` |
| `showHeader` | | `boolean` | `true` |
| `showSyntaxError` | | `boolean` | `false` |
| `maxMessageCount` | | `number` | `800` |
| `onLogsChange` | | `(logs: SandpackConsoleData) => void` | |
| `resetOnPreviewRestart` | Reset the console list on every preview restart | `boolean` | `false` |
| `ref` | Make possible to imperatively interact with the console component | `SandpackConsoleRef` | `SandpackConsoleRef` |
| `standalone` | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. |`boolean` | `false` |
| `actionsChildren` | | JSX.Element | `null` |
| Prop | Description | Type | Default |
| :---------------------- | :--------------------------------------------------------------------------------------- | :------------------------------------ | :------------------- |
| `clientId` | | `string` | `undefined` |
| `showHeader` | | `boolean` | `true` |
| `showSyntaxError` | | `boolean` | `false` |
| `maxMessageCount` | | `number` | `800` |
| `onLogsChange` | | `(logs: SandpackConsoleData) => void` | |
| `resetOnPreviewRestart` | Reset the console list on every preview restart | `boolean` | `false` |
| `ref` | Make possible to imperatively interact with the console component | `SandpackConsoleRef` | `SandpackConsoleRef` |
| `standalone` | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. | `boolean` | `false` |
| `actionsChildren` | | JSX.Element | `null` |

</details>

Expand Down Expand Up @@ -622,14 +626,14 @@ export default () => (
<details>
<summary>Options</summary>
| Prop | Description | Type | Default |
| :- | :- | :- | :- |
| `showTabs` | | `boolean` | `false` |
| `showLineNumbers` | | `boolean` | `false` |
| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
| `code` | | `string` | `undefined` |
| `wrapContent` | | `boolean` | `false` |
| `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"` |
| Prop | Description | Type | Default |
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
| `showTabs` | | `boolean` | `false` |
| `showLineNumbers` | | `boolean` | `false` |
| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
| `code` | | `string` | `undefined` |
| `wrapContent` | | `boolean` | `false` |
| `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"` |
</details>
Expand Down Expand Up @@ -670,7 +674,6 @@ export default () => (
`}
</CodeBlock>


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.

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

<Callout icon="🎉">
**Congrats!**<br/>
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.
</Callout>
**Congrats!**
<br />
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.
</Callout>

1 comment on commit 349c68d

@vercel
Copy link

@vercel vercel bot commented on 349c68d Sep 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sandpack-docs – ./website/docs

sandpack-docs-git-main-codesandbox1.vercel.app
sandpack-docs.codesandbox.io
sandpack.vercel.app
sandpack-docs-codesandbox1.vercel.app

Please sign in to comment.