Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

storybook dropped

Browse source
This commit is contained in:
svetlagasheva 2021-04-13 17:04:09 +03:00
parent 88a9e835fa
commit 0fe3024664
86 changed files with 29 additions and 7408 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6257
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -8,7 +8,6 @@
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"storybook": "start-storybook --ci --config-dir ./storybook --static-dir ./ --port 6060",
"test": "jest",
"lint": "eslint src"
},
@ -38,10 +37,6 @@
"@babel/plugin-proposal-object-rest-spread": "7.12.1",
"@babel/preset-env": "7.12.10",
"@babel/preset-react": "7.12.10",
"@storybook/addon-actions": "5.2.8",
"@storybook/addon-console": "1.2.1",
"@storybook/addons": "5.2.8",
"@storybook/react": "5.2.8",
"@testing-library/react": "9.4.0",
"@testing-library/react-hooks": "3.2.1",
"babel-loader": "8.2.2",
@ -60,7 +55,6 @@
"mini-css-extract-plugin": "1.3.3",
"postcss-loader": "4.1.0",
"react-test-renderer": "16.13.0",
"storybook-addon-jsx": "7.1.15",
"terser-webpack-plugin": "5.0.3",
"webpack": "5.31.2",
"webpack-cli": "4.6.0",

27
storybook/RouterDecorator/RouterDecorator.js
View file

@ -1,27 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const classnames = require('classnames');
const Route = require('stremio-router/Route');
const { RouteFocusedProvider } = require('stremio-router/RouteFocusedContext');
const { ToastsContainerProvider } = require('stremio/common/Toasts/ToastsContainerContext');
const appStyles = require('stremio/App/styles');
const styles = require('./styles');
const RouterDecorator = ({ children }) => (
<div id={'app'}>
<ToastsContainerProvider>
<div className={classnames('routes-container', appStyles['router'])}>
<RouteFocusedProvider value={true}>
<Route>
<div className={styles['route-content-container']}>
{children}
</div>
</Route>
</RouteFocusedProvider>
</div>
</ToastsContainerProvider>
</div>
);
module.exports = RouterDecorator;

5
storybook/RouterDecorator/index.js
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const RouterDecorator = require('./RouterDecorator');
module.exports = RouterDecorator;

9
storybook/RouterDecorator/styles.less
View file

@ -1,9 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.route-content-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: var(--color-background);
}

4
storybook/addons.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('@storybook/addon-actions/register');
require('storybook-addon-jsx/register');

30
storybook/config.js
View file

@ -1,30 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { withConsole } = require('@storybook/addon-console');
const { addDecorator, addParameters, configure } = require('@storybook/react');
const { jsxDecorator } = require('storybook-addon-jsx');
const RouterDecorator = require('./RouterDecorator');
require('spatial-navigation-polyfill');
require('./styles');
window.top.__spatialNavigation__ = {
keyMode: 'ARROW'
};
addParameters({
jsx: {
indent_size: 4,
showFunctions: false
}
});
addDecorator((renderStory, context) => jsxDecorator(renderStory, context));
addDecorator((renderStory, context) => withConsole()(renderStory)(context));
addDecorator((renderStory) => (
<RouterDecorator>
{renderStory()}
</RouterDecorator>
));
configure(() => {
require('./stories');
}, module);

23
storybook/stories/Addon/InstalledAddon.js
View file

@ -1,23 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Addon = require('stremio/routes/Addons/Addon');
const styles = require('./styles');
storiesOf('Addon', module).add('Installed', () => (
<Addon
className={styles['installed-addon-container']}
id={'addon.id'}
name={'Addon name'}
version={'1.0.0'}
logo={'/images/intro_background.jpg'}
description={'Addon description ...'}
types={['movie', 'series']}
installed={true}
onToggle={action('Toggle')}
onShare={action('Share')}
dataset={{ transportUrl: 'http://www.com' }}
/>
));

