@zohodesk/base

#UNIFIED COMPONENTS LIBRARY

‌Single common light weight centralized library with required components.

Every application developer can use the components from the library by importing it. (Re-use. Modify / extend)

If the Application developer needs the component in different presentation they can extend the components and write their own presentation part. Keeping the functional part as common.

We offerring ‌Presentation part and Functional part with extend and reuseble

#How to install our package

npm install @zohodesk/base

#How to import our components

import Avatar from '@zohodesk/base/es/Avatar/Avatar';

#How to import our components

import './style.css';
import Button from '@zohodesk/base/es/Button/Button';
import { ThemeProvider, getPerfectMode } from '@zohodesk/theme';

import {
  defaultTheme,
  autoSystemMode,
  defaultBaseTextSize,
  defaultDirection,
  rtlDirection,
  baseUnitLimit,
} from '@zohodesk/theme-defaults/es/constants/themeDefaults';
import getDefaultTheme from '@zohodesk/theme-defaults/es/defaultTheme';
import getTheme from '@zohodesk/theme-defaults/es/themesMap';

export default function App() {
  let docsConfig = {};
  let [state, setState] = useState({
    mode: getPerfectMode(docsConfig.appMode || autoSystemMode),
    color: docsConfig.themeName || defaultTheme,
    direction: docsConfig.isRTL ? rtlDirection : defaultDirection,
    baseTextSize: docsConfig.fontSizePx || defaultBaseTextSize,
    baseUnitLimit: docsConfig.baseUnitLimit || baseUnitLimit,
  });
  let { mode, color, direction } = state;

  let configuration = [
    ...getDefaultTheme(state.mode, state.baseTextSize, state.baseUnitLimit),
    ...getTheme(state.mode, state.color),
  ];

  let componentProps = {};

  return (
    <div className="edit">
      <ThemeProvider
        configuration={configuration}
        componentProps={componentProps}
        mode={mode}
        color={color}
      >
        <Button>UCL </Button>
      </ThemeProvider>
    </div>
  );
}

#We plan to offer below components (track components status here)

-button (completed)
-switch (completed)
-textarea (completed)
-textbox (completed)

-layout (ongoing)
-avatar (ongoing)
-link (ongoing)
-tag (ongoing)
-text (ongoing)
-list-item
-group
-pagination
-notification-badge
-dropdown
-breadcrumbs
-radio
-checkbox
-upload-button
-breadcrumbs
-stencil
-tree-viewer
-card
-popper
-stencil
-dialog
-popup
-accordion
-group
-breadcrumbs
-card
-freeze-layer
-tab
-tree-viewer
-modal
-tooltip
-select
-multiselect
-date-time
-focus-scope
-accessibility-control

example = https://stackblitz.com/edit/react-tpwqkw?file=src%2FApp.js