jero-design-system v0.1.3

jero-design-system

A library to design common components built in React & TypeScript

Overview

• You can use this library when designing common components, especially for layout.
• Just Install, Import and Then Use it!

Version

Latest version: 0.1.3 (updated in 2023.09.26s)

• Major package version
  • "react": "^18.2.0"
  • "react-dom": "^18.2.0"
  • "@emotion/react": "^11.11.1"
  • "@emotion/styled": "^11.11.0"
  • "typescript": "^5.2.2"

How to Use

Installation

npm i jero-design-system

Import Package

• If you wanna use all components, import all components from this package.

import { Button, Container, Grid, Flex } from 'jero-design-system';

• If you wanna use specific components, import them from this package.

import { Button, Flex } from 'jero-design-system';

Package Structure

📦jero-design-system
 ┣ 📂dist
 ┃ ┣ 📂Button
 ┃ ┃ ┣ 📜index.d.ts
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂Container
 ┃ ┃ ┣ 📜index.d.ts
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂Flex
 ┃ ┃ ┣ 📜index.d.ts
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂Grid
 ┃ ┃ ┣ 📜index.d.ts
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂SplitPane
 ┃ ┃ ┣ 📜index.d.ts
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📜index.d.ts
 ┃ ┗ 📜index.js
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜tsconfig.node.json

Component & Props

Container

import { Container } from 'jero-design-system';

function App() {
  return (
    <div className='App'>
      <h1>Container</h1>
      <Container
        maxWidth='900px'
        minWidth='300px'
        height='30vh'
        backgroundColor='#E7E7E7'
      >
        This is Container
        <p>Hello Nice to Meet U</p>
        <h3>How are you?</h3>
        <h4>I'm fine, thanks!</h4>
      </Container>
    </div>
  );
}

Grid

import { Grid } from 'jero-design-system';

function App() {
  return (
    <div className='App'>
      <h1>Grid</h1>
      <Grid rows={2} columns={2} gap='5px' backgroundColor='#E7E7E7'>
        <div className='item'>Item 1</div>
        <div className='item'>Item 2</div>
        <div className='item'>Item 3</div>
        <div className='item'>Item 4</div>
      </Grid>
    </div>
  );
}

Flex

import { Flex } from 'jero-design-system';

function App() {
  return (
    <div className='App'>
      <h1>Flex</h1>
      <Flex direction='column' justify='space-between' align='center' gap='5px'>
        <div className='item'>Item 1</div>
        <div className='item'>Item 2</div>
        <div className='item'>Item 3</div>
        <div className='item'>Item 4</div>
      </Flex>
    </div>
  );
}

SplitPane

import { SplitPane } from 'jero-design-system';

function App() {
  return (
    <div className='App'>
      <h1>SplitPane</h1>
      <SplitPane width='1000px' defaultSize='50%' minSize='10%' maxSize='90%' firstPane={<FirstPane/>} secondPane={<SecondPane/>}/>
    </div>
  );
}

function FirstPane() {
  return (
    <div
        style={{
          height: '100vh',
          padding: '20px',
          backgroundColor: 'skyblue',
          color: 'white',
        }}
      >
        First Pane
    </div>
  );
}

function SecondPane() {
  return (
    <div
        style={{
          height: '100vh',
          padding: '20px',
          backgroundColor: 'blue',
          color: 'white',
        }}
      >
        First Pane
    </div>
  );
}

Button

import { Button, Flex } from 'jero-design-system';

function App() {
  return (
    <div className='App'>
      <h1>Button</h1>
      <Flex direction='row' gap='10px' justify='start' align='start'>
        <Button label='Primary' primary />
        <Button label='Secondary' />
        <Button label='Small' size='sm'></Button>
        <Button label='Medium' size='md'></Button>
        <Button label='Large' size='lg'></Button>
      </Flex>
    </div>
  );
}

Source

• Github Code
• npm.js

Developer

• jero-kang