To help you get started, we've collected the most common ways that superdesk-ui-framework is being used within popular public projects.

superdesk / superdesk-planning / client / index.js View on Github

() => ({
            scope: {item: '=', hideAvatar: '<'},
            bindToController: true,
            controllerAs: 'vm',
            controller: ctrl.AssignmentPreviewController,
        })
    )
    .directive('sdLocationsManagement',
        () => ({
            scope: {},
            bindToController: true,
            controllerAs: 'vm',
            controller: ctrl.LocationsController,
        })
    )
    .component('sdPlanningDetailsWidget', reactToAngular1(PlanningDetailsWidget, ['item']))
    .service('sdPlanningStore', svc.PlanningStoreService)
    .service('assignments', svc.AssignmentsService)
    .config(['workspaceMenuProvider', (workspaceMenuProvider) => {
        workspaceMenuProvider.item({
            href: '/workspace/assignments',
            icon: 'tasks',
            label: gettext('Assignments'),
            shortcut: 'ctrl+alt+a',
            if: 'workspaceConfig.assignments',
            order: 300,
        });

        workspaceMenuProvider.item({
            href: '/planning',
            icon: 'calendar',
            label: gettext('Planning'),

View more ways to use superdesk-ui-framework

Superdesk UI Framework

Status

Documentation

Documentation page can be accessed via this link: https://ui-framework.superdesk.org/

Install and connect

To install the package via npm use

npm install --save superdesk-ui-framework

After installation, the ui-framework distributive files will be available as

import 'superdesk-ui-framework'

To use it in your angular-app you should add the module (modules)

angular.module('application', ['superdesk-ui'])

React modules

To import react modules in your application, just use

import {LineInput} from 'superdesk-ui-framework'

Contributing

1. Fork repo https://github.com/superdesk/superdesk-ui-framework
2. Clone git clone https://github.com/superdesk/superdesk-ui-framework
3. npm install to install dependencies
4. npm start to run server locally
5. Files are served on localhost:9100

Creating playgrounds

1. Create new your-playground.html file in examples/playgrounds
2. Define new settings for your playground in examples/index.js:

.when('/playground/your-playground', {
    title: 'My Playground',
    playground: 'main', // can be publisher or react also
    template: require('../examples/playgrounds/your-playground.html')
})

3. Open your playground in browser

Continuous Development

If you want to develop new components and see live changes on your project, you need to link superdesk-ui-framework with your project.

1. In superdesk-ui-framework project folder run npm link
2. In your project folder run npm link superdesk-ui-framework
3. Start superdesk-ui-framework with npm run server command.
4. All changes on superdesk-ui-framework project are now automatically updated in your project

Testing

Runing e2e&unit tests

npm run lint