goobs-frontend 0.7.53

package/src/components/Typography/index.tsx

@@ -0,0 +1,268 @@
+import {
+  Typography as MuiTypography,
+  TypographyProps as MuiTypographyProps,
+  TypographyPropsVariantOverrides as MuiTypographyPropsVariantOverrides,
+} from '@mui/material'
+import React from 'react'
+
+export type FontFamily = 'arapey' | 'inter' | 'merri'
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'paragraph'
+  | 'helperheader'
+  | 'helperfooter'
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides
+    extends Record<`${FontFamily}${TypographyVariant}`, true> {}
+}
+
+export type TypographyPropsVariantOverrides =
+  MuiTypographyPropsVariantOverrides &
+    Record<`${FontFamily}${TypographyVariant}`, true>
+
+export interface TypographyProps {
+  text?: string
+  fontvariant?: keyof TypographyPropsVariantOverrides
+  fontcolor?: string
+}
+
+/**
+ * arapeyStyles object contains the styles for typography variants using the Arapey font family.
+ */
+const arapeyStyles: Record<TypographyVariant, React.CSSProperties> = {
+  h1: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '3rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h2: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '2.5rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h3: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '2rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h4: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '1.5rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h5: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '1.25rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h6: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '1.1rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  paragraph: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '1rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperheader: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperfooter: {
+    fontFamily: 'Arapey, serif',
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+}
+
+/**
+ * interStyles object contains the styles for typography variants using the Inter font family.
+ */
+const interStyles: Record<TypographyVariant, React.CSSProperties> = {
+  h1: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '3rem',
+    fontWeight: 700,
+    textTransform: 'none',
+  },
+  h2: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '2.5rem',
+    fontWeight: 700,
+    textTransform: 'none',
+  },
+  h3: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '2rem',
+    fontWeight: 600,
+    textTransform: 'none',
+  },
+  h4: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    textTransform: 'none',
+  },
+  h5: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    textTransform: 'none',
+  },
+  h6: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '1.1rem',
+    fontWeight: 500,
+    textTransform: 'none',
+  },
+  paragraph: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '1rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperheader: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperfooter: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+}
+
+/**
+ * merriStyles object contains the styles for typography variants using the Merriweather font family.
+ */
+const merriStyles: Record<TypographyVariant, React.CSSProperties> = {
+  h1: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '3rem',
+    fontWeight: 700,
+    textTransform: 'none',
+  },
+  h2: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '2.5rem',
+    fontWeight: 700,
+    textTransform: 'none',
+  },
+  h3: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '2rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h4: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '1.5rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h5: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '1.25rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  h6: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '1.1rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  paragraph: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '1rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperheader: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+  helperfooter: {
+    fontFamily: 'Merriweather, serif',
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    textTransform: 'none',
+  },
+}
+
+/**
+ * Typography component is a wrapper around MuiTypography that applies custom styles based on the fontvariant prop.
+ * It supports different font families (Arapey, Inter, Merriweather) and typography variants (h1, h2, h3, h4, h5, h6, paragraph, helperheader, helperfooter).
+ * @param props The props for the Typography component.
+ * @returns The rendered Typography component.
+ */
+export const Typography: React.FC<TypographyProps & MuiTypographyProps> = ({
+  text,
+  fontcolor,
+  fontvariant,
+  ...rest
+}) => {
+  let variantStyle: React.CSSProperties = {}
+
+  if (fontvariant) {
+    const fontFamily = fontvariant.startsWith('arapey')
+      ? 'arapey'
+      : fontvariant.startsWith('inter')
+        ? 'inter'
+        : fontvariant.startsWith('merri')
+          ? 'merri'
+          : null
+
+    if (fontFamily) {
+      const variant = fontvariant.slice(fontFamily.length) as TypographyVariant
+      switch (fontFamily) {
+        case 'arapey':
+          variantStyle = arapeyStyles[variant] || {}
+          break
+        case 'inter':
+          variantStyle = interStyles[variant] || {}
+          break
+        case 'merri':
+          variantStyle = merriStyles[variant] || {}
+          break
+      }
+    }
+  }
+
+  return (
+    <MuiTypography
+      style={{
+        color: fontcolor,
+        ...variantStyle,
+      }}
+      variant={fontvariant}
+      {...rest}
+    >
+      {text}
+    </MuiTypography>
+  )
+}
+
+export default Typography