23
storybook/stories/Addon/NotInstalledAddon.js
View file

@ -1,23 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Addon = require('stremio/routes/Addons/Addon');
const styles = require('./styles');
storiesOf('Addon', module).add('NotInstalled', () => (
<Addon
className={styles['installed-addon-container']}
id={'addon.id'}
name={'Addon name'}
version={'1.0.0'}
logo={'/images/intro_background.jpg'}
description={'Addon description ...'}
types={['movie', 'series']}
installed={false}
onToggle={action('Toggle')}
onShare={action('Share')}
dataset={{ transportUrl: 'http://www.com' }}
/>
));

4
storybook/stories/Addon/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./InstalledAddon');
require('./NotInstalledAddon');

5
storybook/stories/Addon/styles.less
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.installed-addon-container, .not-installed-addon-container {
margin: 1rem;
}

28
storybook/stories/ColorInput/ColorInput.js
View file

@ -1,28 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const ColorInput = require('stremio/common/ColorInput');
const styles = require('./styles');
storiesOf('ColorInput', module).add('ColorInput', () => {
const [value, setValue] = React.useState('red');
const onChange = React.useCallback((event) => {
setValue(event.value);
action('onChange')(event);
}, []);
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<ColorInput
className={styles['color-input']}
value={value}
dataset={{ 'dataset-prop': 'dataset-value' }}
data-prop={'data-value'}
onClick={domEventHandler}
onChange={onChange}
/>
);
});

3
storybook/stories/ColorInput/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./ColorInput');

8
storybook/stories/ColorInput/styles.less
View file

@ -1,8 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.color-input {
flex: none;
width: 4rem;
height: 4rem;
margin: 1rem;
}

19
storybook/stories/ColorPicker/ColorPicker.js
View file

@ -1,19 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const ColorPicker = require('stremio/common/ColorInput/ColorPicker');
const styles = require('./styles');
storiesOf('ColorPicker', module).add('ColorPicker', () => {
const [color, setColor] = React.useState('#f00000ff');
const colorPickerOnInput = React.useCallback((event) => {
setColor(event.value);
}, []);
return (
<div className={styles['color-picker-container']}>
<ColorPicker value={color} onInput={colorPickerOnInput} />
<div className={styles['color-output-label']}>Current color is {color}</div>
</div>
);
});

3
storybook/stories/ColorPicker/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./ColorPicker');

10
storybook/stories/ColorPicker/styles.less
View file

@ -1,10 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.color-picker-container {
padding: 1rem;
.color-output-label {
margin-top: 1rem;
color: var(--color-surfacelighter);
}
}

22
storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
View file

@ -1,22 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Icon = require('@stremio/stremio-icons/dom');
const { Image } = require('stremio/common');
const styles = require('./styles');
storiesOf('Image', module).add('ImageWithFallback', () => {
const renderFallback = React.useMemo(() => () => (
<Icon className={styles['icon']} icon={'ic_broken_link'} />
));
return (
<Image
className={styles['image']}
src={'/images/non_existing.png'}
onError={action('onError')}
renderFallback={renderFallback}
/>
);
});

3
storybook/stories/Image/ImageWithFallback/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./ImageWithFallback');

16
storybook/stories/Image/ImageWithFallback/styles.less
View file

@ -1,16 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.image {
flex: none;
width: 10rem;
height: 10rem;
margin: 1rem;
}
.icon {
flex: none;
width: 10rem;
height: 10rem;
margin: 1rem;
fill: white;
}

21
storybook/stories/Image/SampleImage/SampleImage.js
View file

@ -1,21 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Image } = require('stremio/common');
const styles = require('./styles');
storiesOf('Image', module).add('SampleImage', () => {
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<Image
className={styles['image']}
src={'/images/default_avatar.png'}
data-prop={'data-value'}
onClick={domEventHandler}
/>
);
});

