@veritone-ce/design-system 2.0.1 → 2.0.3

package/dist/types/src-next/Drawer/components.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type DrawerOptions } from './state.js';
+import { type ButtonProps } from '../Button/index.js';
+import { type TypographyProps } from '../Typography/index.js';
+import { type IconButtonProps } from '../IconButton/index.js';
+export type DrawerProps = DrawerOptions & {
+    portalEl?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+    lockScroll?: boolean;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    overlayStyle?: React.CSSProperties;
+    overlayClassName?: string;
+};
+declare const Drawer: React.ForwardRefExoticComponent<DrawerOptions & {
+    portalEl?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null | undefined;
+    lockScroll?: boolean | undefined;
+    children: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    overlayStyle?: React.CSSProperties | undefined;
+    overlayClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;
+export declare const DrawerStart: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerEnd: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerTypography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DrawerActions: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerCloseButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerCloseIconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/src-next/Drawer/factory.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PopoverPortalElProp } from '../popover/types.js';
+export type DrawerFactoryOptions = {
+    portalEl?: PopoverPortalElProp;
+};
+export declare function createDrawerComponent({ portalEl }: DrawerFactoryOptions): React.ForwardRefExoticComponent<import("./state.js").DrawerOptions & {
+    portalEl?: HTMLElement | React.MutableRefObject<HTMLElement | null> | null | undefined;
+    lockScroll?: boolean | undefined;
+    children: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    overlayStyle?: React.CSSProperties | undefined;
+    overlayClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src-next/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components.js';
+export { default } from './components.js';
+export * from './factory.js';

package/dist/types/src-next/Drawer/state.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+export interface DrawerOptions {
+    open: boolean;
+    onDismiss: () => void;
+}
+export declare function useDrawer({ open, onDismiss: dismissDrawer }: DrawerOptions): {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "active" | "selected"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    open: boolean;
+    dismiss: () => void;
+};
+export type DrawerContextType = (ReturnType<typeof useDrawer> & {
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}) | null;
+export declare const DrawerContext: React.Context<DrawerContextType>;
+export declare const useDrawerContext: () => {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "active" | "selected"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
+    open: boolean;
+    dismiss: () => void;
+} & {
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};

package/dist/types/src-next/Textarea/index.d.ts

@@ -7,6 +7,7 @@ export type TextareaProps = {
     helpLabel?: React.ReactNode;
     error?: React.ReactNode;
     rows?: number;
+    onChange?: React.InputHTMLAttributes<HTMLTextAreaElement>['onChange'];
     style?: React.CSSProperties;
     className?: string;
 };

package/dist/types/src-next/index.d.ts

@@ -12,6 +12,8 @@ export { default as CircularProgress } from './CircularProgress/index.js';
 export * from './CircularProgress/index.js';
 export { default as Dialog } from './Dialog/index.js';
 export * from './Dialog/index.js';
+export { default as Drawer } from './Drawer/index.js';
+export * from './Drawer/index.js';
 export { default as GlobalStyles } from './GlobalStyles/index.js';
 export * from './GlobalStyles/index.js';
 export * from './Icon/index.js';

package/dist/types/src-next/popover/types.d.ts

@@ -1,6 +1,7 @@
 import { VirtualElement as PopoverVirtualElement } from '@floating-ui/react';
 import React from 'react';
 export type { PopoverVirtualElement };
+export declare const PopoverPlacementValues: readonly PopoverPlacement[];
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 export type PopoverAnchor = PopoverVirtualElement | (() => PopoverVirtualElement | null) | HTMLElement | (() => HTMLElement | null) | null | undefined;
 export type PopoverStrategy = 'absolute' | 'fixed';

package/dist/types/src-next/styles/typography.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const TypographyVariantKeys: readonly ["h4", "label", "paragraph1", "paragraph2", "paragraph3", "button", "buttonSmall"];
+export declare const TypographyVariantKeys: readonly ["title", "h1", "h2", "h3", "h4", "label", "paragraph1", "paragraph2", "paragraph3", "button", "buttonSmall"];
 export type TypographyVariant = (typeof TypographyVariantKeys)[number];
 export type TypographyStyle = {
     fontFamily: React.CSSProperties['fontFamily'];
@@ -7,6 +7,8 @@ export type TypographyStyle = {
     fontWeight: React.CSSProperties['fontWeight'];
     fontSize: React.CSSProperties['fontSize'];
     lineHeight: React.CSSProperties['lineHeight'];
+    letterSpacing: React.CSSProperties['letterSpacing'];
+    textTransform: React.CSSProperties['textTransform'];
 };
 export interface TypographyStyleOptions extends Partial<TypographyStyle> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -19,6 +19,7 @@
   "author": {
     "name": "Veritone"
   },
+  "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/src/index.d.ts",
@@ -122,15 +123,16 @@
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-dropzone": "^5.1.0",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
-    "auto": "^11.0.4",
+    "auto": "^11.1.1",
     "autoprefixer": "^10.4.17",
     "babel-jest": "^29.3.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -138,6 +140,7 @@
     "cssnano": "^6.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "esbuild": "^0.19.11",
+    "esbuild-jest": "^0.5.0",
     "esbuild-runner": "^2.2.2",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
@@ -147,6 +150,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "8.0.2",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^14.0.1",
@@ -155,10 +159,12 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rollup": "^4.9.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
+    "rollup-plugin-jsx-remove-attributes": "^1.0.1",
     "rollup-plugin-preserve-directives": "^0.3.0",
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.70.0",