package/src/index.ts

@@ -0,0 +1,210 @@
+// Components
+import CustomButton, { ButtonAlignment } from './components/Button'
+import CustomGrid, {
+  Alignment,
+  BorderProp,
+  columnconfig,
+  gridconfig,
+  cellconfig,
+} from './components/Grid'
+import StyledComponent, {
+  StyledComponentProps,
+  AdornmentProps,
+} from './components/StyledComponent'
+import Typography, {
+  FontFamily,
+  TypographyVariant,
+  TypographyPropsVariantOverrides,
+  TypographyProps,
+} from './components/Typography'
+import ConfirmationCodeInput, {
+  ConfirmationCodeInputsProps,
+} from './components/ConfirmationCodeInput'
+import RadioGroup, {
+  RadioOption,
+  RadioGroupProps,
+} from './components/RadioGroup'
+import PopupForm, { PopupFormProps } from './components/Form/Popup'
+import ContentSection, { ContentSectionProps } from './components/Content'
+import React from 'react'
+
+// Animations
+import { Animation } from './components/Content/Structure/animations'
+
+// Importing ExtendedButtonProps from useButton
+import { ExtendedButtonProps } from './components/Content/Structure/button/useButton'
+
+// Colors
+import {
+  moss,
+  aqua,
+  madder,
+  woad,
+  marine,
+  pansy,
+  stainlessSteel,
+  coal,
+  ocean,
+  sky,
+  salmon,
+  lightning,
+  sage,
+  lilac,
+  gunpowder,
+  lightMadder,
+  black,
+  white,
+  none,
+  semiTransparentWhite,
+  semiTransparentBlack,
+  red,
+  green,
+  greyborder,
+} from './styles/palette'
+
+// Typography
+import {
+  arapeyh1,
+  arapeyh2,
+  arapeyh3,
+  arapeyh4,
+  arapeyh5,
+  arapeyh6,
+  arapeyparagraph,
+  interh1,
+  interh2,
+  interh3,
+  interh4,
+  interh5,
+  interh6,
+  interparagraph,
+  interhelperheader,
+  interhelperfooter,
+  merrih1,
+  merrih2,
+  merrih3,
+  merrih4,
+  merrih5,
+  merrih6,
+  merriparagraph,
+  merrihelperfooter,
+} from './styles/typography'
+
+// Styles
+import { formContainerStyle } from './styles/Form'
+
+import { helperFooterAtom, HelperFooterMessage } from './atoms/helperfooter'
+
+// Type declarations
+declare type CustomButtonProps = React.ComponentProps<typeof CustomButton>
+declare type CustomGridProps = React.ComponentProps<typeof CustomGrid>
+declare type TypographyComponentProps = React.ComponentProps<typeof Typography>
+declare type ConfirmationCodeInputProps = React.ComponentProps<
+  typeof ConfirmationCodeInput
+>
+declare type RadioGroupComponentProps = React.ComponentProps<typeof RadioGroup>
+declare type PopupFormComponentProps = React.ComponentProps<typeof PopupForm>
+declare type ContentSectionComponentProps = React.ComponentProps<
+  typeof ContentSection
+>
+
+// Named exports
+export { CustomButton }
+export { CustomGrid }
+export { StyledComponent }
+export { Typography }
+export { ConfirmationCodeInput }
+export { RadioGroup }
+export { PopupForm }
+export { ContentSection }
+export { formContainerStyle }
+
+// Exporting ExtendedButtonProps
+export type { ExtendedButtonProps }
+
+// Exporting helperFooterAtom and HelperFooterMessage
+export { helperFooterAtom }
+export type { HelperFooterMessage }
+
+// Type exports
+export type { CustomButtonProps }
+export type { ButtonAlignment }
+export type { CustomGridProps }
+export type { Alignment, BorderProp, columnconfig, gridconfig, cellconfig }
+export type { StyledComponentProps, AdornmentProps }
+export type {
+  FontFamily,
+  TypographyVariant,
+  TypographyPropsVariantOverrides,
+  TypographyProps,
+}
+export type { ConfirmationCodeInputsProps }
+export type { RadioOption, RadioGroupProps }
+export type { PopupFormProps }
+export type { ContentSectionProps }
+
+// Additional type exports for the newly declared types
+export type { TypographyComponentProps }
+export type { ConfirmationCodeInputProps }
+export type { RadioGroupComponentProps }
+export type { PopupFormComponentProps }
+export type { ContentSectionComponentProps }
+
+// Animation type export
+export type { Animation }
+
+// Color exports
+export {
+  moss,
+  aqua,
+  madder,
+  woad,
+  marine,
+  pansy,
+  stainlessSteel,
+  coal,
+  ocean,
+  sky,
+  salmon,
+  lightning,
+  sage,
+  lilac,
+  gunpowder,
+  lightMadder,
+  black,
+  white,
+  none,
+  semiTransparentWhite,
+  semiTransparentBlack,
+  red,
+  green,
+  greyborder,
+}
+
+// Typography exports
+export {
+  arapeyh1,
+  arapeyh2,
+  arapeyh3,
+  arapeyh4,
+  arapeyh5,
+  arapeyh6,
+  arapeyparagraph,
+  interh1,
+  interh2,
+  interh3,
+  interh4,
+  interh5,
+  interh6,
+  interparagraph,
+  interhelperheader,
+  interhelperfooter,
+  merrih1,
+  merrih2,
+  merrih3,
+  merrih4,
+  merrih5,
+  merrih6,
+  merriparagraph,
+  merrihelperfooter,
+}

