Merge pull request #26 from sippy-platform/0.13

Mellow UI 0.13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sippy-platform/mellow-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "React components for the Mellow Design System.",
   "main": "./dist/mellow-ui.umd.js",
   "module": "./dist/mellow-ui.es.js",
@@ -46,7 +46,7 @@
     "refractor": "4.7.0",
     "typescript": "4.7.4",
     "vite": "3.0.2",
-    "vite-plugin-dts": "1.3.1"
+    "vite-plugin-dts": "1.4.0"
   },
   "peerDependencies": {
     "@sippy-platform/mellow-css": "^0.11.0",

src/components/Button/Button.tsx

@@ -39,6 +39,10 @@ interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
    * As what the component should be rendered
    */
   as?: T;
+  /**
+   * Is the button a placeholder
+   */
+  placeholderWidth?: 0 | 1 | 2 | 3 | 4 | 5 | 25 | 50 | 75 | 100 | 'auto';
   /**
    * Button contents.
    */
@@ -65,10 +69,34 @@ export function Button<T extends ElementType>({
   href,
   className,
   as,
+  placeholderWidth,
   ...props
 }: ButtonProps<T>) {
   const Component = useMemo(() => (as ? as : (href ? 'a' : 'button')) as ElementType, [as, href]);
 
+  if (placeholderWidth) {
+    return (
+      <button
+        type="button"
+        className={clsx(
+          'btn',
+          'placeholder',
+          'disabled',
+          `w-${placeholderWidth}`,
+          `btn-${variant}`,
+          {
+            [`btn-${size}`]: size !== 'md',
+            [`${color}`]: variant === 'color' || variant === 'hover',
+            'btn-block': block,
+          },
+          className
+        )}
+        disabled
+        {...props}
+      />
+    );
+  }
+
   return (
     <Component
       type="button"

src/components/DialogFooter/DialogFooter.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface DialogFooterProps {
+  /**
+   * Custom classes for the dialog header
+   */
+  className?: string;
+  /**
+   * Contents of the dialog header
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const DialogFooter = ({
+  className,
+  children
+}: DialogFooterProps) => {
+  return (
+    <div
+      className={clsx(
+        'dialog-footer',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DialogFooter;

src/components/DialogFooter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DialogFooter';
+export type { DialogFooterProps } from './DialogFooter';

src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,53 @@
+import { Menu } from '@headlessui/react';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+
+export interface DropdownProps {
+  /**
+   * The color of the button, only works when the variant is `color` or `hover`
+   */
+  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  /**
+   * Value of the textarea
+   */
+  trigger: ReactNode;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * Custom classes for the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Dropdown = ({
+  className,
+  color,
+  trigger,
+  children,
+  ...props
+}: DropdownProps) => {
+  return (
+    <div className="dropdown">
+      <Menu>
+        <Menu.Button as={React.Fragment}>{trigger}</Menu.Button>
+        <Menu.Items
+          className={clsx(
+            'dropdown-menu',
+            color,
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </Menu.Items>
+      </Menu>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Dropdown';
+export type { DropdownProps } from './Dropdown';

src/components/DropdownItem/DropdownItem.tsx

@@ -0,0 +1,70 @@
+import { Menu } from '@headlessui/react';
+import clsx from 'clsx';
+import React, { ElementType, ReactNode, useMemo } from 'react';
+
+export interface DropdownItemProps<T> {
+  /**
+   * The color of the button, only works when the variant is `color` or `hover`
+   */
+  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  /**
+   * Button disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If we have a href, it's an anchor.
+   */
+  href?: string;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * As what the component should be rendered
+   */
+  as?: T;
+  /**
+   * Custom classes for the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export function Dropdown<T>({
+  href,
+  className,
+  as,
+  color,
+  disabled = false,
+  children,
+  ...props
+}: DropdownItemProps<T>) {
+  const Component = useMemo(() => (as ? as : (href ? 'a' : 'button')) as ElementType, [as, href]);
+
+  return (
+    <Menu.Item>
+      {({ active }) => (
+        <Component
+          type="button"
+          className={clsx(
+            'dropdown-item',
+            {
+              'active': active,
+            },
+            color,
+            className
+          )}
+          href={href}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </Component>
+      )}
+    </Menu.Item>
+  );
+};
+
+export default Dropdown;

src/components/DropdownItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DropdownItem';
+export type { DropdownItemProps } from './DropdownItem';

src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+
+import { Dialog } from '@headlessui/react';
+
+import clsx from 'clsx';
+
+export interface PlaceholderProps {
+  /**
+   * Custom classes for the placeholder
+   */
+  className?: string;
+  /**
+   * The width of the placeholder
+   */
+  width?: 0 | 1 | 2 | 3 | 4 | 5 | 25 | 50 | 75 | 100 | 'auto';
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Placeholder = ({
+  width,
+  className
+}: PlaceholderProps) => {
+  return (
+    <span
+      className={clsx(
+        'placeholder',
+        'me-1',
+        `w-${width}`,
+        className
+      )}
+    />
+  );
+};
+
+export default Placeholder;

src/components/Placeholder/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Placeholder';
+export type { PlaceholderProps } from './Placeholder';

src/components/Toolbar/Toolbar.tsx

@@ -7,6 +7,10 @@ export interface ToolbarProps {
    * Custom classes for the label
    */
   className?: string;
+  /**
+   * Custom classes for the label
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
   /**
    * Button contents.
    */
@@ -19,12 +23,16 @@ export interface ToolbarProps {
 export function Toolbar({
   children,
   className,
+  justify = 'start',
   ...props
 }: ToolbarProps) {
   return (
     <div
       className={clsx(
         'toolbar',
+        {
+          [`justify-content-${justify}`]: justify !== 'start'
+        },
         className
       )}
       role="toolbar"

src/components/index.ts

@@ -61,9 +61,18 @@ export type { DialogProps } from '@components/Dialog';
 export { default as DialogBody } from '@components/DialogBody';
 export type { DialogBodyProps } from '@components/DialogBody';
 
+export { default as DialogFooter } from '@components/DialogFooter';
+export type { DialogFooterProps } from '@components/DialogFooter';
+
 export { default as DialogHeader } from '@components/DialogHeader';
 export type { DialogHeaderProps } from '@components/DialogHeader';
 
+export { default as Dropdown } from '@components/Dropdown';
+export type { DropdownProps } from '@components/Dropdown';
+
+export { default as DropdownItem } from '@components/DropdownItem';
+export type { DropdownItemProps } from '@components/DropdownItem';
+
 export { default as InputAddon } from '@components/InputAddon';
 export type { InputAddonProps } from '@components/InputAddon';
 
@@ -139,6 +148,9 @@ export type { PivotPanelProps } from '@components/PivotPanel';
 export { default as PivotPanels } from '@components/PivotPanels';
 export type { PivotPanelsProps } from '@components/PivotPanels';
 
+export { default as Placeholder } from '@components/Placeholder';
+export type { PlaceholderProps } from '@components/Placeholder';
+
 export { default as Progress } from '@components/Progress';
 export type { ProgressProps } from '@components/Progress';
 

src/docs/App.tsx

@@ -14,6 +14,7 @@ import CardDemo from './pages/Components/CardDemo';
 import CheckboxDemo from './pages/Forms/CheckboxDemo';
 import ContainerDemo from './pages/Layout/ContainerDemo';
 import DialogDemo from './pages/Components/DialogDemo';
+import DropdownDemo from './pages/Components/DropdownDemo';
 import FormControlDemo from './pages/Forms/FormControlDemo';
 import GridDemo from './pages/Layout/GridDemo';
 import InputDemo from './pages/Forms/InputDemo';
@@ -27,6 +28,7 @@ import MenuDemo from './pages/Components/MenuDemo';
 import NavDemo from './pages/Components/NavDemo';
 import OffcanvasDemo from './pages/Components/OffcanvasDemo';
 import PivotDemo from './pages/Components/PivotDemo';
+import PlaceholderDemo from './pages/Components/PlaceholderDemo';
 import ProgressDemo from './pages/Components/ProgressDemo';
 import RadioDemo from './pages/Forms/RadioDemo';
 import RangeDemo from './pages/Forms/RangeDemo';
@@ -47,6 +49,7 @@ function App() {
         <Route path="/checkbox" element={<CheckboxDemo />} />
         <Route path="/container" element={<ContainerDemo />} />
         <Route path="/dialog" element={<DialogDemo />} />
+        <Route path="/dropdown" element={<DropdownDemo />} />
         <Route path="/formcontrol" element={<FormControlDemo />} />
         <Route path="/grid" element={<GridDemo />} />
         <Route path="/input" element={<InputDemo />} />
@@ -59,6 +62,7 @@ function App() {
         <Route path="/nav" element={<NavDemo />} />
         <Route path="/offcanvas" element={<OffcanvasDemo />} />
         <Route path="/pivot" element={<PivotDemo />} />
+        <Route path="/placeholder" element={<PlaceholderDemo />} />
         <Route path="/progress" element={<ProgressDemo />} />
         <Route path="/radio" element={<RadioDemo />} />
         <Route path="/range" element={<RangeDemo />} />

src/docs/components/Layout.tsx

@@ -45,16 +45,18 @@ export default function Layout({ children }) {
             <ListItem primary="Avatar" onClick={() => navigate('/avatar')} />
             <ListItem primary="Bottom Bar" onClick={() => navigate('/bottombar')} />
             <ListItem primary="Breadcrumb" onClick={() => navigate('/breadcrumb')} />
-            <ListItem primary="Button Group" onClick={() => navigate('/buttongroup')} />
             <ListItem primary="Button" onClick={() => navigate('/button')} />
+            <ListItem primary="Button Group" onClick={() => navigate('/buttongroup')} />
             <ListItem primary="Card" onClick={() => navigate('/card')} />
             <ListItem primary="Dialog" onClick={() => navigate('/dialog')} />
+            <ListItem primary="Dropdown" onClick={() => navigate('/dropdown')} />
             <ListItem primary="Label" onClick={() => navigate('/label')} />
             <ListItem primary="List" onClick={() => navigate('/list')} />
             <ListItem primary="Menu" onClick={() => navigate('/menu')} />
             <ListItem primary="Nav" onClick={() => navigate('/nav')} />
             <ListItem primary="Offcanvas" onClick={() => navigate('/offcanvas')} />
             <ListItem primary="Pivot" onClick={() => navigate('/pivot')} />
+            <ListItem primary="Placeholder" onClick={() => navigate('/placeholder')} />
             <ListItem primary="Progress" onClick={() => navigate('/progress')} />
             <ListItem primary="Toolbar" onClick={() => navigate('/toolbar')} />
           </List>