feat: add new components docs

WTTJ · Jul 12, 2024 · 411b100 · 411b100
1 parent ad4b5cd
commit 411b100
Show file tree

Hide file tree

Showing 84 changed files with 4,088 additions and 22 deletions.
diff --git a/packages/DatePicker/docs/index.mdx b/packages/DatePicker/docs/index.mdx
@@ -6,9 +6,11 @@ title: DatePicker
 usage: import { DatePicker } from @welcome-ui/date-picker
 ---
 
-### Props from react-datepicker
+### react-datepicker
 
-Simply add on DatePicker the props from [react-datepicker](https://github.com/Hacker0x01/react-datepicker)
+It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library.
+
+_Note_: Pass a value of `null` if you don't want the default value of `Date.now()`.
 
 <div data-playground="react-date-picker.tsx" data-component="DatePicker"></div>
 

diff --git a/packages/DateTimePicker/docs/index.mdx b/packages/DateTimePicker/docs/index.mdx
@@ -6,7 +6,9 @@ title: DateTimePicker
 usage: import { DateTimePicker } from @welcome-ui/date-time-picker
 ---
 
-It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library. [All the props](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepicker.md) the library exposes can be passed to either DatePicker or TimePicker.
+### react-datepicker
+
+It is based on the [react-datepicker](https://github.com/Hacker0x01/react-datepicker) library.
 
 _Note_: Pass a value of `null` if you don't want the default value of `Date.now()`.
 

diff --git a/packages/DropdownMenu/docs/index.mdx b/packages/DropdownMenu/docs/index.mdx
@@ -1,6 +1,6 @@
 ---
 ariakit: https://ariakit.org/components/menu
-category: forms
+category: navigation
 description: The Dropdown Menu component is a navigational element that reveals a list of options or actions when triggered by a user interaction, such as clicking a button. It provides a compact and efficient way to present multiple choices without cluttering the interface. Dropdown menus enhance usability by organizing related items in a hierarchical structure, making it easier for users to find and select options.
 packageName: dropdown-menu
 title: DropdownMenu

diff --git a/packages/Stack/docs/examples/childs.tsx b/packages/Stack/docs/examples/childs.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+  return (
+    <Stack as="ul">
+      <div>Foo</div>
+      <div>Bar</div>
+      <div>Baz</div>
+    </Stack>
+  )
+}
+
+export default Example
diff --git a/packages/Stack/docs/examples/overview.tsx b/packages/Stack/docs/examples/overview.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+  return (
+    <Stack>
+      <div>Foo</div>
+      <div>Bar</div>
+      <div>Baz</div>
+    </Stack>
+  )
+}
+
+export default Example
diff --git a/packages/Stack/docs/examples/spacing.tsx b/packages/Stack/docs/examples/spacing.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Stack } from '@welcome-ui/stack'
+
+const Example = () => {
+  return (
+    <Stack direction="row" spacing="xl">
+      <div>Foo</div>
+      <div>Bar</div>
+      <div>Baz</div>
+    </Stack>
+  )
+}
+
+export default Example
diff --git a/packages/Stack/docs/index.mdx b/packages/Stack/docs/index.mdx
@@ -0,0 +1,21 @@
+---
+category: layout
+description: The Stack component is a layout element that arranges child components in a vertical or horizontal stack with consistent spacing. It simplifies the creation of flexible and responsive layouts by managing the alignment, spacing, and distribution of its children. This component is ideal for organizing content in a structured and visually appealing manner.
+packageName: stack
+title: Slider
+usage: import { Stack } from '@welcome-ui/stack
+---
+
+The default use of `Stack` will stack its children vertically.
+
+### Spacing and direction
+
+You can change the `direction` & the `spacing`.
+
+<div data-playground="spacing.tsx" data-component="Stack"></div>
+
+### Childs
+
+It will ensure that its children are `li`s when is rendered as an `ul` or an `ol`.
+
+<div data-playground="childs.tsx" data-component="Stack"></div>
diff --git a/packages/Stack/docs/properties.json b/packages/Stack/docs/properties.json
@@ -0,0 +1,81 @@
+{
+  "Stack": {
+    "props": {
+      "direction": {
+        "defaultValue": {
+          "value": "column"
+        },
+        "description": "",
+        "name": "direction",
+        "parent": {
+          "fileName": "Stack/src/index.tsx",
+          "name": "StackOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Stack/src/index.tsx",
+            "name": "StackOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"row\" | \"column\"",
+          "value": [
+            {
+              "value": "\"row\""
+            },
+            {
+              "value": "\"column\""
+            }
+          ]
+        }
+      },
+      "spacing": {
+        "defaultValue": {
+          "value": "md"
+        },
+        "description": "",
+        "name": "spacing",
+        "parent": {
+          "fileName": "Stack/src/index.tsx",
+          "name": "StackOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "Stack/src/index.tsx",
+            "name": "StackOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\"",
+          "value": [
+            {
+              "value": "\"xxs\""
+            },
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"sm\""
+            },
+            {
+              "value": "\"md\""
+            },
+            {
+              "value": "\"lg\""
+            },
+            {
+              "value": "\"xl\""
+            },
+            {
+              "value": "\"xxl\""
+            }
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/packages/Swiper/docs/examples/autoplay.tsx b/packages/Swiper/docs/examples/autoplay.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ autoplay: true, loop: true })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/centered.tsx b/packages/Swiper/docs/examples/centered.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ firstSlideToShow: 2, centeredSlides: true })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/dark.tsx b/packages/Swiper/docs/examples/dark.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+import { Box } from '@welcome-ui/box'
+
+const Example = () => {
+  const swiper = useSwiper({
+    slidesPerView: { mobile: 1, tablet: 2, desktop: 4 },
+    withPagination: { mobile: true, desktop: true },
+    withDarkUI: true,
+  })
+
+  return (
+    <Swiper h={350} store={swiper}>
+      {[...Array(6)].map(item => (
+        <Box border="1px solid" borderColor="dark-100" h={300} key={item} />
+      ))}
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/first.tsx b/packages/Swiper/docs/examples/first.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ firstSlideToShow: 2 })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/no-navigation.tsx b/packages/Swiper/docs/examples/no-navigation.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ withNavigation: { mobile: false, desktop: false } })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/overview.tsx b/packages/Swiper/docs/examples/overview.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ spaceBetween: 0 })
+
+  return (
+    <Swiper h="400" store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/pagination.tsx b/packages/Swiper/docs/examples/pagination.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ withPagination: { mobile: true, desktop: true } })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example
diff --git a/packages/Swiper/docs/examples/slides-per-view.tsx b/packages/Swiper/docs/examples/slides-per-view.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Swiper, useSwiper } from '@welcome-ui/swiper'
+
+const Example = () => {
+  const swiper = useSwiper({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } })
+
+  return (
+    <Swiper h={400} store={swiper}>
+      <img
+        src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+      <img
+        src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+      />
+    </Swiper>
+  )
+}
+
+export default Example