accordproject / cicero-ui Goto Github PK
View Code? Open in Web Editor NEWA library of React components for Accord Project templates
License: Apache License 2.0
A library of React components for Accord Project templates
License: Apache License 2.0
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
For consistency, the TemplateLibrary
component should be migrated to using React Hooks.
Describe the solution you'd like
Swap from using a PureComponent
to utilize React Hooks, using other components in this repository as a guide.
Describe alternatives you've considered
N/A
Additional context
N/A
Is your feature request related to a problem? Please describe.
Variables should have customizable background colors, as well as only having colors in lockText
mode.
Describe the solution you'd like
Allow for props to dictate the color of the variables, and only display this when lockText
is true.
Describe alternatives you've considered
Open to input.
Additional context
Referenced in accordproject/markdown-editor#124
Is your feature request related to a problem? Please describe.
Currently a newly pasted clause template from a copied clause template which has parse errors will not be parsed until further editing occurs
Describe the solution you'd like
During the new onPaste
method in ClausePlugin
, we should be parsing a clause after calling the customPasteClause
function
Describe alternatives you've considered
N/A
Additional context
N/A
As described in the styled-components
official FAQ, we should remove this package from our bundle.
Change the search bar styling to match this mockup. Click "inspect" in the lower right corner to view the CSS. You may need to request access. You can ignore everything about the mockup except the search bar.
Additionally, if you zoom in on the search bar as it currently stands, there appears to be an extra border around it. Remove this extra border.
Is your feature request related to a problem? Please describe.
Incorporate any clause
specific logic here from markdown-editor
Issue 88
Currently, a uuidv4
is assigned to each clause template added into the markdown of the contract. Copying and pasting should recognize that as already existing and create a new uuidv4
Describe the solution you'd like
Possibly register multiple onPaste
handlers on the underlying Slate editor. These are likely chained by the call to next()
. Test what happens on paste of HTML
which contains an existing clause
<div>
.
When a clause template is pasted, TSv2 should check to see if a clause template exists in the pasted text. If so, check if that clause template is already in the contract. If so, assign a new uuidv4
to this clause template.
Describe alternatives you've considered
A good starting point should be SlateJS
's onPaste
plugin
Already in the code here
Additional context
N/A
Is your feature request related to a problem? Please describe.
Current clauses within the contract render as style-less blocks.
Describe the solution you'd like
Contract Editor clauses need clause styling along with optional props for styling to users' specs
Describe alternatives you've considered
N/A
Additional context
Invision Design from @Michael-Grover
Use the Template Library as a guide
Related Issues:
We need to support a variable serialisation that allows us to lock the documents against edits, except for variable sections.
When a variable is being edited we need to be able to relate the Slate block to the contract model property, so we know the type and how the contract instance (JSON) should be updated.
I think variables in Slate should be represented as "marks" because they apply to a range of the document and must have their positions updated as the document is edited.
Proposal below.
====
## Testing
You can declare a variable in a template using [{name}].
Or we could use <variable id="name"/> to declare a variable,
which is more common mark parser friendly.
This is an inline variable
<variable id="name" value="with a value"/> too.
This is a variable with complex content.
``` <variable id="name">
this is a
multi-line value.
</variable>
The variable
tag will be handled by a Variable
plugin into the markdown editor. The plugin will create text blocks with the variable mark set and metadata on the mark that indicates the FQN of the model element for the variable.
Clicking on a variable should open a type-specific editor (such as a calendar editor for a DataTime variable).
This is to track the discussion on the possibility of making cicero
into a peerDepencency
.
Conversation points so far from @mttrbrts, @DianaLease, and @jeromesimeon:
peerDependency
may allow for better tracking dependency versions for synchronizationpeerDependency
is that cicero
is used both as a direct dependency in services and an indirect dependency in the same services as well as cicero-ui
peerDependency
in cicero-ui
only? It will affect third parties importing cicero-ui
cicero
versions, so this will make a differencemarkdown-editor
table
elements are accessible through proper usage of:
<thead>
and <tbody>
for better navigation through a table<th>
elements need a scope attribute
<th scope="col">
and <th scope="row">
)<caption>
(for the title) to help describe the table
table
element with a caption element inside the table
<caption>
details
and import
functionality.Details
button serving up template information (through Redux)Import
button handles functionality passed to it properly when connected to ReduxAdd to contract
button interacts successfully with ContractEditor
View advanced templates
check boxAdd new clause
conditionalIs your feature request related to a problem? Please describe.
Once alpha1
is out for Cicero, update the UI to use the markdown transform stack
Describe the solution you'd like
N/A
Additional context
Is your feature request related to a problem? Please describe.
IFF the header is truncated, hovering over the text should pop up a tooltip with the full header
Describe the solution you'd like
Expound on the hover effect and create a tooltip which will display the full header.
Describe alternatives you've considered
Semantic UI React may not be the best route, we may want to create our own component.
Additional context
Popup
is used from Semantic UI React in the Markdown EditorCurrently clause template text is narrower than contract text. They should be the same width so that all text is flush on the left and right sides. It will be more noticeable on the left side since all of the text is left aligned.
Example of proper alignment:
https://projects.invisionapp.com/d/main#/console/16741009/380387451/preview
Remove the shadow of a scrollbar when the component is short enough to not need scrolling.
Change the button styling to match this mockup. Click "inspect" in the lower right corner to view the CSS. You may need to request access. You can ignore everything about the mockup except the button styling
On hover, the button background color should turn white. The text should remain the same color.
Is your feature request related to a problem? Please describe.
The UI is ready to be linked together with a common theme for cohesiveness, based on props
Describe the solution you'd like
All components should accept AP theme props for the correct color scheme.
Describe alternatives you've considered
N/A
Additional context
Additional work will be done in Template Studio v2
and Markdown-Editor
Related
Issue #63
Describe the bug
A user can edit locked text around a variable by removing the last character of the variable and continuing to type. If a user clicks somewhere else, they can no longer edit the new text added to the locked text and the clause will be broken with no way to fix it.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A user should not be able to add text to the locked text area of a clause. If the user removes the last character of a variable and continues to type, they should still be inside of the variable.
Describe the bug
In DEVELOPERS.md (here), URL of the main repository to be added as upstream has a typo in it. acccordproject
should be accordproject
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Instead of acccordproject
, it should be accordproject
Expand button default and hover
https://projects.invisionapp.com/d/main#/console/16741009/370418065/preview
Cursor hovered on pane revealing a subtle border and the collapse button, which is otherwise not visible.
https://projects.invisionapp.com/d/main#/console/16741009/380412036/preview
Cursor hovered over collapse button
https://projects.invisionapp.com/d/main#/console/16741009/380412037/preview
Is your feature request related to a problem? Please describe.
There are no existing tests for ErrorLogger
, and there is a recent change to make it accept an object rather than array
Describe the solution you'd like
Implement unit tests
Describe alternatives you've considered
N/A
Additional context
Related Issues:
Brought up by @flagoon
Describe the bug
The ErrorLogger
is displaying "Errors" when only one error exists.
To Reproduce
Steps to reproduce the behavior:
+ Add to contract
for Copyright License
Expected behavior
If only one error exists, display "1 Error", if more than one exists, display "# Errors"
Desktop (please complete the following information):
Additional context
N/A
When the user hovers on a Clause Template, the template name and buttons appear. When the user hovers over a button, it changes color.
https://projects.invisionapp.com/d/main#/console/16741009/380387451/preview
Filtering of templates in the template library component introduces spaces between each card used for the templates.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Templates are filtered and laid out correctly.
Desktop (please complete the following information):
Describe the bug
When navigating with a keyboard through the ContractEditor
, the cursor disappears and cannot be gained back without alt-tabbing or using the mouse
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Navigating through the top of a clause template should not cause the cursor to disappear
Screenshots
A Loom recording of the bug is here.
Desktop (please complete the following information):
Additional context
This may have something to do with how we implement the clause template header (the one that appears when you hover over the clause template with a mouse)
This should have developer documentation associated with it to showcase how it can be used and its purpose.
ClausePlugin: A custom Slate plugin for embedding a clause node within a document
Navigation Menu for scrolling to headings and smart clauses with in a contract
alt="..."
tags in images. Ensure all images used for decoration only contain an empty string for alt
. Describe purpose or meaning of image, and include any text which exists in the image.Is your feature request related to a problem? Please describe.
Revisit ErrorLogger
logic. Right now, it expects an array of errors every time a clause is parsed. This means if multiple changes cause a clause to be parsed multiple times, the same error will be added to the array multiple times and we end up with multiple of the same error.
Describe the solution you'd like
It makes more sense to use an object instead of an array, where the clauseId
are keys and we update the error by clauseId
, so we only ever have one error per clause.
Describe alternatives you've considered
Any alternatives are welcome.
Additional context
Related issue in TSv2
This should have developer documentation associated with it to showcase how it can be used and its purpose.
VariablePlugin: A custom Slate plugin for using editable, highlighted variables within a clause
Code of Conduct URL is broken in CONTRIBUTING.md
It is redirecting to https://github.com/accordproject/docs/blob/master/Accord%20Project%20Code%20of%20Conduct.pdf
I am sending a PR with this URL https://lfprojects.org/policies/code-of-conduct/
Loading text with whitespace does not always round-trip in the Clause Editor. For instance the bit of sample text from the volume discount:
a) Settlement Amount. Our agent will pay you according to your payment plan, as described below, in US dollars for the face amount of Charges submitted from your Establishments less all applicable deductions, rejections, and withholdings, which include:
(i) the Discount,
(ii) any amounts you owe us or our Affiliates,
(iii) any amounts for which we have Chargebacks, and (iv) any Credits you submit. Our agent will subtract the full amount of all applicable deductions, rejections, and withholdings, from this payment to you (or debit your Bank Account), but if it cannot, then you must pay it promptly upon demand.
Becomes the following in the markdown window:
a) Settlement Amount. Our agent will pay you according to your payment plan, as described below, in US dollars for the face amount of Charges submitted from your Establishments less all applicable deductions, rejections, and withholdings, which include:
(i) the Discount,
(ii) any amounts you owe us or our Affiliates,
(iii) any amounts for which we have Chargebacks, and (iv) any Credits you submit. Our agent will subtract the full amount of all applicable deductions, rejections, and withholdings, from this payment to you (or debit your Bank Account), but if it cannot, then you must pay it promptly upon demand.
Which leads to parsing issues.
The linear gradient color behind a ClauseComponent
header needs to be based off of clauseProps.CLAUSE_BACKGROUND
See the declaration of the color here.
Describe the bug
toMarkdown.recursive()
not working when node contains child node of type variable
To Reproduce
Steps to reproduce the behavior:
const clausePlugin = ClausePlugin(null, null);
const pluginManager = new PluginManager([List(), clausePlugin, VariablePlugin()]);
const toMarkdown = new ToMarkdown(pluginManager);
toMarkdown.recursive
on a clause node that contains child nodes of type variable
{
"object":"block",
"type":"clause",
"data":{
"tag":"clause",
"attributes":{
"src":"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085",
"clauseid":"d3cdb02e-6982-47a1-9ba3-350d46212b63"
},
"attributeString":"src = \"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085\"clauseid = \"d3cdb02e-6982-47a1-9ba3-350d46212b63\"",
"content":"",
"closed":false
},
"nodes":[
{
"object":"block",
"type":"paragraph",
"data":{
},
"nodes":[
{
"object":"block",
"type":"paragraph",
"data":{
},
"nodes":[
{
"object":"text",
"text":"Acceptance of Delivery. ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"shipper",
"value":"%22Party%20A%22"
},
"attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party A\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" will be deemed to have completed its delivery obligations if in ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"receiver",
"value":"%22Party%20B%22"
},
"attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party B\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":"'s opinion, the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"deliverable",
"value":"%22Widgets%22"
},
"attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Widgets\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" satisfies the Acceptance Criteria, and ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"receiver",
"value":"%22Party%20B%22"
},
"attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party B\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" notifies ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"shipper",
"value":"%22Party%20A%22"
},
"attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party A\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" in writing that it is accepting the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"deliverable",
"value":"%22Widgets%22"
},
"attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Widgets\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":".",
"marks":[
]
}
]
},
{
"object":"block",
"type":"paragraph",
"data":{
},
"nodes":[
{
"object":"text",
"text":"Inspection and Notice. ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"receiver",
"value":"%22Party%20B%22"
},
"attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party B\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" will have ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"businessDays",
"value":"10"
},
"attributeString":"id = \"businessDays\"value = \"10\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"10",
"marks":[
]
}
]
},
{
"object":"text",
"text":" Business Days' to inspect and evaluate the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"deliverable",
"value":"%22Widgets%22"
},
"attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Widgets\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" on the delivery date before notifying ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"shipper",
"value":"%22Party%20A%22"
},
"attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party A\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" that it is either accepting or rejecting the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"deliverable",
"value":"%22Widgets%22"
},
"attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Widgets\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":".",
"marks":[
]
}
]
},
{
"object":"block",
"type":"paragraph",
"data":{
},
"nodes":[
{
"object":"text",
"text":"Acceptance Criteria. The \"Acceptance Criteria\" are the specifications the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"deliverable",
"value":"%22Widgets%22"
},
"attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Widgets\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" must meet for the ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"shipper",
"value":"%22Party%20A%22"
},
"attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Party A\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":" to comply with its requirements and obligations under this agreement, detailed in ",
"marks":[
]
},
{
"object":"inline",
"type":"variable",
"data":{
"tag":"variable",
"attributes":{
"id":"attachment",
"value":"%22Attachment%20X%22"
},
"attributeString":"id = \"attachment\"value = \"%22Attachment%20X%22\"",
"content":"",
"closed":true
},
"nodes":[
{
"object":"text",
"text":"\"Attachment X\"",
"marks":[
]
}
]
},
{
"object":"text",
"text":", attached to this agreement.",
"marks":[
]
}
]
}
]
}
]
}
Acceptance of Delivery. will be deemed to have completed its delivery obligations if in 's opinion, the satisfies the Acceptance Criteria, and notifies in writing that it is accepting the .
Inspection and Notice. will have Business Days' to inspect and evaluate the on the delivery date before notifying that it is either accepting or rejecting the .
Acceptance Criteria. The "Acceptance Criteria" are the specifications the must meet for the to comply with its requirements and obligations under this agreement, detailed in , attached to this agreement.
Expected behavior
Expect the output to contain the variables.
For example...
Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.
Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.
Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.
historian.ts:245 clause text Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.
Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.
Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.
Most components require testing for their functionality - typically found in the actions.js
folders.
A lot of features have been added lately and the tests need to be keeping up.
Refer to #122 for a starting point.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.