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

New Admin UI - Colors and Theming #4474

Merged
merged 44 commits into from
Jan 21, 2025
Merged
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
271ef26
wip
adrians5j Jan 6, 2025
589e361
wip
adrians5j Jan 6, 2025
8d0be67
wip
adrians5j Jan 7, 2025
e47ed45
wip
adrians5j Jan 7, 2025
bbe79f1
Merge branch 'refs/heads/feat/new-admin-ui-merge-next-2025-01-07' int…
adrians5j Jan 7, 2025
c6ede83
wip
adrians5j Jan 9, 2025
3bd04d3
wip
adrians5j Jan 9, 2025
1badf9a
wip
adrians5j Jan 10, 2025
df38086
wip
adrians5j Jan 10, 2025
32f6a80
wip
adrians5j Jan 10, 2025
badee33
wip
adrians5j Jan 13, 2025
7925b35
wip
adrians5j Jan 13, 2025
8de20fa
wip
adrians5j Jan 13, 2025
e6ae1de
wip: add Plugin wrapper
Pavel910 Jan 13, 2025
563d36c
wip: use state initializer instead of useMemo
Pavel910 Jan 13, 2025
c486c84
fix(app-tenant-manager): remove obsolete mounting checks
Pavel910 Jan 13, 2025
afb2d25
wip: switch primary color based on tenant
Pavel910 Jan 13, 2025
828929d
wip: remove spinners
adrians5j Jan 14, 2025
5e6ae16
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Jan 15, 2025
fa62360
wip
adrians5j Jan 15, 2025
84bb616
wip
adrians5j Jan 15, 2025
21656d0
wip
adrians5j Jan 15, 2025
d138231
wip
adrians5j Jan 15, 2025
db83d76
wip
adrians5j Jan 15, 2025
2bb2b1b
wip
adrians5j Jan 15, 2025
239dd56
wip
adrians5j Jan 16, 2025
baabbde
wip
adrians5j Jan 16, 2025
bff22d2
wip
adrians5j Jan 16, 2025
43fbaba
wip
adrians5j Jan 16, 2025
fbc9ad4
wip
adrians5j Jan 16, 2025
6379d5a
wip
adrians5j Jan 16, 2025
8da8031
wip
adrians5j Jan 17, 2025
39ec430
wip
adrians5j Jan 17, 2025
121af3c
wip
adrians5j Jan 17, 2025
535af73
wip
adrians5j Jan 17, 2025
65ef5e9
wip
adrians5j Jan 17, 2025
b8d55fd
wip
adrians5j Jan 17, 2025
7922bd9
wip
adrians5j Jan 17, 2025
360a4a7
wip
adrians5j Jan 17, 2025
9bb7a9c
wip
adrians5j Jan 17, 2025
83f8d73
wip
adrians5j Jan 17, 2025
d2aba53
wip
adrians5j Jan 20, 2025
b8cc524
wip
adrians5j Jan 20, 2025
ae271ee
Merge remote-tracking branch 'refs/remotes/origin/feat/new-admin-ui' …
adrians5j Jan 21, 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
wip
adrians5j committed Jan 13, 2025
commit 7925b354a69e1beb308b077069c0c800557b2071
17 changes: 9 additions & 8 deletions extensions/myCustomExtension/src/index.tsx
Original file line number Diff line number Diff line change
@@ -4,14 +4,15 @@ import { AdminConfig } from "@webiny/app-admin";

const { Theme } = AdminConfig;
export const Extension = () => {
console.log("running custom extensions from extensions/adminTheme...");
return (
<AdminConfig>
<Theme /*tenants={["root"]}*/>
<Theme.Color palette={"warning"} color={"#fffff1"} shade={"100"} />
<Theme.Color palette={"warning"} color={"#fffff2"} shade={"200"} />
<Theme.Color palette={"warning"} color={"#fffff3"} shade={"300"} />
</Theme>
</AdminConfig>
<>
<AdminConfig>
<Theme /*tenants={["root"]}*/>
<Theme.Color palette={"primary"} color={"#E3B505"} />
<Theme.Color palette={"secondary"} color={"#95190C"} />
<Theme.Color palette={"neutral"} color={"#E3B505"} />
</Theme>
</AdminConfig>
</>
);
};
1 change: 0 additions & 1 deletion packages/admin-ui/src/AdminTheme/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @ts-nocheck as this file is not used in the project
import React from "react";
import { ColorsObject } from "./types";
import { assignColorCssVariables } from "./utils";
4 changes: 1 addition & 3 deletions packages/app-admin/src/base/Admin.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React from "react";
import { App } from "@webiny/app";
import { ThemeProvider } from "@webiny/app-theme";
import { WcpProvider } from "@webiny/app-wcp";
import { CircularProgress } from "@webiny/ui/Progress";
import { ApolloClientFactory, createApolloProvider } from "./providers/ApolloProvider";
import { Base } from "./Base";
import { createTelemetryProvider } from "./providers/TelemetryProvider";
@@ -15,7 +14,6 @@ import { NavigationProvider } from "./ui/Navigation";
import { createDialogsProvider } from "~/components/Dialogs/DialogsContext";
import { DefaultIcons, IconPickerConfigProvider } from "~/components/IconPicker/config";
import { AdminConfigProvider } from "~/config/AdminConfig";
import { AssignAdminTheme } from "~/components/AssignAdminTheme";

