microsoft
/
FluidStorybook
зеркало из https://github.com/microsoft/FluidStorybook.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Update overall theme and enhanced source viewer functionality (#30) 

* Update hugo build script, move build styles into manager-styles.css, add build:hugo script in package.json

* Update theme and source code viewer

* Catch up build script

* Hide toolbar when on welcome (docs only) story.

Co-authored-by: Dan Wahlin <danwahlin@MININT-DN392G3.northamerica.corp.microsoft.com>
Co-authored-by: Dan Wahlin <danwahlin@iMac-Office.local>
This commit is contained in:
Dan Wahlin 2020-08-31 09:48:30 -07:00 коммит произвёл GitHub
Родитель 0e79adab61
Коммит f5e819ea49
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
29 изменённых файлов: 388 добавлений и 284 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

20
.storybook/fluid-theme.js
Просмотреть файл

@ -4,27 +4,27 @@ export default create({
base: 'light',
// UI
appBg: 'white',
appBorderColor: 'grey',
appBorderRadius: 4,
appBg: '#2c2c32',
appBorderColor: '#fff',
appBorderRadius: 0,
// Typography
fontBase: '"Open Sans", sans-serif',
fontCode: 'monospace',
// Text colors
textColor: 'black',
textColor: '#fff',
textInverseColor: '#fff',
// Toolbar default and active colors
barTextColor: '#000',
barSelectedColor: '#1AA8E6',
barBg: '#efefef',
barTextColor: '#fff',
barSelectedColor: '#1EA7FD',
barBg: '#2c2c32',
// Form colors
inputBg: 'white',
inputBorder: 'silver',
inputTextColor: 'black',
inputBg: '#fff',
inputBorder: 'yellow',
inputTextColor: '#fff',
inputBorderRadius: 4,
brandTitle: 'Fluid Playground',

6
.storybook/main.js
Просмотреть файл

@ -6,12 +6,10 @@ module.exports = {
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-viewport/register',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-docs', // Enables MDX
'./sourcecode-addon/register',
// './codeeditor-addon/register',
'@storybook/addon-controls'
'./sourcecode-addon/register'
// './codeeditor-addon/register'
],
webpackFinal: async (config) => {
// Used by sourcecode-addon. Add loader that registers raw source code in a cache and display it in the Source tab.'

9
.storybook/preview.js
Просмотреть файл

@ -1,10 +1,7 @@
import { addDecorator } from '@storybook/react'
import sourceCodeDecorator from './sourcecode-addon/storybookDecorator';
import codeEditorDecorator from './codeeditor-addon/codeeditorDecorator';
import sourceCodeDecorator from './sourcecode-addon/sourceCodeDecorator';
import { storySort } from './storySort';
addDecorator(sourceCodeDecorator);
addDecorator(codeEditorDecorator);
export const decorators = [sourceCodeDecorator];
const sortOptions = {
order: [
@ -24,6 +21,6 @@ export const parameters = {
showPanel: false,
storySort: storySort(sortOptions)
},
// viewMode: 'docs'
viewMode: 'docs'
}

8
.storybook/sourcecode-addon/sourceCodeDecorator.js Normal file
Просмотреть файл

@ -0,0 +1,8 @@
import { addons } from '@storybook/addons';
export default (getStory, context) => {
const channel = addons.getChannel();
const path = context.parameters.defaultSrcFile || context.parameters.fileName;
channel.emit('sourcecode/selectedStory', path);
return getStory(context);
}

11
.storybook/sourcecode-addon/storybookDecorator.js
Просмотреть файл

@ -1,11 +0,0 @@
import { addons, makeDecorator } from '@storybook/addons'
export default makeDecorator({
name: 'withSourceInfo',
parameterName: 'sourcecode',
wrapper: (getStory, context) => {
const channel = addons.getChannel();
channel.emit('sourcecode/selectedStory', context.parameters.fileName);
return getStory(context);
},
})

14
.storybook/sourcecode-addon/storybookHighlighter.jsx
Просмотреть файл

@ -1,8 +1,8 @@
import React, { useCallback } from 'react'
import React, { useCallback } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
import createElement from 'react-syntax-highlighter/dist/esm/create-element'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
import createElement from 'react-syntax-highlighter/dist/esm/create-element';
const HighlighterInner = props => {
const { code, language = 'javascript', onLinkClick } = props
@ -19,11 +19,11 @@ const HighlighterInner = props => {
)
return (
<React.Fragment>
<style>{`[data-link-row] { cursor: pointer; background-color: rgba(0,0,255,0.05); border-radius: 4px; } [data-link-row]:hover { box-shadow: 0 0 3px blue; } `}</style>
<style>{`[data-link-row] { cursor: pointer; border-radius: 4px; } [data-link-row]:hover { box-shadow: 0 0 3px blue; } `}</style>
<div className="source-code" onClick={handleLinkClick}>
<SyntaxHighlighter
style={prism}
customStyle={{ backgroundColor: 'transparent', fontSize: '0.8em' }}
style={coy}
customStyle={{ backgroundColor: '#fff', fontSize: '.9em' }}
language={language}
renderer={({ rows, stylesheet, useInlineStyles }) => {
return rows.map((row, i) => {

4
.storybook/sourcecode-addon/storybookPanel.controls.jsx
Просмотреть файл

@ -44,9 +44,9 @@ const SourceCodePanelControls = props => {
className={`${Classes.TEXT_SMALL} Editor_Menu_Item`}
key={option}
icon={
<Icon icon={currentlySelected ? 'tick' : 'blank'} iconSize={10} />
<Icon icon={currentlySelected ? 'tick' : 'blank'} iconSize={12} />
}
active={modifiers.active}
active={currentlySelected}
text={option}
shouldDismissPopover={false}
onClick={handleClick}

44
.storybook/sourcecode-addon/storybookPanel.css
Просмотреть файл

@ -8,10 +8,52 @@
}
.sourcePanel .bp3-control-group :nth-child(3) > span {
width: 100%;
width: 100% !important;
}
.sourcePanel .bp3-control-group :nth-child(3) button {
width: 100%;
justify-content: left;
}
.source-code {
background-color:#fff !important;
width: 100vw;
min-height: 100vw;
}
button.bp3-disabled {
background-color: #2c2c32 !important;
}
.bp3-button:not([class*="bp3-intent-"]) {
background-color: #ccc;
}
.bp3-menu {
background-color: #252525;
color: #fff;
}
.bp3-menu-item.bp3-intent-primary.bp3-active {
background-color: #20a6fd;
}
.bp3-input {
background-color: #252525;
color: #fff;
}
.bp3-button:not([class*="bp3-intent-"]) {
background-image: none;
background-color: #252525;
color: #fff;
}
.bp3-button:not([class*="bp3-intent-"]):hover {
background-color: #1a1a1a;
}
.bp3-menu-item::before, .bp3-menu-item > .bp3-icon {
color: #2f9c0a;
}

25
.storybook/sourcecode-addon/storybookPanel.jsx
Просмотреть файл

@ -1,11 +1,12 @@
import React, { useEffect, useState } from 'react'
import Highlighter from './storybookHighlighter'
import path from 'path'
import SourceCodePanelControls from './storybookPanel.controls'
import React, { useEffect, useState } from 'react';
import Highlighter from './storybookHighlighter';
import path from 'path';
import SourceCodePanelControls from './storybookPanel.controls';
const SourceCodePanel = props => {
const { channel, rawSources: rawSourcesFromProps } = props;
const [fileState, setFileState] = useState({ history: [], idx: 0 });
const [filteredFiles, setFilteredFiles] = useState([]);
const filePath = fileState.history[fileState.idx] || '';
const [rawSources, setRawSources] = useState(rawSourcesFromProps);
const [showCompiled, setShowCompiled] = useState(false);
@ -41,9 +42,19 @@ const SourceCodePanel = props => {
}, [setRawSources]);
useEffect(() => {
channel.on('sourcecode/selectedStory', p => {
channel.on('sourcecode/selectedStory', path => {
if (rawSources) {
handleFileChange(p, rawSources)
handleFileChange(path, rawSources);
// Filter files shown in drop-down to files associated with the files in the same base folder as "path"
if (rawSources) {
const filteredPaths = Object.keys(rawSources).filter((file, index) => {
// Grab first part of path
let firstOfPath = path.split('/').slice(2,4).join('/').toLowerCase();
return file.toLowerCase().startsWith(firstOfPath);
});
setFilteredFiles(filteredPaths);
}
}
})
return () => channel.removeListener('sourcecode/selectedStory')
@ -71,7 +82,7 @@ const SourceCodePanel = props => {
filePath={filePath}
fileState={fileState}
setFileState={setFileState}
files={files}
files={filteredFiles}
handleToggleCompiled={handleToggleCompiled}
handleFileChange={i => handleFileChange(i, rawSources)}
showCompiled={showCompiled}

2
hugo-build-script.js
Просмотреть файл

@ -47,10 +47,8 @@ function createHugoTemplate(stylesheetLinks, bodyContent) {
{{ define "main" }}
{{ partial "navbarSticky.html" . }}
${stylesheetLinks}
${bodyContent}
{{ block "footer" . -}}{{ end }}
{{- partial "analytics.html" . }}
{{- if templates.Exists "partials/extra-foot.html" -}}

401
package-lock.json сгенерированный
Просмотреть файл

@ -3108,17 +3108,17 @@
}
},
"@storybook/addon-actions": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-actions/-/addon-actions-6.0.18.tgz",
"integrity": "sha1-igr2K4UdJtxbBmQlYNNmWmADUAk=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-actions/-/addon-actions-6.0.20.tgz",
"integrity": "sha1-T8+D7H+WGpCgg2YzzfGOzzfZ7VE=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/client-api": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/client-api": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/theming": "6.0.20",
"core-js": "^3.0.1",
"fast-deep-equal": "^3.1.1",
"global": "^4.3.2",
@ -3134,25 +3134,25 @@
}
},
"@storybook/addon-controls": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-controls/-/addon-controls-6.0.18.tgz",
"integrity": "sha1-3yQz60E9ko6a2QGZXXpzIiiK/7M=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-controls/-/addon-controls-6.0.20.tgz",
"integrity": "sha1-MBBckPZ8BO/dVRo0cBNfeOiUBZQ=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/client-api": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/node-logger": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/client-api": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/node-logger": "6.0.20",
"@storybook/theming": "6.0.20",
"core-js": "^3.0.1",
"ts-dedent": "^1.1.1"
}
},
"@storybook/addon-docs": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-docs/-/addon-docs-6.0.18.tgz",
"integrity": "sha1-YCAwDSym3Q2RFrai/xArxjpS1aA=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-docs/-/addon-docs-6.0.20.tgz",
"integrity": "sha1-ehD6cZFrq+ZZ8BQpyAkvJTsKELs=",
"dev": true,
"requires": {
"@babel/generator": "^7.9.6",
@ -3163,18 +3163,18 @@
"@mdx-js/loader": "^1.5.1",
"@mdx-js/mdx": "^1.5.1",
"@mdx-js/react": "^1.5.1",
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/client-api": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/client-api": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/csf": "0.0.1",
"@storybook/node-logger": "6.0.18",
"@storybook/postinstall": "6.0.18",
"@storybook/source-loader": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/node-logger": "6.0.20",
"@storybook/postinstall": "6.0.20",
"@storybook/source-loader": "6.0.20",
"@storybook/theming": "6.0.20",
"acorn": "^7.1.0",
"acorn-jsx": "^5.1.0",
"acorn-walk": "^7.0.0",
@ -3459,9 +3459,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=",
"version": "7.2.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -3502,18 +3502,18 @@
}
},
"@storybook/addon-knobs": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-knobs/-/addon-knobs-6.0.18.tgz",
"integrity": "sha1-jpc9kzz1y4HRu3FfRmGsB6sqOO8=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-knobs/-/addon-knobs-6.0.20.tgz",
"integrity": "sha1-Iofqsr1Uq6cq/sz8QMky52fzvIU=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/channels": "6.0.18",
"@storybook/client-api": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/channels": "6.0.20",
"@storybook/client-api": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/theming": "6.0.20",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",
@ -3537,16 +3537,16 @@
}
},
"@storybook/addon-links": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-links/-/addon-links-6.0.18.tgz",
"integrity": "sha1-4CSEaxABuPs88Zw83Y22Ou8YWV0=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-links/-/addon-links-6.0.20.tgz",
"integrity": "sha1-z+nMP6pKV8wSi5xZScSvi7dvi3U=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/csf": "0.0.1",
"@storybook/router": "6.0.18",
"@storybook/router": "6.0.20",
"@types/qs": "^6.9.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
@ -3565,17 +3565,17 @@
}
},
"@storybook/addon-viewport": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-viewport/-/addon-viewport-6.0.18.tgz",
"integrity": "sha1-z51hHcCpUw3bUd7XRyYJPusvIss=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addon-viewport/-/addon-viewport-6.0.20.tgz",
"integrity": "sha1-YuC8CNsR79hUcFPFSZjHqs4aDxw=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/theming": "6.0.20",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
@ -3584,36 +3584,36 @@
}
},
"@storybook/addons": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addons/-/addons-6.0.18.tgz",
"integrity": "sha1-yLsqPrH6fsoxVCt9Z5V2cbcJwB8=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/addons/-/addons-6.0.20.tgz",
"integrity": "sha1-LCFlXbn/52BtyruvhSFvcvR5lhY=",
"dev": true,
"requires": {
"@storybook/api": "6.0.18",
"@storybook/channels": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/router": "6.0.18",
"@storybook/theming": "6.0.18",
"@storybook/api": "6.0.20",
"@storybook/channels": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/router": "6.0.20",
"@storybook/theming": "6.0.20",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3"
}
},
"@storybook/api": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/api/-/api-6.0.18.tgz",
"integrity": "sha1-pPQtFHHBqXV7uwTo4BnJ92QN0qc=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/api/-/api-6.0.20.tgz",
"integrity": "sha1-k/AXXXqjJ2UmOv4d6O8JmmTTguY=",
"dev": true,
"requires": {
"@reach/router": "^1.3.3",
"@storybook/channels": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/channels": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/csf": "0.0.1",
"@storybook/router": "6.0.18",
"@storybook/router": "6.0.20",
"@storybook/semver": "^7.3.2",
"@storybook/theming": "6.0.18",
"@storybook/theming": "6.0.20",
"@types/reach__router": "^1.3.5",
"core-js": "^3.0.1",
"fast-deep-equal": "^3.1.1",
@ -3675,14 +3675,14 @@
}
},
"@storybook/channel-postmessage": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/channel-postmessage/-/channel-postmessage-6.0.18.tgz",
"integrity": "sha1-onnbtwJkNGHcoyAna5b3z1tmrsM=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/channel-postmessage/-/channel-postmessage-6.0.20.tgz",
"integrity": "sha1-JB8pWhrjZs2+htDWS4k//HQRe6k=",
"dev": true,
"requires": {
"@storybook/channels": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/channels": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/core-events": "6.0.20",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
@ -3698,9 +3698,9 @@
}
},
"@storybook/channels": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/channels/-/channels-6.0.18.tgz",
"integrity": "sha1-5nhOBNpkUzKxq/qr9eZsFIHYQZs=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/channels/-/channels-6.0.20.tgz",
"integrity": "sha1-ytr39HtroUSXzdOsCwvcGLpkX/4=",
"dev": true,
"requires": {
"core-js": "^3.0.1",
@ -3709,16 +3709,16 @@
}
},
"@storybook/client-api": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/client-api/-/client-api-6.0.18.tgz",
"integrity": "sha1-RRl3Zr8P4zMXwCLj3qpOMZISl+k=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/client-api/-/client-api-6.0.20.tgz",
"integrity": "sha1-ZK4NBq5mJH77lTGwA11CDtapOb8=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/channel-postmessage": "6.0.18",
"@storybook/channels": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/channel-postmessage": "6.0.20",
"@storybook/channels": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/csf": "0.0.1",
"@types/qs": "^6.9.0",
"@types/webpack-env": "^1.15.2",
@ -3742,9 +3742,9 @@
}
},
"@storybook/client-logger": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/client-logger/-/client-logger-6.0.18.tgz",
"integrity": "sha1-XpcK8g4QMdnoDEl2EL6WjzeG+fw=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/client-logger/-/client-logger-6.0.20.tgz",
"integrity": "sha1-VSoKo55DfdTA0E8dtg522/9uPcw=",
"dev": true,
"requires": {
"core-js": "^3.0.1",
@ -3752,14 +3752,14 @@
}
},
"@storybook/components": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/components/-/components-6.0.18.tgz",
"integrity": "sha1-k8icvtm+Rj5r/EgyqIl898g+lyA=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/components/-/components-6.0.20.tgz",
"integrity": "sha1-BQTaYoSCWoN5JHtcuKMO6B6nLAY=",
"dev": true,
"requires": {
"@storybook/client-logger": "6.0.18",
"@storybook/client-logger": "6.0.20",
"@storybook/csf": "0.0.1",
"@storybook/theming": "6.0.18",
"@storybook/theming": "6.0.20",
"@types/overlayscrollbars": "^1.9.0",
"@types/react-color": "^3.0.1",
"@types/react-syntax-highlighter": "11.0.4",
@ -3849,9 +3849,9 @@
}
},
"@storybook/core": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/core/-/core-6.0.18.tgz",
"integrity": "sha1-hPU+1ECPA+X1k65pYT5DLyL2og0=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/core/-/core-6.0.20.tgz",
"integrity": "sha1-i6PZ4SgofgBGVLhIC2UOjzzN3Io=",
"dev": true,
"requires": {
"@babel/plugin-proposal-class-properties": "^7.8.3",
@ -3875,20 +3875,20 @@
"@babel/preset-react": "^7.8.3",
"@babel/preset-typescript": "^7.9.0",
"@babel/register": "^7.10.5",
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/channel-postmessage": "6.0.18",
"@storybook/channels": "6.0.18",
"@storybook/client-api": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/channel-postmessage": "6.0.20",
"@storybook/channels": "6.0.20",
"@storybook/client-api": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/csf": "0.0.1",
"@storybook/node-logger": "6.0.18",
"@storybook/router": "6.0.18",
"@storybook/node-logger": "6.0.20",
"@storybook/router": "6.0.20",
"@storybook/semver": "^7.3.2",
"@storybook/theming": "6.0.18",
"@storybook/ui": "6.0.18",
"@storybook/theming": "6.0.20",
"@storybook/ui": "6.0.20",
"@types/glob-base": "^0.3.0",
"@types/micromatch": "^4.0.1",
"@types/node-fetch": "^2.5.4",
@ -4381,23 +4381,6 @@
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true
},
"html-webpack-plugin": {
"version": "4.3.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/html-webpack-plugin/-/html-webpack-plugin-4.3.0.tgz",
"integrity": "sha1-U7+PbWlsRjfVtlbT2YY9ic6BdP0=",
"dev": true,
"requires": {
"@types/html-minifier-terser": "^5.0.0",
"@types/tapable": "^1.0.5",
"@types/webpack": "^4.41.8",
"html-minifier-terser": "^5.0.1",
"loader-utils": "^1.2.3",
"lodash": "^4.17.15",
"pretty-error": "^2.1.1",
"tapable": "^1.1.3",
"util.promisify": "1.0.0"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/is-number/-/is-number-7.0.0.tgz",
@ -4431,6 +4414,17 @@
"integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
"dev": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/locate-path/-/locate-path-5.0.0.tgz",
@ -4575,9 +4569,9 @@
}
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=",
"version": "7.2.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -4635,29 +4629,6 @@
"loader-utils": "^2.0.0",
"mime-types": "^2.1.26",
"schema-utils": "^2.6.5"
},
"dependencies": {
"loader-utils": {
"version": "2.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
},
"util.promisify": {
"version": "1.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/util.promisify/-/util.promisify-1.0.0.tgz",
"integrity": "sha1-RA9xZaRZyaFtwUXrjnLzVocJcDA=",
"dev": true,
"requires": {
"define-properties": "^1.1.2",
"object.getownpropertydescriptors": "^2.0.3"
}
},
"webpack": {
@ -4740,6 +4711,26 @@
"locate-path": "^3.0.0"
}
},
"json5": {
"version": "1.0.1",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/json5/-/json5-1.0.1.tgz",
"integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
},
"locate-path": {
"version": "3.0.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/locate-path/-/locate-path-3.0.0.tgz",
@ -4886,9 +4877,9 @@
}
},
"@storybook/core-events": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/core-events/-/core-events-6.0.18.tgz",
"integrity": "sha1-RdgP6WSe0YahV8LBgMRr3H4GoMw=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/core-events/-/core-events-6.0.20.tgz",
"integrity": "sha1-z4b8QxXpugZKCKDjE+QZN1qwer0=",
"dev": true,
"requires": {
"core-js": "^3.0.1"
@ -4904,9 +4895,9 @@
}
},
"@storybook/node-logger": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/node-logger/-/node-logger-6.0.18.tgz",
"integrity": "sha1-t0yBQPk+SPtWKJD7DGRFUCJKThc=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/node-logger/-/node-logger-6.0.20.tgz",
"integrity": "sha1-2QwQpNhItDlb4OFvGtOPN+unp5I=",
"dev": true,
"requires": {
"@types/npmlog": "^4.1.2",
@ -4958,9 +4949,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=",
"version": "7.2.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -4969,9 +4960,9 @@
}
},
"@storybook/postinstall": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/postinstall/-/postinstall-6.0.18.tgz",
"integrity": "sha1-4KzP/yXs3ql1MDGQZHrCTPqnDm4=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/postinstall/-/postinstall-6.0.20.tgz",
"integrity": "sha1-7CPiNiMR8rqB+w3I0+dypDQaIac=",
"dev": true,
"requires": {
"core-js": "^3.0.1"
@ -5000,16 +4991,16 @@
}
},
"@storybook/react": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/react/-/react-6.0.18.tgz",
"integrity": "sha1-GeHFnXYx9jHsIaWD4yz+0jW7mdY=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/react/-/react-6.0.20.tgz",
"integrity": "sha1-v1qx8pGRitdPH3d3r0lLhe7Jk90=",
"dev": true,
"requires": {
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addons": "6.0.18",
"@storybook/core": "6.0.18",
"@storybook/node-logger": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/core": "6.0.20",
"@storybook/node-logger": "6.0.20",
"@storybook/semver": "^7.3.2",
"@svgr/webpack": "^5.4.0",
"@types/webpack-env": "^1.15.2",
@ -5577,9 +5568,9 @@
}
},
"@storybook/router": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/router/-/router-6.0.18.tgz",
"integrity": "sha1-NrlGOLlzLYBv6AOtsknABUkEDoY=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/router/-/router-6.0.20.tgz",
"integrity": "sha1-+BzoUrUXPlwq/urRmvDWYyb+frw=",
"dev": true,
"requires": {
"@reach/router": "^1.3.3",
@ -5599,13 +5590,13 @@
}
},
"@storybook/source-loader": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/source-loader/-/source-loader-6.0.18.tgz",
"integrity": "sha1-PVW62VJv9xVphnOFW2a3R8wEXzo=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/source-loader/-/source-loader-6.0.20.tgz",
"integrity": "sha1-a1jMIq7zRFbKbmvtHxPQgdZZgnk=",
"dev": true,
"requires": {
"@storybook/addons": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/csf": "0.0.1",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
@ -5630,15 +5621,15 @@
}
},
"@storybook/theming": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/theming/-/theming-6.0.18.tgz",
"integrity": "sha1-a5m8QiMv8GJcAyxnxJtzAnOVKgE=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/theming/-/theming-6.0.20.tgz",
"integrity": "sha1-p9S5U1Utycx0MUl+x5IHdNIa4k8=",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/is-prop-valid": "^0.8.6",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "6.0.18",
"@storybook/client-logger": "6.0.20",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
@ -5658,21 +5649,21 @@
}
},
"@storybook/ui": {
"version": "6.0.18",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/ui/-/ui-6.0.18.tgz",
"integrity": "sha1-e9g0x3y5mY+jNPsM16r/Um+umJE=",
"version": "6.0.20",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/@storybook/ui/-/ui-6.0.20.tgz",
"integrity": "sha1-jn+NY8iHFAVpk6SEGFqFa3iPw+s=",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@storybook/addons": "6.0.18",
"@storybook/api": "6.0.18",
"@storybook/channels": "6.0.18",
"@storybook/client-logger": "6.0.18",
"@storybook/components": "6.0.18",
"@storybook/core-events": "6.0.18",
"@storybook/router": "6.0.18",
"@storybook/addons": "6.0.20",
"@storybook/api": "6.0.20",
"@storybook/channels": "6.0.20",
"@storybook/client-logger": "6.0.20",
"@storybook/components": "6.0.20",
"@storybook/core-events": "6.0.20",
"@storybook/router": "6.0.20",
"@storybook/semver": "^7.3.2",
"@storybook/theming": "6.0.18",
"@storybook/theming": "6.0.20",
"@types/markdown-to-jsx": "^6.11.0",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
@ -8691,9 +8682,9 @@
}
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=",
"version": "7.2.0",
"resolved": "https://offnet.pkgs.visualstudio.com/officenet/_packaging/fluid/npm/registry/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"requires": {
"has-flag": "^4.0.0"

