npm - goobs-frontend - Versions diffs - 0.8.22 → 0.8.24 - Mend

goobs-frontend 0.8.22 → 0.8.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/package.json +22 -2
package/src/app/layout.tsx +18 -0
package/src/components/Accordion/accordion.stories.tsx +325 -0
package/src/components/Button/button.stories.tsx +157 -0
package/src/components/Button/index.tsx +25 -48
package/src/components/Card/card.stories.tsx +367 -0
package/src/components/Checkbox/checkbox.stories.tsx +133 -0
package/src/components/CodeCopy/codecopy.stories.tsx +128 -0
package/src/components/ComplexTextEditor/MarkdownEditor/index.tsx +5 -3
package/src/components/ComplexTextEditor/editor.stories.tsx +177 -0
package/src/components/ComplexTextEditor/utils/useMarkdownEditor.tsx +29 -11
package/src/components/ComplexTextEditor/utils/useRichtextEditor.tsx +4 -4
package/src/components/ConfirmationCodeInput/codeinput.stories.tsx +170 -0
package/src/components/ConfirmationCodeInput/index.tsx +28 -14
package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx +26 -17
package/src/components/DataGrid/Table/Rows/index.tsx +76 -17
package/src/components/DataGrid/Table/index.tsx +25 -17
package/src/components/DataGrid/datagrid.stories.tsx +307 -0
package/src/components/DataGrid/index.tsx +12 -13
package/src/components/DataGrid/utils/useComputeTableResize.tsx +27 -7
package/src/components/DataGrid/utils/useToolbarSearchbar.tsx +59 -36
package/src/components/DateField/datefield.stories.tsx +144 -0
package/src/components/Dropdown/dropdown.stories.tsx +268 -0
package/src/components/Dropdown/index.tsx +200 -62
package/src/components/Grid/index.tsx +72 -94
package/src/components/IncrementNumberField/incrementnumberfield.stories.tsx +152 -0
package/src/components/Nav/index.tsx +104 -118
package/src/components/Nav/nav.stories.tsx +283 -0
package/src/components/NumberField/numberfield.stories.tsx +137 -0
package/src/components/PasswordField/passwordfield.stories.tsx +120 -0
package/src/components/PhoneNumberField/phonenumberfield.stories.tsx +134 -0
package/src/components/PricingTable/index.tsx +23 -4
package/src/components/PricingTable/pricingtable.stories.tsx +144 -0
package/src/components/ProjectBoard/AddTask/client.tsx +20 -49
package/src/components/ProjectBoard/ManageTask/client.tsx +17 -21
package/src/components/ProjectBoard/index.tsx +4 -15
package/src/components/ProjectBoard/projectboard.stories.tsx +384 -0
package/src/components/QRCode/qrcode.stories.tsx +117 -0
package/src/components/RadioGroup/index.tsx +1 -1
package/src/components/RadioGroup/radiogroup.stories.tsx +155 -0
package/src/components/SearchableDropdown/index.tsx +18 -32
package/src/components/SearchableDropdown/searchabledropdown.stories.tsx +230 -0
package/src/components/Searchbar/searchbar.stories.tsx +144 -0
package/src/components/Stepper/stepper.stories.tsx +255 -0
package/src/components/Tabs/tabs.stories.tsx +212 -0
package/src/components/TextField/textfield.stories.tsx +225 -0
package/src/components/Toolbar/toolbar.stories.tsx +169 -0
package/src/components/Tooltip/tooltip.stories.tsx +170 -0
package/src/components/TransferList/index.tsx +1 -1
package/src/components/TransferList/transferlist.stories.tsx +212 -0
package/src/components/Typography/typography.stories.tsx +147 -0
package/src/stories/Button.stories.ts +53 -0
package/src/stories/Button.tsx +47 -0
package/src/stories/Configure.mdx +451 -0
package/src/stories/Header.stories.ts +33 -0
package/src/stories/Header.tsx +71 -0
package/src/stories/Page.stories.ts +32 -0
package/src/stories/Page.tsx +91 -0
package/src/stories/assets/accessibility.png +0 -0
package/src/stories/assets/accessibility.svg +1 -0
package/src/stories/assets/addon-library.png +0 -0
package/src/stories/assets/assets.png +0 -0
package/src/stories/assets/avif-test-image.avif +0 -0
package/src/stories/assets/context.png +0 -0
package/src/stories/assets/discord.svg +1 -0
package/src/stories/assets/docs.png +0 -0
package/src/stories/assets/figma-plugin.png +0 -0
package/src/stories/assets/github.svg +1 -0
package/src/stories/assets/share.png +0 -0
package/src/stories/assets/styling.png +0 -0
package/src/stories/assets/testing.png +0 -0
package/src/stories/assets/theming.png +0 -0
package/src/stories/assets/tutorials.svg +1 -0
package/src/stories/assets/youtube.svg +1 -0
package/src/stories/button.css +30 -0
package/src/stories/header.css +32 -0
package/src/stories/page.css +69 -0
package/src/app/_app.tsx +0 -8
package/src/components/Grid/defaultconfig.tsx +0 -131
package/src/components/ProjectBoard/jotai/task.ts +0 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "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",
@@ -16,7 +16,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "chromatic": "chromatic --project-token=chpt_2d34a5f45351b6c",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/cache": "^11.14.0",
@@ -37,20 +40,32 @@
     "slate-dom": "^0.111.0",
     "slate-history": "^0.110.3",
     "slate-react": "^0.112.0",
