lint test

.eslintrc.js

@@ -3,12 +3,12 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
+    extraFileExtensions: ['.md', '.mdx'],
   },
   root: true,
   plugins: ['@typescript-eslint', 'react', 'prettier'],
   env: {
     browser: true,
-
     node: true,
     es6: true,
   },
@@ -18,7 +18,13 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
-    'plugin:mdx/recommended',
+  ],
+  overrides: [
+    {
+      files: ['src/**/*.mdx', 'src/**/*.md'],
+      extends: ['eslint:recommended', 'plugin:mdx/recommended', 'plugin:prettier/recommended'],
+      parser: 'eslint-mdx',
+    },
   ],
   settings: {
     react: {

.stylelintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'stylelint-config-standard',
+  extends: ['stylelint-prettier/recommended'],
   rules: {
     'alpha-value-notation': 'number',
     'selector-class-pattern': null,

package.json

@@ -1,4 +1,7 @@
 {
+  "resolutions": {
+    "@types/react": "^17.0.10"
+  },
   "name": "betterplace-design-system",
   "author": "betterplace <[email protected]>",
   "license": "Apache-2.0",
@@ -42,14 +45,15 @@
     "@storybook/builder-vite": "^0.1.28",
     "@storybook/react": "^6.4.21",
     "@storybook/testing-library": "^0.0.9",
-    "@types/react": "^17.0.33",
+    "@types/react": "^17.0.10",
     "@types/react-dom": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-react": "^1.0.7",
     "babel-loader": "^8.2.4",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-mdx": "^1.17.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-mdx": "^1.17.0",
@@ -61,14 +65,19 @@
     "storybook-addon-designs": "^6.2.1",
     "stylelint": "^14.8.1",
     "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
     "stylelint-prettier": "^2.0.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.0.5",
     "vite-plugin-eslint": "^1.6.0"
   },
   "lint-staged": {
-    "*.{ts, tsx, mdx}": "eslint --cache --fix",
-    "*.{css, scss}": "stylelint --fix"
+    "**/*.ts?(x)": "bash -c tsc -p ./tsconfig.json --noEmit",
+    "**/*.{ts, tsx, mdx}": "eslint --cache --fix",
+    "*.?(s)css": [
+      "stylelint --fix",
+      "stylelint"
+    ]
   }
 }

src/lib/components/index.ts

@@ -1 +1 @@
-export * from './sample';
+export * from './sample'

src/lib/index.ts

@@ -1 +1 @@
-export * from "./components";
+export * from './components'

src/stories/Button.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 
-import { Button } from './Button';
+import { Button } from './Button'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -16,33 +16,33 @@ export default {
       type: 'figspec',
       accessToken: process.env.STORYBOOK_FIGMA_ACCESS_TOKEN,
       url: 'https://www.figma.com/file/PJ7OUutWRrSHW6qgaPNW1l/Design-System-betterplace-GENERAL?node-id=361%3A1874',
-    }
-  }
-} as ComponentMeta<typeof Button>;
+    },
+  },
+} as ComponentMeta<typeof Button>
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
 
-export const Primary = Template.bind({});
+export const Primary = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
   label: 'Button',
-};
+}
 
-export const Secondary = Template.bind({});
+export const Secondary = Template.bind({})
 Secondary.args = {
   label: 'Button',
-};
+}
 
-export const Large = Template.bind({});
+export const Large = Template.bind({})
 Large.args = {
   size: 'large',
   label: 'Button',
-};
+}
 
-export const Small = Template.bind({});
+export const Small = Template.bind({})
 Small.args = {
   size: 'small',
   label: 'Button',
-};
+}

src/stories/Header.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 
-import { Header } from './Header';
+import { Header } from './Header'
 
 export default {
   title: 'Example/Header',
@@ -10,16 +10,16 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Header>;
+} as ComponentMeta<typeof Header>
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />
 
-export const LoggedIn = Template.bind({});
+export const LoggedIn = Template.bind({})
 LoggedIn.args = {
   user: {
     name: 'Jane Doe',
   },
-};
+}
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = Template.bind({})
+LoggedOut.args = {}

src/stories/Header.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React from 'react'
 
-import { Button } from './Button';
-import './header.css';
+import { Button } from './Button'
+import './header.css'
 
 type User = {
-  name: string;
-};
+  name: string
+}
 
 interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  user?: User
+  onLogin: () => void
+  onLogout: () => void
+  onCreateAccount: () => void
 }
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
@@ -20,18 +20,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
           </g>
         </svg>
         <h1>Acme</h1>
@@ -53,4 +44,4 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       </div>
     </div>
   </header>
-);
+)

src/stories/Introduction.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from '@storybook/addon-docs'
+import Code from './assets/code-brackets.svg'
+import Colors from './assets/colors.svg'
+import Comments from './assets/comments.svg'
+import Direction from './assets/direction.svg'
+import Flow from './assets/flow.svg'
+import Plugin from './assets/plugin.svg'
+import Repo from './assets/repo.svg'
+import StackAlt from './assets/stackalt.svg'
 
 <Meta title="Example/I've just changed it" />
 
@@ -73,7 +73,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,13 +111,15 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-  
+
 `}</style>
 
 # Welcome to Storybook
+
 ## This is H2
-* this is my bulletpoint
-* this is another one
+
+- this is my bulletpoint
+- this is another one
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
 That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
@@ -133,6 +135,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     className="link-item"
     href="https://storybook.js.org/docs/react/addons/addon-types"
     target="_blank"
+    rel="noreferrer"
   >
     <img src={Plugin} alt="plugin" />
     <span>
@@ -144,6 +147,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     className="link-item"
     href="https://storybook.js.org/docs/react/configure/webpack"
     target="_blank"
+    rel="noreferrer"
   >
     <img src={StackAlt} alt="Build" />
     <span>
@@ -155,6 +159,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     className="link-item"
     href="https://storybook.js.org/docs/react/configure/styling-and-css"
     target="_blank"
+    rel="noreferrer"
   >
     <img src={Colors} alt="colors" />
     <span>
@@ -166,6 +171,7 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     className="link-item"
     href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
     target="_blank"
+    rel="noreferrer"
   >
     <img src={Flow} alt="flow" />
     <span>
@@ -178,28 +184,28 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 <div className="subheading">Learn</div>
 
 <div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank" rel="noreferrer">
     <img src={Repo} alt="repo" />
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank" rel="noreferrer">
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank" rel="noreferrer">
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank" rel="noreferrer">
     <img src={Comments} alt="comments" />
     <span>
       <strong>Discord chat</strong>
@@ -209,6 +215,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
+  <span className="tip">Tip</span>Edit the Markdown in <code>src/stories/Introduction.stories.mdx</code>
 </div>

src/stories/Page.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { within, userEvent } from '@storybook/testing-library'
+import { Page } from './Page'
 
 export default {
   title: 'Example/Page',
@@ -10,17 +10,17 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+} as ComponentMeta<typeof Page>
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut = Template.bind({})
 
-export const LoggedIn = Template.bind({});
+export const LoggedIn = Template.bind({})
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
+  const canvas = within(canvasElement)
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i })
+  await userEvent.click(loginButton)
+}