Merge branch 'main' into server-ts

vivid-planet · Oct 14, 2024 · 558fcfa · 558fcfa
2 parents b504bc8 + 53e9a83
commit 558fcfa
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 36 deletions.
diff --git a/api/package.json b/api/package.json
@@ -18,7 +18,6 @@
         "lint:generated-files-not-modified": "npm run api-generator && git diff --exit-code HEAD --",
         "lint:tsc": "tsc --project ./tsconfig.lint.json",
         "mikro-orm": "mikro-orm",
-        "mikro-orm:drop": "mikro-orm schema:drop -r",
         "mikro-orm:migration:generate": "mikro-orm migration:create",
         "start": "npm run prebuild && dotenv -e .env -e .env.local -e .env.secrets -e .env.site-configs -- nest start",
         "start:debug": "npm run prebuild && dotenv -e .env -e .env.local -e .env.secrets -e .env.site-configs -- nest start --debug --watch --preserveWatchOutput",

diff --git a/api/src/config/environment-variables.ts b/api/src/config/environment-variables.ts
@@ -128,10 +128,10 @@ export class EnvironmentVariables {
     @IsArray()
     @IsEmail({}, { each: true })
     @Transform(({ value }: { value: string }) => value.split(",").filter((v) => v))
-    ACL_ALL_PERMISSIONS_EMAILS: string[];
+    ACL_ALL_PERMISSIONS_EMAILS: string[] = [];
 
     @IsArray()
     @IsFQDN({}, { each: true })
     @Transform(({ value }: { value: string }) => value.split(",").filter((v) => v))
-    ACL_ALL_PERMISSIONS_DOMAINS: string[];
+    ACL_ALL_PERMISSIONS_DOMAINS: string[] = [];
 }
