feat: figma embed addon

plugins/figma-embed/.config/buildtime.js

@@ -0,0 +1,5 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.tsx',
+  ],
+};

plugins/figma-embed/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plugins/figma-embed/README.md

@@ -0,0 +1,169 @@
+# Table of contents
+
+- [In action](#in-action)
+- [Overview](#overview)
+- [Getting Started](#getting-started)
+  - [Install](#install)
+  - [Add to a document](#add-to-a-document)
+  - [Add to a story](#add-to-a-story)
+  - [Insert into an MDX document](#insert-into-an-mdx-document)
+  - [Configure props globally](#configure-props-globally)
+- [API](#api)
+  - [<ins>FigmaEmbedBlock</ins>](#insfigmaembedblockins)
+  - [<ins>overview</ins>](#insoverviewins)
+  - [<ins>customURLS</ins>](#inscustomurlsins)
+  - [<ins>noFullScreen</ins>](#insnofullscreenins)
+  - [<ins>customIFrameProps</ins>](#inscustomiframepropsins)
+  - [<ins>customConfigProps</ins>](#inscustomconfigpropsins)
+
+# In action
+
+[Example site](https://component-controls.com/api/esm-starter--overview/design)
+
+# Overview
+
+This addon contains a `FigmaEmbedBlock` that you can integrate into any page, as well as a standalone `FigmaPage`
+
+# Getting Started
+
+## Install
+
+```sh
+yarn add @component-controls/figma-plugin --dev
+```
+
+## Add to a document
+
+The figma file will be assigned to all the stories in the current document
+
+in `mystory.stories.tsx`
+
+```
+import { Document } from '@component-controls/core';
+
+export default {
+  title: 'MyStory',
+  plugins: {
+    figma: [
+      'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
+    ],
+  },
+} as Document;
+
+```
+
+## Add to a story
+
+The figma file will be assigned only to the specific story. This allows multiple stories in the document to have different figma files associated with them.
+
+in `mystory.stories.tsx`
+
+```
+import React from 'react';
+import { Document, Example, ControlTypes } from '@component-controls/core';
+import { Button, ButtonProps } from './Button';
+
+export default {
+  title: 'MyStory',
+} as Document;
+
+export const story: Example<ButtonProps> = () => <Button>click me</Button>;
+
+story.design = plugins: {
+  figma: [
+    'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
+  ],
+};
+```
+
+## Insert into an MDX document
+
+in `mystory.mdx`
+
+```
+---
+title: MyStory
+---
+import { FigmaEmbedBlock } from '@component-controls/figma-plugin';
+
+<FigmaEmbedBlock
+  items={[
+    {
+      url:
+        'https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309',
+    },
+    {
+      url:
+        'https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1',
+    },
+  ]}
+/>
+```
+
+## Configure props globally
+
+You can globally change the iframe options for the FigmaEmbedBlock component
+
+in `.config/runtime.tsx`
+
+```
+import { RunOnlyConfiguration } from "@component-controls/core";
+
+const config: RunOnlyConfiguration = {
+  ...
+  components: {
+    figma: {
+      width: '200'
+    }
+  },
+};
+
+export default config;
+```
+
+# API
+
+<react-docgen-typescript path="./src" />
+
+<!-- START-REACT-DOCGEN-TYPESCRIPT -->
+
+## <ins>FigmaEmbedBlock</ins>
+
+_FigmaEmbedBlock [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.tsx)_
+
+### properties
+
+| Name          | Type                                                                   | Description                                                                                                     |
+| ------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `items`       | _(string \| { \[key: string]: any; url: string; })\[]_                 |                                                                                                                 |
+| `title`       | _string_                                                               | optional section title for the block.                                                                           |
+| `description` | _string_                                                               | optional markdown description.                                                                                  |
+| `id`          | _string_                                                               | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
+| `collapsible` | _boolean_                                                              | if false, will nothave a collapsible frame.                                                                     |
+| `data-testid` | _string_                                                               | testing id                                                                                                      |
+| `plain`       | _boolean_                                                              | inner container variant or plain                                                                                |
+| `sx`          | _ThemeUIStyleObject_                                                   |                                                                                                                 |
+| `ref`         | _((instance: HTMLDivElement) => void) \| RefObject&lt;HTMLDivElement>_ |                                                                                                                 |
+| `name`        | _string_                                                               |                                                                                                                 |
+
+## <ins>overview</ins>
+
+_overview [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/stories/FigmaEmbedBlock.stories.tsx)_
+
+## <ins>customURLS</ins>
+
+_customURLS [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/stories/FigmaEmbedBlock.stories.tsx)_
+
+## <ins>noFullScreen</ins>
+
+_noFullScreen [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/stories/FigmaEmbedBlock.stories.tsx)_
+
+## <ins>customIFrameProps</ins>
+
+_customIFrameProps [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/stories/FigmaEmbedBlock.stories.tsx)_
+
+## <ins>customConfigProps</ins>
+
+_customConfigProps [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/figma-embed/src/stories/FigmaEmbedBlock.stories.tsx)_
+
+<!-- END-REACT-DOCGEN-TYPESCRIPT -->

plugins/figma-embed/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@component-controls/figma-embed",
+  "version": "2.5.3",
+  "description": "Embed figma files in your documentation",
+  "keywords": [
+    "figma",
+    "figma embed"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-md",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "cc-jest -c ./.config"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "plugins/figma-embed"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/blocks": "^2.5.3",
+    "@component-controls/components": "^2.5.3",
+    "@component-controls/store": "^2.5.3"
+  },
+  "devDependencies": {
+    "@component-controls/jest-snapshots": "^2.5.3",
+    "@types/react": "^16.9.34",
+    "react": "^17.0.1",
+    "theme-ui": "^0.6.0-alpha.3",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17",
+    "theme-ui": ">= 0.4.0-rc.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ],
+  "gitHead": "e30d62f101e104711a16261fce04785d58cac1eb"
+}

plugins/figma-embed/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: ['./src/index.ts'],
+});

plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.tsx

@@ -0,0 +1,75 @@
+/** @jsx jsx */
+import { FC, IframeHTMLAttributes } from 'react';
+import { jsx } from 'theme-ui';
+import {
+  StoryBlockContainer,
+  StoryBlockContainerProps,
+  useCustomProps,
+} from '@component-controls/blocks';
+import { useStory, StoryInputProps } from '@component-controls/store';
+
+export type FigmaEmbedBlockOwnProps = {
+  items?: (string | { url: string; [key: string]: any })[];
+};
+
+export type FigmaEmbedBlockProps = FigmaEmbedBlockOwnProps &
+  StoryBlockContainerProps &
+  StoryInputProps &
+  IframeHTMLAttributes<HTMLIFrameElement>;
+export const FigmaEmbedBlock: FC<FigmaEmbedBlockProps> = fullProps => {
+  const custom = useCustomProps<FigmaEmbedBlockProps>('figma', fullProps);
+  const {
+    id,
+    name,
+    allowFullScreen = true,
+    items,
+    height = '450',
+    width = '100%',
+    style,
+    allow,
+    allowTransparency,
+    loading,
+    referrerPolicy,
+    sandbox,
+    seamless,
+    srcDoc,
+    ...rest
+  } = custom;
+  const story = useStory({ id, name });
+  const { figma } = story?.plugins || {};
+  const configItems = figma?.items || figma;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { items: _, ...configRest } = figma || {};
+  const props = { ...rest, ...configRest };
+
+  const designItems: FigmaEmbedBlockOwnProps['items'] = items || configItems;
+  return designItems?.length ? (
+    <StoryBlockContainer story={story} {...props}>
+      {designItems.map((item, index) => {
+        const { url, ...rest } =
+          typeof item === 'string' ? { url: item } : item;
+        return (
+          <iframe
+            key={`figma_iframe_${index}`}
+            height={height}
+            width={width}
+            src={`https://www.figma.com/embed?embed_host=component-controls&url=${url}`}
+            allowFullScreen={allowFullScreen}
+            sx={{
+              border: 'none',
+            }}
+            style={style}
+            allow={allow}
+            allowTransparency={allowTransparency}
+            loading={loading}
+            referrerPolicy={referrerPolicy}
+            sandbox={sandbox}
+            seamless={seamless}
+            srcDoc={srcDoc}
+            {...rest}
+          />
+        );
+      })}
+    </StoryBlockContainer>
+  ) : null;
+};

plugins/figma-embed/src/FigmaEmbedBlock/index.ts

@@ -0,0 +1 @@
+export * from './FigmaEmbedBlock';

plugins/figma-embed/src/index.ts

@@ -0,0 +1 @@
+export * from './FigmaEmbedBlock';