ucworks-client-desktop-common v1.0.81

Project is maintained (v1.0.38)

this project contains components and custom hooks that is used by ucworks desktop team.

Table of contents

• Installation
• components
• hooks

Installation

Using npm

npm install --save ucworks-client-desktop-common

Using yarn

yarn add ucworks-client-desktop-common

write these codes into your project.

// for providing palettes in whole project.
// index.tsx
/** @jsx jsx */
import { jsx } from '@emotion/react';
import { UcThemeProvider } from 'ucworks-client-desktop-common';
import { render } from 'react-dom';
import App from './routes/app.route';
import 'ucworks-client-desktop-common/lib/index.css';

render(
  <UcThemeProvider>
    <App />
  </UcThemeProvider>,
  document.getElementById('root')
);

// theme.d.ts
// for intellisense 
import { UcTheme } from "ucworks-client-desktop-common";

declare module "@emotion/react" {
  interface Theme extends UcTheme {}
}

components

<Button/>

PropTypes

<Checkbox/>

PropTypes

usages

import { Checkbox, Button } from "ucworks-client-desktop-common";

const App = () => {
  const {handleSubmit, register} = useForm();
  return (
    <form onSubmit={handleSubmit((data) => {console.log(data)})}>
      <Checkbox label="checkbox" {...register("checkbox")}/>
      <Button type="submit">submit</Button>
    </form>);
}

<Radio/>

PropTypes

usages

import { Radio, Button } from "ucworks-client-desktop-common";

const App = () => {
  const {handleSubmit, register} = useForm();
  return (
    <form onSubmit={handleSubmit((data) => {console.log(data)})}>
      <Radio label="딸기" {...register('food')} value="strawberry" />
      <Radio label="바나나" {...register('food')} value="banana" />
      <Button type="submit">submit</Button>
    </form>);
}

<Input/>

PropTypes

usages

import { Input, Button } from "ucworks-client-desktop-common";

const App = () => {
  const {handleSubmit, register, formState} = useForm({
    resolver: yupResolver(
      yup.object({
        input: yup.string().required("fill the input!"),
      })
    ),
  });
  return (
    <form onSubmit={handleSubmit((data) => {console.log(data)})}>
      <Input type="text" {...register("input")} errors={formState.errors}/>
      <Button type="submit">submit</Button>
    </form>);
}

<Table/>

PropTypes

usages

import { Table } from "ucworks-client-desktop-common";

const App = () => {
  const columns = [
    {
      Header: "foo",
      accessor: "foo",
      minWidth: 100,
    },
    { Header: "bar", accessor: "bar", minWidth: 100 },
  ];

  const data = [
    { foo: "foo1", bar: "bar1" },
    { foo: "foo2", bar: "bar2" },
  ];

  return (
    <Table
      selectable
      columns={columns}
      data={data}
      onSelect={(row) => {
        console.log(row);
      }}
    />
  )
}

hooks

useSelect()

PropsTypes

useTab()

return TabComponent and current tab index

PropsTypes

Usages

import { useTab } from "ucworks-client-desktop-common";

const App = () => {
  const [current, Tab] = useTab({
    rows: ["foo", "bar"],
    initialRow: 1,
  });
  return (
    <>
      <Tab />
      {current === 0 ? <span>foo</span> : <span>bar</span>}
    </>
  );
};

useModal()

return Portal, toggle functions and boolean that represents if the modal is visible or not.

PropsTypes

Usages

import { useModal } from "ucworks-client-desktop-common";

const App = () => {
  const { openModal, closeModal, isOpen, Modal } = useModal();

  return (
    <>
      <button
        type="button"
        onClick={(e) => {
          openModal(e);
        }}
      >
        clickme!
      </button>
      {isOpen && (
        <Modal>
          <span>modal</span>
        </Modal>
      )}
    </>
  );
};