@huma-finance/widgets 0.0.6-alpha.0

package/src/theme/index.ts

@@ -0,0 +1,24 @@
+import { createTheme } from '@mui/material'
+
+import { breakpoints } from './breakpoints'
+import { components } from './components'
+import { coreThemeConstants } from './coreThemeConstants'
+import { cssMixins } from './cssMixins'
+import { paletteCore } from './palette'
+import { shape } from './shape'
+import { typography } from './typography'
+
+export * from './components'
+
+const themeBase = createTheme({
+  breakpoints,
+  cssMixins,
+  palette: paletteCore,
+  shape,
+  spacing: coreThemeConstants.spacingBase,
+  typography,
+})
+
+export const themeHuma = createTheme(themeBase, {
+  components: components(themeBase),
+})

package/src/theme/palette.ts

@@ -0,0 +1,150 @@
+import { ThemeOptions } from '@mui/material'
+
+// primary
+export const primaryPurple = '#c265d0'
+export const primaryBlueLight = '#4473EB'
+export const primaryGradient =
+  'linear-gradient(232.71deg, #A363F4 4.17%, #FF6A8A 178.69%);'
+
+// Secondary
+export const pendingBlueDark = '#1148B2'
+export const pendingBlue = '#226BF9'
+export const pendingBlueMid = '#4584FF'
+export const pendingBlueLight = '#79A5FB'
+export const warningRed = '#D01638'
+export const warningRedMid = '#E71E44'
+export const warningRedLight = '#FF4366'
+export const warningRedPastel = '#FF708B'
+export const backgroundBlue = '#081824'
+export const darkBackground = '#0C2436'
+
+export const white = '#FFFFFF'
+
+export const black = {
+  1: '#000000',
+  2: '#2A252F',
+  3: '#423B46',
+  4: '#534E59',
+  5: '#6B6572',
+  6: '#76707E',
+}
+
+export const orange = {
+  100: '#FFA979',
+  300: '#FF8F51',
+  500: '#FD792F',
+  700: '#E96216',
+}
+
+const yellow = {
+  100: '#FFECB0',
+  300: '#FFE07E',
+  500: '#FFD54F',
+  700: '#F8BE28',
+}
+
+const grey = {
+  100: '#CBD6DE',
+  200: '#6B6B6B',
+  300: '#606060',
+  400: '#5E7485',
+  600: '#395062',
+  700: '#6B6572',
+  800: '#4A4A4A',
+}
+
+const green = {
+  100: '#66F8D3',
+  200: '#1DE9B6',
+  500: '#00CA97',
+  700: '#0DBC90',
+}
+
+export const blue = {
+  50: '#8AD5FF',
+  100: '#3DB9FF',
+  200: '#0BA7FE',
+  300: '#0095E9',
+  500: '#0070AF',
+  800: '#013859',
+}
+
+export const red = {
+  50: '#FEAEA8',
+  100: '#FA8B84',
+  200: '#EA726A',
+  300: '#E75E55',
+  500: '#BC4E46',
+  800: '#472D33',
+}
+
+export const purple = {
+  100: '#DEB8FC',
+  200: '#C476FF',
+  300: '#B452FF',
+  500: '#9D3BE8',
+  800: '#651C9C',
+}
+
+export const paletteCore: ThemeOptions['palette'] = {
+  alert: {
+    contrastText: black[1],
+    dark: yellow[700],
+    light: yellow[300],
+    main: yellow[500],
+  },
+  background: {
+    default: white,
+    paper: white,
+  },
+  common: {
+    black: black[1],
+    white,
+  },
+  default: {
+    contrastText: black[1],
+    dark: white,
+    light: white,
+    main: white,
+  },
+  divider: grey[600],
+  error: {
+    dark: warningRed,
+    light: warningRedPastel,
+    main: warningRedLight,
+  },
+  grey,
+  info: {
+    contrastText: black[1],
+    dark: pendingBlue,
+    light: pendingBlueLight,
+    main: pendingBlueMid,
+    superDark: darkBackground,
+    superLight: blue[50],
+  },
+  mode: 'light',
+  primary: {
+    main: primaryPurple,
+    light: primaryBlueLight,
+  },
+  secondary: {
+    contrastText: black[1],
+    main: white,
+  },
+  success: {
+    light: green[100],
+    main: green[200],
+  },
+  text: {
+    primary: black[5],
+    secondary: black[6],
+    tertiary: black[3],
+    quaternary: grey[400],
+  },
+  warning: {
+    contrastText: black[1],
+    light: orange[100],
+    main: orange[500],
+    superLight: yellow[100],
+  },
+}

