methanium/ui
Watch
3
0
Fork
You've already forked ui
 0
Code Issues Pull requests 3 Projects Releases 21 Packages Wiki Activity Actions

(feat): initial stuff
All checks were successful
/ package (push) Successful in 1m6s
Details

Browse source
This commit is contained in:
Alois 2026-07-26 02:56:07 +02:00
commit 29098d1f61
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
40 changed files with 3113 additions and 515 deletions
Download patch file Download diff file Expand all files Collapse all files

19
apps/showcase/eslint.config.js Normal file
View file

@ -0,0 +1,19 @@
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
export default tseslint.config(
{ ignores: ["dist"] },
{
files: ["**/*.{ts,tsx}"],
extends: [
js.configs.recommended,
...tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: { ecmaVersion: 2020, globals: globals.browser },
},
);

13
apps/showcase/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#111827" />
<title>Methanium UI Showcase</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

32
apps/showcase/package.json Normal file
View file

@ -0,0 +1,32 @@
{
"name": "@methanium/ui-showcase",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@methanium/ui": "workspace:*",
"react": "^19.2.7",
"react-dom": "^19.2.7"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@tailwindcss/vite": "^4.3.1",
"@types/node": "^26.0.0",
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^10.3.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.6.0",
"typescript": "^6.0.3",
"typescript-eslint": "^8.59.2",
"vite": "^8.0.16"
}
}

56
apps/showcase/src/App.tsx Normal file
View file

@ -0,0 +1,56 @@
import { useState } from "react";
import {
Button,
OnboardingFlow,
ThemeCustomizer,
ThemeOnboardingPage,
type OnboardingStep,
} from "@methanium/ui";
export default function App() {
const [showOnboarding, setShowOnboarding] = useState(false);
const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
null,
);
const steps: OnboardingStep[] = [
{
id: "welcome",
title: "Usually the legal stuff",
description: "but this is a showcase, so continue",
content: <></>,
},
{
id: "theme",
title: "Customisation",
description: "Let's just hope you don't get into decision paralysis",
content: (
<ThemeOnboardingPage
value={onboardingThemeId}
onValueChange={setOnboardingThemeId}
/>
),
defaultCanContinue: false,
},
];
if (showOnboarding)
return (
<div className="h-dvh">
<OnboardingFlow
steps={steps}
onFinish={() => setShowOnboarding(false)}
/>
</div>
);
return (
<main className="mx-auto flex max-w-[1500px] flex-col gap-7 p-5 md:p-10">
<div>
<Button variant="outline" onClick={() => setShowOnboarding(true)}>
Open onboarding
</Button>
</div>
<ThemeCustomizer />
</main>
);
}

7
apps/showcase/src/index.css Normal file
View file

@ -0,0 +1,7 @@
@import "@methanium/ui/index.css";
@source ".";
@source "../../../src";
body {
margin: 0;
}

14
apps/showcase/src/main.tsx Normal file
View file

@ -0,0 +1,14 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@methanium/ui";
import App from "./App";
import "./index.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</StrictMode>,
);

1
apps/showcase/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
apps/showcase/tsconfig.app.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}

7
apps/showcase/tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

17
apps/showcase/tsconfig.node.json Normal file
View file

@ -0,0 +1,17 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"strict": true,
"types": ["node"]
},
"include": ["vite.config.ts"]
}

30
apps/showcase/vite.config.ts Normal file
View file

@ -0,0 +1,30 @@
import { fileURLToPath, URL } from "node:url";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { methaniumUi } from "../../src/vite.ts";
const monorepoRoot = fileURLToPath(new URL("../..", import.meta.url));
const uiSrc = fileURLToPath(new URL("../../src", import.meta.url));
export default defineConfig({
resolve: {
alias: [
{
find: /^@methanium\/ui\/index\.css$/,
replacement: `${uiSrc}/index.css`,
},
{ find: /^@methanium\/ui$/, replacement: `${uiSrc}/index.ts` },
],
dedupe: ["react", "react-dom"],
},
optimizeDeps: { exclude: ["@methanium/ui"] },
server: { fs: { allow: [monorepoRoot] } },
plugins: [
methaniumUi({ defaultThemeId: "tensamin" }),
react(),
tailwindcss(),
],
});