https://github.com/accordproject/web-components
React Components for Accord Project
https://github.com/accordproject/web-components
accord-project cicero concerto ergo hacktoberfest legal legaltech react smart-contracts
Last synced: 5 months ago
JSON representation
React Components for Accord Project
- Host: GitHub
- URL: https://github.com/accordproject/web-components
- Owner: accordproject
- License: apache-2.0
- Created: 2020-04-29T11:35:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-12T10:01:44.000Z (12 months ago)
- Last Synced: 2024-10-30T04:29:56.637Z (11 months ago)
- Topics: accord-project, cicero, concerto, ergo, hacktoberfest, legal, legaltech, react, smart-contracts
- Language: JavaScript
- Homepage:
- Size: 20.3 MB
- Stars: 119
- Watchers: 14
- Forks: 99
- Open Issues: 97
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Accord Project Web Components
[](https://github.com/accordproject/web-components/actions/workflows/build.yml)
[](https://discord.gg/Zm99SKhhtA/)
This repository contains a library of user interface components that can be used to create web-applications based on Accord Project technology. The components use the [React](https://reactjs.org) ( JavaScript library )
## Repository Structure
This repository is a monorepo, built using [lerna](https://lerna.js.org). Each package is published as an independent npm module.
- [Markdown Editor](packages/ui-markdown-editor): A WYSIWYG editor based on [Slate](https://www.slatejs.org) for markdown that conforms to the [CommonMark](https://spec.commonmark.org) specification.
- [Contract Editor](packages/ui-contract-editor): An editor based on our [Markdown Editor](packages/ui-markdown-editor) for handling smart legal contracts.
- [Concerto UI](packages/ui-concerto): React components for models written in the [Concerto Modeling Language](https://github.com/accordproject/concerto).
- [Web Components](packages/ui-components): Tools for implementing React components in your contract editing studio.
- [Storybook](packages/storybook): A [React Storybook](https://storybook.js.org), and contains all the stories for all the sub-packages.
Netlify is used to automatically publish the static site generated by Storybook.
Use the interactive [Storybook][storybook] to discover the components and their properties.
## View the [Live Storybook Demo][storybook] or Run Locally
### Sample Project
To use these components refer to: https://github.com/accordproject/web-components-starter
If you are not already using semantic-ui-react in your project, be sure to include `import 'semantic-ui-css/semantic.min.css'` in the entry point of your react app.
### Run Locally
```sh
npm install -g lerna
lerna clean && lerna bootstrap && lerna run build
cd packages/storybook
npm i
npm run storybook
```
### User Interaction Testing (e2e tests)
Install cypress app on your local system:
https://download.cypress.io/desktop
Check if the system requirements are matched:
https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements
Start the storybook
```sh
cd packages/storybook
npm run storybook
```
Execute the following script to start e2e tesing
```sh
cd packages/storybook
npm run test:e2e
```
If you are writing the tests and want to see the tests in a browser, then do the following
```sh
cd packages/storybook
npx cypress open
```
---
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][linuxfound]. The technical charter for the Accord Project can be found [here][charter].
## Learn More About Accord Project
### [Overview][apmain]
### [Documentation][apdoc]
## 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][apblog].
Join the Accord Project Technology Working Group [Discord channel][apdisc] to get involved!
For code contributions, read our [CONTRIBUTING guide][contributing] and information for [DEVELOPERS][developers].
### README Badge
Using Accord Project? Add a README badge to let everyone know: [](https://www.accordproject.org/)
```
[](https://www.accordproject.org/)
```
Accord Project source code files are made available under the [Apache License, Version 2.0][apache].
Accord Project documentation files are made available under the [Creative Commons Attribution 4.0 International License][creativecommons] (CC-BY-4.0).
Copyright 2018-2019 Clause, Inc. All trademarks are the property of their respective owners. See [LF Projects Trademark Policy](https://lfprojects.org/policies/trademark-policy/).
[linuxfound]: https://www.linuxfoundation.org
[charter]: https://github.com/accordproject/governance/blob/master/accord-project-technical-charter.md
[apmain]: https://accordproject.org/
[apblog]: https://medium.com/@accordhq
[apdoc]: https://docs.accordproject.org/
[apslack]: https://accord-project-slack-signup.herokuapp.com
[apdisc]: https://discord.gg/Zm99SKhhtA
[storybook]: https://ap-web-components.netlify.app/
[contributing]: https://github.com/accordproject/web-components/blob/master/CONTRIBUTING.md
[developers]: https://github.com/accordproject/web-components/blob/master/DEVELOPERS.md
[apache]: https://github.com/accordproject/web-components/blob/master/LICENSE
[creativecommons]: http://creativecommons.org/licenses/by/4.0/