package/src/theme/shape.ts

@@ -0,0 +1,7 @@
+import { ThemeOptions } from '@mui/material'
+
+import { coreThemeConstants } from './coreThemeConstants'
+
+export const shape: ThemeOptions['shape'] = {
+  borderRadius: coreThemeConstants.borderRadius.md,
+}

package/src/theme/theme.types.ts

@@ -0,0 +1,80 @@
+import type {
+  Theme as MUITheme,
+  PaletteColorOptions,
+} from '@mui/material/styles'
+import { cssMixins } from './cssMixins'
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeText {
+    quaternary: string
+    tertiary: string
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    cssMixins: typeof cssMixins
+  }
+  interface ThemeOptions {
+    cssMixins: typeof cssMixins
+  }
+  interface PaletteColor {
+    superDark?: string
+    superLight?: string
+  }
+  interface SimplePaletteColorOptions {
+    contrastText?: string
+    dark?: string
+    faded?: string
+    light?: string
+    main: string
+    superDark?: string
+    superLight?: string
+  }
+  interface Palette {
+    alert: SimplePaletteColorOptions
+    default: SimplePaletteColorOptions
+  }
+  interface PaletteOptions {
+    alert?: PaletteColorOptions
+    default?: PaletteColorOptions
+  }
+  interface TypographyVariants {
+    body2Small: React.CSSProperties
+    h3Large: React.CSSProperties
+    labsSmall: React.CSSProperties
+    nav: React.CSSProperties
+    navSub: React.CSSProperties
+  }
+
+  interface TypographyVariantsOptions {
+    body2Small: React.CSSProperties
+    h3Large: React.CSSProperties
+    labsSmall: React.CSSProperties
+    nav: React.CSSProperties
+    navSub: React.CSSProperties
+  }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    body2Small: true
+    h3Large: true
+    labsSmall: true
+    nav: true
+    navSub: true
+    sceneHeader: true
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    alert: PaletteColorOptions | true
+    default: PaletteColorOptions | true
+  }
+}
+
+declare module '@emotion/react' {
+  export interface Theme extends MUITheme {}
+}

package/src/theme/typography.ts

