From 3d73ac422e33bfd5b1f9a842e626271e20cff263 Mon Sep 17 00:00:00 2001
From: Demenech <joaommdemenech@gmail.com>
Date: Tue, 9 Apr 2024 17:13:05 -0300
Subject: [PATCH] feat: Vega and Vega Lite components API and docs improvements

---
 packages/components/src/components/Vega.tsx     |  3 ++-
 packages/components/src/components/VegaLite.tsx |  7 ++++---
 packages/components/stories/Vega.stories.ts     | 12 +++++++++++-
 packages/components/stories/VegaLite.stories.ts |  2 +-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/Vega.tsx b/packages/components/src/components/Vega.tsx
index 3a66d8aa..a51f053f 100644
--- a/packages/components/src/components/Vega.tsx
+++ b/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} />;
 }
diff --git a/packages/components/src/components/VegaLite.tsx b/packages/components/src/components/VegaLite.tsx
index 7c311966..3b48d142 100644
--- a/packages/components/src/components/VegaLite.tsx
+++ b/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} />;
diff --git a/packages/components/stories/Vega.stories.ts b/packages/components/stories/Vega.stories.ts
index 6c4eed65..95d85959 100644
--- a/packages/components/stories/Vega.stories.ts
+++ b/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: [
diff --git a/packages/components/stories/VegaLite.stories.ts b/packages/components/stories/VegaLite.stories.ts
index 28a43771..929d111b 100644
--- a/packages/components/stories/VegaLite.stories.ts
+++ b/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: [