17
package.json
Просмотреть файл

@ -65,15 +65,16 @@
},
"devDependencies": {
"@fluidframework/build-common": "^0.18.0",
"@storybook/addon-actions": "^6.0.18",
"@storybook/addon-controls": "^6.0.18",
"@storybook/addon-docs": "^6.0.18",
"@storybook/addon-knobs": "^6.0.18",
"@storybook/addon-links": "^6.0.18",
"@storybook/addon-viewport": "^6.0.18",
"@storybook/addons": "^6.0.18",
"@storybook/addon-actions": "^6.0.20",
"@storybook/addon-controls": "^6.0.20",
"@storybook/addon-docs": "^6.0.20",
"@storybook/addon-knobs": "^6.0.20",
"@storybook/addon-links": "^6.0.20",
"@storybook/addon-viewport": "^6.0.20",
"@storybook/addons": "^6.0.20",
"@storybook/react": "^6.0.20",
"@storybook/theming": "^6.0.20",
"@storybook/preset-create-react-app": "^3.1.4",
"@storybook/react": "^6.0.18",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.47",
"@types/react": "^16.9.41",

Двоичные данные
public/fluid-collab.gif
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 625 KiB

После

Ширина:  |  Высота:  |  Размер: 689 KiB

Двоичные данные
public/fluid-collab2.gif Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 625 KiB

21
public/manager-styles.css
Просмотреть файл

@ -73,6 +73,27 @@
}
}
/* Override sidebar menu. A bit hacky but works. */
body > div:last-child {
background-color: #252525;
}
#root {
border-top: 1px solid #fff;
}
#about, #release-notes, #shortcuts {
display: none;
}
.react-draggable {
background: #3e3e3e;
}
button[title="Clear search"], button[title="Clear search"]:hover {
background: transparent;
}
/* Pulled from Storybook's build version of index.html - needed for Hugo <link> embed */
#root[hidden],
#docs-root[hidden] {

