Skip to content

Commit

Permalink
Merge branch 'next' into norbert/bring-favicon-ico-support-back
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen committed Jan 16, 2023
2 parents f5c5ad9 + e19cb11 commit 2210946
Show file tree
Hide file tree
Showing 25 changed files with 750 additions and 37 deletions.
10 changes: 3 additions & 7 deletions docs/contribute/new-snippets.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,9 @@ Storybook maintains code snippets for a [variety of frameworks](./../api/framewo

We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.

| React | Vue | Angular | Web Components | Svelte | Ember | HTML | Preact |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
| [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) (See below) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) ||||

<div class="aside">
💡 The <code>Web Components</code> snippets are present but not fully documented. If you're willing to help, submit a pull request.
</div>
| React | Vue | Angular | Web Components | Svelte | Ember | HTML | Preact |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
| [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) ||||

## Setup

Expand Down
1 change: 1 addition & 0 deletions docs/essentials/controls.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ Until now, we only used auto-generated controls based on the component we're wri
<CodeSnippets
paths={[
'react/table-story-fully-customize-controls.js.mdx',
'react/table-story-fully-customize-controls.ts.mdx',
'vue/table-story-fully-customize-controls.2.js.mdx',
'vue/table-story-fully-customize-controls.ts-2.ts.mdx',
'vue/table-story-fully-customize-controls.3.js.mdx',
Expand Down
4 changes: 1 addition & 3 deletions docs/snippets/react/document-screen-with-graphql.js.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
```js
// YourPage.js|jsx|ts|tsx

import React from 'react';
// YourPage.js|jsx

import { useQuery, gql } from '@apollo/client';

Expand Down
81 changes: 81 additions & 0 deletions docs/snippets/react/document-screen-with-graphql.ts.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
```ts
// YourPage.ts|tsx

import { useQuery, gql } from '@apollo/client';

import { PageLayout } from './PageLayout';
import { DocumentHeader } from './DocumentHeader';
import { DocumentList } from './DocumentList';

const AllInfoQuery = gql`
query AllInfo {
user {
userID
name
}
document {
id
userID
title
brief
status
}
subdocuments {
id
userID
title
content
status
}
}
`;

interface Data {
AllInfo: {
user: {
userID: number;
name: string;
opening_crawl: boolean;
};
document: {
id: number;
userID: number;
title: string;
brief: string;
status: string;
};
subdocuments: {
id: number;
userID: number;
title: string;
content: string;
status: string;
};
};
}

function useFetchInfo() {
const { loading, error, data } = useQueryuseQuery<Data>(AllInfoQuery);

return { loading, error, data };
}

export function DocumentScreen() {
const { loading, error, data } = useFetchInfo();

if (loading) {
return <p>Loading...</p>;
}

if (error) {
return <p>There was an error fetching the data!</p>;
}

return (
<PageLayout user={data.user}>
<DocumentHeader document={data.document} />
<DocumentList documents={data.subdocuments} />
</PageLayout>
);
}
```
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
```js
// YourPage.stories.js|jsx|ts|tsx

import React from 'react';
// YourPage.stories.js|jsx

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

Expand Down
126 changes: 126 additions & 0 deletions docs/snippets/react/documentscreen-story-msw-graphql-query.ts.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
```js
// YourPage.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

import { graphql } from 'msw';

import { DocumentScreen } from './YourPage';

const mockedClient = new ApolloClient({
uri: 'https://your-graphql-endpoint',
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
query: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
},
});

//👇The mocked data that will be used in the story
const TestData = {
user: {
userID: 1,
name: 'Someone',
},
document: {
id: 1,
userID: 1,
title: 'Something',
brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
status: 'approved',
},
subdocuments: [
{
id: 1,
userID: 1,
title: 'Something',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
status: 'approved',
},
{
id: 2,
userID: 1,
title: 'Something else',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
status: 'awaiting review',
},
{
id: 3,
userID: 2,
title: 'Another document',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
status: 'approved',
},
{
id: 4,
userID: 2,
title: 'Something',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
status: 'approved',
},
],
};
const meta: Meta<typeof DocumentScreen> = {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
(Story) => (
<ApolloProvider client={mockedClient}>
<Story />
</ApolloProvider>
),
],
};

export default meta;
type Story = StoryObj<typeof SampleComponent>;

export const MockedSuccess: Story = {
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.data({
allFilms: {
films,
},
})
);
}),
],
},
};

export const MockedError: Story = {
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.delay(800),
ctx.errors([
{
message: 'Access denied',
},
])
);
}),
],
},
};
```
2 changes: 1 addition & 1 deletion docs/snippets/react/loader-story.js.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
```js
// TodoItem.stories.js|jsx|ts|tsx
// TodoItem.stories.js|jsx

import React from 'react';

Expand Down
32 changes: 32 additions & 0 deletions docs/snippets/react/loader-story.ts.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
```tsx
// MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import fetch from 'node-fetch';

import { TodoItem } from './TodoItem';

const meta: Meta<typeof TodoItem> = {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Examples/Loader'
component: TodoItem,
render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
};

export default meta;
type Story = StoryObj<typeof TodoItem>;

export const Primary: Story = {
loaders: [
async () => ({
todo: await (
await fetch('https://jsonplaceholder.typicode.com/todos/1')
).json(),
}),
],
};
```
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
```js
// Table.stories.js|jsx!ts!tsx
// Table.stories.js|jsx

import React from 'react';

Expand Down
44 changes: 44 additions & 0 deletions docs/snippets/react/table-story-fully-customize-controls.ts.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
```ts
// Table.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import { Table } from './Table';
import { TD } from './TableDataCell';
import { TR } from './TableRow';

const meta: Meta<typeof Table> = {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Custom Table',
component: Table,
};

export default meta;
type Story = StoryObj<typeof Table>;

export const TableStory: Story = {
render: ({ data, ...args }) => (
<Table {...args}>
{data.map((row) => (
<TR>
{row.map((item) => (
<TD>{item}</TD>
))}
</TR>
))}
</Table>
),
args: {
//👇 This arg is for the story component
data: [
[1, 2, 3],
[4, 5, 6],
],
//👇 The remaining args get passed to the `Table` component
size: 'large',
},
};
```
30 changes: 30 additions & 0 deletions docs/snippets/vue/button-component-with-proptypes.ts-2.ts.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```html
<!-- Button.vue -->

<template>
<button type="button" :disabled="isDisabled">{{ label }}</button>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'button',
props: {
/**
* Checks if the button should be disabled
*/
label: {
type: String,
default: 'One',
},
/**
* The display label of the button
*/
isDisabled: {
type: Boolean,
default: false,
},
},
});
</script>
```
Loading

0 comments on commit 2210946

Please sign in to comment.