From b4fcc993aa6d994efadff8a7401d5515eb43fa1b Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 30 Sep 2021 20:50:44 +0530 Subject: [PATCH] feat(preferences): Defaults segment feat: Dropdown component --- .../javascripts/components/Dropdown.tsx | 45 ++++++++++ .../javascripts/preferences/panes/General.tsx | 4 +- .../panes/general-segments/Defaults.tsx | 59 +++++++++++++ .../panes/general-segments/index.ts | 1 + package.json | 3 +- yarn.lock | 83 ++++++++++++++++++- 6 files changed, 188 insertions(+), 7 deletions(-) create mode 100644 app/assets/javascripts/components/Dropdown.tsx create mode 100644 app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx new file mode 100644 index 000000000..d9667c310 --- /dev/null +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -0,0 +1,45 @@ +import { Listbox, ListboxOption } from '@reach/listbox'; +import VisuallyHidden from '@reach/visually-hidden'; +import { FunctionComponent } from 'preact'; +import { IconType } from './Icon'; +import '@reach/listbox/styles.css'; +import { useState } from 'preact/hooks'; + +export type DropdownItem = { + icon?: IconType; + label: string; + value: string; +}; + +type Props = { + id: string; + srLabel: string; + items: DropdownItem[]; + defaultValue: string; +}; + +export const Dropdown: FunctionComponent = ({ + id, + srLabel, + items, + defaultValue, +}) => { + const [value, setValue] = useState(defaultValue); + + const labelId = `${id}-label`; + + return ( + <> + {srLabel} + setValue(value)} + aria-labelledby={labelId} + > + {items.map((item) => ( + {item.label} + ))} + + + ); +}; diff --git a/app/assets/javascripts/preferences/panes/General.tsx b/app/assets/javascripts/preferences/panes/General.tsx index b4fa9ad8e..826485fef 100644 --- a/app/assets/javascripts/preferences/panes/General.tsx +++ b/app/assets/javascripts/preferences/panes/General.tsx @@ -2,8 +2,7 @@ import { WebApplication } from '@/ui_models/application'; import { AppState } from '@/ui_models/app_state'; import { FunctionComponent } from 'preact'; import { PreferencesPane } from '../components'; -import { ErrorReporting } from './general-segments'; -import { Tools } from './general-segments/Tools'; +import { ErrorReporting, Tools, Defaults } from './general-segments'; interface GeneralProps { appState: AppState; @@ -13,6 +12,7 @@ interface GeneralProps { export const General: FunctionComponent = (props) => ( + ); diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx new file mode 100644 index 000000000..7f492b854 --- /dev/null +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -0,0 +1,59 @@ +import { Dropdown, DropdownItem } from '@/components/Dropdown'; +import { + PreferencesGroup, + PreferencesSegment, + Subtitle, + Text, + Title, +} from '@/preferences/components'; +import { WebApplication } from '@/ui_models/application'; +import { ComponentArea } from '@standardnotes/snjs'; +import { FunctionComponent } from 'preact'; +import { useEffect, useState } from 'preact/hooks'; + +type Props = { + application: WebApplication; +}; + +export const Defaults: FunctionComponent = ({ application }) => { + const [editorItems, setEditorItems] = useState([]); + + useEffect(() => { + const editors = application.componentManager + .componentsForArea(ComponentArea.Editor) + .map((editor) => { + return { + label: editor.name, + value: editor.package_info.identifier, + }; + }); + + setEditorItems([ + { + label: 'Plain Editor', + value: 'plain-editor', + }, + ...editors, + ]); + }, [application]); + + return ( + + + Defaults +
+ Default Editor + New notes will be created using this editor. +
+ +
+
+ + + ); +}; diff --git a/app/assets/javascripts/preferences/panes/general-segments/index.ts b/app/assets/javascripts/preferences/panes/general-segments/index.ts index dd28d7a2c..42a057b5d 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/index.ts +++ b/app/assets/javascripts/preferences/panes/general-segments/index.ts @@ -1,2 +1,3 @@ export * from './ErrorReporting'; export * from './Tools'; +export * from './Defaults'; diff --git a/package.json b/package.json index 442f0aae2..d0fe0b065 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,9 @@ "@reach/alert-dialog": "^0.13.0", "@reach/checkbox": "^0.13.2", "@reach/dialog": "^0.13.0", - "@standardnotes/sncrypto-web": "1.5.2", + "@reach/listbox": "^0.16.1", "@standardnotes/features": "1.6.1", + "@standardnotes/sncrypto-web": "1.5.2", "@standardnotes/snjs": "2.14.8", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index 2b15bab0f..62314ca67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1834,6 +1834,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/auto-id@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed" + integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/checkbox@^0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.13.2.tgz#b972b922cf6cea0c2bbabca0129c58307b566a4e" @@ -1853,6 +1861,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/descendants@0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f" + integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/dialog@0.13.0", "@reach/dialog@^0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.13.0.tgz#2110725c3b8a3c64685834cdc9f3ce5c15617809" @@ -1887,6 +1903,18 @@ "@reach/utils" "0.15.2" prop-types "^15.7.2" +"@reach/listbox@^0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.1.tgz#8a4a13cf171e9ba3118d2e6e72f3e7f17f4c2f80" + integrity sha512-2KQTYmxKvZW0XdBWGoV7E2gUWWBINJmfj2MDRmWbRNdTjsF9w3mTb09buTWQ2sznzF7DrLrwiBFv4b2egMfKOw== + dependencies: + "@reach/auto-id" "0.16.0" + "@reach/descendants" "0.16.1" + "@reach/machine" "0.16.0" + "@reach/popover" "0.16.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + "@reach/machine@0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.13.2.tgz#744302f5ce2d4e5fd0527ae0baa60d325b2325d8" @@ -1905,6 +1933,15 @@ "@xstate/fsm" "1.4.0" tslib "^2.3.0" +"@reach/machine@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3" + integrity sha512-c8SRQz2xGtg5M9aXuuM5pFgaV1ZW5/nyMIYpZzBwHUlNFKGO+VBhwedbnqUxO0yLcbgl3wPvjPh740O3YjqiHg== + dependencies: + "@reach/utils" "0.16.0" + "@xstate/fsm" "1.4.0" + tslib "^2.3.0" + "@reach/menu-button@^0.15.1": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe" @@ -1934,6 +1971,17 @@ tabbable "^4.0.0" tslib "^2.3.0" +"@reach/popover@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623" + integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA== + dependencies: + "@reach/portal" "0.16.0" + "@reach/rect" "0.16.0" + "@reach/utils" "0.16.0" + tabbable "^4.0.0" + tslib "^2.3.0" + "@reach/portal@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.0.tgz#bed220d41097deb1454a7928b22529ba10d3ea2b" @@ -1950,6 +1998,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/portal@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3" + integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/rect@0.15.2": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd" @@ -1961,6 +2017,17 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/rect@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16" + integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q== + dependencies: + "@reach/observe-rect" "1.2.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/utils@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844" @@ -1996,6 +2063,14 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/utils@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce" + integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q== + dependencies: + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/visually-hidden@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f" @@ -2069,10 +2144,10 @@ "@standardnotes/sncrypto-common" "^1.5.2" libsodium-wrappers "^0.7.8" -"@standardnotes/snjs@2.14.6": - version "2.14.6" - resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.6.tgz#fb3f625ec6f22bbee543ccb6fc69e177311c1a4b" - integrity sha512-/PfuyOv2u4Km29yQi2JXYYUteFmHmLYnbQhk96wYHbCwBiNmIyVdSp0VaA4XgVIuZq32QyhhTayjkexq5Huw/Q== +"@standardnotes/snjs@2.14.8": + version "2.14.8" + resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.8.tgz#ebd89734d7e846ade96b7d0d81a465418147337d" + integrity sha512-+nfo1civqJlHfrcDeKNJfp2t6o4gs1pkDbjPzT3vULhZUWbOwCeuF1jXHosCxpjnhd+5Wa/oG2KcbKKsqlrrfw== dependencies: "@standardnotes/auth" "3.7.2" "@standardnotes/common" "1.1.0"