feat: new addon-notes

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

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

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

@@ -0,0 +1,164 @@
+# 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>NotesBlock</ins>](#insnotesblockins)
+  - [<ins>overview</ins>](#insoverviewins)
+  - [<ins>customItems</ins>](#inscustomitemsins)
+  - [<ins>customConfigProps</ins>](#inscustomconfigpropsins)
+  - [<ins>markdownFile</ins>](#insmarkdownfileins)
+
+# In action
+
+[Example site](https://component-controls.com/api/esm-starter--overview/design)
+
+# Overview
+
+This addon contains a `NotesBlock` that you can integrate into any page, as well as a standalone `NotesPage`
+
+# Getting Started
+
+## Install
+
+```sh
+yarn add@component-controls/addon-notesn --dev
+```
+
+## Add to a document
+
+The notes 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: {
+    notes: {
+      title: 'Design brief',
+      items: [design_notes],
+    },
+  },
+} as Document;
+
+```
+
+## Add to a story
+
+The notes will be assigned only to the specific story. This allows multiple stories in the document to have different notes 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: {
+        notes: [
+          # Introduction
+          some **markdown**
+        ],
+      },
+`   };
+```
+
+## Insert into an MDX document
+
+in `mystory.mdx`
+
+```
+---
+title: MyStory
+---
+import { NotesBlock } from '@component-controls/addon-notes';
+
+<NotesBlock
+  items={[
+      `
+# Introduction
+some **markdown**
+`,
+  ]}
+/>
+```
+
+## Configure props globally
+
+You can globally change the iframe options for the NotesBlock component
+
+in `.config/runtime.tsx`
+
+```
+import { RunOnlyConfiguration } from "@component-controls/core";
+
+const config: RunOnlyConfiguration = {
+  ...
+  components: {
+    notes: {
+      title: 'Design files'
+    }
+  },
+};
+
+export default config;
+```
+
+# API
+
+<react-docgen-typescript path="./src" />
+
+<!-- START-REACT-DOCGEN-TYPESCRIPT -->
+
+## <ins>NotesBlock</ins>
+
+_NotesBlock [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/NotesBlock/NotesBlock.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/addon-notes/src/stories/NotesBlock.stories.tsx)_
+
+## <ins>customItems</ins>
+
+_customItems [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_
+
+## <ins>customConfigProps</ins>
+
+_customConfigProps [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_
+
+## <ins>markdownFile</ins>
+
+_markdownFile [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_
+
+<!-- END-REACT-DOCGEN-TYPESCRIPT -->

plugins/addon-notes/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@component-controls/addon-notes",
+  "version": "2.5.3",
+  "description": "Embed markdown documents 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-notes"
+  },
+  "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-notes/rollup.config.js

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

plugins/addon-notes/src/NotesBlock/NotesBlock.tsx

@@ -0,0 +1,41 @@
+/** @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 { Markdown } from '@component-controls/components';
+
+export interface NotesBlockOwnProps {
+  items?: (string | { url: string; [key: string]: any })[];
+}
+export type NotesBlockProps = NotesBlockOwnProps &
+  StoryBlockContainerProps &
+  StoryInputProps;
+export const NotesBlock: FC<NotesBlockProps> = fullProps => {
+  const custom = useCustomProps<NotesBlockProps>('notes', fullProps);
+  const { id, name, items, ...rest } = custom;
+  const story = useStory({ id, name });
+  const { notes } = story?.plugins || {};
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { items: _, ...configRest } = notes || {};
+  const configItems = notes?.items || notes;
+  const props = { ...rest, ...configRest };
+  const noteItems: NotesBlockOwnProps['items'] = items || configItems;
+  return noteItems?.length ? (
+    <StoryBlockContainer story={story} {...props}>
+      {noteItems.map((item, index) => {
+        const { text, ...rest } =
+          typeof item === 'string' ? { text: item } : item;
+        return (
+          <Markdown key={`notes_item_${index}`} {...rest}>
+            {text}
+          </Markdown>
+        );
+      })}
+    </StoryBlockContainer>
+  ) : null;
+};

plugins/addon-notes/src/NotesBlock/index.ts

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

plugins/addon-notes/src/index.ts

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

plugins/addon-notes/src/stories/NotesBlock.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { BlockContextProvider, store } from '@component-controls/blocks';
+import { NotesBlock } from '../index';
+import notes from './notes.md';
+
+export default {
+  title: 'Plugins/NotesBlock',
+  component: NotesBlock,
+} as Document;
+
+export const overview: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={store}
+    >
+      <NotesBlock id="." />
+    </BlockContextProvider>
+  );
+};
+
+export const customItems: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={store}
+    >
+      <NotesBlock
+        id="."
+        items={[
+          `
+# Introduction
+some **markdown**
+`,
+        ]}
+      />
+    </BlockContextProvider>
+  );
+};
+
+export const customConfigProps: Example = () => {
+  return (
+    <BlockContextProvider
+      storyId="blocks-core-story-plain--controls"
+      store={{
+        ...store,
+        config: {
+          ...store.config,
+          components: {
+            notes: { collapsable: false, title: 'Custom title here' },
+          },
+        },
+      }}
+    >
+      <NotesBlock id="." />
+    </BlockContextProvider>
+  );
+};
+
+export const markdownFile: Example = () => {
+  return <NotesBlock items={[notes]} />;
+};

plugins/addon-notes/src/stories/notes.md

@@ -0,0 +1,14 @@
+# Button
+
+## Guidelines
+
+- The component _should_ use color palette
+- The component will have 3 variants
+  1. **primary** - for main, most important actions on secreen
+  2. **secondary** - for less-significant actions
+  3. **disabled** - can not be clicked, visually subdued
+
+## Styles
+
+- primary color #d45a33f
+- disabled color color #3e3e3e