3
storybook/stories/Image/SampleImage/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleImage');

8
storybook/stories/Image/SampleImage/styles.less
View file

@ -1,8 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.image {
flex: none;
width: 10rem;
height: 10rem;
margin: 1rem;
}

4
storybook/stories/Image/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleImage');
require('./ImageWithFallback');

40
storybook/stories/MetaItem/SаmpleMetaItem/SаmpleMetaItem.js
View file

@ -1,40 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { MetaItem } = require('stremio/common');
const styles = require('./styles');
const CONTINUE_WATCHING_MENU = [
{
label: 'Play',
value: 'play'
},
{
label: 'Dismiss',
value: 'dismiss'
}
];
storiesOf('MetaItem', module).add('SаmpleMetaItem', () => {
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<MetaItem
className={styles['meta-item']}
type={'movie'}
name={'Sample meta item'}
poster={'/images/intro_background.jpg'}
posterShape={'poster'}
playIcon={true}
progress={0.4}
options={CONTINUE_WATCHING_MENU}
dataset={{ id: 'pt1' }}
optionOnSelect={action('optionOnSelect')}
data-id={'meta-item-id'}
onClick={domEventHandler}
/>
);
});

3
storybook/stories/MetaItem/SаmpleMetaItem/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SаmpleMetaItem');

7
storybook/stories/MetaItem/SаmpleMetaItem/styles.less
View file

@ -1,7 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.meta-item {
flex: none;
width: 12rem;
margin: 1rem;
}

3
storybook/stories/MetaItem/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SаmpleMetaItem');

20
storybook/stories/ModalDialog/ModalDialogWithActionButtons/ModalDialogWithActionButtons.js
View file

@ -1,20 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { ModalDialog } = require('stremio/common');
const styles = require('./styles');
storiesOf('ModalDialog', module).add('ModalDialogWithActionButtons', () => (
<ModalDialog title={'ModalDialogWithActionButtons'}
onCloseRequest={action('onCloseRequest')}
buttons={[
{ label: 'Accept', props: { onClick: action('Accept') } },
{ label: 'Addons', icon: 'ic_addons', className: styles['addons-button-container'], props: { onClick: action('Addons') } },
]}>
<div style={{ height: 1000, background: 'red', color: 'white' }}>
1000px height content
</div>
</ModalDialog>
));

3
storybook/stories/ModalDialog/ModalDialogWithActionButtons/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./ModalDialogWithActionButtons');

33
storybook/stories/ModalDialog/ModalDialogWithActionButtons/styles.less
View file

@ -1,33 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
:import('~stremio/common/ModalDialog/styles.less') {
modal-dialog-icon: icon;
modal-dialog-label: label;
}
.addons-button-container {
background-color: transparent;
border: 2px solid gray;
.modal-dialog-icon {
fill: gray;
}
.modal-dialog-label {
color: gray;
}
&:hover, &:focus {
filter: none;
outline: none;
border-color: black;
.modal-dialog-icon {
fill: black;
}
.modal-dialog-label {
color: black;
}
}
}

14
storybook/stories/ModalDialog/ModalDialogWithLongContent/ModalDialogWithLongContent.js
View file

@ -1,14 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { ModalDialog } = require('stremio/common');
storiesOf('ModalDialog', module).add('ModalDialogWithLongContent', () => (
<ModalDialog title={'ModalDialogWithLongContent'} onCloseRequest={action('onCloseRequest')}>
<div style={{ height: 1000, background: 'red', color: 'white' }}>
1000px height content
</div>
</ModalDialog>
));

3
storybook/stories/ModalDialog/ModalDialogWithLongContent/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./ModalDialogWithLongContent');

23
storybook/stories/ModalDialog/SampleModalDialog/SampleModalDialog.js
View file

