View: Fixup for type verification

packages/components/src/view/component.js → packages/components/src/view/component.tsx

@@ -2,6 +2,13 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import type { RefAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponent } from '../ui/context/wordpress-component';
+import type { ViewProps } from './types';
 
 /**
  * `View` is a core component that renders everything in the library.
@@ -19,11 +26,13 @@ import styled from '@emotion/styled';
  * 	);
  * }
  * ```
- *
- * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>}
  */
-// @ts-ignore
-const View = styled.div``;
+// @ts-expect-error
+export const View: WordPressComponent<
+	'div',
+	ViewProps & RefAttributes< any >
+> = styled.div``;
+
 View.selector = '.components-view';
 View.displayName = 'View';
 

packages/components/src/view/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '..';
+
+const meta: ComponentMeta< typeof View > = {
+	component: View,
+	title: 'Components (Experimental)/View',
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof View > = ( args ) => {
+	return <View { ...args } />;
+};
+
+export const Default: ComponentStory< typeof View > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};

packages/components/src/view/types.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ViewProps = { children?: ReactNode };