feast-dev · franciscojavierarceo · Mar 23, 2025 · Mar 15, 2025
diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml
@@ -38,7 +38,7 @@ jobs:
           curl -LsSf https://astral.sh/uv/install.sh | sh
       - name: Get uv cache dir
         id: uv-cache
-        run: |          
+        run: |
           echo "dir=$(uv cache dir)" >> $GITHUB_OUTPUT
       - name: uv cache
         uses: actions/cache@v4
@@ -64,6 +64,9 @@ jobs:
       - name: Install yarn dependencies
         working-directory: ./ui
         run: yarn install
+      - name: Check code formatting
+        working-directory: ./ui
+        run: yarn format:check
       - name: Build yarn rollup
         working-directory: ./ui
         run: yarn build:lib

@@ -0,0 +1,3 @@
+*.css
+*.md
+dist/
@@ -6,7 +6,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Usage
 
-There are three modes of usage: 
+There are three modes of usage:
 - via the `feast ui` CLI to view the current feature repository
 - importing the UI as a module
 - running the entire build as a React app.
@@ -117,8 +117,17 @@ const tabsRegistry = {
 
 Examples of custom tabs can be found in the `/custom-tabs` folder.
 
-## On React and Create React App
+## Development
+
+### On React and Create React App
 
 This project was bootstrapped with Create React App, and uses its scripts to simplify UI development. You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Formatting
+
+The code is formatted using [Prettier](https://prettier.io/). IDEs typically have Prettier addons or extensions that you can use for formatting, but you can also run:
+
+- `yarn format` to format all files
+- `yarn format:check` to check if files are formatted correctly without modifying them (used in GitHub Actions checks)
@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
 
 // Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
+delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    "The NODE_ENV environment variable is required but was not specified.",
   );
 }
 
@@ -20,7 +20,7 @@ const dotenvFiles = [
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
   paths.dotenv,
 ].filter(Boolean);
@@ -30,12 +30,12 @@ const dotenvFiles = [
 // that have already been set.  Variable expansion is supported in .env files.
 // https://github.com/motdotla/dotenv
 // https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
+dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
+    require("dotenv-expand")(
+      require("dotenv").config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -50,10 +50,10 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
+process.env.NODE_PATH = (process.env.NODE_PATH || "")
   .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
+  .filter((folder) => folder && !path.isAbsolute(folder))
+  .map((folder) => path.resolve(appDirectory, folder))
   .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
@@ -62,7 +62,7 @@ const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];
@@ -71,7 +71,7 @@ function getClientEnvironment(publicUrl) {
       {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
+        NODE_ENV: process.env.NODE_ENV || "development",
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
@@ -87,12 +87,12 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+      },
     );
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
+    "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),

@@ -1,21 +1,21 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const chalk = require("react-dev-utils/chalk");
+const paths = require("./paths");
 
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
 function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
   let encrypted;
   try {
     // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+    encrypted = crypto.publicEncrypt(cert, Buffer.from("test"));
   } catch (err) {
     throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`,
     );
   }
 
@@ -26,7 +26,7 @@ function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
     throw new Error(
       `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
         err.message
-      }`
+      }`,
     );
   }
 }
@@ -36,8 +36,8 @@ function readEnvFile(file, type) {
   if (!fs.existsSync(file)) {
     throw new Error(
       `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+        type,
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`,
     );
   }
   return fs.readFileSync(file);
@@ -47,14 +47,14 @@ function readEnvFile(file, type) {
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
+  const isHttps = HTTPS === "true";
 
   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
     const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
     const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
     const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+      cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
+      key: readEnvFile(keyFile, "SSL_KEY_FILE"),
     };
 
     validateKeyAndCerts({ ...config, keyFile, crtFile });

@@ -1,14 +1,14 @@
-'use strict';
+"use strict";
 
-const babelJest = require('babel-jest').default;
+const babelJest = require("babel-jest").default;
 
 const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
     return false;
   }
 
   try {
-    require.resolve('react/jsx-runtime');
+    require.resolve("react/jsx-runtime");
     return true;
   } catch (e) {
     return false;
@@ -18,9 +18,9 @@ const hasJsxRuntime = (() => {
 module.exports = babelJest.createTransformer({
   presets: [
     [
-      require.resolve('babel-preset-react-app'),
+      require.resolve("babel-preset-react-app"),
       {
-        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+        runtime: hasJsxRuntime ? "automatic" : "classic",
       },
     ],
   ],

@@ -1,14 +1,14 @@
-'use strict';
+"use strict";
 
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process() {
-    return { code: 'module.exports = {};' };
+    return { code: "module.exports = {};" };
   },
   getCacheKey() {
     // The output is always the same.
-    return 'cssTransform';
+    return "cssTransform";
   },
 };
@@ -1,7 +1,7 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const camelcase = require('camelcase');
+const path = require("path");
+const camelcase = require("camelcase");
 
 // This is a custom Jest transformer turning file imports into filenames.
 // http://facebook.github.io/jest/docs/en/webpack.html

@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
+const chalk = require("react-dev-utils/chalk");
+const resolve = require("resolve");
 
 /**
  * Get additional module paths based on the baseUrl of a compilerOptions object.
@@ -15,19 +15,19 @@ function getAdditionalModulePaths(options = {}) {
   const baseUrl = options.baseUrl;
 
   if (!baseUrl) {
-    return '';
+    return "";
   }
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
   // the default behavior.
-  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === "") {
     return null;
   }
 
   // Allow the user set the `baseUrl` to `appSrc`.
-  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+  if (path.relative(paths.appSrc, baseUrlResolved) === "") {
     return [paths.appSrc];
   }
 
@@ -36,16 +36,16 @@ function getAdditionalModulePaths(options = {}) {
   // not transpiled outside of `src`. We do allow importing them with the
   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
   // an alias.
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return null;
   }
 
   // Otherwise, throw an error.
   throw new Error(
     chalk.red.bold(
       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-        ' Create React App does not support other values at this time.'
-    )
+        " Create React App does not support other values at this time.",
+    ),
   );
 }
 
@@ -63,7 +63,7 @@ function getWebpackAliases(options = {}) {
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return {
       src: paths.appSrc,
     };
@@ -84,9 +84,9 @@ function getJestAliases(options = {}) {
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return {
-      '^src/(.*)$': '<rootDir>/src/$1',
+      "^src/(.*)$": "<rootDir>/src/$1",
     };
   }
 }
@@ -98,7 +98,7 @@ function getModules() {
 
   if (hasTsConfig && hasJsConfig) {
     throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+      "You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.",
     );
   }
 
@@ -108,9 +108,11 @@ function getModules() {
   // TypeScript project and set up the config
   // based on tsconfig.json
   if (hasTsConfig) {
-    const ts = require(resolve.sync('typescript', {
-      basedir: paths.appNodeModules,
-    }));
+    const ts = require(
+      resolve.sync("typescript", {
+        basedir: paths.appNodeModules,
+      }),
+    );
     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
     // Otherwise we'll check if there is jsconfig.json
     // for non TS projects.
-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    *.css
+    *.md
+    dist/