Get basic compiling working with new CSS setup

resources/scripts/.eslintrc.yml

@@ -1,23 +1,35 @@
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 6
+  ecmaFeatures:
+    jsx: true
   project: "./tsconfig.json"
   tsconfigRootDir: "./"
+settings:
+  react:
+    pragma: "React"
+    version: "detect"
+  linkComponents:
+    - name: Link
+      linkAttribute: to
+    - name: NavLink
+      linkAttribute: to
 env:
   browser: true
   es6: true
 plugins:
-  - "@typescript-eslint"
+  - "react"
   - "react-hooks"
+  - "@typescript-eslint"
 extends:
   - "standard"
+  - "plugin:react/recommended"
   - "plugin:@typescript-eslint/recommended"
-globals:
-  tw: "readonly"
 rules:
   indent:
     - error
     - 4
+    - SwitchCase: 1
   semi:
     - error
     - always
@@ -33,6 +45,25 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  no-restricted-imports:
+    - error
+    - paths:
+        - name: styled-components
+          message: Please import from styled-components/macro.
+      patterns:
+        - "!styled-components/macro"
+  "react/prop-types": 0
+  "react/display-name": 0
+  "react/jsx-indent-props":
+    - warn
+    - 4
+  "react/jsx-boolean-value":
+    - warn
+    - never
+  "react/jsx-closing-bracket-location":
+    - 1
+    - "line-aligned"
+  "react/jsx-closing-tag-location": 1
 overrides:
   - files:
       - "**/*.tsx"

resources/scripts/components/App.tsx

@@ -18,11 +18,13 @@ interface ExtendedWindow extends Window {
         uuid: string;
         username: string;
         email: string;
+        /* eslint-disable camelcase */
         root_admin: boolean;
         use_totp: boolean;
         language: string;
         updated_at: string;
         created_at: string;
+        /* eslint-enable camelcase */
     };
 }
 

resources/scripts/components/elements/ContentContainer.tsx

@@ -1,5 +1,6 @@
-import styled from 'styled-components';
-import { breakpoint } from 'styled-components-breakpoint';
+import styled from 'styled-components/macro';
+import { breakpoint } from '@/theme';
+import tw from 'twin.macro';
 
 const ContentContainer = styled.div`
     max-width: 1200px;
@@ -9,5 +10,6 @@ const ContentContainer = styled.div`
         ${tw`mx-auto`};
     `};
 `;
+ContentContainer.displayName = 'ContentContainer';
 
 export default ContentContainer;

resources/scripts/components/server/backups/BackupRow.tsx

@@ -1,18 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
-import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
@@ -65,7 +58,7 @@ export default ({ backup, className }: Props) => {
                     title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
                     className={'text-sm'}
                 >
-                    {distanceInWordsToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                    {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
                 </p>
                 <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
             </div>

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -3,9 +3,7 @@ import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
 import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
-import differenceInHours from 'date-fns/difference_in_hours';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
 import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
@@ -65,7 +63,7 @@ export default ({ file }: { file: FileObject }) => {
                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
                         format(file.modifiedAt, 'MMM Do, YYYY h:mma')
                         :
-                        distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
+                        formatDistanceToNow(file.modifiedAt, { addSuffix: true })
                     }
                 </div>
             </NavLink>

resources/scripts/gloabl.d.ts

@@ -1 +0,0 @@
-declare function tw (a: TemplateStringsArray | string): any;

resources/scripts/index.tsx

@@ -4,6 +4,8 @@ import App from '@/components/App';
 import './i18n';
 import { setConfig } from 'react-hot-loader';
 
+import 'tailwindcss/dist/base.min.css';
+
 // Prevents page reloads while making component changes which
 // also avoids triggering constant loading indicators all over
 // the place in development.

resources/scripts/macros.d.ts

@@ -0,0 +1,4 @@
+// This allows the use of css={} on JSX elements.
+//
+// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+import {} from 'styled-components/cssprop';

resources/scripts/style.d.ts

@@ -1,17 +0,0 @@
-import { Breakpoints, css, DefaultTheme, StyledProps } from 'styled-components';
-
-declare module 'styled-components' {
-    type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-    export interface DefaultTheme {
-        breakpoints: {
-            [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
-        };
-    }
-}
-
-declare module 'styled-components-breakpoint' {
-    type CSSFunction = (...params: Parameters<typeof css>) => <P extends object>({ theme }: StyledProps<P>) => ReturnType<typeof css>;
-
-    export const breakpoint: (breakpointA: Breakpoints, breakpointB?: Breakpoints) => CSSFunction;
-}

resources/scripts/theme.ts

@@ -0,0 +1,10 @@
+import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoint';
+
+type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+});

resources/views/templates/wrapper.blade.php

@@ -32,7 +32,7 @@
         @show
 
         @section('assets')
-            {!! $asset->css('main.css') !!}
+{{--            {!! $asset->css('main.css') !!}--}}
         @show
 
         @include('layouts.scripts')