From e9d485fe3b5db8c426ac03b30ed8917df0baa62d Mon Sep 17 00:00:00 2001 From: Pauline Date: Sun, 26 Nov 2023 17:13:07 -0500 Subject: feat(lint): switch to eslint config and formatting (use vscode for autoformat) --- apps/storybook/.storybook/main.ts | 16 +- apps/storybook/.storybook/preview.ts | 8 +- apps/storybook/package.json | 28 +- apps/storybook/postcss.config.js | 6 +- apps/storybook/tsconfig.json | 16 +- apps/storybook/vite.config.ts | 4 + apps/website/.eslintrc.js | 8 - apps/website/astro.config.ts | 9 +- apps/website/config.ts | 24 +- apps/website/package.json | 10 +- apps/website/src/components/base/Button.astro | 50 +- apps/website/src/components/base/CodeBlock.astro | 42 - apps/website/src/components/base/Footer.astro | 5 +- apps/website/src/components/base/Header.astro | 40 +- apps/website/src/components/base/Navbar.astro | 34 +- .../src/components/base/NavbarElement.astro | 123 +- apps/website/src/components/base/Paragraph.astro | 32 +- .../src/components/base/ScreenOverlay.astro | 16 +- .../base/ScrollbarOverlayContainer.astro | 16 +- apps/website/src/components/base/Section.astro | 54 +- apps/website/src/components/base/Tag.astro | 15 +- apps/website/src/components/icons/Icon.astro | 32 +- apps/website/src/components/logos/Logo.astro | 78 +- apps/website/src/layouts/Layout.astro | 58 +- apps/website/src/pages/index.astro | 133 +- apps/website/src/types/Config.d.ts | 46 +- apps/website/tailwind.config.cjs | 20 +- apps/website/tsconfig.json | 2 +- apps/website/yarn.lock | 3815 -------------------- 29 files changed, 450 insertions(+), 4290 deletions(-) create mode 100644 apps/storybook/vite.config.ts delete mode 100644 apps/website/.eslintrc.js delete mode 100644 apps/website/yarn.lock (limited to 'apps') diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts index 9a50fb5..3087975 100644 --- a/apps/storybook/.storybook/main.ts +++ b/apps/storybook/.storybook/main.ts @@ -5,30 +5,30 @@ const config: StorybookConfig = { { directory: '../../../packages/ui/src/**', titlePrefix: 'UI', - files: '*.stories.*' + files: '*.stories.*', }, { directory: '../../../interface/app/**', titlePrefix: 'Interface', - files: '*.stories.*' - } + files: '*.stories.*', + }, ], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', - '@storybook/addon-styling' + '@storybook/addon-styling', ], framework: { name: '@storybook/react-vite', - options: {} + options: {}, }, docs: { - autodocs: 'tag' + autodocs: 'tag', }, core: { - disableTelemetry: true - } + disableTelemetry: true, + }, }; export default config; diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts index 4663aa6..794f8fa 100644 --- a/apps/storybook/.storybook/preview.ts +++ b/apps/storybook/.storybook/preview.ts @@ -7,10 +7,10 @@ const preview: Preview = { controls: { matchers: { color: /(background|color)$/i, - date: /Date$/ - } - } - } + date: /Date$/, + }, + }, + }, }; export default preview; diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 5fb43f0..e0009b1 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -6,31 +6,31 @@ "build-storybook": "storybook build --no-open" }, "dependencies": { - "@storybook/addon-essentials": "^7.5.1", - "@storybook/addon-interactions": "^7.5.1", - "@storybook/addon-links": "^7.5.1", + "@storybook/addon-essentials": "^7.5.3", + "@storybook/addon-interactions": "^7.5.3", + "@storybook/addon-links": "^7.5.3", "@storybook/addon-styling": "^1.3.7", - "@storybook/blocks": "^7.5.1", - "@storybook/react": "^7.5.1", - "@storybook/react-vite": "^7.5.1", + "@storybook/blocks": "^7.5.3", + "@storybook/react": "^7.5.3", + "@storybook/react-vite": "^7.5.3", "@storybook/testing-library": "^0.2.2", "postcss-pseudo-companion-classes": "^0.1.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "sass": "^1.69.4" + "sass": "^1.69.5" }, "devDependencies": { "@polyfrost/config": "workspace:*", "@polyfrost/ui": "workspace:*", - "@types/react": "^18.2.31", - "@types/react-dom": "^18.2.14", - "@vitejs/plugin-react": "^4.1.0", + "@types/react": "^18.2.38", + "@types/react-dom": "^18.2.17", + "@vitejs/plugin-react": "^4.2.0", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "prop-types": "^15.8.1", - "storybook": "^7.5.1", - "tailwindcss": "^3.3.3", - "typescript": "^5.2.2", - "vite": "^4.5.0" + "storybook": "^7.5.3", + "tailwindcss": "^3.3.5", + "typescript": "^5.3.2", + "vite": "^5.0.2" } } diff --git a/apps/storybook/postcss.config.js b/apps/storybook/postcss.config.js index de27714..19ea98c 100644 --- a/apps/storybook/postcss.config.js +++ b/apps/storybook/postcss.config.js @@ -4,7 +4,7 @@ module.exports = { 'autoprefixer': {}, 'postcss-pseudo-companion-classes': { prefix: 'sb-pseudo--', - restrictTo: [':hover', ':focus'] - } - } + restrictTo: [':hover', ':focus'], + }, + }, }; diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json index da3cfcc..01795c6 100644 --- a/apps/storybook/tsconfig.json +++ b/apps/storybook/tsconfig.json @@ -1,19 +1,19 @@ { "compilerOptions": { "target": "ESNext", - "module": "ESNext", - "moduleResolution": "Node", + "jsx": "react-jsx", "lib": ["DOM", "DOM.Iterable", "ESNext"], "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, "strict": true, + "noEmit": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": false, "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" + "skipLibCheck": true } } diff --git a/apps/storybook/vite.config.ts b/apps/storybook/vite.config.ts new file mode 100644 index 0000000..b6ead16 --- /dev/null +++ b/apps/storybook/vite.config.ts @@ -0,0 +1,4 @@ +import baseConfig from '../../packages/config/vite'; + +// https://vitejs.dev/config/ +export default baseConfig; diff --git a/apps/website/.eslintrc.js b/apps/website/.eslintrc.js deleted file mode 100644 index f80eaa9..0000000 --- a/apps/website/.eslintrc.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('eslint').ESLint.ConfigData} */ -module.exports = { - extends: [require.resolve('@polyfrost/config/eslint/web.js')], - parserOptions: { - tsconfigRootDir: __dirname, - project: './tsconfig.json' - } -}; diff --git a/apps/website/astro.config.ts b/apps/website/astro.config.ts index c7c7928..2e8c40c 100644 --- a/apps/website/astro.config.ts +++ b/apps/website/astro.config.ts @@ -1,6 +1,5 @@ import tailwind from '@astrojs/tailwind'; import { defineConfig } from 'astro/config'; -// @ts-ignore - Tailwind doesn't have types for this yet import postcssNesting from 'tailwindcss/nesting'; // https://astro.build/config @@ -9,8 +8,8 @@ export default defineConfig({ vite: { css: { postcss: { - plugins: [postcssNesting] - } - } - } + plugins: [postcssNesting], + }, + }, + }, }); diff --git a/apps/website/config.ts b/apps/website/config.ts index b483705..e74d7aa 100644 --- a/apps/website/config.ts +++ b/apps/website/config.ts @@ -1,4 +1,4 @@ -import type { Config, NavbarDropdown, NavbarElement, Project } from '@webtypes/Config'; +import type { Config, NavbarDropdown, Project } from '@webtypes/Config'; export const configConst = { projects: getProjects(), @@ -7,24 +7,24 @@ export const configConst = { left: [ { logo: ['polyfrost.full', -1], - path: '/' - } + path: '/', + }, ], right: [ { text: 'Home', - path: '/' + path: '/', }, { text: 'Projects', dropdown: getProjects().map((project) => { (project as any).path = `/projects/${project.name.toLowerCase()}`; return project; - }) as unknown as NavbarDropdown[] - } - ] - } -} as const satisfies Config; + }) as unknown as NavbarDropdown[], + }, + ], + }, +} satisfies Config; function getProjects(): Project[] { return [ @@ -32,14 +32,14 @@ function getProjects(): Project[] { name: 'OneConfig', description: 'The next-generation config library for Forge and Fabric', logo: 'oneconfig.minimal', - tag: 'BETA' + tag: 'BETA', }, { name: 'OneLauncher', description: 'The next-generation launcher for Forge and Fabric', logo: 'polyfrost.minimal', - tag: 'SOON' - } + tag: 'SOON', + }, ]; } diff --git a/apps/website/package.json b/apps/website/package.json index 0cd0c4e..fe9b603 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -10,13 +10,13 @@ }, "dependencies": { "@astrojs/tailwind": "^5.0.2", - "astro": "^3.3.3", - "tailwindcss": "^3.3.3" + "astro": "^3.6.0", + "tailwindcss": "^3.3.5" }, "devDependencies": { "@polyfrost/config": "../../packages/config", - "@types/node": "~18.17.19", - "node-html-parser": "^6.1.10", - "typescript": "^5.2.2" + "@types/node": "~20.10.0", + "node-html-parser": "^6.1.11", + "typescript": "^5.3.2" } } diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro index 0a4dc9f..438bafd 100644 --- a/apps/website/src/components/base/Button.astro +++ b/apps/website/src/components/base/Button.astro @@ -1,27 +1,27 @@ --- -import type { Icons } from "@components/icons/Icon.astro"; -import Icon from "@components/icons/Icon.astro"; -import type { HTMLAttributes } from "astro/types"; +import type { Icons } from '@components/icons/Icon.astro'; +import Icon from '@components/icons/Icon.astro'; +import type { HTMLAttributes } from 'astro/types'; const styles = { // TODO: adjust active / disabled colors - primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4", - secondary: "bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200", -} + primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4', + secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200', +}; const sizes = { - sm: "px-4 py-2 text-sm", - md: "px-5 py-3 text-md", - lg: "px-6 py-3 text-lg rounded-2xl" -} + sm: 'px-4 py-2 text-sm', + md: 'px-5 py-3 text-md', + lg: 'px-6 py-3 text-lg rounded-2xl', +}; const iconSize = { sm: 15, md: 18, - lg: 24 -} + lg: 24, +}; -interface Props extends HTMLAttributes<"button"> { +interface Props extends HTMLAttributes<'button'> { style?: keyof typeof styles size?: keyof typeof sizes text?: string @@ -31,28 +31,28 @@ interface Props extends HTMLAttributes<"button"> { } const { - style = "primary", - size = "md", - text = "", - iconLeft = "", - iconRight = "", + style = 'primary', + size = 'md', + text = '', + iconLeft = '', + iconRight = '', ...rest } = Astro.props; const className = [ - "flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4", - "rounded-xl font-medium", + 'flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4', + 'rounded-xl font-medium', styles[style], sizes[size], - "transition-colors", - rest.class -].join(" "); + 'transition-colors', + rest.class, +].join(' '); -const Element = rest.href ? "a" : "button" as any; +const Element = rest.href ? 'a' : 'button' as any; --- {iconLeft && } - {text ? text : } + {text || } {iconRight && } diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro index ceeecc0..fd2cdd6 100644 --- a/apps/website/src/components/base/CodeBlock.astro +++ b/apps/website/src/components/base/CodeBlock.astro @@ -19,45 +19,3 @@ } - - diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro index b24db5f..9bc1c61 100644 --- a/apps/website/src/components/base/Footer.astro +++ b/apps/website/src/components/base/Footer.astro @@ -2,6 +2,5 @@ --- - + diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro index d35ad9f..70dc799 100644 --- a/apps/website/src/components/base/Header.astro +++ b/apps/website/src/components/base/Header.astro @@ -1,40 +1,40 @@ --- -import type { HTMLAttributes } from "astro/types" +import type { HTMLAttributes } from 'astro/types'; const sizes = { - "xxl": "h1", - "xl": "h2", - "lg": "h2", - "md": "h3", - "sm": "h4", - "xs": "h5", - "xxs": "h6" + xxl: 'h1', + xl: 'h2', + lg: 'h2', + md: 'h3', + sm: 'h4', + xs: 'h5', + xxs: 'h6', }; -type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; interface Props extends HTMLAttributes { - size?: keyof typeof sizes; - align?: "left" | "center" | "right" | "inherit"; + size?: keyof typeof sizes + align?: 'left' | 'center' | 'right' | 'inherit' } const { - size = "lg", - align = "inherit", + size = 'lg', + align = 'inherit', ...attr } = Astro.props; const Element = sizes[size] as any; // Unfortunately gotta do this -const className = (align == "inherit" ? "" : `text-${align} `) - + (size == "xxl" ? " page-header" : "") - + (attr.class ? ` ${attr.class}` : ""); +const className = (align == 'inherit' ? '' : `text-${align} `) + + (size == 'xxl' ? ' page-header' : '') + + (attr.class ? ` ${attr.class}` : ''); --- - - - + + + - \ No newline at end of file + diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro index bb7a062..51d9fa1 100644 --- a/apps/website/src/components/base/Section.astro +++ b/apps/website/src/components/base/Section.astro @@ -1,40 +1,42 @@ --- -import type { HTMLAttributes } from "astro/types"; +import type { HTMLAttributes } from 'astro/types'; -interface Props extends HTMLAttributes<"section"> { - maxWidth?: "none" | String; - colReverse?: boolean; - wrapperClass?: string; - wFull?: boolean; +interface Props extends HTMLAttributes<'section'> { + maxWidth?: 'none' | String + colReverse?: boolean + wrapperClass?: string + wFull?: boolean } const { - maxWidth = "1080px", + maxWidth = '1080px', colReverse = true, - wrapperClass = "", + wrapperClass = '', wFull = true, ...props } = Astro.props; -const twoColumn = Astro.slots.has("left") || Astro.slots.has("right"); +const twoColumn = Astro.slots.has('left') || Astro.slots.has('right'); -const className = `max-w-[${maxWidth}] ${wFull ? "w-full" : ""} px-5 md:p-0 flex gap-4` - + (twoColumn ? ` ${maxWidth == "none" ? "justify-center" : "justify-between md:justify-evenly lg:justify-between"} ${colReverse ? "flex-col-reverse" : "flex-col"} md:flex-row md:items-center md:flex-row` : "") - + (props.class ? ` ${props.class}` : ""); +const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : ''} px-5 md:p-0 flex gap-4${ + twoColumn ? ` ${maxWidth == 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row md:items-center md:flex-row` : '' + }${props.class ? ` ${props.class}` : ''}`; --- -
-
- {twoColumn ? ( -
- -
+
+
+ {twoColumn + ? ( +
+ +
-
- -
- ) : ( - - )} -
-
+
+ +
+ ) + : ( + + )} +
+
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro index e6fd34f..b903344 100644 --- a/apps/website/src/components/base/Tag.astro +++ b/apps/website/src/components/base/Tag.astro @@ -1,14 +1,13 @@ --- -import type { HTMLAttributes } from "astro/types"; +import type { HTMLAttributes } from 'astro/types'; -interface Props extends HTMLAttributes<"span"> {} +interface Props extends HTMLAttributes<'span'> {} const { ...attr } = Astro.props; --- -
- - - -
- +
+ + + +
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro index bf2b362..b36d412 100644 --- a/apps/website/src/components/icons/Icon.astro +++ b/apps/website/src/components/icons/Icon.astro @@ -1,28 +1,26 @@ --- -export type Icons = "chevron-down" | "download" | "book-open"; - import { parse } from 'node-html-parser'; -import type { HTMLAttributes } from "astro/types"; +import type { HTMLAttributes } from 'astro/types'; + +export type Icons = 'chevron-down' | 'download' | 'book-open'; -interface Props extends HTMLAttributes<"svg"> { - icon: Icons; - size?: number | [number, number]; +interface Props extends HTMLAttributes<'svg'> { + icon: Icons + size?: number | [number, number] } async function getSVG(name: string) { const file = await import(`./impl/${name}.svg?raw` /* @vite-ignore */); - if (!file) { + if (!file) throw new Error(`${name} not found`); - } const content = parse(file.default); const svg = content.querySelector('svg'); - if (!svg) { + if (!svg) throw new Error(`${name} is not a valid SVG`); - } const { attributes, innerHTML } = svg; @@ -39,13 +37,12 @@ const { } = Astro.props as Props; let svgAttributes = {}; -let html = ""; +let html = ''; try { const sizeAttributes = () => { - if (!size) { + if (!size) return {}; - } if (Array.isArray(size)) { return { @@ -58,7 +55,7 @@ try { width: size, height: size, }; - } + }; const { attributes: baseAttributes, innerHTML } = await getSVG(icon); svgAttributes = { @@ -69,9 +66,10 @@ try { const colorRegex = /(fill|stroke)=\"([^"]*)\"/g; html = innerHTML.replaceAll(colorRegex, '$1="currentColor"'); -} catch (err) { - +} +catch (err) { + // ignored } --- - + diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro index 0b72b91..ad41aad 100644 --- a/apps/website/src/components/logos/Logo.astro +++ b/apps/website/src/components/logos/Logo.astro @@ -1,51 +1,55 @@ --- -import type { LogoType } from "@webtypes/Config"; -import type { HTMLAttributes } from "astro/types"; +import type { LogoType } from '@webtypes/Config'; +import type { HTMLAttributes } from 'astro/types'; -export interface Props extends HTMLAttributes<"svg"> { - logo: LogoType, - size?: number | [number, number], - silent?: boolean, +export interface Props extends HTMLAttributes<'svg'> { + logo: LogoType + size?: number | [number, number] + silent?: boolean } const { - logo, - silent = false, - size = undefined, - ...attr + logo, + silent = false, + size = undefined, + ...attr } = Astro.props; let svg: string | undefined; try { - if (logo == undefined) return; - const dir = "../../../public/media"; - svg = (await import(`${dir}/${logo.replaceAll(".", "/")}.svg?raw` /* @vite-ignore */)).default; - - if (svg == undefined) return; - - if (typeof size == "number" || Array.isArray(size)) { - // SVG main element regex - const svgElementRegex = /]*>/; - - svg = svg.replace(svgElementRegex, (match) => { - let newMatch = match; - if (typeof size == "number") { - newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`); - newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`); - } else if (Array.isArray(size)) { - newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`); - newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`); - } - return newMatch; - }); - } - - svg = svg.replace(/ `${key}="${value}"`).join(" ")}`); -} catch (err) { - console.error(`Error occurred while loading SVG. Logo name is ${logo}.`) + if (logo == undefined) + return; + const dir = '../../../public/media'; + svg = (await import(`${dir}/${logo.replaceAll('.', '/')}.svg?raw` /* @vite-ignore */)).default; + + if (svg == undefined) + return; + + if (typeof size == 'number' || Array.isArray(size)) { + // SVG main element regex + const svgElementRegex = /]*>/; + + svg = svg.replace(svgElementRegex, (match) => { + let newMatch = match; + if (typeof size == 'number') { + newMatch = newMatch.replace(/width="[^"]*"/, `width="${size}"`); + newMatch = newMatch.replace(/height="[^"]*"/, `height="${size}"`); + } + else if (Array.isArray(size)) { + newMatch = newMatch.replace(/width="[^"]*"/, `width="${size[0]}"`); + newMatch = newMatch.replace(/height="[^"]*"/, `height="${size[1]}"`); + } + return newMatch; + }); + } + + svg = svg.replace(/ `${key}="${value}"`).join(' ')}`); +} +catch (err) { + console.error(`Error occurred while loading SVG. Logo name is ${logo}.`); console.error(err); } --- - + diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index 51b9922..c4a2ff4 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -1,42 +1,42 @@ --- -import "../styles/global.css"; -import Navbar from "../components/base/Navbar.astro"; -import Favicon from "/media/polyfrost/minimal_bg.svg?url"; -import Footer from "@components/base/Footer.astro"; +import '../styles/global.css'; +import Footer from '@components/base/Footer.astro'; +import Navbar from '../components/base/Navbar.astro'; +import Favicon from '/media/polyfrost/minimal_bg.svg?url'; interface Props { - title?: string; - favicon?: string; + title?: string + favicon?: string } const { - title = 'Polyfrost', - favicon = Favicon + title = 'Polyfrost', + favicon = Favicon, } = Astro.props; --- - - - - - - - + + + + + + + - - - - + + + + - {title} - + {title} + - - -
- -
-