From 30d1ea1941e716345db924de5abf079b0bcd2426 Mon Sep 17 00:00:00 2001 From: Tomastomaslol Date: Wed, 21 Oct 2020 20:19:12 +1100 Subject: [PATCH 001/135] use transform instead of zoom to scale component in Preview --- lib/components/src/blocks/Preview.tsx | 42 ++++++++++++++++++++------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 1e58b51aabd1..b8358ca2aea2 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -1,4 +1,11 @@ -import React, { Children, FunctionComponent, ReactElement, ReactNode, useState } from 'react'; +import React, { + Children, + FunctionComponent, + ReactElement, + ReactNode, + useEffect, + useState, +} from 'react'; import { darken } from 'polished'; import { styled } from '@storybook/theming'; @@ -20,7 +27,9 @@ export interface PreviewProps { type layout = 'padded' | 'fullscreen' | 'centered'; -const ChildrenContainer = styled.div( +const ChildrenContainer = styled.div< + PreviewProps & { zoom: number; layout: layout; height: number } +>( ({ isColumn, columns, layout }) => ({ display: isColumn || !columns ? 'block' : 'flex', position: 'relative', @@ -38,9 +47,10 @@ const ChildrenContainer = styled.div + ({ height, layout = 'padded' }) => layout === 'centered' || layout === 'padded' ? { + height: `${height + 50}px`, padding: '30px 20px', margin: -10, '& > *': { @@ -61,7 +71,8 @@ const ChildrenContainer = styled.div ({ '> *': { - zoom: 1 / zoom, + transformOrigin: 'top left', + transform: `scale(${1 / zoom})`, }, }), ({ columns }) => @@ -187,7 +198,15 @@ const Preview: FunctionComponent = ({ const [expanded, setExpanded] = useState(isExpanded); const { source, actionItem } = getSource(withSource, expanded, setExpanded); const [scale, setScale] = useState(1); + const [height, setHeight] = useState(0); const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']); + const componentWrapperRef = React.useRef(null); + + useEffect(() => { + if (componentWrapperRef.current) { + setHeight(componentWrapperRef.current.getBoundingClientRect().height); + } + }, [scale, componentWrapperRef.current]); const defaultActionItems = withSource ? [actionItem] : []; const actionItems = additionalActions @@ -219,13 +238,16 @@ const Preview: FunctionComponent = ({ columns={columns} zoom={scale} layout={layout} + height={height} > - {Array.isArray(children) ? ( - // eslint-disable-next-line react/no-array-index-key - children.map((child, i) =>
{child}
) - ) : ( -
{children}
- )} +
+ {Array.isArray(children) ? ( + // eslint-disable-next-line react/no-array-index-key + children.map((child, i) =>
{child}
) + ) : ( +
{children}
+ )} +
From 9c681dc051c1fdbea3823b3f8452ba87fc8231b9 Mon Sep 17 00:00:00 2001 From: Tomastomaslol Date: Sat, 24 Oct 2020 17:16:28 +1100 Subject: [PATCH 002/135] Add new zoom component and use it in Preview blocks --- lib/components/src/Zoom/Zoom.stories.tsx | 45 ++++++++++++++++++++++++ lib/components/src/Zoom/Zoom.tsx | 40 +++++++++++++++++++++ lib/components/src/blocks/Preview.tsx | 27 +++----------- 3 files changed, 90 insertions(+), 22 deletions(-) create mode 100644 lib/components/src/Zoom/Zoom.stories.tsx create mode 100644 lib/components/src/Zoom/Zoom.tsx diff --git a/lib/components/src/Zoom/Zoom.stories.tsx b/lib/components/src/Zoom/Zoom.stories.tsx new file mode 100644 index 000000000000..fa3a8b876dbc --- /dev/null +++ b/lib/components/src/Zoom/Zoom.stories.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import Zoom from './Zoom'; + +export default { + component: Zoom, + title: 'Basics/Zoom', + argTypes: { + scale: { + control: { type: 'range', min: 0.2, max: 30, step: 0.02 }, + }, + }, +}; +const COMPONENT_TO_INSPECT = ( +
+); + +const Template = (args) => ; + +export const actualSize = Template.bind({}); + +actualSize.args = { + scale: 1, + children: COMPONENT_TO_INSPECT, +}; + +export const zoomedIn = Template.bind({}); + +zoomedIn.args = { + scale: 0.02, + children: COMPONENT_TO_INSPECT, +}; + +export const zoomedOut = Template.bind({}); + +zoomedOut.args = { + scale: 30, + children: COMPONENT_TO_INSPECT, +}; diff --git a/lib/components/src/Zoom/Zoom.tsx b/lib/components/src/Zoom/Zoom.tsx new file mode 100644 index 000000000000..daa99d7045f4 --- /dev/null +++ b/lib/components/src/Zoom/Zoom.tsx @@ -0,0 +1,40 @@ +import window from 'global'; +import React, { ReactElement, useEffect, useState } from 'react'; +import { styled } from '@storybook/theming'; + +const browserSupportsCssZoom = (): boolean => + window.document.implementation.createHTMLDocument().body.style.zoom !== undefined; + +const ZoomArea = styled.div<{ scale: number; height: number }>(({ scale = 1, height }) => + browserSupportsCssZoom() + ? { + zoom: 1 / scale, + } + : { + height: height + 50, + transformOrigin: 'top left', + transform: `scale(${1 / scale})`, + } +); + +export interface IZoomProps { + scale: number; + children: ReactElement | ReactElement[]; +} + +export default function Zoom({ scale, children }: IZoomProps) { + const componentWrapperRef = React.useRef(null); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (componentWrapperRef.current) { + setHeight(componentWrapperRef.current.getBoundingClientRect().height); + } + }, [scale, componentWrapperRef.current]); + + return ( + +
{children}
+
+ ); +} diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index b8358ca2aea2..7206dba23ebd 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -14,6 +14,7 @@ import { Source, SourceProps } from './Source'; import { ActionBar, ActionItem } from '../ActionBar/ActionBar'; import { Toolbar } from './Toolbar'; import { ZoomContext } from './ZoomContext'; +import Zoom from '../Zoom/Zoom'; export interface PreviewProps { isColumn?: boolean; @@ -27,9 +28,7 @@ export interface PreviewProps { type layout = 'padded' | 'fullscreen' | 'centered'; -const ChildrenContainer = styled.div< - PreviewProps & { zoom: number; layout: layout; height: number } ->( +const ChildrenContainer = styled.div( ({ isColumn, columns, layout }) => ({ display: isColumn || !columns ? 'block' : 'flex', position: 'relative', @@ -47,10 +46,9 @@ const ChildrenContainer = styled.div< display: 'inline-block', }, }), - ({ height, layout = 'padded' }) => + ({ layout = 'padded' }) => layout === 'centered' || layout === 'padded' ? { - height: `${height + 50}px`, padding: '30px 20px', margin: -10, '& > *': { @@ -69,12 +67,6 @@ const ChildrenContainer = styled.div< alignItems: 'center', } : {}, - ({ zoom = 1 }) => ({ - '> *': { - transformOrigin: 'top left', - transform: `scale(${1 / zoom})`, - }, - }), ({ columns }) => columns && columns > 1 ? { '> *': { minWidth: `calc(100% / ${columns} - 20px)` } } : {} ); @@ -198,16 +190,9 @@ const Preview: FunctionComponent = ({ const [expanded, setExpanded] = useState(isExpanded); const { source, actionItem } = getSource(withSource, expanded, setExpanded); const [scale, setScale] = useState(1); - const [height, setHeight] = useState(0); const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']); const componentWrapperRef = React.useRef(null); - useEffect(() => { - if (componentWrapperRef.current) { - setHeight(componentWrapperRef.current.getBoundingClientRect().height); - } - }, [scale, componentWrapperRef.current]); - const defaultActionItems = withSource ? [actionItem] : []; const actionItems = additionalActions ? [...defaultActionItems, ...additionalActions] @@ -236,18 +221,16 @@ const Preview: FunctionComponent = ({ -
+ {Array.isArray(children) ? ( // eslint-disable-next-line react/no-array-index-key children.map((child, i) =>
{child}
) ) : (
{children}
)} -
+
From 704d91e3926bf4386578f926c9033a31b7acb23e Mon Sep 17 00:00:00 2001 From: Tomastomaslol Date: Sun, 25 Oct 2020 12:49:22 +1100 Subject: [PATCH 003/135] removed unused imports --- lib/components/src/blocks/Preview.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx index 7206dba23ebd..77b4b2bb1d91 100644 --- a/lib/components/src/blocks/Preview.tsx +++ b/lib/components/src/blocks/Preview.tsx @@ -1,11 +1,4 @@ -import React, { - Children, - FunctionComponent, - ReactElement, - ReactNode, - useEffect, - useState, -} from 'react'; +import React, { Children, FunctionComponent, ReactElement, ReactNode, useState } from 'react'; import { darken } from 'polished'; import { styled } from '@storybook/theming'; @@ -191,7 +184,6 @@ const Preview: FunctionComponent = ({ const { source, actionItem } = getSource(withSource, expanded, setExpanded); const [scale, setScale] = useState(1); const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']); - const componentWrapperRef = React.useRef(null); const defaultActionItems = withSource ? [actionItem] : []; const actionItems = additionalActions From 7a9575affc6de506edc78d366a9aed41172d5299 Mon Sep 17 00:00:00 2001 From: Tomastomaslol Date: Sun, 25 Oct 2020 17:56:25 +1100 Subject: [PATCH 004/135] add support to be able to zoom on a iframe --- lib/components/src/Zoom/Zoom.stories.tsx | 62 ++++++++++++++---- lib/components/src/Zoom/Zoom.tsx | 23 +++++-- lib/components/src/Zoom/ZoomIFrame.tsx | 80 ++++++++++++++++++++++++ lib/components/src/index.ts | 1 + lib/ui/src/components/preview/iframe.tsx | 71 +++------------------ 5 files changed, 158 insertions(+), 79 deletions(-) create mode 100644 lib/components/src/Zoom/ZoomIFrame.tsx diff --git a/lib/components/src/Zoom/Zoom.stories.tsx b/lib/components/src/Zoom/Zoom.stories.tsx index fa3a8b876dbc..ddcc341f5ade 100644 --- a/lib/components/src/Zoom/Zoom.stories.tsx +++ b/lib/components/src/Zoom/Zoom.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { CSSProperties } from 'react'; import Zoom from './Zoom'; export default { @@ -10,7 +10,7 @@ export default { }, }, }; -const COMPONENT_TO_INSPECT = ( +const EXAMPLE_COMPONENT = (
); +const style: CSSProperties = { + width: '500px', + height: '500px', + border: '2px solid hotpink', + position: 'relative', +}; + +const EXAMPLE_IFRAME = ( +