Skip to content

Commit

Permalink
Merge pull request #284 from telamonian/add-react-ui
Browse files Browse the repository at this point in the history
Add react UI skeleton
  • Loading branch information
telamonian authored Jun 15, 2022
2 parents 0083077 + 2413f3f commit f98a04f
Show file tree
Hide file tree
Showing 14 changed files with 3,910 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,8 @@ docs/_build
# nix
.direnv
**/.DS_Store

# vscode
.history/
.vscode/
*.code-workspace
1 change: 1 addition & 0 deletions conda-store-ui/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# conda-store-ui
51 changes: 51 additions & 0 deletions conda-store-ui/package.json
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"
}
}
1 change: 1 addition & 0 deletions conda-store-ui/src/components/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './pkglist';
5 changes: 5 additions & 0 deletions conda-store-ui/src/components/pkglist.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as React from "react"

export function Pkglist(params: {}) {

}
6 changes: 6 additions & 0 deletions conda-store-ui/src/hooks.ts
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
4 changes: 4 additions & 0 deletions conda-store-ui/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export * from './hooks';
export * from './store';

export * from './components';
11 changes: 11 additions & 0 deletions conda-store-ui/src/store.ts
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
34 changes: 34 additions & 0 deletions conda-store-ui/style/index.css
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;
} */
11 changes: 11 additions & 0 deletions conda-store-ui/tsconfig.json
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/**/*"]
}
17 changes: 17 additions & 0 deletions conda-store-ui/tsconfigbase.json
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"
}
}
69 changes: 69 additions & 0 deletions conda-store-ui/webpack.config.js
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,
];
164 changes: 164 additions & 0 deletions conda-store-ui/webpack.rules.js
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,
};
Loading

0 comments on commit f98a04f

Please sign in to comment.