Merge branch 'main' into website

saas-js · Nov 23, 2023 · 7b3cbd2 · 7b3cbd2 · vercel · Nov 23, 2023
2 parents fab6e6c + bbe9f94
commit 7b3cbd2
Show file tree

Hide file tree

Showing 113 changed files with 4,579 additions and 2,078 deletions.
diff --git a/apps/palette/CHANGELOG.md b/apps/palette/CHANGELOG.md
@@ -1,5 +1,18 @@
 # palette
 
+## 1.4.7
+
+### Patch Changes
+
+- Updated dependencies [31d05ed5]
+- Updated dependencies [dddb3d1a]
+- Updated dependencies [ebba8404]
+- Updated dependencies [91412d77]
+- Updated dependencies [a3180b02]
+- Updated dependencies [91412d77]
+  - @saas-ui/react@2.4.0
+  - @saas-ui/theme-glass@0.5.1
+
 ## 1.4.6
 
 ### Patch Changes

diff --git a/apps/palette/package.json b/apps/palette/package.json
@@ -1,6 +1,6 @@
 {
   "name": "palette-docs",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/apps/website/CHANGELOG.md b/apps/website/CHANGELOG.md
@@ -1,5 +1,19 @@
 # website
 
+## 2.3.3
+
+### Patch Changes
+
+- Updated dependencies [31d05ed5]
+- Updated dependencies [dddb3d1a]
+- Updated dependencies [68995558]
+- Updated dependencies [ebba8404]
+- Updated dependencies [91412d77]
+- Updated dependencies [a3180b02]
+- Updated dependencies [91412d77]
+  - @saas-ui/react@2.4.0
+  - @saas-ui/forms@2.3.0
+
 ## 2.3.2
 
 ### Patch Changes

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "website",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "private": true,
   "author": "Eelco Wiersma <[email protected]>",
   "scripts": {

diff --git a/apps/website/src/components/overview/item.tsx b/apps/website/src/components/overview/item.tsx
@@ -8,6 +8,7 @@ import {
   Checkbox,
   CloseButton,
   Code,
+  Flex,
   FormControl,
   FormErrorMessage,
   FormLabel,
@@ -18,6 +19,7 @@ import {
   Input,
   LinkBox,
   LinkOverlay,
+  Spacer,
   Table,
   Tbody,
   Td,
@@ -36,6 +38,7 @@ import {
   ToolbarButton,
   Command,
   ActiveFilter,
+  Beacon,
 } from '@saas-ui-pro/react'
 import {
   AppShell,
@@ -65,18 +68,32 @@ import {
   Web3Address,
   Steps,
   StepsItem,
+  Navbar,
+  SelectOption,
+  SelectList,
+  Link,
+  Timeline,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineDot,
+  TimelineContent,
+  TimelineTrack,
+  TimelineIcon,
 } from '@saas-ui/react'
 import NextLink from 'next/link'
 import {
   FiBold,
   FiCheck,
+  FiFilter,
   FiHome,
   FiItalic,
   FiMaximize,
   FiPlus,
   FiUnderline,
   FiUsers,
 } from 'react-icons/fi'
+import SaasUIGlyph from '../saas-ui-glyph'
+import { SelectButton } from '@saas-ui/forms'
 
 const autoform = `z.object({
   name: z.string()
@@ -111,11 +128,39 @@ const componentIllustrations = {
       />
     </Page>
   ),
+  splitpage: (
+    <HStack height="100%" width="full" spacing="0">
+      <Page height="100%" borderRightWidth="1px" flex="0">
+        <PageHeader
+          title="Inbox"
+          toolbar={
+            <Toolbar>
+              <Button variant="secondary" size="xs">
+                <FiFilter />
+              </Button>
+            </Toolbar>
+          }
+        />
+      </Page>
+      <Page height="100%" flex="1">
+        <PageHeader title="Hello" />
+      </Page>
+    </HStack>
+  ),
   section: (
-    <Section>
+    <Section width="80%">
       <SectionHeader title="Settings" description="Manage your settings" />
     </Section>
   ),
+  commandbar: <Command>CMD+K</Command>,
+  togglebutton: (
+    <Button variant="primary" size="xs">
+      Toggle
+    </Button>
+  ),
+  web3address: (
+    <Web3Address address="0x71C7656EC7ab88b098defB751B7401B5f6d8976F" />
+  ),
   toolbar: (
     <Toolbar flex="0" borderWidth="1px" rounded="md">
       <ToolbarButton label="bold" icon={<FiBold />} />
@@ -130,6 +175,21 @@ const componentIllustrations = {
       <StepsItem title="Account" />
     </Steps>
   ),
+  navbar: (
+    <HStack
+      borderBottomWidth="1px"
+      width="full"
+      px="3"
+      py="2"
+      alignSelf="start"
+    >
+      <SaasUIGlyph width="18px" />
+      <Spacer />
+      <Button variant="primary" size="xs">
+        Log in
+      </Button>
+    </HStack>
+  ),
   sidebar: (
     <Sidebar width="80%" borderRadius="md">
       <SidebarSection>
@@ -203,11 +263,16 @@ const componentIllustrations = {
     </Code>
   ),
   select: (
-    <Select
-      name="type"
-      options={['Fullstack Developer']}
-      value="Fullstack Developer"
-    />
+    <Box width="90%">
+      <Select name="type" value="Fullstack Developer" defaultIsOpen>
+        <SelectButton>Fullstack Developer</SelectButton>
+        <SelectList>
+          <SelectOption value="Fullstack Developer">
+            Fullstack Developer
+          </SelectOption>
+        </SelectList>
+      </Select>
+    </Box>
   ),
   passwordinput: (
     <Box width="80%">
@@ -219,6 +284,11 @@ const componentIllustrations = {
       <SearchInput size="sm" />
     </Box>
   ),
+  fileupload: (
+    <Box borderWidth="1px" rounded="md" p="4">
+      Drop your files here or <Link href="#">select files</Link>
+    </Box>
+  ),
   datatable: (
     <Box>
       <Table size="sm">
@@ -254,7 +324,7 @@ const componentIllustrations = {
       actions={<Button variant="link">Reset search</Button>}
     />
   ),
-  list: (
+  structuredlist: (
     <StructuredList width="90%">
       <StructuredListItem>
         <StructuredListIcon>
@@ -285,6 +355,27 @@ const componentIllustrations = {
       tertiaryLabel="Out for lunch"
     />
   ),
+  timeline: (
+    <Timeline>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineIcon />
+          <TimelineTrack />
+        </TimelineSeparator>
+        <TimelineContent>
+          <Text fontSize="sm">New signup</Text>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineSeparator>
+          <TimelineIcon />
+        </TimelineSeparator>
+        <TimelineContent>
+          <Text fontSize="sm">Account upgraded</Text>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  ),
   command: <Command>G then D</Command>,
   datagrid: (
     <Box>
@@ -329,6 +420,23 @@ const componentIllustrations = {
   filters: (
     <ActiveFilter id="status" label="Status" operator="is" value="Active" />
   ),
+  kanban: (
+    <HStack spacing="4" alignItems="start" width="90%">
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Todo</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Done</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+      <Flex flexDirection="column" flex="1" gap="2">
+        <Box>Doing</Box>
+        <Box borderWidth="1px" rounded="md" px="2" py="4"></Box>
+      </Flex>
+    </HStack>
+  ),
   banner: (
     <Banner width="80%" colorScheme="primary" variant="solid" rounded="md">
       <BannerContent>
@@ -350,7 +458,7 @@ const componentIllustrations = {
       <CloseButton size="sm" />
     </HStack>
   ),
-  loader: (
+  loadingoverlay: (
     <LoadingOverlay>
       <LoadingSpinner />
     </LoadingOverlay>
@@ -424,6 +532,7 @@ const componentIllustrations = {
       <Box>Remove</Box>
     </VStack>
   ),
+  beacon: <Beacon />,
   'benefits-modal': (
     <VStack
       rounded="md"

diff --git a/apps/website/src/data/components-sidebar.ts b/apps/website/src/data/components-sidebar.ts
@@ -32,6 +32,11 @@ const sidebar = {
           title: 'App Shell',
           path: '/docs/components/layout/app-shell',
         },
+        {
+          title: 'Navbar',
+          path: '/docs/components/layout/navbar',
+          new: true,
+        },
         {
           title: 'Sidebar',
           path: '/docs/components/layout/sidebar',

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/codeblock.tsx b/apps/website/src/docs/components/mdx-components/codeblock/codeblock.tsx
@@ -28,7 +28,9 @@ function CodeBlock(props) {
     mountStylesheet = false,
     height,
     overflow,
+    overflowY,
     center,
+    padding,
   } = props.children.props
 
   const _live = live === 'true' || live === true
@@ -52,7 +54,9 @@ function CodeBlock(props) {
     mountStylesheet,
     height,
     overflow,
+    overflowY,
     center,
+    padding,
   }
 
   if (isMounted && language === 'jsx' && _live === true) {

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/react-live-block.tsx b/apps/website/src/docs/components/mdx-components/codeblock/react-live-block.tsx
@@ -105,7 +105,9 @@ function ReactLiveBlock({
   theme,
   height,
   overflow,
+  overflowY,
   center,
+  padding,
   ...rest
 }) {
   const [editorCode, setEditorCode] = useState(rawCode.trim())
@@ -119,6 +121,8 @@ function ReactLiveBlock({
 
   let sx: object = {
     overflow,
+    overflowY,
+    padding,
   }
 
   if (center) {

diff --git a/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx b/apps/website/src/docs/components/mdx-components/codeblock/react-live-scope.tsx
@@ -26,6 +26,8 @@ import {
   FiInbox,
   FiUsers,
   FiUser,
+  FiMenu,
+  FiX,
   FiFilter,
   FiCircle,
   FiSettings,
@@ -46,6 +48,7 @@ import {
   FiLink,
   FiChevronsLeft,
   FiChevronsRight,
+  FiChevronDown,
   FiUserCheck,
   FiCode,
   FiRefreshCw,
@@ -67,6 +70,8 @@ const reactIcons = {
   FiInbox,
   FiUsers,
   FiUser,
+  FiMenu,
+  FiX,
   FiFilter,
   FiCircle,
   FiSettings,
@@ -92,6 +97,7 @@ const reactIcons = {
   FaCookie,
   FiChevronsLeft,
   FiChevronsRight,
+  FiChevronDown,
   FiUserCheck,
   FiCode,
   FiRefreshCw,