Skip to content
This repository has been archived by the owner on May 19, 2020. It is now read-only.

feat(Storybook): extend storybook for developer focused demo - #315 #382

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(storybook): Add ContractEditor story - i315
Signed-off-by: lenvi <lenvin@oykuapp.com>
  • Loading branch information
98lenvi committed Apr 14, 2020
commit 6e13998426f79d27669ada6ac15364b3512c98eb
91 changes: 83 additions & 8 deletions src/stories/ContractEditor/ContractEditor.stories.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,96 @@
import React from "react";
import { Button } from "@storybook/react/demo";
import React, { useCallback, useState, useRef } from "react";
import { SlateTransformer } from "@accordproject/markdown-slate";
import "semantic-ui-css/semantic.min.css";
import ContractEditor from "../../ContractEditor";
import docs from "./docs.md";
import { withA11y } from "@storybook/addon-a11y";
import { withKnobs } from "@storybook/addon-knobs";

import Demo from '../../../demo/src';
const slateTransformer = new SlateTransformer();

const templateUri =
"https://templates.accordproject.org/archives/latedeliveryandpenalty@0.15.0.cta";
const clauseText = `Late Delivery and Penalty.
----

In case of delayed delivery<if id="forceMajeure" value="%20except%20for%20Force%20Majeure%20cases%2C" whenTrue="%20except%20for%20Force%20Majeure%20cases%2C" whenFalse=""/>
<variable id="seller" value="%22Dan%22"/> (the Seller) shall pay to <variable id="buyer" value="%22Steve%22"/> (the Buyer) for every <variable id="penaltyDuration" value="2%20days"/>
of delay penalty amounting to <variable id="penaltyPercentage" value="10.5"/>% of the total value of the Equipment
whose delivery has been delayed. Any fractional part of a <variable id="fractionalPart" value="days"/> is to be
considered a full <variable id="fractionalPart" value="days"/>. The total amount of penalty shall not however,
exceed <variable id="capPercentage" value="55.0"/>% of the total value of the Equipment involved in late delivery.
If the delay is more than <variable id="termination" value="15%20days"/>, the Buyer is entitled to terminate this Contract.`;

const getContractSlateVal = () => {
const Clause = `\`\`\` <clause src="${templateUri}" clauseid="123">
${clauseText}
\`\`\`
`;

const defaultContractMarkdown = `# Heading One
This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`.
${Clause}
`;

return slateTransformer.fromMarkdown(defaultContractMarkdown);
};

export default { title: "'Components/Contract Editor" };

export const contractEditor = () => <Demo/>; // Please add contractEditor Component definition here
export const contractEditor = () => {
const refUse = useRef(null);
const [templateObj, setTemplateObj] = useState({});
const [lockText, setLockText] = useState(true);
const [readOnly, setReadOnly] = useState(false);
const [slateValue, setSlateValue] = useState(() => {
const slate = getContractSlateVal();
return slate.document.children;
});

/** Using exisiting Demo file for testing if webpack config is workig fine*/
const onContractChange = useCallback(value => {
setSlateValue(value);
}, []);

const parseClauseFunction = () => console.log("parseClauseFunction");
const loadTemplateObjectFunction = () =>
console.log("loadTemplateObjectFunction");
const pasteToContractFunction = () => console.log("pasteToContractFunction");

const clausePropsObject = {
CLAUSE_DELETE_FUNCTION: () => console.log("CLAUSE_DELETE_FUNCTION"),
CLAUSE_EDIT_FUNCTION: () => console.log("CLAUSE_EDIT_FUNCTION"),
CLAUSE_TEST_FUNCTION: () => console.log("CLAUSE_TEST_FUNCTION")
};

return (
<div
style={{
borderRadius: "3px",
border: "1px solid gray",
margin: "50px",
padding: "20px",
width: "min-content"
}}
>
<ContractEditor
value={slateValue}
onChange={onContractChange}
lockText={lockText}
readOnly={readOnly}
ref={refUse}
clauseProps={clausePropsObject}
loadTemplateObject={loadTemplateObjectFunction}
pasteToContract={pasteToContractFunction}
onClauseUpdated={parseClauseFunction}
/>
</div>
);
};

contractEditor.story = {
component: contractEditor,
decorators: [withA11y],

decorators: [withA11y, withKnobs],
parameters: {
notes: docs
}
};
};
92 changes: 84 additions & 8 deletions src/stories/ContractEditor/docs.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,89 @@
# Contract Editor
## Cicero-UI - ContractEditor

#### Notes for Contract Editor
### Usage

---
```shell
npm install @accordproject/cicero-ui
```

Supports code snippets too:
```js
import { render } from 'react-dom';
import React, { useCallback, useState } from 'react';
import { ContractEditor } from '@accordproject/cicero-ui';
import { SlateTransformer } from '@accordproject/markdown-slate';

```jsx
<div>
Foo
</div>
const slateTransformer = new SlateTransformer();
const getContractSlateVal = () => {
const defaultContractMarkdown = `# Heading One
This is text. This is *italic* text. This is **bold** text. This is \`inline code\`. Fin.`;
return slateTransformer.fromMarkdown(defaultContractMarkdown);
};

const clausePropsObject = {
CLAUSE_DELETE_FUNCTION (function),
CLAUSE_EDIT_FUNCTION (function),
CLAUSE_TEST_FUNCTION (function),
}

const parseClauseFunction = () => { /* ... */ }
const loadTemplateObjectFunction = () => { /* ... */ }
const pasteToContractFunction = () => { /* ... */ }

const ContractEditorRenderer = () => {
const [slateValue, setSlateValue] = useState(() => {
const slate = getContractSlateVal();
return slate.document.children;
});

const onContractChange = useCallback((value) => { setSlateValue(value); }, []);

return (
<ContractEditor
value={slateValue}
lockText={false}
readOnly={false}
onChange={onContractChange}
clauseProps={clausePropsObject}
loadTemplateObject={loadTemplateObjectFunction}
pasteToContract={pasteToContractFunction}
onClauseUpdated={parseClauseFunction}
/>
);
}

render(<ContractEditorRenderer />, document.getElementById('root'));
```


## Props

### Expected Properties

#### Values

- `value`: An `object` which is the initial contents of the editor.
- `lockText`: A `boolean` to lock all non variable text.
- `readOnly`: A `boolean` to lock all text and remove the formatting toolbar.

#### Functionality

- `onChange`: A callback `function` called when the contents of the editor change.
- `loadTemplateObject`: A callback `function` to load a template.
- `onClauseUpdated`: A callback `function` called when text inside of a clause is changed.
- `pasteToContract`: A callback `function` to load a clause template via copy/paste.

### Available Functionality

- `clauseProps`: An `object` for the clauses in the editor which contains a deletion, edit, and test function, see below.

#### Specifications

`clauseProps`:
You can support deletion, editing, and testing of the Clause Components within the `ContractEditor`. An object may be passed down this component with the following possible functions:
```js
clauseProps = {
CLAUSE_DELETE_FUNCTION, // (Function)
CLAUSE_EDIT_FUNCTION, // (Function)
CLAUSE_TEST_FUNCTION, // (Function)
}
```