Board-lukuku NPM

Board lukuku

A simple library for team lukuku
Example Repo Github
Example Link

Requirement

"react": "^17.0.2",
"react-dom": "^17.0.2",

Installation

you need to install draft-js and react-draft-wysiwyg along with it

npm i board-lukuku draft-js react-draft-wysiwyg

Components

List of components we have

<RichEditor />
- It lets you have a Rich text editor
- props a function
  - ```
    const handleEditorContent = (content: any) => {
        console.log("content", content);
    };
```
- returns a object of block that you've written
<TableBoard /> - table component contain table style and pagination
<Search /> - A Search form for the table
<Goto /> - A Search input number to jump page
<Details /> - for your product single page
<SayHello />
- It's just a test function
- props takes as name
- returns a text Hey {name}, say hello to TypeScript.

Import

Import css on the top of the component

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

Use dynamic method to import components

// component hello
const SayHello = dynamic(
  () => import("board-lukuku").then((mod) => mod.SayHello),
  {
      ssr: false,
      loading: () => <p>...</p>,
  }
);

// component RichEditor

const RichEditor = dynamic(
  () => import("board-lukuku").then((mod) => mod.RichEditor),
  {
      ssr: false,
      loading: () => <p>...</p>,
  }
);

// component TableBoard

const TableBoard = dynamic( () => import("board-lukuku").then((mod) => mod.TableBoard), { ssr: false, loading: () => ..., } );

// component Search const Search = dynamic( () => import("board-lukuku").then((mod) => mod.Search), { ssr: false, loading: () => ..., } );

// component Goto const Goto = dynamic( () => import("board-lukuku").then((mod) => mod.Goto), { ssr: false, loading: () => ..., } );

// component Details const Details = dynamic( () => import("board-lukuku").then((mod) => mod.Details), { ssr: false, loading: () => ..., } );

// component CommentsWrapper const CommentsWrapper = dynamic( () => import("board-lukuku").then((mod) => mod.CommentsWrapper), { ssr: false, loading: () => ..., } );

## Usages

const handleEditorContent = (content: any) => { console.log("content", content); };

<SayHello name="kjkhkj" />
<RichEditor handleContent={handleEditorContent} />
<Search
  placeholder="Search"
  buttonText={<span>Search</span>}
  onFinish
/>
 <Goto
      data={sampleTablePropsData}
      onPageChange={onPageChange}
      pageSize={10}
    />

  <Details pid={pid} />

  <CommentsWrapper datas={datas} />

## Examples

### example of using RichTextEditor

import styled from "styled-components"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import Head from "next/head"; import React, { useState, useCallback } from "react"; import dynamic from "next/dynamic"; const RichEditor = dynamic( () => import("board-lukuku").then((mod) => mod.RichEditor), { ssr: false, loading: () => ..., } );

export default function () { const data, setData = useState({ name: "", password: "", subject: "", body: "", }); const { name, password, subject } = data; // internal state const handleChange = ({ target: { value, name, files } }) => { setData({ ...data, name: value }); };

// draft const handleEditorContent = (content: any) => { console.log("content", content); setData({ ...data, body: content, articleUpdated: true }); };

const Submit = (e) => { e.preventDefault(); console.log("data", data); };

return ( <>

  <Head>
    <title>Add Post</title>
  </Head>
  <main>
    <Container>
      <Form onSubmit={Submit}>
        {/* top part */}
        <div>
          <Flex>
            <Input
              placeholder="닉네임"
              name="name"
              type="text"
              value={name}
              onChange={handleChange}
            />
            <Input
              placeholder="비밀번호"
              name="password"
              type="password"
              value={password}
              onChange={handleChange}
            />
          </Flex>
          <Input
            placeholder="제목을 입력해 주세요."
            name="subject"
            type="text"
            width="100%"
            value={subject}
            onChange={handleChange}
          />
          <div style={{ margin: "2em 0", opacity: "0.6" }}>
            <small>
              쉬운 비밀번호를 입력하면 타인의 수정, 삭제가 쉽습니다.
            </small>
            <br />
            <small>
              음란물, 차별, 비하, 혐오 및 초상권, 저작권 침해 게시물은 민,
              형사상의 책임을 질 수 있습니다.
            </small>
          </div>
        </div>

        {/* draft part */}
        <div style={{height: "400px"}}>

          <RichEditor handleContent={handleEditorContent} />
        </div>
        <Button type="submit" style={{ marginTop: "2em" }}>
          등록
        </Button>
      </Form>
    </Container>
  </main>
</>

); }

export const Container = styled.divmax-width: 1320px; width: 94%; margin: auto; height: 100%;;

export const Button = styled.buttonbackground: #3b4890; border-color: #29367c; text-shadow: 0px -1px #1d2761; color: #fff; height: 40px; border-radius: 2px; font-size: 14px; padding: 2px 24px;;

### example of using Table

import { sampleTablePropsData } from "utils/sample-data"; import { Container } from "styled/Container"; import Link from "next/link"; import dynamic from "next/dynamic";

const TableBoard = dynamic( () => import("board-lukuku").then((mod) => mod.TableBoard), { ssr: false, loading: () => ..., } ); import { useRouter } from "next/router";

const IndexPage = () => { const columns = [ { title: "ID", dataIndex: "id", value: (item: any) => {item.id}, }, { title: "Title", dataIndex: "title", value: (item: any) => (

    <Link href={"product/" + item.id}>
      <a>{item.title}</a>
    </Link>
  ),
},
{
  title: "Writer",
  dataIndex: "writer",
  value: (item: any) => <span>{item.writer}</span>,
},
{
  title: "Viewcount",
  dataIndex: "viewcount",
  value: (item: any) => <span>{item.viewcount}</span>,
},

];

const router = useRouter(); const page = router.query.page ? +router.query.page : undefined;

const settings = { data: sampleTablePropsData, //data as json columns: columns, // way to use data pageSize: 10, // default pagesize is 10 activePage: 1, // default is 1 prev: {"<"}, // default is <, next: {">"}, // default is >, showCode: true, // default is false page: page, onPageChange: (n) => { if (n) { router.push(/?page=${n}, undefined, { shallow: true }); } }, // required };

return ( <> {/* props

  */}
  {/* for now its a only wat to connect pagination and table */}
  <Container>
    <p>table</p>
    <TableBoard {...settings} />
  </Container>
</>

); };

export default IndexPage;