@ -1,23 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { ModalDialog } = require('stremio/common');
storiesOf('ModalDialog', module).add('SampleModalDialog', () => {
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<ModalDialog title={'SampleModalDialog'}
data-prop={'data-value'}
dataset={{ 'dataset-prop': 'dataset-value' }}
onCloseRequest={action('onCloseRequest')}
onClick={domEventHandler}>
<div style={{ height: 100, background: 'red', color: 'white' }}>
100px height content
</div>
</ModalDialog>
);
});

3
storybook/stories/ModalDialog/SampleModalDialog/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleModalDialog');

5
storybook/stories/ModalDialog/index.js
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleModalDialog');
require('./ModalDialogWithActionButtons');
require('./ModalDialogWithLongContent');

51
storybook/stories/ModalDialog/styles.less
View file

@ -1,51 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.modal-dialog {
width: 45rem;
.custom-button {
background-color: var(--color-signal3);
&:hover {
background-color: var(--color-signal380);
color: var(--color-backgrounddarker);
.icon {
fill: var(--color-backgrounddarker);
}
}
.icon {
fill: var(--color-surfacelighter);
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
}
// This is only for the content. Not relevant for the demo
.content-container {
display: flex;
flex-direction: row;
margin: 0 -0.5rem;
.content-column {
flex: 1 0 0;
padding: 0 0.5rem;
p {
text-align: justify;
}
}
}
}
// This is only for the buttons that show the modals. Not relevant for the demo
.show-modal-button {
display: inline-block;
background-color: var(--color-signal4);
width: 15rem;
text-align: center;
padding: 1rem;
margin: .5rem;
}

39
storybook/stories/Multiselect/MultiselectMultipleValues/MultiselectMultipleValues.js
View file

@ -1,39 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Multiselect } = require('stremio/common');
const styles = require('./styles');
storiesOf('Multiselect', module).add('MultiselectMultipleValues', () => {
const [selected, setSelected] = React.useState(['a']);
const onSelect = React.useCallback((event) => {
action('onSelect')(event);
if (selected.includes(event.value)) {
setSelected(selected.filter((value) => value !== event.value));
} else {
setSelected([...selected, event.value]);
}
}, [selected]);
return (
<Multiselect
className={styles['label-container']}
direction={'bottom-right'}
title={'MultiselectMultipleValues'}
options={[
{ value: 'a', label: 'A' },
{ value: 'b' },
{ value: 'c', label: 'C' },
]}
selected={selected}
disabled={false}
dataset={{ prop: 'value' }}
renderLabelContent={null}
renderLabelText={null}
onOpen={action('onOpen')}
onClose={action('onClose')}
onSelect={onSelect}
/>
);
});

3
storybook/stories/Multiselect/MultiselectMultipleValues/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./MultiselectMultipleValues');

8
storybook/stories/Multiselect/MultiselectMultipleValues/styles.less
View file

@ -1,8 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.label-container {
flex: none;
width: 17rem;
height: 3.6rem;
margin: 2rem;
}

41
storybook/stories/Multiselect/MultiselectNotAutoClosing/MultiselectNotAutoClosing.js
View file

@ -1,41 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Multiselect } = require('stremio/common');
const styles = require('./styles');
storiesOf('Multiselect', module).add('MultiselectNotAutoClosing', () => {
const [selected, setSelected] = React.useState(['a']);
const onSelect = React.useCallback((event) => {
action('onSelect')(event);
if (selected.includes(event.value)) {
setSelected(selected.filter((value) => value !== event.value));
} else {
setSelected([...selected, event.value]);
}
event.nativeEvent.closeMenuPrevented = true;
}, [selected]);
return (
<Multiselect
className={styles['label-container']}
direction={'bottom-right'}
title={'MultiselectNotAutoClosing'}
options={[
{ value: 'a', label: 'A' },
{ value: 'b' },
{ value: 'c', label: 'C' },
]}
selected={selected}
disabled={false}
dataset={{ prop: 'value' }}
renderLabelContent={null}
renderLabelText={null}
onOpen={action('onOpen')}
onClose={action('onClose')}
onSelect={onSelect}
/>
);
});

