Merge branch 'main' into website

saas-js · Feb 29, 2024 · e0025cf · e0025cf
2 parents 11bd897 + 0e0f316
commit e0025cf
Show file tree

Hide file tree

Showing 14 changed files with 489 additions and 78 deletions.
diff --git a/.changeset/four-kings-relax.md b/.changeset/four-kings-relax.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/theme': patch
+'@saas-ui/react': patch
+---
+
+Fixed issue where Chakra UI Card sizes would not apply
diff --git a/.changeset/real-toys-think.md b/.changeset/real-toys-think.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/core': patch
+'@saas-ui/react': patch
+---
+
+Fixed issue where ref would not be forwarded to StructuredListHeader
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -24,6 +24,10 @@
     "@chakra-ui/react-env": "^3.1.0",
     "@chakra-ui/skip-nav": "^2.1.0",
     "@chakra-ui/system": "^2.6.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",

diff --git a/apps/website/src/pages/api/blocks/[category]/[component].ts b/apps/website/src/pages/api/blocks/[category]/[component].ts
@@ -30,7 +30,7 @@ export default async function handler(
     }
   )
 
-  const { data, error } = await supabase.auth.getUser()
+  const { data } = await supabase.auth.getUser()
 
   const hasLicense = !!data.user?.user_metadata.licenses?.length
 
@@ -43,7 +43,7 @@ export default async function handler(
     attributes = await getComponentFromRepo(category, component)
   }
 