4
public/preview-styles.css
Просмотреть файл

@ -26,7 +26,7 @@ div.sbdocs-content {
flex-grow: 1;
justify-content: space-around;
width: 50%;
margin:0 10px;
margin-right: 10px;
box-sizing: border-box;
position: relative;
}
@ -44,7 +44,7 @@ div.sbdocs-content {
box-shadow: 0px 2px 3px 0px rgba(50,50,50,0.11);
text-align: left;
vertical-align: top;
margin: 0 20px;
margin-left: 5px;
animation: zoom 500ms;
-webkit-animation: zoom 500ms;
}

36
solvedIssues.md
Просмотреть файл

@ -9,4 +9,38 @@ https://github.com/mdx-js/mdx/issues/1153
.storybook/main.js webpack entrypoint is for the preview, not for the manager
manager = broader UI
preview = inner guy
preview = inner guy
## How to add a container around a story
import { addons } from '@storybook/addons';
import { DocsContainer } from '@storybook/addon-docs/blocks';
import React from 'react';
export const containerParams = {
docs: {
container: ({ children, context }) => {
const channel = addons.getChannel();
channel.emit('sourcecode/selectedStory', context.parameters.fileName);
return (
<DocsContainer context={context}>
<div>{children}</div>
</DocsContainer>
);
}
}
};
{/* <Meta parameters={{
docs: {
container: ({ children, context }) => {
const channel = addons.getChannel();
channel.emit('sourcecode/selectedStory', context.parameters.fileName);
return (
<DocsContainer context={context}>
<div>{children}</div>
</DocsContainer>
);
}
}
}} /> */}