@@ -0,0 +1,117 @@
+import { ThemeOptions } from '@mui/material'
+import { coreThemeConstants } from './coreThemeConstants'
+
+export const typography: ThemeOptions['typography'] = {
+  body1: {
+    fontWeight: 400,
+    fontSize: '1.5rem',
+    letterSpacing: coreThemeConstants.letterSpacing.md,
+    lineHeight: coreThemeConstants.lineHeight.lg,
+  },
+  body2: {
+    fontWeight: 400,
+    fontSize: '1rem',
+    letterSpacing: coreThemeConstants.letterSpacing.xs,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  body2Small: {
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    letterSpacing: coreThemeConstants.letterSpacing.xs,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  fontFamily: coreThemeConstants.fontFamily,
+  fontWeightBold: 600,
+  fontWeightLight: 300,
+  fontWeightMedium: 500,
+  fontWeightRegular: 400,
+  h1: {
+    /**
+     * h1 in design
+     * Used for
+     * - title in ProductCard
+     * - Apy value in ProductCard
+     * - title in protocol-position block
+     */
+    fontSize: '1.5rem',
+    fontWeight: 900,
+    letterSpacing: coreThemeConstants.letterSpacing.xs,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h2: {
+    /**
+     * h2 in design
+     * Used for
+     * - amount in small AmountDetail
+     * - Alert titles
+     */
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.sm,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h3: {
+    /**
+     * h3 in design
+     * Used for
+     * - Secondary headers in below fold content
+     */
+    fontSize: '1rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.md,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h3Large: {
+    /**
+     * h3 in design
+     * Used for
+     * - Secondary headers in below fold content
+     */
+    fontSize: '1.875rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.md,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h4: {
+    /**
+     * Used for
+     * - large feature text on product home pages
+     */
+    fontSize: '2.5rem',
+    fontWeight: 700,
+    letterSpacing: coreThemeConstants.letterSpacing.lg,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h5: {
+    /**
+     * Used for
+     * - main title of scenes,
+     */
+    fontSize: '1.75rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.md,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  h6: {
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.sm,
+    lineHeight: coreThemeConstants.lineHeight.md,
+    color: 'rgba(0, 0, 0, 0.87)',
+  },
+  labsSmall: {
+    fontSize: '0.75rem',
+  },
+  nav: {
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    letterSpacing: coreThemeConstants.letterSpacing.sm,
+    lineHeight: coreThemeConstants.lineHeight.md,
+  },
+  navSub: {
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    letterSpacing: coreThemeConstants.letterSpacing.md,
+    // lineHeight: '1rem',
+  },
+}

package/src/utilTypes.d.ts

@@ -0,0 +1,29 @@
+import { SvgIconProps } from '@mui/material'
+
+export type WCProps<P = {}> = P & {
+  children?: React.ReactNode
+}
+
+export type IconType = (
+  props: SvgIconProps<'svg', {}>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => React.ReactElement<any, string | React.JSXElementConstructor<any>>
+
+export type ColumnType<T> = {
+  title: string
+  dataIndex?: string
+  width?: number
+  noSeparator?: boolean
+  style?: Record<string, string>
+  action?: (record: T) => React.ReactNode
+}
+
+export type CustomError = {
+  message: string
+}
+
+declare global {
+  interface Window {
+    REACT_APP_FORCE_DEV_PREFIX_FOR_URLS: string
+  }
+}

package/src/utils/env.ts

@@ -0,0 +1,9 @@
+const checkIsDev = () =>
+  !!(
+    window.REACT_APP_FORCE_DEV_PREFIX_FOR_URLS ||
+    window.location.hostname.startsWith('dev')
+  )
+
+export const envUtil = {
+  checkIsDev,
+}

package/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": false
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.types.ts", "src/index.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsxImportSource": "@emotion/react",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "dts",
+    "emitDeclarationOnly": true,
+    "composite": true
+  },
+  "include": ["src/**/*", "src/**/*.json"],
+  "references": [
+    {
+      "path": "../huma-shared"
+    },
+    {
+      "path": "../huma-sdk"
+    }
+  ]
+}

package/webpack.cosmos.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack')
+const dotenv = require('dotenv')
+
+module.exports = (webpackConfig) => {
+  const { module } = webpackConfig
+  const { rules } = module
+  return {
+    ...webpackConfig,
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      fallback: {
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify'),
+        assert: require.resolve('assert'),
+        path: require.resolve('path-browserify'),
+        buffer: require.resolve('buffer'),
+      },
+      alias: {
+        zlib: require.resolve('browserify-zlib'),
+      },
+    },
+    module: {
+      rules: [
+        ...rules,
+        {
+          test: /\.svg$/i,
+          use: ['@svgr/webpack', 'url-loader'],
+        },
+        {
+          test: /\.(png|jpe?g|gif)$/i,
+          use: [
+            {
+              loader: 'file-loader',
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+      // new webpack.DefinePlugin({
+      //   ...Object.entries(dotenv.config().parsed).reduce(
+      //     (acc, curr) => ({
+      //       ...acc,
+      //       [`process.env.${curr[0]}`]: JSON.stringify(curr[1]),
+      //     }),
+      //     {},
+      //   ),
+      // }),
+    ],
+  }
+}