import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import styled from '@emotion/styled' import { Layout, PageLayout, Text, IconButton, ContextMenuButton, MainButton, SearchInput, Paging } from 'asc-web-components' const currentUser = { id: '00000000-0000-0000-0000-000000000000', userName: 'Jane Doe', email: 'janedoe@gmail.com', isOwner: false, isAdmin: false, isVisitor: false, avatarSmall: '', avatarMedium: '' }; const currentUserActions = [ { key: 'ProfileBtn', label: 'Profile', onClick: (e) => action('ProfileBtn Clicked')(e) }, { key: 'AboutBtn', label: 'About', onClick: (e) => action('AboutBtn Clicked')(e) }, { key: 'LogoutBtn', label: 'Log out', onClick: (e) => action('LogoutBtn Clicked')(e) } ]; const availableModules = [ { seporator: true, id: 'nav-seporator-1' }, { id: '11111111-1111-1111-1111-111111111111', title: 'Documents', iconName: 'DocumentsIcon', notifications: 2, url: '/products/documents/', onClick: (e) => action('DocumentsIcon Clicked')(e), onBadgeClick: (e) => action('DocumentsIconBadge Clicked')(e) }, { id: '22222222-2222-2222-2222-222222222222', title: 'Chat', iconName: 'ChatIcon', notifications: 3, url: '/products/chat/', onClick: (e) => action('ChatIcon Clicked')(e), isolateMode: true }, { id: '33333333-3333-3333-3333-333333333333', title: 'Mail', iconName: 'MailIcon', notifications: 7, url: '/products/mail/', onClick: (e) => action('MailIcon Clicked')(e), onBadgeClick: (e) => action('MailIconBadge Clicked')(e) }, { id: '44444444-4444-4444-4444-444444444444', title: 'Projects', iconName: 'ProjectsIcon', notifications: 5, onClick: (e) => action('ProjectsIcon Clicked')(e), onBadgeClick: (e) => action('ProjectsIconBadge Clicked')(e) }, { seporator: true, id: 'nav-seporator-2' }, { id: '55555555-5555-5555-5555-555555555555', title: 'Calendar', iconName: 'CalendarCheckedIcon', notifications: 0, onClick: (e) => action('CalendarIcon Clicked')(e), onBadgeClick: (e) => action('CalendarIconBadge Clicked')(e) }, { id: '66666666-6666-6666-6666-666666666666', title: 'CRM', iconName: 'CrmIcon', notifications: 0, onClick: (e) => action('CrmIcon Clicked')(e), isolateMode: true } ]; const currentModuleId = '44444444-4444-4444-4444-444444444444'; const onLogoClick = (e) => action('Logo Clicked')(e); const HeaderContent = styled.div` display: flex; align-items: center; & > * { margin-right: 8px !important; } `; const pageItems = [ { key: '1', label: '1 of 2', onClick: (e) => action('set paging 1 of 2')(e) }, { key: '2', label: '2 of 2', onClick: (e) => action('set paging 2 of 2')(e) } ]; const perPageItems = [ { key: '1-1', label: '25 per page', onClick: (e) => action('set paging 25 action')(e) }, { key: '1-2', label: '50 per page', onClick: (e) => action('set paging 50 action')(e) } ]; const asideContent =
Aside Content
; const articleHeaderContent =Article Content
; const sectionHeaderContent =Section Content
; const sectionPagingContent =