Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: migrate theme builder to docs #2987

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
4d37a76
refactor(theme-builder): move theme builder dir to docs
ramenhog Nov 21, 2024
d3f0836
refactor(theme-builder): styles to use docs tailwind
ramenhog Nov 21, 2024
15c1395
refactor: remove old demo app
ramenhog Nov 21, 2024
819e55f
refactor: remove legacy deps from demo app
ramenhog Nov 21, 2024
772d86d
refactor: remove demo overrides from eslint
ramenhog Nov 21, 2024
1a9195a
refactor(theme-builder): use prism-react-renderer instead of react-sy…
ramenhog Nov 21, 2024
0b235c2
refactor: add theme builder to nav and remove demos from linter
ramenhog Nov 21, 2024
4541fc4
Feat: add theme builder base and box plot chart controls (#2989)
ramenhog Nov 26, 2024
d5f2b06
feat: add color scale overrides and final polish (#2990)
ramenhog Dec 2, 2024
fd196c9
Feat: theme builder palette fixes (#2992)
ramenhog Dec 2, 2024
52470ac
Feat: theme builder new UI (#3000)
ramenhog Dec 6, 2024
5161901
Feat: theme builder responsiveness (#3004)
ramenhog Dec 12, 2024
2a440af
Feat: theme builder custom colorscale overrides (#3005)
ramenhog Dec 12, 2024
3affd3d
Feat: theme builder preview settings (#3007)
ramenhog Dec 13, 2024
a99c340
Feat: theme builder refactor axis panel (#3010)
ramenhog Dec 16, 2024
6cd78f5
Feat: theme builder export panel updates (#3012)
ramenhog Dec 18, 2024
e9bb7fa
feat(theme-builder): allow users to choose which options to include i…
ramenhog Dec 19, 2024
4a0ea3e
Feat: theme builder default slider (#3020)
ramenhog Dec 20, 2024
a92c32b
Merge branch 'main' into feat/theme-builder-docs-migration
ramenhog Jan 6, 2025
8d90c9a
fix: lint error
ramenhog Jan 6, 2025
e40c77b
fix: lint error
ramenhog Jan 6, 2025
8e4f9ee
Refactor examples so we can support multiple per chart type (#3017)
carbonrobot Jan 7, 2025
945e97e
fix: lint errors
ramenhog Jan 7, 2025
03b9a51
feat(theme-builder): simplify color picker (#3028)
ramenhog Jan 10, 2025
1078fdc
feat(theme-builder): improve toggle accessibility (#3029)
ramenhog Jan 10, 2025
b81e09c
feat(theme-builder): keep config in local storage (#3032)
ramenhog Jan 13, 2025
7033602
feat(theme-builder): default chart + axis type (#3035)
ramenhog Jan 13, 2025
dc1c31e
feat(theme-builder): code editor (#3037)
ramenhog Jan 16, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: add theme builder to nav and remove demos from linter
ramenhog committed Nov 21, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 0b235c2c0d33df5e30a74e02b2f208cf7722a97a
6 changes: 2 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -272,12 +272,11 @@
]
},
"lint:root": {
"command": "eslint --color *.js scripts config demo stories test website",
"command": "eslint --color *.js scripts config stories test website",
"files": [
"*.js",
"scripts",
"config",
"demo",
"stories",
"test",
"website",
@@ -289,12 +288,11 @@
]
},
"lint:root:fix": {
"command": "eslint --color --fix *.js scripts config demo stories test website",
"command": "eslint --color --fix *.js scripts config stories test website",
"files": [
"*.js",
"scripts",
"config",
"demo",
"stories",
"test",
"website",
5 changes: 5 additions & 0 deletions website/docusaurus.config.ts
Original file line number Diff line number Diff line change
@@ -147,6 +147,11 @@ const config: Config = {
position: "left",
label: "DOCS",
},
{
to: "/themes",
label: "THEMES",
position: "left",
},
{
href: "https://github.com/FormidableLabs/victory",
"aria-label": "GitHub Repository",
287 changes: 148 additions & 139 deletions website/src/pages/themes/index.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ import Button from "./_components/button";
import ConfigMapper from "./_components/config-mapper";
import { setNestedConfigValue } from "./_utils";
import optionsConfig from "./_config";
import Layout from "@theme/Layout";

export type ThemeOption = {
name: string;
@@ -125,154 +126,162 @@ const ThemeBuilder = () => {
};

return (
<div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
<aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
<div className="grow overflow-y-auto p-4 pb-[100px]">
<h2 className="mb-0 text-lg font-bold">Customize Your Theme</h2>
<p className="text-sm mb-4 text-grayscale-400">
Select a theme to begin customizing.
</p>
<Select
id="theme-select"
value={baseTheme?.name || ""}
onChange={handleThemeSelect}
options={themeOptions}
label="Base Theme"
/>
{customThemeConfig && (
<section>
<h2 className="text-lg font-bold my-4">Customization Options</h2>
<ConfigMapper
themeConfig={customThemeConfig}
activeColorScale={activeColorScale}
handleColorScaleChange={handleColorScaleChange}
updateThemeConfig={updateCustomThemeConfig}
/>
</section>
)}
</div>
<footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
<Button
onClick={handleThemeConfigPreviewOpen}
ariaLabel="Get Theme Code"
disabled={!customThemeConfig}
>
Get Theme Code
</Button>
</footer>
</aside>
<main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
{customThemeConfig && (
<div className="max-w-screen-xl w-full py-4 px-10">
<h2 className="text-xl font-bold mb-4">Example Charts</h2>
<fieldset>
<div className="flex items-center gap-4 mb-4">
<input
type="checkbox"
id="show-tooltips"
className="form-checkbox h-5 w-5 text-primary"
checked={showTooltips}
onChange={() => setShowTooltips(!showTooltips)}
<Layout>
<div className="flex flex-row flex-wrap items-start justify-start w-full h-lvh theme-builder">
<aside className="relative flex flex-col h-full w-[380px] border-r border-grayscale-300">
<div className="grow overflow-y-auto p-4 pb-[100px]">
<h2 className="mb-0 text-lg font-bold">Customize Your Theme</h2>
<p className="text-sm mb-4 text-grayscale-400">
Select a theme to begin customizing.
</p>
<Select
id="theme-select"
value={baseTheme?.name || ""}
onChange={handleThemeSelect}
options={themeOptions}
label="Base Theme"
/>
{customThemeConfig && (
<section>
<h2 className="text-lg font-bold my-4">
Customization Options
</h2>
<ConfigMapper
themeConfig={customThemeConfig}
activeColorScale={activeColorScale}
handleColorScaleChange={handleColorScaleChange}
updateThemeConfig={updateCustomThemeConfig}
/>
<label htmlFor="show-tooltips">
Show tooltips instead of labels
</label>
</div>
</fieldset>
<div className="grid grid-cols-2 gap-10">
<div>
<h3 className="text-base font-bold mb-3">Stacked Area Chart</h3>
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
<VictoryAxis label="X Axis" />
<VictoryAxis dependentAxis label="Y Axis" />
<VictoryStack
colorScale={activeColorScale}
aria-label="Victory Stack Demo"
</section>
)}
</div>
<footer className="p-4 border-t border-grayscale-300 sticky bottom-0 flex justify-end bg-white">
<Button
onClick={handleThemeConfigPreviewOpen}
ariaLabel="Get Theme Code"
disabled={!customThemeConfig}
>
Get Theme Code
</Button>
</footer>
</aside>
<main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
{customThemeConfig && (
<div className="max-w-screen-xl w-full py-4 px-10">
<h2 className="text-xl font-bold mb-4">Example Charts</h2>
<fieldset>
<div className="flex items-center gap-4 mb-4">
<input
type="checkbox"
id="show-tooltips"
className="form-checkbox h-5 w-5 text-primary"
checked={showTooltips}
onChange={() => setShowTooltips(!showTooltips)}
/>
<label htmlFor="show-tooltips">
Show tooltips instead of labels
</label>
</div>
</fieldset>
<div className="grid grid-cols-2 gap-10">
<div>
<h3 className="text-base font-bold mb-3">
Stacked Area Chart
</h3>
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
{[...Array(NUM_STACKS)].map((_, i) => (
<VictoryArea
data={sampleStackData}
key={i}
labels={() => undefined}
/>
))}
</VictoryStack>
</VictoryChart>
</div>
<div>
<h3 className="text-base font-bold mb-3">Stacked Bar Chart</h3>
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
<VictoryAxis label="X Axis" />
<VictoryAxis dependentAxis label="Y Axis" />
<VictoryStack
colorScale={activeColorScale}
aria-label="Victory Stack Demo"
<VictoryAxis label="X Axis" />
<VictoryAxis dependentAxis label="Y Axis" />
<VictoryStack
colorScale={activeColorScale}
aria-label="Victory Stack Demo"
>
{[...Array(NUM_STACKS)].map((_, i) => (
<VictoryArea
data={sampleStackData}
key={i}
labels={() => undefined}
/>
))}
</VictoryStack>
</VictoryChart>
</div>
<div>
<h3 className="text-base font-bold mb-3">
Stacked Bar Chart
</h3>
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
{[...Array(NUM_STACKS)].map((_, i) => (
<VictoryBar
data={sampleStackData}
key={i}
labels={({ datum }) =>
showTooltips ? datum.y : undefined
}
{...(showTooltips && {
labelComponent: <VictoryTooltip />,
})}
/>
))}
</VictoryStack>
</VictoryChart>
</div>
{optionsConfig.map(
({ title, content: Content, hasVictoryChart = true }, i) =>
Content && (
<div key={i}>
<h3 className="text-base font-bold mb-3">{title}</h3>
{hasVictoryChart ? (
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
{Content({
<VictoryAxis label="X Axis" />
<VictoryAxis dependentAxis label="Y Axis" />
<VictoryStack
colorScale={activeColorScale}
aria-label="Victory Stack Demo"
>
{[...Array(NUM_STACKS)].map((_, i) => (
<VictoryBar
data={sampleStackData}
key={i}
labels={({ datum }) =>
showTooltips ? datum.y : undefined
}
{...(showTooltips && {
labelComponent: <VictoryTooltip />,
})}
/>
))}
</VictoryStack>
</VictoryChart>
</div>
{optionsConfig.map(
({ title, content: Content, hasVictoryChart = true }, i) =>
Content && (
<div key={i}>
<h3 className="text-base font-bold mb-3">{title}</h3>
{hasVictoryChart ? (
<VictoryChart
theme={customThemeConfig}
domainPadding={20}
style={chartStyle}
>
{Content({
labels: ({ datum }) => datum.y || datum.x,
...(showTooltips && {
labelComponent: <VictoryTooltip />,
}),
})}
</VictoryChart>
) : (
Content({
labels: ({ datum }) => datum.y || datum.x,
style: chartStyle,
theme: customThemeConfig,
...(showTooltips && {
labelComponent: <VictoryTooltip />,
}),
})}
</VictoryChart>
) : (
Content({
labels: ({ datum }) => datum.y || datum.x,
style: chartStyle,
theme: customThemeConfig,
...(showTooltips && {
labelComponent: <VictoryTooltip />,
}),
})
)}
</div>
),
)}
})
)}
</div>
),
)}
</div>
</div>
</div>
)}
</main>
{showThemeConfigPreview && customThemeConfig && (
<ConfigPreview
config={customThemeConfig}
onClose={handleThemeConfigPreviewClose}
/>
)}
</main>
{showThemeConfigPreview && customThemeConfig && (
<ConfigPreview
config={customThemeConfig}
onClose={handleThemeConfigPreviewClose}
/>
)}
</div>
</div>
</Layout>
);
};