dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

Get basic compiling working with new CSS setup

Browse Source
This commit is contained in:
Dane Everitt 2020-07-03 13:55:33 -07:00
parent 7b75e7a648
commit 2193916fe4
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
18 changed files with 2159 additions and 959 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.babel-plugin-macrosrc.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
twin: {
preset: 'styled-components',
autoCssProp: true,
config: './tailwind.config.js',
},
styledComponents: {
pure: true,
displayName: false,
fileName: false,
},
};

23
babel.config.js Normal file
View File

@ -0,0 +1,23 @@
module.exports = {
presets: [
'@babel/typescript',
['@babel/env', {
modules: false,
useBuiltIns: 'entry',
corejs: 3,
}],
'@babel/react',
],
plugins: [
'babel-plugin-macros',
'styled-components',
'react-hot-loader/babel',
'@babel/transform-runtime',
'@babel/transform-react-jsx',
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
'@babel/proposal-optional-chaining',
'@babel/proposal-nullish-coalescing-operator',
'@babel/syntax-dynamic-import',
],
};

64
package.json
View File

@ -5,13 +5,13 @@
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"@fortawesome/react-fontawesome": "^0.1.4",
"@types/react-google-recaptcha": "^1.1.1",
"axios": "^0.19.0",
"axios": "^0.19.2",
"ayu-ace": "^2.0.4",
"brace": "^0.11.1",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"date-fns": "^1.29.0",
"easy-peasy": "^3.2.3",
"date-fns": "^2.14.0",
"easy-peasy": "^3.3.1",
"events": "^3.0.0",
"formik": "^2.1.4",
"i18next": "^19.0.0",
@ -22,23 +22,23 @@
"lodash-es": "^4.17.15",
"path": "^0.12.7",
"query-string": "^6.7.0",
"react": "^16.12.0",
"react": "^16.13.1",
"react-dom": "npm:@hot-loader/react-dom",
"react-google-recaptcha": "^2.0.1",
"react-hot-loader": "^4.12.18",
"react-hot-loader": "^4.12.21",
"react-i18next": "^11.2.1",
"react-redux": "^7.1.0",
"react-router-dom": "^5.1.2",
"react-transition-group": "^4.3.0",
"sockette": "^2.0.6",
"styled-components": "^4.4.1",
"styled-components": "^5.1.1",
"styled-components-breakpoint": "^3.0.0-preview.20",
"use-react-router": "^1.0.7",
"uuid": "^3.3.2",
"xterm": "^3.14.4",
"xterm-addon-attach": "^0.1.0",
"xterm-addon-fit": "^0.1.0",
"yup": "^0.27.0"
"yup": "^0.29.1"
},
"devDependencies": {
"@babel/core": "^7.7.5",
@ -47,6 +47,7 @@
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.7.5",
"@babel/preset-env": "^7.7.5",
"@babel/preset-react": "^7.7.4",
@ -60,32 +61,33 @@
"@types/lodash-es": "^4.17.3",
"@types/node": "^12.6.9",
"@types/query-string": "^6.3.0",
"@types/react": "^16.9.15",
"@types/react-dom": "^16.9.4",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.1",
"@types/react-router": "^5.1.3",
"@types/react-router-dom": "^5.1.3",
"@types/react-transition-group": "^2.9.2",
"@types/styled-components": "^4.4.0",
"@types/uuid": "^3.4.5",
"@types/webpack-env": "^1.13.6",
"@types/yup": "^0.26.17",
"@typescript-eslint/eslint-plugin": "^2.19.0",
"@typescript-eslint/parser": "^2.19.0",
"@types/webpack-env": "^1.15.2",
"@types/yup": "^0.29.3",
"@typescript-eslint/eslint-plugin": "^3.5.0",
"@typescript-eslint/parser": "^3.5.0",
"babel-loader": "^8.0.6",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-styled-components": "^1.10.7",
"babel-plugin-tailwind-components": "^0.5.10",
"cross-env": "^7.0.2",
"css-loader": "^3.2.1",
"cssnano": "^4.1.10",
"eslint": "^5.16.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.17.3",
"eslint": "^7.4.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react-hooks": "^2.1.2",
"eslint-plugin-standard": "^4.0.0",
"fork-ts-checker-webpack-plugin": "^1.5.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.5",
"eslint-plugin-standard": "^4.0.1",
"fork-ts-checker-webpack-plugin": "^5.0.6",
"glob-all": "^3.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
@ -97,17 +99,19 @@
"purgecss-webpack-plugin": "^1.6.0",
"redux-devtools-extension": "^2.13.8",
"resolve-url-loader": "^3.0.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"tailwindcss": "^0.7.4",
"terser-webpack-plugin": "^1.3.0",
"source-map-loader": "^1.0.1",
"style-loader": "^1.2.1",
"tailwindcss": "^1.4.6",
"terser-webpack-plugin": "^3.0.6",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"webpack": "^4.41.2",
"twin.macro": "^1.4.1",
"typescript": "^3.9.6",
"typescript-plugin-tw-template": "^2.0.1",
"webpack": "^4.43.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-manifest-plugin": "^2.0.3",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0",
"yarn-deduplicate": "^1.1.1"
},
"scripts": {

37
resources/scripts/.eslintrc.yml
View File

@ -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"

2
resources/scripts/components/App.tsx
View File

@ -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 */
};
}

