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

    @repositive/ui-library

    0.1.0 • Public • Published

    Repositive UI Library

    A set of ember components to allow frontend applications to be composed quickly and consistently. Developed by Repositive.io.

    Publishing a new version

    • Make your changes and commit them
    • Run npm version <new versino> to bump the version number in package.json and create a new Git tag. This will be published automatically by CI.

    Prerequisites

    This library requires the Repositive CSS library, Liz-Skin. Please ensure you have this setup before continuing.

    Getting started

    Install addon

    $ ember install @repositive/ui-library
    

    This will put the latest version of the library into your project's package.json.

    Import SCSS

    Add the line @import 'ui-library'; to the end of your app.scss file. This SCSS extends the Liz-Skin CSS library with custom component styles.

    Usage

    Buttons

    There are several button components:

    • Regular button for synchronous actions: r-button.

    • Button for asynchronous actions: r-async-button.

    • Link button for linking to external resources: r-link-button.

    All buttons are extended with the r-button-mixin and therefore share a base set of properties.

    Base properties of each button component:

    • variant - Specifies the style of the button. Options include:

      • primary
      • secondary
      • cancel

      E.g.

      {{r-button variant='primary'}}
      
    • size - Specifies the size of the button. Options include:

      • big
      • small

      E.g.

      {{r-button size='big'}}
      

    By default a button has:

    • Size: small
    • Variant: secondary

    r-button

    As well as the variant and size options detailed above, the r-button can also take the following options:

    • label - The button text. E.g.
    label = "Cancel"
    
    • clickHandler - The name of the action the button will call on click. E.g.
    clickHandler = (action 'cancel')
    
    • disabled - Boolean value to specify whether the button is disabled. E.g.
    disabled = (not validations.valid)
    

    Typical usage of r-button may look like:

    {{r-button
        clickHandler=(action "reset")
        variant="secondary"
        size="big"
        disabled=isFormUnchanged
        label="Reset"
    }}
    
    

    r-async-button

    Build on Dockyards async-buttons. Async-buttons are similar to regular r-buttons but can take a few extra options:

    • action - The name of the action which will be called on click. E.g.
    action = (action 'signup')
    
    • default - Default text of the button. E.g.
    default = "Signup"
    
    • pending - Text displayed when the promise is running i.e. not yet fulfilled or rejected. E.g.
    pending = "Signing up..."
    
    • disableWhen - Boolean value which allows for the button be be disabled when in a state other than pending.
    disableWhen = isInvalid
    
    • reset - Boolean value which tells the button whether or not to reset to default state once the promise has been fulfilled or rejected. E.g.
    reset = true
    

    Typical usage of r-async-button may look like:

    {{r-async-button
        action=(action 'save')
        default="Save Changes"
        disableWhen=(not validations.isValid)
        pending="Saving..."
        reset=true
        size="big"
        variant="primary"
    }}
    

    r-link-button

    r-link-buttons are extended from r-button and have 2 extra arguments:

    • href - The link to open. E.g.
    href= "https://blog.repositive.io"
    
    • target - Where the linked document will open. E.g.
    target='_blank'
    

    Typical usage of r-link-button may look like:

    {{r-link-button
        clickHandler=(action "trackExit")
        href= model.url
        label= "Access Data"
        variant="primary"
        size="big"
        target="_blank"
    }}
    

    Pagination

    r-pagination takes the following parameters:

    • totalPages - The total number of response results / resultsPerPage. E.g.
    totalPages=totalPages
    
    • currentPageNumber - Number signifying which page the user is on. E.g.
    currentPageNumber=currentPage
    
    • nextPage - Action to be called when the 'Next' button is pressed. E.g.
    nextPage=(action 'nextPage')
    
    • previousPage - Action to be called when the 'Previous' button is pressed. E.g.
    previousPage=(action 'previousPage')
    
    • goToPage - Action to be called when a page number is pressed. E.g.
    goToPage=(action 'goToPage')
    

    Typical usage of r-pagination may look like:

    {{r-pagination
        totalPages=totalPages
        currentPageNumber=page
        nextPage=(action 'nextPage')
        previousPage=(action 'previousPage')
        goToPage=(action 'goToPage')
    }}
    

    Avatar

    r-avatar takes the following parameters:

    • size - Specifies the size of the avatar. Options include:

      • small
      • medium (default)
      • large
      • x-large

      E.g.

      {{r-avatar size='large'}}
      
    • src - Specifies the url of the avatar image.

      {{r-avatar src='https://cdn.catimages.com/massive-cat.jpg'}}
      
    • fallbackSrc - Specifies an alternate URL to use if src fails (e.g. returns 404).

      {{r-avatar src="https://example.com/404" fallbackSrc='https://cdn.catimages.com/massive-cat.jpg'}}
      

    Typical usage of the r-avatar may look like:

    {{r-avatar
        src=user.profile.avatar
        size="large"
    }}
    

    Tabs

    Tabs consist of two sub-components:

    • r-tab-list - A block component in which you nest any number of r-tab-list-items. This does not take any parameters.
    • r-tab-list-item - An individual tab component

    r-tab-list-item takes the following parameters:

    • tabName - Tab text or label to be displayed E.g.
      {{r-tab-item tabName="Settings"}}
      
    • target - The target route of the tab E.g.
      {{r-tab-item target="settings"}}
      
    • query - Query param of the target route E.g.
      {{r-tab-item query="user"}}
      
    • icon - The font-awesome icon to be displayed on the tab E.g.
      {{r-tab-item icon="user"}}
      
    • iconPosition - Whether to display the icon left of the tabName or right E.g.
      {{r-tab-item iconPosition="left"}}
      
    • stats - A number to be displayed on the tab e.g. Followers (381) E.g.
      {{r-tab-item stats=user.followers.length}}
      

    Typical usage of the tab component:

    {{#r-tab-list}}
      {{r-tab-list-item
          tabName="Profile"
          target="users.profile"
      }}
      {{r-tab-list-item
          tabName="Account Settings"
          target="users.settings"
      }}
    {{/r-tab-list}}
    

    Contributing

    See contributing

    Keywords

    Install

    npm i @repositive/ui-library

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    258 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar