goobs-frontend 0.8.27 → 0.8.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.27",
+  "version": "0.8.28",
   "type": "module",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
@@ -59,7 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "chromatic": "^11.25.1",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
@@ -92,26 +92,17 @@
     "node.js",
     "formData",
     "form",
-    "form-validation",
-    "form-submission",
     "button",
     "grid",
     "responsive",
-    "flexgrid",
     "typography",
-    "responsive-grid",
-    "styled-component",
-    "input-component",
-    "input-validation",
-    "button-validation",
-    "form-validation",
+    "button",
     "searchbar",
     "dropdown",
-    "multilinetextfield",
+    "complexeditor",
     "textfield",
     "phonenumber",
     "password",
-    "email",
     "number",
     "card",
     "pricing-table",
@@ -120,20 +111,19 @@
     "tooltip",
     "accordion",
     "code-copy",
-    "syntax-highlighting",
-    "theming",
     "customizable-components",
     "react-components",
     "ui-library",
-    "design-system",
     "front-end",
-    "user-interface",
     "responsive-design",
     "typescript"
   ],
   "resolutions": {
     "string-width": "^4.2.3",
-    "strip-ansi": "^6.0.1"
+    "strip-ansi": "^6.0.1",
+    "webpack": "^5.0.0",
+    "glob": "^9.0.0",
+    "rimraf": "^4.0.0"
   },
   "eslintConfig": {
     "extends": [

package/src/components/Content/Structure/projectboard/useProjectBoard.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import ProjectBoard from '../../../ProjectBoard'
+import ProjectBoard from '../../../ProjectBoard/'
 import { ProjectBoardProps } from '../../../ProjectBoard/types'
 import { columnconfig, cellconfig } from '../../../Grid'
 

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,245 @@
+import * as React from 'react'
+import { Theme, useTheme, styled, SxProps, alpha } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import FormControl, { FormControlProps } from '@mui/material/FormControl'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import Chip from '@mui/material/Chip'
+
+export interface MultiSelectChipProps
+  extends Omit<FormControlProps, 'onChange'> {
+  label?: React.ReactNode
+  options?: string[]
+  defaultSelected?: string[]
+  onChange?: (values: string[]) => void
+
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  inputfontcolor?: string
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  placeholdercolor?: string
+
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
+  sx?: SxProps
+}
+
+const ITEM_HEIGHT = 40
+const ITEM_PADDING_TOP = 8
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+}
+
+function getStyles(
+  name: string,
+  selectedArray: readonly string[],
+  theme: Theme
+) {
+  return {
+    fontWeight: selectedArray.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
+  }
+}
+
+const StyledFormControl = styled(FormControl, {
+  shouldForwardProp: prop =>
+    ![
+      'backgroundcolor',
+      'outlinecolor',
+      'fontcolor',
+      'inputfontcolor',
+      'shrunkfontcolor',
+      'unshrunkfontcolor',
+      'placeholdercolor',
+      'shrunklabelposition',
+    ].includes(prop as string),
+})<
+  Pick<
+    MultiSelectChipProps,
+    | 'backgroundcolor'
+    | 'outlinecolor'
+    | 'fontcolor'
+    | 'inputfontcolor'
+    | 'shrunkfontcolor'
+    | 'unshrunkfontcolor'
+    | 'placeholdercolor'
+    | 'shrunklabelposition'
+  > & { hasvalue: string }
+>(
+  ({
+    backgroundcolor,
+    outlinecolor,
+    fontcolor,
+    inputfontcolor,
+    shrunkfontcolor,
+    unshrunkfontcolor,
+    placeholdercolor,
+    shrunklabelposition,
+    hasvalue,
+  }) => ({
+    '& .MuiOutlinedInput-root': {
+      minHeight: '40px',
+      backgroundColor: backgroundcolor || 'inherit',
+      color: fontcolor || 'inherit',
+      '& fieldset': {
+        borderColor:
+          outlinecolor || (hasvalue === 'true' ? 'black' : 'rgba(0,0,0,0.23)'),
+      },
+      '&:hover fieldset': {
+        borderColor:
+          outlinecolor || (hasvalue === 'true' ? 'black' : 'rgba(0,0,0,0.23)'),
+      },
+      '&.Mui-focused fieldset': {
+        borderColor:
+          outlinecolor || (hasvalue === 'true' ? 'black' : 'rgba(0,0,0,0.23)'),
+      },
+      '& input': {
+        color: inputfontcolor || fontcolor || 'inherit',
+        '&::placeholder': {
+          color: placeholdercolor || alpha('#000', 0.54),
+        },
+      },
+      '& .MuiSelect-icon': {
+        color: inputfontcolor || fontcolor || 'inherit',
+      },
+    },
+    '& .MuiInputLabel-root': {
+      color: unshrunkfontcolor || fontcolor || 'inherit',
+      '&.Mui-focused': {
+        color: shrunkfontcolor || fontcolor || 'inherit',
+      },
+      '&.MuiInputLabel-shrink': {
+        color: shrunkfontcolor || fontcolor || 'inherit',
+        ...(shrunklabelposition === 'aboveNotch' && {
+          transform: 'translate(0px, -17px) scale(0.75)',
+        }),
+        ...(shrunklabelposition === 'onNotch' && {
+          transform: 'translate(13px, -4px) scale(0.75)',
+        }),
+      },
+    },
+  })
+)
+
+export default function MultipleSelectChip(props: MultiSelectChipProps) {
+  const {
+    label = 'Chip',
+    options = [],
+    defaultSelected = [],
+    onChange,
+
+    backgroundcolor,
+    outlinecolor,
+    fontcolor,
+    inputfontcolor,
+    shrunkfontcolor,
+    unshrunkfontcolor,
+    placeholdercolor,
+    shrunklabelposition,
+
+    sx,
+    ...rest
+  } = props
+
+  const theme = useTheme()
+  const [selectedValues, setSelectedValues] =
+    React.useState<string[]>(defaultSelected)
+
+  const hasValue = React.useMemo(
+    () => (selectedValues.length > 0).toString(),
+    [selectedValues]
+  )
+
+  const handleSelectChange = (
+    event: SelectChangeEvent<typeof selectedValues>
+  ) => {
+    const { value } = event.target
+    const newValue = typeof value === 'string' ? value.split(',') : value
+    setSelectedValues(newValue)
+    if (onChange) {
+      onChange(newValue)
+    }
+  }
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
+      <StyledFormControl
+        sx={{ width: 300, ...sx }}
+        variant="outlined"
+        hasvalue={hasValue}
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        fontcolor={fontcolor}
+        inputfontcolor={inputfontcolor}
+        shrunkfontcolor={shrunkfontcolor}
+        unshrunkfontcolor={unshrunkfontcolor}
+        placeholdercolor={placeholdercolor}
+        shrunklabelposition={shrunklabelposition}
+        {...rest}
+      >
+        <InputLabel id="multi-select-chip-label">{label}</InputLabel>
+        <Select
+          labelId="multi-select-chip-label"
+          id="multi-select-chip"
+          multiple
+          /**
+           * Remove any fixed height. Let the
+           * OutlinedInput's styles control minHeight.
+           */
+          value={selectedValues}
+          onChange={handleSelectChange}
+          input={
+            <OutlinedInput
+              label={label}
+              /**
+               * Give the input an initial minHeight (e.g. 55px),
+               * and allow it to wrap chips, thus expanding the height
+               */
+              sx={{
+                minHeight: 55,
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.5,
+                alignItems: 'center',
+              }}
+              placeholder={placeholdercolor ? (label as string) : undefined}
+            />
+          }
+          renderValue={selected => (
+            <Box
+              sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.5,
+              }}
+            >
+              {selected.map(val => (
+                <Chip key={val} label={val} />
+              ))}
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {options.map(name => (
+            <MenuItem
+              key={name}
+              value={name}
+              style={getStyles(name, selectedValues, theme)}
+            >
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </StyledFormControl>
+    </Box>
+  )
+}

package/src/components/MultiSelect/multiselect.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react'
+// If using the official SB testing library + jest:
+// import { within, userEvent } from '@storybook/testing-library';
+// import { expect } from '@storybook/jest';
+//
+// If you're using the same approach from your example:
+import { within, userEvent, expect } from '@storybook/test'
+
+import MultipleSelectChip from './index'
+
+const meta: Meta<typeof MultipleSelectChip> = {
+  title: 'Components/MultiSelectChip',
+  component: MultipleSelectChip,
+  parameters: {
+    a11y: { disable: false },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof MultipleSelectChip>
+
+// Example data array
+const NAMES = [
+  'Oliver Hansen',
+  'Van Henry',
+  'April Tucker',
+  'Ralph Hubbard',
+  'Omar Alexander',
+  'Carlos Abbott',
+  'Miriam Wagner',
+  'Bradley Wilkerson',
+  'Virginia Andrews',
+  'Kelly Snyder',
+]
+
+/**
+ * 1) Basic usage - No preselected items.
+ */
+export const Basic: Story = {
+  name: 'Basic (Default)',
+  args: {
+    label: 'Select a Name',
+    options: NAMES,
+    defaultSelected: [],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // 1. Verify label is visible
+    expect(canvas.getByLabelText('Select a Name')).toBeInTheDocument()
+
+    // 2. Click the Select to open the dropdown
+    await userEvent.click(canvas.getByLabelText('Select a Name'))
+
+    // 3. Choose "Van Henry" from the list
+    await userEvent.click(canvas.getByText('Van Henry'))
+
+    // 4. Now "Van Henry" should appear as a chip
+    expect(canvas.getByText('Van Henry')).toBeInTheDocument()
+  },
+}
+
+/**
+ * 2) PreSelected
+ */
+export const PreSelected: Story = {
+  args: {
+    label: 'PreSelected Names',
+    options: NAMES,
+    defaultSelected: ['April Tucker', 'Omar Alexander'],
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Both pre-selected chips should be shown
+    expect(canvas.getByText('April Tucker')).toBeInTheDocument()
+    expect(canvas.getByText('Omar Alexander')).toBeInTheDocument()
+  },
+}
+
+/**
+ * 3) Multiple Selections
+ */
+export const MultipleSelections: Story = {
+  args: {
+    label: 'Pick Multiple',
+    options: NAMES,
+    defaultSelected: [],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Open the menu
+    await userEvent.click(canvas.getByLabelText('Pick Multiple'))
+    // Select "Van Henry"
+    await userEvent.click(canvas.getByText('Van Henry'))
+    expect(canvas.getByText('Van Henry')).toBeInTheDocument()
+
+    // Menu closes after selection, so open again
+    await userEvent.click(canvas.getByLabelText('Pick Multiple'))
+    await userEvent.click(canvas.getByText('April Tucker'))
+    expect(canvas.getByText('April Tucker')).toBeInTheDocument()
+  },
+}
+
+/**
+ * 4) Custom Styles - Example usage of props like backgroundcolor, outlinecolor, etc.
+ */
+export const CustomStyles: Story = {
+  args: {
+    label: 'Custom Colors',
+    options: NAMES,
+    defaultSelected: ['Kelly Snyder'],
+    backgroundcolor: '#f3e5f5', // Light purple
+    outlinecolor: '#6a1b9a', // Dark purple
+    fontcolor: '#283593', // Indigo for text
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Confirm that Kelly Snyder is initially selected
+    expect(canvas.getByText('Kelly Snyder')).toBeInTheDocument()
+
+    // Let's open the menu and deselect
+    await userEvent.click(canvas.getByLabelText('Custom Colors'))
+    await userEvent.click(canvas.getByText('Kelly Snyder'))
+
+    expect(canvas.queryByText('Kelly Snyder')).not.toBeInTheDocument()
+  },
+}