package/src/main.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode></React.StrictMode>
+)

package/src/styles/Form/index.ts

@@ -0,0 +1,7 @@
+import { SxProps } from '@mui/material'
+
+export const formContainerStyle: SxProps = {
+  p: 2,
+  bgcolor: 'background.paper',
+  boxShadow: 1,
+}

package/src/styles/StyledComponent/Label/index.ts

@@ -0,0 +1,76 @@
+import { StyledComponentProps } from '../../../components/StyledComponent'
+import React from 'react'
+
+/**
+ * labelStyles function generates the styles for the input label based on the provided props.
+ * It adjusts the label's position, color, and transform based on the component variant, font colors, and focus state.
+ * @param props The props for the labelStyles function, including componentvariant, unshrunkfontcolor, shrunkfontcolor, combinedfontcolor, shrunklabellocation, and focused.
+ * @returns The styles for the input label.
+ */
+const labelStyles = (
+  props: Pick<
+    StyledComponentProps,
+    | 'componentvariant'
+    | 'unshrunkfontcolor'
+    | 'shrunkfontcolor'
+    | 'combinedfontcolor'
+    | 'shrunklabellocation'
+    | 'focused'
+  >
+): React.CSSProperties => {
+  const {
+    componentvariant,
+    unshrunkfontcolor,
+    shrunkfontcolor,
+    combinedfontcolor,
+    shrunklabellocation = 'onnotch',
+    focused,
+  } = props
+
+  /**
+   * unshrunkStyles object contains the styles for the unshrunk label state.
+   */
+  const unshrunkStyles: React.CSSProperties = {
+    color: combinedfontcolor || unshrunkfontcolor || 'black',
+    transform: 'scale(1)',
+    transformOrigin: 'top left',
+    top: '13px',
+    left: '12px',
+    ...(componentvariant === 'searchbar' && {
+      transform: 'translate(25px, 2px) scale(1)',
+    }),
+  }
+
+  /**
+   * shrunkStyles object contains the styles for the shrunk label state.
+   */
+  const shrunkStyles: React.CSSProperties = {
+    color: combinedfontcolor || shrunkfontcolor || 'black',
+    transform: 'scale(0.75)',
+    transformOrigin: 'top left',
+    ...(shrunklabellocation === 'onnotch' && {
+      top: '-4px',
+      left: '12px',
+    }),
+    ...(shrunklabellocation === 'above' && {
+      top: '3px',
+      left: '0',
+    }),
+  }
+
+  /**
+   * Return the combined styles for the label, including the base styles, unshrunk styles, and shrunk styles if focused.
+   */
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: 'auto',
+    padding: '0 4px',
+    minHeight: '20px',
+    ...unshrunkStyles,
+    ...(focused && shrunkStyles),
+  }
+}
+
+export default labelStyles

