feat(storybook): upgrade story book to support mdx files

.storybook/main.ts

@@ -20,7 +20,13 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/**/*.mdx',
+    '../src/**/**/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/**/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-onboarding',
     '@storybook/addon-links',

CHANGELOG.md

@@ -1,28 +1,8 @@
 # Changelog
 
-## 3.0.33
+## 3.1.0
 
-- updated the condition in handleChange in selectList component
-
-## 3.0.32
-
-- Updated SearchInput component with debounce functionality
-
-## 3.0.31
-
-- Fix linting error and warnings
-
-## 3.0.30
-
-- updated the default value logic of SelectList component to handle onChange function
-
-## 3.0.29
-
-- updated status tag color and also updated theme and chip with 'deleted' property
-
-## 3.0.28
-
-- updated unrestricted packages suggested by dependabot
+- Integrate style-guide documentation into shared components and enable MDX support
 
 ## 3.0.27
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.33",
+  "version": "3.1.0",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
@@ -46,6 +46,7 @@
     "date-fns": "^3.6.0",
     "i18next": "^23.10.1",
     "jquery": "^3.7.1",
+    "prettier": "^3.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
@@ -56,25 +57,25 @@
   "devDependencies": {
     "@babel/core": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
-    "@chromatic-com/storybook": "^1.2.25",
-    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-interactions": "^8.0.2",
-    "@storybook/addon-links": "^8.0.2",
-    "@storybook/addon-onboarding": "^8.0.2",
-    "@storybook/blocks": "^8.0.2",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-onboarding": "^8.1.6",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/react": "^8.1.6",
+    "@storybook/react-vite": "^8.1.6",
+    "@storybook/test": "^8.1.6",
     "@storybook/builder-vite": "^8.1.10",
-    "@storybook/react": "^8.0.2",
-    "@storybook/react-vite": "^8.0.2",
-    "@storybook/test": "^8.0.2",
     "@testing-library/react": "^14.2.2",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.30",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/react-slick": "^0.23.13",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-config-love": "^43.1.0",
@@ -84,18 +85,17 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.5",
-    "sass": "^1.72.0",
-    "storybook": "^8.0.2",
+    "sass": "^1.77.4",
+    "storybook": "^8.1.5",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "*",
-    "vite": "^5.1.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-lib-inject-css": "^2.0.0"
   },

src/components/basic/Button/BackButton.stories.tsx

@@ -21,7 +21,6 @@
 import type { ComponentStory } from '@storybook/react'
 
 import { BackButton as Component } from './BackButton'
-import button from '../../../../docs/storybook/button.md?raw'
 
 export default {
   title: 'Buttons',
@@ -32,11 +31,6 @@ export default {
       action: 'onClick',
     },
   },
-  parameters: {
-    docs: {
-      description: { component: button },
-    },
-  },
 }
 
 const Template: ComponentStory<typeof Component> = (

docs/storybook/button.md → src/components/basic/Button/Button.mdx

@@ -1,31 +1,62 @@
-### Design
-
-<img width='100%' alt="button variations" src="https://raw.githubusercontent.com/eclipse-tractusx/portal-shared-components/main/docs/static/button-variations.png">
-
-<br>
-<br>
+{/*
+* Copyright (c) 2024 Contributors to the Eclipse Foundation
+*
+* See the NOTICE file(s) distributed with this work for additional
+* information regarding copyright ownership.
+*
+* This program and the accompanying materials are made available under the
+* terms of the Apache License, Version 2.0 which is available at
+* https://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+*/}
+
+import { Story, Meta } from '@storybook/blocks'
+import { SharedThemeProvider } from '../SharedThemeProvider'
+import { SharedCssBaseline } from '../SharedCssBaseline'
+import { LoadMoreButton } from './LoadMoreButton'
+import { Button } from '.'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+
+<Meta title="Design Guidelines/Buttons" />
+
+## Buttons
+
+<SharedThemeProvider>
+  <SharedCssBaseline />
+  <br />
+  <Button variant="outlined">outlined</Button>
+  <br /> <br />
+  <Button variant="contained">contained</Button>
+</SharedThemeProvider>
 
 Use buttons for the most important actions you want users to take on your site, such as "download," "sign up," or "log out."
 
 #### Interaction
 
 Primary button gets the focus prior to a secondary button. Initially the keyboard focus is on the primary button. Thus users may hit the enter key to trigger the primary button to close a dialog for example without using the mouse. In this case the system should provide a non-destructive solution.
 
-<br>
+<br />
 
 #### Context and usage
 
 The primary button indicates the primary action in the current interface and animates the user to click it.
 There should only be one main action per interface area, e.g. per dialog. All other buttons should be of type secondary or tertiary button.
 
-<br>
+<br />
 
 #### When to consider something else
 
 If you want to lead users between pages of a website. Use links instead.
 Less popular or less important actions may be visually styled as links.
 
-<br>
+<br />
 
 #### Guidance
 
@@ -38,13 +69,22 @@ Less popular or less important actions may be visually styled as links.
 - Make the first word of the button’s label a verb. For example, instead of “Complaint Filing” label the button “File a complaint.”
 - At times, consider adding an icon to signal specific actions (“download”, “open in a new window”, etc).
 
-<br>
-<br>
+### Load More Button
+
+<br />
+
+<SharedThemeProvider>
+  <SharedCssBaseline />
+  <LoadMoreButton label="load more" color="primary" onClick={() => {}} />
+</SharedThemeProvider>
+
+<br />
+<br />
 
-## NOTICE
+Load More button component is based on the button component.
 
-This work is licensed under the [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/legalcode).
+##### Setting:
 
-- SPDX-License-Identifier: CC-BY-4.0
-- SPDX-FileCopyrightText: Copyright (c) 2024 Contributors to the Eclipse Foundation
-- Source URL: https://github.com/eclipse-tractusx/portal-shared-components
+- outlined
+- active
+- with icon

src/components/basic/Button/Button.stories.tsx

@@ -23,7 +23,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Button } from '.'
 
 const meta: Meta<typeof Button> = {
-  title: 'MyButton',
+  title: 'Buttons',
   component: Button,
 }