3
storybook/stories/Multiselect/MultiselectNotAutoClosing/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./MultiselectNotAutoClosing');

8
storybook/stories/Multiselect/MultiselectNotAutoClosing/styles.less
View file

@ -1,8 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.label-container {
flex: none;
width: 17rem;
height: 3.6rem;
margin: 2rem;
}

40
storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
View file

@ -1,40 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Multiselect } = require('stremio/common');
const styles = require('./styles');
storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
const [selected, setSelected] = React.useState(['a']);
const onSelect = React.useCallback((event) => {
action('onSelect')(event);
setSelected([event.value]);
}, []);
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<Multiselect
className={styles['label-container']}
direction={'bottom-right'}
title={'MultiselectSingleValue'}
options={[
{ value: 'a', label: 'A' },
{ value: 'b' },
{ value: 'c', label: 'C' },
]}
selected={selected}
disabled={false}
dataset={{ prop: 'value' }}
renderLabelContent={null}
renderLabelText={null}
onOpen={action('onOpen')}
onClose={action('onClose')}
onSelect={onSelect}
data-prop={'data-value'}
onClick={domEventHandler}
/>
);
});

3
storybook/stories/Multiselect/MultiselectSingleValue/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./MultiselectSingleValue');

8
storybook/stories/Multiselect/MultiselectSingleValue/styles.less
View file

@ -1,8 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.label-container {
flex: none;
width: 17rem;
height: 3.6rem;
margin: 2rem;
}

5
storybook/stories/Multiselect/index.js
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./MultiselectMultipleValues');
require('./MultiselectNotAutoClosing');
require('./MultiselectSingleValue');

16
storybook/stories/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -1,16 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const HorizontalNavBar = require('stremio/common/HorizontalNavBar');
storiesOf('NavBar', module).add('HorizontalNavBar', () => (
<HorizontalNavBar
backButton={false}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
notificationsMenu={true}
navMenu={false}
/>
));

16
storybook/stories/NavBar/HorizontalNavBar/HorizontalNavBarWithBackButton.js
View file

@ -1,16 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const HorizontalNavBar = require('stremio/common/HorizontalNavBar');
storiesOf('NavBar', module).add('HorizontalNavBarWithBackButton', () => (
<HorizontalNavBar
backButton={true}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
notificationsMenu={true}
navMenu={false}
/>
));

4
storybook/stories/NavBar/HorizontalNavBar/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./HorizontalNavBar');
require('./HorizontalNavBarWithBackButton');

26
storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js
View file

@ -1,26 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' },
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' }
];
storiesOf('NavBar', module).add('LongVerticalNavBar', () => (
<VerticalNavBar
tabs={TABS}
/>
));

20
storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js
View file

@ -1,20 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const VerticalNavBar = require('stremio/common/VerticalNavBar');
const TABS = [
{ route: 'board', label: 'Board', icon: 'ic_board' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover' },
{ route: 'library', label: 'Library', icon: 'ic_library' },
{ route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
{ route: 'addons', label: 'Addons', icon: 'ic_addons' },
{ route: 'settings', label: 'Settings', icon: 'ic_settings' }
];
storiesOf('NavBar', module).add('VerticalNavBar', () => (
<VerticalNavBar
tabs={TABS}
/>
));

4
storybook/stories/NavBar/VerticalNavBar/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./VerticalNavBar');
require('./LongVerticalNavBar');

4
storybook/stories/NavBar/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./HorizontalNavBar');
require('./VerticalNavBar');

20
storybook/stories/Notification/MultipleVideosNotification.js
View file

@ -1,20 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Notification = require('stremio/common/NavBar/NotificationsMenu/NotificationsList/Notification');
const styles = require('./styles');
storiesOf('Notification', module).add('MultipleVideos', () => (
<Notification
className={styles['multiple-videos-notification-container']}
id={'notification-id'}
type={'series'}
name={'Demo name'}
poster={'/images/intro_background.jpg'}
thumbnail={null}
released={new Date()}
onClick={action('Demo item clicked')}
/>
));

22
storybook/stories/Notification/SingleVideoNotification.js
View file

@ -1,22 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const Notification = require('stremio/common/NavBar/NotificationsMenu/NotificationsList/Notification');
const styles = require('./styles');
storiesOf('Notification', module).add('SingleVideo', () => (
<Notification
className={styles['single-video-notification-container']}
id={'notification-id'}
type={'series'}
name={'Demo name'}
poster={'/images/intro_background.jpg'}
thumbnail={'/images/intro_background.jpg'}
season={1}
episode={1}
released={new Date()}
onClick={action('Demo item clicked')}
/>
));

4
storybook/stories/Notification/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SingleVideoNotification');
require('./MultipleVideosNotification');

5
storybook/stories/Notification/styles.less
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.single-video-notification-container, .multiple-videos-notification-container {
width: 28rem;
}

23
storybook/stories/PaginationInput/SimplePaginationInput/SimplePaginationInput.js
View file

@ -1,23 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { PaginationInput } = require('stremio/common');
const styles = require('./styles');
storiesOf('PaginationInput', module).add('SimplePaginationInput', () => {
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<PaginationInput
className={styles['pagination-input']}
label={'5'}
dataset={{ 'dataset-prop': 'dataset-value' }}
data-prop={'data-value'}
onSelect={action('onSelect')}
onClick={domEventHandler}
/>
);
});

3
storybook/stories/PaginationInput/SimplePaginationInput/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SimplePaginationInput');

27
storybook/stories/PaginationInput/SimplePaginationInput/styles.less
View file

@ -1,27 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
:import('~stremio/common/PaginationInput/styles.less') {
pagination-prev-button-container: prev-button-container;
pagination-next-button-container: next-button-container;
pagination-button-icon: icon;
}
.pagination-input {
flex: none;
align-self: flex-start;
display: flex;
min-width: 8rem;
max-width: 10rem;
margin: 1rem;
background-color: var(--color-backgroundlighter);
.pagination-prev-button-container, .pagination-next-button-container {
width: 3rem;
height: 3rem;
.pagination-button-icon {
width: 1rem;
height: 1rem;
}
}
}

3
storybook/stories/PaginationInput/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SimplePaginationInput');

53
storybook/stories/Popup/Popup.js
View file

@ -1,53 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const classnames = require('classnames');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const { Button, Popup, useBinaryState } = require('stremio/common');
const styles = require('./styles');
storiesOf('Popup', module).add('Popup', () => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const popupLabelOnClick = React.useCallback((event) => {
if (!event.nativeEvent.togglePopupPrevented) {
toggleMenu();
}
}, [toggleMenu]);
const popupMenuOnClick = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
const popupMenuOnKeyDown = React.useCallback((event) => {
event.nativeEvent.buttonClickPrevented = true;
}, []);
const onCloseRequest = React.useCallback((event) => {
action('onCloseRequest')(event);
closeMenu();
}, []);
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<Popup
open={menuOpen}
direction={'bottom-right'}
renderLabel={({ className, children, ...props }) => (
<Button {...props} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
POPUP LABEL
{children}
</Button>
)}
renderMenu={() => (
<div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
{Array(10).fill(null).map((_, index) => (
<Button key={index} className={styles['random-button']} onClick={action('Click Me')}>Click Me</Button>
))}
</div>
)}
dataset={{ prop: 'value' }}
onCloseRequest={onCloseRequest}
data-prop={'data-value'}
onMouseEnter={domEventHandler}
/>
);
});

3
storybook/stories/Popup/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./Popup');

42
storybook/stories/Popup/styles.less
View file

