From a93b13f448ea6c24237293c1c06f2b1158abac3e Mon Sep 17 00:00:00 2001
From: Gutts-n <leonardoyuricontato@gmail.com>
Date: Wed, 17 Jan 2024 21:08:44 -0300
Subject: [PATCH 1/3] Component start

---
 packages/components/src/components/Iframe.tsx | 14 +++++++++
 packages/components/src/index.ts              |  1 +
 .../stories/BucketViewer.stories.ts           |  4 +--
 packages/components/stories/Iframe.stories.ts | 31 +++++++++++++++++++
 4 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/components/Iframe.tsx
 create mode 100644 packages/components/stories/Iframe.stories.ts

diff --git a/packages/components/src/components/Iframe.tsx b/packages/components/src/components/Iframe.tsx
new file mode 100644
index 000000000..449fbaf00
--- /dev/null
+++ b/packages/components/src/components/Iframe.tsx
@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+
+export interface IframeProps {
+  url: string;
+  style?: CSSProperties;
+}
+
+export function Iframe({
+  url, style
+}: IframeProps) {
+  return (
+    <iframe src={url} style={style ?? {}}></iframe>
+  );
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index daf4b688c..11f791ff3 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -9,3 +9,4 @@ export * from './components/Map';
 export * from './components/PdfViewer';
 export * from "./components/Excel";
 export * from "./components/BucketViewer";
+export * from "./components/Iframe";
diff --git a/packages/components/stories/BucketViewer.stories.ts b/packages/components/stories/BucketViewer.stories.ts
index c3bf42c2d..1e914d9ac 100644
--- a/packages/components/stories/BucketViewer.stories.ts
+++ b/packages/components/stories/BucketViewer.stories.ts
@@ -1,6 +1,6 @@
-import { raw, type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 
-import { BucketViewer, BucketViewerData, BucketViewerProps } from '../src/components/BucketViewer';
+import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
diff --git a/packages/components/stories/Iframe.stories.ts b/packages/components/stories/Iframe.stories.ts
new file mode 100644
index 000000000..d7539b427
--- /dev/null
+++ b/packages/components/stories/Iframe.stories.ts
@@ -0,0 +1,31 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Iframe, IframeProps } from '../src/components/Iframe';
+
+const meta: Meta = {
+  title: 'Components/Iframe',
+  component: Iframe,
+  tags: ['autodocs'],
+  argTypes: {
+    url: {
+      description:
+        'Page to display inside of the component',
+    },
+    style: {
+      description:
+        'Style of the component',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IframeProps>;
+
+export const Normal: Story = {
+  name: 'Iframe',
+  args: {
+    url: 'https://ssen-smart-meter.datopian.workers.dev',
+    style: {width: `100%`}
+  },
+};

From e5b0a85e48bc466f9f727118a645c91764fc71dc Mon Sep 17 00:00:00 2001
From: Gutts-n <leonardoyuricontato@gmail.com>
Date: Wed, 17 Jan 2024 21:54:22 -0300
Subject: [PATCH 2/3] Created Iframe component

---
 packages/components/src/components/Iframe.tsx | 2 +-
 packages/components/stories/Iframe.stories.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Iframe.tsx b/packages/components/src/components/Iframe.tsx
index 449fbaf00..9cdb65a56 100644
--- a/packages/components/src/components/Iframe.tsx
+++ b/packages/components/src/components/Iframe.tsx
@@ -9,6 +9,6 @@ export function Iframe({
   url, style
 }: IframeProps) {
   return (
-    <iframe src={url} style={style ?? {}}></iframe>
+    <iframe src={url} style={style ?? { width: `100%`, height: `100%` }}></iframe>
   );
 }
diff --git a/packages/components/stories/Iframe.stories.ts b/packages/components/stories/Iframe.stories.ts
index d7539b427..6d5884a88 100644
--- a/packages/components/stories/Iframe.stories.ts
+++ b/packages/components/stories/Iframe.stories.ts
@@ -25,7 +25,7 @@ type Story = StoryObj<IframeProps>;
 export const Normal: Story = {
   name: 'Iframe',
   args: {
-    url: 'https://ssen-smart-meter.datopian.workers.dev',
-    style: {width: `100%`}
+    url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
+    style: {width: `100%`, height: `100%`}
   },
 };

From dd03a493beca5459d1ef447b2df505609fc64e95 Mon Sep 17 00:00:00 2001
From: Gutts-n <leonardoyuricontato@gmail.com>
Date: Wed, 17 Jan 2024 22:32:56 -0300
Subject: [PATCH 3/3] Created Iframe component

---
 .changeset/nervous-pens-chew.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nervous-pens-chew.md

diff --git a/.changeset/nervous-pens-chew.md b/.changeset/nervous-pens-chew.md
new file mode 100644
index 000000000..6919db7b3
--- /dev/null
+++ b/.changeset/nervous-pens-chew.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+Created Iframe component