From a92ff7152b0625b67e88c683a27752f0bd71aa29 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Fri, 19 Mar 2021 13:54:16 -0400 Subject: [PATCH 01/17] WIP --- .../GlobalStylesSidebarV2.js | 97 +++++++++++++++++++ .../components/Screen.js | 10 ++ .../components/ScreenHeader.js | 27 ++++++ .../components/SettingLink.js | 13 +++ .../components/StylePreview.js | 28 ++++++ .../GlobalStylesSidebarV2/components/index.js | 4 + .../GlobalStylesSidebarV2/constants.js | 4 + .../screens/ColorsScreen.js | 48 +++++++++ .../screens/GlobalStylesScreen.js | 15 +++ .../GlobalStylesSidebarV2/screens/index.js | 2 + .../GlobalStylesSidebarV2/state/AppState.js | 65 +++++++++++++ .../WIP/GlobalStylesSidebarV2.stories.js | 12 +++ 12 files changed, 325 insertions(+) create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Screen.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/ScreenHeader.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/SettingLink.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/StylePreview.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/constants.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/GlobalStylesScreen.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js create mode 100644 packages/components/src/__stories__/WIP/GlobalStylesSidebarV2.stories.js diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js new file mode 100644 index 000000000..20cd7622e --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js @@ -0,0 +1,97 @@ +import { ContextSystemProvider } from '@wp-g2/context'; +import { ui } from '@wp-g2/styles'; +import React from 'react'; + +import { + CardHeader, + Heading, + Navigator, + NavigatorScreen, + NavigatorScreens, + View, +} from '../../index'; +import { ColorsScreen, GlobalStylesScreen } from './screens'; +import { AppProvider } from './state/AppState'; + +const ANIMATION_SPEED = 0.1; + +export default { + title: 'Examples/WIP/GlobalStylesSidebarV2', +}; + +const GlobalStylesHeader = () => { + return ( + + Global Styles + + ); +}; + +const screens = [ + { + component: GlobalStylesScreen, + path: 'GlobalStyles', + title: 'Global Styles', + }, + { + component: ColorsScreen, + path: 'Colors', + title: 'Colors', + }, +]; + +const Sidebar = ({ children }) => { + return ( + + + {children} + + + ); +}; + +const Example = (props) => { + const initialPath = 'Colors'; + return ( + + + + + {screens.map((screen) => ( + + ))} + + + + ); +}; + +export const GlobalStylesSidebar = () => { + return ( +
+ + + +
+ ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Screen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Screen.js new file mode 100644 index 000000000..a29ac51fb --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Screen.js @@ -0,0 +1,10 @@ +import { styled } from '@wp-g2/styles'; + +import { Surface } from '../../../index'; + +export const Screen = styled(Surface, { props: { variant: 'tertiary' } })` + bottom: 0; + left: 0; + right: 0; + top: 0; +`; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/ScreenHeader.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/ScreenHeader.js new file mode 100644 index 000000000..aaf8b5618 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/ScreenHeader.js @@ -0,0 +1,27 @@ +import { FiChevronLeft, FiDroplet, FiGrid, FiPlus, FiType } from '@wp-g2/icons'; +import React from 'react'; + +import { + CardBody, + Heading, + HStack, + Icon, + NavigatorLink, + Spacer, + View, +} from '../../../index'; + +export const ScreenHeader = ({ back, title }) => { + return ( + + + + } variant="muted" /> + + + + {title} + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/SettingLink.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/SettingLink.js new file mode 100644 index 000000000..a973969c0 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/SettingLink.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { MenuItem, NavigatorLink, Text } from '../../../index'; + +export const SettingLink = ({ prefix, title, to }) => { + return ( + + + {title} + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/StylePreview.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/StylePreview.js new file mode 100644 index 000000000..5583c6117 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/StylePreview.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { HStack, Spacer, View, VStack } from '../../../index'; +import { useAppState } from '../state/AppState'; + +export const StylePreview = () => { + const { get } = useAppState(); + const fontFamily = get('typography.fontFamily'); + const themeColors = get('color.palettes').find((p) => p.title === 'Theme'); + const [main, text, accent] = themeColors.colors.map((i) => i.color); + + return ( + + + {fontFamily} + {fontFamily} + + + + + + + + + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js new file mode 100644 index 000000000..6548d83fc --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js @@ -0,0 +1,4 @@ +export * from './Screen'; +export * from './ScreenHeader'; +export * from './SettingLink'; +export * from './StylePreview'; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/constants.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/constants.js new file mode 100644 index 000000000..c98c3c184 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/constants.js @@ -0,0 +1,4 @@ +export const ANIMATION_SPEED = 0.14; +export const COLOR_MAIN = '#D1E4DE'; +export const COLOR_TEXT = '#39414D'; +export const COLOR_ACCENT = '#fff'; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js new file mode 100644 index 000000000..52e428946 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js @@ -0,0 +1,48 @@ +import React from 'react'; + +import { + CardBody, + ListGroup, + ListGroupHeader, + MenuItem, + NavigatorLink, + Text, + VStack, +} from '../../../index'; +import { Screen, ScreenHeader } from '../components'; + +const Header = () => { + return ( + + + + Manages the available colors to use across the site and its + blocks. + + + ); +}; + +const Palette = () => { + return ( + + Palette + + Hello + + + ); +}; + +export const ColorsScreen = () => { + return ( + + + +
+ + + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/GlobalStylesScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/GlobalStylesScreen.js new file mode 100644 index 000000000..e626bd214 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/GlobalStylesScreen.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import { CardBody } from '../../../index'; +import { Screen, SettingLink, StylePreview } from '../components'; + +export const GlobalStylesScreen = () => { + return ( + + + + + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js new file mode 100644 index 000000000..4904ae35e --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js @@ -0,0 +1,2 @@ +export * from './ColorsScreen'; +export * from './GlobalStylesScreen'; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js new file mode 100644 index 000000000..8ccc9cc78 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js @@ -0,0 +1,65 @@ +import { faker } from '@wp-g2/protokit'; +import _ from 'lodash'; +import React from 'react'; + +import { COLOR_ACCENT, COLOR_MAIN, COLOR_TEXT } from '../constants'; + +// Models +const createPaletteColor = ({ color, slug }) => ({ + id: faker.random.uuid(), + slug, + color, + title: _.startCase(slug), +}); + +const createPalette = ({ colors, title }) => ({ + id: faker.random.uuid(), + title, + colors, +}); + +// App State +const initialState = { + color: { + palettes: [ + createPalette({ + title: 'Theme', + colors: [ + createPaletteColor({ slug: 'main', color: COLOR_MAIN }), + createPaletteColor({ slug: 'text', color: COLOR_TEXT }), + createPaletteColor({ slug: 'accent', color: COLOR_ACCENT }), + ], + }), + ], + elements: { + background: COLOR_MAIN, + text: COLOR_TEXT, + }, + }, + typography: { + fontFamily: 'Helvetica Neue', + }, +}; + +export const AppState = React.createContext({}); +export const useAppState = () => React.useContext(AppState); + +export const AppProvider = ({ children }) => { + const [appState, setAppState] = React.useState(initialState); + const contextValue = { + ...appState, + setAppState, + set: (key, value) => + setAppState((prev) => { + const next = _.set(prev, key, value); + return next; + }), + get: (values) => _.get(appState, values), + }; + + return ( + {children} + ); +}; + +export const THING = 'hello'; diff --git a/packages/components/src/__stories__/WIP/GlobalStylesSidebarV2.stories.js b/packages/components/src/__stories__/WIP/GlobalStylesSidebarV2.stories.js new file mode 100644 index 000000000..40998e825 --- /dev/null +++ b/packages/components/src/__stories__/WIP/GlobalStylesSidebarV2.stories.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { GlobalStylesSidebar } from '../../__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2'; + +export default { + title: 'Examples/WIP/GlobalStylesSidebarV2', +}; + +export const _default = () => ( +
+ +
+); From a05ee210dc25a910cb5a90a3ec0256dcffce2f0a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Mar 2021 15:14:06 -0400 Subject: [PATCH 02/17] Update routes --- .../components/src/Navigator/Router/Link.js | 5 ++- .../src/Navigator/Router/NavLink.js | 2 +- .../GlobalStylesSidebarV2.js | 23 ++++++++-- .../screens/ColorsPaletteScreen.js | 45 +++++++++++++++++++ .../screens/ColorsScreen.js | 4 +- .../GlobalStylesSidebarV2/screens/index.js | 1 + 6 files changed, 72 insertions(+), 8 deletions(-) create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js diff --git a/packages/components/src/Navigator/Router/Link.js b/packages/components/src/Navigator/Router/Link.js index 8b35ddd8c..e32e99f72 100644 --- a/packages/components/src/Navigator/Router/Link.js +++ b/packages/components/src/Navigator/Router/Link.js @@ -87,7 +87,10 @@ const Link = forwardRef( context.location, ); - const href = location ? history.createHref(location) : ''; + let href = location ? history.createHref(location) : ''; + if (to) { + href = undefined; + } const props = { ...rest, href, diff --git a/packages/components/src/Navigator/Router/NavLink.js b/packages/components/src/Navigator/Router/NavLink.js index 039ded969..41a23c941 100644 --- a/packages/components/src/Navigator/Router/NavLink.js +++ b/packages/components/src/Navigator/Router/NavLink.js @@ -86,7 +86,7 @@ const NavLink = forwardRef( props.innerRef = innerRef; } - return ; + return ; }} ); diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js index 20cd7622e..1c2a62f7a 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js @@ -10,7 +10,11 @@ import { NavigatorScreens, View, } from '../../index'; -import { ColorsScreen, GlobalStylesScreen } from './screens'; +import { + ColorsPaletteScreen, + ColorsScreen, + GlobalStylesScreen, +} from './screens'; import { AppProvider } from './state/AppState'; const ANIMATION_SPEED = 0.1; @@ -30,14 +34,24 @@ const GlobalStylesHeader = () => { const screens = [ { component: GlobalStylesScreen, - path: 'GlobalStyles', + path: '/', title: 'Global Styles', }, { component: ColorsScreen, - path: 'Colors', + path: '/colors', title: 'Colors', }, + { + component: ColorsPaletteScreen, + path: '/colors/palette', + title: 'Palette', + }, + // { + // component: ColorsElementsScreen, + // path: '/colors/elements/:id', + // title: 'Elements', + // }, ]; const Sidebar = ({ children }) => { @@ -65,7 +79,7 @@ const Sidebar = ({ children }) => { }; const Example = (props) => { - const initialPath = 'Colors'; + const initialPath = '/'; return ( @@ -77,6 +91,7 @@ const Example = (props) => { animationEnterDelay={0} animationEnterDuration={ANIMATION_SPEED} animationExitDuration={ANIMATION_SPEED} + exact key={screen.path} /> ))} diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js new file mode 100644 index 000000000..101f234ed --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import { + CardBody, + ListGroup, + ListGroupHeader, + MenuItem, + NavigatorLink, + Text, + VStack, +} from '../../../index'; +import { Screen, ScreenHeader } from '../components'; + +const Header = () => { + return ( + + + + Manages the available colors to use across the site and its + blocks. + + + ); +}; + +const Palette = () => { + return ( + + Palette + + ); +}; + +export const ColorsPaletteScreen = () => { + return ( + + + +
+ + + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js index 52e428946..55b083d37 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js @@ -14,7 +14,7 @@ import { Screen, ScreenHeader } from '../components'; const Header = () => { return ( - + Manages the available colors to use across the site and its blocks. @@ -27,7 +27,7 @@ const Palette = () => { return ( Palette - + Hello diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js index 4904ae35e..cbd70e477 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js @@ -1,2 +1,3 @@ export * from './ColorsScreen'; +export * from './ColorsPaletteScreen'; export * from './GlobalStylesScreen'; From 867a858de395f7b57855d45b5a0d29fc7fd23567 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Mar 2021 12:54:24 -0400 Subject: [PATCH 03/17] Prototyping elements --- .../components/src/Navigator/NavigatorLink.js | 1 + .../GlobalStylesSidebarV2.js | 13 +-- .../screens/ColorsElementScreen.js | 49 ++++++++++ .../screens/ColorsScreen.js | 71 +++++++++++++- .../GlobalStylesSidebarV2/screens/index.js | 1 + .../GlobalStylesSidebarV2/state/AppState.js | 15 ++- packages/components/src/index.js | 1 + packages/components/src/item-group/context.js | 8 ++ packages/components/src/item-group/index.js | 2 + .../components/src/item-group/item-group.js | 34 +++++++ packages/components/src/item-group/item.js | 8 ++ packages/components/src/item-group/styles.js | 96 +++++++++++++++++++ .../src/item-group/use-item-group.js | 36 +++++++ .../components/src/item-group/use-item.js | 37 +++++++ 14 files changed, 357 insertions(+), 15 deletions(-) create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js create mode 100644 packages/components/src/item-group/context.js create mode 100644 packages/components/src/item-group/index.js create mode 100644 packages/components/src/item-group/item-group.js create mode 100644 packages/components/src/item-group/item.js create mode 100644 packages/components/src/item-group/styles.js create mode 100644 packages/components/src/item-group/use-item-group.js create mode 100644 packages/components/src/item-group/use-item.js diff --git a/packages/components/src/Navigator/NavigatorLink.js b/packages/components/src/Navigator/NavigatorLink.js index eb256c224..9674c11fe 100644 --- a/packages/components/src/Navigator/NavigatorLink.js +++ b/packages/components/src/Navigator/NavigatorLink.js @@ -78,6 +78,7 @@ function NavigatorLink(props, forwardedRef) { ); } + console.log(to); return ( { @@ -79,7 +80,7 @@ const Sidebar = ({ children }) => { }; const Example = (props) => { - const initialPath = '/'; + const initialPath = '/colors'; return ( diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js new file mode 100644 index 000000000..f614eca29 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js @@ -0,0 +1,49 @@ +import _ from 'lodash'; +import React from 'react'; + +import { + CardBody, + ListGroup, + ListGroupHeader, + MenuItem, + NavigatorLink, + Text, + useNavigatorParams, + VStack, +} from '../../../index'; +import { Screen, ScreenHeader } from '../components'; + +const Header = () => { + const { id } = useNavigatorParams(); + const title = _.startCase(id); + return ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla + congue finibus ante vel maximus. + + + ); +}; + +const Palette = () => { + return ( + + Palette + + ); +}; + +export const ColorsElementScreen = () => { + return ( + + + +
+ + + + + ); +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js index 55b083d37..88a449d35 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsScreen.js @@ -1,15 +1,23 @@ +import _ from 'lodash'; import React from 'react'; import { CardBody, + ColorCircle, + HStack, + Item, + ItemGroup, ListGroup, ListGroupHeader, - MenuItem, + ListGroups, NavigatorLink, + Spacer, Text, + View, VStack, } from '../../../index'; import { Screen, ScreenHeader } from '../components'; +import { useAppState } from '../state/AppState'; const Header = () => { return ( @@ -23,13 +31,63 @@ const Header = () => { ); }; +const NavLink = (props) => { + return ( + + + + ); +}; + const Palette = () => { return ( Palette - - Hello - + + + + + + + + 23 colors + + + + + + ); +}; + +const Elements = () => { + const { get } = useAppState(); + const elements = get('color.elements'); + + return ( + + Elements + + {elements.map((element) => ( + + + + + + + + {element.title} + + + + + ))} + ); }; @@ -40,7 +98,10 @@ export const ColorsScreen = () => {
- + + + + diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js index cbd70e477..292ef2614 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/index.js @@ -1,3 +1,4 @@ export * from './ColorsScreen'; +export * from './ColorsElementScreen'; export * from './ColorsPaletteScreen'; export * from './GlobalStylesScreen'; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js index 8ccc9cc78..142fbce96 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/state/AppState.js @@ -18,6 +18,13 @@ const createPalette = ({ colors, title }) => ({ colors, }); +const createElement = ({ color, title }) => ({ + id: faker.random.uuid(), + title, + color, + slug: _.kebabCase(title), +}); + // App State const initialState = { color: { @@ -31,10 +38,10 @@ const initialState = { ], }), ], - elements: { - background: COLOR_MAIN, - text: COLOR_TEXT, - }, + elements: [ + createElement({ title: 'Background', color: COLOR_MAIN }), + createElement({ title: 'Text', color: COLOR_TEXT }), + ], }, typography: { fontFamily: 'Helvetica Neue', diff --git a/packages/components/src/index.js b/packages/components/src/index.js index c13e8fca8..87a3f4cbc 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -46,6 +46,7 @@ export * from './HStack'; export * from './Icon'; export * from './Image'; export * from './Initials'; +export * from './item-group'; export * from './Link'; export * from './List'; export * from './ListGroup'; diff --git a/packages/components/src/item-group/context.js b/packages/components/src/item-group/context.js new file mode 100644 index 000000000..e0cfd82f8 --- /dev/null +++ b/packages/components/src/item-group/context.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +export const ItemGroupContext = createContext({ size: 'medium' }); + +export const useItemGroupContext = () => useContext(ItemGroupContext); diff --git a/packages/components/src/item-group/index.js b/packages/components/src/item-group/index.js new file mode 100644 index 000000000..25412ed60 --- /dev/null +++ b/packages/components/src/item-group/index.js @@ -0,0 +1,2 @@ +export { default as Item } from './item'; +export { default as ItemGroup } from './item-group'; diff --git a/packages/components/src/item-group/item-group.js b/packages/components/src/item-group/item-group.js new file mode 100644 index 000000000..eb39d28d4 --- /dev/null +++ b/packages/components/src/item-group/item-group.js @@ -0,0 +1,34 @@ +import { contextConnect } from '@wp-g2/context'; +import React from 'react'; + +import { View } from '../View'; +// eslint-disable-next-line no-duplicate-imports +import { ItemGroupContext, useItemGroupContext } from './context'; +/** + * Internal dependencies + */ +import { useItemGroup } from './use-item-group'; + +function ItemGroup(props) { + const { bordered, separated, size: sizeProp, ...otherProps } = useItemGroup( + props, + ); + + const { size: contextSize } = useItemGroupContext(); + + const spacedAround = !bordered && !separated; + const size = sizeProp || contextSize; + + const contextValue = { + spacedAround, + size, + }; + + return ( + + + + ); +} + +export default contextConnect(ItemGroup, 'ItemGroup'); diff --git a/packages/components/src/item-group/item.js b/packages/components/src/item-group/item.js new file mode 100644 index 000000000..05ae51141 --- /dev/null +++ b/packages/components/src/item-group/item.js @@ -0,0 +1,8 @@ +import { createComponent } from '../utils'; +import { useItem } from './use-item'; + +export default createComponent({ + useHook: useItem, + as: 'div', + name: 'Item', +}); diff --git a/packages/components/src/item-group/styles.js b/packages/components/src/item-group/styles.js new file mode 100644 index 000000000..cf4d5a442 --- /dev/null +++ b/packages/components/src/item-group/styles.js @@ -0,0 +1,96 @@ +import { css, ui } from '@wp-g2/styles'; + +// @todo: Maybe abstract to a dedicated UnstyledButton component. +export const unstyledButton = css` + appearance: none; + background: none; + border: 1px solid transparent; + cursor: pointer; + text-align: left; + + &:hover { + color: ${ui.get('colorAdmin')}; + } + + &:focus { + background-color: transparent; + border-color: ${ui.get('colorAdmin')}; + color: ${ui.get('colorAdmin')}; + outline: 3px solid transparent; + } +`; + +export const item = css` + display: block; + width: 100%; +`; + +export const bordered = css` + ${ui.border.all} +`; + +export const separated = css` + > *:not(marquee) { + ${ui.border.bottom} + } + + > *:last-child:not(:focus) { + border-bottom-color: transparent; + } +`; + +const borderRadius = ui.get('controlBorderRadius'); + +export const spacedAround = css` + ${ui.borderRadius(borderRadius)} +`; + +export const rounded = css` + ${ui.borderRadius(borderRadius)} + + > *:first-child { + border-top-left-radius: ${borderRadius}; + border-top-right-radius: ${borderRadius}; + } + + > *:last-child { + border-bottom-left-radius: ${borderRadius}; + border-bottom-right-radius: ${borderRadius}; + } +`; + +const baseFontHeight = `calc(${ui.get('fontSize')} * ${ui.get( + 'fontLineHeightBase', +)})`; + +/* + * Math: + * - Use the desired height as the base value + * - Subtract the computed height of (default) text + * - Subtract the effects of border + * - Divide the calculated number by 2, in order to get an individual top/bottom padding + */ +const paddingY = `calc((${ui.get( + 'controlHeight', +)} - ${baseFontHeight} - 2px) / 2)`; +const paddingYSmall = `calc((${ui.get( + 'controlHeightSmall', +)} - ${baseFontHeight} - 2px) / 2)`; +const paddingYLarge = `calc((${ui.get( + 'controlHeightLarge', +)} - ${baseFontHeight} - 2px) / 2)`; + +export const itemSizes = { + small: css` + ${ui.padding.y(paddingYSmall)} + ${ui.padding.x(ui.get('controlPaddingXSmall'))} + `, + medium: css` + ${ui.padding.y(paddingY)} + ${ui.padding.x(ui.get('controlPaddingX'))} + `, + large: css` + ${ui.padding.y(paddingYLarge)} + ${ui.padding.x(ui.get('controlPaddingXLarge'))} + `, +}; diff --git a/packages/components/src/item-group/use-item-group.js b/packages/components/src/item-group/use-item-group.js new file mode 100644 index 000000000..e195a0c8e --- /dev/null +++ b/packages/components/src/item-group/use-item-group.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { useContextSystem } from '@wp-g2/context'; +import { cx } from '@wp-g2/styles'; + +/** + * Internal dependencies + */ +import * as styles from './styles'; + +export function useItemGroup(props) { + const { + bordered = false, + className, + role = 'list', + rounded = true, + separated = false, + ...otherProps + } = useContextSystem(props, 'ItemGroup'); + + const classes = cx( + bordered && styles.bordered, + (bordered || separated) && styles.separated, + rounded && styles.rounded, + className, + ); + + return { + bordered, + className: classes, + role, + separated, + ...otherProps, + }; +} diff --git a/packages/components/src/item-group/use-item.js b/packages/components/src/item-group/use-item.js new file mode 100644 index 000000000..c0a24e184 --- /dev/null +++ b/packages/components/src/item-group/use-item.js @@ -0,0 +1,37 @@ +import { useContextSystem } from '@wp-g2/context'; +import { cx } from '@wp-g2/styles'; + +import { useItemGroupContext } from './context'; +import * as styles from './styles'; + +export function useItem(props) { + const { + action = false, + as: asProp, + className, + role = 'listitem', + size: sizeProp, + ...otherProps + } = useContextSystem(props, 'Item'); + + const { size: contextSize, spacedAround } = useItemGroupContext(); + + const size = sizeProp || contextSize; + + const as = asProp || action ? 'button' : 'div'; + + const classes = cx( + action && styles.unstyledButton, + styles.itemSizes[size] || styles.itemSizes.medium, + styles.item, + spacedAround && styles.spacedAround, + className, + ); + + return { + as, + className: classes, + role, + ...otherProps, + }; +} From 804d6fb0f2c20318963b323134446f11fbe03285 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Mar 2021 13:15:02 -0400 Subject: [PATCH 04/17] Update Palette spread UI --- .../components/src/Navigator/NavigatorLink.js | 1 - .../screens/ColorsScreen.js | 21 ++++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/components/src/Navigator/NavigatorLink.js b/packages/components/src/Navigator/NavigatorLink.js index 9674c11fe..eb256c224 100644 --- a/packages/components/src/Navigator/NavigatorLink.js +++ b/packages/components/src/Navigator/NavigatorLink.js @@ -78,7 +78,6 @@ function NavigatorLink(props, forwardedRef) { ); } - console.log(to); return ( { }; const Palette = () => { + const { get } = useAppState(); + const theme = get('color.palettes[0].colors'); + const colors = _.take(theme, 3); + + console.log(colors); + return ( Palette - - - + + + {colors.map((color) => ( + + ))} + + 23 colors From 632fc95a2d1100fea0601026dded64e7738a4c33 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Mar 2021 13:40:58 -0400 Subject: [PATCH 05/17] Update paths + back navigation --- .../GlobalStylesSidebarV2/GlobalStylesSidebarV2.js | 3 ++- .../screens/ColorsElementScreen.js | 2 +- .../screens/ColorsPaletteScreen.js | 12 ++++++++---- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js index 5c5281ad8..95fcae630 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js @@ -80,7 +80,8 @@ const Sidebar = ({ children }) => { }; const Example = (props) => { - const initialPath = '/colors'; + const initialPath = '/colors/palette'; + return ( diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js index f614eca29..af275fe8c 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsElementScreen.js @@ -18,7 +18,7 @@ const Header = () => { const title = _.startCase(id); return ( - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue finibus ante vel maximus. diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js index 101f234ed..3c88fe6ee 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/screens/ColorsPaletteScreen.js @@ -4,8 +4,7 @@ import { CardBody, ListGroup, ListGroupHeader, - MenuItem, - NavigatorLink, + SegmentedControl, Text, VStack, } from '../../../index'; @@ -14,7 +13,7 @@ import { Screen, ScreenHeader } from '../components'; const Header = () => { return ( - + Manages the available colors to use across the site and its blocks. @@ -26,7 +25,12 @@ const Header = () => { const Palette = () => { return ( - Palette + ); }; From a3afc4bfc2517ebfb05ed76517f667fcfbd5d6f7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Mar 2021 14:00:43 -0400 Subject: [PATCH 06/17] Add URL Sync --- packages/components/package.json | 3 +- .../GlobalStylesSidebarV2.js | 4 +- .../components/URLSync.js | 39 +++++++++++++++++++ .../GlobalStylesSidebarV2/components/index.js | 1 + .../components/src/item-group/item-group.js | 4 +- yarn.lock | 15 +++++++ 6 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/URLSync.js diff --git a/packages/components/package.json b/packages/components/package.json index 65f7a8399..94f167db7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -38,6 +38,7 @@ "@types/react": "^16.9.46", "@wp-g2/icons": "^0.0.162", "@wp-g2/protokit": "^0.0.162", + "query-string": "7.0.0", "react-beautiful-dnd": "^13.0.0", "react-dnd": "^11.1.3", "react-dnd-html5-backend": "^11.1.3", @@ -54,4 +55,4 @@ "react-dom": "^16.13.1" }, "gitHead": "9536f69d764f89429aa66f4368914ea7936ca4c7" -} +} \ No newline at end of file diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js index 95fcae630..0c35057f3 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js @@ -10,6 +10,7 @@ import { NavigatorScreens, View, } from '../../index'; +import { URLSync, useInitialPath } from './components'; import { ColorsElementScreen, ColorsPaletteScreen, @@ -80,11 +81,12 @@ const Sidebar = ({ children }) => { }; const Example = (props) => { - const initialPath = '/colors/palette'; + const initialPath = useInitialPath(); return ( + {screens.map((screen) => ( diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/URLSync.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/URLSync.js new file mode 100644 index 000000000..aad6fcf80 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/URLSync.js @@ -0,0 +1,39 @@ +import queryString from 'query-string'; +import React from 'react'; + +import { useNavigatorLocation } from '../../../index'; + +const PARAM = 'gssb'; + +export const useInitialPath = () => { + const pathRef = React.useRef(); + try { + const parsed = queryString.parse(window.location.search); + const path = parsed[PARAM] || ''; + + if (!pathRef.current) { + pathRef.current = decodeURIComponent(path); + } + } catch (err) { + if (!pathRef.current) { + pathRef.current = ''; + } + } + + return pathRef.current; +}; + +export const URLSync = () => { + const { pathname } = useNavigatorLocation(); + React.useEffect(() => { + try { + const searchParams = new URLSearchParams(window.location.search); + searchParams.set(PARAM, encodeURIComponent(pathname)); + const newRelativePathQuery = + window.location.pathname + '?' + searchParams.toString(); + window.history.pushState(null, '', newRelativePathQuery); + } catch (err) {} + }, [pathname]); + + return null; +}; diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js index 6548d83fc..19f8cc9b1 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/index.js @@ -2,3 +2,4 @@ export * from './Screen'; export * from './ScreenHeader'; export * from './SettingLink'; export * from './StylePreview'; +export * from './URLSync'; diff --git a/packages/components/src/item-group/item-group.js b/packages/components/src/item-group/item-group.js index eb39d28d4..08ed4e4d2 100644 --- a/packages/components/src/item-group/item-group.js +++ b/packages/components/src/item-group/item-group.js @@ -9,7 +9,7 @@ import { ItemGroupContext, useItemGroupContext } from './context'; */ import { useItemGroup } from './use-item-group'; -function ItemGroup(props) { +function ItemGroup(props, ref) { const { bordered, separated, size: sizeProp, ...otherProps } = useItemGroup( props, ); @@ -26,7 +26,7 @@ function ItemGroup(props) { return ( - + ); } diff --git a/yarn.lock b/yarn.lock index 4d1299190..5b94f5441 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11815,6 +11815,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +filter-obj@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b" + integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs= + finalhandler@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d" @@ -20350,6 +20355,16 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== +query-string@7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.0.tgz#aaad2c8d5c6a6d0c6afada877fecbd56af79e609" + integrity sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA== + dependencies: + decode-uri-component "^0.2.0" + filter-obj "^1.1.0" + split-on-first "^1.0.0" + strict-uri-encode "^2.0.0" + query-string@^4.1.0: version "4.3.4" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" From 684aedb023f6d1ce26a5f00ed0b65443e18bfc5a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 24 Mar 2021 13:11:16 -0400 Subject: [PATCH 07/17] Add Inspector for GS sidebar --- .../GlobalStylesSidebarV2.js | 3 +- .../components/Inspector.js | 43 +++++++++++++++++++ .../GlobalStylesSidebarV2/components/index.js | 1 + .../screens/ColorsScreen.js | 2 - 4 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Inspector.js diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js index 0c35057f3..cf9fb11ed 100644 --- a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/GlobalStylesSidebarV2.js @@ -10,7 +10,7 @@ import { NavigatorScreens, View, } from '../../index'; -import { URLSync, useInitialPath } from './components'; +import { Inspector, URLSync, useInitialPath } from './components'; import { ColorsElementScreen, ColorsPaletteScreen, @@ -86,6 +86,7 @@ const Example = (props) => { return ( + diff --git a/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Inspector.js b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Inspector.js new file mode 100644 index 000000000..a84847d98 --- /dev/null +++ b/packages/components/src/__fixtures__/GlobalStylesSidebarV2/components/Inspector.js @@ -0,0 +1,43 @@ +import { motion } from 'framer-motion'; +import React from 'react'; + +import { + Card, + CardBody, + CardHeader, + FormGroup, + Select, + useNavigatorHistory, + useNavigatorLocation, +} from '../../../index'; + +const routes = ['/', '/colors', '/colors/palette'].map((o) => ({ + value: o, + label: o, +})); + +export const Inspector = () => { + const navigator = useNavigatorHistory(); + const location = useNavigatorLocation(); + const currentPath = location?.pathname; + const handleOnRouteChange = (next) => navigator.push(next); + + return ( +
+ + + Inspector + + + + + + + + + + + + + + + + + + + + +