mirror of
https://github.com/Aviortheking/next-template.git
synced 2025-06-07 12:19:55 +00:00
Updated to V3
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
parent
abefb301e0
commit
8da485f471
GPG Key ID:
BEEAF3722D0EBF64
12
.babelrc
12
.babelrc
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [[
|
|
||||||
"next/babel",
|
|
||||||
{
|
|
||||||
"styled-jsx": {
|
|
||||||
"plugins": [
|
|
||||||
"styled-jsx-plugin-stylus"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]]
|
|
||||||
}
|
|
||||||
22
.devcontainer/Dockerfile
Normal file
22
.devcontainer/Dockerfile
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
FROM node:alpine
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
RUN chown node:node -R /app && chmod 777 -R /app
|
||||||
|
|
||||||
|
# use non-root user
|
||||||
|
USER node
|
||||||
|
|
||||||
|
# Add packages
|
||||||
|
ADD --chown=node:node package*.json ./
|
||||||
|
|
||||||
|
# install dependencies && disable nextjs delemetry
|
||||||
|
RUN npm i && npx next telemetry disable
|
||||||
|
|
||||||
|
# Add project files
|
||||||
|
ADD --chown=node:node . .
|
||||||
|
|
||||||
|
# Expose NextJS Port
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD ["npm", "run", "dev"]
|
||||||
28
.dockerignore
Normal file
28
.dockerignore
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
dist/
|
||||||
|
*.asc
|
||||||
|
|
||||||
|
.vercel
|
||||||
@ -2,7 +2,7 @@ node_modules
|
|||||||
|
|
||||||
out
|
out
|
||||||
.next
|
.next
|
||||||
|
next.config.js
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
*.js
|
*.js
|
||||||
__tests__
|
__tests__
|
||||||
|
|||||||
@ -1,72 +1,7 @@
|
|||||||
{
|
{
|
||||||
"env": {
|
|
||||||
"browser": true,
|
|
||||||
"es6": true,
|
|
||||||
"node": true
|
|
||||||
},
|
|
||||||
"root": true,
|
|
||||||
"ignorePatterns": [
|
|
||||||
"src/shared",
|
|
||||||
"out",
|
|
||||||
".next",
|
|
||||||
"node_modules",
|
|
||||||
"*.js"
|
|
||||||
],
|
|
||||||
"extends": [
|
"extends": [
|
||||||
"eslint:recommended",
|
"./node_modules/@dzeio/config/eslint/react-typescript",
|
||||||
"plugin:react/recommended",
|
"plugin:@next/next/recommended"
|
||||||
"google",
|
|
||||||
"plugin:@typescript-eslint/recommended",
|
|
||||||
"plugin:sonarjs/recommended",
|
|
||||||
"plugin:import/errors",
|
|
||||||
"plugin:import/warnings"
|
|
||||||
],
|
],
|
||||||
"globals": {
|
"root": true
|
||||||
"Atomics": "readonly",
|
|
||||||
"SharedArrayBuffer": "readonly"
|
|
||||||
},
|
|
||||||
"parser": "@typescript-eslint/parser",
|
|
||||||
"parserOptions": {
|
|
||||||
"project": "tsconfig.json",
|
|
||||||
"ecmaFeatures": {
|
|
||||||
"jsx": true
|
|
||||||
},
|
|
||||||
"ecmaVersion": 2018,
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"settings": {
|
|
||||||
"react": {
|
|
||||||
"version": "detect"
|
|
||||||
},
|
|
||||||
"import/parsers": {
|
|
||||||
"@typescript-eslint/parser": [".ts", ".tsx"]
|
|
||||||
},
|
|
||||||
"import/resolver": {
|
|
||||||
"typescript": {
|
|
||||||
"alwaysTryTypes": true // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
"react",
|
|
||||||
"@typescript-eslint",
|
|
||||||
"sonarjs",
|
|
||||||
"import"
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"indent": ["error", "tab"],
|
|
||||||
"@typescript-eslint/quotes": ["error", "single", { "avoidEscape": true }],
|
|
||||||
"semi": ["error", "never"],
|
|
||||||
"no-tabs": "off",
|
|
||||||
"require-jsdoc": "off",
|
|
||||||
"no-invalid-this": "off",
|
|
||||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
|
||||||
"max-len": ["warn", { "code": 120 }],
|
|
||||||
"object-curly-spacing": ["error", "always"],
|
|
||||||
"comma-dangle": ["error", "never"],
|
|
||||||
"padded-blocks": ["error", { "classes": "always" }],
|
|
||||||
"import/order": ["error"],
|
|
||||||
"import/no-named-as-default-member": "off",
|
|
||||||
"import/no-named-as-default": "off"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
10
.gitattributes
vendored
10
.gitattributes
vendored
@ -1,6 +1,4 @@
|
|||||||
*.ttf filter=lfs diff=lfs merge=lfs -text
|
* text=auto eol=lf
|
||||||
*.eot filter=lfs diff=lfs merge=lfs -text
|
*.png binary
|
||||||
*.woff filter=lfs diff=lfs merge=lfs -text
|
*.jpg binary
|
||||||
*.woff2 filter=lfs diff=lfs merge=lfs -text
|
*.jpeg binary
|
||||||
*.jpg filter=lfs diff=lfs merge=lfs -text
|
|
||||||
*.png filter=lfs diff=lfs merge=lfs -text
|
|
||||||
|
|||||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,5 +1,3 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
/.pnp
|
/.pnp
|
||||||
@ -25,3 +23,5 @@ yarn-debug.log*
|
|||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
dist/
|
dist/
|
||||||
|
*.asc
|
||||||
|
db/
|
||||||
|
|||||||
17
.vscode/launch.json
vendored
Normal file
17
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "docker build -f ./.devcontainer/Dockerfile -t nextjs_project_dev . && docker run --rm -it --mount type=bind,source=\"$(pwd)\",target=/app --publish 127.0.0.1:3000:3000 nextjs_project_dev",
|
||||||
|
"name": "Run devcontainer",
|
||||||
|
"request": "launch",
|
||||||
|
// "type": "",
|
||||||
|
"env": {
|
||||||
|
"DOCKER_BUILDKIT": "0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -1,6 +1,3 @@
|
|||||||
{
|
{
|
||||||
"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
|
"typescript.tsdk": "node_modules\\typescript\\lib"
|
||||||
"stylelint.validate": [
|
|
||||||
"stylus"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
40
Dockerfile
40
Dockerfile
@ -1,13 +1,37 @@
|
|||||||
|
# Production Dockerfile
|
||||||
|
|
||||||
|
FROM node:alpine as BUILD_IMAGE
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
ADD package.json package-lock.json ./
|
||||||
|
|
||||||
|
# install dependencies
|
||||||
|
RUN npm i
|
||||||
|
|
||||||
|
# Add project files
|
||||||
|
ADD . .
|
||||||
|
|
||||||
|
# build
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# remove dev dependencies
|
||||||
|
RUN npm prune --production
|
||||||
|
|
||||||
|
# go to another VM
|
||||||
FROM node:alpine
|
FROM node:alpine
|
||||||
|
|
||||||
# instal yarn
|
# go to folder
|
||||||
RUN apk -q add yarn
|
WORKDIR /app
|
||||||
|
|
||||||
# Go to user home
|
# copy from build image
|
||||||
WORKDIR /home/tcgdex
|
COPY --from=BUILD_IMAGE /app/package.json ./package.json
|
||||||
|
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules
|
||||||
|
COPY --from=BUILD_IMAGE /app/.next ./.next
|
||||||
|
COPY --from=BUILD_IMAGE /app/public ./public
|
||||||
|
|
||||||
COPY . .
|
# Expose port
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
RUN yarn && yarn build && yarn sitemap
|
# run it !
|
||||||
|
CMD ["npm", "run", "start"]
|
||||||
CMD ["yarn", "server"]
|
|
||||||
|
|||||||
66
README.md
66
README.md
@ -1,23 +1,17 @@
|
|||||||
# Next Template
|
# Next Template
|
||||||
|
|
||||||
_if a line contains the following `<cs>` it means that it is only used on a Custom Server and that it can safely removed if it is not used_
|
|
||||||
|
|
||||||
## Folders
|
## Folders
|
||||||
|
|
||||||
- \__tests__: Test files to test webpage or single components
|
- \__tests__: Test files to test webpage or single components
|
||||||
- .vscode: VSCode settings for Stylelint
|
|
||||||
- docker: Docker files to launch in a Container
|
- docker: Docker files to launch in a Container
|
||||||
- public: Static files
|
- public: Static files
|
||||||
- assets: Generally used for Static assets like Pictures
|
|
||||||
- scripts: Contains Addons script (like Favicon generation or sitemap generation)
|
|
||||||
- src: Source folder
|
- src: Source folder
|
||||||
- client: Client-side Elements
|
- components: Contains your React Components
|
||||||
- components: Components used in pages
|
- libs: Contains your libs or utility files
|
||||||
- libs: Code used by the Client
|
- models: Contains your Models
|
||||||
- styl: Stylus file location
|
|
||||||
- common: Elements used by both Client-side and Server-side code
|
|
||||||
- pages: Contains your NextJS pages
|
- pages: Contains your NextJS pages
|
||||||
- server: Custom server folder `<cs>`
|
- styl: Contains your Stylus files
|
||||||
|
- modules: Stylus module location
|
||||||
|
|
||||||
## TODO list
|
## TODO list
|
||||||
|
|
||||||
@ -25,66 +19,44 @@ _if a line contains the following `<cs>` it means that it is only used on a Cust
|
|||||||
|
|
||||||
- [x] Support Typescript
|
- [x] Support Typescript
|
||||||
- [x] Support Javascript
|
- [x] Support Javascript
|
||||||
- [ ] Support Javascript files Linting
|
- [x] Support Javascript files Linting
|
||||||
- [x] Unit Testing
|
- [x] Unit Testing
|
||||||
- [ ] Lint unit tests
|
- [ ] Lint unit tests
|
||||||
|
|
||||||
### Stylus
|
### Stylus
|
||||||
|
|
||||||
- [x] Support Stylus files
|
- [x] Support Stylus files
|
||||||
- [x] Support Stylus Styled-jsx (mutually exclusive with purgeCSS)
|
- [ ] Support PurgeCSS
|
||||||
- [x] Support PurgeCSS (mutually exclusive with styled-jsx)
|
|
||||||
- [ ] Support both Stylus CSS modules and purge CSS
|
|
||||||
- [ ] Support typed stylus files
|
- [ ] Support typed stylus files
|
||||||
|
|
||||||
## Custom Server
|
## Dependencies
|
||||||
|
|
||||||
If you want to have a Custom server you simply have to start editing `src/server/server.ts` and after that to dev run `yarn cs-dev`
|
- @dzeio/components: Graphic components
|
||||||
|
- @dzeio/config: Configuration files in a NPM lib
|
||||||
## Packages
|
- critters: next dependency
|
||||||
|
- lucide-react: @dzeio/components dependency
|
||||||
### Dependencies
|
|
||||||
|
|
||||||
- @zeit/next-stylus: Stylus support in Nextjs
|
|
||||||
- express: Server `<cs>`
|
|
||||||
- glob: Sitemap Generation
|
|
||||||
- next: Nextjs
|
- next: Nextjs
|
||||||
- next-compose-plugins: Better plugin formatting in config
|
- next-compose-plugins: Better plugin formatting in config
|
||||||
- next-purgecss: PurgeCSS Plugin in config
|
- next-purgecss: PurgeCSS Plugin in config
|
||||||
- next-seo: SEO for NextJS
|
- next-pre-css: Allow to compile Stylus for NextJS
|
||||||
|
- next-seo: SEO for nextjs
|
||||||
- react: React
|
- react: React
|
||||||
- react-dom: React DOM (React Dependency)
|
- react-dom: React DOM (React Dependency)
|
||||||
- react-feather: Icon library
|
- stylus: next-pre-css dependency
|
||||||
- serve: Server for static website
|
- stylus-loader: next-pre-css dependency
|
||||||
- styled-jsx-plugin-stylus: Styled-JSX plugin of Stylus
|
|
||||||
- stylus: Stylus
|
|
||||||
- typescript: Typescript
|
- typescript: Typescript
|
||||||
- webpack: Webpack
|
- webpack: Webpack
|
||||||
|
|
||||||
### Dev Dependencies
|
## Dev Dependencies
|
||||||
|
|
||||||
- @babel/core: Tests Dependency
|
- @babel/core: Tests Dependency
|
||||||
- @babel/preset-env: Tests Dependency
|
- @next/eslint-plugin-next: nextjs dependency for eslint
|
||||||
- @babel/preset-react: Tests Dependency
|
|
||||||
- @types/express: Express typing for Typescript `<cs>`
|
|
||||||
- @types/jest: Testing Typing
|
|
||||||
- @types/node: Typescript Typing
|
- @types/node: Typescript Typing
|
||||||
- @types/react: Typescript Typing
|
- @types/react: Typescript Typing
|
||||||
- @types/react-test-renderer: Testings Typing
|
|
||||||
- @typescript-eslint/eslint-plugin: ESLint Typescript Plugin
|
- @typescript-eslint/eslint-plugin: ESLint Typescript Plugin
|
||||||
- @typescript-eslint/parser: ESLint Typescript parser
|
- @typescript-eslint/parser: ESLint Typescript parser
|
||||||
- babel-jest: Compile files for jest use
|
|
||||||
- eslint: ESLint
|
- eslint: ESLint
|
||||||
- eslint-config-google: ESLint base configuration
|
- eslint-config-next: ESLint Next Plugin
|
||||||
- eslint-import-resolver-typescript:
|
|
||||||
- eslint-plugin-import: eslint support for imports
|
|
||||||
- eslint-plugin-react: ESLint React Plugin
|
- eslint-plugin-react: ESLint React Plugin
|
||||||
- eslint-plugin-sonarjs: eslint support for code quality
|
|
||||||
- favicons: Favicon generator
|
|
||||||
- jest: Jest tessting framework
|
- jest: Jest tessting framework
|
||||||
- react-test-renderer: Test React components
|
- react-test-renderer: Test React components
|
||||||
- sitemap: Sitemap generator
|
|
||||||
- stylelint: Stylesheet linting
|
|
||||||
- stylelint-config-recommended: Stylelint recommended settings
|
|
||||||
- stylelint-plugin-stylus: Stylelint plugin for stylus
|
|
||||||
- ts-node-dev: Start the developpement server and restart it on changes `<cs>`
|
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import renderer from 'react-test-renderer'
|
|
||||||
import HelloWorld from '../../src/client/components/HelloWorld'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Example Test
|
|
||||||
*
|
|
||||||
* on first run it will generate a .snap file and after will compare result with it
|
|
||||||
*/
|
|
||||||
|
|
||||||
it('render a h1', () => {
|
|
||||||
const tree = renderer.create((<HelloWorld>Test</HelloWorld>)).toJSON()
|
|
||||||
expect(tree).toMatchSnapshot()
|
|
||||||
})
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`render a h1 1`] = `
|
|
||||||
<h1
|
|
||||||
className="jsx-3954099876"
|
|
||||||
>
|
|
||||||
Test
|
|
||||||
</h1>
|
|
||||||
`;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"seo": {
|
|
||||||
"openGraph": {
|
|
||||||
"type": "website",
|
|
||||||
"locale": "en_IE",
|
|
||||||
"url": "https://www.example.com/",
|
|
||||||
"site_name": "SiteName"
|
|
||||||
},
|
|
||||||
"twitter": {
|
|
||||||
"handle": "@handle",
|
|
||||||
"site": "@site",
|
|
||||||
"cardType": "summary_large_image"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
version: "3"
|
|
||||||
services:
|
|
||||||
tcgdex:
|
|
||||||
volumes:
|
|
||||||
- ../:/home/tcgdex
|
|
||||||
command: "yarn dev"
|
|
||||||
tty: true
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
phpmyadmin:
|
|
||||||
image: phpmyadmin/phpmyadmin
|
|
||||||
ports:
|
|
||||||
- 8081:80
|
|
||||||
networks:
|
|
||||||
- network
|
|
||||||
env_file:
|
|
||||||
- .env
|
|
||||||
- .env.local
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
version: "3"
|
|
||||||
services:
|
|
||||||
tcgdex:
|
|
||||||
restart: "always"
|
|
||||||
ports:
|
|
||||||
- "127.0.0.1:4567:3000"
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
version: "3"
|
|
||||||
services:
|
|
||||||
tcgdex:
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
version: "3"
|
|
||||||
services:
|
|
||||||
tcgdex:
|
|
||||||
build:
|
|
||||||
context: ../
|
|
||||||
dockerfile: Dockerfile
|
|
||||||
networks:
|
|
||||||
- network
|
|
||||||
depends_on:
|
|
||||||
- db
|
|
||||||
env_file:
|
|
||||||
- .env
|
|
||||||
- .env.local
|
|
||||||
|
|
||||||
db:
|
|
||||||
image: mysql
|
|
||||||
command: --default-authentication-plugin=mysql_native_password
|
|
||||||
env_file:
|
|
||||||
- .env
|
|
||||||
- .env.local
|
|
||||||
networks:
|
|
||||||
- network
|
|
||||||
volumes:
|
|
||||||
- ./.storage/mysql/:/var/lib/mysql
|
|
||||||
|
|
||||||
networks:
|
|
||||||
network:
|
|
||||||
external: false
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
collectCoverageFrom: [
|
|
||||||
'**/*.{js,jsx,ts,tsx}',
|
|
||||||
'!**/*.d.ts',
|
|
||||||
'!**/node_modules/**',
|
|
||||||
],
|
|
||||||
testPathIgnorePatterns: ['/node_modules/', '/.next/'],
|
|
||||||
transform: {
|
|
||||||
'^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
|
|
||||||
},
|
|
||||||
transformIgnorePatterns: [
|
|
||||||
'/node_modules/',
|
|
||||||
'^.+\\.module\\.(css|sass|scss)$',
|
|
||||||
],
|
|
||||||
moduleNameMapper: {
|
|
||||||
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
4
next-env.d.ts
vendored
4
next-env.d.ts
vendored
@ -1,2 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/types/global" />
|
/// <reference types="next/types/global" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
|
|||||||
@ -1,41 +1,7 @@
|
|||||||
const stylus = require('@zeit/next-stylus')
|
// Use Compose plugin for easier maintenance
|
||||||
const purgeCSS = require('next-purgecss')
|
|
||||||
const withPlugins = require('next-compose-plugins')
|
const withPlugins = require('next-compose-plugins')
|
||||||
const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
|
const { plugins, config } = require('@dzeio/config/next.config')
|
||||||
|
|
||||||
module.exports = withPlugins([
|
module.exports = withPlugins([...plugins],
|
||||||
[stylus, {
|
config()
|
||||||
cssModules: true,
|
|
||||||
cssLoaderOptions: {
|
|
||||||
localIdentName: "[hash:base64:6]",
|
|
||||||
},
|
|
||||||
[PHASE_DEVELOPMENT_SERVER]: {
|
|
||||||
cssLoaderOptions: {
|
|
||||||
localIdentName: "[path][name]__[local]"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
// [purgeCSS, {
|
|
||||||
// purgeCssPaths: [
|
|
||||||
// 'pages/**/*',
|
|
||||||
// 'components/**/*',
|
|
||||||
// 'styl/**/*'
|
|
||||||
// ],
|
|
||||||
// purgeCSS: {
|
|
||||||
// content: [
|
|
||||||
// 'components/**/*.tsx',
|
|
||||||
// 'pages/**/*.tsx'
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// }],
|
|
||||||
], {
|
|
||||||
plugins: [
|
|
||||||
["styled-jsx/babel", {
|
|
||||||
optimizeForSpeed: true,
|
|
||||||
vendorPrefixes: true,
|
|
||||||
sourceMaps: true,
|
|
||||||
plugins: ["styled-jsx-plugin-stylus"]
|
|
||||||
}]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
|
|||||||
23785
package-lock.json
generated
Normal file
23785
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
@ -1,62 +1,42 @@
|
|||||||
{
|
{
|
||||||
"name": "@avior/next-template",
|
"name": "@avior/next-template",
|
||||||
"version": "2.0.0",
|
"version": "3.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"cs-dev": "ts-node --project tsconfig.server.json src/server/server.ts --respawn --transpileOnly --prefer-ts --watch next.config.js,.env --ignore-watch .next --ignore-watch src/pages --ignore-watch src/client --ignore-watch scripts src/server/server.ts",
|
"build": "next build",
|
||||||
"build": "node scripts/generateFavicons && next build && tsc --project tsconfig.server.json",
|
"start": "next start",
|
||||||
"cs-server": "NODE_ENV=production node --experimental-modules dist/server/server.js",
|
|
||||||
"server": "next start",
|
|
||||||
"export": "next export && node scripts/generateSitemap",
|
|
||||||
"serve": "serve out",
|
|
||||||
"prod:server": "yarn build && yarn server",
|
|
||||||
"prod:static": "yarn build && yarn export && yarn serve",
|
|
||||||
"lint": "eslint . --ext .ts,.tsx",
|
"lint": "eslint . --ext .ts,.tsx",
|
||||||
"test": "jest --config jext.config.js"
|
"test": "jest --coverage"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@zeit/next-stylus": "^1.0.1",
|
"@dzeio/components": "^0.11.2",
|
||||||
"express": "^4.17.1",
|
"@dzeio/config": "^1.0.0",
|
||||||
"glob": "^7.1.6",
|
"critters": "^0.0.10",
|
||||||
"next": "^9.3.3",
|
"lucide-react": "^0.16.00",
|
||||||
|
"next": "^11.0.0",
|
||||||
"next-compose-plugins": "^2.2.0",
|
"next-compose-plugins": "^2.2.0",
|
||||||
"next-purgecss": "^4.0.0",
|
"next-pre-css": "^1.0.0",
|
||||||
"next-seo": "^4.7.3",
|
"next-seo": "^4.28.1",
|
||||||
"react": "^16.12.0",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^17.0.1",
|
||||||
"react-feather": "^2.0.8",
|
"stylus": "^0.55.0",
|
||||||
"serve": "^11.3.0",
|
"stylus-loader": "^6.0.0",
|
||||||
"styled-jsx-plugin-stylus": "^0.0.4",
|
"typescript": "^4.1.3",
|
||||||
"stylus": "^0.54.7",
|
"webpack": "^5.32.0"
|
||||||
"webpack": "^4.41.5"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.8.7",
|
"@babel/core": "^7.14.6",
|
||||||
"@babel/preset-env": "^7.8.6",
|
"@next/eslint-plugin-next": "^11.0.0",
|
||||||
"@babel/preset-react": "^7.8.3",
|
"@types/node": "^16.0.0",
|
||||||
"@types/express": "^4.17.6",
|
"@types/react": "^17.0.1",
|
||||||
"@types/jest": "^26.0.13",
|
"@typescript-eslint/eslint-plugin": "^4.15.0",
|
||||||
"@types/node": "^14.0.0",
|
"@typescript-eslint/parser": "^4.15.0",
|
||||||
"@types/react": "^16.9.17",
|
|
||||||
"@types/react-test-renderer": "^16.9.2",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^4.1.0",
|
|
||||||
"@typescript-eslint/parser": "^4.1.0",
|
|
||||||
"babel-jest": "^26.0.0",
|
|
||||||
"eslint": "^7.1.0",
|
"eslint": "^7.1.0",
|
||||||
"eslint-config-google": "^0.14.0",
|
"eslint-config-next": "^11.0.0",
|
||||||
"eslint-import-resolver-typescript": "^2.3.0",
|
|
||||||
"eslint-plugin-import": "^2.22.0",
|
|
||||||
"eslint-plugin-react": "^7.18.3",
|
"eslint-plugin-react": "^7.18.3",
|
||||||
"eslint-plugin-sonarjs": "^0.5.0",
|
"jest": "^27.0.6",
|
||||||
"favicons": "^6.2.0",
|
"react-test-renderer": "^17.0.2"
|
||||||
"jest": "^26.0.0",
|
|
||||||
"react-test-renderer": "^16.13.0",
|
|
||||||
"sitemap": "^6.3.0",
|
|
||||||
"stylelint": "^13.7.1",
|
|
||||||
"stylelint-config-recommended": "^3.0.0",
|
|
||||||
"stylelint-plugin-stylus": "^0.9.0",
|
|
||||||
"ts-node-dev": "^1.0.0-pre.44",
|
|
||||||
"typescript": "^4.0.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
62
public/.gitignore
vendored
62
public/.gitignore
vendored
@ -1,62 +0,0 @@
|
|||||||
favicon-16x16.png
|
|
||||||
favicon-32x32.png
|
|
||||||
favicon-48x48.png
|
|
||||||
favicon.ico
|
|
||||||
android-chrome-36x36.png
|
|
||||||
android-chrome-48x48.png
|
|
||||||
android-chrome-72x72.png
|
|
||||||
android-chrome-96x96.png
|
|
||||||
android-chrome-144x144.png
|
|
||||||
android-chrome-192x192.png
|
|
||||||
android-chrome-256x256.png
|
|
||||||
android-chrome-384x384.png
|
|
||||||
android-chrome-512x512.png
|
|
||||||
apple-touch-icon-57x57.png
|
|
||||||
apple-touch-icon-60x60.png
|
|
||||||
apple-touch-icon-72x72.png
|
|
||||||
apple-touch-icon-76x76.png
|
|
||||||
apple-touch-icon-114x114.png
|
|
||||||
apple-touch-icon-120x120.png
|
|
||||||
apple-touch-icon-144x144.png
|
|
||||||
apple-touch-icon-152x152.png
|
|
||||||
apple-touch-icon-167x167.png
|
|
||||||
apple-touch-icon-180x180.png
|
|
||||||
apple-touch-icon-1024x1024.png
|
|
||||||
apple-touch-icon.png
|
|
||||||
apple-touch-icon-precomposed.png
|
|
||||||
apple-touch-startup-image-640x1136.png
|
|
||||||
apple-touch-startup-image-750x1334.png
|
|
||||||
apple-touch-startup-image-828x1792.png
|
|
||||||
apple-touch-startup-image-1125x2436.png
|
|
||||||
apple-touch-startup-image-1242x2208.png
|
|
||||||
apple-touch-startup-image-1242x2688.png
|
|
||||||
apple-touch-startup-image-1536x2048.png
|
|
||||||
apple-touch-startup-image-1668x2224.png
|
|
||||||
apple-touch-startup-image-1668x2388.png
|
|
||||||
apple-touch-startup-image-2048x2732.png
|
|
||||||
apple-touch-startup-image-1136x640.png
|
|
||||||
apple-touch-startup-image-2160x1620.png
|
|
||||||
apple-touch-startup-image-1620x2160.png
|
|
||||||
apple-touch-startup-image-1334x750.png
|
|
||||||
apple-touch-startup-image-1792x828.png
|
|
||||||
apple-touch-startup-image-2436x1125.png
|
|
||||||
apple-touch-startup-image-2208x1242.png
|
|
||||||
apple-touch-startup-image-2688x1242.png
|
|
||||||
apple-touch-startup-image-2048x1536.png
|
|
||||||
apple-touch-startup-image-2224x1668.png
|
|
||||||
apple-touch-startup-image-2388x1668.png
|
|
||||||
apple-touch-startup-image-2732x2048.png
|
|
||||||
coast-228x228.png
|
|
||||||
firefox_app_60x60.png
|
|
||||||
firefox_app_128x128.png
|
|
||||||
firefox_app_512x512.png
|
|
||||||
mstile-70x70.png
|
|
||||||
mstile-144x144.png
|
|
||||||
mstile-150x150.png
|
|
||||||
mstile-310x150.png
|
|
||||||
mstile-310x310.png
|
|
||||||
yandex-browser-50x50.png
|
|
||||||
manifest.json
|
|
||||||
manifest.webapp
|
|
||||||
browserconfig.xml
|
|
||||||
yandex-browser-manifest.json
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8109 101.066L25 128.807L44.2174 84.4441L72.8109 101.066ZM79.7067 24.0024L125 128.807L45.0697 82.3519L70.2925 24.0024C71.8679 22.4526 73.4308 21.8064 74.9806 22.0652C76.556 21.7808 78.1321 22.427 79.7067 24.0024Z" fill="#123456"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 390 B |
@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
cd ..
|
|
||||||
docker-compose -f docker/docker-compose.yml -f docker/docker-compose.override.yml up
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
const favicons = require('favicons')
|
|
||||||
const package = require('../package.json')
|
|
||||||
const config = require('../scriptsConfig.json').favicons
|
|
||||||
const fs = require('fs')
|
|
||||||
|
|
||||||
if (!config.enabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// image source
|
|
||||||
const source = config.sourceFile
|
|
||||||
|
|
||||||
// Output folder
|
|
||||||
const outFolder = config.assetsOutput
|
|
||||||
|
|
||||||
// Typescript React outpout file
|
|
||||||
// NOTE: add the file to your .gitignore
|
|
||||||
const tsxOutput = config.tsxOutput
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
const configuration = config.config
|
|
||||||
if (configuration.version === 'package.json') {
|
|
||||||
configuration.version = package.version
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Generating Favicons...')
|
|
||||||
favicons(source, configuration, (error, response) => {
|
|
||||||
if (error) {
|
|
||||||
console.log(error)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Saving Files')
|
|
||||||
let gitignore = ''
|
|
||||||
for (const file of response.images) {
|
|
||||||
fs.writeFileSync(`${outFolder}/${file.name}`, file.contents)
|
|
||||||
gitignore += `${file.name}\n`
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const file of response.files) {
|
|
||||||
fs.writeFileSync(`${outFolder}/${file.name}`, file.contents)
|
|
||||||
gitignore += `${file.name}\n`
|
|
||||||
}
|
|
||||||
fs.writeFileSync(`${outFolder}/.gitignore`, gitignore)
|
|
||||||
|
|
||||||
if (!tsxOutput) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var htmlList = response.html.map((el) => ` ${el.replace('>', '/>')}`).join('\n')
|
|
||||||
|
|
||||||
fs.writeFileSync(tsxOutput, `import React from 'react'
|
|
||||||
|
|
||||||
export default class Favicons extends React.Component {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<>
|
|
||||||
${htmlList}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
console.log('Saved!')
|
|
||||||
})
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
/**
|
|
||||||
* This program generate a simple sitmap.xml file
|
|
||||||
* for static exports
|
|
||||||
**/
|
|
||||||
|
|
||||||
const config = require('../scriptsConfig.json').sitemap
|
|
||||||
const glob = require('glob')
|
|
||||||
const fs = require('fs/promises')
|
|
||||||
const { SitemapStream , streamToPromise } = require('sitemap')
|
|
||||||
const { Readable } = require( 'stream' )
|
|
||||||
|
|
||||||
if (!config.enabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log('Generating Sitemap...')
|
|
||||||
|
|
||||||
const stream = new SitemapStream(config.config)
|
|
||||||
|
|
||||||
;(async () => {
|
|
||||||
console.log('Fetching files')
|
|
||||||
const files = await new Promise((res, rej) => {
|
|
||||||
glob('./out/**/*.html', (err, results) => {
|
|
||||||
if (err) {
|
|
||||||
rej(err)
|
|
||||||
}
|
|
||||||
res(results.map(el => ({url: el.replace('./out', '').replace('index.html', '')})))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
console.log('Merging with custom routes')
|
|
||||||
for (const item of config.customRoutes) {
|
|
||||||
const index = files.findIndex((val) => val.url === item.url)
|
|
||||||
if (index !== -1) {
|
|
||||||
files[index] = item
|
|
||||||
} else {
|
|
||||||
files.push(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Pasing to sitemap.xml')
|
|
||||||
const res = await streamToPromise(Readable.from(files).pipe(stream))
|
|
||||||
|
|
||||||
console.log('Writing file')
|
|
||||||
await fs.writeFile(config.outputPath, res)
|
|
||||||
|
|
||||||
process.exit(0)
|
|
||||||
})()
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
cd ..
|
|
||||||
docker-compose -f docker/docker-compose.yml -f docker/docker-compose.test.yml up --build
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
cd ..
|
|
||||||
docker-compose -f docker/docker-compose.yml -f docker/docker-compose.prod.yml up -d --build
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
{
|
|
||||||
"sitemap": {
|
|
||||||
"enabled": false,
|
|
||||||
"outputPath": "./out/sitemap.xml",
|
|
||||||
"config": {
|
|
||||||
"hostname": "https://www.example.com",
|
|
||||||
"lastmodDateOnly": false,
|
|
||||||
"xmlns": {
|
|
||||||
"news": false,
|
|
||||||
"xhtml": false,
|
|
||||||
"image": false,
|
|
||||||
"video": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"customRoutes": [
|
|
||||||
{
|
|
||||||
"url": "/",
|
|
||||||
"changefreq": "weekly",
|
|
||||||
"priority": 1.0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"favicons": {
|
|
||||||
"enabled": false,
|
|
||||||
"sourceFile":"./public/assets/logo.svg",
|
|
||||||
"assetsOutput": "./public/",
|
|
||||||
"tsxOutput": "./src/client/components/Favicons.tsx",
|
|
||||||
"config": {
|
|
||||||
"path": "/",
|
|
||||||
"appName": "Next Template",
|
|
||||||
"appShortName": "Next Template",
|
|
||||||
"appDescription": "Next Template",
|
|
||||||
"developerName": null,
|
|
||||||
"developerURL": null,
|
|
||||||
"dir": "auto",
|
|
||||||
"lang": "en-US",
|
|
||||||
"background": "#fff",
|
|
||||||
"theme_color": "#123456",
|
|
||||||
"appleStatusBarStyle": "black-translucent",
|
|
||||||
"display": "standalone",
|
|
||||||
"orientation": "any",
|
|
||||||
"scope": "/",
|
|
||||||
"start_url": "/",
|
|
||||||
"version": "package.json",
|
|
||||||
"logging": false,
|
|
||||||
"pixel_art": false,
|
|
||||||
"loadManifestWithCredentials": false,
|
|
||||||
"icons": {
|
|
||||||
"android": true,
|
|
||||||
"appleIcon": true,
|
|
||||||
"appleStartup": true,
|
|
||||||
"coast": true,
|
|
||||||
"favicons": true,
|
|
||||||
"firefox": true,
|
|
||||||
"windows": true,
|
|
||||||
"yandex": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
3
src/CONSTANTS.ts
Normal file
3
src/CONSTANTS.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
// Put your program constants here
|
||||||
|
|
||||||
|
export const TEST = true
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default class Favicons extends React.Component {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<>
|
|
||||||
<link rel="shortcut icon" href="/favicon.ico"/>
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
|
|
||||||
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"/>
|
|
||||||
<link rel="manifest" href="/manifest.json"/>
|
|
||||||
<meta name="mobile-web-app-capable" content="yes"/>
|
|
||||||
<meta name="theme-color" content="#123456"/>
|
|
||||||
<meta name="application-name" content="Next Template"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
|
|
||||||
<link rel="apple-touch-icon" sizes="1024x1024" href="/apple-touch-icon-1024x1024.png"/>
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
|
||||||
<meta name="apple-mobile-web-app-title" content="Next Template"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-640x1136.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-750x1334.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-828x1792.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1125x2436.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2208.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2688.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1536x2048.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2224.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2388.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-2048x2732.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1620x2160.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1136x640.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1334x750.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1792x828.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2436x1125.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2208x1242.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2688x1242.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2048x1536.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2224x1668.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2388x1668.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2732x2048.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1620.png"/>
|
|
||||||
<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png"/>
|
|
||||||
<meta name="msapplication-TileColor" content="#fff"/>
|
|
||||||
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
|
|
||||||
<meta name="msapplication-config" content="/browserconfig.xml"/>
|
|
||||||
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json"/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
.body
|
|
||||||
padding 0 16px 16px
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import css from './BoxBody.module.styl'
|
|
||||||
import { buildClassName } from '@cp/dzeio/Util'
|
|
||||||
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
noPadding?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class BoxBody extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName([css.body, !this.props.noPadding])}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
@import "../../config.styl"
|
|
||||||
|
|
||||||
.header
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
.delimiter
|
|
||||||
border-bottom 2px solid grey
|
|
||||||
padding-bottom 2px
|
|
||||||
|
|
||||||
.img
|
|
||||||
border-top-left-radius 4px
|
|
||||||
border-top-right-radius 4px
|
|
||||||
|
|
||||||
.title
|
|
||||||
font-weight bold
|
|
||||||
font-size rem(20)
|
|
||||||
margin 0 0 8px
|
|
||||||
|
|
||||||
.subtitle
|
|
||||||
font-size rem(14)
|
|
||||||
margin 0
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import { buildClassName } from '../../Util'
|
|
||||||
import css from './BoxHeader.module.styl'
|
|
||||||
import Row from '@cp/dzeio/Row'
|
|
||||||
import Col from '@cp/dzeio/Col'
|
|
||||||
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
title?: string
|
|
||||||
titleColSize?: number
|
|
||||||
subtitle?: string
|
|
||||||
delimiter?: boolean
|
|
||||||
titleClassName?: string
|
|
||||||
// image?: ImageProps
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class BoxHeader extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<>
|
|
||||||
{/* {this.props.image && (
|
|
||||||
<Image {...this.props.image} />
|
|
||||||
)} */}
|
|
||||||
<div className={buildClassName(
|
|
||||||
[css.header],
|
|
||||||
[css.delimiter, this.props.delimiter]
|
|
||||||
)}>
|
|
||||||
<Row>
|
|
||||||
<Col size={this.props.titleColSize as 1 || 8}>
|
|
||||||
<p className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</p>
|
|
||||||
<p className={css.subtitle}>{this.props.subtitle}</p>
|
|
||||||
</Col>
|
|
||||||
<Col>
|
|
||||||
<Row justify="flex-end">
|
|
||||||
{this.props.children}
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Header
|
|
||||||
delimiter?: boolean
|
|
||||||
picture?: string // url
|
|
||||||
category?: string // subtitle but above title
|
|
||||||
title string
|
|
||||||
subtitle string
|
|
||||||
center?: boolean // if Center children is not used
|
|
||||||
children?: content
|
|
||||||
*/
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
@import "../../config.styl"
|
|
||||||
|
|
||||||
.box
|
|
||||||
background white
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0px 2px 4px 0px rgba(black, .33)
|
|
||||||
transition all $transition
|
|
||||||
color black
|
|
||||||
|
|
||||||
.outline
|
|
||||||
border 2px solid #E0E0E0
|
|
||||||
box-shadow none
|
|
||||||
transition border-color $transition
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
border-color darken(@border[2], 20%)
|
|
||||||
|
|
||||||
@media (prefers-color-scheme dark)
|
|
||||||
.box
|
|
||||||
background black
|
|
||||||
.outline
|
|
||||||
border-color #1F1F1F
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './BoxWrapper.module.styl'
|
|
||||||
import { buildClassName } from '@cp/dzeio/Util'
|
|
||||||
|
|
||||||
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
||||||
outline?: boolean
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class BoxWrapper extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div {...this.props}
|
|
||||||
className={buildClassName(
|
|
||||||
css.box,
|
|
||||||
this.props.className,
|
|
||||||
[css.outline, this.props.outline]
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Wrapper extends div
|
|
||||||
|
|
||||||
Body
|
|
||||||
noPadding?: boolean
|
|
||||||
*/
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import BoxWrapper from './BoxWrapper'
|
|
||||||
import BoxHeader from './BoxHeader'
|
|
||||||
import BoxBody from './BoxBody'
|
|
||||||
|
|
||||||
|
|
||||||
export {
|
|
||||||
BoxWrapper,
|
|
||||||
BoxHeader,
|
|
||||||
BoxBody
|
|
||||||
}
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
@import '../config'
|
|
||||||
|
|
||||||
.button
|
|
||||||
font-size rem(16)
|
|
||||||
position relative
|
|
||||||
transition all $transition
|
|
||||||
font-weight 600
|
|
||||||
line-height 1.5
|
|
||||||
display inline-flex
|
|
||||||
padding 10px 20px
|
|
||||||
margin 8px 8px 0 8px
|
|
||||||
cursor pointer
|
|
||||||
align-items center
|
|
||||||
text-align center
|
|
||||||
border-radius 4px
|
|
||||||
border none
|
|
||||||
justify-content center
|
|
||||||
color white
|
|
||||||
background-color $default
|
|
||||||
|
|
||||||
// Chrome Specific
|
|
||||||
outline none
|
|
||||||
|
|
||||||
// Link specific
|
|
||||||
text-decoration none
|
|
||||||
|
|
||||||
&.nomargintop
|
|
||||||
margin-top 0
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
border 2px solid @background-color
|
|
||||||
padding 8px 18px // @padding - @border
|
|
||||||
background transparent
|
|
||||||
color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
color @color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
transform translateY(-2px)
|
|
||||||
box-shadow 0 4px 4px rgba(@background-color,.2)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.large
|
|
||||||
padding 15px 30px
|
|
||||||
font-size rem(20)
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
padding 13px 28px // @padding - @border
|
|
||||||
|
|
||||||
&.small
|
|
||||||
padding 5px 10px
|
|
||||||
font-size rem(14)
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
padding 3px 8px // @padding - @border
|
|
||||||
|
|
||||||
&.block
|
|
||||||
display flex
|
|
||||||
width 100%
|
|
||||||
margin 0
|
|
||||||
margin-top 8px
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
background #E0E0E0 !important
|
|
||||||
color #B0B0B0 !important
|
|
||||||
transform none !important
|
|
||||||
box-shadow none !important
|
|
||||||
cursor initial
|
|
||||||
|
|
||||||
&.loading
|
|
||||||
color transparent !important
|
|
||||||
position relative
|
|
||||||
pointer-events none
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
border white 2px solid
|
|
||||||
border-color transparent transparent white white
|
|
||||||
width 1em
|
|
||||||
position absolute
|
|
||||||
top calc(50% - (1em / 2))
|
|
||||||
left calc(50% - (1em / 2))
|
|
||||||
border-radius 100%
|
|
||||||
height 1em
|
|
||||||
box-sizing inherit
|
|
||||||
animation ButtonLoading 1s infinite linear
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.textInner
|
|
||||||
margin-left 8px
|
|
||||||
|
|
||||||
.primary
|
|
||||||
background-color $primary
|
|
||||||
&.outline
|
|
||||||
color @background-color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @background-color @background-color
|
|
||||||
|
|
||||||
.secondary
|
|
||||||
background-color $secondary
|
|
||||||
color black
|
|
||||||
&.outline
|
|
||||||
color @color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @color @color
|
|
||||||
.info
|
|
||||||
background-color $info
|
|
||||||
&.outline
|
|
||||||
color @background-color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @background-color @background-color
|
|
||||||
.success
|
|
||||||
background-color $success
|
|
||||||
&.outline
|
|
||||||
color @background-color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @background-color @background-color
|
|
||||||
.danger
|
|
||||||
background-color $danger
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
color @background-color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @background-color @background-color
|
|
||||||
.warning
|
|
||||||
background-color $warning
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
color @background-color
|
|
||||||
border-color @background-color
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color @background-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
&:focus
|
|
||||||
background-color darken(@background-color, 30%)
|
|
||||||
|
|
||||||
&.loading::after
|
|
||||||
border-color transparent transparent @background-color @background-color
|
|
||||||
|
|
||||||
@keyframes ButtonLoading
|
|
||||||
0%
|
|
||||||
transform rotate(0)
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform rotate(365deg)
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import React, { FC } from 'react'
|
|
||||||
import Link from '../Link'
|
|
||||||
import { ColorType, IconProps } from '../interfaces'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import Image from '../Image'
|
|
||||||
|
|
||||||
import css from './Button.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
outline?: boolean
|
|
||||||
nomargintop?: boolean
|
|
||||||
color?: ColorType
|
|
||||||
children?: React.ReactNode
|
|
||||||
icon?: FC<IconProps> | string
|
|
||||||
size?: 'large' | 'small' | 'block'
|
|
||||||
href?: string
|
|
||||||
as?: string
|
|
||||||
disabled?: boolean
|
|
||||||
loading?: boolean
|
|
||||||
onClick?: (event: React.MouseEvent<HTMLButtonElement|HTMLAnchorElement, MouseEvent>) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Button extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => {
|
|
||||||
|
|
||||||
let inner: any = this.props.children
|
|
||||||
|
|
||||||
if (!this.props.loading && this.props.icon) {
|
|
||||||
const Icon = this.props.icon
|
|
||||||
inner = (
|
|
||||||
<>
|
|
||||||
{typeof Icon === 'string' ? (
|
|
||||||
<Image src={Icon} max={{ height: 16, width: 16 }} />
|
|
||||||
) : (
|
|
||||||
<Icon size={16} />
|
|
||||||
)}
|
|
||||||
{this.props.children && (
|
|
||||||
<span className={css.textInner}>{this.props.children}</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const classes = buildClassName(
|
|
||||||
[css.button],
|
|
||||||
[css[this.props.color as string], this.props.color],
|
|
||||||
[css.outline, this.props.outline],
|
|
||||||
[css[this.props.size as string], this.props.size],
|
|
||||||
[css.nomargintop, this.props.nomargintop],
|
|
||||||
[css.loading, this.props.loading]
|
|
||||||
)
|
|
||||||
|
|
||||||
if (this.props.href) {
|
|
||||||
return (
|
|
||||||
<Link href={this.props.href} as={this.props.as} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
|
|
||||||
{inner}
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button onClick={this.props.onClick} disabled={this.props.disabled} className={classes}>{inner}</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
@import "../config.styl"
|
|
||||||
|
|
||||||
$backColor = #757575
|
|
||||||
|
|
||||||
.label
|
|
||||||
position relative
|
|
||||||
display flex
|
|
||||||
padding-left 8px
|
|
||||||
margin 8px
|
|
||||||
user-select none
|
|
||||||
|
|
||||||
span
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 20px
|
|
||||||
height @width
|
|
||||||
position absolute
|
|
||||||
box-shadow inset 0 0 0 2px $backColor
|
|
||||||
border-radius 2px
|
|
||||||
transition all $transition
|
|
||||||
|
|
||||||
&::after
|
|
||||||
border-radius 20px
|
|
||||||
position absolute
|
|
||||||
transition all $transition
|
|
||||||
background $default
|
|
||||||
|
|
||||||
svg
|
|
||||||
transition $transition
|
|
||||||
transform scale(0)
|
|
||||||
color transparent
|
|
||||||
margin 2px
|
|
||||||
|
|
||||||
input
|
|
||||||
visibility hidden
|
|
||||||
width 20px
|
|
||||||
height @width
|
|
||||||
margin 0
|
|
||||||
&:checked + span
|
|
||||||
background rgba($default, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $default
|
|
||||||
|
|
||||||
svg
|
|
||||||
color white
|
|
||||||
transform scale(1)
|
|
||||||
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
span
|
|
||||||
box-shadow inset 0 0 0 2px black
|
|
||||||
|
|
||||||
.radio
|
|
||||||
margin-left 18px // Margin + margin for Circle
|
|
||||||
span
|
|
||||||
border-radius 20px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content " "
|
|
||||||
top 5px
|
|
||||||
left 5px
|
|
||||||
width 10px
|
|
||||||
height @width
|
|
||||||
transform scale(0)
|
|
||||||
|
|
||||||
input:checked + span::after
|
|
||||||
transform scale(1)
|
|
||||||
background white
|
|
||||||
|
|
||||||
.switch
|
|
||||||
padding 2px 0 2px 10px // 2px base padding 10px circle padding
|
|
||||||
|
|
||||||
&:hover span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background black
|
|
||||||
|
|
||||||
span
|
|
||||||
width 28px
|
|
||||||
height 14px
|
|
||||||
border-radius 20px
|
|
||||||
top 50%
|
|
||||||
box-shadow none
|
|
||||||
background rgba($backColor, .5)
|
|
||||||
transform translateY(-50%)
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content " "
|
|
||||||
top 50%
|
|
||||||
transform translate(-50%, -50%)
|
|
||||||
left 0
|
|
||||||
background $backColor
|
|
||||||
width 20px
|
|
||||||
height @width
|
|
||||||
|
|
||||||
input
|
|
||||||
margin 0 8px
|
|
||||||
width 20px
|
|
||||||
|
|
||||||
&:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
&::after
|
|
||||||
left 100%
|
|
||||||
transform translate(-50%, -50%)
|
|
||||||
background $default
|
|
||||||
|
|
||||||
.primary
|
|
||||||
$color = $primary
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.secondary
|
|
||||||
$color = $secondary
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.info
|
|
||||||
$color = $info
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.success
|
|
||||||
$color = $success
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.danger
|
|
||||||
$color = $danger
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.warning
|
|
||||||
$color = $warning
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Check } from 'react-feather'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
|
|
||||||
import { ColorType } from '../interfaces'
|
|
||||||
import css from './Checkbox.module.styl'
|
|
||||||
|
|
||||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
||||||
label?: string
|
|
||||||
id: string
|
|
||||||
type?: undefined
|
|
||||||
radio?: boolean
|
|
||||||
switch?: boolean
|
|
||||||
color?: ColorType
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Checkbox extends React.Component<Props> {
|
|
||||||
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const props: Props = Object.assign({}, this.props)
|
|
||||||
delete props.label
|
|
||||||
delete props.type
|
|
||||||
delete props.color
|
|
||||||
delete props.switch
|
|
||||||
delete props.radio
|
|
||||||
|
|
||||||
const realType = this.props.radio ? 'radio' : 'checkbox'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<label htmlFor={this.props.id} className={buildClassName(
|
|
||||||
[css.label],
|
|
||||||
[css.radio, realType === 'radio'],
|
|
||||||
[css.switch, this.props.switch],
|
|
||||||
[css[this.props.color as string], this.props.color]
|
|
||||||
)}>
|
|
||||||
<input {...props}
|
|
||||||
type={realType}
|
|
||||||
/>
|
|
||||||
<span>
|
|
||||||
{realType === 'checkbox' && ! this.props.switch && (
|
|
||||||
<Check strokeWidth={4} size={16}/>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
{this.props.label}
|
|
||||||
</label>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.code
|
|
||||||
font-family 'source code pro', monospace
|
|
||||||
background #E8EAF6
|
|
||||||
padding 4px 8px
|
|
||||||
border-radius 8px
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './Code.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
block?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Code extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => {
|
|
||||||
const code = (
|
|
||||||
<code className={css.code}>
|
|
||||||
{this.props.children}
|
|
||||||
</code>
|
|
||||||
)
|
|
||||||
if (!this.props.block) {
|
|
||||||
return code
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<pre>
|
|
||||||
{code}
|
|
||||||
</pre>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
@import "../config"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.col
|
|
||||||
max-width 100%
|
|
||||||
flex-basis 0
|
|
||||||
flex-grow 1
|
|
||||||
padding $gapSize 0 0 $gapSize
|
|
||||||
|
|
||||||
&.nogrow
|
|
||||||
max-width intial
|
|
||||||
flex-grow 0
|
|
||||||
flex-basis initial
|
|
||||||
|
|
||||||
for i in (1...$colCount+1)
|
|
||||||
.col-{i}
|
|
||||||
flex 0 0 ((i / 12) * 100)%
|
|
||||||
min-width ((i / 12) * 100)%
|
|
||||||
|
|
||||||
if i != $colCount
|
|
||||||
.offset-{i}
|
|
||||||
margin-left ((i / 12) * 100)% + (i * $gapSize + $gapSize)
|
|
||||||
|
|
||||||
@media (max-width $tablet)
|
|
||||||
.col.tabletGrow
|
|
||||||
flex-grow 1
|
|
||||||
|
|
||||||
for i in (1...$colCountTablet+1)
|
|
||||||
.col-tablet-{i}
|
|
||||||
flex 0 0 ((i / $colCountTablet) * 100)%
|
|
||||||
min-width ((i / $colCountTablet) * 100)%
|
|
||||||
|
|
||||||
if i != $colCountTablet
|
|
||||||
.offset-tablet-{i}
|
|
||||||
margin-left ((i / $colCountTablet) * 100)% + (i * $gapSize - $gapSize)
|
|
||||||
|
|
||||||
@media (max-width $mobile)
|
|
||||||
.col.mobileGrow
|
|
||||||
flex-grow 1
|
|
||||||
|
|
||||||
for i in (1...$colCountMobile+1)
|
|
||||||
.col-mobile-{i}
|
|
||||||
flex 0 0 ((i / $colCountMobile) * 100)%
|
|
||||||
min-width ((i / $colCountMobile) * 100)%
|
|
||||||
if i != $colCountMobile
|
|
||||||
.offset-tablet-{i}
|
|
||||||
margin-left ((i / $colCountMobile) * 100)% + (i * $gapSize - $gapSize)
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
.row
|
|
||||||
position fixed
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
height 100%
|
|
||||||
width 100%
|
|
||||||
z-index 10000
|
|
||||||
pointer-events none
|
|
||||||
|
|
||||||
.col > div
|
|
||||||
background rgba(red, .2)
|
|
||||||
height 100%
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Row from '../Row'
|
|
||||||
|
|
||||||
import css from './DebugCols.module.styl'
|
|
||||||
|
|
||||||
import Col from '.'
|
|
||||||
|
|
||||||
enum Breakpoint {
|
|
||||||
MOBILE,
|
|
||||||
TABLET,
|
|
||||||
COMPUT
|
|
||||||
}
|
|
||||||
|
|
||||||
interface States {
|
|
||||||
breakpoint: Breakpoint
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default class DebugCols extends React.Component<unknown, States> {
|
|
||||||
|
|
||||||
public state: States = {
|
|
||||||
breakpoint: Breakpoint.COMPUT
|
|
||||||
}
|
|
||||||
|
|
||||||
public componentDidMount() {
|
|
||||||
this.onResize()
|
|
||||||
window.addEventListener('resize', this.onResize)
|
|
||||||
}
|
|
||||||
|
|
||||||
public componentWillUnmount() {
|
|
||||||
window.removeEventListener('resize', this.onResize)
|
|
||||||
}
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<Row className={css.row}>
|
|
||||||
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
|
||||||
{this.state.breakpoint !== Breakpoint.MOBILE && (
|
|
||||||
<>
|
|
||||||
{this.state.breakpoint !== Breakpoint.TABLET && (
|
|
||||||
<>
|
|
||||||
<Col size={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} className={css.col}><div></div></Col>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
|
||||||
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Row>
|
|
||||||
)
|
|
||||||
|
|
||||||
private onResize = async () => {
|
|
||||||
const currentBreakpoint =
|
|
||||||
window.innerWidth <= 768 ?
|
|
||||||
Breakpoint.MOBILE :
|
|
||||||
window.innerWidth <= 1200 ?
|
|
||||||
Breakpoint.TABLET :
|
|
||||||
Breakpoint.COMPUT
|
|
||||||
const hasChanged = currentBreakpoint !== this.state.breakpoint
|
|
||||||
if (hasChanged) {
|
|
||||||
this.setState({ breakpoint: currentBreakpoint })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Col.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
size?: 1|2|3|4|5|6|7|8|9|10|11|12
|
|
||||||
offset?: 1|2|3|4|5|6|7|8|9|10|11
|
|
||||||
children?: React.ReactNode
|
|
||||||
className?: string
|
|
||||||
nogrow?: boolean
|
|
||||||
|
|
||||||
// Tablet related
|
|
||||||
tabletSize?: 1|2|3|4|5|6|7|8
|
|
||||||
tabletoffset?: 1|2|3|4|5|6|7
|
|
||||||
tabletGrow?: boolean
|
|
||||||
|
|
||||||
|
|
||||||
// Mobile related
|
|
||||||
mobileSize?: 1|2|3|4
|
|
||||||
mobileoffset?: 1|2|3
|
|
||||||
mobileGrow?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Col extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName(
|
|
||||||
css.col,
|
|
||||||
|
|
||||||
// Normal
|
|
||||||
[css[`col-${this.props.size}`], this.props.size],
|
|
||||||
[css[`offset-${this.props.offset}`], this.props.offset],
|
|
||||||
|
|
||||||
// Tablet
|
|
||||||
[css[`col-tablet-${this.props.tabletSize}`], this.props.tabletSize],
|
|
||||||
[css[`offset-tablet-${this.props.tabletoffset}`], this.props.tabletoffset],
|
|
||||||
|
|
||||||
// Mobile
|
|
||||||
[css[`col-mobile-${this.props.mobileSize}`], this.props.mobileSize],
|
|
||||||
[css[`offset-mobile-${this.props.mobileoffset}`], this.props.mobileoffset],
|
|
||||||
[css.nogrow, this.props.nogrow],
|
|
||||||
[css.mobileGrow, this.props.mobileGrow],
|
|
||||||
this.props.className
|
|
||||||
)}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
.container
|
|
||||||
padding 16px
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
|
|
||||||
import css from './Container.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children: React.ReactNode
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Container extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName(css.container, this.props.className)}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
@import '../config.styl'
|
|
||||||
|
|
||||||
.fieldset
|
|
||||||
border-radius 8px
|
|
||||||
border 2px solid grey
|
|
||||||
transition all $transition
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
> legend
|
|
||||||
font-weight 600
|
|
||||||
transition all $transition
|
|
||||||
padding 0 4px
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
border-color black
|
|
||||||
|
|
||||||
> legend
|
|
||||||
color $default
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './Fieldset.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title?: string
|
|
||||||
children?: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Fieldset extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<fieldset className={css.fieldset}>
|
|
||||||
{this.props.title && (
|
|
||||||
<legend>{this.props.title}</legend>
|
|
||||||
)}
|
|
||||||
{this.props.children}
|
|
||||||
</fieldset>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
@import "../config"
|
|
||||||
|
|
||||||
$transparent = 75%
|
|
||||||
|
|
||||||
.back
|
|
||||||
transition all $transition
|
|
||||||
color white
|
|
||||||
background linear-gradient(to left, $default, transparentify($default, $transparent))
|
|
||||||
|
|
||||||
.primary
|
|
||||||
$color = $primary
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
|
|
||||||
.secondary
|
|
||||||
$color = $secondary
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
|
|
||||||
.info
|
|
||||||
$color = $info
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
|
|
||||||
.success
|
|
||||||
$color = $success
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
|
|
||||||
.danger
|
|
||||||
$color = $danger
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
|
|
||||||
.warning
|
|
||||||
$color = $warning
|
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { ColorType } from '../interfaces'
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './GradientBackground.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
color?: ColorType
|
|
||||||
className?: string
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class GradientBackground extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
.image
|
|
||||||
transition .3s
|
|
||||||
object-fit contain
|
|
||||||
z-index 2
|
|
||||||
max-width 100%
|
|
||||||
|
|
||||||
&.ph1
|
|
||||||
position fixed
|
|
||||||
transition 0s
|
|
||||||
|
|
||||||
|
|
||||||
&.ph2
|
|
||||||
width 100% !important
|
|
||||||
position fixed
|
|
||||||
max-width 100% !important
|
|
||||||
max-height 100% !important
|
|
||||||
box-sizing border-box
|
|
||||||
padding 5%
|
|
||||||
top 0 !important
|
|
||||||
left 0 !important
|
|
||||||
height 100%
|
|
||||||
background #000000A0
|
|
||||||
|
|
||||||
|
|
||||||
&.after
|
|
||||||
background #00000000
|
|
||||||
// height 100%
|
|
||||||
box-sizing border-box
|
|
||||||
position fixed
|
|
||||||
// width 100%
|
|
||||||
z-index 0
|
|
||||||
padding initial
|
|
||||||
|
|
||||||
|
|
||||||
.hideOverflow
|
|
||||||
overflow hidden
|
|
||||||
|
|
||||||
|
|
||||||
.none
|
|
||||||
display none
|
|
||||||
@ -1,230 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
|
|
||||||
import css from './Image.module.styl'
|
|
||||||
|
|
||||||
export interface ImageProps {
|
|
||||||
defaultHeight?: number
|
|
||||||
src?: string
|
|
||||||
sources?: Array<string>
|
|
||||||
deleteOnError?: boolean
|
|
||||||
downgradeOnError?: string
|
|
||||||
canFullscreen?: boolean
|
|
||||||
max?: {
|
|
||||||
height?: number|string
|
|
||||||
width?: number|string
|
|
||||||
}
|
|
||||||
width?: number|string
|
|
||||||
default?: {
|
|
||||||
height?: number|string
|
|
||||||
width?: number|string
|
|
||||||
}
|
|
||||||
alt?: string
|
|
||||||
classes?: string
|
|
||||||
className?: string
|
|
||||||
onClick?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
enum images {
|
|
||||||
JPEG = 'image/jpeg',
|
|
||||||
XICON = 'image/x-icon',
|
|
||||||
TIFF = 'image/tiff'
|
|
||||||
}
|
|
||||||
|
|
||||||
const mimeTypes = {
|
|
||||||
apng: 'image/apng',
|
|
||||||
bmp: 'image/bmp',
|
|
||||||
gif: 'image/gif',
|
|
||||||
|
|
||||||
ico: images.XICON,
|
|
||||||
cur: images.XICON,
|
|
||||||
|
|
||||||
jpg: images.JPEG,
|
|
||||||
jpeg: images.JPEG,
|
|
||||||
jfif: images.JPEG,
|
|
||||||
pjpeg: images.JPEG,
|
|
||||||
pjp: images.JPEG,
|
|
||||||
|
|
||||||
png: 'image/png',
|
|
||||||
svg: 'image/svg+xml',
|
|
||||||
|
|
||||||
tif: images.TIFF,
|
|
||||||
tiff: images.TIFF,
|
|
||||||
|
|
||||||
webp: 'image/webp'
|
|
||||||
}
|
|
||||||
|
|
||||||
const getMimeType = (img: string) => {
|
|
||||||
const arr = img.split('.')
|
|
||||||
return mimeTypes[arr[arr.length-1] as 'apng'] || mimeTypes.png
|
|
||||||
}
|
|
||||||
|
|
||||||
type evType<T = HTMLImageElement> = React.SyntheticEvent<T, Event>
|
|
||||||
|
|
||||||
export default class Image extends React.Component<ImageProps> {
|
|
||||||
|
|
||||||
private ref: React.RefObject<HTMLImageElement> = React.createRef()
|
|
||||||
private plchldr: React.RefObject<HTMLDivElement> = React.createRef()
|
|
||||||
private parent: React.RefObject<HTMLDivElement> = React.createRef()
|
|
||||||
private pic: React.RefObject<HTMLPictureElement> = React.createRef()
|
|
||||||
|
|
||||||
private wasDowngraded = false
|
|
||||||
private cardPos: Array<number> = []
|
|
||||||
private cardSize: Array<number> = []
|
|
||||||
|
|
||||||
private isFullscreen = false
|
|
||||||
|
|
||||||
public async componentDidMount() {
|
|
||||||
if (this.props.canFullscreen) {
|
|
||||||
window.addEventListener('scroll', this.onScroll)
|
|
||||||
window.addEventListener('resize', this.onResize)
|
|
||||||
this.onScroll()
|
|
||||||
this.onResize()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async componentDidUpdate() {
|
|
||||||
this.pic.current?.classList.remove(css.none)
|
|
||||||
if (this.props.canFullscreen) {
|
|
||||||
this.onScroll()
|
|
||||||
this.onResize()
|
|
||||||
}
|
|
||||||
if (this.isFullscreen) {
|
|
||||||
this.onClick()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async componentWillUnmount() {
|
|
||||||
if (this.props.canFullscreen) {
|
|
||||||
window.removeEventListener('scroll', this.onScroll)
|
|
||||||
window.removeEventListener('resize', this.onResize)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const pic = (
|
|
||||||
<picture ref={this.pic} className={this.props.classes}>
|
|
||||||
{this.props.sources && this.props.sources.map((el, index) => (
|
|
||||||
<source key={index} srcSet={el} type={getMimeType(el)}/>
|
|
||||||
))}
|
|
||||||
<img
|
|
||||||
className={buildClassName([css.image], [this.props.className])}
|
|
||||||
ref={this.ref}
|
|
||||||
src={this.props.src}
|
|
||||||
onClick={this.props.canFullscreen && this.onClick || this.props.onClick}
|
|
||||||
onLoad={this.props.default && this.onLoad || undefined}
|
|
||||||
onError={this.props.deleteOnError && this.onError || undefined}
|
|
||||||
style={{
|
|
||||||
width: this.props.default?.width,
|
|
||||||
height: this.props.default?.height,
|
|
||||||
maxHeight: this.props.max?.height,
|
|
||||||
maxWidth: this.props.max?.width
|
|
||||||
}}
|
|
||||||
alt={this.props.alt}
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
)
|
|
||||||
if (this.props.canFullscreen) {
|
|
||||||
return (
|
|
||||||
<div ref={this.parent}>
|
|
||||||
<div ref={this.plchldr} className={css.none}></div>
|
|
||||||
{pic}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return pic
|
|
||||||
}
|
|
||||||
|
|
||||||
private onScroll = async () => {
|
|
||||||
if (!this.ref.current || this.isFullscreen || !this.props.canFullscreen) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
|
|
||||||
this.ref.current.style.top = this.cardPos[0] + 'px'
|
|
||||||
this.ref.current.style.left = this.cardPos[1] + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
private onResize = async () => {
|
|
||||||
if (!this.ref.current || !this.plchldr.current || !this.props.canFullscreen || this.isFullscreen) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let tmp = [this.ref.current.offsetHeight, this.ref.current.offsetWidth]
|
|
||||||
if (this.parent.current) {
|
|
||||||
tmp = [this.parent.current.offsetHeight, this.ref.current.offsetWidth]
|
|
||||||
}
|
|
||||||
this.plchldr.current.style.width = `${tmp[1]}px`
|
|
||||||
this.plchldr.current.style.height = `${tmp[0]}px`
|
|
||||||
}
|
|
||||||
|
|
||||||
private onClick = async () => {
|
|
||||||
if (!this.ref.current || !this.props.canFullscreen || !this.plchldr.current) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.props.onClick) {
|
|
||||||
this.props.onClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
const i = this.ref.current
|
|
||||||
const c = this.plchldr.current
|
|
||||||
const body = document.body
|
|
||||||
i.style.top = this.cardPos[0] + 'px'
|
|
||||||
i.style.left = this.cardPos[1] + 'px'
|
|
||||||
|
|
||||||
if (this.isFullscreen) {
|
|
||||||
i.style.width = this.cardSize[1] + 'px'
|
|
||||||
i.style.height = this.cardSize[0] + 'px'
|
|
||||||
body.classList.remove(css.hideOverflow)
|
|
||||||
i.classList.remove(css.ph2)
|
|
||||||
i.classList.add(css.after)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const w = this.valToPixel(this.props.width)
|
|
||||||
const mh = this.valToPixel(this.props.max?.height)
|
|
||||||
const mw = this.valToPixel(this.props.max?.width)
|
|
||||||
c.classList.add(css.none)
|
|
||||||
i.style.height = ''
|
|
||||||
i.style.width = w
|
|
||||||
i.style.maxHeight = mh
|
|
||||||
i.style.maxWidth = mw
|
|
||||||
i.classList.remove(css.after)
|
|
||||||
}, 350)
|
|
||||||
this.isFullscreen = false
|
|
||||||
} else {
|
|
||||||
i.classList.add(css.ph1)
|
|
||||||
c.classList.remove(css.none)
|
|
||||||
i.classList.add(css.ph2)
|
|
||||||
i.classList.remove(css.ph1)
|
|
||||||
body.classList.add(css.hideOverflow)
|
|
||||||
this.isFullscreen = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private valToPixel(value: number|string|undefined): string {
|
|
||||||
if (typeof value === 'number') {
|
|
||||||
return `${value}px`
|
|
||||||
}
|
|
||||||
if (typeof value === 'undefined') {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
|
|
||||||
private onLoad = async (ev: evType) => {
|
|
||||||
ev.currentTarget.style.height = ''
|
|
||||||
ev.currentTarget.style.width = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
private onError = async (ev: evType) => {
|
|
||||||
this.w('Picture not loaded', ev.currentTarget.src)
|
|
||||||
ev.currentTarget.parentElement?.classList.add(css.none)
|
|
||||||
}
|
|
||||||
|
|
||||||
private w(...messages: any) {
|
|
||||||
console.warn('[ Picture ]', ...messages)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
@import '../config'
|
|
||||||
|
|
||||||
.parent
|
|
||||||
position relative
|
|
||||||
margin 16px
|
|
||||||
|
|
||||||
label
|
|
||||||
font-size 1rem
|
|
||||||
font-weight 600
|
|
||||||
color black
|
|
||||||
display inline-block
|
|
||||||
margin-bottom .5rem
|
|
||||||
transition all $transition
|
|
||||||
position absolute
|
|
||||||
top 16px
|
|
||||||
pointer-events none
|
|
||||||
left 16px
|
|
||||||
|
|
||||||
svg
|
|
||||||
position absolute
|
|
||||||
color #AAA
|
|
||||||
top 14px
|
|
||||||
left 16px // input padding-left
|
|
||||||
transition color $transition
|
|
||||||
|
|
||||||
~ label
|
|
||||||
left 16px + 24px + 16px
|
|
||||||
|
|
||||||
select
|
|
||||||
appearance none
|
|
||||||
|
|
||||||
input
|
|
||||||
select
|
|
||||||
padding 14px 16px
|
|
||||||
max-width 100%
|
|
||||||
height 56px
|
|
||||||
border 2px solid rgba(black, .3)
|
|
||||||
border-radius 4px
|
|
||||||
box-sizing border-box
|
|
||||||
font-size .875rem
|
|
||||||
outline none
|
|
||||||
background transparent
|
|
||||||
transition all $transition
|
|
||||||
color black
|
|
||||||
&:hover
|
|
||||||
border-color black
|
|
||||||
|
|
||||||
+ svg
|
|
||||||
color black
|
|
||||||
|
|
||||||
&:not(:placeholder-shown)
|
|
||||||
&:focus
|
|
||||||
&:not([placeholder=" "])
|
|
||||||
~ label
|
|
||||||
top -8px
|
|
||||||
left 16px - 4px // .input/padding-left label/padding-left
|
|
||||||
background white
|
|
||||||
padding 0 4px
|
|
||||||
|
|
||||||
&:invalid
|
|
||||||
border-color $danger
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
&:focus
|
|
||||||
border-color $default
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.primary
|
|
||||||
border-color $primary
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.secondary
|
|
||||||
border-color $secondary
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.info
|
|
||||||
border-color $info
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.success
|
|
||||||
border-color $success
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.danger
|
|
||||||
border-color $danger
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.warning
|
|
||||||
border-color $warning
|
|
||||||
|
|
||||||
~ label
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
~ svg
|
|
||||||
color @border-color
|
|
||||||
|
|
||||||
&.hasIcon
|
|
||||||
padding-left 16px + 24px + 16px
|
|
||||||
|
|
||||||
&.filled
|
|
||||||
border none
|
|
||||||
background rgba(gray, .1)
|
|
||||||
border-radius @border-radius @border-radius 0 0
|
|
||||||
border-bottom 2px solid rgba(black,.4)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background rgba(gray, .2)
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
background rgba(gray, .3)
|
|
||||||
|
|
||||||
&:not(:placeholder-shown)
|
|
||||||
&:focus
|
|
||||||
&:not([placeholder=" "])
|
|
||||||
~ label
|
|
||||||
top 3px
|
|
||||||
left 16px - 4px // .input/padding-left label/padding-left
|
|
||||||
background transparent
|
|
||||||
padding 0
|
|
||||||
font-size .75rem
|
|
||||||
~ svg ~ label
|
|
||||||
left 16px + 24px + 16px // .input/padding-left label/padding-left
|
|
||||||
|
|
||||||
div
|
|
||||||
display flex
|
|
||||||
justify-content space-between
|
|
||||||
padding 0 16px
|
|
||||||
font-size .9em
|
|
||||||
|
|
||||||
&.block input
|
|
||||||
width 100%
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
import React, { FC } from 'react'
|
|
||||||
|
|
||||||
import { ChevronDown } from 'react-feather'
|
|
||||||
import { IconProps, ColorType } from '../interfaces'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Input.module.styl'
|
|
||||||
|
|
||||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
||||||
id?: string
|
|
||||||
label?: string
|
|
||||||
icon?: FC<IconProps>
|
|
||||||
helper?: string
|
|
||||||
characterCount?: boolean
|
|
||||||
inputRef?: React.RefObject<HTMLInputElement>
|
|
||||||
selectRef?: React.RefObject<HTMLSelectElement>
|
|
||||||
type?: 'color' | 'text' | 'date' | 'datetime-local' |
|
|
||||||
'email' | 'file' | 'month' | 'number' | 'password' |
|
|
||||||
'range' | 'search' | 'tel' | 'time' | 'url' | 'week' | 'select'
|
|
||||||
maxLength?: number | undefined
|
|
||||||
infinityText?: string
|
|
||||||
filled?: boolean
|
|
||||||
block?: boolean
|
|
||||||
color?: ColorType
|
|
||||||
children?: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Input extends React.Component<Props> {
|
|
||||||
|
|
||||||
private charCountRef: React.RefObject<HTMLSpanElement> = React.createRef()
|
|
||||||
|
|
||||||
public componentDidMount() {
|
|
||||||
this.updatecharCount()
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const props: Props = Object.assign({}, this.props)
|
|
||||||
const Icon = this.props.icon
|
|
||||||
delete props.label
|
|
||||||
delete props.icon
|
|
||||||
delete props.helper
|
|
||||||
delete props.infinityText
|
|
||||||
delete props.filled
|
|
||||||
delete props.inputRef
|
|
||||||
delete props.selectRef
|
|
||||||
delete props.block
|
|
||||||
delete props.color
|
|
||||||
delete props.characterCount
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={buildClassName(
|
|
||||||
[css.parent],
|
|
||||||
[css.block, this.props.block]
|
|
||||||
)}
|
|
||||||
onChangeCapture={this.props.characterCount ? this.updatecharCount : undefined}
|
|
||||||
>
|
|
||||||
{this.props.type === 'select' ? (
|
|
||||||
<select
|
|
||||||
ref={this.props.selectRef}
|
|
||||||
className={buildClassName(
|
|
||||||
css.hasIcon,
|
|
||||||
[css.filled, this.props.filled],
|
|
||||||
[css[this.props.color as string], this.props.color]
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{this.props.children}
|
|
||||||
</select>
|
|
||||||
) : (
|
|
||||||
<input
|
|
||||||
placeholder=" "
|
|
||||||
ref={this.props.inputRef}
|
|
||||||
{...props}
|
|
||||||
className={buildClassName(
|
|
||||||
[css.hasIcon, Icon],
|
|
||||||
[css.filled, this.props.filled],
|
|
||||||
[css[this.props.color as string], this.props.color]
|
|
||||||
)}
|
|
||||||
onInvalid={(ev) => ev.preventDefault()}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{this.props.type === 'select' && (
|
|
||||||
<ChevronDown />
|
|
||||||
)}
|
|
||||||
{Icon && (
|
|
||||||
<Icon />
|
|
||||||
)}
|
|
||||||
{this.props.label && (
|
|
||||||
<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
|
|
||||||
)}
|
|
||||||
{(this.props.helper || this.props.characterCount) && (
|
|
||||||
<div>
|
|
||||||
<span>{this.props.helper}</span>
|
|
||||||
<span ref={this.charCountRef}></span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
private updatecharCount = async (event?: React.FormEvent<HTMLDivElement>) => {
|
|
||||||
if (this.props.characterCount && this.charCountRef.current) {
|
|
||||||
const max = this.props.maxLength || this.props.infinityText || 'Infinity'
|
|
||||||
let currentCount = 0
|
|
||||||
if (event) {
|
|
||||||
currentCount = (event.target as HTMLInputElement).value.length
|
|
||||||
} else {
|
|
||||||
if (this.props.defaultValue) {
|
|
||||||
currentCount = this.props.defaultValue.toString().length
|
|
||||||
} else if (this.props.value) {
|
|
||||||
currentCount = this.props.value.toString().length
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.charCountRef.current.innerText = currentCount + ' / ' + max
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.icon
|
|
||||||
vertical-align sub
|
|
||||||
margin 2px
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import NextLink from 'next/link'
|
|
||||||
import { ExternalLink } from 'react-feather'
|
|
||||||
|
|
||||||
import css from './Link.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
href: string
|
|
||||||
as?: string
|
|
||||||
children?: React.ReactNode
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Link extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
if (
|
|
||||||
this.props.href.includes('://') ||
|
|
||||||
this.props.href.startsWith('//')
|
|
||||||
) {
|
|
||||||
// external link
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
className={this.props.className}
|
|
||||||
href={this.props.href}
|
|
||||||
rel="noreferrer nofollow"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{this.props.children}<ExternalLink size={16} className={css.icon} />
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<NextLink href={this.props.href} as={this.props.as}>
|
|
||||||
<a className={this.props.className}>{this.props.children}</a>
|
|
||||||
</NextLink>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
@import '../config'
|
|
||||||
|
|
||||||
.menu
|
|
||||||
position absolute
|
|
||||||
opacity 0
|
|
||||||
background white
|
|
||||||
pointer-events none
|
|
||||||
border-radius 4px
|
|
||||||
box-shadow 0 2px 4px 2px rgba(black, 25%)
|
|
||||||
z-index 99
|
|
||||||
transition opacity $transition
|
|
||||||
a
|
|
||||||
display block
|
|
||||||
text-align center
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
&.shown
|
|
||||||
opacity 1
|
|
||||||
pointer-events initial
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Menu.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
pos?: {top?: number, bottom?: number, left?: number, right?: number}
|
|
||||||
content: Array<{name: string, href: string, as?: string}>
|
|
||||||
show?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Menu extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName([css.menu], [css.shown, this.props.show])} style={this.props.pos}>
|
|
||||||
{this.props.content.map((item, index) => (
|
|
||||||
<Link key={index} href={item.href} as={item.as}>
|
|
||||||
<a>{item.name}</a>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
@import "../config"
|
|
||||||
|
|
||||||
.navbar
|
|
||||||
width 100%
|
|
||||||
height 70px
|
|
||||||
padding 8px 0
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
border-bottom 1px solid white
|
|
||||||
|
|
||||||
> div
|
|
||||||
height 100%
|
|
||||||
|
|
||||||
&.small
|
|
||||||
padding-left 216px
|
|
||||||
|
|
||||||
.alignRight
|
|
||||||
text-align right
|
|
||||||
|
|
||||||
.favicon img
|
|
||||||
height 38px
|
|
||||||
border-radius 8px
|
|
||||||
border 2px solid white
|
|
||||||
padding 2px
|
|
||||||
background white
|
|
||||||
width 38px
|
|
||||||
|
|
||||||
.userIcon img
|
|
||||||
padding 0
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
.text
|
|
||||||
display inline-block
|
|
||||||
margin 0
|
|
||||||
height 38px
|
|
||||||
line-height 1
|
|
||||||
font-weight bold
|
|
||||||
font-size rem(20)
|
|
||||||
padding 7px 0 11px 16px
|
|
||||||
text-decoration none
|
|
||||||
color white
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
.spacer
|
|
||||||
height 70px
|
|
||||||
|
|
||||||
.icon
|
|
||||||
padding 7px 16px
|
|
||||||
color white
|
|
||||||
box-sizing content-box
|
|
||||||
cursor pointer
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './Navbar.module.styl'
|
|
||||||
|
|
||||||
export default class NavbarSpace extends React.Component {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={css.spacer}></div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import Row from '../Row'
|
|
||||||
import Col from '../Col'
|
|
||||||
import Button from '../Button'
|
|
||||||
import Image from '../Image'
|
|
||||||
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Navbar.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
links: Array<{href: string, txt: string}>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Navbar extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<nav className={buildClassName(css.navbar)}>
|
|
||||||
<Row>
|
|
||||||
<Col size={3} mobileSize={4}>
|
|
||||||
<Row nomargin align="center">
|
|
||||||
<Link href="/">
|
|
||||||
<a aria-label="Homepage">
|
|
||||||
<Image
|
|
||||||
alt="Logo"
|
|
||||||
src="/assets/logo.svg"
|
|
||||||
max={{ height: 70-16 }}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
<Col>
|
|
||||||
<Row nomargin justify="flex-end" align="center">
|
|
||||||
<>
|
|
||||||
{this.props.links.map((el, index) => (
|
|
||||||
<Button key={index} nomargintop href={el.href}>{el.txt}</Button>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
$height = 45px
|
|
||||||
|
|
||||||
.top
|
|
||||||
height $height
|
|
||||||
.bottom
|
|
||||||
margin-top - $height
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Overflow.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
bottom?: boolean
|
|
||||||
top?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Overflow extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName(
|
|
||||||
[css.bottom, this.props.bottom],
|
|
||||||
[css.top, this.props.top]
|
|
||||||
)}></div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
.popup
|
|
||||||
position fixed
|
|
||||||
height 100%
|
|
||||||
width 100%
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
background rgba(black, .3)
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
.popupChild
|
|
||||||
cursor initial
|
|
||||||
|
|
||||||
.exit
|
|
||||||
cursor pointer
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { X } from 'react-feather'
|
|
||||||
import { BoxWrapper, BoxHeader, BoxBody } from '../Box'
|
|
||||||
import { Props as HeaderProps } from '../Box/BoxHeader'
|
|
||||||
import Row from '../Row'
|
|
||||||
|
|
||||||
import css from './Popup.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children: React.ReactNode
|
|
||||||
onClose?: () => void
|
|
||||||
header?: HeaderProps
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Popup extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<Row onClick={this.parentClose} justify="center" align="center" className={css.popup}>
|
|
||||||
<BoxWrapper className={css.popupChild}>
|
|
||||||
<BoxHeader {...this.props.header}>
|
|
||||||
<X onClick={this.props.onClose} className={css.exit} />
|
|
||||||
</BoxHeader>
|
|
||||||
<BoxBody>
|
|
||||||
{this.props.children}
|
|
||||||
</BoxBody>
|
|
||||||
</BoxWrapper>
|
|
||||||
</Row>
|
|
||||||
)
|
|
||||||
|
|
||||||
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
if ((ev.target as HTMLElement).classList.contains(css.popup) && this.props.onClose) {
|
|
||||||
this.props.onClose()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
@import "../config"
|
|
||||||
|
|
||||||
.row
|
|
||||||
display flex
|
|
||||||
flex-wrap wrap
|
|
||||||
|
|
||||||
&:not(.nomargin)
|
|
||||||
margin (0 - $gapSize) 0 0
|
|
||||||
padding 0 $gapSize * 2 0 $gapSize
|
|
||||||
|
|
||||||
.row:not(.nomargin)
|
|
||||||
padding 0
|
|
||||||
margin (0 - $gapSize) 0 0 (0 - $gapSize)
|
|
||||||
|
|
||||||
.nowrap
|
|
||||||
flex-wrap nowrap
|
|
||||||
|
|
||||||
.nogrow > *
|
|
||||||
flex-grow 0
|
|
||||||
|
|
||||||
for dir in 'row-reverse' 'column' 'column-reverse'
|
|
||||||
.direction-{dir}
|
|
||||||
flex-direction unquote(dir)
|
|
||||||
|
|
||||||
@media (max-width: $mobile)
|
|
||||||
for dir in 'row-reverse' 'column' 'column-reverse'
|
|
||||||
.direction-mobile-{dir}
|
|
||||||
flex-direction unquote(dir)
|
|
||||||
|
|
||||||
for just in 'flex-start' 'center' 'flex-end' 'space-between' 'space-around' 'space-evenly'
|
|
||||||
.justify-{just}
|
|
||||||
justify-content unquote(just)
|
|
||||||
|
|
||||||
for align in 'flex-start' 'center' 'flex-end' 'baseline'
|
|
||||||
.align-{align}
|
|
||||||
align-items unquote(align)
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Row.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children?: React.ReactNode
|
|
||||||
direction?: 'row-reverse' | 'column' | 'column-reverse'
|
|
||||||
mobileDirection?: 'row-reverse' | 'column' | 'column-reverse'
|
|
||||||
justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
|
|
||||||
align?: 'flex-start' | 'center' | 'flex-end' | 'baseline'
|
|
||||||
nowrap?: boolean
|
|
||||||
nogrow?: boolean
|
|
||||||
className?: string
|
|
||||||
nomargin?: boolean
|
|
||||||
onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Row extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div
|
|
||||||
className={buildClassName(
|
|
||||||
css.row,
|
|
||||||
[css[`direction-${this.props.direction}`], this.props.direction],
|
|
||||||
[css[`direction-mobile-${this.props.mobileDirection}`], this.props.mobileDirection],
|
|
||||||
[css[`justify-${this.props.justify}`], this.props.justify],
|
|
||||||
[css[`align-${this.props.align}`], this.props.align],
|
|
||||||
[css.nowrap, this.props.nowrap],
|
|
||||||
[css.nogrow, this.props.nogrow],
|
|
||||||
this.props.className,
|
|
||||||
[css.nomargin, this.props.nomargin]
|
|
||||||
)}
|
|
||||||
onClick={this.props.onClick}
|
|
||||||
>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.table
|
|
||||||
border-spacing 0
|
|
||||||
border 2px solid #EEE
|
|
||||||
border-radius 4px
|
|
||||||
width 100%
|
|
||||||
|
|
||||||
td
|
|
||||||
border-top 1px solid #EEE
|
|
||||||
|
|
||||||
th
|
|
||||||
td
|
|
||||||
padding 8px
|
|
||||||
text-align left
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './Table.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Table extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<table className={css.table}>{this.props.children}</table>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
@import '../config'
|
|
||||||
|
|
||||||
.tag
|
|
||||||
padding 8px 12px
|
|
||||||
border-radius 8px
|
|
||||||
margin-left 8px
|
|
||||||
height 32px
|
|
||||||
line-height 1
|
|
||||||
|
|
||||||
background #EEE
|
|
||||||
outline none
|
|
||||||
&:hover
|
|
||||||
background darken(#EEE, 10%)
|
|
||||||
&:focus
|
|
||||||
background darken(#EEE, 20%)
|
|
||||||
|
|
||||||
.outline
|
|
||||||
border 2px solid #AAA
|
|
||||||
padding 6px 10px
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
background rgba(#AAA, .5)
|
|
||||||
&:focus
|
|
||||||
background rgba(#AAA, .7)
|
|
||||||
|
|
||||||
.primary
|
|
||||||
$color = $primary
|
|
||||||
color white
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
|
|
||||||
&.outline
|
|
||||||
color black
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color white
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color white
|
|
||||||
background rgba($color, .7)
|
|
||||||
.secondary
|
|
||||||
$color = $secondary
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
&.outline
|
|
||||||
color white
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color black
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color black
|
|
||||||
background rgba($color, .7)
|
|
||||||
|
|
||||||
.info
|
|
||||||
$color = $info
|
|
||||||
color white
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
&.outline
|
|
||||||
color black
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color white
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color white
|
|
||||||
background rgba($color, .7)
|
|
||||||
|
|
||||||
.success
|
|
||||||
$color = $success
|
|
||||||
color white
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
&.outline
|
|
||||||
color black
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color white
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color white
|
|
||||||
background rgba($color, .7)
|
|
||||||
|
|
||||||
.danger
|
|
||||||
$color = $danger
|
|
||||||
color white
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
&.outline
|
|
||||||
color black
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color white
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color white
|
|
||||||
background rgba($color, .7)
|
|
||||||
|
|
||||||
.warning
|
|
||||||
$color = $warning
|
|
||||||
color white
|
|
||||||
background $color
|
|
||||||
&:hover
|
|
||||||
background lighten($color, 30%)
|
|
||||||
&:focus
|
|
||||||
background lighten($color, 15%)
|
|
||||||
&.outline
|
|
||||||
color black
|
|
||||||
border 2px solid $color
|
|
||||||
background transparent
|
|
||||||
&:hover
|
|
||||||
color white
|
|
||||||
background rgba($color, .5)
|
|
||||||
&:focus
|
|
||||||
color white
|
|
||||||
background rgba($color, .7)
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import { ColorType } from '../interfaces'
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import Link from '../Link'
|
|
||||||
|
|
||||||
import css from './Tag.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
text: string
|
|
||||||
color?: ColorType
|
|
||||||
href: string
|
|
||||||
as?: string
|
|
||||||
outline?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Tag extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<Link
|
|
||||||
href={this.props.href}
|
|
||||||
as={this.props.as}
|
|
||||||
className={buildClassName(
|
|
||||||
css.tag,
|
|
||||||
[css[this.props.color as string], this.props.color],
|
|
||||||
[css.outline, this.props.outline]
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{this.props.text}
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
export function buildClassName(...classes: Array<Array<string | boolean | undefined> | string | undefined>): string | undefined {
|
|
||||||
const classesFinal: Array<string> = []
|
|
||||||
root: for (const classe of classes) {
|
|
||||||
if (typeof classe === 'undefined') {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
if (typeof classe === 'string') {
|
|
||||||
classesFinal.push(classe)
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
const classToPut = classe.shift()
|
|
||||||
if (typeof classToPut === 'undefined') {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
for (const iterator of classe) {
|
|
||||||
if (!iterator) {
|
|
||||||
continue root
|
|
||||||
}
|
|
||||||
}
|
|
||||||
classesFinal.push(classToPut + '')
|
|
||||||
}
|
|
||||||
if (classesFinal.length === 0) {
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
return classesFinal.join(' ')
|
|
||||||
}
|
|
||||||
|
|
||||||
export const colors = {
|
|
||||||
default: '#3949AB', // This color should never appear
|
|
||||||
primary: '#3949AB',
|
|
||||||
secondary: '#FCFCFC',
|
|
||||||
info: '#03A9F4',
|
|
||||||
success: '#2DCE89',
|
|
||||||
danger: '#F5365C',
|
|
||||||
warning: '#FB6340'
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
$default = #3700B3 // This color should never appear
|
|
||||||
$primary = #3700B3
|
|
||||||
$secondary = #FFF
|
|
||||||
$info = #0000FF
|
|
||||||
$success = #00FF00
|
|
||||||
$danger = #FF0000
|
|
||||||
$warning = #FFFF00
|
|
||||||
|
|
||||||
$transitionTime = .15s
|
|
||||||
$transitionFunction = ease-in-out
|
|
||||||
$transition = $transitionTime $transitionFunction
|
|
||||||
|
|
||||||
$mobile = 768px
|
|
||||||
$tablet = 1200px
|
|
||||||
|
|
||||||
$totalGapSize = 10%
|
|
||||||
$colCount = 12
|
|
||||||
$colCountTablet = 8
|
|
||||||
$colCountMobile = 4
|
|
||||||
|
|
||||||
$gapSize = 16px //$totalGapSize / ($colCount+1)
|
|
||||||
|
|
||||||
rem($a)
|
|
||||||
($a / 16)rem
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
*
|
|
||||||
*::before
|
|
||||||
*::after
|
|
||||||
box-sizing border-box
|
|
||||||
|
|
||||||
html
|
|
||||||
body
|
|
||||||
body > div
|
|
||||||
margin 0
|
|
||||||
height 100%
|
|
||||||
a
|
|
||||||
color inherit
|
|
||||||
text-decoration none
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { SVGAttributes } from 'react'
|
|
||||||
|
|
||||||
export type ColorType = 'primary' | 'secondary' | 'info' | 'success' | 'danger' | 'warning'
|
|
||||||
|
|
||||||
export interface IconProps extends SVGAttributes<SVGElement> {
|
|
||||||
color?: string
|
|
||||||
size?: string | number
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
// General Styling
|
|
||||||
|
|
||||||
html
|
|
||||||
body
|
|
||||||
margin 0
|
|
||||||
|
|
||||||
a
|
|
||||||
color inherit
|
|
||||||
text-decoration none
|
|
||||||
|
|
||||||
*
|
|
||||||
*::before
|
|
||||||
*::after
|
|
||||||
box-sizing border-box
|
|
||||||
@ -4,9 +4,8 @@ import Error from './_error'
|
|||||||
export default class E404 extends React.Component {
|
export default class E404 extends React.Component {
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return(
|
||||||
<Error statusCode={404} />
|
<Error statusCode={404} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
11
src/pages/500.tsx
Normal file
11
src/pages/500.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Error from './_error'
|
||||||
|
|
||||||
|
export default class E500 extends React.Component {
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
return(
|
||||||
|
<Error statusCode={500} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,24 +1,50 @@
|
|||||||
import App from 'next/app'
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import App from 'next/app'
|
||||||
|
import Router from 'next/router'
|
||||||
import { DefaultSeo } from 'next-seo'
|
import { DefaultSeo } from 'next-seo'
|
||||||
|
import { NotificationManager, Navbar, Loader, Footer } from '@dzeio/components'
|
||||||
|
|
||||||
import config from '../../clientConfig.json'
|
// import '../styl/globals.styl'
|
||||||
|
import '@dzeio/components/style.css'
|
||||||
|
|
||||||
import '@styl/index.styl'
|
export default class CustomApp extends App<unknown, unknown, {path?: string}> {
|
||||||
|
|
||||||
export default class CApp extends App {
|
public componentDidMount(): void {
|
||||||
|
this.checkMessage()
|
||||||
|
this.setState({ path: Router.asPath })
|
||||||
|
Router.events.on('routeChangeComplete', () => {
|
||||||
|
this.checkMessage()
|
||||||
|
this.setState({ path: Router.asPath })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
public render() {
|
public render(): JSX.Element {
|
||||||
const { Component, pageProps } = this.props
|
const { Component, pageProps } = this.props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DefaultSeo
|
<DefaultSeo
|
||||||
{...config.seo}
|
titleTemplate="%s - Sitename"
|
||||||
|
title="Sitemap"
|
||||||
|
description="Site description"
|
||||||
/>
|
/>
|
||||||
|
<Navbar
|
||||||
|
type="navbar"
|
||||||
|
items={[]}
|
||||||
|
/>
|
||||||
|
<Loader auto={{ increment: [1, 10], interval: [5, 50] }} />
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
|
<NotificationManager manageRoutes />
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private checkMessage() {
|
||||||
|
const msg = Router.query.message
|
||||||
|
if (typeof msg === 'string') {
|
||||||
|
NotificationManager.addNotification(msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
// eslint-disable-next-line @next/next/no-document-import-in-page
|
||||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||||
|
|
||||||
import Favicons from '@cp/Favicons'
|
export default class CustomDocument extends Document {
|
||||||
|
|
||||||
export default class CDocument extends Document {
|
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<Html>
|
<Html lang="en">
|
||||||
<Head>
|
<Head />
|
||||||
<Favicons />
|
|
||||||
</Head>
|
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
<NextScript />
|
<NextScript />
|
||||||
@ -18,5 +15,4 @@ export default class CDocument extends Document {
|
|||||||
</Html>
|
</Html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,26 +2,35 @@ import React from 'react'
|
|||||||
|
|
||||||
import { NextPageContext } from 'next'
|
import { NextPageContext } from 'next'
|
||||||
|
|
||||||
|
import { NextSeo } from 'next-seo'
|
||||||
|
import { Col, Text, Row, Box } from '@dzeio/components'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
statusCode: number
|
statusCode: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Error extends React.Component<Props> {
|
export default class Error extends React.Component<Props> {
|
||||||
|
|
||||||
public static async getInitialProps({ res, err }: NextPageContext): Promise<Props> {
|
public static async getInitialProps({res, err}: NextPageContext): Promise<Props> {
|
||||||
const statusCode = res?.statusCode || err?.statusCode || 500
|
|
||||||
return {
|
return {
|
||||||
statusCode
|
statusCode: res?.statusCode ?? err?.statusCode ?? 500
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>An Error Occured ! {this.props.statusCode}</h1>
|
<NextSeo title={`Error ${this.props.statusCode}`} />
|
||||||
|
<Row>
|
||||||
|
<Col size={3}></Col>
|
||||||
|
<Col size={6} tabletSize={8}>
|
||||||
|
<Box title={`${this.props.statusCode} Error`}>
|
||||||
|
<Text>It seems the page you were going does not exist !</Text>
|
||||||
|
</Box>
|
||||||
|
</Col>
|
||||||
|
<Col size={3}></Col>
|
||||||
|
</Row>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,53 +1,12 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Text } from '@dzeio/components'
|
||||||
|
|
||||||
import Navbar from '@cp/dzeio/Navbar'
|
export default class Homepage extends React.Component {
|
||||||
import GradientBackground from '@cp/dzeio/GradientBackground'
|
|
||||||
import NavbarSpace from '@cp/dzeio/Navbar/NavbarSpace'
|
|
||||||
import Container from '@cp/dzeio/Container'
|
|
||||||
import Overflow from '@cp/dzeio/Overflow'
|
|
||||||
import Row from '@cp/dzeio/Row'
|
|
||||||
import Col from '@cp/dzeio/Col'
|
|
||||||
import Input from '@cp/dzeio/Input'
|
|
||||||
import { BoxWrapper, BoxHeader, BoxBody } from '@cp/dzeio/Box'
|
|
||||||
import DebugCols from '@cp/dzeio/Col/DebugCols'
|
|
||||||
|
|
||||||
|
public render = (): JSX.Element => (
|
||||||
export default class Index extends React.Component {
|
<main>
|
||||||
|
<Text>Hello World !</Text>
|
||||||
public render() {
|
</main>
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* <DebugCols /> */}
|
|
||||||
<Navbar links={[]} />
|
|
||||||
<GradientBackground color="primary">
|
|
||||||
<NavbarSpace />
|
|
||||||
<Overflow top />
|
|
||||||
</GradientBackground>
|
|
||||||
<Row>
|
|
||||||
<Col size={9} tabletSize={6} mobileSize={4}>
|
|
||||||
<Overflow bottom />
|
|
||||||
<Row>
|
|
||||||
{[0, 1, 2, 3, 4, 5].map((el, index) => (
|
|
||||||
<Col size={4} tabletSize={4} mobileSize={4} key={index}>
|
|
||||||
<BoxWrapper outline>
|
|
||||||
<BoxHeader title="Post Title" subtitle="Post subtitle" />
|
|
||||||
<BoxBody>
|
|
||||||
<p>This Article is wonderfull !</p>
|
|
||||||
</BoxBody>
|
|
||||||
</BoxWrapper>
|
|
||||||
</Col>
|
|
||||||
))}
|
|
||||||
</Row>
|
|
||||||
</Col>
|
|
||||||
<Col size={3} tabletSize={2} mobileSize={4}>
|
|
||||||
<Input type="select" label="Sort">
|
|
||||||
<option>Most to less recent post</option>
|
|
||||||
<option>less to mort recent post</option>
|
|
||||||
</Input>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +0,0 @@
|
|||||||
import next from 'next'
|
|
||||||
import express from 'express'
|
|
||||||
|
|
||||||
const port = parseInt(process.env.PORT || '3000', 10)
|
|
||||||
const dev = process.env.NODE_ENV !== 'production'
|
|
||||||
|
|
||||||
const app = next({ dev })
|
|
||||||
const handle = app.getRequestHandler()
|
|
||||||
|
|
||||||
app.prepare().then(() => {
|
|
||||||
const server = express()
|
|
||||||
|
|
||||||
server.all('*', (req, res) => {
|
|
||||||
return handle(req, res)
|
|
||||||
})
|
|
||||||
|
|
||||||
server.listen(port, () => {
|
|
||||||
console.log(`> Ready on http://localhost:${port}`)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
3
src/styl/globals.styl
Normal file
3
src/styl/globals.styl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
// Global styl here
|
||||||
|
html, body
|
||||||
|
background white
|
||||||
4
theme.styl
Normal file
4
theme.styl
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// Theme files used by @dzeio/components to customize your CSS file
|
||||||
|
|
||||||
|
$main = #123456
|
||||||
|
$mainGradient = linear-gradient(to right, $main, #654321)
|
||||||
@ -1,27 +1,16 @@
|
|||||||
{
|
{
|
||||||
|
"extends": "./node_modules/@dzeio/config/tsconfig.nextjs.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "esnext",
|
||||||
"lib": [
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
],
|
|
||||||
"allowJs": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"strict": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
"baseUrl": "./src",
|
"baseUrl": "./src",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@styl/*": ["client/styl/*"],
|
"@styl/*": [
|
||||||
"@cp/*": ["client/components/*"],
|
"styl/*"
|
||||||
"@smd/*": ["client/styl/modules/*"],
|
],
|
||||||
|
"@cp/*": [
|
||||||
|
"components/*"
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"exclude": [
|
"exclude": [
|
||||||
@ -31,7 +20,7 @@
|
|||||||
],
|
],
|
||||||
"include": [
|
"include": [
|
||||||
"next-env.d.ts",
|
"next-env.d.ts",
|
||||||
"src/client/styl/stylus.d.ts",
|
"src/styl/stylus.d.ts",
|
||||||
"**/*.ts",
|
"**/*.ts",
|
||||||
"**/*.tsx"
|
"**/*.tsx"
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"module": "commonjs",
|
|
||||||
"outDir": "scripts-dist",
|
|
||||||
"target": "es2017",
|
|
||||||
"isolatedModules": false,
|
|
||||||
"noEmit": false
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"scripts/**/*.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"module": "commonjs",
|
|
||||||
"outDir": "dist",
|
|
||||||
"target": "es2017",
|
|
||||||
"isolatedModules": false,
|
|
||||||
"noEmit": false,
|
|
||||||
"emitDecoratorMetadata": true,
|
|
||||||
"experimentalDecorators": true
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src/server/**/*.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user