mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-09 03:37:45 +03:00
fix: fixing css issues
This commit is contained in:
Chubby Granny Chaser
parent
d5a3e3fae5
commit
24f58673cf
@ -7,7 +7,6 @@ module.exports = {
|
||||
"plugin:jsx-a11y/recommended",
|
||||
"@electron-toolkit/eslint-config-ts/recommended",
|
||||
"plugin:prettier/recommended",
|
||||
"plugin:storybook/recommended",
|
||||
],
|
||||
rules: {
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
import { createContainer, globalStyle } from "@vanilla-extract/css";
|
||||
import { vars } from "../src/renderer/src/theme.css";
|
||||
|
||||
export const appContainer = createContainer();
|
||||
|
||||
globalStyle("*", {
|
||||
boxSizing: "border-box",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar", {
|
||||
width: "9px",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-track", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.03)",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-thumb", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "24px",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-thumb:hover", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.16)",
|
||||
});
|
||||
|
||||
globalStyle("html, body, #root, main", {
|
||||
height: "100%",
|
||||
});
|
||||
|
||||
globalStyle("body", {
|
||||
userSelect: "none",
|
||||
fontFamily: "Noto Sans, sans-serif",
|
||||
fontSize: vars.size.body,
|
||||
color: vars.color.body,
|
||||
margin: "0",
|
||||
});
|
||||
|
||||
globalStyle("button", {
|
||||
padding: "0",
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
fontFamily: "inherit",
|
||||
});
|
||||
|
||||
globalStyle("h1, h2, h3, h4, h5, h6, p", {
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
globalStyle("p", {
|
||||
lineHeight: "20px",
|
||||
});
|
||||
|
||||
globalStyle("#root, main", {
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
globalStyle("#root", {
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
globalStyle(
|
||||
"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button",
|
||||
{
|
||||
WebkitAppearance: "none",
|
||||
margin: "0",
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle("label", {
|
||||
fontSize: vars.size.body,
|
||||
});
|
||||
|
||||
globalStyle("input[type=number]", {
|
||||
MozAppearance: "textfield",
|
||||
});
|
||||
|
||||
globalStyle("img", {
|
||||
WebkitUserDrag: "none",
|
||||
} as Record<string, string>);
|
||||
|
||||
globalStyle("progress[value]", {
|
||||
WebkitAppearance: "none",
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
import { resolve } from "path";
|
||||
import type { StorybookConfig } from "@storybook/react-vite";
|
||||
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-essentials",
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/react-vite",
|
||||
options: {},
|
||||
},
|
||||
viteFinal: (config) => {
|
||||
return {
|
||||
...config,
|
||||
resolve: {
|
||||
alias: {
|
||||
"@renderer": resolve("src/renderer/src"),
|
||||
"@locales": resolve("src/locales"),
|
||||
"@shared": resolve("src/shared"),
|
||||
},
|
||||
},
|
||||
plugins: [...config.plugins, vanillaExtractPlugin()],
|
||||
};
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@ -1,22 +0,0 @@
|
||||
import type { Preview } from "@storybook/react";
|
||||
|
||||
import "@fontsource/noto-sans/400.css";
|
||||
import "@fontsource/noto-sans/500.css";
|
||||
import "@fontsource/noto-sans/700.css";
|
||||
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
|
||||
import "./app.css";
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
14
package.json
14
package.json
@ -29,9 +29,7 @@
|
||||
"build:mac": "electron-vite build && electron-builder --mac",
|
||||
"build:linux": "electron-vite build && electron-builder --linux",
|
||||
"prepare": "husky",
|
||||
"knex:migrate:make": "knex --knexfile src/main/knexfile.ts migrate:make --esm",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
"knex:migrate:make": "knex --knexfile src/main/knexfile.ts migrate:make --esm"
|
||||
},
|
||||
"dependencies": {
|
||||
"@electron-toolkit/preload": "^3.0.0",
|
||||
@ -84,19 +82,11 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@aws-sdk/client-s3": "^3.705.0",
|
||||
"@chromatic-com/storybook": "^3.2.4",
|
||||
"@commitlint/cli": "^19.6.0",
|
||||
"@commitlint/config-conventional": "^19.6.0",
|
||||
"@electron-toolkit/eslint-config-prettier": "^2.0.0",
|
||||
"@electron-toolkit/eslint-config-ts": "^2.0.0",
|
||||
"@electron-toolkit/tsconfig": "^1.0.1",
|
||||
"@storybook/addon-essentials": "^8.5.1",
|
||||
"@storybook/addon-interactions": "^8.5.1",
|
||||
"@storybook/addon-onboarding": "^8.5.1",
|
||||
"@storybook/blocks": "^8.5.1",
|
||||
"@storybook/react": "^8.5.1",
|
||||
"@storybook/react-vite": "^8.5.1",
|
||||
"@storybook/test": "^8.5.1",
|
||||
"@swc/core": "^1.4.16",
|
||||
"@types/auto-launch": "^5.0.5",
|
||||
"@types/color": "^3.0.6",
|
||||
@ -119,13 +109,11 @@
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-storybook": "^0.11.2",
|
||||
"husky": "^9.1.7",
|
||||
"prettier": "^3.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass-embedded": "^1.80.6",
|
||||
"storybook": "^8.5.1",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.12",
|
||||
|
||||
@ -28,13 +28,15 @@ export function SettingsBehavior() {
|
||||
useEffect(() => {
|
||||
if (userPreferences) {
|
||||
setForm({
|
||||
preferQuitInsteadOfHiding: userPreferences.preferQuitInsteadOfHiding,
|
||||
runAtStartup: userPreferences.runAtStartup,
|
||||
startMinimized: userPreferences.startMinimized,
|
||||
disableNsfwAlert: userPreferences.disableNsfwAlert,
|
||||
seedAfterDownloadComplete: userPreferences.seedAfterDownloadComplete,
|
||||
preferQuitInsteadOfHiding:
|
||||
userPreferences.preferQuitInsteadOfHiding ?? false,
|
||||
runAtStartup: userPreferences.runAtStartup ?? false,
|
||||
startMinimized: userPreferences.startMinimized ?? false,
|
||||
disableNsfwAlert: userPreferences.disableNsfwAlert ?? false,
|
||||
seedAfterDownloadComplete:
|
||||
userPreferences.seedAfterDownloadComplete ?? false,
|
||||
showHiddenAchievementsDescription:
|
||||
userPreferences.showHiddenAchievementsDescription,
|
||||
userPreferences.showHiddenAchievementsDescription ?? false,
|
||||
});
|
||||
}
|
||||
}, [userPreferences]);
|
||||
|
||||
@ -65,18 +65,20 @@ export function SettingsGeneral() {
|
||||
(language) => language === userPreferences.language
|
||||
) ??
|
||||
languageKeys.find((language) => {
|
||||
return language.startsWith(userPreferences.language.split("-")[0]);
|
||||
return language.startsWith(
|
||||
userPreferences.language?.split("-")[0] ?? "en"
|
||||
);
|
||||
});
|
||||
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
downloadsPath: userPreferences.downloadsPath ?? defaultDownloadsPath,
|
||||
downloadNotificationsEnabled:
|
||||
userPreferences.downloadNotificationsEnabled,
|
||||
userPreferences.downloadNotificationsEnabled ?? false,
|
||||
repackUpdatesNotificationsEnabled:
|
||||
userPreferences.repackUpdatesNotificationsEnabled,
|
||||
userPreferences.repackUpdatesNotificationsEnabled ?? false,
|
||||
achievementNotificationsEnabled:
|
||||
userPreferences.achievementNotificationsEnabled,
|
||||
userPreferences.achievementNotificationsEnabled ?? false,
|
||||
language: language ?? "en",
|
||||
}));
|
||||
}
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Button } from "@renderer/components";
|
||||
|
||||
const meta = {
|
||||
title: "Components/Button",
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
// Primary button (default)
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
children: "Primary Button",
|
||||
theme: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
// Outline variant
|
||||
export const Outline: Story = {
|
||||
args: {
|
||||
children: "Outline Button",
|
||||
theme: "outline",
|
||||
},
|
||||
};
|
||||
|
||||
// Dark variant
|
||||
export const Dark: Story = {
|
||||
args: {
|
||||
children: "Dark Button",
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
// Danger variant
|
||||
export const Danger: Story = {
|
||||
args: {
|
||||
children: "Danger Button",
|
||||
theme: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
// Disabled state
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
children: "Disabled Button",
|
||||
disabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
// Button with icon example
|
||||
export const WithIcon: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<span>🚀</span>
|
||||
<span>Button with Icon</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
// Different sizes example using className
|
||||
export const CustomClassName: Story = {
|
||||
args: {
|
||||
children: "Custom Class Button",
|
||||
className: "custom-class",
|
||||
},
|
||||
};
|
||||
@ -1,115 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Toast } from "@renderer/components";
|
||||
import { useState } from "react";
|
||||
|
||||
const meta = {
|
||||
title: "Components/Toast",
|
||||
component: Toast,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof Toast>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Toast>;
|
||||
|
||||
// Base stories for each variant
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
visible: true,
|
||||
message: "Operation completed successfully",
|
||||
type: "success",
|
||||
onClose: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
visible: true,
|
||||
message: "An error occurred",
|
||||
type: "error",
|
||||
onClose: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
visible: true,
|
||||
message: "Please review before proceeding",
|
||||
type: "warning",
|
||||
onClose: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
// Interactive story with toggle functionality
|
||||
const InteractiveToastTemplate = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<button onClick={() => setVisible(true)} style={{ marginBottom: "20px" }}>
|
||||
Show Toast
|
||||
</button>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "16px",
|
||||
right: "16px",
|
||||
maxWidth: "420px",
|
||||
width: "420px",
|
||||
}}
|
||||
>
|
||||
<Toast
|
||||
visible={visible}
|
||||
message="This is an interactive toast"
|
||||
type="success"
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Interactive: Story = {
|
||||
render: () => <InteractiveToastTemplate />,
|
||||
};
|
||||
|
||||
// Long message example
|
||||
export const LongMessage: Story = {
|
||||
args: {
|
||||
visible: true,
|
||||
message:
|
||||
"This is a very long message that demonstrates how the toast component handles text wrapping and content overflow in cases where the message is extensive",
|
||||
type: "success",
|
||||
onClose: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
// Story with auto-close behavior
|
||||
const AutoCloseToastTemplate = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<button
|
||||
onClick={() => setVisible(true)}
|
||||
style={{ marginBottom: "20px" }}
|
||||
disabled={visible}
|
||||
>
|
||||
Show Toast Again
|
||||
</button>
|
||||
<Toast
|
||||
visible={visible}
|
||||
message="This toast will auto-close in 2.5 seconds"
|
||||
type="success"
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AutoClose: Story = {
|
||||
render: () => <AutoCloseToastTemplate />,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user