Component library for annotation / opt apps
npm install @lunit/opt-components``tsx
import React from 'react';
import { GlobalStyle } from '@lunit/opt-components';
function App() {
return (
or
`tsx
import React from 'react';
import { globalStyle } from '@lunit/opt-components';
import { createGlobalStyle } from 'styled-components';const GlobalStyle = createGlobalStyle
html {
font-size: 14px;
box-sizing: border-box;
};
function App() {
return (
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 => (
} />
} selected />
} />
} disabled />
} />
} selected />
} />
} disabled />
} />
} selected />
} />
} disabled />
))}
));
const Container = styled.div
> div {
margin-right: 10px;
margin-bottom: 10px;
display: flex;
flex-flow: column;
width: 200px;
padding: 10px;
background-color: #1e2d47;
};
const BlueButtonDiv = styled.div
--button-background-color: #a892ff;
--button-label-color: rgba(255, 255, 255, 0.8);
--button-background-color-hover: #907ae5;
--button-label-color-hover: rgba(255, 255, 255, 1);
--button-background-color-selected: #7763bf;
--button-label-color-selected: rgba(255, 255, 255, 1);
--button-background-color-disabled: #8b75ca;
--button-label-color-disabled: rgba(255, 255, 255, 0.2);;
`
`tsx
import { withInsightViewerStorybookGlobalStyle } from '@lunit/insight-viewer';
import { DialogPaper, Button, withOPTComponentsStorybookGlobalStyle } from '@lunit/opt-components';
import React, { useState } from 'react';
import { Modal } from '@material-ui/core';
import styled from 'styled-components';
export default {
title: 'opt-components',
component: DialogPaper,
decorators: [withOPTComponentsStorybookGlobalStyle, withInsightViewerStorybookGlobalStyle],
};
export const DialogPaperSample = () => {
const [modalOpen, setModalOpen] = useState
return ( Hello World
<>
count++;
addSnackbar(
}
action={[
UNDO
]}
/>
);
}}
>
Normal
count++;
addSnackbar(
}
action={[
UNDO
]}
/>
);
}}
>
Info
count++;
addSnackbar(
}
action={[
UNDO
]}
/>
);
}}
>
Warning
count++;
addSnackbar(
}
action={[
UNDO
]}
/>
);
}}
>
Error
);
}
storiesOf('opt-components', module)
.addDecorator(withOPTComponentsStorybookGlobalStyle)
.addDecorator(withInsightViewerStorybookGlobalStyle)
.addDecorator(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;
};
`
`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 = (
World!!! World!!!
return (
<>
>
);
});
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;;
``