Merge pull request #1067 from datopian/changeset-release/main

Version Packages

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/components
 
+## 0.5.3
+
+### Patch Changes
+
+- [#1066](https://github.com/datopian/portaljs/pull/1066) [`dd03a493`](https://github.com/datopian/portaljs/commit/dd03a493beca5459d1ef447b2df505609fc64e95) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created Iframe component
+
 ## 0.5.2
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [

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 ?? { width: `100%`, height: `100%` }}></iframe>
+  );
+}

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";

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 = {

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://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
+    style: {width: `100%`, height: `100%`}
+  },
+};