@storybook/preact 7.6.0-alpha.6 → 7.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "7.6.0-alpha.6",
+  "version": "7.6.0-beta.0",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
@@ -43,14 +43,14 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "../../../scripts/prepare/check.ts",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.6.0-alpha.6",
+    "@storybook/core-client": "7.6.0-beta.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.6.0-alpha.6",
-    "@storybook/types": "7.6.0-alpha.6",
+    "@storybook/preview-api": "7.6.0-beta.0",
+    "@storybook/types": "7.6.0-beta.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

package/template/cli/Button.jsx

@@ -1,10 +1,21 @@
-import PropTypes from 'prop-types';
 import './button.css';
 
 /**
  * Primary UI component for user interaction
+ * @param {object} props
+ * @param {string} [props.primary=false]
+ * @param {string} [props.backgroundColor]
+ * @param {('small' | 'medium' | 'large')} [props.size='medium']
+ * @param {string} props.label
+ * @param {function} props.onClick
  */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
@@ -17,33 +28,3 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
     </button>
   );
 };
-
-Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
-  onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};

package/template/cli/Header.jsx

@@ -1,9 +1,16 @@
-import PropTypes from 'prop-types';
-
 import { Button } from './Button';
 import './header.css';
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+/**
+ * Header component
+ * @param {object} props
+ * @param {object} [props.user]
+ * @param {string} props.user.name
+ * @param {function} props.onLogin
+ * @param {function} props.onLogout
+ * @param {function} props.onCreateAccount
+ */
+export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
       <div>
@@ -43,16 +50,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
     </div>
   </header>
 );
-
-Header.propTypes = {
-  user: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-  }),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
-
-Header.defaultProps = {
-  user: null,
-};

package/template/cli/Page.jsx

@@ -2,6 +2,9 @@ import { useState } from 'preact/hooks';
 import { Header } from './Header';
 import './page.css';
 
+/**
+ * Simple page component
+ */
 export const Page = () => {
   const [user, setUser] = useState();
 

package/template/stories/React.js

@@ -1,8 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import PropTypes from 'prop-types';
 
+/**
+ * ReactFunctionalComponent component
+ * @param {object} props
+ * @param {string} props.label
+ */
 export const ReactFunctionalComponent = ({ label }) => {
   const [clicks, setValue] = React.useState(0);
   return (
@@ -19,10 +22,11 @@ export const ReactFunctionalComponent = ({ label }) => {
   );
 };
 
-ReactFunctionalComponent.propTypes = {
-  label: PropTypes.string.isRequired,
-};
-
+/**
+ * ReactClassComponent component
+ * @param {object} props
+ * @param {string} props.label
+ */
 export class ReactClassComponent extends React.Component {
   state = {
     clicks: 0,
@@ -45,7 +49,3 @@ export class ReactClassComponent extends React.Component {
     );
   }
 }
-
-ReactClassComponent.propTypes = {
-  label: PropTypes.string.isRequired,
-};

package/template/stories/react-compat.stories.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { ReactFunctionalComponent, ReactClassComponent } from './React';
 
 export default {