11
src/fluidObjects/brainstorm/styles.scss
Просмотреть файл

@ -65,7 +65,7 @@ body .sticky-storm {
font-family: cursive;
padding: 0;
margin: 0;
font-size: 14px;
font-size: 13px;
width: 100%;
height: 100%;
overflow: hidden;
@ -159,13 +159,16 @@ button {
}
.userName {
margin-left: auto;
align-self: flex-start;
flex:none;
position: absolute;
right: 0;
top: 0;
margin-top: 55px;
margin-right: 40px;
z-index: 999;
box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.15);
font-weight: bold;
// margin-left: 2em;
margin-top: -15px;
padding: 0em .5em .2em .5em;
background: white;
border-radius: 0.3em;

2
src/stories/0.welcome.stories.mdx
Просмотреть файл

@ -1,4 +1,4 @@
<Meta title="Welcome" />
<Meta title="Welcome" parameters={{ previewTabs: { 'canvas': { hidden: true }, 'fluid/sourcecode-addon/panel': {hidden: true} }} } />
# Welcome to the Fluid Playground

6
src/stories/badge.stories.mdx
Просмотреть файл

@ -1,12 +1,14 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { BadgeContainerFactory } from '../fluidObjects/badge/badgeModel';
<Meta title="React Demos/Badge" component={FluidLoader} />
<Meta title="React Demos/Badge" parameters={{ defaultSrcFile: './src/fluidObjects/badge/badgeModel.tsx'}} />
# Badge Demo
This example demonstrates how to create a badge data object. It allows multiple
users to collaborate in real-time on the status of a document.
users to collaborate in real-time on the status of a document. Select an option from the drop-down
and you'll see that it is passed in real-time to the other collaborator.
<a href="https://ashy-mud-0acebac10.azurestaticapps.net/docs/concepts/dds/" target="_blank">Distributed Data Structures</a> (DDSs) used include:

7
src/stories/brainstorm.stories.mdx
Просмотреть файл

@ -1,10 +1,11 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { NoteroContainerFactory } from "../fluidObjects/brainstorm/container"
import { NoteroView } from "../fluidObjects/brainstorm/view"
import { NoteroView } from "../fluidObjects/brainstorm/view";
<Meta title="React Demos/Brainstorm" component={FluidLoader} />
<Meta title="React Demos/Brainstorm" parameters={{ defaultSrcFile: './src/fluidObjects/brainstorm/fluid-object/main.ts'}} />
# Sticky Storm
# Brainstorm
This example demonstrates how to build a custom idea sharing board. Users can create a "sticky note" with an idea
on it and then add it to the board. Connected users will automatically see the new sticky note and are able

3
src/stories/clicker.stories.mdx
Просмотреть файл

@ -1,7 +1,8 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { ClickerContainerFactory } from '../fluidObjects/clicker/clicker';
<Meta title="React Demos/Clicker" component={FluidLoader} />
<Meta title="React Demos/Clicker" parameters={{ defaultSrcFile: './src/fluidObjects/clicker/clicker.tsx'}} />
# Clicker Demo

3
src/stories/diceRoller.stories.mdx
Просмотреть файл

@ -1,8 +1,9 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { DiceRollerContainer } from '../fluidObjects/diceRoller/DiceRollerContainer';
import { DiceRollerView } from '../fluidObjects/diceRoller/DiceRollerView';
<Meta title="React Demos/Dice Roller" component={FluidLoader} />
<Meta title="React Demos/Dice Roller" parameters={{ defaultSrcFile: './src/fluidObjects/diceRoller/DiceRoller.ts'}} />
# Dice Roller JS

3
src/stories/diceRollerJS.stories.mdx
Просмотреть файл

@ -1,8 +1,9 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { DiceRollerContainer } from '../fluidObjects/diceRollerJS/DiceRollerContainer';
import { DiceRollerView } from '../fluidObjects/diceRollerJS/DiceRollerView';
<Meta title="JS Demos/Dice Roller JS" component={FluidLoader} />
<Meta title="JS Demos/Dice Roller JS" parameters={{ defaultSrcFile: './src/fluidObjects/diceRollerJS/DiceRoller.ts'}} />
# Dice Roller JS

3
src/stories/draft-js.stories.mdx
Просмотреть файл

@ -1,8 +1,9 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { FluidDraftJsContainer } from "../fluidObjects/draft-js/container";
import { FluidDraftJsView } from "../fluidObjects/draft-js/view";
<Meta title="React Demos/Draft-JS" component={FluidLoader} />
<Meta title="React Demos/Draft-JS" parameters={{ defaultSrcFile: './src/fluidObjects/draft-js/fluid-object/FluidDraftJs.tsx'}} />
# Draft-JS

3
src/stories/image-gallery.stories.mdx
Просмотреть файл

@ -1,7 +1,8 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { fluidExport } from '../fluidObjects/image-gallery/image-gallery';
<Meta title="React Demos/Image Gallery" component={FluidLoader} />
<Meta title="React Demos/Image Gallery" parameters={{ defaultSrcFile: './src/fluidObjects/image-gallery/image-gallery.tsx'}} />
# Image Gallery

3
src/stories/prosemirror.stories.mdx
Просмотреть файл

@ -1,7 +1,8 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { fluidExport } from '../fluidObjects/prosemirror/index';
<Meta title="React Demos/ProseMirror" component={FluidLoader} />
<Meta title="React Demos/ProseMirror" parameters={{ defaultSrcFile: './src/fluidObjects/prosemirror/prosemirror.ts'}} />
# ProseMirror

3
src/stories/sudoku.stories.mdx
Просмотреть файл

@ -1,7 +1,8 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { fluidExport } from '../fluidObjects/sudoku/index';
<Meta title="React Demos/Sudoku" component={FluidLoader} />
<Meta title="React Demos/Sudoku" parameters={{ defaultSrcFile: './src/fluidObjects/sudoku/fluidSudoku.tsx'}} />
# Sudoku

3
src/stories/table.stories.mdx
Просмотреть файл

@ -1,7 +1,8 @@
import { Story } from '@storybook/addon-docs/blocks';
import { FluidLoader } from '../fluidRendering/fluidLoader';
import { TableContainerFactory } from '../fluidObjects/table/TableModel';
<Meta title="React Demos/Table" component={FluidLoader} />
<Meta title="React Demos/Table" parameters={{ defaultSrcFile: './src/fluidObjects/table/TableModel.tsx'}} />
# Table Demo