From e5be1efb40cb2786f5e2a8d0a5af92b852519c12 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 09:52:52 -0700 Subject: [PATCH 1/8] export to codesandbox opens new page --- .../theme-designer/src/components/ExportButton/ExportLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx index 65944269fad35..1ca26b5dcdfa7 100644 --- a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx +++ b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx @@ -294,7 +294,7 @@ export const ExportLink: React.FC = props => { return (
- + Preview theme in CodeSandbox
From 6f4c32825d6a316e8bc72c675cd43c05001b086b Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 10:03:58 -0700 Subject: [PATCH 2/8] update defaults --- .../AccessibilityChecker/AccessibilityChecker.stories.tsx | 4 ++-- .../src/components/ColorTokens/ColorTokens.stories.tsx | 4 +--- .../src/components/Content/Content.stories.tsx | 5 ++--- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/AccessibilityChecker/AccessibilityChecker.stories.tsx b/packages/react-components/theme-designer/src/components/AccessibilityChecker/AccessibilityChecker.stories.tsx index 9c5f3811a4788..02ffd923c7d4a 100644 --- a/packages/react-components/theme-designer/src/components/AccessibilityChecker/AccessibilityChecker.stories.tsx +++ b/packages/react-components/theme-designer/src/components/AccessibilityChecker/AccessibilityChecker.stories.tsx @@ -1,9 +1,9 @@ import { AccessibilityChecker } from './AccessibilityChecker'; import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette'; -import { createDarkTheme } from '@fluentui/react-components'; +import { createLightTheme } from '@fluentui/react-components'; export default { component: AccessibilityChecker }; const brand = getBrandTokensFromPalette('#006bc7'); -const lightTheme = createDarkTheme(brand); +const lightTheme = createLightTheme(brand); export const Default = { args: { theme: lightTheme } }; diff --git a/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.stories.tsx b/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.stories.tsx index 11263348a9684..1c5c902ae910d 100644 --- a/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.stories.tsx +++ b/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.stories.tsx @@ -1,9 +1,7 @@ import { ColorTokens } from './ColorTokens'; import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette'; -import { createDarkTheme } from '@fluentui/react-components'; export default { component: ColorTokens }; const brand = getBrandTokensFromPalette('#006bc7'); -const lightTheme = createDarkTheme(brand); -export const Default = { args: { theme: lightTheme } }; +export const Default = { args: { brand: brand, isDark: false } }; diff --git a/packages/react-components/theme-designer/src/components/Content/Content.stories.tsx b/packages/react-components/theme-designer/src/components/Content/Content.stories.tsx index 6733f60a6eb37..91efeda4bb426 100644 --- a/packages/react-components/theme-designer/src/components/Content/Content.stories.tsx +++ b/packages/react-components/theme-designer/src/components/Content/Content.stories.tsx @@ -1,10 +1,9 @@ import { Content } from './Content'; import { getBrandTokensFromPalette } from '../../utils/getBrandTokensFromPalette'; -import { createLightTheme, createDarkTheme } from '@fluentui/react-components'; +import { createLightTheme } from '@fluentui/react-components'; export default { component: Content }; const brand = getBrandTokensFromPalette('#006BC7'); const lightTheme = createLightTheme(brand); -const darkTheme = createDarkTheme(brand); -export const Default = { args: { brand: brand, darkTheme: darkTheme, lightTheme: lightTheme } }; +export const Default = { args: { brand: brand, theme: lightTheme, isDark: false } }; From ea173f29fcfcc746bc9b9a6a044a0af396ce38d8 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 11:50:48 -0700 Subject: [PATCH 3/8] extracting string constants from render --- .../components/ExportButton/ExportLink.tsx | 547 +++++++++--------- 1 file changed, 279 insertions(+), 268 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx index 1ca26b5dcdfa7..744eb2c444d57 100644 --- a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx +++ b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link, BrandVariants, Theme } from '@fluentui/react-components'; +import { Link, BrandVariants, Theme, createDarkTheme, createLightTheme } from '@fluentui/react-components'; import { getParameters } from 'codesandbox-import-utils/lib/api/define'; import * as dedent from 'dedent'; @@ -9,288 +9,299 @@ export interface ExportLinkProps { overrides: Partial; } -export const ExportLink: React.FC = props => { - const { brand, isDark, overrides } = props; - const defaultFileToPreview = encodeURIComponent('/index.tsx'); - const codeSandboxParameters = getParameters({ - files: { - 'example.tsx': { - isBinary: false, - content: dedent` - import * as React from 'react'; - import { makeStyles, makeStaticStyles, mergeClasses, shorthands } from '@griffel/react'; - import { - tokens, - Body1, - Title3, - TabList, - Tab, - Input, - Button, - Caption1, - Menu, - MenuTrigger, - MenuList, - MenuButton, - MenuItemCheckbox, - MenuPopover, - Slider, - Badge, - Switch, - Radio, - RadioGroup, - Checkbox, - Avatar, - Theme, - } from '@fluentui/react-components'; - import { - SearchRegular, - bundleIcon, - CutRegular, - CutFilled, - ClipboardPasteRegular, - ClipboardPasteFilled, - EditRegular, - EditFilled, - ChevronRightRegular, - MeetNowRegular, - MeetNowFilled, - CalendarLtrFilled, - CalendarLtrRegular, - } from '@fluentui/react-icons'; +const content = dedent` +import * as React from 'react'; +import { makeStyles, makeStaticStyles, mergeClasses, shorthands } from '@griffel/react'; +import { + tokens, + Body1, + Title3, + TabList, + Tab, + Input, + Button, + Caption1, + Menu, + MenuTrigger, + MenuList, + MenuButton, + MenuItemCheckbox, + MenuPopover, + Slider, + Badge, + Switch, + Radio, + RadioGroup, + Checkbox, + Avatar, + Theme, +} from '@fluentui/react-components'; +import { + SearchRegular, + bundleIcon, + CutRegular, + CutFilled, + ClipboardPasteRegular, + ClipboardPasteFilled, + EditRegular, + EditFilled, + ChevronRightRegular, + MeetNowRegular, + MeetNowFilled, + CalendarLtrFilled, + CalendarLtrRegular, +} from '@fluentui/react-icons'; - export interface ContentProps { - className?: string; - theme: Theme; - } +export interface ContentProps { + className?: string; + theme: Theme; +} - const useStaticStyles = makeStaticStyles({ - body: { - position: "fixed", - margin: "0px", - top: "0px", - left: "0px", - height: "100vh" - } - }); +const useStaticStyles = makeStaticStyles({ + body: { + position: "fixed", + margin: "0px", + top: "0px", + left: "0px", + height: "100vh" + } +}); - const useStyles = makeStyles({ - root: { - height: "100vh", - display: 'grid', - alignItems: 'start', - justifyContent: 'center', - gridTemplateColumns: 'repeat(3, 1fr)', - gridTemplateRows: 'auto', - gridColumnGap: tokens.spacingHorizontalXXXL, - }, - col1: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'left', - flexDirection: 'column', - flexGrow: 1, - ...shorthands.gap(tokens.spacingVerticalL), - }, - col2: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - ...shorthands.gap(tokens.spacingVerticalL), - }, - col3: { - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridTemplateRows: 'repeat(4, auto)', - gridRowGap: tokens.spacingVerticalS, - gridColumnGap: tokens.spacingHorizontalS, - justifyContent: 'center', - alignItems: 'center', - }, - twoCol: { - gridColumnStart: 1, - gridColumnEnd: 3, - }, - icons: { - display: 'grid', - gridTemplateColumns: 'auto auto', - gridTemplateRows: 'auto auto', - gridRowGap: tokens.spacingVerticalS, - gridColumnGap: tokens.spacingHorizontalS, - justifyContent: 'center', - }, - twoRow: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, - }); +const useStyles = makeStyles({ + root: { + height: "100vh", + display: 'grid', + alignItems: 'start', + justifyContent: 'center', + gridTemplateColumns: 'repeat(3, 1fr)', + gridTemplateRows: 'auto', + gridColumnGap: tokens.spacingHorizontalXXXL, + }, + col1: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'left', + flexDirection: 'column', + flexGrow: 1, + ...shorthands.gap(tokens.spacingVerticalL), + }, + col2: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + ...shorthands.gap(tokens.spacingVerticalL), + }, + col3: { + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'repeat(4, auto)', + gridRowGap: tokens.spacingVerticalS, + gridColumnGap: tokens.spacingHorizontalS, + justifyContent: 'center', + alignItems: 'center', + }, + twoCol: { + gridColumnStart: 1, + gridColumnEnd: 3, + }, + icons: { + display: 'grid', + gridTemplateColumns: 'auto auto', + gridTemplateRows: 'auto auto', + gridRowGap: tokens.spacingVerticalS, + gridColumnGap: tokens.spacingHorizontalS, + justifyContent: 'center', + }, + twoRow: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, +}); - export const Column1 = () => { - const styles = useStyles(); - useStaticStyles(); - return ( -
- Make an impression - - Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate - information to people inside or outside your team. Share your ideas, results, and more in this - visually compelling format. - - -
- ); - }; +export const Column1 = () => { + const styles = useStyles(); + useStaticStyles(); + return ( +
+ Make an impression + + Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate + information to people inside or outside your team. Share your ideas, results, and more in this + visually compelling format. + + +
+ ); +}; - export const DemoMenu = () => { - const CutIcon = bundleIcon(CutFilled, CutRegular); - const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular); - const EditIcon = bundleIcon(EditFilled, EditRegular); - return ( - - - Select - - - - } name="edit" value="cut"> - Cut - - } name="edit" value="paste"> - Paste - - } name="edit" value="edit"> - Edit - - - - - ); - }; +export const DemoMenu = () => { + const CutIcon = bundleIcon(CutFilled, CutRegular); + const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular); + const EditIcon = bundleIcon(EditFilled, EditRegular); + return ( + + + Select + + + + } name="edit" value="cut"> + Cut + + } name="edit" value="paste"> + Paste + + } name="edit" value="edit"> + Edit + + + + + ); +}; - export const Column2 = () => { - const styles = useStyles(); - return ( -
- - Home - Pages - Documents - - } size="small" /> - } - /> - -
- ); - }; +export const Column2 = () => { + const styles = useStyles(); + return ( +
+ + Home + Pages + Documents + + } size="small" /> + } + /> + +
+ ); +}; - export const DemoIcons = () => { - const styles = useStyles(); - const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular); - const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular); - return ( -
- } /> - } /> - } /> - } /> -
- ); - }; +export const DemoIcons = () => { + const styles = useStyles(); + const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular); + const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular); + return ( +
+ } /> + } /> + } /> + } /> +
+ ); +}; - export const Column3 = () => { - const styles = useStyles(); - return ( -
- - - - -
- - -
-
- - -
-
- - - - -
-
- ); - }; +export const Column3 = () => { + const styles = useStyles(); + return ( +
+ + + + +
+ + +
+
+ + +
+
+ + + + +
+
+ ); +}; - export const Example: React.FC = props => { - const styles = useStyles(); - return ( -
- Examples -
- - - -
-
- ); - }; - `, - }, - 'index.html': { - isBinary: false, - content: '
', - }, - 'index.tsx': { - isBinary: false, - content: dedent` - import * as ReactDOM from 'react-dom'; - import { FluentProvider, ${ - isDark ? 'createDarkTheme' : 'createLightTheme' - } } from '@fluentui/react-components'; - import type { BrandVariants, Theme } from '@fluentui/react-theme'; - import { Example } from './example'; +export const Example: React.FC = props => { + const styles = useStyles(); + return ( +
+ Examples +
+ + + +
+
+ ); +}; +`; - const brand: BrandVariants = ${JSON.stringify(brand)}; +const indexHtmlContent = '
'; - const overrides: Partial = ${JSON.stringify(overrides)}; +const createIndexContent = (brand: BrandVariants, overrides: Theme, isDark: boolean) => dedent` +import * as ReactDOM from 'react-dom'; +import { FluentProvider, ${isDark ? 'createDarkTheme' : 'createLightTheme'} } from '@fluentui/react-components'; +import type { BrandVariants, Theme } from '@fluentui/react-theme'; +import { Example } from './example'; - const theme: Theme = { ...${isDark ? 'createDarkTheme' : 'createLightTheme'}(brand), ...overrides }; +const brand: BrandVariants = ${JSON.stringify(brand)}; - ReactDOM.render( - - - , - document.getElementById('root'), - ); - `, - }, - 'package.json': { - isBinary: false, - content: dedent` - {"dependencies":{"@fluentui/react-components":"rc","react":"^17","react-dom":"^17","react-scripts":"latest"}} - `, +const overrides: Partial = ${JSON.stringify(overrides)}; + +const theme: Theme = { ...${isDark ? 'createDarkTheme' : 'createLightTheme'}(brand), ...overrides }; + +ReactDOM.render( + + + , + document.getElementById('root'), +); +`; + +const packageContent = dedent` +{"dependencies":{"@fluentui/react-components":"rc","react":"^17","react-dom":"^17","react-scripts":"latest"}} +`; + +const defaultFileToPreview = encodeURIComponent('/index.tsx'); + +export const ExportLink: React.FC = props => { + const { brand, isDark, overrides } = props; + + const link = React.useMemo(() => { + const theme = isDark ? createDarkTheme(brand) : createLightTheme(brand); + const codeSandboxParameters = getParameters({ + files: { + 'example.tsx': { + isBinary: false, + content: content, + }, + 'index.html': { + isBinary: false, + content: indexHtmlContent, + }, + 'index.tsx': { + isBinary: false, + content: createIndexContent(brand, { ...theme, ...overrides }, isDark), + }, + 'package.json': { + isBinary: false, + content: packageContent, + }, }, - }, - }); + }); - const link = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${codeSandboxParameters}&query=file%3D${defaultFileToPreview}`; + return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${codeSandboxParameters}&query=file%3D${defaultFileToPreview}`; + }, [brand, overrides, isDark]); return (
From e32990c4428f673773a9da266b85e35cde5aa30e Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 15:08:44 -0700 Subject: [PATCH 4/8] add debouncing to keycolor --- .../theme-designer/src/components/Sidebar/EditTab.tsx | 10 +++++++++- .../theme-designer/src/utils/useDebounce.ts | 3 ++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx index a5675e29d9901..f9f7611f4cd89 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@griffel/react'; import { Label, Input, Switch, Slider, tokens } from '@fluentui/react-components'; +import { useDebounce } from '../../utils/useDebounce'; import type { CustomAttributes, DispatchTheme } from '../../useThemeDesignerReducer'; @@ -60,11 +61,18 @@ export const EditTab: React.FC = props => { const [form, dispatchForm] = React.useReducer(formReducer, initialForm); + const [lastForm, setLastForm] = React.useState(initialForm); + + const debouncedForm = useDebounce(lastForm, 10); + React.useEffect(() => { + dispatchForm({ attributes: debouncedForm, type: 'keyColor' }); + }, [debouncedForm]); + const toggleTheme = () => { dispatchForm({ attributes: { ...form, isDark: !form.isDark }, type: 'isDark' }); }; const handleOnChange = (e: React.ChangeEvent) => { - dispatchForm({ attributes: { ...form, keyColor: e.target.value }, type: 'keyColor' }); + setLastForm({ ...form, keyColor: e.target.value }); }; const handleHueTorsionChange = (e: React.ChangeEvent) => { dispatchForm({ attributes: { ...form, hueTorsion: parseInt(e.target.value, 10) / 10 }, type: 'hueTorsion' }); diff --git a/packages/react-components/theme-designer/src/utils/useDebounce.ts b/packages/react-components/theme-designer/src/utils/useDebounce.ts index f7f054dcc717c..ce9b2f0a745ba 100644 --- a/packages/react-components/theme-designer/src/utils/useDebounce.ts +++ b/packages/react-components/theme-designer/src/utils/useDebounce.ts @@ -1,6 +1,7 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useState } from 'react'; -export function useDebounce(value: string, delay: number) { +export function useDebounce(value: any, delay: number) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = document.defaultView?.setTimeout(() => { From 00a113805671689051e47b10712647df483d2dcb Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 15:16:43 -0700 Subject: [PATCH 5/8] extend debounce to all entries in the form --- .../src/components/Sidebar/EditTab.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx index f9f7611f4cd89..07196a5e90832 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx @@ -53,7 +53,7 @@ export const EditTab: React.FC = props => { const initialForm: CustomAttributes = formState; - const formReducer = (state: CustomAttributes, action: { attributes: CustomAttributes; type: string }) => { + const formReducer = (state: CustomAttributes, action: { attributes: CustomAttributes }) => { setFormState(action.attributes); dispatchState({ ...form, type: 'Custom', customAttributes: action.attributes, overrides: {} }); return action.attributes; @@ -62,26 +62,25 @@ export const EditTab: React.FC = props => { const [form, dispatchForm] = React.useReducer(formReducer, initialForm); const [lastForm, setLastForm] = React.useState(initialForm); - const debouncedForm = useDebounce(lastForm, 10); React.useEffect(() => { - dispatchForm({ attributes: debouncedForm, type: 'keyColor' }); + dispatchForm({ attributes: debouncedForm }); }, [debouncedForm]); const toggleTheme = () => { - dispatchForm({ attributes: { ...form, isDark: !form.isDark }, type: 'isDark' }); + setLastForm({ ...form, ...form, isDark: !form.isDark }); }; const handleOnChange = (e: React.ChangeEvent) => { setLastForm({ ...form, keyColor: e.target.value }); }; const handleHueTorsionChange = (e: React.ChangeEvent) => { - dispatchForm({ attributes: { ...form, hueTorsion: parseInt(e.target.value, 10) / 10 }, type: 'hueTorsion' }); + setLastForm({ ...form, hueTorsion: parseInt(e.target.value, 10) / 10 }); }; const handleLightCpChange = (e: React.ChangeEvent) => { - dispatchForm({ attributes: { ...form, lightCp: parseInt(e.target.value, 10) / 100 }, type: 'lightCp' }); + setLastForm({ ...form, lightCp: parseInt(e.target.value, 10) / 100 }); }; const handleDarkCpChange = (e: React.ChangeEvent) => { - dispatchForm({ attributes: { ...form, darkCp: parseInt(e.target.value, 10) / 100 }, type: 'darkCp' }); + setLastForm({ ...form, darkCp: parseInt(e.target.value, 10) / 100 }); }; return ( From 60be983bb5aaaf52f5f12de15f8271c6058a4f35 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 15:46:45 -0700 Subject: [PATCH 6/8] remove slider value --- .../src/components/Sidebar/EditTab.tsx | 33 ++++--------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx index 07196a5e90832..663b629f984df 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx @@ -74,13 +74,13 @@ export const EditTab: React.FC = props => { setLastForm({ ...form, keyColor: e.target.value }); }; const handleHueTorsionChange = (e: React.ChangeEvent) => { - setLastForm({ ...form, hueTorsion: parseInt(e.target.value, 10) / 10 }); + setLastForm({ ...form, hueTorsion: parseInt(e.target.value, 10) }); }; const handleLightCpChange = (e: React.ChangeEvent) => { - setLastForm({ ...form, lightCp: parseInt(e.target.value, 10) / 100 }); + setLastForm({ ...form, lightCp: parseInt(e.target.value, 10) }); }; const handleDarkCpChange = (e: React.ChangeEvent) => { - setLastForm({ ...form, darkCp: parseInt(e.target.value, 10) / 100 }); + setLastForm({ ...form, darkCp: parseInt(e.target.value, 10) }); }; return ( @@ -102,32 +102,11 @@ export const EditTab: React.FC = props => {
- + - + - + ); From 164c10b7c9296d2b62b61a9285e2dca7d5fe1e27 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 27 Jun 2022 15:58:42 -0700 Subject: [PATCH 7/8] Update ExportLink.tsx --- .../src/components/ExportButton/ExportLink.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx index 744eb2c444d57..67b09f456f2be 100644 --- a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx +++ b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link, BrandVariants, Theme, createDarkTheme, createLightTheme } from '@fluentui/react-components'; +import { Link, BrandVariants, Theme } from '@fluentui/react-components'; import { getParameters } from 'codesandbox-import-utils/lib/api/define'; import * as dedent from 'dedent'; @@ -248,7 +248,7 @@ export const Example: React.FC = props => { const indexHtmlContent = '
'; -const createIndexContent = (brand: BrandVariants, overrides: Theme, isDark: boolean) => dedent` +const createIndexContent = (brand: BrandVariants, overrides: Partial, isDark: boolean) => dedent` import * as ReactDOM from 'react-dom'; import { FluentProvider, ${isDark ? 'createDarkTheme' : 'createLightTheme'} } from '@fluentui/react-components'; import type { BrandVariants, Theme } from '@fluentui/react-theme'; @@ -278,7 +278,6 @@ export const ExportLink: React.FC = props => { const { brand, isDark, overrides } = props; const link = React.useMemo(() => { - const theme = isDark ? createDarkTheme(brand) : createLightTheme(brand); const codeSandboxParameters = getParameters({ files: { 'example.tsx': { @@ -291,7 +290,7 @@ export const ExportLink: React.FC = props => { }, 'index.tsx': { isBinary: false, - content: createIndexContent(brand, { ...theme, ...overrides }, isDark), + content: createIndexContent(brand, overrides, isDark), }, 'package.json': { isBinary: false, From 4b0a816c5e366390c621080197b8368e9cb8eea1 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Tue, 28 Jun 2022 09:49:14 -0700 Subject: [PATCH 8/8] reorganize exportlink --- .../components/ExportButton/ExportLink.tsx | 502 +++++++++--------- 1 file changed, 251 insertions(+), 251 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx index 67b09f456f2be..2e62472d5694e 100644 --- a/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx +++ b/packages/react-components/theme-designer/src/components/ExportButton/ExportLink.tsx @@ -9,273 +9,273 @@ export interface ExportLinkProps { overrides: Partial; } -const content = dedent` -import * as React from 'react'; -import { makeStyles, makeStaticStyles, mergeClasses, shorthands } from '@griffel/react'; -import { - tokens, - Body1, - Title3, - TabList, - Tab, - Input, - Button, - Caption1, - Menu, - MenuTrigger, - MenuList, - MenuButton, - MenuItemCheckbox, - MenuPopover, - Slider, - Badge, - Switch, - Radio, - RadioGroup, - Checkbox, - Avatar, - Theme, -} from '@fluentui/react-components'; -import { - SearchRegular, - bundleIcon, - CutRegular, - CutFilled, - ClipboardPasteRegular, - ClipboardPasteFilled, - EditRegular, - EditFilled, - ChevronRightRegular, - MeetNowRegular, - MeetNowFilled, - CalendarLtrFilled, - CalendarLtrRegular, -} from '@fluentui/react-icons'; +const defaultFileToPreview = encodeURIComponent('/index.tsx'); -export interface ContentProps { - className?: string; - theme: Theme; -} +export const ExportLink: React.FC = props => { + const { brand, isDark, overrides } = props; -const useStaticStyles = makeStaticStyles({ - body: { - position: "fixed", - margin: "0px", - top: "0px", - left: "0px", - height: "100vh" - } -}); + const content = dedent` + import * as React from 'react'; + import { makeStyles, makeStaticStyles, mergeClasses, shorthands } from '@griffel/react'; + import { + tokens, + Body1, + Title3, + TabList, + Tab, + Input, + Button, + Caption1, + Menu, + MenuTrigger, + MenuList, + MenuButton, + MenuItemCheckbox, + MenuPopover, + Slider, + Badge, + Switch, + Radio, + RadioGroup, + Checkbox, + Avatar, + Theme, + } from '@fluentui/react-components'; + import { + SearchRegular, + bundleIcon, + CutRegular, + CutFilled, + ClipboardPasteRegular, + ClipboardPasteFilled, + EditRegular, + EditFilled, + ChevronRightRegular, + MeetNowRegular, + MeetNowFilled, + CalendarLtrFilled, + CalendarLtrRegular, + } from '@fluentui/react-icons'; -const useStyles = makeStyles({ - root: { - height: "100vh", - display: 'grid', - alignItems: 'start', - justifyContent: 'center', - gridTemplateColumns: 'repeat(3, 1fr)', - gridTemplateRows: 'auto', - gridColumnGap: tokens.spacingHorizontalXXXL, - }, - col1: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'left', - flexDirection: 'column', - flexGrow: 1, - ...shorthands.gap(tokens.spacingVerticalL), - }, - col2: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - ...shorthands.gap(tokens.spacingVerticalL), - }, - col3: { - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridTemplateRows: 'repeat(4, auto)', - gridRowGap: tokens.spacingVerticalS, - gridColumnGap: tokens.spacingHorizontalS, - justifyContent: 'center', - alignItems: 'center', - }, - twoCol: { - gridColumnStart: 1, - gridColumnEnd: 3, - }, - icons: { - display: 'grid', - gridTemplateColumns: 'auto auto', - gridTemplateRows: 'auto auto', - gridRowGap: tokens.spacingVerticalS, - gridColumnGap: tokens.spacingHorizontalS, - justifyContent: 'center', - }, - twoRow: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, -}); + export interface ContentProps { + className?: string; + theme: Theme; + } -export const Column1 = () => { - const styles = useStyles(); - useStaticStyles(); - return ( -
- Make an impression - - Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate - information to people inside or outside your team. Share your ideas, results, and more in this - visually compelling format. - - -
- ); -}; + const useStaticStyles = makeStaticStyles({ + body: { + position: "fixed", + margin: "0px", + top: "0px", + left: "0px", + height: "100vh" + } + }); -export const DemoMenu = () => { - const CutIcon = bundleIcon(CutFilled, CutRegular); - const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular); - const EditIcon = bundleIcon(EditFilled, EditRegular); - return ( - - - Select - - - - } name="edit" value="cut"> - Cut - - } name="edit" value="paste"> - Paste - - } name="edit" value="edit"> - Edit - - - - - ); -}; + const useStyles = makeStyles({ + root: { + height: "100vh", + display: 'grid', + alignItems: 'start', + justifyContent: 'center', + gridTemplateColumns: 'repeat(3, 1fr)', + gridTemplateRows: 'auto', + gridColumnGap: tokens.spacingHorizontalXXXL, + }, + col1: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'left', + flexDirection: 'column', + flexGrow: 1, + ...shorthands.gap(tokens.spacingVerticalL), + }, + col2: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + ...shorthands.gap(tokens.spacingVerticalL), + }, + col3: { + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'repeat(4, auto)', + gridRowGap: tokens.spacingVerticalS, + gridColumnGap: tokens.spacingHorizontalS, + justifyContent: 'center', + alignItems: 'center', + }, + twoCol: { + gridColumnStart: 1, + gridColumnEnd: 3, + }, + icons: { + display: 'grid', + gridTemplateColumns: 'auto auto', + gridTemplateRows: 'auto auto', + gridRowGap: tokens.spacingVerticalS, + gridColumnGap: tokens.spacingHorizontalS, + justifyContent: 'center', + }, + twoRow: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + }); -export const Column2 = () => { - const styles = useStyles(); - return ( -
- - Home - Pages - Documents - - } size="small" /> - } - /> - -
- ); -}; + export const Column1 = () => { + const styles = useStyles(); + useStaticStyles(); + return ( +
+ Make an impression + + Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate + information to people inside or outside your team. Share your ideas, results, and more in this + visually compelling format. + + +
+ ); + }; -export const DemoIcons = () => { - const styles = useStyles(); - const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular); - const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular); - return ( -
- } /> - } /> - } /> - } /> -
- ); -}; + export const DemoMenu = () => { + const CutIcon = bundleIcon(CutFilled, CutRegular); + const PasteIcon = bundleIcon(ClipboardPasteFilled, ClipboardPasteRegular); + const EditIcon = bundleIcon(EditFilled, EditRegular); + return ( + + + Select + + + + } name="edit" value="cut"> + Cut + + } name="edit" value="paste"> + Paste + + } name="edit" value="edit"> + Edit + + + + + ); + }; -export const Column3 = () => { - const styles = useStyles(); - return ( -
- - - - -
- - -
-
- - -
-
- - - - -
-
- ); -}; + export const Column2 = () => { + const styles = useStyles(); + return ( +
+ + Home + Pages + Documents + + } size="small" /> + } + /> + +
+ ); + }; -export const Example: React.FC = props => { - const styles = useStyles(); - return ( -
- Examples -
- - - -
-
- ); -}; -`; + export const DemoIcons = () => { + const styles = useStyles(); + const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular); + const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular); + return ( +
+ } /> + } /> + } /> + } /> +
+ ); + }; -const indexHtmlContent = '
'; + export const Column3 = () => { + const styles = useStyles(); + return ( +
+ + + + +
+ + +
+
+ + +
+
+ + + + +
+
+ ); + }; -const createIndexContent = (brand: BrandVariants, overrides: Partial, isDark: boolean) => dedent` -import * as ReactDOM from 'react-dom'; -import { FluentProvider, ${isDark ? 'createDarkTheme' : 'createLightTheme'} } from '@fluentui/react-components'; -import type { BrandVariants, Theme } from '@fluentui/react-theme'; -import { Example } from './example'; + export const Example: React.FC = props => { + const styles = useStyles(); + return ( +
+ Examples +
+ + + +
+
+ ); + }; + `; -const brand: BrandVariants = ${JSON.stringify(brand)}; + const indexHtmlContent = '
'; -const overrides: Partial = ${JSON.stringify(overrides)}; + const createIndexContent = dedent` + import * as ReactDOM from 'react-dom'; + import { FluentProvider, ${isDark ? 'createDarkTheme' : 'createLightTheme'} } from '@fluentui/react-components'; + import type { BrandVariants, Theme } from '@fluentui/react-theme'; + import { Example } from './example'; -const theme: Theme = { ...${isDark ? 'createDarkTheme' : 'createLightTheme'}(brand), ...overrides }; + const brand: BrandVariants = ${JSON.stringify(brand)}; -ReactDOM.render( - - - , - document.getElementById('root'), -); -`; + const overrides: Partial = ${JSON.stringify(overrides)}; -const packageContent = dedent` -{"dependencies":{"@fluentui/react-components":"rc","react":"^17","react-dom":"^17","react-scripts":"latest"}} -`; + const theme: Theme = { ...${isDark ? 'createDarkTheme' : 'createLightTheme'}(brand), ...overrides }; -const defaultFileToPreview = encodeURIComponent('/index.tsx'); + ReactDOM.render( + + + , + document.getElementById('root'), + ); + `; -export const ExportLink: React.FC = props => { - const { brand, isDark, overrides } = props; + const packageContent = dedent` + {"dependencies":{"@fluentui/react-components":"rc","react":"^17","react-dom":"^17","react-scripts":"latest"}} + `; const link = React.useMemo(() => { const codeSandboxParameters = getParameters({ @@ -290,7 +290,7 @@ export const ExportLink: React.FC = props => { }, 'index.tsx': { isBinary: false, - content: createIndexContent(brand, overrides, isDark), + content: createIndexContent, }, 'package.json': { isBinary: false, @@ -300,7 +300,7 @@ export const ExportLink: React.FC = props => { }); return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${codeSandboxParameters}&query=file%3D${defaultFileToPreview}`; - }, [brand, overrides, isDark]); + }, [content, createIndexContent, packageContent]); return (