VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 Work on React components and releases

Browse source
This commit is contained in:
Joost De Cock 2019-04-30 16:20:43 +02:00
parent 10fc688be1
commit 9d54e25020
93 changed files with 1253 additions and 1785 deletions
Download patch file Download diff file Expand all files Collapse all files

1753
packages/components/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

20
packages/components/package.json
View file

@ -22,15 +22,15 @@
"SKIPbuild": "npm run clean && npm run nodebuild && npm run modulebuild",
"test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
"pubtest": "npm publish --registry http://localhost:6662",
"SKIPpublish": "npm build && npm publish --access=public --tag=alpha",
"publish": "npm build && npm publish --access=public --tag=alpha",
"storybook": "start-storybook -p 6663"
},
"peerDependencies": {
"@freesewing/i18n": "^2.0.0-alpha.0",
"@freesewing/patterns": "^2.0.0-alpha.0",
"@freesewing/utils": "^2.0.0-alpha.0",
"prop-types": "15.7.2",
"react": "^16.4.1",
"prop-types": "15.7.2",
"@freesewing/patterns": "^2.0.0-alpha.2",
"@freesewing/i18n": "^2.0.0-alpha.2",
"@freesewing/utils": "^2.0.0-alpha.2",
"react-intl": "^2.8.0"
},
"files": [
@ -46,5 +46,13 @@
"node": ">=8.0.0",
"npm": ">=5"
},
"gitHead": "aec02a355494839184b3ae4598322912386badf6"
"dependencies": {
"@freesewing/i18n": "^2.0.0-alpha.2",
"@freesewing/utils": "^2.0.0-alpha.2",
"@material-ui/core": "^3.9.3",
"@material-ui/lab": "^3.0.0-alpha.30",
"@material-ui/styles": "^3.0.0-alpha.10",
"react": "^16.8.6",
"react-intl": "^2.8.0"
}
}

2
packages/components/src/DraftConfigurator/DraftSettingComplete/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Complete from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

4
packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js
View file