@ -1,42 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
:import('~stremio/common/Popup/styles.less') {
popup-menu-container: menu-container;
}
.popup-label-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 10rem;
height: 3rem;
margin: 2rem;
padding: 0 1.2rem;
color: var(--color-surfacelighter);
background: var(--color-secondarylight);
.popup-menu-container {
right: initial;
left: 0;
.menu-container {
width: 20rem;
height: 20rem;
background: var(--color-surface);
overflow-y: auto;
.random-button {
margin: 2rem;
padding: 0.8rem;
background: var(--color-primary);
text-align: center;
&:hover, &:focus {
background: var(--color-primarylight);
}
}
}
}
}

26
storybook/stories/SeasonsBar/SampleSeasonsBar/SampleSeasonsBar.js
View file

@ -1,26 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { action } = require('@storybook/addon-actions');
const SeasonsBar = require('stremio/routes/MetaDetails/VideosList/SeasonsBar');
const styles = require('./styles');
storiesOf('SeasonsBar', module).add('SampleSeasonsBar', () => {
const [season, setSeason] = React.useState(1);
const seasons = React.useMemo(() => {
return [1, 2, 3, 4, 5, /*6,*/ 7];
}, []);
const onSelect = React.useCallback((event) => {
action('onSelect')(event);
setSeason(event.value);
}, []);
return (
<SeasonsBar
className={styles['seasons-bar']}
seasons={seasons}
season={season}
onSelect={onSelect}
/>
);
});

3
storybook/stories/SeasonsBar/SampleSeasonsBar/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleSeasonsBar');

7
storybook/stories/SeasonsBar/SampleSeasonsBar/styles.less
View file

@ -1,7 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.seasons-bar {
flex: none;
width: 28rem;
margin: 2rem;
}

14
storybook/stories/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
View file

@ -1,14 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const SeasonsBar = require('stremio/routes/MetaDetails/VideosList/SeasonsBar');
const styles = require('./styles');
storiesOf('SeasonsBar', module).add('SeasonsBarPlaceholder', () => {
return (
<SeasonsBar.Placeholder
className={styles['seasons-bar']}
/>
);
});

3
storybook/stories/SeasonsBar/SeasonsBarPlaceholder/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SeasonsBarPlaceholder');

7
storybook/stories/SeasonsBar/SeasonsBarPlaceholder/styles.less
View file

@ -1,7 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.seasons-bar {
flex: none;
width: 28rem;
margin: 2rem;
}

4
storybook/stories/SeasonsBar/index.js
View file

@ -1,4 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SampleSeasonsBar');
require('./SeasonsBarPlaceholder');

15
storybook/stories/SharePrompt/SharePrompt.js
View file

@ -1,15 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { SharePrompt, ModalDialog } = require('stremio/common');
const styles = require('./styles');
storiesOf('SharePrompt', module).add('SharePrompt', () => (
<ModalDialog title={'Share Stremio'}>
<SharePrompt
className={styles['share-prompt-container']}
url={'https://stremio.com'}
/>
</ModalDialog>
));

3
storybook/stories/SharePrompt/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SharePrompt');

5
storybook/stories/SharePrompt/styles.less
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.share-prompt-container {
width: 24rem;
}

16
storybook/stories/Stream/StreamWithThumbnail/StreamWithThumbnail.js
View file

@ -1,16 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const Stream = require('stremio/routes/MetaDetails/StreamsList/Stream');
const styles = require('./styles');
storiesOf('Stream', module).add('StreamWithThumbnail', () => (
<Stream
className={styles['stream-container']}
addonName={'Sample addon name'}
title={'1080p'}
thumbnail={'images/anonymous.png'}
progress={0.6}
/>
));

3
storybook/stories/Stream/StreamWithThumbnail/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./StreamWithThumbnail');

7
storybook/stories/Stream/StreamWithThumbnail/styles.less
View file

