Feat(SingleSelect): Add documentation single select componente

.github/workflows/format.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '20'
           cache: npm
       - run: npm install
 

.github/workflows/sonarcloud.yml

@@ -1,23 +1,25 @@
 name: SonarCloud analysis
 
 on:
-    pull_request:
-        branches: ['main']
-    workflow_dispatch:
+  pull_request:
+    branches: ['main']
+  workflow_dispatch:
 
 permissions:
-    pull-requests: read
+  pull-requests: read
 
 jobs:
-    Analysis:
-        runs-on: ubuntu-latest
+  Analysis:
+    runs-on: ubuntu-latest
 
-        steps:
-            - name: Analyze with SonarCloud
+    steps:
+      - name: Analyze with SonarCloud
 
-              uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
-                  SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
-              with:
-                  args: -Dsonar.projectKey=dd3tech_dd360-components-docs -Dsonar.organization=dd3tech-1
+        uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
+        with:
+          args:
+            -Dsonar.projectKey=dd3tech_dd360-components-docs
+            -Dsonar.organization=dd3tech-1

docs/form/single-select.mdx

@@ -0,0 +1,166 @@
+---
+product: dd360-ds
+title: React SingleSelect component
+components: SingleSelect
+---
+import { DynamicHeroIcon } from 'dd360-ds'
+
+<br id='top' />
+<br />
+
+<Label>Form</Label>
+
+# <HeaderDocCustom title="Single Select" pathUrl="form-single-select" />
+
+The SingleSelect component allows you to create a modern and functional option selector, ideal for forms and web applications that require option selection.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended as it can reduce the application bundle
+
+<WindowEditor codeString="import SingleSelect from 'dd360-ds/SingleSelect'" />
+<WindowEditor codeString="import { SingleSelect } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+The SingleSelect component requires at least the `optionsList` property that defines the available options for selection.
+
+<Playground className='h-60'>
+  <SingleSelect
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+The following code shows how to use the SingleSelect component:
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Label</span>
+
+The <TagDocs text='label' /> property allows you to add a descriptive label to the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    label="Select an option"
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  label="Select an option"
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Large</span>
+
+The <TagDocs text='large' /> property allows you to increase the size of the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    large
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  large
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Disabled</span>
+
+The <TagDocs text='isDisabled' /> property allows you to disable the selector.
+
+<Playground className='h-60'>
+  <SingleSelect
+    isDisabled
+    optionsList={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]}
+  />
+</Playground>
+
+<WindowEditor
+    codeString={`import { SingleSelect } from 'dd360-ds'
+
+<SingleSelect
+  isDisabled
+  optionsList={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'optionsList', default: null, types: ['ISelectOption[]'], required: true },
+    { title: 'label', default: null, types: ['string'] },
+    { title: 'value', default: null, types: ['string | number'] },
+    { title: 'large', default: false, types: ['boolean'] },
+    { title: 'isDisabled', default: false, types: ['boolean'] },
+    { title: 'isRequired', default: false, types: ['boolean'] },
+    { title: 'className', default: null, types: ['string'] },
+    { title: 'classNameAdornment', default: null, types: ['string'] },
+    { title: 'classNameDropdown', default: null, types: ['string'] },
+    { title: 'styleDropdown', default: null, types: ['StyleObject'] },
+    { title: 'onChangeSelect', default: null, types: ['(option: ISelectOption) => void'] }
+  ]}
+/>
+
+Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
+
+<BackAndForwardController />

package.json

@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.38.0",
+    "dd360-ds": "6.39.1",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",

src/components/Layout/SideBarDocs.tsx

@@ -97,7 +97,8 @@ export const components: ComponentObjectProps = {
       },
       {
         label: 'Filter Bar Button',
-        pathname: 'filter-bar-button'
+        pathname: 'filter-bar-button',
+        badge: BADGE_TYPES.new
       }
     ]
   },
@@ -193,6 +194,11 @@ export const components: ComponentObjectProps = {
         label: 'Select',
         pathname: 'select'
       },
+      {
+        label: 'Single Select',
+        pathname: 'single-select',
+        badge: BADGE_TYPES.new
+      },
       {
         label: 'Text Area',
         pathname: 'textarea'