Introduction

This is the component library for VedaPointe products.

How to use in a project

Installation

npm i @vedapointe-shared/vedapointe-ui

Usage

Use it just like MUI but imported through this package.

import { Typography } from '@vedapointe-shared/vedapointe-ui';

function TypographyWrapper() {
  return <Typography>Cool</Typography>;
}

Extend locally

Something like:

// theme.ts

import {
  createTheme,
  vpTheme,
  ThemeOptions,
  DeepPartial,
} from '@vedapointe-shared/vedapointe-ui';

declare module '@vedapointe-shared/vedapointe-ui' {
  // only needed for adding new palette colors
  interface Palette {
    localExample: Palette['primary'];
  }

  // only needed for adding new palette colors
  interface PaletteOptions {
    localExample: PaletteOptions['primary'];
  }

  // example of adding a palette color to the "color" prop of the Button component
  interface ButtonPropsColorOverrides {
    localExample: true;
  }
}

const themeTest = createTheme(vpTheme, <DeepPartial<ThemeOptions>>{
  palette: {
    // any local colors or theme overrides
    localExample: {
      main: '#00FF0F',
    },
  },
  components: {
    // Components - any component overrides
  },
});

export const theme = themeTest;

Package Development

1. Make sure your editor is set up. See Editor Setup

Editor Setup

No matter what editor you use, please check out the .vscode/README.md file for recommended editor plugins and resources on where to find them.

(OPTIONAL) Disable Husky (and commitizen)

It's recommended that developers use commitizen to assist in writting valid commit messages. Husky is the tool we use to attach to git hooks and fire off commitizen on commit. If you would like to disable Husky, please read the docs here.

Manual versioning

Update the version in package.json and then run an npm i which will update the package-lock.json automatically.

Publish

Using the steps outlined here for publishing scoped public packages you can run the following command:

npm publish --access public

Build and Test

1. Run npm run build
2. Run npm link
3. Go to project to test with link
4. Run npm link @vedapointe-shared/vedapointe-ui
5. Test changes

Running vite

make sure the dev server is OFF delete node_modules delete package-lock.json may be able to skip this npm i npm link start dev server

Transition Notes

These are things you want to keep in mind moving a project from the old, project specific themes, to the new theme provided by this package.

Replace imports

This package re-exports MUI with the the correct type overrides. The existing MUI imports need to be changed to import from this package.

Replace palette variants

We need to change any places where we were using "light" and "dark" as those colors have changed.

Mainly:

• primary.light - 14%
• error.light - 8%
• success.light - 8%
• light.light - 8%

The preferred solution in most cases is to use the alpha(mainColor) helper from MUI with one of the base palette colors.

Replace old palette tokens

• standardInfo -> info.light
• tableRowStripe -> #F9F9F9 - just a unique color
• tableRowHoverSelect -> alpha(primary.main, 0.05) - 5% - may not be exact code
  • This is actually a different color - TODO - maybe primary.surfaceAtPlus1

Replace deprecated headings

h5 is no longer in use and should be replaced with the style defined in Figma or h4.

Other

There may be other things not listed here.

One such thing are the custom colors in CORE created for the table. These colors should be replaced with the primary surface variants instead.