package/src/styles/palette.ts

@@ -0,0 +1,143 @@
+export const moss = {
+  main: '#21475B',
+  light: '#4C7186',
+  dark: '#102A36',
+}
+
+export const aqua = {
+  main: '#9CE4F8',
+  light: '#C5F0FB',
+  dark: '#6AB6D1',
+}
+
+export const madder = {
+  main: '#4661A8',
+  light: '#7488C1',
+  dark: '#2C3E6E',
+}
+
+export const woad = {
+  main: '#63B3DD',
+  light: '#8ECAE6',
+  dark: '#3E7DA3',
+}
+
+export const marine = {
+  main: '#013E89',
+  light: '#3367B2',
+  dark: '#002756',
+}
+
+export const pansy = {
+  main: '#7E5A75',
+  light: '#A07E9B',
+  dark: '#51384C',
+}
+
+export const stainlessSteel = {
+  main: '#150D22',
+  light: '#423753',
+  dark: '#08060E',
+}
+
+export const coal = {
+  main: '#151519',
+  light: '#42424A',
+  dark: '#0A0A0B',
+}
+
+export const ocean = {
+  main: '#0E3065',
+  light: '#355088',
+  dark: '#081E40',
+}
+
+export const sky = {
+  main: '#47C7FE',
+  light: '#7ADAFE',
+  dark: '#2D8CC1',
+}
+
+export const salmon = {
+  main: '#E1A9A7',
+  light: '#ECC7C5',
+  dark: '#C47D7B',
+}
+
+export const lightning = {
+  main: '#0880AC',
+  light: '#35A7C9',
+  dark: '#055A7D',
+}
+
+export const sage = {
+  main: '#A6D0D6',
+  light: '#C5E1E5',
+  dark: '#7AA3A9',
+}
+
+export const lilac = {
+  main: '#BEB9EA',
+  light: '#D6D4F1',
+  dark: '#8E8AC0',
+}
+
+export const gunpowder = {
+  main: '#210352',
+  light: '#4D337D',
+  dark: '#11022A',
+}
+
+export const lightMadder = {
+  main: '#4661A8',
+  light: '#7488C1',
+  dark: '#2C3E6E',
+}
+
+export const black = {
+  main: '#000000',
+  light: '#333333',
+  dark: '#000000',
+}
+
+export const white = {
+  main: '#ffffff',
+  light: '#ffffff',
+  dark: '#eeeeee',
+}
+
+export const none = {
+  main: 'rgba(0, 0, 0, 0)',
+  light: 'rgba(0, 0, 0, 0)',
+  dark: 'rgba(0, 0, 0, 0)',
+}
+
+export const semiTransparentWhite = {
+  main: 'rgba(255, 255, 255, 0.09)',
+  light: 'rgba(255, 255, 255, 0.15)',
+  dark: 'rgba(255, 255, 255, 0.05)',
+}
+
+export const semiTransparentBlack = {
+  main: 'rgba(0, 0, 0, 0.09)',
+  light: 'rgba(0, 0, 0, 0.15)',
+  dark: 'rgba(0, 0, 0, 0.05)',
+}
+
+export const red = {
+  main: '#FF0000',
+  light: '#FF4C4C',
+  dark: '#B30000',
+}
+
+export const green = {
+  main: '#00FF00',
+  light: '#4CFF4C',
+  dark: '#00B300',
+}
+
+export const greyborder = {
+  main: '#E8E8E8',
+  light: '#F5F5F5',
+  dark: '#BDBDBD',
+}