The starting point of the Design System was Applaudo’s branding and core values, with every teammate in mind and covering products for the development community and customers alike.

:sparkles: Features

• :recycle: Drop in replacement for ant design.
• :rainbow: Function based components.
• :package: A set of React components.
• :nut_and_bolt: Written in TypeScript.
• :art: Applaudo Studios' theme.

:package: Install

For stable versions

npm i @applaudo/react-clapp-ui

yarn add @applaudo/react-clapp-ui

For the latest beta version

npm i @applaudo/react-clapp-ui@beta

yarn add @applaudo/react-clapp-ui@beta

For the absolute latest unstable changes

npm i @applaudo/react-clapp-ui@dev

:hammer: Usage

Wrap the root component of your app in the layout to provide some necessary context and styles.

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Layout } from '@applaudo/react-clapp-ui';

function App() {
  return (
    <Layout>
      <div>
        <Button mode="primary">
          Click me!
        </Button>
      </div>
    </Layout>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

TypeScript

react-clapp-ui is written in TypeScript.

:link: Links

Clapp Styleguide

Documentation

:scroll: Changelog

Version 1.0.8 (April 11, 2023)

• Improvements:
  • Button: fix the display property when the button is a link
  • Dropdown: fix component dimensions
  • Layout: fix Content layer dimensions
• Update component docs

Version 1.0.7 (April 10, 2023)

• Improvements:
  • Button: support to use the button as a link
  • Menu: support to add a wrapper or link around a menu item
  • Upload: support to customize the text literals
• Update component docs

Version 1.0.6 (January 17, 2023)

• Fixes:
  • Upload: the button to remove the file is shown as expected
  • DataTable: export Column component + unify dataSource properties

Version 1.0.5 (January 2, 2023)

• Fixes:
  • Pagination: fix overlap in PageJumper

Version 1.0.4 (December 29, 2022)

• Improvements:
  • DataTable: support for config object in pagination prop

Version 1.0.3 (December 12, 2022)

• Update brand docs

Version 1.0.2 (December 8, 2022)

• Fixes:
  • Fix styles in RangePicker component

Version 1.0.1 (December 7, 2022)

• Fixes:
  • Export Header, Content, Footer & RangePicker components
  • Mark Sider bottomElement prop as optional

Version 1.0.0 (December 6, 2022)

• Long Term Support version

Version 0.3.7 (Archived)

• Adding new components:
  • Range Picker
  • Layout Grid
  • Sider
  • Menu

Version 0.3.6 (October 14, 2022)

• Adding new components:
  • Card

Version 0.3.5 (September 23, 2022)

• Adding new components:
  • Radio Group
• Improvements:
  • More form items and validations
• Fixes:
  • Button: update font styles and css states
  • Modal: show an empty footer if no handlers are provided

Version 0.3.4 (August 31, 2022)

• Adding new components:
  • Select
  • Sorter
  • Comment
• Improvements:
  • More form items
• Fixes:
  • Searchbar: container padding and font styles

Version 0.3.3 (August 10, 2022)

• Fixes:
  • Fix some broken css imports in Upload & Skeleton components

Version 0.3.2 (August 9, 2022)

• Adding new components:
  • Slider
• Improvements:
  • Support for asynchronous form validations

Version 0.3.1 (Archived)

• Adding new components:
  • Skeleton
  • Searchbar
  • Tags selector
  • Pop Confirm (Basic & Placement V1)
• Improvements:
  • More form items and validations
• Fixes:
  • TextArea: container height
  • TextInput: container height

Version 0.3.0 (Archived)

• Adding new components:
  • InputNumber
  • Modal
  • Forms
  • Form items
• remarks: Form validation only works with sync functions

Version 0.2.5 (Archived)

• Adding new components:
  • Carousel
  • DataTable
  • Upload Drag and drop
  • Upload avatar

Version 0.2.0 (April 18, 2022)

• Now all lib Icons are exported for reuse in the target project
• Adding new components:
  • FilterGroup
  • Pagination
  • Upload button
• Improvements:
  • Tags:
    • custom class and styles can be now applied
  • Update general documentation
• Fixes:
  • Dropdown:
    • fix bug where updating the selected value did not update the UI
    • correct styles to better match other input in Filter group
    • styles and inherited properties from div are now applied
  • TextInput
    • Fix suffix prop typing, it was intersecting string coming from native HTML suffix
    • updating styles to match new Clapp specs

Special thanks to Danilo Rivera for his contributions as an early adopter

Version 0.1.6 (March 29, 2022)

• Fixes
  • Storybook dependency leak removed, some projects having issues with babel deps

Version 0.1.5 (March 21, 2022)

• CSS is now automatically import by every component, no need to add the global stylesheet
• Font assets updated from Avenir Next Pro LT to Avenir Next and are now ship with the NPM package, they are no longer download from a third party server.
• Adding new components:
  • Notification
  • Tooltip
  • Divider
  • Image
• DropDown: rewrite implementation with rc-dropdown as the basis, API is the same
• :boom: Changes
  • :wastebasket: Deprecating theme attribute in Clapp context, this will be remove in version 0.2.0

Version 0.1.0 (March 3, 2022)

• Adding a default CJS module alongside the ESM for non ESM tools
• Exporting various public types that were missing in previous versions
• Adding data display component
  • Avatar
  • Image (alpha stage)
  • Tags
• Adding navigation components
  • Breadcrumb and BreadcrumbItem
  • Tabs
• Fixes:
  • Datepicker:
    • displays the calendar dropdown position correctly, so it does not jump to the beginning of the container.
  • DropDown:
    • Positions the menu relative to itself so if the parent container scrolls, the DropDown also scrolls with the parent instead of getting stuck in the static position
    • Correcting the type for the onChange callback function not to include the Div event type

Version 0.0.8 (February 8, 2022)

• Improving documentation for components
• Adding new components:
  • Datepicker
  • DropDown
  • Link

Version 0.0.4 (January 25, 2022)

• Adding new components:
  • Button
  • Checkbox
  • Heading
  • Label
  • Radio Button
  • Switch
  • Text Area
  • Text Input