6
resources/scripts/components/elements/ContentContainer.tsx
View File

@ -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;

13
resources/scripts/components/server/backups/BackupRow.tsx
View File

@ -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>

6
resources/scripts/components/server/files/FileObjectRow.tsx
View File

@ -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>

1
resources/scripts/gloabl.d.ts vendored
View File

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

2
resources/scripts/index.tsx
View File

@ -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.

4
resources/scripts/macros.d.ts vendored Normal file
View File

@ -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';

17
resources/scripts/style.d.ts vendored
View File

@ -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;
}

10
resources/scripts/theme.ts Normal file
View File

@ -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,
});

2
resources/views/templates/wrapper.blade.php
View File

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

114
tailwind.config.js Normal file
View File

@ -0,0 +1,114 @@
module.exports = {
theme: {
fontFamily: {
sans: [
'Rubik',
'-apple-system',
'BlinkMacSystemFont',
'"Helvetica Neue"',
'"Roboto"',
'system-ui',
'sans-serif',
],
header: [
'"IBM Plex Sans"',
'"Roboto"',
'system-ui',
'sans-serif',
],
serif: [
'Constantia',
'"Lucida Bright"',
'Lucidabright',
'"Lucida Serif"',
'Lucida',
'serif',
],
mono: [
'"IBM Plex Mono"',
'"Source Code Pro"',
'SourceCodePro',
'Menlo',
'Monaco',
'Consolas',
'monospace',
],
},
},
extend: {
colors: {
primary: {
50: 'hsl(202, 100%, 95%)', // lightest
100: 'hsl(204, 100%, 86%)', // lighter
200: 'hsl(206, 93%, 73%)',
300: 'hsl(208, 88%, 62%)',
400: 'hsl(210, 83%, 53%)', // light
500: 'hsl(212, 92%, 43%)', // base
600: 'hsl(214, 95%, 36%)', // dark
700: 'hsl(215, 96%, 32%)',
800: 'hsl(216, 98%, 25%)', // darker
900: 'hsl(218, 100%, 17%)', // darkest
},
neutral: {
50: 'hsl(216, 33%, 97%)',
100: 'hsl(214, 15%, 91%)',
200: 'hsl(210, 16%, 82%)',
300: 'hsl(211, 13%, 65%)',
400: 'hsl(211, 10%, 53%)',
500: 'hsl(211, 12%, 43%)',
600: 'hsl(209, 14%, 37%)',
700: 'hsl(209, 18%, 30%)',
800: 'hsl(209, 20%, 25%)',
900: 'hsl(210, 24%, 16%)',
},
red: {
50: 'hsl(360, 100%, 95%)',
100: 'hsl(360, 100%, 87%)',
200: 'hsl(360, 100%, 80%)',
300: 'hsl(360, 91%, 69%)',
400: 'hsl(360, 83%, 62%)',
500: 'hsl(356, 75%, 53%)',
600: 'hsl(354, 85%, 44%)',
700: 'hsl(352, 90%, 35%)',
800: 'hsl(350, 94%, 28%)',
900: 'hsl(348, 94%, 20%)',
},
yellow: {
50: 'hsl(49, 100%, 96%)',
100: 'hsl(48, 100%, 88%)',
200: 'hsl(48, 95%, 76%)',
300: 'hsl(48, 94%, 68%)',
400: 'hsl(44, 92%, 63%)',
500: 'hsl(42, 87%, 55%)',
600: 'hsl(36, 77%, 49%)',
700: 'hsl(29, 80%, 44%)',
800: 'hsl(22, 82%, 39%)',
900: 'hsl(15, 86%, 30%)',
},
cyan: {
50: 'hsl(171, 82%, 94%)',
100: 'hsl(172, 97%, 88%)',
200: 'hsl(174, 96%, 78%)',
300: 'hsl(176, 87%, 67%)',
400: 'hsl(178, 78%, 57%)',
500: 'hsl(180, 77%, 47%)',
600: 'hsl(182, 85%, 39%)',
700: 'hsl(184, 90%, 34%)',
800: 'hsl(186, 91%, 29%)',
900: 'hsl(188, 91%, 23%)',
},
green: {
50: 'hsl(125, 65%, 93%)',
100: 'hsl(127, 65%, 85%)',
200: 'hsl(124, 63%, 74%)',
300: 'hsl(123, 53%, 55%)',
400: 'hsl(123, 57%, 45%)',
500: 'hsl(122, 73%, 35%)',
600: 'hsl(122, 80%, 29%)',
700: 'hsl(125, 79%, 26%)',
800: 'hsl(125, 86%, 20%)',
900: 'hsl(125, 97%, 14%)',
},
},
},
};