diff --git a/site/.eslintrc.json b/site/.eslintrc.json
@@ -1,6 +1,6 @@
 {
     "extends": "@comet/eslint-config/nextjs",
-    "ignorePatterns": ["**/**/*.generated.ts"],
+    "ignorePatterns": ["**/**/*.generated.ts", "dist/**", "lang/**", "lang-compiled/**", "lang-extracted/**", ".next/**", "public/**"],
     "rules": {
         "no-restricted-imports": [
             "error",

diff --git a/site/package.json b/site/package.json
@@ -9,7 +9,7 @@
         "gql:watch": "graphql-codegen --watch",
         "prelint": "npm run intl:compile && run-p gql:types generate-block-types",
         "lint": "run-p lint:eslint lint:tsc lint:style intl:extract",
-        "lint:eslint": "eslint --max-warnings 0 --config ./.eslintrc.cli.js --ext .ts,.tsx,.js,.jsx,.json,.md src/ package.json",
+        "lint:eslint": "eslint --max-warnings 0 --config ./.eslintrc.cli.js --ext .ts,.tsx,.js,.jsx,.json,.md .",
         "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
         "lint:tsc": "tsc --project .",
         "lint:style": "npx stylelint '**/*.{ts,tsx,css}'",

diff --git a/site/src/common/blocks/HeadingBlock.tsx b/site/src/common/blocks/HeadingBlock.tsx
@@ -15,12 +15,12 @@ const eyebrowRenderers: Renderers = {
 const getHeadlineRenderers = (htmlTag: keyof HTMLElementTagNameMap): Renderers => ({
     inline: defaultRichTextInlineStyleMap,
     blocks: {
-        "header-one": createTextBlockRenderFn({ variant: "h600", component: htmlTag, bottomSpacing: true }),
-        "header-two": createTextBlockRenderFn({ variant: "h550", component: htmlTag, bottomSpacing: true }),
-        "header-three": createTextBlockRenderFn({ variant: "h500", component: htmlTag, bottomSpacing: true }),
-        "header-four": createTextBlockRenderFn({ variant: "h450", component: htmlTag, bottomSpacing: true }),
-        "header-five": createTextBlockRenderFn({ variant: "h400", component: htmlTag, bottomSpacing: true }),
-        "header-six": createTextBlockRenderFn({ variant: "h350", component: htmlTag, bottomSpacing: true }),
+        "header-one": createTextBlockRenderFn({ variant: "h600", as: htmlTag, bottomSpacing: true }),
+        "header-two": createTextBlockRenderFn({ variant: "h550", as: htmlTag, bottomSpacing: true }),
+        "header-three": createTextBlockRenderFn({ variant: "h500", as: htmlTag, bottomSpacing: true }),
+        "header-four": createTextBlockRenderFn({ variant: "h450", as: htmlTag, bottomSpacing: true }),
+        "header-five": createTextBlockRenderFn({ variant: "h400", as: htmlTag, bottomSpacing: true }),
+        "header-six": createTextBlockRenderFn({ variant: "h350", as: htmlTag, bottomSpacing: true }),
     },
 });
 
@@ -42,14 +42,14 @@ export const HeadingBlock = withPreview(
         return (
             <>
                 {hasRichTextBlockContent(eyebrow) && (
-                    <Typography variant="h400" component="h5" bottomSpacing>
+                    <Typography variant="h400" as="h5" bottomSpacing>
                         <RichTextBlock data={eyebrow} renderers={eyebrowRenderers} />
                     </Typography>
                 )}
                 <PreviewSkeleton
                     hasContent={hasRichTextBlockContent(headline)}
                     title={
-                        <HeadlineSkeleton variant="h550" component="span">
+                        <HeadlineSkeleton variant="h550" as="span">
                             Headline
                         </HeadlineSkeleton>
                     }

diff --git a/site/src/common/blocks/RichTextBlock.tsx b/site/src/common/blocks/RichTextBlock.tsx
@@ -54,7 +54,7 @@ const defaultRichTextRenderers: Renderers = {
         "unordered-list-item": (children, { depth, keys }) => (
             <ul key={keys[keys.length - 1]} className={`ul-level-${depth}`}>
                 {children.map((child, index) => (
-                    <Text component="li" key={keys[index]}>
+                    <Text as="li" key={keys[index]}>
                         {child}
                     </Text>
                 ))}
@@ -63,7 +63,7 @@ const defaultRichTextRenderers: Renderers = {
         "ordered-list-item": (children, { depth, keys }) => (
             <ol key={keys.join("|")} className={`ol-level-${depth}`}>
                 {children.map((child, index) => (
-                    <OrderedListItem $depth={depth} component="li" key={keys[index]}>
+                    <OrderedListItem $depth={depth} as="li" key={keys[index]}>
                         {child}
                     </OrderedListItem>
                 ))}

diff --git a/site/src/common/components/Typography.tsx b/site/src/common/components/Typography.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { ComponentProps } from "react";
 import styled, { css } from "styled-components";
 
 export type TypographyVariant = "h600" | "h550" | "h500" | "h450" | "h400" | "h350" | "p300" | "p200";
@@ -180,7 +180,7 @@ const typographyVariantStyle: Record<TypographyVariant, ReturnType<typeof css>>
     `,
 };
 
-const variantToElementMap: Record<TypographyVariant, keyof HTMLElementTagNameMap> = {
+const variantToElementMap: Record<TypographyVariant, "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"> = {
     h600: "h1",
     h550: "h2",
     h500: "h3",
@@ -191,30 +191,17 @@ const variantToElementMap: Record<TypographyVariant, keyof HTMLElementTagNameMap
     p200: "p",
 };
 
-export interface TypographyProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-    component?: keyof HTMLElementTagNameMap;
+export const Typography = styled.div.attrs<{
+    as?: unknown;
     variant?: TypographyVariant;
     bottomSpacing?: boolean;
-}
-
-export const Typography = ({ component, variant = "p300", bottomSpacing, children, ...restProps }: TypographyProps) => (
-    <Text as={component || variantToElementMap[variant]} $variant={variant} $bottomSpacing={bottomSpacing} {...restProps}>
-        {children}
-    </Text>
-);
-
-interface TextProps {
-    $variant: TypographyVariant;
-    $bottomSpacing?: boolean;
-}
-
-const Text = styled.div<TextProps>`
+}>((props) => ({ as: props.as ?? variantToElementMap[props.variant ?? "p300"] }))`
     font-family: ${({ theme }) => theme.fontFamily};
-    ${({ $variant }) => typographyVariantStyle[$variant]};
+    ${({ variant = "p300" }) => typographyVariantStyle[variant]};
     margin-top: 0;
 
-    ${({ theme, $bottomSpacing }) =>
-        !$bottomSpacing &&
+    ${({ theme, bottomSpacing }) =>
+        !bottomSpacing &&
         css`
             margin-bottom: 0;
 
@@ -223,3 +210,5 @@ const Text = styled.div<TextProps>`
             }
         `};
 `;
+
+export type TypographyProps = ComponentProps<typeof Typography>;