-
Notifications
You must be signed in to change notification settings - Fork 97
feat: add storybook and figma pages #192
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
f4ea40c
create page
peter-zawistowicz 0ed4f7a
remove img
peter-zawistowicz 041efce
add figma
peter-zawistowicz 8bcc8b4
tweaks
peter-zawistowicz 5dd7746
fix link
peter-zawistowicz 56565b9
fix image
peter-zawistowicz 40b5e3d
social images
peter-zawistowicz b410ac5
update figma install instructions & add new gifs
peter-zawistowicz 32cc77f
final fixes!
peter-zawistowicz File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
252 changes: 252 additions & 0 deletions
252
.vitepress/config.ts.timestamp-1700579699301-7af714195b443.mjs
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
--- | ||
title: How to install and use the StackBlitz plugin for Figma | ||
description: With StackBlitz’s Figma plugin, Dev Mode users can open components in StackBlitz directly from Figma. | ||
og_image: figma-plugin.png | ||
--- | ||
|
||
# {{ $frontmatter.title }} | ||
|
||
[Figma](https://www.figma.com/) is a collaborative UI/UX design tool. Figma’s [Dev Mode](https://www.figma.com/dev-mode/) enables developers to inspect designs, extract code, and access design details, streamlining the design-to-production process. | ||
|
||
Figma supports a [number of plugins](https://www.figma.com/community/category/development/plugins) that extend the functionality and integrate additional tools with the platform. | ||
|
||
::: tip Available with all StackBlitz plans including **Personal**, **Personal+**, **Teams**, and **Enterprise**. | ||
|
||
The plugin is compatible with all Figma plans. | ||
::: | ||
|
||
## About the StackBlitz plugin for Figma | ||
|
||
With [StackBlitz’s Figma plugin](https://www.figma.com/community/plugin/1287113487428429346), Dev Mode users can open components in StackBlitz directly from Figma. | ||
|
||
 | ||
|
||
After configuring the plugin, you will be able to: | ||
|
||
- Link layers in Figma to specific components in your design system | ||
- Open the relevant components in an instant, browser-based development environment directly from Figma Dev Mode | ||
- View and modify the relevant component in StackBlitz without any local configuration | ||
- Preview any changes live within StackBlitz | ||
- Commit edits back to the repository or open a pull request | ||
|
||
## **Installing the plugin** | ||
|
||
To use the StackBlitz plugin, add it to a Figma file from either: | ||
|
||
- **The [plugins directory](https://www.figma.com/community/plugin/1287113487428429346)** by clicking “Open in…” and then selecting the name of the file. | ||
|
||
|
||
- **Dev Mode within your Figma file** by searching for "StackBlitz" under *Plugins* | ||
|
||
 | ||
*Initialize the StackBlitz plugin from within Dev Mode.* | ||
|
||
|
||
## Using the StackBlitz plugin with Dev Mode | ||
|
||
Once you have added the plugin to your Figma file, | ||
|
||
1. Enable [Dev Mode](https://www.figma.com/dev-mode/) is on (`Shift` + `D`) | ||
1. Select a layer | ||
1. Open in the StackBlitz plugin and paste a URL of a repository with the code of your project. | ||
- You can also use the URL of a specific file within this repository: typically, a component file, for instance: https://github.com/stackblitz/docs/blob/main/.vitepress/theme/components/CardLists/CardList.vue | ||
1. Click the "Create instant environment link" button to have the link generated for the selected layer. | ||
|
||
The link is now added to the layer's Dev resources. | ||
|
||
When you click it, a new tab will open with the full IDE loaded with your project. If your link included a file, this file will already be open in the editor. | ||
|
||
### Recommended uses for the plugin | ||
|
||
We suggest providing instant environment links, especially for the essential components in your app. The components that might need adjustments in future are good candidates as well. | ||
|
||
Generally, every time a developer looks at a component in Figma to make changes in the code, having a resource link handy will make their work so much easier! | ||
|
||
For more information, [view the StackBlitz plugin in the Figma community directory](https://www.figma.com/community/plugin/1287113487428429346) and refer to the [Figma Dev Mode documentation](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode). | ||
|
||
:::info How can we improve this guide? | ||
Haven't found an answer to your question? [Let us know!](mailto:devrel@stackblitz.com) | ||
::: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
--- | ||
title: How to install and use the StackBlitz addon for Storybook | ||
description: With StackBlitz’s addon, Storybook users can open stories in StackBlitz directly from Storybook. | ||
og_image: storybook-addon.png | ||
--- | ||
|
||
# {{ $frontmatter.title }} | ||
|
||
[Storybook](https://storybook.js.org/) is a widely used open-source tool for building UI components in isolation. It allows developers to create and test UI components interactively, separate from the main application, facilitating easier documentation, debugging, and visual testing of different states and edge cases. | ||
|
||
Storybook supports a number of [addons](https://storybook.js.org/docs/addons) that extend the functionality and integrate additional tools. | ||
|
||
::: tip Available with all StackBlitz plans including **Personal**, **Personal+**, **Teams**, and **Enterprise**. | ||
|
||
The addon is compatible with all Storybook deployments including for Chromatic customers. | ||
::: | ||
|
||
## About the StackBlitz addon for Storybook | ||
|
||
With StackBlitz’s [addon](https://storybook.js.org/addons/@stackblitz/storybook-addon-stackblitz), Storybook users can open stories in StackBlitz directly from Storybook. | ||
|
||
 | ||
|
||
After installation, you will be able to: | ||
|
||
- Open an instant, browser-based development environment directly from Storybook | ||
- View and modify the relevant component in StackBlitz without a local development environment | ||
- Preview any changes live within StackBlitz | ||
- Commit edits back to the repository or open a pull request | ||
|
||
## **Installing the addon** | ||
|
||
First, install the addon by running the following command: | ||
|
||
::: code-group | ||
|
||
```bash [yarn] | ||
yarn add --dev @stackblitz/storybook-addon-stackblitz | ||
``` | ||
|
||
```bash [npm] | ||
npm install @stackblitz/storybook-addon-stackblitz --save-dev | ||
``` | ||
|
||
```bash [pnpm] | ||
pnpm add --save-dev @stackblitz/storybook-addon-stackblitz | ||
``` | ||
::: | ||
|
||
Then, add the addon to `.storybook/main.ts|js`: | ||
|
||
|
||
```tsx | ||
export default { | ||
addons: ['@stackblitz/storybook-addon-stackblitz'], | ||
}; | ||
|
||
``` | ||
|
||
Configure the repository URL in `.storybook/preview.ts|js`: | ||
|
||
```tsx | ||
export default { | ||
parameters: { | ||
repositoryUrl: 'https://github.com/[username]/[reponame]' | ||
}, | ||
}; | ||
``` | ||
|
||
In your story files, set the file path for the specific story, for instance: | ||
|
||
```tsx | ||
export const Primary: Story = { | ||
args: {/* ... */}, | ||
parameters: { | ||
filePath: 'src/stories/Button.tsx' | ||
} | ||
}; | ||
``` | ||
|
||
If your components are placed in multiple repositories, you can also define the repository URL for each specific story: | ||
|
||
```tsx | ||
export const Primary: Story = { | ||
args: {/* ... */}, | ||
parameters: { | ||
filePath: 'src/stories/Button.tsx', | ||
repositoryUrl: 'https://github.com/[username]/[reponame]' | ||
} | ||
}; | ||
``` | ||
|
||
## Using the addon | ||
|
||
After successful installation, you will see a new “Open in StackBlitz” button in the navigation. When clicked, this will open the current story in StackBlitz in a new tab. | ||
|
||
For more information, [view the StackBlitz addon on Storybook’s integrations page](https://storybook.js.org/addons/@stackblitz/storybook-addon-stackblitz/) and refer to the [Storybook documentation](https://storybook.js.org/docs/). | ||
|
||
|
||
:::info How can we improve this guide? | ||
Haven't found an answer to your question? [Let us know!](mailto:devrel@stackblitz.com) | ||
::: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.