@ -45,7 +45,7 @@ const DraftSettingLanguage = props => {
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "draftSetting",
value: props.name
})
@ -57,7 +57,7 @@ const DraftSettingLanguage = props => {
};
DraftSettingLanguage.propTypes = {
triggerAction: PropTypes.func.isRequired,
raiseEvent: PropTypes.func.isRequired,
updateValue: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
title: PropTypes.node.isRequired,

2
packages/components/src/DraftConfigurator/DraftSettingLanguage/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Lang from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

5
packages/components/src/DraftConfigurator/DraftSettingMargin/index.js
View file

@ -51,11 +51,12 @@ const DraftSettingMargin = props => {
title={props.title}
id="po-slider-margin"
displayValue={formatMm(value, props.units)}
displayFormat="html"
reset={reset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "margin"
})
@ -67,7 +68,7 @@ const DraftSettingMargin = props => {
};
DraftSettingMargin.propTypes = {
triggerAction: PropTypes.func.isRequired,
raiseEvent: PropTypes.func.isRequired,
updateValue: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
desc: PropTypes.string.isRequired,

2
packages/components/src/DraftConfigurator/DraftSettingMargin/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Margin from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

2
packages/components/src/DraftConfigurator/DraftSettingOnly/index.js
View file

@ -75,7 +75,7 @@ const DraftSettingOnly = props => {
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "only"
})

2
packages/components/src/DraftConfigurator/DraftSettingOnly/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Sa from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

2
packages/components/src/DraftConfigurator/DraftSettingPaperless/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Paperless from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

5
packages/components/src/DraftConfigurator/DraftSettingSa/index.js
View file

@ -95,11 +95,12 @@ const DraftSettingSa = props => {
title={props.title}
id="po-list-sa"
displayValue={formatMm(saValue, props.units)}
displayFormat="html"
reset={reset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEventAction("showHelp", {
type: "draftSetting",
value: "sa"
})
@ -111,7 +112,7 @@ const DraftSettingSa = props => {
};
DraftSettingSa.propTypes = {
triggerAction: PropTypes.func.isRequired,
raiseEvent: PropTypes.func.isRequired,
updateValue: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
desc: PropTypes.string.isRequired,

2
packages/components/src/DraftConfigurator/DraftSettingSa/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Sa from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),

2
packages/components/src/DraftConfigurator/DraftSettingUnits/index.js
View file

@ -43,7 +43,7 @@ const DraftSettingUnits = props => {
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "draftSetting",
value: "units"
})

6
packages/components/src/DraftConfigurator/DraftSettingUnits/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Units from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated setting ${name}, value is now: ${value}`),
@ -18,4 +18,6 @@ const props = {
}
};
storiesOf("Low level/DraftSettingUnits", module).add("Basic", () => <Units {...props} />);
storiesOf("Low level/DraftSettingUnits", module).add("Basic", () => (
<Units {...props} />
));

5
packages/components/src/DraftConfigurator/DraftSettings/index.js
View file

@ -12,7 +12,6 @@ import DownIcon from "@material-ui/icons/KeyboardArrowDown";
const DraftSettings = props => {
const [expanded, setExpanded] = useState([]);
const toggleGroup = group => {
let shown = expanded.slice(0);
let index = shown.indexOf(group);
@ -45,7 +44,7 @@ const DraftSettings = props => {
complete: noyes
};
let childProps = {
triggerAction: props.triggerAction,
raiseEvent: props.raiseEvent,
updateValue: props.updateValue,
units: props.units,
key: setting,
@ -62,7 +61,7 @@ const DraftSettings = props => {
childProps.dflt = "dflt";
childProps.customDflt = [];
childProps.parts = {};
for (let part of props.info.parts)
for (let part of props.config.parts) // HERE
childProps.parts[part] = <FormattedMessage id={"parts." + part} />;
}

2
packages/components/src/DraftConfigurator/DraftSettings/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import DraftSettings from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),

15
packages/components/src/DraftConfigurator/OptionGroup/index.js
View file

@ -6,25 +6,25 @@ import Mm from "../PatternOptionMillimeter";
import Bool from "../PatternOptionBool";
import List from "../PatternOptionList";
import Count from "../PatternOptionCount";
import { optionType } from "@freesewing/utils";
import { optionType, optionDefault } from "@freesewing/utils";
import { FormattedMessage } from "react-intl";
import { injectIntl } from "react-intl";
const OptionGroup = props => {
const renderOption = (name, sub = false) => {
let option = props.pattern.config.options[name];
let option = props.config.options[name];
let type = optionType(option);
let stringKey = `options.${props.pattern.config.name}.${name}.`;
let stringKey = `options.${props.config.name}.${name}.`;
let extraProps = {
name,
dflt: props.dflts.options[name],
dflt: optionDefault(props.config.options[name]),
units: props.units,
updateValue: props.updateValue,
triggerAction: props.triggerAction,
raiseEvent: props.raiseEvent,
title: <FormattedMessage id={stringKey + "title"} />,
desc: <FormattedMessage id={stringKey + "description"} />,
intl: props.intl,
pattern: props.pattern.config.name,
pattern: props.config.name,
key: name
};
let noyes = [
@ -83,8 +83,7 @@ const OptionGroup = props => {
};
OptionGroup.propTypes = {
pattern: PropTypes.object.isRequired,
dflts: PropTypes.object.isRequired,
config: PropTypes.object.isRequired,
options: PropTypes.array.isRequired,
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};

2
packages/components/src/DraftConfigurator/OptionGroup/stories.js
View file

@ -16,7 +16,7 @@ const options = {
};
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),

23
packages/components/src/DraftConfigurator/OptionPreamble/index.js
View file

@ -32,6 +32,16 @@ const OptionPreamble = props => {
defaultMessage: " 🤔 "
});
let displayClass = props.value === props.dflt ? "dflt" : "custom";
let displayValue = <span className={displayClass}>{props.displayValue}</span>;
if (props.displayFormat === "html")
displayValue = (
<span
className={displayClass}
dangerouslySetInnerHTML={{ __html: props.displayValue }}
/>
);
return (
<React.Fragment>
<h4 onClick={props.toggleExpanded} style={styles.container}>
@ -43,11 +53,7 @@ const OptionPreamble = props => {
/>
{props.title}
</div>
<div style={styles.right}>
<span className={props.value === props.dflt ? "dflt" : "custom"}>
{props.displayValue}
</span>
</div>
<div style={styles.right}>{displayValue}</div>
</h4>
<div
className={props.expanded ? "col-exp expanded" : "col-exp collapsed"}
@ -97,7 +103,12 @@ OptionPreamble.propTypes = {
desc: PropTypes.node.isRequired,
reset: PropTypes.func.isRequired,
showHelp: PropTypes.func.isRequired,
expanded: PropTypes.bool
expanded: PropTypes.bool,
displayFormat: PropTypes.string
};
OptionPreamble.defaultProps = {
displayFormat: "node"
};
export default injectIntl(OptionPreamble);

2
packages/components/src/DraftConfigurator/OptionPreamble/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Preamble from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
id: "example",
value: 120,

6
packages/components/src/DraftConfigurator/PatternOptionBool/index.js
View file

@ -29,7 +29,7 @@ const PatternOptionBool = props => {
updateValue={update}
labels={props.labels}
/>
)
);
return (
<li>
<OptionPreamble
@ -43,7 +43,7 @@ const PatternOptionBool = props => {
expanded={expanded}
reset={reset}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "draftSetting",
value: props.name
})
@ -55,7 +55,7 @@ const PatternOptionBool = props => {
};
PatternOptionBool.propTypes = {
triggerAction: PropTypes.func.isRequired,
raiseEvent: PropTypes.func.isRequired,
updateValue: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
dflt: PropTypes.oneOfType([

2
packages/components/src/DraftConfigurator/PatternOptionBool/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Bool from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated pct/deg/count option ${name}, value is now: ${value}`),

2
packages/components/src/DraftConfigurator/PatternOptionCount/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Count from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated percentage option ${name}, value is now: ${value}`),

2
packages/components/src/DraftConfigurator/PatternOptionDegree/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Pct from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated degree option ${name}, value is now: ${value}`),

