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,5 +1,9 @@
 # Changelog
 
+## 3.1.0
+
+- Integrate style-guide documentation into shared components and enable MDX support
+
 ## 3.0.27
 
 - added classNames and variants names where possible for adding customization support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.27",
+  "version": "3.1.0",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
@@ -22,7 +22,7 @@
       "eslint --quiet --fix",
       "prettier --write --ignore-unknown"
     ],
-    "*.{json,css,sass,scss,xml,yml,yaml,md}": [
+    "*.{json,css,sass,scss,xml,yml,yaml,md,mdx}": [
       "prettier --write --ignore-unknown"
     ],
     "*.test.{js,jsx,ts,tsx}": [
@@ -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,26 +85,25 @@
     "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"
   },
   "scripts": {
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "lint": "eslint . --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
-    "pretty": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,sass,scss,xml,yml,yaml,md}\"",
-    "pretty:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,sass,scss,xml,yml,yaml,md}\"",
+    "pretty": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,sass,scss,xml,yml,yaml,md,mdx}\"",
+    "pretty:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,sass,scss,xml,yml,yaml,md,mdx}\"",
     "test": "jest",
     "test:ci": "CI=true jest",
     "start": "yarn start:storybook",

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

@@ -21,7 +21,6 @@
 import { 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> = (args: any) => (

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

@@ -1,31 +1,63 @@
-### 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 +70,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,
 }
 

src/components/basic/Datepicker/Datepicker.mdx

@@ -0,0 +1,58 @@
+{/**\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***\***\*\*\*\***\*\***\*\*\*\***\*\*\*\***\*\*\*\***\*\***\*\*\*\***
+
+- 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 { Datepicker } from '.'
+import { theme } from '../../../theme'
+
+<Meta title="Design Guidelines/Datepicker" />
+
+## Datepicker
+
+<br />
+
+<SharedThemeProvider>
+  <SharedCssBaseline />
+  <Datepicker
+    label={'Date label'}
+    placeholder={'Enter a date'}
+    helperText={'Helper'}
+    margin={'dense'}
+    variant={'filled'}
+    defaultValue={new Date()}
+    daySelectedColor={'#0F71CB'}
+    todayColor={'#939393'}
+    onChangeItem={() => {}}
+  />
+</SharedThemeProvider>
+
+<br />
+<br />
+
+#### Principles
+
+A date picker is used to select a specific date or date range from a calendar and spare the user the work of typing in a date. However, user input in the form of typing is still possible.
+
+#### When to use
+
+- Whenever the user needs to input a date or a range of dates
+- Whenever you want to limit the dates the user should select from