export interface AdminProps {
createApolloClient: ApolloClientFactory;
@@ -33,7 +31,7 @@ export const Admin = ({ children, createApolloClient }: AdminProps) => {
return (
<ApolloProvider>
<ThemeProvider>
<WcpProvider loader={<CircularProgress label={"Loading..."} />}>
<WcpProvider>
<App
providers={[
TelemetryProvider,
20 changes: 0 additions & 20 deletions packages/app-admin/src/components/AdminTheme/consts.ts

This file was deleted.

19 changes: 0 additions & 19 deletions packages/app-admin/src/components/AdminTheme/index.tsx

This file was deleted.

7 changes: 0 additions & 7 deletions packages/app-admin/src/components/AdminTheme/types.ts

This file was deleted.

67 changes: 0 additions & 67 deletions packages/app-admin/src/components/AdminTheme/utils.ts

This file was deleted.

8 changes: 0 additions & 8 deletions packages/app-admin/src/components/AssignAdminTheme.tsx

This file was deleted.

11 changes: 4 additions & 7 deletions packages/app-admin/src/config/AdminConfig.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { createConfigurableComponent } from "@webiny/react-properties";
import { Theme, ThemeConfig } from "./Theme";
import { Theme } from "./AdminConfig/Theme";
import { createProvider } from "@webiny/app";

const base = createConfigurableComponent<AdminConfig>("AdminConfig");
@@ -9,16 +9,13 @@ export const AdminWithConfig = Object.assign(base.WithConfig, {
displayName: "AdminWithConfig"
});

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface AdminConfig {
themes: ThemeConfig[];
// Add properties here. At the moment, we don't have any.
}

function use() {
const config = base.useConfig();

return {
themes: config.themes || []
};
return base.useConfig();
}

export const AdminConfigProvider = createProvider(Original => {
30 changes: 30 additions & 0 deletions packages/app-admin/src/config/AdminConfig/Theme.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";
import { assignColor } from "./Theme/assignColor";
import { ColorPalette, Color as ColorType, ColorShade } from "./Theme/types";

export interface ThemeColorProps {
palette: ColorPalette;
color: ColorType;
shade?: ColorShade;
}

export const Color = React.memo(({ palette, color, shade }: ThemeColorProps) => {
assignColor(palette, color, shade);
return null;
});

Color.displayName = "Color";

export interface ThemeProps {
children: React.ReactNode;
}

const ThemeBase = React.memo(({ children }: ThemeProps) => {
return <>{children}</>;
});

ThemeBase.displayName = "Theme";

export const Theme = Object.assign(ThemeBase, {
Color
});
41 changes: 41 additions & 0 deletions packages/app-admin/src/config/AdminConfig/Theme/assignColor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import parseColor, { type Instance as TcColorInstance } from "tinycolor2";
import { ColorPalette, ColorShade } from "./types";

const generateShades = (color: TcColorInstance): Array<[ColorShade, TcColorInstance]> => {
return [
[100, color.clone().lighten(40)],
[200, color.clone().lighten(30)],
[300, color.clone().lighten(20)],
[400, color.clone().lighten(10)],
[500, color.clone()],
[600, color.clone().darken(10)],
[700, color.clone().darken(20)],
[800, color.clone().darken(30)],
[900, color.clone().darken(40)]
];
};

const assignColorToCssVar = (
palette: ColorPalette,
shadeLevel: ColorShade,
color: TcColorInstance
) => {
const varName = `--color-${palette}-${shadeLevel}`;

const hsl = color.toHsl();
const varValue = `${hsl.h}, ${hsl.s * 100}%, ${hsl.l * 100}%`;
document.documentElement.style.setProperty(varName, varValue);
};

export const assignColor = (palette: ColorPalette, color: string, shade?: ColorShade) => {
const colorInstance = parseColor(color);

if (shade) {
assignColorToCssVar(palette, shade, colorInstance);
return;
}

generateShades(colorInstance).forEach(([shadeLevel, shade]) => {
assignColorToCssVar(palette, shadeLevel, shade);
});
};
10 changes: 10 additions & 0 deletions packages/app-admin/src/config/AdminConfig/Theme/consts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const COLOR_SHADES = [100, 200, 300, 400, 500, 600, 700, 800, 900] as const;

export const COLOR_PALLETS = [
"primary",
"secondary",
"neutral",
"success",
"warning",
"destructive"
] as const;
4 changes: 4 additions & 0 deletions packages/app-admin/src/config/AdminConfig/Theme/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { COLOR_PALLETS, COLOR_SHADES } from "./consts";

export type ColorPalette = (typeof COLOR_PALLETS)[number];
export type ColorShade = (typeof COLOR_SHADES)[number];
45 changes: 0 additions & 45 deletions packages/app-admin/src/config/Theme.tsx

This file was deleted.

Loading