Bump loader-utils, @storybook/addon-essentials, @storybook/react and next

Bumps [loader-utils](https://github.com/webpack/loader-utils) to 2.0.4 and updates ancestor dependencies [loader-utils](https://github.com/webpack/loader-utils), [loader-utils](https://github.com/webpack/loader-utils), [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/addons/essentials), [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/renderers/react) and [next](https://github.com/vercel/next.js). These dependencies need to be updated together.


Updates `loader-utils` from 1.4.0 to 2.0.4
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.4/CHANGELOG.md)
- [Commits](https://github.com/webpack/loader-utils/compare/v1.4.0...v2.0.4)

Updates `loader-utils` from 2.0.0 to 2.0.4
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.4/CHANGELOG.md)
- [Commits](https://github.com/webpack/loader-utils/compare/v1.4.0...v2.0.4)

Updates `@storybook/addon-essentials` from 6.3.0 to 6.5.16
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/v6.5.16/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.5.16/addons/essentials)

Updates `@storybook/react` from 6.3.0 to 6.5.16
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.5.16/renderers/react)

Updates `next` from 10.2.3 to 13.3.1
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v10.2.3...v13.3.1)

---
updated-dependencies:
- dependency-name: loader-utils
  dependency-type: indirect
- dependency-name: loader-utils
  dependency-type: indirect
- dependency-name: "@storybook/addon-essentials"
  dependency-type: direct:development
- dependency-name: "@storybook/react"
  dependency-type: direct:development
- dependency-name: next
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.11.2",
+	"version": "0.11.3",
 	"license": "MIT",
 	"main": "./index.js",
 	"types": "./types/index.d.ts",
@@ -8,16 +8,16 @@
 		"@babel/core": "^7.12.16",
 		"@babel/preset-env": "^7.12.16",
 		"@babel/preset-react": "^7.12.13",
-		"@storybook/addon-essentials": "^6.1.14",
+		"@storybook/addon-essentials": "^6.5.16",
 		"@storybook/cli": "^6.1.14",
-		"@storybook/react": "^6.1.14",
+		"@storybook/react": "^6.5.16",
 		"@types/node": "^15.12.1",
 		"@types/react": "^17.0.2",
 		"@types/react-dom": "^17.0.1",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.2",
 		"lucide-react": "^0.15.19",
-		"next": "^10.0.0",
+		"next": "^13.3.1",
 		"react": "^16.0.0",
 		"react-dom": "^16.0.0",
 		"style-loader": "^2.0.0",

src/dzeio/Button/Button.stories.tsx

@@ -25,3 +25,10 @@ WithImg.args = {
 	href: '/pouet',
 	block: true
 }
+
+export const ExternalLinkButton = (args: any) => <Component {...args}>Button</Component>
+ExternalLinkButton.args = {
+	nomargintop: true,
+	href: 'https://example.com',
+	block: true
+}

src/dzeio/Button/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Link from 'next/link'
+import Link from '../Link'
 import { ColorType, IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
@@ -57,8 +57,8 @@ export default class Button extends React.Component<Props> {
 
 		if (this.props.href) {
 			return (
-				<Link href={this.props.href} as={this.props.as}>
-					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
+					{inner}
 				</Link>
 			)
 		}

src/dzeio/Input/index.tsx

@@ -97,7 +97,7 @@ export default class Input extends React.Component<Props, States> {
 			baseProps.onWheel = (ev: React.WheelEvent<HTMLInputElement>) => ev.currentTarget.blur()
 		}
 
-		if (this.props.type === 'select') {
+		if (this.props.type === 'select' && !this.props.readOnly) {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
@@ -112,6 +112,15 @@ export default class Input extends React.Component<Props, States> {
 					{this.props.children}
 				</select>
 			)
+		// select is readonly
+		} else if (this.props.type === 'select') {
+			input = (
+				<input
+					{...props}
+					{...baseProps}
+					type="text"
+				/>
+			)
 		} else if (this.props.type === 'textarea') {
 			delete baseProps.ref
 			input = (

src/dzeio/Link/index.tsx

@@ -1,65 +1,65 @@
-import React from 'react'
-import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
-
-import css from './Link.module.styl'
-import { buildClassName } from '../Util'
-
-interface Props {
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
-	href: string
-	children?: React.ReactNode
-	className?: string
-	/**
-	 * Remove styling
-	 */
-	noStyle?: boolean
-
-	/**
-	 * Override external detection system
-	 */
-	external?: boolean
-
-	/**
-	 * force hiding the icon
-	 */
-	hideIcon?: boolean
-}
-
-export default class Link extends React.Component<Props> {
-
-	public render() {
-		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ? {
-			rel: 'noreferrer nofollow',
-			target: '_blank'
-		} : {}
-		
-		if (isExternal) {
-			// external link
-			return (
-				<a
-					{...this.props.linkProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-					href={this.props.href}
-					{...externalProps}
-				>
-					{this.props.children}
-					{(this.props.external !== false && !this.props.hideIcon) && (
-						<ExternalLink size={16} className={css.icon} />
-					)}
-				</a>
-			)
-		}
-		return (
-			<NextLink href={this.props.href}>
-				<a
-					{...this.props.linkProps}
-					{...externalProps}
-					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
-				>{this.props.children}</a>
-			</NextLink>
-		)
-	}
-
-}
+import React from 'react'
+import NextLink from 'next/link'
+import { ExternalLink } from 'lucide-react'
+
+import css from './Link.module.styl'
+import { buildClassName } from '../Util'
+
+interface Props {
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+	href: string
+	children?: React.ReactNode
+	className?: string
+	/**
+	 * Remove styling
+	 */
+	noStyle?: boolean
+
+	/**
+	 * Override external detection system
+	 */
+	external?: boolean
+
+	/**
+	 * force hiding the icon
+	 */
+	hideIcon?: boolean
+}
+
+export default class Link extends React.Component<Props> {
+
+	public render() {
+		const isExternal = this.props.href.startsWith('http')
+		const externalProps = this.props.external ?? isExternal ? {
+			rel: 'noreferrer nofollow',
+			target: '_blank'
+		} : {}
+
+		if (isExternal) {
+			// external link
+			return (
+				<a
+					{...this.props.linkProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+					href={this.props.href}
+					{...externalProps}
+				>
+					{this.props.children}
+					{(this.props.external !== false && !this.props.hideIcon) && (
+						<ExternalLink size={16} className={css.icon} />
+					)}
+				</a>
+			)
+		}
+		return (
+			<NextLink href={this.props.href}>
+				<a
+					{...this.props.linkProps}
+					{...externalProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+				>{this.props.children}</a>
+			</NextLink>
+		)
+	}
+
+}