+    "storybook": "^8.4.7",
     "zod": "^3.24.1",
     "zod-formik-adapter": "^1.3.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.3",
     "@next/eslint-plugin-next": "^15.1.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/testing-library": "^0.2.2",
     "@types/node": "^22.10.5",
     "@types/react": "19.0.5",
     "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
+    "chromatic": "^11.24.0",
     "eslint": "^9.18.0",
     "eslint-config-next": "^15.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -121,5 +136,10 @@
   "resolutions": {
     "string-width": "^4.2.3",
     "strip-ansi": "^6.0.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+// src/app/layout.tsx
+import React from 'react'
+export const metadata = {
+  title: 'Goobs Frontend',
+}
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

package/src/components/Accordion/accordion.stories.tsx ADDED Viewed

@@ -0,0 +1,325 @@
+// src/components/Accordion/accordion.stories.tsx
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { userEvent, within, expect } from '@storybook/test'
+import { Accordion, AccordionSummary, AccordionDetails } from './index'
+import Typography from '../Typography'
+/**
+ * Setup story metadata
+ */
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    a11y: {
+      disable: false,
+    },
+  },
+  // If you want color pickers or controls for specific props, you can define them in argTypes
+  argTypes: {},
+}
+export default meta
+type Story = StoryObj<typeof Accordion>
+/**
+ * Reusable child content
+ */
+const sampleContent = (
+  <Typography
+    fontvariant="merriparagraph"
+    text="This is the accordion content."
+  />
+)
+/**
+ * 1) Basic single Accordion
+ */
+export const SingleAccordion: Story = {
+  name: 'Single Accordion (collapsed by default)',
+  render: args => (
+    <Accordion {...args}>
+      <AccordionSummary>Single Accordion</AccordionSummary>
+      <AccordionDetails>{sampleContent}</AccordionDetails>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // 1. Verify that the accordion content is not visible initially
+    expect(
+      canvas.queryByText('This is the accordion content.')
+    ).not.toBeInTheDocument()
+    // 2. Click on the summary to expand
+    await userEvent.click(canvas.getByText('Single Accordion'))
+    // 3. Verify that the content is now visible
+    expect(
+      canvas.getByText('This is the accordion content.')
+    ).toBeInTheDocument()
+  },
+}
+/**
+ * 2) Basic single Accordion (defaultExpanded)
+ */
+export const DefaultExpanded: Story = {
+  name: 'Single Accordion (defaultExpanded)',
+  render: args => (
+    <Accordion defaultExpanded {...args}>
+      <AccordionSummary>Default Expanded</AccordionSummary>
+      <AccordionDetails>{sampleContent}</AccordionDetails>
+    </Accordion>
+  ),
+  // Add async and return the assertion
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Return the assertion to properly handle the promise
+    return expect(
+      canvas.getByText('This is the accordion content.')
+    ).toBeInTheDocument()
+  },
+}
+/**
+ * 3) Multiple Accordions
+ */
+export const MultipleAccordions: Story = {
+  name: 'Multiple Accordions',
+  render: args => (
+    <>
+      <Accordion {...args}>
+        <AccordionSummary>First Item</AccordionSummary>
+        <AccordionDetails>
+          <Typography
+            fontvariant="merriparagraph"
+            text="Details for first item."
+          />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion {...args}>
+        <AccordionSummary>Second Item</AccordionSummary>
+        <AccordionDetails>
+          <Typography
+            fontvariant="merriparagraph"
+            text="Details for second item."
+          />
+        </AccordionDetails>
+      </Accordion>
+      <Accordion {...args}>
+        <AccordionSummary>Third Item</AccordionSummary>
+        <AccordionDetails>
+          <Typography
+            fontvariant="merriparagraph"
+            text="Details for third item."
+          />
+        </AccordionDetails>
+      </Accordion>
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Initially, no details are visible
+    expect(
+      canvas.queryByText('Details for first item.')
+    ).not.toBeInTheDocument()
+    expect(
+      canvas.queryByText('Details for second item.')
+    ).not.toBeInTheDocument()
+    expect(
+      canvas.queryByText('Details for third item.')
+    ).not.toBeInTheDocument()
+    // Expand the second item
+    await userEvent.click(canvas.getByText('Second Item'))
+    expect(canvas.getByText('Details for second item.')).toBeInTheDocument()
+    // Expand the first item
+    await userEvent.click(canvas.getByText('First Item'))
+    expect(canvas.getByText('Details for first item.')).toBeInTheDocument()
+    // The second item should remain expanded unless the `Accordion` is configured otherwise
+    expect(canvas.getByText('Details for second item.')).toBeInTheDocument()
+  },
+}
+/**
+ * 4) Nested Accordion
+ */
+export const NestedAccordion: Story = {
+  name: 'Nested Accordion',
+  render: args => (
+    <Accordion {...args}>
+      <AccordionSummary>Parent Accordion</AccordionSummary>
+      <AccordionDetails>
+        <Typography fontvariant="merriparagraph" text="Top-level content" />
+        <Accordion {...args}>
+          <AccordionSummary>Nested Accordion</AccordionSummary>
+          <AccordionDetails>{sampleContent}</AccordionDetails>
+        </Accordion>
+      </AccordionDetails>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // The nested content is not initially visible
+    expect(
+      canvas.queryByText('This is the accordion content.')
+    ).not.toBeInTheDocument()
+    // Expand the parent
+    await userEvent.click(canvas.getByText('Parent Accordion'))
+    expect(canvas.getByText('Top-level content')).toBeInTheDocument()
+    // Now expand the nested accordion
+    await userEvent.click(canvas.getByText('Nested Accordion'))
+    expect(
+      canvas.getByText('This is the accordion content.')
+    ).toBeInTheDocument()
+  },
+}
+/**
+ * 5) Custom styles
+ */
+export const CustomStyles: Story = {
+  name: 'Custom Styled Accordion',
+  render: args => (
+    <Accordion
+      sx={{
+        border: '2px solid #4caf50',
+        borderRadius: '8px',
+        marginTop: '10px',
+      }}
+      {...args}
+    >
+      <AccordionSummary>Custom Styles</AccordionSummary>
+      <AccordionDetails>
+        <Typography
+          fontvariant="merriparagraph"
+          text="Look at this fancy border!"
+        />
+      </AccordionDetails>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Expand and verify
+    await userEvent.click(canvas.getByText('Custom Styles'))
+    expect(canvas.getByText('Look at this fancy border!')).toBeInTheDocument()
+  },
+}
+/**
+ * 6) Accordion with many lines of content
+ */
+export const LargeContent: Story = {
+  name: 'Accordion With Large Content',
+  render: args => (
+    <Accordion {...args}>
+      <AccordionSummary>Lots of Text</AccordionSummary>
+      <AccordionDetails>
+        <div>
+          <Typography fontvariant="merriparagraph" text="Line 1" />
+          <Typography fontvariant="merriparagraph" text="Line 2" />
+          <Typography fontvariant="merriparagraph" text="Line 3" />
+          <Typography fontvariant="merriparagraph" text="Line 4" />
+          <Typography fontvariant="merriparagraph" text="Line 5" />
+          <Typography fontvariant="merriparagraph" text="Line 6" />
+          <Typography fontvariant="merriparagraph" text="Line 7" />
+          <Typography fontvariant="merriparagraph" text="Line 8" />
+          <Typography fontvariant="merriparagraph" text="Line 9" />
+        </div>
+      </AccordionDetails>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Expand
+    await userEvent.click(canvas.getByText('Lots of Text'))
+    // Confirm a few lines
+    expect(canvas.getByText('Line 1')).toBeInTheDocument()
+    expect(canvas.getByText('Line 9')).toBeInTheDocument()
+  },
+}
+/**
+ * 7) Disabled Accordion
+ */
+export const DisabledAccordion: Story = {
+  name: 'Disabled Accordion',
+  render: args => (
+    <Accordion disabled {...args}>
+      <AccordionSummary>Cannot Expand</AccordionSummary>
+      <AccordionDetails>{sampleContent}</AccordionDetails>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Try to expand
+    await userEvent.click(canvas.getByText('Cannot Expand'))
+    // Content should remain hidden
+    expect(
+      canvas.queryByText('This is the accordion content.')
+    ).not.toBeInTheDocument()
+  },
+}
+/**
+ * 8) Controlled Accordion (toggle via props)
+ *    We must put our hook usage in a separate
+ *    React component whose name starts with a capital letter.
+ */
+const ControlledAccordionExample = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  return (
+    <>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Toggle Accordion
+      </button>
+      <Accordion expanded={isExpanded}>
+        <AccordionSummary>Controlled Accordion</AccordionSummary>
+        <AccordionDetails>
+          <Typography
+            fontvariant="merriparagraph"
+            text="This is controlled externally."
+          />
+        </AccordionDetails>
+      </Accordion>
+    </>
+  )
+}
+export const ControlledAccordion: Story = {
+  name: 'Controlled Accordion (toggle via props)',
+  render: () => <ControlledAccordionExample />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Initially hidden
+    expect(
+      canvas.queryByText('This is controlled externally.')
+    ).not.toBeInTheDocument()
+    // Click the external toggle button
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Toggle Accordion' })
+    )
+    // Now the content should appear
+    expect(
+      canvas.getByText('This is controlled externally.')
+    ).toBeInTheDocument()
+    // Click again to hide
+    await userEvent.click(
+      canvas.getByRole('button', { name: 'Toggle Accordion' })
+    )
+    expect(
+      canvas.queryByText('This is controlled externally.')
+    ).not.toBeInTheDocument()
+  },
+}

