diff --git a/plugins/addon-notes/.config/buildtime.js b/plugins/addon-notes/.config/buildtime.js new file mode 100644 index 000000000..9e2516647 --- /dev/null +++ b/plugins/addon-notes/.config/buildtime.js @@ -0,0 +1,5 @@ +module.exports = { + stories: [ + '../src/**/*.stories.tsx', + ], +}; \ No newline at end of file diff --git a/plugins/addon-notes/LICENSE.md b/plugins/addon-notes/LICENSE.md new file mode 100644 index 000000000..a64cf9401 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/plugins/addon-notes/README.md b/plugins/addon-notes/README.md new file mode 100644 index 000000000..1f6483200 --- /dev/null +++ b/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) + - [NotesBlock](#insnotesblockins) + - [overview](#insoverviewins) + - [customItems](#inscustomitemsins) + - [customConfigProps](#inscustomconfigpropsins) + - [markdownFile](#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 = () => ; + + story.design = { + plugins: { + notes: [ + # Introduction + some **markdown** + ], + }, +` }; +``` + +## Insert into an MDX document + +in `mystory.mdx` + +``` +--- +title: MyStory +--- +import { NotesBlock } from '@component-controls/addon-notes'; + + +``` + +## 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 + + + + + +## NotesBlock + +_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<HTMLDivElement>_ | | +| `name` | _string_ | | + +## overview + +_overview [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_ + +## customItems + +_customItems [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_ + +## customConfigProps + +_customConfigProps [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_ + +## markdownFile + +_markdownFile [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/addon-notes/src/stories/NotesBlock.stories.tsx)_ + + diff --git a/plugins/addon-notes/package.json b/plugins/addon-notes/package.json new file mode 100644 index 000000000..7666e8a84 --- /dev/null +++ b/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" +} diff --git a/plugins/addon-notes/rollup.config.js b/plugins/addon-notes/rollup.config.js new file mode 100644 index 000000000..ba1c61c86 --- /dev/null +++ b/plugins/addon-notes/rollup.config.js @@ -0,0 +1,5 @@ +import { config } from '../../rollup-config'; + +export default config({ + input: ['./src/index.ts'], +}); diff --git a/plugins/addon-notes/src/NotesBlock/NotesBlock.tsx b/plugins/addon-notes/src/NotesBlock/NotesBlock.tsx new file mode 100644 index 000000000..125aacfbc --- /dev/null +++ b/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 = fullProps => { + const custom = useCustomProps('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 ? ( + + {noteItems.map((item, index) => { + const { text, ...rest } = + typeof item === 'string' ? { text: item } : item; + return ( + + {text} + + ); + })} + + ) : null; +}; diff --git a/plugins/addon-notes/src/NotesBlock/index.ts b/plugins/addon-notes/src/NotesBlock/index.ts new file mode 100644 index 000000000..d6caea766 --- /dev/null +++ b/plugins/addon-notes/src/NotesBlock/index.ts @@ -0,0 +1 @@ +export * from './NotesBlock'; diff --git a/plugins/addon-notes/src/index.ts b/plugins/addon-notes/src/index.ts new file mode 100644 index 000000000..d6caea766 --- /dev/null +++ b/plugins/addon-notes/src/index.ts @@ -0,0 +1 @@ +export * from './NotesBlock'; diff --git a/plugins/addon-notes/src/stories/NotesBlock.stories.tsx b/plugins/addon-notes/src/stories/NotesBlock.stories.tsx new file mode 100644 index 000000000..77f94cfe3 --- /dev/null +++ b/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 ( + + + + ); +}; + +export const customItems: Example = () => { + return ( + + + + ); +}; + +export const customConfigProps: Example = () => { + return ( + + + + ); +}; + +export const markdownFile: Example = () => { + return ; +}; diff --git a/plugins/addon-notes/src/stories/notes.md b/plugins/addon-notes/src/stories/notes.md new file mode 100644 index 000000000..7161578d3 --- /dev/null +++ b/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 diff --git a/plugins/addon-notes/tests/__snapshots__/stories.test.js.snap b/plugins/addon-notes/tests/__snapshots__/stories.test.js.snap new file mode 100644 index 000000000..e0261627d --- /dev/null +++ b/plugins/addon-notes/tests/__snapshots__/stories.test.js.snap @@ -0,0 +1,512 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Plugins/NotesBlock Custom Config Props 1`] = ` + +
+
+
+ + + +

+
+ Custom title here + + + + + +
+

+
+
+
+
+
+
+
+ + + +

+ Component + + design notes + +

+
+
+
    +
  1. + Be user-friendly +
    2. +
  2. + Be a11y accessible +
    3. +
  3. + + Go to 1 + +
    4. +
+
+
+
+
+ +`; + +exports[`Plugins/NotesBlock Custom Items 1`] = ` + +
+
+
+

+

+
+
+
+
+
+
+ + + +

+ Introduction +

+
+
+

+ some + + markdown + +

+
+
+
+
+ +`; + +exports[`Plugins/NotesBlock Markdown File 1`] = ` + +
+
+
+

+

+
+
+
+
+
+
+ + + +

+ Button +

+
+
+
+
+ + + +

+ Guidelines +

+
+
+
    +
  • + The component + + should + + use color palette +
    • +
  • + The component will have 3 variants + +
      +
    1. + + primary + + +
        +
      • + for main, most important actions on secreen +
        • +
      +
      2. +
    2. + + secondary + + +
        +
      • + for less-significant actions +
        • +
      +
      3. +
    3. + + disabled + + +
        +
      • + can not be clicked, visually subdued +
        • +
      +
      4. +
    +
    • +
+
+
+ + + +

+ Styles +

+
+
+
    +
  • + primary color #d45a33f +
    • +
  • + disabled color color #3e3e3e +
    • +
+
+
+
+
+ +`; + +exports[`Plugins/NotesBlock Overview 1`] = ` + +
+
+
+

+

+
+
+
+
+
+
+ + + +

+ Component + + design notes + +

+
+
+
    +
  1. + Be user-friendly +
    2. +
  2. + Be a11y accessible +
    3. +
  3. + + Go to 1 + +
    4. +
+
+
+
+
+ +`; diff --git a/plugins/addon-notes/tsconfig.json b/plugins/addon-notes/tsconfig.json new file mode 100644 index 000000000..13309c708 --- /dev/null +++ b/plugins/addon-notes/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "module": "esnext", + "declaration": true, + "resolveJsonModule": true, + "sourceMap": false, + "outDir": "./dist", + "rootDir": "./src", + "baseUrl": "./", + "typeRoots": ["../../node_modules/@types", "node_modules/@types"] + }, + "include": ["src/**/*"], + "exclude": ["node_modules/**"] +} \ No newline at end of file