Completed the mantine + dev tooling setup and implemented a layout (#3)

* Local test, vite, linting and prettier setup.
Switching to mantine instead of material ui

* Updating readme.md with run scripts details

* Adding basic app layout with mantine

ui/.eslintignore

@@ -0,0 +1,6 @@
+*.js
+*.cjs
+*.mjs
+*.d.ts
+*.d.mts
+vite.config.ts

ui/.eslintrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+ extends: ['mantine'],
+ parserOptions: {
+ project: './tsconfig.json',
+ },
+ rules: {
+ 'react/react-in-jsx-scope': 'off',
+ 'import/extensions': 'off',
+ },
+};

ui/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.stylelintcache
+/.eslintcache

ui/.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('eslint-config-mantine/.prettierrc.js');

ui/.stylelintrc.json

@@ -0,0 +1,28 @@
+{
+ "extends": ["stylelint-config-standard-scss"],
+ "rules": {
+ "custom-property-pattern": null,
+ "selector-class-pattern": null,
+ "scss/no-duplicate-mixins": null,
+ "declaration-empty-line-before": null,
+ "declaration-block-no-redundant-longhand-properties": null,
+ "alpha-value-notation": null,
+ "custom-property-empty-line-before": null,
+ "property-no-vendor-prefix": null,
+ "color-function-notation": null,
+ "length-zero-no-unit": null,
+ "selector-not-notation": null,
+ "no-descending-specificity": null,
+ "comment-empty-line-before": null,
+ "scss/at-mixin-pattern": null,
+ "scss/at-rule-no-unknown": null,
+ "value-keyword-case": null,
+ "media-feature-range-notation": null,
+ "selector-pseudo-class-no-unknown": [
+ true,
+ {
+ "ignorePseudoClasses": ["global"]
+ }
+ ]
+ }
+}

ui/README.md

@@ -1,46 +1,71 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Spark-Expectations UI - Temporary Readme.md
 
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `npm start`
+### `npm run dev`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Starts the development server using Vite on port 3000. This allows for live reloading of changes during development.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+### `npm run build`
 
-### `npm test`
+Compiles the TypeScript code using the TypeScript compiler (`tsc`) and then builds the production version of the application using Vite.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### `npm run preview`
 
-### `npm run build`
+Provides a local preview of the production build. This is useful for testing the built version before deployment.
+
+### `npm run typecheck`
+
+Runs the TypeScript compiler to check for type errors in the codebase without emitting any output files.
+
+### `npm run code:fix`
+
+A composite command that first fixes linting issues, formats the code using Prettier, and then performs a type check.
+
+### `npm run lint`
+
+Runs both ESLint and Stylelint to check for any linting errors in TypeScript/JavaScript files and CSS files, respectively.
+
+### `npm run lint:fix`
+
+Fixes linting issues automatically in both TypeScript/JavaScript and CSS files.
+
+### `npm run lint:eslint`
+
+Runs ESLint on all TypeScript and JSX files in the project, caching the results for faster subsequent linting.
+
+### `npm run lint:eslint:fix`
+
+Automatically fixes fixable linting issues in TypeScript and JSX files.
+
+### `npm run lint:stylelint`
+
+Runs Stylelint on all CSS files in the project, caching the results to speed up future linting.
+
+### `npm run lint:stylelint:fix`
+
+Automatically fixes fixable linting issues in CSS files.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### `npm run prettier`
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Checks if TypeScript and JSX files are formatted according to Prettier's rules.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### `npm run prettier:write`
 
-### `npm run eject`
+Formats TypeScript and JSX files according to Prettier's rules.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+### `npm run vitest`
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Runs the Vitest test runner to execute tests.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+### `npm run vitest:watch`
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Starts the Vitest test runner in watch mode, re-running tests as files change.
 
-## Learn More
+### `npm run test`
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+A comprehensive script that runs type checks, checks formatting, lints files, runs tests, and builds the project. This is typically used to ensure that all checks pass before committing or deploying code.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+These scripts are essential for maintaining code quality and ensuring that the application functions as expected before deployment.

ui/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+ <meta
+ name="viewport"
+ content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+ />
+ <title>WIP App</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="src/main.tsx"></script>
+</body>
+</html>