From 5ec43124a45e700460c18721ece8d2ca123a2188 Mon Sep 17 00:00:00 2001 From: Vojtech Miksu Date: Thu, 19 Nov 2020 00:14:01 -0800 Subject: [PATCH 1/4] feat(yard): wip: nested overrides --- .../components/yard/config/select.ts | 41 ++-- .../components/yard/custom-props.ts | 131 ++++++++----- documentation-site/components/yard/index.tsx | 2 + .../components/yard/overrides-description.tsx | 23 +++ .../components/yard/overrides.tsx | 185 +++++++++++++----- 5 files changed, 262 insertions(+), 120 deletions(-) create mode 100644 documentation-site/components/yard/overrides-description.tsx diff --git a/documentation-site/components/yard/config/select.ts b/documentation-site/components/yard/config/select.ts index 4f15111352..d5efb77032 100644 --- a/documentation-site/components/yard/config/select.ts +++ b/documentation-site/components/yard/config/select.ts @@ -3,6 +3,7 @@ import {Select, SIZE, TYPE} from 'baseui/select'; import {PropTypes} from 'react-view'; import {changeHandlers} from './common/common'; import {TConfig} from '../types'; +import TagConfig from './tag'; const selectProps = require('!!extract-react-types-loader!../../../../src/select/select.js'); @@ -346,26 +347,26 @@ const SelectConfig: TConfig = { custom: { names: [ 'Root', - 'ControlContainer', - 'Placeholder', - 'ValueContainer', - 'SingleValue', - 'Tag', - 'InputContainer', - 'Input', - 'IconsContainer', - 'SelectArrow', - 'ClearIcon', - 'LoadingIndicator', - 'SearchIconContainer', - 'SearchIcon', - 'Popover', - 'DropdownContainer', - 'Dropdown', - 'DropdownOption', - 'DropdownListItem', - 'OptionContent', - 'StatefulMenu', + // 'ControlContainer', + // 'Placeholder', + // 'ValueContainer', + // 'SingleValue', + TagConfig, + // 'InputContainer', + // 'Input', + // 'IconsContainer', + // 'SelectArrow', + // 'ClearIcon', + // 'LoadingIndicator', + // 'SearchIconContainer', + // 'SearchIcon', + // 'Popover', + // 'DropdownContainer', + // 'Dropdown', + // 'DropdownOption', + // 'DropdownListItem', + // 'OptionContent', + // 'StatefulMenu', ], sharedProps: { $clearable: 'clearable', diff --git a/documentation-site/components/yard/custom-props.ts b/documentation-site/components/yard/custom-props.ts index f2c69e8116..335adf6ae0 100644 --- a/documentation-site/components/yard/custom-props.ts +++ b/documentation-site/components/yard/custom-props.ts @@ -1,6 +1,5 @@ import * as t from '@babel/types'; import template from '@babel/template'; -import traverse from '@babel/traverse'; import generate from '@babel/generator'; import {formatCode, parse} from 'react-view'; @@ -9,57 +8,93 @@ export type TCustomPropFields = { sharedProps: {[key: string]: string | {type: string; description: string}}; }; -export function parseOverrides(code: string, names: string[]) { - const resultOverrides: any = {}; - try { - // to make the AST root valid, let's add a const definition - const ast = parse(`const foo = ${code};`); - traverse(ast, { - ObjectProperty(path) { - const propertyName = path.node.key.name; - if (names.includes(propertyName)) { - //@ts-ignore - const overrideProps = path.node.value.properties; - overrideProps.forEach((prop: any) => { - if (prop.key.name === 'style') { - resultOverrides[propertyName] = { - style: formatCode(generate(prop.value).code), - active: true, - }; - } - }); - } - }, +const parseOverrides = (overrides: any, acc: any) => { + overrides.forEach((override: any) => { + const overrideName = override.key.name; + const overrideProps = override.value.properties; + overrideProps.forEach((prop: any) => { + if (prop.key.name === 'style') { + acc[overrideName] = { + style: formatCode(generate(prop.value).code), + active: true, + }; + } + // looking for 'props' key + if (prop.key.name === 'props') { + // looking for 'overrides' key + prop.value.properties.forEach((subprop: any) => { + if (subprop.key.name === 'overrides') { + acc[overrideName] = { + nestedValue: {}, + active: true, + }; + parseOverrides( + subprop.value.properties, + acc[overrideName].nestedValue, + ); + } + }); + } }); - } catch (e) { - throw new Error("Overrides code is not valid and can't be parsed."); - } - return resultOverrides; -} + }); +}; + +type TGenerateValue = { + [key: string]: { + active: boolean; + style?: string; + nestedValue?: TGenerateValue; + }; +}; + +const generateOverrides = (value: TGenerateValue) => { + const activeValues = Object.entries(value).filter( + ([, val]) => val.active && (val.style || val.nestedValue), + ); + if (activeValues.length === 0) return null; + const keys: any = activeValues.map(([key, val]) => { + if (val.nestedValue) { + const nestedOverride = generateOverrides(val.nestedValue); + if (!nestedOverride) { + return null; + } + return t.objectProperty( + t.identifier(key), + t.objectExpression([ + t.objectProperty( + t.identifier('props'), + t.objectExpression([ + t.objectProperty( + t.identifier('overrides'), + nestedOverride as any, + ), + ]), + ), + ]), + ); + } + return t.objectProperty( + t.identifier(key), + t.objectExpression([ + t.objectProperty(t.identifier('style'), template.expression( + val.style as string, + )({}) as any), + ]), + ); + }); + return t.objectExpression(keys); +}; export const customProps = { overrides: { - generate: (value: {[key: string]: {active: boolean; style: string}}) => { - const activeValues = Object.entries(value).filter( - ([, val]: any) => val.active, - ); - if (activeValues.length === 0) return null; - const keys = activeValues.map(([key, val]: [string, any]) => - t.objectProperty( - t.identifier(key), - t.objectExpression([ - t.objectProperty(t.identifier('style'), template.expression( - val.style, - )({}) as any), - ]), - ), - ); - return t.objectExpression(keys); - }, - parse: (code: string, knobProps: any) => { - const names = - knobProps && knobProps.overrides ? knobProps.overrides.names || [] : []; - return parseOverrides(code, names); + generate: generateOverrides, + parse: (code: string) => { + const ast: any = parse(`const foo = ${code};`); + const topOverrides = ast.program.body[0].declarations[0].init.properties; + const returnValue = {}; + parseOverrides(topOverrides, returnValue); + console.log(returnValue); + return returnValue; }, }, }; diff --git a/documentation-site/components/yard/index.tsx b/documentation-site/components/yard/index.tsx index 9be250e211..2c200d7194 100644 --- a/documentation-site/components/yard/index.tsx +++ b/documentation-site/components/yard/index.tsx @@ -25,6 +25,7 @@ import {getProvider, getThemeFromContext, TProviderValue} from './provider'; import {customProps, TCustomPropFields} from './custom-props'; import ThemeEditor from './theme-editor'; import Overrides from './overrides'; +import OverridesDescription from './overrides-description'; import Editor from './editor'; import ActionButtons from './action-buttons'; import Knobs from './knobs'; @@ -123,6 +124,7 @@ const Yard: React.FC = ({ activeOverrides > 0 ? ` (${activeOverrides})` : '' }`} > + = ({ + componentName, +}) => ( + + Additionally, you can fully customize any part of the {componentName}{' '} + component through the overrides prop ( + + learn more + + ). Try to update different style overrides in the explorer bellow: + +); + +export default OverridesDescription; diff --git a/documentation-site/components/yard/overrides.tsx b/documentation-site/components/yard/overrides.tsx index 19f1ec07aa..dafb4efa2f 100644 --- a/documentation-site/components/yard/overrides.tsx +++ b/documentation-site/components/yard/overrides.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Accordion, Panel} from 'baseui/accordion'; -import {Caption1} from 'baseui/typography'; -import Link from 'next/link'; -import {StyledLink} from 'baseui/link'; +import {StatelessAccordion as Accordion, Panel} from 'baseui/accordion'; +import {Tag} from 'baseui/tag'; +import {useRouter} from 'next/router'; import {useStyletron} from 'baseui'; +import {TConfig} from './types'; import Override, {getHighlightStyles} from './override'; @@ -12,6 +12,7 @@ type TOverridesProps = { overrides: any; componentConfig: any; componentName: string; + isNested?: boolean; }; const Overrides: React.FC = ({ @@ -19,8 +20,10 @@ const Overrides: React.FC = ({ set, componentName, componentConfig, + isNested, }) => { const [, theme] = useStyletron(); + const router = useRouter(); const isLightTheme = theme.name.startsWith('light-theme'); if ( !overrides || @@ -34,20 +37,25 @@ const Overrides: React.FC = ({ const overridesObj: { [key: string]: { style: any; + nested?: TConfig; + nestedValue?: any; }; } = {}; - overrides.custom.names.forEach((key: string) => { - if (overrides.value && overrides.value[key]) { - overridesObj[key] = overrides.value[key]; + overrides.custom.names.forEach((key: string | TConfig) => { + const stringKey = typeof key === 'string' ? key : key.componentName; + if (overrides.value && overrides.value[stringKey]) { + overridesObj[stringKey] = overrides.value[stringKey]; } else { - overridesObj[key] = { + overridesObj[stringKey] = { style: null, }; } + overridesObj[stringKey]['nested'] = + typeof key === 'string' ? undefined : key; }); - const handleChange = ({expanded}: {expanded: (string | number)[]}) => { + const getNewState = (expanded: (string | number)[]) => { const returnValue: any = {...overrides.value}; if (overrides.value) { Object.keys(overrides.value).forEach(key => { @@ -55,7 +63,13 @@ const Overrides: React.FC = ({ }); } expanded.forEach(key => { - if (overridesObj[key].style === null) { + if (overridesObj[key].nestedValue || overridesObj[key].nested) { + if (!returnValue[key]) { + returnValue[key] = { + style: undefined, + }; + } + } else if (overridesObj[key].style === null) { returnValue[key] = { style: getHighlightStyles(isLightTheme, []), }; @@ -66,58 +80,125 @@ const Overrides: React.FC = ({ } returnValue[key]['active'] = true; }); - set(Object.keys(returnValue).length > 0 ? returnValue : undefined); + return returnValue; }; + const handleChange = ({expanded}: {expanded: (string | number)[]}) => { + const newState = getNewState(expanded); + set(Object.keys(newState).length > 0 ? newState : undefined); + }; + + const expanded = Object.keys(overrides.value ? overrides.value : {}) + .map(key => { + const override = overrides.value[key]; + if (override.active) { + return key; + } else { + return null; + } + }) + .filter(val => !!val); + return ( - - Additionally, you can fully customize any part of the {componentName}{' '} - component through the overrides prop ( - - - learn more - - - ). Try to update different style overrides in the explorer - bellow: - - {Object.keys(overridesObj).map(overrideKey => ( - - { + const {nested} = overridesObj[overrideKey]; + return ( + - - ))} + title={ + + {overrideKey} + {nested ? ( + { + e.preventDefault(); + router.push( + '/guides/understanding-overrides#override-nested-components', + ); + }} + overrides={{ + Root: { + style: () => { + return { + marginLeft: '8px', + marginTop: 0, + marginBottom: 0, + }; + }, + }, + }} + closeable={false} + > + nested + + ) : null} + + } + overrides={{ + Content: { + style: { + backgroundColor: 'transparent', + paddingLeft: 0, + paddingRight: 0, + }, + }, + }} + > + {nested ? ( + { + set( + { + ...getNewState(expanded as string[]), + [overrideKey]: { + active: Object.entries(propValue).some( + ([, val]: any) => val.active, + ), + nestedValue: propValue, + }, + }, + 'overrides', + ); + }} + isNested + /> + ) : ( + + )} + + ); + })} ); From 1569ea1eff3cdbef93d189f53cea4fd1b56ba950 Mon Sep 17 00:00:00 2001 From: Vojtech Miksu Date: Thu, 19 Nov 2020 12:15:06 -0800 Subject: [PATCH 2/4] feat(yard): better styles for overrides --- .../components/yard/nested-tooltip.tsx | 60 ++++++++++++++++++ .../components/yard/override.tsx | 9 +-- .../components/yard/overrides.tsx | 61 ++++++++----------- 3 files changed, 91 insertions(+), 39 deletions(-) create mode 100644 documentation-site/components/yard/nested-tooltip.tsx diff --git a/documentation-site/components/yard/nested-tooltip.tsx b/documentation-site/components/yard/nested-tooltip.tsx new file mode 100644 index 0000000000..2828ea16f9 --- /dev/null +++ b/documentation-site/components/yard/nested-tooltip.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import {StatefulTooltip} from 'baseui/tooltip'; +import {useStyletron} from 'baseui'; +import {StyledLink} from 'baseui/link'; +import Link from 'next/link'; + +const NestedTooltip: React.FC<{name: string; nestedName: string}> = ({ + name, + nestedName, +}) => { + const [css, theme] = useStyletron(); + return ( + ( +
+

+ {nestedName} is a nested override of {name}. It means + that {name} component is using another base web component{' '} + {nestedName} as its sub-component. +

+

+ Since {nestedName} has its own set of overrides, you have to target + nested sub-component to change relevant styles. You can utilize this + interactive playground and see the resulting code bellow. +

+

+ + + Learn more about nested overrides. + + +

+
+ )} + returnFocus + showArrow + > + + nested + + + ); +}; + +export default NestedTooltip; diff --git a/documentation-site/components/yard/override.tsx b/documentation-site/components/yard/override.tsx index 0cf447bcaa..101051e8ad 100644 --- a/documentation-site/components/yard/override.tsx +++ b/documentation-site/components/yard/override.tsx @@ -97,11 +97,11 @@ const Override: React.FC = ({ componentConfig, set, }) => { - const [, theme] = useStyletron(); + const [css, theme] = useStyletron(); const isLightTheme = theme.name.startsWith('light-theme'); const code = overridesObj[overrideKey] ? overridesObj[overrideKey].style : ''; return ( - +
{ set({ @@ -110,9 +110,10 @@ const Override: React.FC = ({ }); }} code={code} + small /> ({ @@ -189,7 +190,7 @@ const Override: React.FC = ({ Reset - +
); }; diff --git a/documentation-site/components/yard/overrides.tsx b/documentation-site/components/yard/overrides.tsx index dafb4efa2f..6dd023c7b2 100644 --- a/documentation-site/components/yard/overrides.tsx +++ b/documentation-site/components/yard/overrides.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import {StatelessAccordion as Accordion, Panel} from 'baseui/accordion'; -import {Tag} from 'baseui/tag'; -import {useRouter} from 'next/router'; import {useStyletron} from 'baseui'; import {TConfig} from './types'; +import NestedTooltip from './nested-tooltip'; import Override, {getHighlightStyles} from './override'; @@ -23,7 +22,6 @@ const Overrides: React.FC = ({ isNested, }) => { const [, theme] = useStyletron(); - const router = useRouter(); const isLightTheme = theme.name.startsWith('light-theme'); if ( !overrides || @@ -105,10 +103,30 @@ const Overrides: React.FC = ({ overrides={{ Root: { style: { - marginLeft: isNested ? '16px' : '0px', + marginLeft: isNested ? '8px' : '0px', width: 'auto', }, }, + Header: { + style: { + paddingTop: '8px', + paddingBottom: '8px', + paddingLeft: '8px', + paddingRight: '8px', + fontSize: '16px', + borderBottomWidth: 0, + }, + }, + Content: { + style: { + backgroundColor: 'transparent', + paddingTop: 0, + paddingBottom: 0, + paddingLeft: '8px', + paddingRight: 0, + borderBottomWidth: 0, + }, + }, }} expanded={expanded as string[]} onChange={handleChange} @@ -123,40 +141,13 @@ const Overrides: React.FC = ({ {overrideKey} {nested ? ( - { - e.preventDefault(); - router.push( - '/guides/understanding-overrides#override-nested-components', - ); - }} - overrides={{ - Root: { - style: () => { - return { - marginLeft: '8px', - marginTop: 0, - marginBottom: 0, - }; - }, - }, - }} - closeable={false} - > - nested - + ) : null} } - overrides={{ - Content: { - style: { - backgroundColor: 'transparent', - paddingLeft: 0, - paddingRight: 0, - }, - }, - }} > {nested ? ( Date: Thu, 19 Nov 2020 13:23:39 -0800 Subject: [PATCH 3/4] feat(yard): condensed overrides --- .../components/yard/__tests__/ast.test.ts | 47 ++++++++++++++----- .../components/yard/config/select.ts | 38 +++++++-------- .../components/yard/custom-props.ts | 21 +++++---- .../components/yard/nested-tooltip.tsx | 3 +- .../components/yard/override.tsx | 6 +-- package.json | 2 +- yarn.lock | 30 +++++++++--- 7 files changed, 93 insertions(+), 54 deletions(-) diff --git a/documentation-site/components/yard/__tests__/ast.test.ts b/documentation-site/components/yard/__tests__/ast.test.ts index f38ec7a92c..75bcebdbd9 100644 --- a/documentation-site/components/yard/__tests__/ast.test.ts +++ b/documentation-site/components/yard/__tests__/ast.test.ts @@ -4,24 +4,45 @@ import {toggleOverrideSharedProps} from '../ast'; describe('parseOverrides', () => { test('get overrides active state and value', () => { const overrides = `{ - Root: { - style: ({ $theme }) => { - return { + Root: { + style: ({ $theme }) => ({ outline: \`\${$theme.colors.warning200} solid\`, backgroundColor: $theme.colors.warning200 - }; + }) + }, + Tag: { + props: { + overrides: { + Action: { + style: ({ $theme }) => ({ + outline: \`\${$theme.colors.warning200} dashed\`, + backgroundColor: + $theme.colors.warning200 + }) + } + } + } } - } - }`; - expect(parseOverrides(overrides, ['Root'])).toEqual({ + }`; + expect(parseOverrides(overrides)).toEqual({ Root: { active: true, - style: `({ $theme }) => { - return { - outline: \`\${\$theme.colors.warning200} solid\`, - backgroundColor: $theme.colors.warning200 - }; -}`, + style: `({ $theme }) => ({ + outline: \`\${\$theme.colors.warning200} solid\`, + backgroundColor: $theme.colors.warning200 +})`, + }, + Tag: { + active: true, + nestedValue: { + Action: { + active: true, + style: `({ $theme }) => ({ + outline: \`\${\$theme.colors.warning200} dashed\`, + backgroundColor: $theme.colors.warning200 +})`, + }, + }, }, }); }); diff --git a/documentation-site/components/yard/config/select.ts b/documentation-site/components/yard/config/select.ts index d5efb77032..7ef0fdd2b9 100644 --- a/documentation-site/components/yard/config/select.ts +++ b/documentation-site/components/yard/config/select.ts @@ -347,26 +347,26 @@ const SelectConfig: TConfig = { custom: { names: [ 'Root', - // 'ControlContainer', - // 'Placeholder', - // 'ValueContainer', - // 'SingleValue', + 'ControlContainer', + 'Placeholder', + 'ValueContainer', + 'SingleValue', TagConfig, - // 'InputContainer', - // 'Input', - // 'IconsContainer', - // 'SelectArrow', - // 'ClearIcon', - // 'LoadingIndicator', - // 'SearchIconContainer', - // 'SearchIcon', - // 'Popover', - // 'DropdownContainer', - // 'Dropdown', - // 'DropdownOption', - // 'DropdownListItem', - // 'OptionContent', - // 'StatefulMenu', + 'InputContainer', + 'Input', + 'IconsContainer', + 'SelectArrow', + 'ClearIcon', + 'LoadingIndicator', + 'SearchIconContainer', + 'SearchIcon', + 'Popover', + 'DropdownContainer', + 'Dropdown', + 'DropdownOption', + 'DropdownListItem', + 'OptionContent', + 'StatefulMenu', ], sharedProps: { $clearable: 'clearable', diff --git a/documentation-site/components/yard/custom-props.ts b/documentation-site/components/yard/custom-props.ts index 335adf6ae0..2f0c2668e3 100644 --- a/documentation-site/components/yard/custom-props.ts +++ b/documentation-site/components/yard/custom-props.ts @@ -8,7 +8,7 @@ export type TCustomPropFields = { sharedProps: {[key: string]: string | {type: string; description: string}}; }; -const parseOverrides = (overrides: any, acc: any) => { +const parseOverridesInner = (overrides: any, acc: any) => { overrides.forEach((override: any) => { const overrideName = override.key.name; const overrideProps = override.value.properties; @@ -28,7 +28,7 @@ const parseOverrides = (overrides: any, acc: any) => { nestedValue: {}, active: true, }; - parseOverrides( + parseOverridesInner( subprop.value.properties, acc[overrideName].nestedValue, ); @@ -39,6 +39,14 @@ const parseOverrides = (overrides: any, acc: any) => { }); }; +export const parseOverrides = (code: string) => { + const ast: any = parse(`const foo = ${code};`); + const topOverrides = ast.program.body[0].declarations[0].init.properties; + const returnValue = {}; + parseOverridesInner(topOverrides, returnValue); + return returnValue; +}; + type TGenerateValue = { [key: string]: { active: boolean; @@ -88,13 +96,6 @@ const generateOverrides = (value: TGenerateValue) => { export const customProps = { overrides: { generate: generateOverrides, - parse: (code: string) => { - const ast: any = parse(`const foo = ${code};`); - const topOverrides = ast.program.body[0].declarations[0].init.properties; - const returnValue = {}; - parseOverrides(topOverrides, returnValue); - console.log(returnValue); - return returnValue; - }, + parse: parseOverrides, }, }; diff --git a/documentation-site/components/yard/nested-tooltip.tsx b/documentation-site/components/yard/nested-tooltip.tsx index 2828ea16f9..18c3bb8bc4 100644 --- a/documentation-site/components/yard/nested-tooltip.tsx +++ b/documentation-site/components/yard/nested-tooltip.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import {StatefulTooltip} from 'baseui/tooltip'; import {useStyletron} from 'baseui'; -import {StyledLink} from 'baseui/link'; import Link from 'next/link'; const NestedTooltip: React.FC<{name: string; nestedName: string}> = ({ @@ -45,7 +44,7 @@ const NestedTooltip: React.FC<{name: string; nestedName: string}> = ({ > - formatCode(`({ $theme, ${sharedProps.join(',')} }) => { return ({ + formatCode(`({ $theme, ${sharedProps.join(',')} }) => ({ outline: \`\${${ isLightTheme ? '$theme.colors.warning200' : '$theme.colors.warning600' }} solid\`, backgroundColor: ${ isLightTheme ? '$theme.colors.warning200' : '$theme.colors.warning600' }, - })} + }) `); const getEmptyStyles = (sharedProps: string[]) => - formatCode(`({ $theme, ${sharedProps.join(',')} }) => { return ({})} + formatCode(`({ $theme, ${sharedProps.join(',')} }) => ({}) `); type TProps = { diff --git a/package.json b/package.json index d1a9209826..ae269efff0 100644 --- a/package.json +++ b/package.json @@ -168,7 +168,7 @@ "react-icons": "^3.8.0", "react-markdown": "^4.0.3", "react-twitter-embed": "^2.0.8", - "react-view": "^2.2.2", + "react-view": "^2.3.3", "react-vis": "^1.11.6", "remove-flow-types-loader": "^1.1.0", "semver": "^6.2.0", diff --git a/yarn.lock b/yarn.lock index 8988ca244e..2f126c8380 100644 --- a/yarn.lock +++ b/yarn.lock @@ -190,7 +190,16 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/generator@^7.4.0", "@babel/generator@^7.7.0", "@babel/generator@^7.7.2": +"@babel/generator@^7.12.5": + version "7.12.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de" + integrity sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A== + dependencies: + "@babel/types" "^7.12.5" + jsesc "^2.5.1" + source-map "^0.5.0" + +"@babel/generator@^7.4.0", "@babel/generator@^7.7.2": version "7.7.2" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af" integrity sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ== @@ -2367,6 +2376,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.5": + version "7.12.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.6.tgz#ae0e55ef1cce1fbc881cd26f8234eb3e657edc96" + integrity sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -17703,14 +17721,14 @@ react-uid@^2.3.0: dependencies: tslib "^1.10.0" -react-view@^2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/react-view/-/react-view-2.2.2.tgz#050c8911c3711eb36e63f1b2cadb0b19988e4f4a" - integrity sha512-oBb11/3g64m5K2K4gqq6SMw/JeSq30whb+NbV2VemQWSaApJNft+QnEr6VSOsHyIb3TGsYxzt06X5rRkNFicZQ== +react-view@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/react-view/-/react-view-2.3.3.tgz#66a11f3395ad0de8ef2666406cb9ab4458e51ca6" + integrity sha512-uuItTK5BJLrtdYtRtZoAgqj31ghfPL4Zr9FFs3YKDnX6fsGmDvOkSlzj8sGckk20YlIhKcvIlWKps5wARMQkVg== dependencies: "@babel/code-frame" "^7.5.5" "@babel/core" "^7.7.0" - "@babel/generator" "^7.7.0" + "@babel/generator" "^7.12.5" "@babel/preset-react" "^7.7.0" "@babel/template" "^7.7.0" "@babel/traverse" "^7.7.0" From fff3e8b53bd77809fad636a2f0265eda51e86736 Mon Sep 17 00:00:00 2001 From: Vojtech Miksu Date: Thu, 19 Nov 2020 13:27:12 -0800 Subject: [PATCH 4/4] feat(yard): fix tooltip link --- documentation-site/components/yard/nested-tooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation-site/components/yard/nested-tooltip.tsx b/documentation-site/components/yard/nested-tooltip.tsx index 18c3bb8bc4..20dadf7504 100644 --- a/documentation-site/components/yard/nested-tooltip.tsx +++ b/documentation-site/components/yard/nested-tooltip.tsx @@ -28,10 +28,10 @@ const NestedTooltip: React.FC<{name: string; nestedName: string}> = ({ interactive playground and see the resulting code bellow.

- + Learn more about nested overrides.