diff --git a/package.json b/package.json index 3e6a658b8b4..64bf29e6582 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "@babel/register": "^7.0.0", "@material-ui/core": "3.9.3", "@material-ui/icons": "3.0.2", + "@material-ui/lab": "3.0.0-alpha.30", "@storybook/addon-backgrounds": "5.0.10", "@storybook/addon-knobs": "5.0.10", "@storybook/addon-notes": "5.0.10", diff --git a/packages/components/src/Emblem/stories.js b/packages/components/src/Emblem/stories.js index 3d28a7c7845..2d8bfdb9c31 100644 --- a/packages/components/src/Emblem/stories.js +++ b/packages/components/src/Emblem/stories.js @@ -3,7 +3,7 @@ import { storiesOf, addDecorator } from "@storybook/react"; import Emblem from "."; import "../../../../dist/css-theme/theme.css"; -storiesOf("Graphics/Emblem", module).add( +storiesOf("Emblem", module).add( "FreeSewing", () => , { notes: { markdown: ` test **here**` } } diff --git a/packages/components/src/draft/options/Bool/index.js b/packages/components/src/FormFieldBool/index.js similarity index 100% rename from packages/components/src/draft/options/Bool/index.js rename to packages/components/src/FormFieldBool/index.js diff --git a/packages/components/src/FormFieldBool/stories.js b/packages/components/src/FormFieldBool/stories.js new file mode 100644 index 00000000000..eb8975a303e --- /dev/null +++ b/packages/components/src/FormFieldBool/stories.js @@ -0,0 +1,17 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import FormFieldBool from "."; + +const props = { + updateOption: (name, value) => + console.log(`Updated option ${name}, value is now: ${value}`), + name: "exampleBoolOption" +}; +const noyes = ["No", "Yes"]; + +storiesOf("FormFieldBool", module) + .add("Basic", () => ) + .add("False", () => ) + .add("True", () => ) + .add("No", () => ) + .add("Yes", () => ); diff --git a/packages/components/src/FormFieldList/index.js b/packages/components/src/FormFieldList/index.js new file mode 100644 index 00000000000..d7e7e4d9003 --- /dev/null +++ b/packages/components/src/FormFieldList/index.js @@ -0,0 +1,35 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import Radio from "@material-ui/core/Radio"; +import RadioGroup from "@material-ui/core/RadioGroup"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; + +const FormFieldList = props => { + const [value, setValue] = useState(props.dflt); + const update = evt => { + props.updateOption(props.name, evt.target.value); + setValue(evt.target.value); + }; + return ( + + {Object.keys(props.list).map((item, index) => ( + } + value={item} + checked={value === item ? true : false} + label={props.list[item]} + /> + ))} + + ); +}; + +FormFieldList.propTypes = { + dflt: PropTypes.bool, + list: PropTypes.object, + updateOption: PropTypes.func.isRequired, + name: PropTypes.string.isRequired +}; + +export default FormFieldList; diff --git a/packages/components/src/FormFieldList/stories.js b/packages/components/src/FormFieldList/stories.js new file mode 100644 index 00000000000..3ad85a128bf --- /dev/null +++ b/packages/components/src/FormFieldList/stories.js @@ -0,0 +1,20 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import FormFieldList from "."; + +const props = { + updateOption: (name, value) => + console.log(`Updated option ${name}, value is now: ${value}`), + name: "exampleListOption", + list: { + apple: "Apple", + banana: "Banana", + cherry: "Cherry" + } +}; + +storiesOf("FormFieldList", module) + .add("Basic", () => ) + .add("Apple", () => ) + .add("Banana", () => ) + .add("Cherry", () => ); diff --git a/packages/components/src/FormFieldSlider/index.js b/packages/components/src/FormFieldSlider/index.js new file mode 100644 index 00000000000..b8eb86603af --- /dev/null +++ b/packages/components/src/FormFieldSlider/index.js @@ -0,0 +1,56 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import Slider from "@material-ui/lab/Slider"; +import { withStyles } from "@material-ui/core/styles"; + +const PaddedSlider = withStyles({ + container: { padding: "25px 0" }, + track: { height: "4px" }, + thumb: { width: "16px", height: "16px" } +})(Slider); + +const FormFieldSlider = props => { + const [value, setValue] = useState(props.value); + + const update = (evt, newValue) => { + props.updateOption(props.name, newValue, evt); + setValue(newValue); + }; + + // Force state update when rerendering due to props change + if (props.value !== value) setValue(props.value); + + return ( + + ); +}; + +FormFieldSlider.propTypes = { + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + updateOption: PropTypes.func.isRequired, + name: PropTypes.string.isRequired, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]) +}; + +FormFieldSlider.defaultProps = { + min: 0, + max: 100, + step: 0.1, + label: false +}; + +export default FormFieldSlider; diff --git a/packages/components/src/FormFieldSlider/stories.js b/packages/components/src/FormFieldSlider/stories.js new file mode 100644 index 00000000000..ddf287d5878 --- /dev/null +++ b/packages/components/src/FormFieldSlider/stories.js @@ -0,0 +1,19 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import FormFieldSlider from "."; + +const props = { + updateOption: (name, value) => + console.log(`Updated option ${name}, value is now: ${value}`), + name: "exampleSliderOption" +}; + +storiesOf("FormFieldSlider", module) + .add("Basic", () => ) + .add("From 1 to 10", () => ) + .add("Step: 1", () => ( + + )) + .add("Defalt: 7", () => ( + + )); diff --git a/packages/components/src/Logo/index.js b/packages/components/src/Logo/index.js index fcbca6b967c..45942517107 100644 --- a/packages/components/src/Logo/index.js +++ b/packages/components/src/Logo/index.js @@ -11,7 +11,7 @@ const Logo = props => { className={props.className} > @@ -22,13 +22,15 @@ const Logo = props => { Logo.propTypes = { size: PropTypes.number, embed: PropTypes.bool, - className: PropTypes.string + className: PropTypes.string, + color: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]) }; Logo.defaultProps = { size: 24, embed: false, - className: "" + className: "", + color: false }; export default Logo; diff --git a/packages/components/src/Logo/stories.js b/packages/components/src/Logo/stories.js index 189a62da4c6..be06f28ec56 100644 --- a/packages/components/src/Logo/stories.js +++ b/packages/components/src/Logo/stories.js @@ -1,10 +1,8 @@ import React from "react"; import { storiesOf, addDecorator } from "@storybook/react"; -//import {muiTheme} from 'storybook-addon-material-ui'; import Logo from "."; -storiesOf("Graphics/Logo", module) - // .addDecorator(muiTheme()) +storiesOf("Logo", module) .add("Default", () => ) .add("Custom size", () => ) .add("Custom color", () => ( diff --git a/packages/components/src/Ogol/stories.js b/packages/components/src/Ogol/stories.js index 88d78a8659e..81e82a09fcd 100644 --- a/packages/components/src/Ogol/stories.js +++ b/packages/components/src/Ogol/stories.js @@ -1,10 +1,9 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import Ogol from "."; -import "../../../../dist/css-theme/theme.css"; import { dark as backgrounds } from "../../.storybook/backgrounds"; -storiesOf("Graphics/Ogol", module) +storiesOf("Ogol", module) .add("Default", () => , { backgrounds }) - .add("Custom color", () => , { backgrounds }) + .add("Custom color", () => , { backgrounds }) .add("Custom size", () => , { backgrounds }); diff --git a/packages/components/src/PatternOptionPercentage/index.js b/packages/components/src/PatternOptionPercentage/index.js new file mode 100644 index 00000000000..f78bf2d5afb --- /dev/null +++ b/packages/components/src/PatternOptionPercentage/index.js @@ -0,0 +1,122 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import FormFieldSlider from "../FormFieldSlider"; +import IconButton from "@material-ui/core/IconButton"; +import ResetIcon from "@material-ui/icons/SettingsBackupRestore"; +import HelpIcon from "@material-ui/icons/Help"; + +const PatternOptionPercentage = props => { + const [value, setValue] = useState(props.dflt); + const [previousValue, setPreviousValue] = useState(props.dflt); + + const round = val => Math.round(val * 10) / 10; + + const update = (name, newValue, evt) => { + newValue = round(newValue); + // Sometimes, when sliding, the rapid succession of updates + // causes a weird timing issue to result in a value that is NaN. + // If that's the case, just ignore this update and keep the + // previous one instead + if (!isNaN(newValue)) { + setValue(newValue); + if (evt.type !== "mousemove") props.updateOption(props.name, newValue); + } else { + if (evt.type !== "mousemove") props.updateOption(props.name, value); + } + }; + + const reset = () => { + setValue(props.dflt); + props.updateOption(props.name, props.dflt); + }; + + const styles = { + container: { + display: "flex", + flexDirection: "row", + alignItems: "center" + }, + left: { + flexGrow: 1, + margin: "0 0.5rem" + }, + right: { margin: "0 0.5rem" } + }; + + return ( +
+
+
+

{props.title}

+
+
+

{value}%

+
+
+
+
+

{props.desc}

+
+
+ + + + + props.triggerAction("showHelp", { + type: "patternOption", + value: props.name + }) + } + > + + +
+
+ +
+ ); +}; + +PatternOptionPercentage.propTypes = { + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + updateOption: PropTypes.func.isRequired, + name: PropTypes.string.isRequired, + dflt: PropTypes.number.isRequired, + title: PropTypes.string.isRequired, + desc: PropTypes.string.isRequired, + resetLabel: PropTypes.string, + docsLabel: PropTypes.string +}; + +PatternOptionPercentage.defaultProps = { + min: 0, + max: 100, + step: 0.1, + title: false, + desc: false, + resetLabel: "♻️", + docsLabel: "🤔" +}; + +export default PatternOptionPercentage; diff --git a/packages/components/src/PatternOptionPercentage/stories.css b/packages/components/src/PatternOptionPercentage/stories.css new file mode 100644 index 00000000000..08d6f8af179 --- /dev/null +++ b/packages/components/src/PatternOptionPercentage/stories.css @@ -0,0 +1 @@ +div.pattern-option .custom { color: #5c940d; } diff --git a/packages/components/src/PatternOptionPercentage/stories.js b/packages/components/src/PatternOptionPercentage/stories.js new file mode 100644 index 00000000000..4c8d919a67a --- /dev/null +++ b/packages/components/src/PatternOptionPercentage/stories.js @@ -0,0 +1,21 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import Pct from "."; +import "./stories.css"; + +const props = { + triggerAction: (type, data) => + console.log(`Action of type ${type} triggered, data passed is`, data), + updateOption: (name, value) => + console.log(`Updated percentage option ${name}, value is now: ${value}`), + name: "examplePercentageOption", + dflt: 50 +}; + +storiesOf("PatternOptionPercentage", module).add("Basic", () => ( + +)); diff --git a/packages/components/src/draft/options/Bool/stories.js b/packages/components/src/draft/options/Bool/stories.js deleted file mode 100644 index 75cc79b4cbb..00000000000 --- a/packages/components/src/draft/options/Bool/stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { storiesOf } from "@storybook/react"; -import Bool from "."; - -const props = { - updateOption: (name, value) => - console.log(`Updated option ${name}, value is now: ${value}`), - name: "exampleBoolOption" -}; -const noyes = ["No", "Yes"]; - -storiesOf("Draft/Options/Bool", module) - .add("Default", () => ) - .add("Default: false", () => ) - .add("Default: true", () => ) - .add("With labels, No", () => ) - .add("With labels, Yes", () => ( - - )); diff --git a/yarn.lock b/yarn.lock index 3499572c5b8..431ab95f4b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2195,6 +2195,17 @@ "@babel/runtime" "^7.2.0" recompose "0.28.0 - 0.30.0" +"@material-ui/lab@3.0.0-alpha.30": + version "3.0.0-alpha.30" + resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-3.0.0-alpha.30.tgz#c6c64d0ff2b28410a09e4009f3677499461f3df8" + integrity sha512-d8IXbkQO92Ln7f/Tzy8Q5cLi/sMWH/Uz1xrOO5NKUgg42whwyCuoT9ErddDPFNQmPi9d1C7A5AG8ONjEAbAIyQ== + dependencies: + "@babel/runtime" "^7.2.0" + "@material-ui/utils" "^3.0.0-alpha.2" + classnames "^2.2.5" + keycode "^2.1.9" + prop-types "^15.6.0" + "@material-ui/system@^3.0.0-alpha.0": version "3.0.0-alpha.2" resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46" @@ -11543,7 +11554,7 @@ jws@^3.1.5: jwa "^1.4.1" safe-buffer "^5.0.1" -keycode@^2.2.0: +keycode@^2.1.9, keycode@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=