-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #284 from telamonian/add-react-ui
Add react UI skeleton
- Loading branch information
Showing
14 changed files
with
3,910 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,3 +21,8 @@ docs/_build | |
# nix | ||
.direnv | ||
**/.DS_Store | ||
|
||
# vscode | ||
.history/ | ||
.vscode/ | ||
*.code-workspace |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# conda-store-ui |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
{ | ||
"name": "conda-store-ui", | ||
"version": "0.0.1", | ||
"description": "UI elements for building a frontend for conda-store", | ||
"scripts": { | ||
"build": "tsc --build", | ||
"build:watch": "tsc --build --watch", | ||
"clean": "rimraf dist lib types *.tsbuildinfo", | ||
"clean:slate": "yarn run clean && rimraf node_modules", | ||
"start": "webpack server", | ||
"start:chromium": "webpack serve --open 'chromium'", | ||
"start:prod": "NODE_ENV=production webpack serve", | ||
"watch": "npm-run-all -p *:watch", | ||
"webpack": "webpack --color", | ||
"webpack:prod": "NODE_ENV=production webpack --color", | ||
"webpack:watch": "webpack --color --watch" | ||
}, | ||
"keywords": [], | ||
"license": "BSD-3-Clause", | ||
"dependencies": { | ||
"redux": "^4.2.0", | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0", | ||
"react-redux": "^8.0.2", | ||
"@mui/material":"^5.6.1", | ||
"@emotion/react": "^11.9.0", | ||
"@emotion/styled": "^11.8.1", | ||
"@reduxjs/toolkit": "^1.8.2", | ||
"@types/redux": "^3.6.0", | ||
"@types/react": "^18.0.0", | ||
"@types/react-dom": "^18.0.0", | ||
"@types/react-redux": "^7.1.24" | ||
}, | ||
"devDependencies": { | ||
"css-loader": "^6.7.1", | ||
"css-minimizer-webpack-plugin": "^3.4.1", | ||
"less":"^4.1.2", | ||
"less-loader": "^10.2.0", | ||
"mini-css-extract-plugin": "^2.6.0", | ||
"postcss":"^8.4.12", | ||
"postcss-loader": "^6.2.1", | ||
"source-map-loader": "^3.0.1", | ||
"html-webpack-plugin": "^5.5.0", | ||
"rimraf": "^3.0.2", | ||
"ts-loader": "^8.0.17", | ||
"typescript": "^4.6.3", | ||
"webpack": "^5.72.0", | ||
"webpack-cli": "^4.9.2", | ||
"webpack-dev-server": "^4.8.1" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './pkglist'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import * as React from "react" | ||
|
||
export function Pkglist(params: {}) { | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' | ||
import type { RootState, AppDispatch } from './store' | ||
|
||
// Use throughout your app instead of plain `useDispatch` and `useSelector` | ||
export const useAppDispatch: () => AppDispatch = useDispatch; | ||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export * from './hooks'; | ||
export * from './store'; | ||
|
||
export * from './components'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { configureStore } from '@reduxjs/toolkit' | ||
|
||
const store = configureStore({ | ||
reducer: { | ||
} | ||
}) | ||
|
||
// Infer the `RootState` and `AppDispatch` types from the store itself | ||
export type RootState = ReturnType<typeof store.getState> | ||
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} | ||
export type AppDispatch = typeof store.dispatch |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/* | ||
* Copyright (c) 2020, Max Klein | ||
* | ||
* This file is part of the tree-finder library, distributed under the terms of | ||
* the BSD 3 Clause license. The full license can be found in the LICENSE file. | ||
*/ | ||
|
||
@import url('~tree-finder/dist/tree-finder.css'); | ||
@import url('~tree-finder/dist/theme/material.css'); | ||
|
||
body { | ||
margin-right: 0; | ||
margin-bottom: 0; | ||
} | ||
|
||
tree-finder-panel { | ||
height: calc(100vh - 8px); | ||
} | ||
|
||
tree-finder-grid { | ||
padding: 0; | ||
margin-left: 12px; | ||
overflow-x: auto; | ||
} | ||
|
||
/* tree-finder .rt-virtual-panel, | ||
tree-finder .rt-scroll-table-clip { | ||
display: inline-block; | ||
} */ | ||
|
||
/* tree-finder .tf-panel-grid { | ||
padding-left: 0; | ||
width: fit-content; | ||
} */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"$schema": "http://json.schemastore.org/tsconfig", | ||
"extends": "./tsconfigbase", | ||
"compilerOptions": { | ||
"baseUrl": ".", | ||
"declarationDir": "./types", | ||
"outDir": "lib", | ||
"rootDir": "src" | ||
}, | ||
"include": ["src/**/*"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"$schema": "http://json.schemastore.org/tsconfig", | ||
"compilerOptions": { | ||
"composite": true, | ||
"declaration": true, | ||
"declarationMap": true, | ||
"incremental": true, | ||
"jsx": "react", | ||
"module": "esnext", | ||
"moduleResolution": "node", | ||
"noEmitOnError": true, | ||
"noImplicitAny": true, | ||
"sourceMap": true, | ||
"strictNullChecks": true, | ||
"target": "es2019" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
/* | ||
* Copyright (c) 2020, Max Klein | ||
* | ||
* This file is part of the tree-finder library, distributed under the terms of | ||
* the BSD 3 Clause license. The full license can be found in the LICENSE file. | ||
*/ | ||
const HtmlWebpackPlugin = require("html-webpack-plugin"); | ||
const path = require("path"); | ||
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
|
||
// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); | ||
// To improve build times for large projects enable fork-ts-checker-webpack-plugin | ||
// const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); | ||
|
||
const { dependencySrcMapRules, stylingRules, svgUrlRules, getContext, getOptimization, getResolve, tsRules } = require("./webpack.rules"); | ||
|
||
const isProd = process.env.NODE_ENV === "production"; | ||
|
||
const simpleExampleConfig = { | ||
devtool: "source-map", | ||
entry: "src/index.tsx", | ||
watch: false, | ||
...getContext(__dirname), | ||
|
||
output: { | ||
path: path.resolve(__dirname, "dist"), | ||
filename: "[name].js" | ||
}, | ||
|
||
module: { | ||
rules: [ | ||
...dependencySrcMapRules, | ||
...stylingRules, | ||
...svgUrlRules, | ||
...tsRules, | ||
], | ||
}, | ||
|
||
resolve: { | ||
...getResolve(__dirname), | ||
}, | ||
|
||
// devServer: { | ||
// // contentBase: [path.join(__dirname, "examples"), path.join(__dirname, ".")], | ||
// // inline: false, | ||
// // publicPath: "/dist/", | ||
|
||
// // dev-server writes to disk instead of keeping the bundle in memory | ||
// writeToDisk: true, | ||
// }, | ||
|
||
plugins: [ | ||
new HtmlWebpackPlugin({ | ||
title: "simple tree-finder example" | ||
}), | ||
new MiniCssExtractPlugin(), | ||
], | ||
|
||
mode: isProd ? "production": "development", | ||
|
||
optimization: { | ||
minimize: isProd, | ||
...isProd && getOptimization(), | ||
}, | ||
} | ||
|
||
module.exports = [ | ||
simpleExampleConfig, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
/* | ||
* Copyright (c) 2020, Max Klein | ||
* | ||
* This file is part of the tree-finder library, distributed under the terms of | ||
* the BSD 3 Clause license. The full license can be found in the LICENSE file. | ||
*/ | ||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); | ||
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | ||
const path = require("path"); | ||
const TerserPlugin = require("terser-webpack-plugin"); | ||
|
||
const cssLoader = () => {return { | ||
loader: "css-loader", | ||
options: { | ||
importLoaders: 1, | ||
import: true, | ||
modules: { | ||
localIdentName: "[local]", //"[path][name]__[local]--[hash:base64:5]", | ||
// compileType: "module", | ||
// mode: "local", | ||
// auto: true, | ||
// exportGlobals: true, | ||
// localIdentContext: path.resolve(__dirname, "src"), | ||
// localIdentHashPrefix: "my-custom-hash", | ||
// namedExport: true, | ||
// exportLocalsConvention: "camelCase", | ||
// exportOnlyLocals: false, | ||
}, | ||
}, | ||
};} | ||
|
||
// const postCssLoader = () => {return { | ||
// loader: "postcss-loader", | ||
// ...(process.env.NODE_ENV === "production") && {options: { | ||
// postcssOptions: { | ||
// minimize: true, | ||
// plugins: [ | ||
// cssnano({ | ||
// preset: "lite" | ||
// }), | ||
// ], | ||
// }, | ||
// }}, | ||
// };} | ||
|
||
// load bitmap image rules | ||
const bitmapRules = [ | ||
{ | ||
test: /\.(jpg|png|gif)$/, | ||
use: "file-loader" | ||
}, | ||
]; | ||
|
||
// load dependency source maps | ||
const dependencySrcMapRules = [ | ||
{ | ||
test: /\.js$/, | ||
use: "source-map-loader", | ||
enforce: "pre", | ||
exclude: /node_modules/, | ||
}, | ||
{test: /\.js.map$/, use: "file-loader"}, | ||
]; | ||
|
||
// rules to cover all of pure/modules css/less | ||
const stylingRules = [ | ||
{ | ||
test: /\.module\.css$/, | ||
use: [ | ||
cssLoader(), | ||
], | ||
}, | ||
{ | ||
test: /(?<!\.module)\.css$/, | ||
use: [ | ||
// "style-loader", | ||
MiniCssExtractPlugin.loader, | ||
cssLoader(), | ||
], | ||
}, | ||
{ | ||
test: /\.module\.less$/, | ||
use: [ | ||
cssLoader(), | ||
// "postcss-loader", | ||
"less-loader", | ||
], | ||
}, | ||
{ | ||
test: /(?<!\.module)\.less$/, | ||
use: [ | ||
// "style-loader", | ||
MiniCssExtractPlugin.loader, | ||
cssLoader(), | ||
// "postcss-loader", | ||
"less-loader", | ||
], | ||
}, | ||
]; | ||
|
||
// load svg via css url() rules | ||
const svgUrlRules = [ | ||
{ | ||
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, | ||
use: { | ||
loader: "svg-url-loader", | ||
options: {encoding: "none", limit: 10000}, | ||
}, | ||
}, | ||
]; | ||
|
||
const tsRules = [ | ||
{ | ||
test: /\.tsx?$/, | ||
exclude: /node_modules/, | ||
use: { | ||
loader: "ts-loader", | ||
options: { | ||
transpileOnly: false, // Set to true if you are using fork-ts-checker-webpack-plugin | ||
projectReferences: true | ||
}, | ||
}, | ||
}, | ||
] | ||
|
||
const getContext = (dir) => { return { | ||
// context: path.resolve(dir), | ||
};} | ||
|
||
const getOptimization = () => { return { | ||
minimizer: [ | ||
// "...", | ||
new TerserPlugin({ | ||
// turn off license gen | ||
terserOptions: { | ||
format: { | ||
comments: false, | ||
}, | ||
}, | ||
// turn off license gen | ||
extractComments: false, | ||
}), | ||
new CssMinimizerPlugin(), | ||
], | ||
};} | ||
|
||
const getResolve = (dir) => { return { | ||
modules: [ | ||
"node_modules", | ||
path.resolve(dir), | ||
], | ||
extensions: [".tsx", ".ts", ".jsx", ".js", ".less", ".css"], | ||
};} | ||
|
||
module.exports = { | ||
bitmapRules, | ||
dependencySrcMapRules, | ||
stylingRules, | ||
svgUrlRules, | ||
tsRules, | ||
getContext, | ||
getOptimization, | ||
getResolve, | ||
}; |
Oops, something went wrong.