Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Storybook: add eslint-plugin-storybook and fix issues #446

Merged
merged 4 commits into from
Nov 10, 2022
Merged

Storybook: add eslint-plugin-storybook and fix issues #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e967089
feat(storybook): add eslint-plugin-storybook and fix issues
daneah Nov 8, 2022
0699c59
fix(storybook): remove unused args from story signatures
daneah Nov 8, 2022
36fa910
fix(storybook): remove previously ignored linting issues
daneah Nov 9, 2022
07e88c4
fix(storybook): fix missing and erroring React stories
daneah Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 10 additions & 1 deletion .eslintrc.js
View file
Open in desktop
@@ -1,13 +1,21 @@
module.exports = {
ignorePatterns: ['**/*.css.ts'],
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:prettier/recommended',
'plugin:storybook/recommended',
],
parser: '@babel/eslint-parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
babelOptions: {
presets: ['@babel/preset-react'],
},
Comment on lines +16 to +18
Copy link
Member Author

Choose a reason for hiding this comment

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

This was a necessary addition to get JSX playing nicely; the ecmaFeatures: { jsx: true } } wasn't sufficient on its own.

},
plugins: ['react', '@typescript-eslint', 'no-smart-quotes'],
settings: {
Expand All @@ -21,6 +29,7 @@ module.exports = {
},
rules: {
'no-smart-quotes/no-smart-quotes': 'error',
'react/react-in-jsx-scope': 'off',
Copy link
Member Author

Choose a reason for hiding this comment

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

Not needed in React 17+.

},
overrides: [
{
Expand Down
1 change: 1 addition & 0 deletions .storybook/react/preview.js
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@ export const parameters = {
a11y: a11yConfig,
controls: { expanded: true },
docs: {
source: { type: 'dynamic' },
inlineStories: true,
theme: theme,
components: {
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@
"analyze": "yarn workspace @ithaka/pharos analyze",
"format": "prettier packages/* --write",
"lint": "yarn lint:lit-analyzer && yarn lint:eslint && yarn lint:styles",
"lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,mjs}'",
"lint:eslint": "eslint 'packages/**/*.{ts,tsx,mdx,js,jsx,mjs}'",
"lint:lit-analyzer": "lit-analyzer 'packages/*/src/**/!(*.css|*.test).ts' --strict --rules.no-missing-import off --rules.no-unknown-tag-name off",
"lint:styles": "stylelint 'packages/**/*.{scss,css}'",
"test": "yarn workspace @ithaka/pharos test",
Expand Down Expand Up @@ -60,6 +60,7 @@
"@babel/plugin-proposal-export-default-from": "^7.14.5",
"@babel/plugin-syntax-import-assertions": "^7.16.7",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.18.6",
"@changesets/changelog-github": "^0.4.1",
"@changesets/cli": "^2.18.0",
"@commitlint/cli": "^15.0.0",
Expand Down Expand Up @@ -99,6 +100,7 @@
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.6.7",
"eslint-plugin-wc": "^1.3.2",
"husky": "^7.0.0",
"lint-staged": "^12.0.2",
Expand Down
8 changes: 4 additions & 4 deletions packages/pharos/src/components/button/PharosButton.react.stories.jsx
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ export const Base = {
};

export const Variants = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -114,7 +114,7 @@ export const Variants = {
};

export const Large = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -176,7 +176,7 @@ export const Large = {
};

export const WithIcons = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -268,7 +268,7 @@ export const Link = {
};

export const Forms = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down
10 changes: 7 additions & 3 deletions packages/pharos/src/components/checkbox-group/PharosCheckboxGroup.react.stories.jsx
View file
Open in desktop
Expand Up @@ -3,12 +3,16 @@ import { action } from '@storybook/addon-actions';
import { PharosButton, PharosCheckbox, PharosCheckboxGroup } from '../../react-components';
import createFormData from '../../utils/createFormData';
import { defaultArgs } from './storyArgs';
import { configureDocsPage } from '@config/docsPageConfig';

export default {
title: 'Forms/Checkbox Group',
component: PharosCheckboxGroup,
subcomponents: { PharosCheckbox },
options: { selectedPanel: 'addon-controls' },
parameters: {
docs: { page: configureDocsPage('checkbox') },
options: { selectedPanel: 'addon-controls' },
},
};

export const Base = {
Expand All @@ -35,7 +39,7 @@ export const Base = {
};

export const Events = {
render: (_) => (
render: () => (
<PharosCheckboxGroup
onChange={(e) => action('Change')(JSON.stringify(e.target.value))}
name="group2"
Expand Down Expand Up @@ -65,7 +69,7 @@ export const Validity = {
};

export const FormData = {
render: (_) => (
render: () => (
<form name="my-form" action="https://httpbin.org/post" method="POST">
<PharosCheckboxGroup
style={{ marginBottom: '0.5rem' }}
Expand Down
4 changes: 2 additions & 2 deletions packages/pharos/src/components/checkbox-group/pharos-checkbox-group.wc.stories.jsx
View file
Open in desktop
Expand Up @@ -36,7 +36,7 @@ export const Base = {
};

export const Events = {
render: (_) =>
render: () =>
html` <pharos-checkbox-group
@change="${(e) => action('Change')(JSON.stringify(e.target.value))}"
name="checkbox-group2"
Expand All @@ -61,7 +61,7 @@ export const Validity = {
};

export const FormData = {
render: (_) =>
render: () =>
html` <form name="my-form" action="https://httpbin.org/post" method="POST">
<pharos-checkbox-group
@change="${(e) => action('Change')(e.target.value)}"
Expand Down
2 changes: 1 addition & 1 deletion packages/pharos/src/components/checkbox/PharosCheckbox.react.stories.jsx
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@ export default {
title: 'Forms/Checkbox',
component: PharosCheckbox,
parameters: {
docs: configureDocsPage('checkbox'),
docs: { page: configureDocsPage('checkbox') },
options: {
selectedPanel: 'addon-controls',
},
Expand Down
6 changes: 3 additions & 3 deletions packages/pharos/src/components/checkbox/pharos-checkbox.wc.stories.jsx
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ export const Base = {
};

export const States = {
render: (_) =>
render: () =>
html`
<div>
<pharos-checkbox name="one"><span slot="label">Normal Checkbox</span></pharos-checkbox>
Expand Down Expand Up @@ -77,7 +77,7 @@ export const States = {
};

export const Events = {
render: (_) =>
render: () =>
html` <pharos-checkbox
value="My value"
@change="${(e) => action('Change')(e.target.checked)}"
Expand All @@ -103,7 +103,7 @@ export const Validity = {

export const OnBackground = {
name: 'On background',
render: (_) =>
render: () =>
html`
<div style="background-color: #000000; padding: 1rem;">
<pharos-checkbox name="on-background" on-background>
Expand Down
10 changes: 5 additions & 5 deletions packages/pharos/src/components/combobox/PharosCombobox.react.stories.jsx
View file
Open in desktop
Expand Up @@ -76,7 +76,7 @@ export const States = {
};

export const Events = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -111,13 +111,13 @@ export const Events = {
};

export const SearchMode = {
render: (_) => (
render: () => (
<PharosCombobox
placeholder="Search..."
searchMode
style={{ display: 'grid', gridTemplateColumns: '300px' }}
>
<span slot="label">I'm searching for</span>
<span slot="label">I&apos;m searching for</span>
<option value="1">Bulbasaur</option>
<option value="2">Charmander</option>
<option value="3">Squirtle</option>
Expand All @@ -136,7 +136,7 @@ export const SearchMode = {

export const Validity = {
render: (args) => (
<div style="display: grid; grid-template-columns: 300px;">
<div style={{ display: 'grid', gridTemplateColumns: '300px' }}>
<PharosCombobox
name="my-combobox"
placeholder="Enter some text"
Expand All @@ -163,7 +163,7 @@ export const Validity = {
};

export const FormData = {
render: (_) => (
render: () => (
<div style={{ display: 'grid', gridTemplateColumns: '300px' }}>
<form name="my-form" action="https://httpbin.org/post" method="POST">
<PharosCombobox
Expand Down
8 changes: 4 additions & 4 deletions packages/pharos/src/components/combobox/pharos-combobox.wc.stories.jsx
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ export const Base = {
};

export const States = {
render: (_) =>
render: () =>
html`
<div style="display: grid; grid-gap: 7rem; grid-template-columns: repeat(2, 300px);">
<pharos-combobox name="default">
Expand Down Expand Up @@ -92,7 +92,7 @@ export const States = {
};

export const Events = {
render: (_) =>
render: () =>
html`
<div style="display: grid; grid-template-columns: 300px;">
<pharos-combobox
Expand Down Expand Up @@ -123,7 +123,7 @@ export const Events = {
};

export const SearchMode = {
render: (_) =>
render: () =>
html`
<pharos-combobox
placeholder="Search..."
Expand Down Expand Up @@ -168,7 +168,7 @@ export const Validity = {
};

export const FormData = {
render: (_) =>
render: () =>
html`
<div style="display: grid; grid-template-columns: 300px;">
<form name="my-form" action="https://httpbin.org/post" method="POST">
Expand Down
2 changes: 1 addition & 1 deletion packages/pharos/src/components/dropdown-menu-nav/PharosDropdownMenuNav.react.stories.jsx
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ export default {
};

export const Base = {
render: (_) => (
render: () => (
<PharosDropdownMenuNav>
<PharosDropdownMenuNavLink
href="#"
Expand Down
2 changes: 1 addition & 1 deletion packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav.wc.stories.jsx
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ export default {
};

export const Base = {
render: (_) =>
render: () =>
html`
<pharos-dropdown-menu-nav>
<pharos-dropdown-menu-nav-link
Expand Down
20 changes: 10 additions & 10 deletions packages/pharos/src/components/dropdown-menu/PharosDropdownMenu.react.stories.jsx
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ export default {
};

export const Base = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand All @@ -42,7 +42,7 @@ export const Base = {
};

export const Events = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -72,7 +72,7 @@ export const Events = {
};

export const Icons = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -100,7 +100,7 @@ export const Icons = {
};

export const Descriptions = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -139,7 +139,7 @@ export const Descriptions = {
};

export const FullWidth = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -171,7 +171,7 @@ export const FullWidth = {
};

export const Links = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -205,7 +205,7 @@ export const Links = {
};

export const MultipleTriggers = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -240,7 +240,7 @@ export const MultipleTriggers = {
};

export const MultipleDynamicTriggers = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -287,7 +287,7 @@ export const MultipleDynamicTriggers = {
};

export const Composition = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down Expand Up @@ -370,7 +370,7 @@ export const Composition = {
};

export const CoordinatingDropdowns = {
render: (_) => (
render: () => (
<div
style={{
display: 'grid',
Expand Down