-  if ((!attributes?.attributes.public && !hasLicense) || error) {
+  if (!attributes?.attributes.public && !hasLicense) {
     return res.status(401).json({ error: 'Unauthorized' })
   }
 

diff --git a/apps/website/src/pages/pricing.tsx b/apps/website/src/pages/pricing.tsx
@@ -464,7 +464,7 @@ const MemberShip = () => {
     >
       <PricingFeatures>
         <PricingFeature
-          title={<strong>2 spots available</strong>}
+          title={<strong>1 spot available</strong>}
           iconColor="green.400"
         />
         <PricingFeature title="Startup license included" iconColor="cyan.500" />

diff --git a/packages/pro b/packages/pro
diff --git a/packages/saas-ui-core/src/structured-list/list.tsx b/packages/saas-ui-core/src/structured-list/list.tsx
@@ -127,45 +127,46 @@ export interface StructuredListHeaderProps extends HTMLChakraProps<'li'> {
   level?: number
 }
 
-export const StructuredListHeader: React.FC<StructuredListHeaderProps> = (
-  props
-) => {
-  const {
-    children,
-    onClick,
-    action,
-    role = 'heading',
-    level = 1,
-    ...rest
-  } = props
-  const styles = useStyles()
+export const StructuredListHeader = forwardRef<StructuredListHeaderProps, 'li'>(
+  (props, ref) => {
+    const {
+      children,
+      onClick,
+      action,
+      role = 'heading',
+      level = 1,
+      ...rest
+    } = props
+    const styles = useStyles()
 
-  const headerStyles = {
-    display: 'flex',
-    flexDirection: 'row',
-    py: 2,
-    px: 4,
-    position: 'sticky',
-    fontSize: 'md',
-    fontWeight: 'semibold',
-    color: useColorModeValue('gray.500', 'gray.400'),
-    ...styles.header,
-  }
+    const headerStyles = {
+      display: 'flex',
+      flexDirection: 'row',
+      py: 2,
+      px: 4,
+      position: 'sticky',
+      fontSize: 'md',
+      fontWeight: 'semibold',
+      color: useColorModeValue('gray.500', 'gray.400'),
+      ...styles.header,
+    }
 
-  return (
-    <chakra.li
-      __css={headerStyles}
-      onClick={onClick}
-      {...rest}
-      className={cx('sui-list__header', props.className)}
-    >
-      <chakra.span flex="1" userSelect="none" role={role} aria-level={level}>
-        {children}
-      </chakra.span>
-      {action}
-    </chakra.li>
-  )
-}
+    return (
+      <chakra.li
+        ref={ref}
+        __css={headerStyles}
+        onClick={onClick}
+        {...rest}
+        className={cx('sui-list__header', props.className)}
+      >
+        <chakra.span flex="1" userSelect="none" role={role} aria-level={level}>
+          {children}
+        </chakra.span>
+        {action}
+      </chakra.li>
+    )
+  }
+)
 
 StructuredListHeader.displayName = 'StructuredListHeader'
 

diff --git a/packages/saas-ui-file-upload/CHANGELOG.md b/packages/saas-ui-file-upload/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @saas-ui/file-upload
 
+## 0.2.5
+
+### Patch Changes
+
+- 6290650: Fixed issue where onFileAccept an onFileReject would not trigger
+
 ## 0.2.4
 
 ### Patch Changes

diff --git a/packages/saas-ui-file-upload/package.json b/packages/saas-ui-file-upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/file-upload",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Saas UI Dropzone Component for Chakra UI",
   "source": "src/index.ts",
   "exports": {

diff --git a/packages/saas-ui-file-upload/src/file-upload.tsx b/packages/saas-ui-file-upload/src/file-upload.tsx
@@ -46,6 +46,7 @@ export const FileUpload = forwardRef<FileUploadProps, 'div'>((props, ref) => {
   } = props
 
   const [options, containerProps] = split(rest, [
+    'translations',
     'accept',
     'allowDrop',
     'dir',
@@ -58,6 +59,8 @@ export const FileUpload = forwardRef<FileUploadProps, 'div'>((props, ref) => {
     'minFileSize',
     'name',
     'onFilesChange',
+    'onFileAccept',
+    'onFileReject',
     'getRootNode',
   ])
 

diff --git a/packages/saas-ui-file-upload/src/index.ts b/packages/saas-ui-file-upload/src/index.ts
@@ -18,3 +18,9 @@ export {
   FileUploadPreview,
 } from './file-upload'
 export type { FileUploadPreviewProps, FileUploadProps } from './file-upload'
+export type {
+  FileError,
+  FileAcceptDetails,
+  FileRejectDetails,
+  FileRejection,
+} from '@zag-js/file-upload'
diff --git a/packages/saas-ui-file-upload/stories/file-upload.stories.tsx b/packages/saas-ui-file-upload/stories/file-upload.stories.tsx
@@ -80,6 +80,42 @@ export const MultipleFiles = {
   },
 }
 
+export const OnFileAccept = {
+  render: () => {
+    return (
+      <FileUpload
+        maxFileSize={1024 * 1024}
+        maxFiles={10}
+        accept="image/*"
+        onFileAccept={(details) => {
+          console.log(details)
+        }}
+      >
+        {({ files, clearFiles }) => (
+          <FileUploadDropzone>
+            <Text fontSize="sm">Drag your image(s) here</Text>
+            {!files?.length ? (
+              <FileUploadTrigger as={Button}>Select image(s)</FileUploadTrigger>
+            ) : (
+              <HStack>
+                <Text fontSize="sm">{files.length} selected</Text>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    clearFiles()
+                  }}
+                >
+                  Clear
+                </Button>
+              </HStack>
+            )}
+          </FileUploadDropzone>
+        )}
+      </FileUpload>
+    )
+  },
+}
+
 export const ImagePreview = {
   render: () => {
     return (

diff --git a/packages/saas-ui-theme/src/saas-ui/components/card.ts b/packages/saas-ui-theme/src/saas-ui/components/card.ts
@@ -1,4 +1,3 @@
-import { mode } from '@chakra-ui/theme-tools'
 import { cardAnatomy } from '@chakra-ui/anatomy'
 
 import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system'
@@ -18,15 +17,6 @@ const baseStyle = definePartsStyle(() => {
       transitionProperty: 'common',
       transitionDuration: 'normal',
     },
-    header: {
-      p: 4,
-    },
-    body: {
-      p: 4,
-    },
-    footer: {
-      p: 4,
-    },
   }
 })
 
@@ -97,6 +87,27 @@ const variantOutline = definePartsStyle((props) => {
   }
 })
 
+const sizes = {
+  sm: definePartsStyle({
+    container: {
+      [$radius.variable]: 'radii.base',
+      [$padding.variable]: 'space.3',
+    },
+  }),
+  md: definePartsStyle({
+    container: {
+      [$radius.variable]: 'radii.md',
+      [$padding.variable]: 'space.4',
+    },
+  }),
+  lg: definePartsStyle({
+    container: {
+      [$radius.variable]: 'radii.xl',
+      [$padding.variable]: 'space.6',
+    },
+  }),
+}
+
 export const cardTheme = defineMultiStyleConfig({
   defaultProps: {
     variant: 'elevated',
@@ -107,4 +118,5 @@ export const cardTheme = defineMultiStyleConfig({
     outline: variantOutline,
     filled: variantFilled,
   },
+  sizes,
 })