DOCSEARCHbyAlgolia
Submit Docs

DD360 Design System Library

website·Indexed 32 days ago

https://bui.dd360.mx/

A React-based design system library providing a comprehensive set of UI components, including form controls (AutoComplete, InputCurrency, Select), layout utilities (Flex, Row, PageTemplate), navigation elements, and various UI components like DateTimePicker, Skeleton, and Progress bars.

Tokens
38K
Snippets
280
Records
295
Agent score
54%

What's inside DD360

  1. Use the InputCurrency component for monetary values

    The InputCurrency component is a specialized text input designed for entering monetary values into forms. It supports custom prefixes, decimal limits, and scaling to ensure consistent currency formatting.
    import { InputCurrency } from 'dd360-ds';

// Basic usage with a default value
<InputCurrency defaultValue='0.00' />

  2. Implement a navigation sidebar using the SideBar component

    The SideBar component provides a hierarchical navigation panel consisting of a header (name and subtitle), a list of navigation items (with optional sub-items), and an optional danger zone for high-risk actions.
    import { SideBar } from 'dd360-ds';
// OR
import SideBar from 'dd360-ds/SideBar';

  3. Render circular elements with the Circle component

    The Circle component from dd360-ds renders a circular div element. It can be used to display text, icons, profile pictures, or other React components as children.
    import { Circle } from 'dd360-ds';

const App = () => (
  <Circle>Hey!</Circle>
);

  4. Implement a page header using TopPage

    The TopPage component organizes key elements at the top of a page, including the page title, breadcrumbs, last updated date, action buttons, and navigation tabs. It is used to create a clean and accessible user interface for page headers.
    import { TopPage } from 'dd360-ds';

const MyPage = () => (
  <TopPage title={{ label: 'Page Title' }} />
);

  5. Use the Card component for content containment

    The Card component serves as a container for displaying information and content within a user interface. It supports customization of dimensions, rounding, and padding via props.
    import { Card } from 'dd360-ds';
// OR
import Card from 'dd360-ds/Card';

  6. Implement a basic Modal in React

    The Modal component from dd360-ds creates a custom dialog overlay to prompt user actions or display critical data. It requires an active boolean to control visibility and a setCloseModal callback function to handle the closing logic.
    import { Modal } from 'dd360-ds'

<Modal 
  active={true} 
  setCloseModal={() => alert('function to close the modal')}
>
    This is an example modal
</Modal>

  7. Render components outside the main hierarchy using Portal

    The Portal component allows you to render children into a dedicated DOM node separate from the main component hierarchy. This is primarily used for UI elements that need to exist outside their parent's DOM structure, such as modals, tooltips, or overlays.
    import React, { useEffect, useState } from 'react'
import { Button, Text } from 'dd360-ds'
import { Portal } from 'dd360-ds/Portal'

const CustomComponent = () => {
    const [isactive, setIsactive] = useState(false)
    const [domLoaded, setDomLoaded] = useState(false)

    useEffect(() => {
        setDomLoaded(true)
    }, [])

    return (
        <div className='relative flex items-center gap-4'>
            <Text size='base' bold>Portal component</Text>
            <Button onClick={()=> setIsactive((isactive) => !isactive)}>Toggle Portal</Button>
            {domLoaded && isactive && (
                <Portal>
                    <div className='fixed left-1/2 top-1/2 w-40 h-24 flex justify-center items-center border rounded-lg bg-white'>
                        <Text>Hey!!! I am a Portal</Text>
                    </div>
                </Portal>
            )}
        </div>
    )
}

export default CustomComponent

  8. Install and import the Button component

    The Button component from the dd360-ds library can be imported using several different paths depending on your project's module resolution preferences.
    // Option 1: Named import from main package
import { Button } from 'dd360-ds';

// Option 2: Named import from Buttons directory
import { Button } from 'dd360-ds/Buttons';

// Option 3: Default import from Button file
import Button from 'dd360-ds/Button';

  9. Install and import the Spinner component

    The Spinner component is used to display real-time progress of a task or process. To reduce the application bundle size, it is recommended to use the direct path import.
    // Recommended: Direct import to reduce bundle size
import Spinner from 'dd360-ds/Spinner'

// Alternative: Named import
import { Spinner } from 'dd360-ds'

  10. Import and use the Callout component

    The Callout component is used to display prominent information, such as errors, warnings, or success messages, to draw the user's attention. The title prop is the only required property.
    // Recommended import to reduce bundle size
import Callout from 'dd360-ds/Callout';

// Alternative import
import { Callout } from 'dd360-ds';

// Basic usage
<Callout 
  title="All systems are operational" 
  description="All systems are operational" 
  icon={CheckCircleIcon} 
/>

  11. Implement custom icons and per-item overrides

    You can override List props on a per-item basis by adding props directly to List.Item. For complex custom icons, use the List.Icon sub-component inside a List.Item before the content.
    import { List, Text } from 'dd360-ds';
import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon';

<List iconColor='#46A9CB' gapItem={10}>
    {/* Per-item prop override */}
    <List.Item iconColor='#E765C4'>Overridden item</List.Item>

    {/* Custom icon using List.Icon */}
    <List.Item>
      <List.Icon>
        <DynamicHeroIcon icon="PhoneIcon" className="w-5 h-5" />
      </List.Icon>
      <Text textMuted500>555-825-14-55</Text>
    </List.Item>
</List>

  12. Implement a FilterSelect dropdown menu

    The FilterSelect component from dd360-ds creates an interactive dropdown menu allowing users to select an option from a predefined list. It requires a listItems object to define the options and an onApply callback function to handle the selection change.
    import { FilterSelect } from 'dd360-ds'

const handleChange = (value) => {
  console.log('Selected:', value);
};

<FilterSelect
  listItems={{
    A: { label: 'Option A' },
    B: { label: 'Option B' }
  }}
  onApply={handleChange}
/>