feat(projects): 左侧项目菜单。
feat: tailwindcss + mobx + apollo.
This commit is contained in:
Ivan Li
parent
26cc8539eb
commit
57eb3d317b
5
.eslintignore
Normal file
5
.eslintignore
Normal file
@ -0,0 +1,5 @@
|
||||
preact.config.js
|
||||
src/generated/**/*
|
||||
postcss.js
|
||||
*.config.js
|
||||
tests/**/*
|
||||
78
.eslintrc.js
78
.eslintrc.js
@ -1,41 +1,45 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true
|
||||
env: {
|
||||
browser: true
|
||||
},
|
||||
plugins: ['@typescript-eslint'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/eslint-recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
'prettier/@typescript-eslint',
|
||||
'prettier/react'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
},
|
||||
plugins: ["@typescript-eslint"],
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier/@typescript-eslint",
|
||||
"prettier/react"
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
},
|
||||
project: "./tsconfig.eslint.json",
|
||||
project: './tsconfig.eslint.json'
|
||||
},
|
||||
rules: {
|
||||
'react/no-unknown-property': ['error', { ignore: ['class'] }],
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
quotes: ['error', 'single'],
|
||||
'prettier/prettier': ['error', { singleQuote: true }]
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
pragma: 'h',
|
||||
version: 'detect'
|
||||
}
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.js', '*.ts', '*.tsx'],
|
||||
rules: {
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/interface-name-prefix': 'off'
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
"react/no-unknown-property": ["error", { ignore: ["class"] }],
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
pragma: "h",
|
||||
version: "detect"
|
||||
},
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.js"],
|
||||
rules: {
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
package.json
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
build
|
||||
build
|
||||
preact.config.js
|
||||
@ -1 +1,4 @@
|
||||
tabWidth: 4
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true
|
||||
}
|
||||
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"css.validate": false,
|
||||
"scss.validate": false,
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true,
|
||||
"other": true,
|
||||
}
|
||||
}
|
||||
8
apollo.config.js
Normal file
8
apollo.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
client: {
|
||||
service: {
|
||||
name: 'fennec-be',
|
||||
url: 'http://localhost:7122/graphql'
|
||||
}
|
||||
}
|
||||
};
|
||||
12
codegen.yml
Normal file
12
codegen.yml
Normal file
@ -0,0 +1,12 @@
|
||||
overwrite: true
|
||||
schema: "http://localhost:7122/graphql"
|
||||
# documents: "src/**/*.graphql"
|
||||
generates:
|
||||
src/generated/graphql.tsx:
|
||||
plugins:
|
||||
- "typescript"
|
||||
- "typescript-operations"
|
||||
- "typescript-react-apollo"
|
||||
./graphql.schema.json:
|
||||
plugins:
|
||||
- "introspection"
|
||||
1580
graphql.schema.json
Normal file
1580
graphql.schema.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,12 @@
|
||||
module.exports = {
|
||||
preset: "jest-preset-preact",
|
||||
setupFiles: [
|
||||
"<rootDir>/src/tests/__mocks__/setupTests.js",
|
||||
"<rootDir>/src/tests/__mocks__/browserMocks.js"
|
||||
],
|
||||
testURL: "http://localhost:8080",
|
||||
moduleNameMapper: {
|
||||
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMocks.js",
|
||||
}
|
||||
}
|
||||
preset: 'jest-preset-preact',
|
||||
setupFiles: [
|
||||
'<rootDir>/tests/__mocks__/setupTests.js',
|
||||
'<rootDir>/tests/__mocks__/browserMocks.js'
|
||||
],
|
||||
testURL: 'http://localhost:7123',
|
||||
moduleNameMapper: {
|
||||
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
||||
'<rootDir>/src/tests/__mocks__/fileMocks.js'
|
||||
}
|
||||
};
|
||||
|
||||
6420
package-lock.json
generated
6420
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -5,8 +5,10 @@
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build": "preact build",
|
||||
"serve": "sirv build --port 8080 --cors --single",
|
||||
"dev": "preact watch",
|
||||
"serve": "sirv build --port 7123 --cors --single",
|
||||
"dev": "preact watch --port 7123",
|
||||
"predev": "npm run graphql",
|
||||
"graphql": "graphql-codegen --config codegen.yml",
|
||||
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
|
||||
"test": "jest ./tests"
|
||||
},
|
||||
@ -23,13 +25,25 @@
|
||||
"build/*"
|
||||
],
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.3.7",
|
||||
"@tailwindcss/postcss7-compat": "^2.0.2",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"graphql": "^15.5.0",
|
||||
"mobx": "^6.1.4",
|
||||
"mobx-react": "^7.1.0",
|
||||
"postcss": "^7.0.35",
|
||||
"preact": "^10.3.1",
|
||||
"preact-jsx-chai": "^3.0.0",
|
||||
"preact-markup": "^2.0.0",
|
||||
"preact-render-to-string": "^5.1.4",
|
||||
"preact-router": "^3.2.1"
|
||||
"preact-router": "^3.2.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^1.20.1",
|
||||
"@graphql-codegen/introspection": "^1.18.1",
|
||||
"@graphql-codegen/typescript-operations": "^1.17.14",
|
||||
"@graphql-codegen/typescript-react-apollo": "^2.2.1",
|
||||
"@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
|
||||
"@types/enzyme": "^3.10.5",
|
||||
"@types/jest": "^26.0.8",
|
||||
@ -50,6 +64,8 @@
|
||||
"lint-staged": "^10.0.7",
|
||||
"preact-cli": "^3.0.0",
|
||||
"prettier": "^1.19.1",
|
||||
"sass": "^1.32.5",
|
||||
"sass-loader": "^10.1.1",
|
||||
"sirv-cli": "^1.0.0-next.3",
|
||||
"typescript": "^3.7.5"
|
||||
}
|
||||
|
||||
4
postcss.js
Normal file
4
postcss.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
modules: true,
|
||||
plugins: [require('tailwindcss'), require('autoprefixer')]
|
||||
};
|
||||
@ -1,30 +1,37 @@
|
||||
import { resolve } from "path";
|
||||
import { resolve } from 'path';
|
||||
|
||||
export default {
|
||||
/**
|
||||
* Function that mutates the original webpack config.
|
||||
* Supports asynchronous changes when a promise is returned (or it's an async function).
|
||||
*
|
||||
* @param {object} config - original webpack config.
|
||||
* @param {object} env - options passed to the CLI.
|
||||
* @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
|
||||
* @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
|
||||
**/
|
||||
webpack(config, env, helpers, options) {
|
||||
config.module.rules[4].use.splice(1, 0, {
|
||||
loader: "@teamsupercell/typings-for-css-modules-loader",
|
||||
options: {
|
||||
banner:
|
||||
"// This file is automatically generated from your CSS. Any edits will be overwritten.",
|
||||
disableLocalsExport: true
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Function that mutates the original webpack config.
|
||||
* Supports asynchronous changes when a promise is returned (or it's an async function).
|
||||
*
|
||||
* @param {object} config - original webpack config.
|
||||
* @param {object} env - options passed to the CLI.
|
||||
* @param {WebpackConfigHelpers} helpers - object with useful helpers for working with the webpack config.
|
||||
* @param {object} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
|
||||
**/
|
||||
webpack(config, env, helpers, options) {
|
||||
config.module.rules[4].use.splice(1, 0, {
|
||||
loader: '@teamsupercell/typings-for-css-modules-loader',
|
||||
options: {
|
||||
banner:
|
||||
'// This file is automatically generated from your CSS. Any edits will be overwritten.',
|
||||
disableLocalsExport: true
|
||||
}
|
||||
});
|
||||
|
||||
// Use any `index` file, not just index.js
|
||||
config.resolve.alias["preact-cli-entrypoint"] = resolve(
|
||||
process.cwd(),
|
||||
"src",
|
||||
"index"
|
||||
);
|
||||
}
|
||||
// Use any `index` file, not just index.js
|
||||
config.resolve.alias['preact-cli-entrypoint'] = resolve(
|
||||
process.cwd(),
|
||||
'src',
|
||||
'index'
|
||||
);
|
||||
|
||||
const postCssLoaders = helpers.getLoadersByName(config, 'postcss-loader');
|
||||
postCssLoaders.forEach(({ loader }) => {
|
||||
const plugins = loader.options.plugins;
|
||||
// Add tailwind css at the top.
|
||||
plugins.unshift(require('tailwindcss'));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
7
src/components/app.scss
Normal file
7
src/components/app.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.projectPanel {
|
||||
@apply w-1/6;
|
||||
}
|
||||
|
||||
.app {
|
||||
@apply flex bg-red-50;
|
||||
}
|
||||
11
src/components/app.scss.d.ts
vendored
Normal file
11
src/components/app.scss.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace AppScssNamespace {
|
||||
export interface IAppScss {
|
||||
app: string;
|
||||
projectPanel: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const AppScssModule: AppScssNamespace.IAppScss;
|
||||
|
||||
export = AppScssModule;
|
||||
@ -1,28 +1,49 @@
|
||||
import { FunctionalComponent, h } from "preact";
|
||||
import { Route, Router, RouterOnChangeArgs } from "preact-router";
|
||||
import {
|
||||
ApolloClient,
|
||||
ApolloProvider,
|
||||
gql,
|
||||
InMemoryCache,
|
||||
useQuery
|
||||
} from '@apollo/client';
|
||||
import { FunctionalComponent, FunctionComponent, h } from 'preact';
|
||||
import { globalState } from '../global.state';
|
||||
import { ProjectPanel } from './projects/project-panel';
|
||||
import * as styles from './app.scss';
|
||||
|
||||
import Home from "../routes/home";
|
||||
import Profile from "../routes/profile";
|
||||
import NotFoundPage from "../routes/notfound";
|
||||
import Header from "./header";
|
||||
const LIST_PROJECT = gql`
|
||||
query listProject {
|
||||
findProjects {
|
||||
id
|
||||
name
|
||||
sshUrl
|
||||
comment
|
||||
webUrl
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const client = new ApolloClient({
|
||||
uri: '/api/graphql',
|
||||
cache: new InMemoryCache()
|
||||
});
|
||||
|
||||
const App: FunctionalComponent = () => {
|
||||
let currentUrl: string;
|
||||
const handleRoute = (e: RouterOnChangeArgs) => {
|
||||
currentUrl = e.url;
|
||||
};
|
||||
return (
|
||||
<ApolloProvider client={client}>
|
||||
<div id="app" class={styles.app}>
|
||||
<Content />
|
||||
</div>
|
||||
</ApolloProvider>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="app">
|
||||
<Header />
|
||||
<Router onChange={handleRoute}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/profile/" component={Profile} user="me" />
|
||||
<Route path="/profile/:user" component={Profile} />
|
||||
<NotFoundPage default />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
const Content: FunctionComponent = () => {
|
||||
const { loading, data } = useQuery(LIST_PROJECT);
|
||||
globalState.projects = data?.findProjects;
|
||||
console.log(globalState.projects);
|
||||
const Loading: FunctionComponent = () => <div>Loading...</div>;
|
||||
const Board: FunctionComponent = () => <ProjectPanel />;
|
||||
return loading ? <Loading /> : <Board />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import { FunctionalComponent, h } from "preact";
|
||||
import { Link } from "preact-router/match";
|
||||
import * as style from "./style.css";
|
||||
|
||||
const Header: FunctionalComponent = () => {
|
||||
return (
|
||||
<header class={style.header}>
|
||||
<h1>Preact App</h1>
|
||||
<nav>
|
||||
<Link activeClassName={style.active} href="/">
|
||||
Home
|
||||
</Link>
|
||||
<Link activeClassName={style.active} href="/profile">
|
||||
Me
|
||||
</Link>
|
||||
<Link activeClassName={style.active} href="/profile/john">
|
||||
John
|
||||
</Link>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -1,48 +0,0 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
background: #673AB7;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
font-size: 24px;
|
||||
line-height: 56px;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.header nav {
|
||||
float: right;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.header nav a {
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 0 15px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0);
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
will-change: background-color;
|
||||
}
|
||||
|
||||
.header nav a:hover,
|
||||
.header nav a:active {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.header nav a.active {
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
11
src/components/header/style.css.d.ts
vendored
11
src/components/header/style.css.d.ts
vendored
@ -1,11 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace StyleCssNamespace {
|
||||
export interface IStyleCss {
|
||||
active: string;
|
||||
header: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||
|
||||
export = StyleCssModule;
|
||||
29
src/components/projects/project-panel.scss
Normal file
29
src/components/projects/project-panel.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.panel {
|
||||
@apply h-full overflow-auto;
|
||||
|
||||
h1 {
|
||||
@apply bg-red-400 text-white text-lg text-center p-2;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
@apply bg-red-200;
|
||||
}
|
||||
.item {
|
||||
@apply block bg-gray-50 text-red-400 py-2 px-4 my-px cursor-pointer transition-colors;
|
||||
@apply hover:bg-red-50;
|
||||
|
||||
h3 {
|
||||
}
|
||||
small {
|
||||
@apply text-sm text-red-300;
|
||||
}
|
||||
}
|
||||
|
||||
.itemActive {
|
||||
@apply text-white bg-red-400;
|
||||
@apply hover:bg-red-400;
|
||||
|
||||
small {
|
||||
@apply text-red-100;
|
||||
}
|
||||
}
|
||||
13
src/components/projects/project-panel.scss.d.ts
vendored
Normal file
13
src/components/projects/project-panel.scss.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace ProjectPanelScssNamespace {
|
||||
export interface IProjectPanelScss {
|
||||
item: string;
|
||||
itemActive: string;
|
||||
list: string;
|
||||
panel: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const ProjectPanelScssModule: ProjectPanelScssNamespace.IProjectPanelScss;
|
||||
|
||||
export = ProjectPanelScssModule;
|
||||
37
src/components/projects/project-panel.tsx
Normal file
37
src/components/projects/project-panel.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import { observer } from 'mobx-react';
|
||||
import { FunctionComponent, h } from 'preact';
|
||||
import { Project } from '../../generated/graphql';
|
||||
import { GlobalState, globalState } from '../../global.state';
|
||||
import * as styles from './project-panel.scss';
|
||||
|
||||
export function ProjectPanel() {
|
||||
return (
|
||||
<section class={styles.panel}>
|
||||
<h1>Fennec</h1>
|
||||
<List globalState={globalState} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const List: FunctionComponent<{ globalState: GlobalState }> = observer(
|
||||
({ globalState }) => {
|
||||
const setCurrProejct = (project: Project) => {
|
||||
globalState.setCurrentProject(project);
|
||||
};
|
||||
console.log('change');
|
||||
|
||||
const list = globalState.projects?.map(item => (
|
||||
<li
|
||||
class={`${styles.item} ${
|
||||
item === globalState.currentProject ? styles.itemActive : ''
|
||||
}`}
|
||||
key={item.id}
|
||||
onClick={() => setCurrProejct(item)}
|
||||
>
|
||||
<h3>{item.name}</h3>
|
||||
<small>{item.comment}</small>
|
||||
</li>
|
||||
));
|
||||
return <ol class={styles.list}>{list}</ol>;
|
||||
}
|
||||
);
|
||||
82
src/generated/graphql.tsx
Normal file
82
src/generated/graphql.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { gql } from '@apollo/client';
|
||||
export type Maybe<T> = T | null;
|
||||
export type Exact<T extends { [key: string]: unknown }> = {
|
||||
[K in keyof T]: T[K];
|
||||
};
|
||||
export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
|
||||
{ [SubKey in K]?: Maybe<T[SubKey]> };
|
||||
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> &
|
||||
{ [SubKey in K]: Maybe<T[SubKey]> };
|
||||
/** All built-in and custom scalars, mapped to their actual values */
|
||||
export type Scalars = {
|
||||
ID: string;
|
||||
String: string;
|
||||
Boolean: boolean;
|
||||
Int: number;
|
||||
Float: number;
|
||||
/** A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. */
|
||||
DateTime: any;
|
||||
};
|
||||
|
||||
export type Hello = {
|
||||
__typename?: 'Hello';
|
||||
message: Scalars['String'];
|
||||
};
|
||||
|
||||
export type Project = {
|
||||
__typename?: 'Project';
|
||||
id: Scalars['ID'];
|
||||
name: Scalars['String'];
|
||||
comment: Scalars['String'];
|
||||
sshUrl: Scalars['String'];
|
||||
webUrl?: Maybe<Scalars['String']>;
|
||||
webHookSecret?: Maybe<Scalars['String']>;
|
||||
deletedAt?: Maybe<Scalars['DateTime']>;
|
||||
};
|
||||
|
||||
export type Query = {
|
||||
__typename?: 'Query';
|
||||
hello: Hello;
|
||||
findProjects: Array<Project>;
|
||||
findProject: Project;
|
||||
};
|
||||
|
||||
export type QueryFindProjectArgs = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
export type Mutation = {
|
||||
__typename?: 'Mutation';
|
||||
createProject: Project;
|
||||
modifyProject: Scalars['Boolean'];
|
||||
deleteProject: Scalars['Float'];
|
||||
};
|
||||
|
||||
export type MutationCreateProjectArgs = {
|
||||
project: CreateProjectInput;
|
||||
};
|
||||
|
||||
export type MutationModifyProjectArgs = {
|
||||
project: UpdateProjectInput;
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
export type MutationDeleteProjectArgs = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
export type CreateProjectInput = {
|
||||
name: Scalars['String'];
|
||||
comment: Scalars['String'];
|
||||
sshUrl: Scalars['String'];
|
||||
webUrl?: Maybe<Scalars['String']>;
|
||||
webHookSecret?: Maybe<Scalars['String']>;
|
||||
};
|
||||
|
||||
export type UpdateProjectInput = {
|
||||
name: Scalars['String'];
|
||||
comment: Scalars['String'];
|
||||
sshUrl: Scalars['String'];
|
||||
webUrl?: Maybe<Scalars['String']>;
|
||||
webHookSecret?: Maybe<Scalars['String']>;
|
||||
};
|
||||
18
src/global.state.ts
Normal file
18
src/global.state.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { action, makeAutoObservable, observable } from 'mobx';
|
||||
import { Project } from './generated/graphql';
|
||||
|
||||
export class GlobalState {
|
||||
@observable projects?: Project[];
|
||||
@observable currentProject?: Project;
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
@action
|
||||
setCurrentProject(project: Project) {
|
||||
this.currentProject = project;
|
||||
}
|
||||
}
|
||||
|
||||
export const globalState = new GlobalState();
|
||||
@ -1,4 +1,4 @@
|
||||
import "./style/index.css";
|
||||
import App from "./components/app.tsx";
|
||||
import './style/index.css';
|
||||
import App from './components/app.tsx';
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import { FunctionalComponent, h } from "preact";
|
||||
import * as style from "./style.css";
|
||||
|
||||
const Home: FunctionalComponent = () => {
|
||||
return (
|
||||
<div class={style.home}>
|
||||
<h1>Home</h1>
|
||||
<p>This is the Home component.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@ -1,5 +0,0 @@
|
||||
.home {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
10
src/routes/home/style.css.d.ts
vendored
10
src/routes/home/style.css.d.ts
vendored
@ -1,10 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace StyleCssNamespace {
|
||||
export interface IStyleCss {
|
||||
home: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||
|
||||
export = StyleCssModule;
|
||||
@ -1,17 +0,0 @@
|
||||
import { FunctionalComponent, h } from "preact";
|
||||
import { Link } from "preact-router/match";
|
||||
import * as style from "./style.css";
|
||||
|
||||
const Notfound: FunctionalComponent = () => {
|
||||
return (
|
||||
<div class={style.notfound}>
|
||||
<h1>Error 404</h1>
|
||||
<p>That page doesn't exist.</p>
|
||||
<Link href="/">
|
||||
<h4>Back to Home</h4>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notfound;
|
||||
@ -1,4 +0,0 @@
|
||||
.notfound {
|
||||
padding: 0 5%;
|
||||
margin: 100px 0;
|
||||
}
|
||||
10
src/routes/notfound/style.css.d.ts
vendored
10
src/routes/notfound/style.css.d.ts
vendored
@ -1,10 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace StyleCssNamespace {
|
||||
export interface IStyleCss {
|
||||
notfound: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||
|
||||
export = StyleCssModule;
|
||||
@ -1,44 +0,0 @@
|
||||
import { FunctionalComponent, h } from "preact";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import * as style from "./style.css";
|
||||
|
||||
interface Props {
|
||||
user: string;
|
||||
}
|
||||
|
||||
const Profile: FunctionalComponent<Props> = (props: Props) => {
|
||||
const { user } = props;
|
||||
const [time, setTime] = useState<number>(Date.now());
|
||||
const [count, setCount] = useState<number>(0);
|
||||
|
||||
// gets called when this route is navigated to
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => setTime(Date.now()), 1000);
|
||||
|
||||
// gets called just before navigating away from the route
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// update the current time
|
||||
const increment = () => {
|
||||
setCount(count + 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={style.profile}>
|
||||
<h1>Profile: {user}</h1>
|
||||
<p>This is the user profile for a user named {user}.</p>
|
||||
|
||||
<div>Current time: {new Date(time).toLocaleString()}</div>
|
||||
|
||||
<p>
|
||||
<button onClick={increment}>Click Me</button> Clicked {count}{" "}
|
||||
times.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@ -1,5 +0,0 @@
|
||||
.profile {
|
||||
padding: 56px 20px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
10
src/routes/profile/style.css.d.ts
vendored
10
src/routes/profile/style.css.d.ts
vendored
@ -1,10 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace StyleCssNamespace {
|
||||
export interface IStyleCss {
|
||||
profile: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const StyleCssModule: StyleCssNamespace.IStyleCss;
|
||||
|
||||
export = StyleCssModule;
|
||||
@ -1,20 +1,25 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #FAFAFA;
|
||||
font-family: 'Helvetica Neue', arial, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #fafafa;
|
||||
font-family: 'Helvetica Neue', arial, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-Hans-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><% preact.title %></title>
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { configure } from "enzyme";
|
||||
import Adapter from "enzyme-adapter-preact-pure";
|
||||
|
||||
configure({
|
||||
adapter: new Adapter()
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
import { h } from "preact";
|
||||
// See: https://github.com/preactjs/enzyme-adapter-preact-pure
|
||||
import { shallow } from "enzyme";
|
||||
import Header from "../components/header";
|
||||
|
||||
describe("Initial Test of the Header", () => {
|
||||
test("Header renders 3 nav items", () => {
|
||||
const context = shallow(<Header />);
|
||||
expect(context.find("h1").text()).toBe("Preact App");
|
||||
expect(context.find("Link").length).toBe(3);
|
||||
});
|
||||
});
|
||||
12
stylelint.config.js
Normal file
12
stylelint.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
rules: {
|
||||
'at-rule-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
|
||||
}
|
||||
],
|
||||
'declaration-block-trailing-semicolon': null,
|
||||
'no-descending-specificity': null
|
||||
}
|
||||
};
|
||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
purge: [],
|
||||
darkMode: 'class', // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
variants: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
@ -1,3 +1,3 @@
|
||||
// This fixed an error related to the CSS and loading gif breaking my Jest test
|
||||
// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
|
||||
export default "test-file-stub";
|
||||
export default 'test-file-stub';
|
||||
6
tests/__mocks__/setupTests.js
Normal file
6
tests/__mocks__/setupTests.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-preact-pure';
|
||||
|
||||
configure({
|
||||
adapter: new Adapter()
|
||||
});
|
||||
13
tests/header.test.tsx
Normal file
13
tests/header.test.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
/* import { h } from 'preact';
|
||||
// See: https://github.com/preactjs/enzyme-adapter-preact-pure
|
||||
import { shallow } from 'enzyme';
|
||||
import Header from '../components/header';
|
||||
|
||||
describe('Initial Test of the Header', () => {
|
||||
test('Header renders 3 nav items', () => {
|
||||
const context = shallow(<Header />);
|
||||
expect(context.find('h1').text()).toBe('Preact App');
|
||||
expect(context.find('Link').length).toBe(3);
|
||||
});
|
||||
});
|
||||
*/
|
||||
102
tsconfig.json
102
tsconfig.json
@ -1,57 +1,59 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
"target": "ES5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
|
||||
"module": "ESNext", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||
// "lib": [], /* Specify library files to be included in the compilation: */
|
||||
"allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
"jsxFactory": "h", /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
"noEmit": true, /* Do not emit outputs. */
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
"target": "ES6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
|
||||
"module": "ESNext" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
|
||||
// "lib": [], /* Specify library files to be included in the compilation: */
|
||||
"allowJs": true /* Allow javascript files to be compiled. */,
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
|
||||
"jsxFactory": "h" /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */,
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
"noEmit": true /* Do not emit outputs. */,
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true /* Enable all strict type-checking options. */,
|
||||
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||
|
||||
/* Additional Checks */
|
||||
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
/* Additional Checks */
|
||||
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
|
||||
/* Experimental Options */
|
||||
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["src/**/*.tsx", "src/**/*.ts"]
|
||||
/* Experimental Options */
|
||||
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
|
||||
"emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
|
||||
"esModuleInterop": true,
|
||||
|
||||
"useDefineForClassFields": true
|
||||
},
|
||||
"include": ["src/**/*.tsx", "src/**/*.ts"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user