@ -1,7 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.stream-container {
flex: none;
width: 28rem;
margin: 2rem;
}

3
storybook/stories/Stream/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./StreamWithThumbnail');

44
storybook/stories/Toast/SimpleToast/SimpleToast.js
View file

@ -1,44 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const React = require('react');
const { storiesOf } = require('@storybook/react');
const { Toasts } = require('stremio/common');
const styles = require('./styles');
storiesOf('Toast', module).add('SimpleToast', () => {
const toastRef = React.useRef(null);
const showToast = React.useCallback((message) => {
toastRef.current.show({
title: 'Something to take your attention',
timeout: 0,
type: 'info',
icon: 'ic_sub',
closeButton: true,
...message
});
}, [toastRef.current]);
const clickSuccess = () => showToast({
title: 'You clicked it',
text: 'Congratulations! Click event handled successfully.',
type: 'success',
icon: 'ic_check',
timeout: 2e3
});
return (
<div className={styles['root-container']}>
<button onClick={() => showToast({ text: 'Longer message that contains a lot of words but it does not state anything. The idea is to test the handling of long messages.' })}>Long message</button>
<button onClick={() => showToast({ text: 'This will close after 3 seconds', timeout: 3e3 })}>Timeout 3s</button>
<button onClick={() => showToast({ text: 'Click me and see what happens later', title: 'Click here!', onClick: clickSuccess })}>Clickable</button>
<button onClick={() => showToast({ text: 'Type success', type: 'success', icon: 'ic_check' })}>Success</button>
<button onClick={() => showToast({ text: 'Type alert', type: 'alert', icon: 'ic_warning' })}>Alert</button>
<button onClick={() => showToast({ text: 'Type error', type: 'error', icon: 'ic_x' })}>Error</button>
<button onClick={() => showToast({ text: 'No title', type: 'info', title: null, icon: null })}>No title</button>
<button onClick={() => toastRef.current.show({})}>Empty</button>
<button onClick={() => toastRef.current.hideAll()}>Close all</button>
<Toasts ref={toastRef} className={styles['toasts-container']} />
</div>
);
});

3
storybook/stories/Toast/SimpleToast/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SimpleToast');

18
storybook/stories/Toast/SimpleToast/styles.less
View file

@ -1,18 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
.root-container {
width: 100%;
height: 100%;
color: var(--color-surfacelighter);
button {
color: var(--color-surfacelighter);
background-color: var(--color-primarydark);
padding: .5rem;
margin: .5rem;
}
}
.toasts-container {
width: 30rem;
}

3
storybook/stories/Toast/index.js
View file

@ -1,3 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./SimpleToast');

17
storybook/stories/index.js
View file

@ -1,17 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
require('./Addon');
require('./ColorInput');
require('./ColorPicker');
require('./Image');
require('./MetaItem');
require('./ModalDialog');
require('./Multiselect');
require('./NavBar');
require('./Notification');
require('./PaginationInput');
require('./Popup');
require('./SeasonsBar');
require('./SharePrompt');
require('./Stream');
require('./Toast');

6
storybook/styles.less
View file

@ -1,6 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
:global(#root) {
width: 100%;
height: 100%;
}

28
storybook/webpack.config.js
View file

@ -1,28 +0,0 @@
// Copyright (C) 2017-2020 Smart code 203358507
const appConfig = require('../webpack.config.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = ({ config: storybookConfig }) => {
storybookConfig.module = {
...storybookConfig.module,
rules: appConfig.module.rules
};
storybookConfig.resolve = {
...storybookConfig.resolve,
extensions: [
...storybookConfig.resolve.extensions,
...appConfig.resolve.extensions
],
alias: {
...storybookConfig.resolve.alias,
...appConfig.resolve.alias
}
};
storybookConfig.plugins = [
...storybookConfig.plugins,
new MiniCssExtractPlugin()
];
return storybookConfig;
};