Skip to content

Commit

Permalink
docs(storybook): add welcome page (#310)
Browse files Browse the repository at this point in the history 
* docs(storybook): move stories to examples folder

* docs(storybook): implement welcome page (with netlify badge)

* chore(storybook): bump version and add some storybook addons

* docs(storybook): load new addon

* docs(storybook): order the stories

* style(prettier): run eslint fix

* fix(storybook): adjust type to properly work with emotion (relate to storybook update)

* test(storybook): use new stories id
  • Loading branch information
@100terres
100terres authored Apr 8, 2022
1 parent b07f088 commit a4fe553
Show file tree
Hide file tree
Showing 43 changed files with 987 additions and 365 deletions.
8 changes: 6 additions & 2 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@ require('dotenv').config();

module.exports = {
addons: [
'storybook-addon-performance/register',
'@storybook/addon-essentials',
'@storybook/addon-storysource',
'storybook-addon-performance/register',
],
check: true,
checkOptions: {
tsconfig: '../stories/tsconfig.json',
},
stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
babel: async (options) => ({
...options,
presets: ['@emotion/babel-preset-css-prop', ...options.presets],
Expand Down
6 changes: 6 additions & 0 deletions .storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,10 @@ export const decorators = [

export const parameters = {
layout: 'fullscreen',

options: {
storySort: {
order: ['Welcome', 'Examples'],
},
},
};
8 changes: 4 additions & 4 deletions cypress/integration/focus.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { getHandleSelector, getDraggableSelector } from './util';

describe('focus', () => {
it('should not steal focus if not already focused when lifting', () => {
cy.visit('/iframe.html?id=board--dragging-a-clone');
cy.visit('/iframe.html?id=examples-board--dragging-a-clone');
// focusing on another handle
cy.get(getHandleSelector('1')).focus();
cy.focused().should('contain', 'id:1');
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('focus', () => {
});

it('should maintain focus if dragging a clone', () => {
cy.visit('/iframe.html?id=board--dragging-a-clone');
cy.visit('/iframe.html?id=examples-board--dragging-a-clone');
// focusing on another handle
cy.get(getHandleSelector('2')).focus();
cy.focused().should('contain', 'id:2');
Expand Down Expand Up @@ -82,7 +82,7 @@ describe('focus', () => {
});

it('should give focus to a combine target', () => {
cy.visit('/iframe.html?id=board--with-combining-and-cloning');
cy.visit('/iframe.html?id=examples-board--with-combining-and-cloning');
cy.get(getHandleSelector('2')).focus();
cy.focused().should('contain', 'id:2');

Expand Down Expand Up @@ -114,7 +114,7 @@ describe('focus', () => {
});

it('should not give focus to a combine target if source did not have focus at start of drag', () => {
cy.visit('/iframe.html?id=board--with-combining-and-cloning');
cy.visit('/iframe.html?id=examples-board--with-combining-and-cloning');
// focusing on something unrelated to the drag
cy.get(getHandleSelector('3')).focus();

Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/move-between-lists.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getDroppableSelector, getHandleSelector } from './util';

describe('move between lists', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=board--simple');
cy.visit('/iframe.html?id=examples-board--simple');
});

it('should move between lists', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/reorder-lists.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getHandleSelector } from './util';

describe('reorder lists', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=board--simple');
cy.visit('/iframe.html?id=examples-board--simple');
});

it('should reorder lists', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/reorder-virtual.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getHandleSelector } from './util';

describe('reorder: virtual', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=virtual-react-window--list');
cy.visit('/iframe.html?id=examples-virtual-react-window--list');
});

it('should reorder within a list', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/reorder.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { getHandleSelector } from './util';

describe('reorder', () => {
beforeEach(() => {
cy.visit('/iframe.html?id=single-vertical-list--basic');
cy.visit('/iframe.html?id=examples-single-vertical-list--basic');
});

it('should reorder within a list', () => {
Expand Down
4 changes: 2 additions & 2 deletions docs/about/examples.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ See how beautiful it is for yourself!

## Viewing on a mobile or tablet

- [Simple list](https://react-forked-dnd.netlify.com/iframe.html?id=single-vertical-list--basic)
- [Board](https://react-forked-dnd.netlify.com/iframe.html?id=board--simple) - best viewed in landscape
- [Simple list](https://react-forked-dnd.netlify.com/iframe.html?id=examples-single-vertical-list--basic)
- [Board](https://react-forked-dnd.netlify.com/iframe.html?id=examples-board--simple) - best viewed in landscape

> We provide different links for touch devices as [storybook](https://github.com/storybooks/storybook) runs examples in an iframe which can result in a strange auto scroll experience
Expand Down
14 changes: 8 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"chromatic": "chromatic --project-token=f92123f238de",
"prepare": "husky install",
"release": "cross-env SKIP_PREPARE_COMMIT_MSG=true release-it",
"test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
"test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=examples-single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
"test": "pnpm test:react-17 && pnpm test:react-16",
"test:react-16": "REACT_VERSION=16 jest --config ./jest.config.js",
"test:react-17": "jest --config ./jest.config.js",
Expand Down Expand Up @@ -103,11 +103,13 @@
"@rollup/plugin-node-resolve": "13.1.3",
"@rollup/plugin-replace": "4.0.0",
"@rollup/plugin-strip": "2.1.0",
"@storybook/addon-storysource": "6.5.0-alpha.51",
"@storybook/addons": "6.5.0-alpha.51",
"@storybook/core": "6.5.0-alpha.51",
"@storybook/react": "6.5.0-alpha.51",
"@storybook/theming": "6.5.0-alpha.51",
"@storybook/addon-docs": "6.5.0-alpha.59",
"@storybook/addon-essentials": "6.5.0-alpha.59",
"@storybook/addon-storysource": "6.5.0-alpha.59",
"@storybook/addons": "6.5.0-alpha.59",
"@storybook/core": "6.5.0-alpha.59",
"@storybook/react": "6.5.0-alpha.59",
"@storybook/theming": "6.5.0-alpha.59",
"@testing-library/dom": "8.12.0",
"@testing-library/react": "12.1.4",
"@types/enzyme": "3.10.11",
Expand Down
Loading

0 comments on commit a4fe553

Please sign in to comment.