4
packages/components/src/DraftConfigurator/PatternOptionList/index.js
View file

@ -50,7 +50,7 @@ const PatternOptionList = props => {
updateValue={update}
list={list}
/>
)
);
return (
<li>
<OptionPreamble
@ -64,7 +64,7 @@ const PatternOptionList = props => {
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "patternOption",
value: props.name
})

6
packages/components/src/DraftConfigurator/PatternOptionList/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import List from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated pct/deg/count option ${name}, value is now: ${value}`),
@ -20,4 +20,6 @@ const props = {
}
};
storiesOf("Low level/PatternOptionList", module).add("Basic", () => <List {...props} />);
storiesOf("Low level/PatternOptionList", module).add("Basic", () => (
<List {...props} />
));

3
packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js
View file

@ -71,11 +71,12 @@ const PatternOptionMillimeter = props => {
title={props.title}
id={"po-mm-" + props.name}
displayValue={formatMm(value, props.units)}
displayFormat="html"
reset={reset}
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "patternOption",
value: props.name
})

2
packages/components/src/DraftConfigurator/PatternOptionMillimeter/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Mm from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated millimeter option ${name}, value is now: ${value}`),

5
packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js
View file

@ -45,7 +45,8 @@ const PatternOptionPctDegCount = props => {
onChange={update}
label={"po-" + props.type + "-" + props.name}
updateValue={update}
/>)
/>
);
return (
<li>
@ -60,7 +61,7 @@ const PatternOptionPctDegCount = props => {
toggleExpanded={toggleExpanded}
expanded={expanded}
showHelp={() =>
props.triggerAction("showHelp", {
props.raiseEvent("showHelp", {
type: "patternOption",
value: props.name
})

9
packages/components/src/DraftConfigurator/PatternOptionPctDegCount/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import PctDegCount from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated pct/deg/count option ${name}, value is now: ${value}`),
@ -14,9 +14,10 @@ const props = {
"This is the description. I'm wrapped in a p tag. This component is the base for the percentage, degree, and count pattern options."
};
storiesOf("Low level/PatternOptionPctDegCount", module).add("Percentage", () => (
<PctDegCount {...props} type="pct" />
));
storiesOf("Low level/PatternOptionPctDegCount", module).add(
"Percentage",
() => <PctDegCount {...props} type="pct" />
);
storiesOf("Low level/PatternOptionPctDegCount", module).add("Degree", () => (
<PctDegCount {...props} type="deg" />
));

2
packages/components/src/DraftConfigurator/PatternOptionPercentage/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import Pct from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (name, value) =>
console.log(`Updated percentage option ${name}, value is now: ${value}`),

17
packages/components/src/DraftConfigurator/PatternOptions/index.js
View file

@ -5,13 +5,12 @@ import Deg from "../PatternOptionDegree";
import Mm from "../PatternOptionMillimeter";
import Bool from "../PatternOptionBool";
import OptionGroup from "../OptionGroup";
import { optionType, gistDefaults } from "@freesewing/utils";
import { optionType } from "@freesewing/utils";
import { FormattedMessage } from "react-intl";
import DownIcon from "@material-ui/icons/KeyboardArrowDown";
const PatternOptions = props => {
const [expanded, setExpanded] = useState([]);
const toggleGroup = group => {
let shown = expanded.slice(0);
let index = shown.indexOf(group);
@ -31,11 +30,10 @@ const PatternOptions = props => {
<OptionGroup
key={group + "-group"}
units={props.units}
info={props.info}
dflts={gistDefaults(props.info.config, props.gist)}
options={props.info.optionGroups[group]}
config={props.config}
options={props.config.optionGroups[group]}
updateValue={props.updateValue}
triggerAction={props.triggerAction}
raiseEvent={props.raiseEvent}
/>
</ul>
);
@ -56,14 +54,15 @@ const PatternOptions = props => {
return (
<ul className="nav l2">
{Object.keys(props.info.optionGroups).map(group => renderGroup(group))}
{Object.keys(props.config.optionGroups).map(group => renderGroup(group))}
</ul>
);
};
PatternOptions.propTypes = {
info: PropTypes.object.isRequired,
gist: PropTypes.object.isRequired
config: PropTypes.object.isRequired,
gist: PropTypes.object.isRequired,
raiseEvent: PropTypes.func
};
PatternOptions.defaultProps = {};

2
packages/components/src/DraftConfigurator/PatternOptions/stories.js
View file

@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
import PatternOptions from ".";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),

21
packages/components/src/DraftConfigurator/index.js
View file

@ -5,7 +5,7 @@ import Deg from "./PatternOptionDegree";
import Mm from "./PatternOptionMillimeter";
import Bool from "./PatternOptionBool";
import OptionGroup from "./OptionGroup";
import { optionType, gistDefaults } from "@freesewing/utils";
import { optionType } from "@freesewing/utils";
import { FormattedMessage } from "react-intl";
import PatternOptions from "./PatternOptions";
import DraftSettings from "./DraftSettings";
@ -13,10 +13,6 @@ import DraftSettings from "./DraftSettings";
const DraftConfigurator = props => {
const [expanded, setExpanded] = useState([]);
const update = (type, name, value) => {
console.log("updating", type, name, value);
};
const toggleGroup = group => {
let shown = expanded.slice(0);
let index = shown.indexOf(group);
@ -24,7 +20,6 @@ const DraftConfigurator = props => {
else shown.splice(index, 1);
setExpanded(shown);
};
let dflts = gistDefaults(props.info.config, props.gist);
return (
<ul className="nav l1">
@ -33,12 +28,13 @@ const DraftConfigurator = props => {
<FormattedMessage id="app.patternOptions" />
</h2>
<PatternOptions
info={props.info}
config={props.config}
gist={props.gist}
updateValue={(name, value) =>
props.updateGist(value, "settings", "options", name)
}
triggerAction={props.triggerAction}
raiseEvent={props.raiseEvent}
units={props.units}
/>
</li>
<li>
@ -46,19 +42,22 @@ const DraftConfigurator = props => {
<FormattedMessage id="app.draftSettings" />
</h2>
<DraftSettings
info={props.info}
config={props.config}
gist={props.gist}
updateValue={(name, value) =>
props.updateGist(value, "settings", name)
}
triggerAction={props.triggerAction}
raiseEvent={props.raiseEvent}
units={props.units}
/>
</li>
</ul>
);
};
DraftConfigurator.propTypes = {};
DraftConfigurator.propTypes = {
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};
DraftConfigurator.defaultProps = {};

4
packages/components/src/DraftConfigurator/stories.js
View file

@ -5,10 +5,10 @@ import GistConfigurator from ".";
//import { strings } from "@freesewing/i18n";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),
console.log(`Update ${type} with new value`, data)
};
storiesOf("DraftConfigurator", module)

28
packages/components/src/Navbar/stories.js
View file

@ -3,13 +3,13 @@ import { storiesOf } from "@storybook/react";
import Navbar from ".";
import LanguageIcon from "@material-ui/icons/Translate";
import DarkModeIcon from "@material-ui/icons/Brightness3";
import Avatar from '@material-ui/core/Avatar';
import Avatar from "@material-ui/core/Avatar";
const props = {
triggerAction: (type, data) =>
raiseEvent: (type, data) =>
console.log(`Action of type ${type} triggered, data passed is`, data),
updateValue: (type, data) =>
console.log(`Update ${type} with new value`, data),
console.log(`Update ${type} with new value`, data)
};
const navs = {
left: [
@ -27,29 +27,27 @@ const navs = {
type: "link",
href: "https://freesewing.org/",
text: "app.community"
},
}
],
right: [
{
type: "link",
href: "https://freesewing.org/",
text: "app.account",
text: "app.account"
},
{
type: "link",
href: "https://freesewing.org/",
text: <LanguageIcon className="nav-icon"/>,
title: 'Languages'
text: <LanguageIcon className="nav-icon" />,
title: "Languages"
},
{
type: "link",
href: "https://freesewing.org/",
text: <DarkModeIcon className="nav-icon moon"/>,
title: 'Dark mode'
},
],
}
text: <DarkModeIcon className="nav-icon moon" />,
title: "Dark mode"
}
]
};
storiesOf("Navbar", module)
.add("Basic", () => <Navbar navs={navs}/>)
storiesOf("Navbar", module).add("Basic", () => <Navbar navs={navs} />);

13
packages/components/src/Workbench/Pattern/index.js
View file

@ -8,14 +8,18 @@ const Pattern = props => {
return (
<div className="fs-sa">
<section>hi mom</section>
<section>
<pre>{JSON.stringify(props.gist, null, 2)}</pre>
</section>
<aside>
<div className="sticky">
<DraftConfigurator
config={props.config}
gist={props.gist}
info={props.info}
updateGist={props.updateGist}
raiseEvent={props.raiseEvent}
freesewing={props.freesewing}
units={props.units}
/>
</div>
</aside>
@ -26,9 +30,10 @@ const Pattern = props => {
Pattern.propTypes = {
gist: PropTypes.object.isRequired,
updateGist: PropTypes.func.isRequired,
info: PropTypes.object.isRequired,
config: PropTypes.object.isRequired,
raiseEvent: PropTypes.func.isRequired,
Pattern: PropTypes.func.isRequired
Pattern: PropTypes.func.isRequired,
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};
export default Pattern;

36
packages/components/src/Workbench/bak.js
View file

@ -1,36 +0,0 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { IntlProvider } from "react-intl";
import Button from "@material-ui/core/Button";
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import { createMuiTheme } from "@material-ui/core/styles";
import { i18n, strings } from "@freesewing/i18n";
import { Navbar, withGist } from "@freesewing/components";
import { defaultGist, storage } from "@freesewing/utils";
import { dark, light } from "@freesewing/mui-theme";
const Workbench = props => {
return (
<IntlProvider locale={language} messages={strings[language]}>
<MuiThemeProvider theme={createMuiTheme(themes[theme])}>
<React.Fragment>
<Navbar />
<Button variant="contained" color="primary">
test
</Button>
</React.Fragment>
</MuiThemeProvider>
</IntlProvider>
);
};
Workbench.propTypes = {
freesewing: PropTypes.object,
language: PropType.string
};
Workbench.defaultProps = {
language: "en"
};
export default Workbench;

38
packages/components/src/Workbench/index.js
View file

@ -1,13 +1,12 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import withGist from "../withGist";
import { patternList } from "@freesewing/patterns";
import { FormattedMessage, IntlProvider } from "react-intl";
import Button from "@material-ui/core/Button";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import { i18n, strings } from "@freesewing/i18n";
import Navbar from "../Navbar";
import { defaultGist, storage } from "@freesewing/utils";
import { defaultGist, storage, partList } from "@freesewing/utils";
import { dark, light } from "@freesewing/mui-theme";
import Logo from "../Logo";
import withLanguage from "../withLanguage";
@ -21,22 +20,25 @@ const Workbench = props => {
const [pattern, setPattern] = useState(false);
const [settings, setSettings] = useState(false);
const [theme, setTheme] = useState("light");
useEffect(
() => {
if (props.from) props.importGist(props.from);
},
[props.from]
);
const showLanguageChooser = () => setDisplay("language");
const toggleSettings = () => setSettings(!settings);
const updatePattern = p => {
setPattern(p);
store.set("pattern", p);
};
const toggleDarkMode = () => {
if (theme === "light") setTheme("dark");
else setTheme("light");
};
const raiseEvent = (type, data) => {
console.log("Event raised", type, data);
console.log("FIXME: Event raised", type, data);
};
const navs = {
@ -87,20 +89,18 @@ const Workbench = props => {
main = (
<Pattern
freesewing={props.freesewing}
Pattern={props.pattern}
info={props.info}
pattern={props.pattern}
config={props.config}
gist={props.gist}
updateGist={props.updateGist}
raiseEvent={raiseEvent}
units={props.units}
/>
);
}
// Load defaults into gist
console.log(props);
//props.loadGistDefaults({options: props.info.config.options});
const themes = { dark, light };
return (
<MuiThemeProvider theme={createMuiTheme(themes[theme])}>
<div
@ -116,8 +116,14 @@ const Workbench = props => {
};
Workbench.propTypes = {
pattern: PropTypes.oneOf(patternList),
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
freesewing: PropTypes.object.isRequired,
pattern: PropTypes.func.isRequired,
config: PropTypes.object.isRequired,
from: PropTypes.object
};
Workbench.defaultProps = {
from: false
};
export default withLanguage(
@ -125,5 +131,5 @@ export default withLanguage(
gist: defaultGist,
store: true
}),
"nl"
"en"
);

46
packages/components/src/Workbench/stories.js
View file

@ -2,13 +2,49 @@ import React from "react";
import { storiesOf } from "@storybook/react";
import Workbench from ".";
import freesewing from "@freesewing/core";
import aaron, { config } from "@freesewing/aaron";
const config = {
name: "aaron",
version: "0.1",
design: "Joost De Cock",
code: "Joost De Cock",
department: "menswear",
type: "pattern",
difficulty: 1,
tags: ["story", "test"],
optionGroups: {
fit: ["armholeDrop", "backlineBend"]
},
measurements: ["bicepsCircumference", "centerBackNeckToWaist"],
parts: ["base"],
options: {
armholeDrop: { pct: 10, min: 1, max: 75 },
backlineBend: { mm: 50, min: 50, max: 100 }
}
};
const gist = {
settings: {
embed: true,
sa: 10,
complete: true,
paperless: false,
locale: "en",
units: "metric",
margin: 2,
options: {
armholeDrop: 50
}
}
};
const props = {
freesewing,
pattern: aaron,
config: config
pattern: () => "aaron",
config,
from: gist
};
console.log("story", config, props);
storiesOf("Workbench", module).add("Aaron", () => <Workbench {...props} />);
storiesOf("Workbench", module)
.add("Metric", () => <Workbench {...props} units="metric" />)
.add("Imperial", () => <Workbench {...props} units="imperial" />);

72
packages/components/src/withGist/index.js
View file

@ -1,48 +1,70 @@
import React from "react";
import { gistDefaults } from "@freesewing/utils";
import { storage, cloneObject } from "@freesewing/utils";
import { storage } from "@freesewing/utils";
const withGist = (WrappedComponent, settings = { gist: {}, store: false }) => {
return class extends React.Component {
constructor(props) {
super(props);
this.update = this.update.bind(this);
this.setGist = this.setGist.bind(this);
this.importGist = this.importGist.bind(this);
this.updateGist = this.updateGist.bind(this);
this.state = { gist: settings.gist || {} };
}
update(value, l1 = false, l2 = false, l3 = false) {
if (!l1) return;
let gist = cloneObject(this.state.gist);
setGist(gist) {
this.setState({ gist });
if (settings.store) storage.set(this.state.gist.name || "gist", gist);
}
if (typeof gist === "undefined") gist = {};
if (l1 && typeof gist[l1] === "undefined") gist[l1] = {};
if (l2 && typeof gist[l1][l2] === "undefined") gist[l1][l2] = {};
if (l3 && typeof gist[l1][l2][l3] === "undefined") gist[l1][l2][l3] = {};
importGist(gist) {
if (typeof this.state.gist.settings === "undefined")
this.updateGist({}, "settings");
if (typeof this.state.gist.settings.options === "undefined")
this.updateGist({}, "settings", "options");
if (typeof gist.settings !== "undefined") {
// Load settings
for (let key of Object.keys(gist.settings)) {
if (key !== "options")
this.updateGist(gist.settings[key], "settings", key);
}
if (typeof gist.settings.options !== "undefined") {
// Load options
for (let key of Object.keys(gist.settings.options)) {
this.updateGist(
gist.settings.options[key],
"settings",
"options",
key
);
}
}
}
// Load root level keys
for (let key of Object.keys(gist)) {
if (key !== "settings") this.updateGist(gist[key], key);
}
}
updateGist(value, l1 = false, l2 = false, l3 = false) {
if (!l1) return;
let gist = this.state.gist;
if (l2 && typeof gist[l1] === "undefined") gist[l1] = {};
if (l3 && typeof gist[l1][l2] === "undefined") gist[l1][l2] = {};
if (l3) gist[l1][l2][l3] = value;
else if (l2) gist[l1][l2] = value;
else if (l1) gist[l1] = value;
this.setState({ gist }, () => {
if (settings.store) storage.set(settings.store, this.state.gist);
});
}
getGist() {
return this.state.gist;
}
loadDefaults(defaults) {
for (let key of defaults) {
console.log(key);
}
this.setState({ gist });
if (settings.store) storage.set(this.state.gist.name || "gist", gist);
}
render() {
return (
<WrappedComponent
gist={this.state.gist}
updateGist={this.update}
loadGistDefaults={this.loadDefaults}
importGist={this.importGist}
updateGist={this.updateGist}
{...this.props}
/>
);