Have ideas to improve npm?Join in the discussion! »

    @component-controls/addon-notes
    TypeScript icon, indicating that this package has built-in type declarations

    3.14.6 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    This addon contains a NotesBlock that you can integrate into any page, as well as a standalone NotesPage

    Getting Started

    Install

    yarn add@component-controls/addon-notes --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';
    import design_notes from './design-assets/design-notes.md';;
    
    
    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 a 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 } from '@component-controls/core';
    
    export default {
      title: 'MyStory',
    } as Document;
    
    export const story: Example = () => <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 default options of the NotesBlock component

    in .config/runtime.tsx

    import { RuntimeConfiguration } from "@component-controls/core";
    
    const config: RuntimeConfiguration = {
      ...
      components: {
        notes: {
          title: 'Design files'
        }
      },
    };
    
    export default config;
    

    API

    NotesBlock

    NotesBlock source code

    properties

    Name Type Description
    items (string | { [key: string]: any; text: 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

    Install

    npm i @component-controls/addon-notes

    DownloadsWeekly Downloads

    134

    Version

    3.14.6

    License

    MIT

    Unpacked Size

    226 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar