feat: Vega and Vega Lite components API and docs improvements

packages/components/src/components/Vega.tsx

@@ -1,6 +1,7 @@
 //  Wrapper for the Vega component
 import { Vega as VegaOg } from "react-vega";
+import { VegaProps } from "react-vega/lib/Vega";
 
-export function Vega(props) {
+export function Vega(props: VegaProps) {
   return <VegaOg {...props} />;
 }

packages/components/src/components/VegaLite.tsx

@@ -1,8 +1,9 @@
 //  Wrapper for the Vega Lite component
-import { VegaLite as VegaLiteOg } from "react-vega";
-import applyFullWidthDirective from "../lib/applyFullWidthDirective";
+import { VegaLite as VegaLiteOg } from 'react-vega';
+import { VegaLiteProps } from 'react-vega/lib/VegaLite';
+import applyFullWidthDirective from '../lib/applyFullWidthDirective';
 
-export function VegaLite(props) {
+export function VegaLite(props: VegaLiteProps) {
   const Component = applyFullWidthDirective({ Component: VegaLiteOg });
 
   return <Component {...props} />;

packages/components/stories/Vega.stories.ts

@@ -7,6 +7,16 @@ const meta: Meta = {
   title: 'Components/Charts/Vega',
   component: Vega,
   tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        "Vega's `data` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/data/",
+    },
+    spec: {
+      description:
+        "Vega's `spec` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/specification/",
+    },
+  },
 };
 
 export default meta;
@@ -15,7 +25,7 @@ type Story = StoryObj<any>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
-  name: 'Chart built with Vega',
+  name: 'Bar chart',
   args: {
     data: {
       table: [

packages/components/stories/VegaLite.stories.ts

@@ -25,7 +25,7 @@ type Story = StoryObj<any>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
-  name: 'Chart built with Vega Lite',
+  name: 'Bar chart',
   args: {
     data: {
       table: [