2018-10-03 12:04:08 -07:00
|
|
|
import * as React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import { Provider } from 'react-redux';
|
|
|
|
|
|
|
|
import { configureStore } from 'store/configure';
|
|
|
|
import { combineInitialState } from 'store/reducers';
|
|
|
|
import Milestones from 'components/Proposal/Milestones';
|
2018-10-04 21:27:02 -07:00
|
|
|
import { MILESTONE_STATE } from 'types';
|
2018-10-03 12:04:08 -07:00
|
|
|
const { WAITING, ACTIVE, PAID, REJECTED } = MILESTONE_STATE;
|
|
|
|
|
|
|
|
import 'styles/style.less';
|
|
|
|
import 'components/Proposal/style.less';
|
|
|
|
import 'components/Proposal/Governance/style.less';
|
|
|
|
import { getProposalWithCrowdFund } from './props';
|
|
|
|
|
|
|
|
const msWaiting = { state: WAITING, isPaid: false };
|
|
|
|
const msPaid = { state: PAID, isPaid: true };
|
|
|
|
const msActive = { state: ACTIVE, isPaid: false };
|
|
|
|
const msRejected = { state: REJECTED, isPaid: false };
|
|
|
|
|
2018-12-21 10:27:39 -08:00
|
|
|
const trustee = 'z123';
|
|
|
|
const contributor = 'z456';
|
2018-10-03 12:04:08 -07:00
|
|
|
|
|
|
|
const geometryCases = [...Array(10).keys()].map(i =>
|
|
|
|
getProposalWithCrowdFund({ milestoneCount: i + 1 }),
|
|
|
|
);
|
|
|
|
|
|
|
|
const cases: { [index: string]: any } = {
|
|
|
|
// trustee - first
|
|
|
|
['not funded']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 0,
|
|
|
|
}),
|
|
|
|
['first - waiting']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
}),
|
|
|
|
['first - not paid']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [
|
|
|
|
{ state: PAID, isPaid: false, payoutRequestVoteDeadline: Date.now() },
|
|
|
|
msWaiting,
|
|
|
|
msWaiting,
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
|
|
|
|
// trustee - second
|
|
|
|
['second - waiting']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msWaiting, msWaiting],
|
|
|
|
}),
|
|
|
|
['second - active']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msActive, msWaiting],
|
|
|
|
}),
|
|
|
|
['second - not paid']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [
|
|
|
|
msPaid,
|
|
|
|
{ state: PAID, isPaid: false, payoutRequestVoteDeadline: Date.now() },
|
|
|
|
msWaiting,
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
['second - no vote']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [
|
|
|
|
msPaid,
|
|
|
|
{ state: ACTIVE, isPaid: false, percentAgainstPayout: 33 },
|
|
|
|
msWaiting,
|
|
|
|
],
|
|
|
|
contributorOverrides: [{ milestoneNoVotes: [false, true, false] }],
|
|
|
|
}),
|
|
|
|
['second - rejected']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msRejected, msWaiting],
|
|
|
|
}),
|
|
|
|
|
|
|
|
// trustee - third
|
|
|
|
['final - waiting']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msPaid, msWaiting],
|
|
|
|
}),
|
|
|
|
['final - active']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msPaid, msActive],
|
|
|
|
}),
|
|
|
|
['final - not paid']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [
|
|
|
|
msPaid,
|
|
|
|
msPaid,
|
|
|
|
{ state: PAID, isPaid: false, payoutRequestVoteDeadline: Date.now() },
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
['final - no vote']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [
|
|
|
|
msPaid,
|
|
|
|
msPaid,
|
|
|
|
{ state: ACTIVE, isPaid: false, percentAgainstPayout: 33 },
|
|
|
|
],
|
|
|
|
contributorOverrides: [{ milestoneNoVotes: [false, true, false] }],
|
|
|
|
}),
|
|
|
|
['final - rejected']: getProposalWithCrowdFund({
|
|
|
|
amount: 5,
|
|
|
|
funded: 5,
|
|
|
|
milestoneOverrides: [msPaid, msPaid, msRejected],
|
|
|
|
}),
|
|
|
|
};
|
|
|
|
|
|
|
|
const initialStoreStateA = JSON.parse(JSON.stringify(combineInitialState));
|
|
|
|
initialStoreStateA.web3.accounts = [trustee];
|
2018-10-03 13:12:26 -07:00
|
|
|
const storeTrustee = configureStore(initialStoreStateA).store;
|
2018-10-03 12:04:08 -07:00
|
|
|
|
|
|
|
const initialStoreStateB = JSON.parse(JSON.stringify(combineInitialState));
|
|
|
|
initialStoreStateB.web3.accounts = [contributor];
|
2018-10-03 13:12:26 -07:00
|
|
|
const storeContributor = configureStore(initialStoreStateB).store;
|
2018-10-03 12:04:08 -07:00
|
|
|
|
|
|
|
const initialStoreStateC = JSON.parse(JSON.stringify(combineInitialState));
|
|
|
|
initialStoreStateC.web3.accounts = ['0x0'];
|
2018-10-03 13:12:26 -07:00
|
|
|
const storeOutsider = configureStore(initialStoreStateC).store;
|
2018-10-03 12:04:08 -07:00
|
|
|
|
|
|
|
const trusteeStories = storiesOf('Proposal/Milestones/trustee', module);
|
|
|
|
|
|
|
|
for (const key of Object.keys(cases)) {
|
|
|
|
const value = cases[key];
|
|
|
|
trusteeStories.add(key, () => (
|
|
|
|
<div key={key} style={{ padding: '2em', display: 'flex' }}>
|
|
|
|
<Provider store={storeTrustee}>
|
|
|
|
<Milestones {...value} />
|
|
|
|
</Provider>
|
|
|
|
</div>
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
const contributorStories = storiesOf('Proposal/Milestones/contributor', module);
|
|
|
|
|
|
|
|
for (const key of Object.keys(cases)) {
|
|
|
|
const value = cases[key];
|
|
|
|
contributorStories.add(key, () => (
|
|
|
|
<div key={key} style={{ padding: '2em', display: 'flex' }}>
|
|
|
|
<Provider store={storeContributor}>
|
|
|
|
<Milestones {...value} />
|
|
|
|
</Provider>
|
|
|
|
</div>
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
const outsiderStories = storiesOf('Proposal/Milestones/outsider', module);
|
|
|
|
|
|
|
|
for (const key of Object.keys(cases)) {
|
|
|
|
const value = cases[key];
|
|
|
|
outsiderStories.add(key, () => (
|
|
|
|
<div key={key} style={{ padding: '2em', display: 'flex' }}>
|
|
|
|
<Provider store={storeOutsider}>
|
|
|
|
<Milestones {...value} />
|
|
|
|
</Provider>
|
|
|
|
</div>
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
const geometryStories = storiesOf('Proposal/Milestones/geometry', module);
|
|
|
|
|
|
|
|
geometryCases.forEach((gc, idx) =>
|
|
|
|
geometryStories.add(`${idx + 1} steps`, () => (
|
|
|
|
<div key={idx} style={{ padding: '3em', display: 'flex' }}>
|
|
|
|
<Provider store={storeOutsider}>
|
|
|
|
<Milestones {...gc} />
|
|
|
|
</Provider>
|
|
|
|
</div>
|
|
|
|
)),
|
|
|
|
);
|