package/src/components/Button/button.stories.tsx ADDED Viewed

@@ -0,0 +1,157 @@
+// src/components/Button/button.stories.tsx
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { userEvent, within, expect } from '@storybook/test'
+import CustomButton /* , { CustomButtonProps } */ from './index' // Remove { CustomButtonProps } if unused
+// For an example icon usage, we can import something from Material UI icons:
+import { Send } from '@mui/icons-material'
+/**
+ * Storybook metadata
+ */
+const meta: Meta<typeof CustomButton> = {
+  title: 'Components/Button',
+  component: CustomButton,
+  // If you want Storybook controls for certain props (color pickers, etc.), configure them here:
+  argTypes: {
+    backgroundcolor: { control: 'color' },
+    fontcolor: { control: 'color' },
+    iconcolor: { control: 'color' },
+    iconsize: { control: 'text' },
+  },
+  parameters: {
+    a11y: {
+      disable: false,
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof CustomButton>
+/**
+ * 1) Default Button
+ */
+export const DefaultButton: Story = {
+  args: {
+    text: 'Click Me',
+  },
+  // Optional test using Storybook "play" function
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Grab the button
+    const buttonEl = canvas.getByRole('button', { name: /click me/i })
+    // Simulate a user click
+    await userEvent.click(buttonEl)
+    // Verify some condition - for now, just ensure it's not disabled
+    expect(buttonEl).not.toBeDisabled()
+  },
+}
+/**
+ * 2) Disabled Button
+ */
+export const DisabledButton: Story = {
+  args: {
+    text: 'I am disabled',
+    disableButton: 'true',
+  },
+  // Add an 'await' call or remove `async`
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const buttonEl = canvas.getByRole('button', { name: /i am disabled/i })
+    // Attempt a click just to satisfy 'await'
+    await userEvent.click(buttonEl)
+    // This button should be disabled
+    expect(buttonEl).toBeDisabled()
+  },
+}
+/**
+ * 3) Text (Transparent) Button
+ *    (backgroundcolor="none" => "text" style)
+ */
+export const TextButton: Story = {
+  args: {
+    text: 'I am text only',
+    backgroundcolor: 'none', // Transparent
+    fontcolor: '#1976d2', // Typical link-blue color
+  },
+  // Add an 'await' call or remove `async`
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const buttonEl = canvas.getByRole('button', { name: /i am text only/i })
+    // Confirm it is not disabled by clicking
+    await userEvent.click(buttonEl)
+    expect(buttonEl).not.toBeDisabled()
+  },
+}
+/**
+ * 4) Button with Icon on the Left
+ */
+export const WithIconLeft: Story = {
+  args: {
+    text: 'Send',
+    icon: <Send />, // MUI icon
+    iconlocation: 'left', // Icon on the left
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const buttonEl = canvas.getByRole('button', { name: /send/i })
+    await userEvent.click(buttonEl)
+    // We can assert it's still present
+    expect(buttonEl).toBeInTheDocument()
+  },
+}
+/**
+ * 5) Button with Icon on the Right
+ */
+export const WithIconRight: Story = {
+  args: {
+    text: 'Send',
+    icon: <Send />,
+    iconlocation: 'right',
+  },
+  // No "play" test here, but you can add one if you like
+}
+/**
+ * 6) Button with Icon Above the Text
+ */
+export const WithIconAbove: Story = {
+  args: {
+    text: 'Send',
+    icon: <Send />,
+    iconlocation: 'above', // Icon stacked on top
+    fontlocation: 'center', // Center text
+  },
+}
+/**
+ * 7) Custom Colors & Sizing
+ */
+export const CustomColorsAndSize: Story = {
+  args: {
+    text: 'Custom Colors',
+    backgroundcolor: '#4caf50',
+    fontcolor: '#ffffff',
+    width: '120px',
+    height: '50px',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const buttonEl = canvas.getByRole('button', { name: /custom colors/i })
+    await userEvent.click(buttonEl)
+    expect(buttonEl).not.toBeDisabled()
+  },
+}