14
tsconfig.json
View File

@ -1,12 +1,14 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"target": "es2015",
"module": "es2015",
"jsx": "react",
"strict": true,
"noEmit": true,
"noImplicitReturns": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"sourceMap": true,
"baseUrl": ".",
"lib": ["es2015", "dom"],
@ -14,7 +16,13 @@
"@/*": [
"./resources/scripts/*"
]
}
},
"plugins": [
{
"name": "typescript-plugin-tw-template"
}
],
"typeRoots": ["node_modules/@types"]
},
"include": [
"./resources/scripts/**/*"

109
webpack.config.js
View File

@ -12,7 +12,7 @@ const TerserPlugin = require('terser-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
let plugins = [
new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
// new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
new AssetsManifestPlugin({
writeToDisk: true,
publicPath: true,
@ -22,25 +22,25 @@ let plugins = [
];
if (isProduction) {
plugins = plugins.concat([
new PurgeCssPlugin({
paths: glob.sync([
path.join(__dirname, 'resources/scripts/**/*.tsx'),
path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
]),
whitelistPatterns: [/^xterm/],
extractors: [
{
extractor: class {
static extract (content) {
return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
}
},
extensions: ['html', 'ts', 'tsx', 'js', 'php'],
},
],
}),
]);
// plugins = plugins.concat([
// new PurgeCssPlugin({
// paths: glob.sync([
// path.join(__dirname, 'resources/scripts/**/*.tsx'),
// path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
// ]),
// whitelistPatterns: [/^xterm/],
// extractors: [
// {
// extractor: class {
// static extract (content) {
// return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
// }
// },
// extensions: ['html', 'ts', 'tsx', 'js', 'php'],
// },
// ],
// }),
// ]);
} else {
plugins.concat([new ForkTsCheckerWebpackPlugin()]);
}
@ -55,7 +55,6 @@ module.exports = {
},
entry: [
'react-hot-loader/patch',
'./resources/styles/main.css',
'./resources/scripts/index.tsx',
],
output: {
@ -70,65 +69,20 @@ module.exports = {
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: !isProduction,
presets: [
'@babel/typescript',
'@babel/env',
'@babel/react',
],
plugins: [
'tailwind-components',
'react-hot-loader/babel',
'@babel/transform-runtime',
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
'@babel/proposal-optional-chaining',
'@babel/proposal-nullish-coalescing-operator',
'@babel/syntax-dynamic-import',
],
},
},
],
loader: 'babel-loader',
options: {
cacheDirectory: !isProduction,
},
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, 'resources'),
],
// include: [
// path.resolve(__dirname, 'resources'),
// ],
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProduction,
},
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
importLoaders: 1,
},
},
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'resolve-url-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [
require('postcss-import'),
tailwind('./tailwind.js'),
require('postcss-preset-env')({
stage: 2,
}),
require('precss'),
].concat(isProduction ? require('cssnano') : []),
},
},
],
},
{
@ -138,6 +92,11 @@ module.exports = {
name: '[name].[ext]?[hash:8]',
},
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
}
],
},
resolve: {

2682
yarn.lock
View File

File diff suppressed because it is too large Load Diff