@lunit/opt-components

v1.6.0

Component library for annotation / opt apps

0/weekUpdated 1 months agoMITUnpacked: 100.6 KB

Published by Seoyeon Lee

npm install @lunit/opt-components

Repository Homepage npm

Dist Tags

alpha1.5.0-alpha.3

canary5.0.0-alpha.4

latest1.6.0

Use

Config

``tsx import React from 'react'; import { GlobalStyle } from '@lunit/opt-components';

function App() { return (


      
      {/ Contents /}

)
}

or

`tsx import React from 'react'; import { globalStyle } from '@lunit/opt-components'; import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle
${globalStyle}

html {
font-size: 14px;
box-sizing: border-box;
}
;

function App() { return (


      
      {/ Contents /}

)
}


Config Storybook

`tsx import { withStorybookGlobalStyle } from '@lunit/opt-components'; import { storiesOf } from '@storybook/react'; import React from 'react';

storiesOf('Theme', module) .addDecorator(withStorybookGlobalStyle) .add('Test', () =>

TODO

);


Samples
$3

`tsx import { withInsightViewerStorybookGlobalStyle } from '@lunit/insight-viewer'; import { Button, ButtonLayout, withOPTComponentsStorybookGlobalStyle } from '@lunit/opt-components'; import { AdjustIcon, MagnifyIcon, PanIcon, PenIcon } from '@lunit/opt-control-icons'; import { storiesOf } from '@storybook/react'; import React, { Fragment } from 'react'; import styled from 'styled-components';

const directions = ['vertical', 'horizontal'] as const;

storiesOf('opt-components', module) .addDecorator(withOPTComponentsStorybookGlobalStyle) .addDecorator(withInsightViewerStorybookGlobalStyle) .add('Button', () => ( {directions.map(direction => (


        
      
      {!modalOpen &&


      ))}
      
        Hello World? Hello World?
      
    
  ));
function LineText({
  children,
  width,
  height,
  stroke,
  fill,
  ...props
}: { children: ReactNode } & SVGProps) {
  return (
    
              {...props}
        width={width}
        height={height}
        stroke={stroke}
        strokeWidth={5}
        strokeLinejoin="round"
        strokeLinecap="round"
      >
        {children}
      
      
        {children}
      
    
  );
}

const Container = styled.div
display: flex;
flex-wrap: wrap;

> div {
margin-right: 10px;
margin-bottom: 10px;
background-color: #040a17;
padding: 10px 0;
display: flex;
flex-flow: column;
}
;

`$3`

`tsx import { withInsightViewerStorybookGlobalStyle } from '@lunit/insight-viewer'; import { Slider, withOPTComponentsStorybookGlobalStyle } from '@lunit/opt-components'; import { storiesOf } from '@storybook/react'; import React from 'react'; import styled from 'styled-components';

storiesOf('opt-components', module) .addDecorator(withOPTComponentsStorybookGlobalStyle) .addDecorator(withInsightViewerStorybookGlobalStyle) .add('Slider', () => (

));

export const BlueSlider = styled(Slider)
--slider-rail-color: rgba(86, 81, 136, 0.4);
--slider-thumb-color: #6b6b9b;
--slider-track-color: rgba(86, 81, 136, 0.6);
--slider-value-label-color: #ffffff;
;

`$3`

`tsx import { withInsightViewerStorybookGlobalStyle } from '@lunit/insight-viewer'; import { ErrorSnackbarContent, InfoSnackbarContent, NormalSnackbarContent, SnackbarContent, WarningSnackbarContent, withOPTComponentsStorybookGlobalStyle, } from '@lunit/opt-components'; import { Button, IconButton } from '@material-ui/core'; import { Close } from '@material-ui/icons'; import { Snackbar, SnackbarProvider, useSnackbar } from '@ssen/snackbar'; import { storiesOf } from '@storybook/react'; import React from 'react'; import styled from 'styled-components';

let count: number = 0;

function Basic() { const { addSnackbar, snackbarContainer } = useSnackbar();

return ( onClick={() => { count++;

addSnackbar( message={${count} HELLO SNACKBAR!} action={[ , , ]} /> , ); }} > Default

onClick={() => { count++;

addSnackbar( message={${count} HELLO SNACKBAR!} action={[ , , ]} /> , ); }} > Normal

onClick={() => { count++;

addSnackbar( message={${count} HELLO SNACKBAR!} action={[ , , ]} /> , ); }} > Info

onClick={() => { count++;

addSnackbar( message={${count} HELLO SNACKBAR!} action={[ , , ]} /> , ); }} > Warning

onClick={() => { count++;

addSnackbar( message={${count} HELLO SNACKBAR!} action={[ , , ]} /> , ); }} > Error

); }

storiesOf('opt-components', module) .addDecorator(withOPTComponentsStorybookGlobalStyle) .addDecorator(withInsightViewerStorybookGlobalStyle) .addDecorator(storyFn => {storyFn()}) .add('', () => );

const Container = styled.div
position: relative;
width: 700px;
height: 400px;
border: 1px solid white;
;

const SnackbarContainer = styled.div
position: absolute;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column-reverse;
justify-content: right;
align-items: flex-end;

> * {
margin-top: 10px;
}
;

`$3`

`tsx import { withInsightViewerStorybookGlobalStyle } from '@lunit/insight-viewer'; import { Tooltip, withOPTComponentsStorybookGlobalStyle } from '@lunit/opt-components'; import { Error } from '@material-ui/icons'; import { storiesOf } from '@storybook/react'; import React from 'react'; import styled from 'styled-components';

storiesOf('opt-components', module) .addDecorator(withOPTComponentsStorybookGlobalStyle) .addDecorator(withInsightViewerStorybookGlobalStyle) .add('Tooltip', () => { const title = (


        Hello

        World!!! World!!!

const WarningTooltip = styled(Tooltip)
--tooltip-background-color: red;
--tooltip-color: yellow;
;

const Grid = styled.div
position: fixed;

display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
;

Use

Config

``tsx import React from 'react'; import { GlobalStyle } from '@lunit/opt-components';

function App() { return (


      
      {/ Contents /}

)
}

or

`tsx import React from 'react'; import { globalStyle } from '@lunit/opt-components'; import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle
${globalStyle}

html {
font-size: 14px;
box-sizing: border-box;
}
;

function App() { return (


      
      {/ Contents /}

)
}


Config Storybook

`tsx import { withStorybookGlobalStyle } from '@lunit/opt-components'; import { storiesOf } from '@storybook/react'; import React from 'react';

storiesOf('Theme', module) .addDecorator(withStorybookGlobalStyle) .add('Test', () =>

TODO

);


Samples
$3

const directions = ['vertical', 'horizontal'] as const;

storiesOf('opt-components', module) .addDecorator(withOPTComponentsStorybookGlobalStyle) .addDecorator(withInsightViewerStorybookGlobalStyle) .add('Button', () => ( {directions.map(direction => (