Git Product home page Git Product logo

cicero-ui's Introduction

Cicero UI Library

Build Status downloads npm version join slack

The Accord Project Cicero UI Library can be used for implementing React components in your contract editing studio.

Instructions

This is a short reference guide, for a more full context, please refer to our CONTRIBUTING guide and information for DEVELOPERS.

For using individual components in an app, refer to the individual component's README.

Implementation

Components ready for use:

Available Plugins:

  • ClausePlugin
  • VariableePlugin

Components still in development:

Development

  1. Fork project to your repository
  2. Clone to local machine with git clone
  3. cd into the directory
  4. Run npm install
  5. Ensure the IBM Plex Sans is imported with <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,500i,700" rel="stylesheet"> is in the *.html file of your main app
  6. Build a production state with npm run build
  7. Transpile code for build with npm run transpile
  8. Create a global link with npm link
  9. In your main app directory, run npm link @accordproject/cicero-ui

Available Scripts

In the project directory, you can run:

npm run start

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console. NOTE: These require templates to be passed down through props from an app in which these components should be rendered.

npm run test

Launches JEST over the repository. Current snapshot tests requires npm test -- -u in order to update when all changes are final.

npm run lint

Runs ESLint.

npm run build

Builds the app for production to the demo folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!


Structure of the Code Repository

Top level repository (cicero-ui), with sub packages. The entire package is published as an independent npm module:

  • ClauseEditor: Functional ReactJS component which displays text of Clause in @accordproject/markdown-editor and parses text using associated template.
  • ContractEditor: Functional ReactJS component for a rich text contract editor which wraps the @accordproject/markdown-editor editor and assigns the Clause plugin.
  • ErrorLogger: Functional ReactJS component for displaying model and logic errors associated with contracts and clauses with location information when applicable.
  • Navigation: Functional ReactJS component for displaying markdown headings and clause nodes associated with contracts.
  • ParseResult:
  • TemplateLibrary: Provides a ReactJS component to fetch and display a library of contract and clause templates in the Accord Project Cicero format.
  • TemplateLoadingClauseEditor:
  • ClausePlugin: A custom Slate plugin for embedding a clause node within a document
  • VariablePlugin: A custom Slate plugin for using editable, highlighted variables within a clause

Accord Project Logo

Accord Project is an open source, non-profit, initiative working to transform contract management and contract automation by digitizing contracts. Accord Project operates under the umbrella of the Linux Foundation. The technical charter for the Accord Project can be found here.

Learn More About Accord Project

Overview

Documentation

Ecosystem

Core libraries:

Projects Package name Version Description
Cicero cicero-core npm version Templates Core
cicero-cli npm version Cicero CLI
cicero-engine npm version Node.js VM based implementation of Accord Protcol Template Specification execution
cicero-server npm version Wraps the Cicero Engine and exposes it as a RESTful service
cicero-test npm version Testing support for Cicero based on cucumber
cicero-tools npm version Cicero Tools
generator-cicero-template npm version Code generator for a Cicero Template
Concerto concerto-core npm version Core Implementation for the Concerto Modeling Language
concerto-tools npm version Tools for the Concerto Modeling Language
concerto-cli npm version command-line interface for Concerto
Ergo ergo-cli npm version Ergo CLI
ergo-compiler npm version Ergo compiler
ergo-test npm version Ergo test
ergo-engine npm version Ergo engine
Markdown markdown-common npm version A framework for transforming markdown
markdown-slate npm version Transform markdown to/from CommonMark DOM
markdown-cli npm version CLI for markdown transformations.
markdown-cicero npm version CiceroDOM: Markdown extensions for contracts, clauses, variables etc.
markdown-html npm version Transform CiceroDOM to HTML

UI Components:

Projects Package name Version Description
Markdown Editor markdown-editor npm version WYSIWYG rich text web editor that persists text as markdown. Based on Slate.js
Cicero UI cicero-ui npm version WYSIWYG contract editor, template libary browser, error panel component
Concerto UI concerto-ui npm version Dynamic web forms generated from Concerto models

Template Editors:

Projects Cicero ver. Description
Template Studio v1 0.13.4 Web UI for creating, editing and testing Accord Project templates
Template Studio v2 0.13.4 Web UI for creating, editing and testing Accord Project templates
VSCode Extension 0.13.4 VS Code extension for editing Cicero templates and Ergo logic

Public templates and models:

Projects Description
Models Accord Project Model Library
Template Library Accord Project Template Library

Documentation:

Project Repo
Documentation techdocs

Contributing

The Accord Project technology is being developed as open source. All the software packages are being actively maintained on GitHub and we encourage organizations and individuals to contribute requirements, documentation, issues, new templates, and code.

Find out what’s coming on our blog.

Join the Accord Project Technology Working Group Slack channel to get involved!

For code contributions, read our CONTRIBUTING guide and information for DEVELOPERS.

License

Accord Project source code files are made available under the Apache License, Version 2.0. Accord Project documentation files are made available under the Creative Commons Attribution 4.0 International License (CC-BY-4.0).

Copyright 2018-2019 Clause, Inc. All trademarks are the property of their respective owners. See LF Projects Trademark Policy.

cicero-ui's People

Contributors

irmerk avatar dianalease avatar jeromesimeon avatar dselman avatar innovator007 avatar daniloff200 avatar flagoon avatar mttrbrts avatar dependabot[bot] avatar abnazhor avatar monika avatar johnnyqbui avatar florenciasilva avatar sumitkharche avatar steffinstanly avatar sidhyatikku avatar shahsank3t avatar peterhunn avatar michael-grover avatar michizhou avatar arshadkazmi42 avatar akshitsarin avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.