feat: addon-images

examples/gatsby/.config/buildtime.js

@@ -30,6 +30,7 @@ module.exports = {
     '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/figma-embed/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/addon-notes/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../plugins/addon-images/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     //'../../stories/src/blogs/introduction-to-controls.mdx',
     //'../../stories/src/stories/controls-editors-starter.stories.tsx',
     //'../../stories/src/blogs/gatsby-nextjs-storybook.mdx',

examples/nextjs/.config/buildtime.js

@@ -29,6 +29,7 @@ module.exports = {
     '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/figma-embed/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../plugins/addon-notes/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../plugins/addon-images/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
     // '../../stories/src/blogs/introduction-to-controls.mdx',
   ],
   siteUrl:

examples/stories/src/stories/controls-editors-starter.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Document, Example, ControlTypes } from '@component-controls/core';
 import { VariantButton, VariantButtonProps } from '../components/VariantButton';
 import design_notes from '../sections/design-notes.md';
+import image_screenshot from './media/image_screenshot.jpg';
 
 export default {
   title: 'ESM/Starter',
@@ -16,6 +17,7 @@ export default {
       title: 'Design brief',
       items: [design_notes],
     },
+    images: [image_screenshot],
   },
   description: `This example demonstrates documentiing a hypotethical Button component that supports variants, icons, text, and padding`,
 } as Document;

plugins/addon-images/.config/buildtime.js

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

plugins/addon-images/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/addon-images/README.md

@@ -0,0 +1,148 @@
+# 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>ImagesBlock</ins>](#insimagesblockins)
+    -   [<ins>overview</ins>](#insoverviewins)
+    -   [<ins>customItems</ins>](#inscustomitemsins)
+    -   [<ins>customConfigProps</ins>](#inscustomconfigpropsins)
+
+# In action
+
+[Example site](https://component-controls.com/api/esm-starter--overview/design)
+
+# Overview
+
+This addon contains a `ImagesBlock` that you can integrate into any page, as well as a standalone `ImagesPage`
+
+# Getting Started
+
+## Install
+
+```sh
+yarn add@component-controls/addon-images --dev
+```
+
+## Add to a document
+
+The images will be assigned to all the stories in the current document
+
+in `mystory.stories.tsx`
+
+```
+import { Document } from '@component-controls/core';
+import main_screen from './media/main-screen.jpg';
+
+export default {
+  title: 'MyStory',
+  plugins: {
+    images: {
+      title: 'Screen design',
+      items: [main_screen],
+    },
+  },
+} as Document;
+
+```
+
+## Add to a story
+
+The images will be assigned only to the specific story. This allows multiple stories in the document to have different images associated with them.
+
+in `mystory.stories.tsx`
+
+    import React from 'react';
+    import { Document, Example } from '@component-controls/core';
+    import main_screen from './media/main-screen.jpg';
+
+    export default {
+      title: 'MyStory',
+    } as Document;
+
+    export const story: Example = () => <Button>click me</Button>;
+
+    story.design = {
+      plugins: {
+        images: [main_screen],
+      },
+    };
+
+## Insert into an MDX document
+
+in `mystory.mdx`
+
+    ---
+    title: MyStory
+    ---
+    import { ImagesBlock } from '@component-controls/addon-images';
+    import login_screen from './media/login-screen.jpg';
+    import logout_screen from './media/logout-screen.jpg';
+
+    <ImagesBlock
+      items={[login_screen, logout_screen]}
+    />
+
+## Configure props globally
+
+You can globally change the default options of the NotesBlock component
+
+in `.config/runtime.tsx`
+
+    import { RunOnlyConfiguration } from "@component-controls/core";
+
+    const config: RunOnlyConfiguration = {
+      ...
+      components: {
+        images: {
+          title: 'Screenshots'
+        }
+      },
+    };
+
+    export default config;
+
+# API
+
+<react-docgen-typescript path="./src" />
+
+<!-- START-REACT-DOCGEN-TYPESCRIPT -->
+
+## <ins>ImagesBlock</ins>
+
+_ImagesBlock [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-images/src/ImagesBlock/ImagesBlock.tsx)_
+
+### properties
+
+| Name          | Type                                                                   | Description                                                                                                     |
+| ------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `items`       | _(string \| { \[key: string]: any; src: 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/addon-images/src/stories/ImagesBlock.stories.tsx)_
+
+## <ins>customItems</ins>
+
+_customItems [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-images/src/stories/ImagesBlock.stories.tsx)_
+
+## <ins>customConfigProps</ins>
+
+_customConfigProps [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-images/src/stories/ImagesBlock.stories.tsx)_
+
+<!-- END-REACT-DOCGEN-TYPESCRIPT -->

plugins/addon-images/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@component-controls/addon-images",
+  "version": "2.5.3",
+  "description": "Embed images in your documentation sites",
+  "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/addon-images"
+  },
+  "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/addon-images/rollup.config.js

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

plugins/addon-images/src/ImagesBlock/ImagesBlock.tsx

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx } from 'theme-ui';
+import {
+  StoryBlockContainer,
+  StoryBlockContainerProps,
+  useCustomProps,
+} from '@component-controls/blocks';
+import { useStory, StoryInputProps } from '@component-controls/store';
+import { TitledImage } from '@component-controls/components';
+
+export interface ImagesBlockkOwnProps {
+  items?: (string | { src: string; [key: string]: any })[];
+}
+export type ImagesBlockProps = ImagesBlockkOwnProps &
+  StoryBlockContainerProps &
+  StoryInputProps;
+
+export const ImagesBlock: FC<ImagesBlockProps> = fullProps => {
+  const custom = useCustomProps<ImagesBlockProps>('images', fullProps);
+  const { id, name, items, ...rest } = custom;
+  const story = useStory({ id, name });
+  const { images } = story?.plugins || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { items: _, ...configRest } = images || {};
+  const configItems = images?.items || images;
+  const props = { ...rest, ...configRest };
+  const noteItems: ImagesBlockkOwnProps['items'] = items || configItems;
+  return noteItems?.length ? (
+    <StoryBlockContainer story={story} {...props}>
+      {noteItems.map((item, index) => {
+        const { src, ...rest } =
+          typeof item === 'string' ? { src: item } : item;
+        return <TitledImage key={`images_item_${index}`} src={src} {...rest} />;
+      })}
+    </StoryBlockContainer>
+  ) : null;
+};

plugins/addon-images/src/ImagesBlock/index.ts

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

plugins/addon-images/src/index.ts

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

plugins/addon-images/src/stories/ImagesBlock.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { BlockContextProvider, store } from '@component-controls/blocks';
+import { ImagesBlock } from '../index';
+import img from './example_image.jpg';
+
+export default {
+  title: 'Plugins/ImagesBlock',
+  component: ImagesBlock,
+} as Document;
+
+export const overview: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={store}
+    >
+      <ImagesBlock id="." />
+    </BlockContextProvider>
+  );
+};
+
+export const customItems: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={store}
+    >
+      <ImagesBlock
+        id="."
+        items={[
+          {
+            title: 'Image',
+            width: 200,
+            src: img,
+          },
+        ]}
+      />
+    </BlockContextProvider>
+  );
+};
+
+export const customConfigProps: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={{
+        ...store,
+        config: {
+          ...store.config,
+          components: {
+            images: { collapsible: false, title: 'Custom title here' },
+          },
+        },
+      }}
+    >
+      <ImagesBlock id="." />
+    </BlockContextProvider>
+  );
+};

plugins/addon-images/src/typoings.d.ts

@@ -0,0 +1 @@
+declare module '*.jpg';