Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@fluentui/code-sandbox

Package Overview
Dependencies
Maintainers
8
Versions
78
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/code-sandbox - npm Package Compare versions

Comparing version 0.47.9 to 0.47.10-experimental.0

dist/dts/src/createCallbackLogFormatter.d.ts

18

dist/commonjs/createCallbackLogFormatter.js
"use strict";
exports.__esModule = true;
exports.createCallbackLogFormatter = void 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;

@@ -11,7 +13,4 @@ var _docsComponents = require("@fluentui/docs-components");

*/
var createCallbackLogFormatter = function createCallbackLogFormatter(props) {
if (props === void 0) {
props = [];
}
var createCallbackLogFormatter = function createCallbackLogFormatter() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return function (name, e, data) {

@@ -22,7 +21,8 @@ var pickedProps = props.reduce(function (acc, propName) {

}, {});
return ["/*[" + new Date().toLocaleTimeString() + "]*/", name + " (e: { \"type\": \"" + (e ? e.type : 'NA') + "\" }, data: " + (0, _docsComponents.formatCode)(JSON.stringify(pickedProps), 'json') + ")"].join(' ');
return ["/*[".concat(new Date().toLocaleTimeString(), "]*/"), "".concat(name, " (e: { \"type\": \"").concat(e ? e.type : 'NA', "\" }, data: ").concat((0, _docsComponents.formatCode)(JSON.stringify(pickedProps), 'json'), ")")].join(' ');
};
};
exports.createCallbackLogFormatter = createCallbackLogFormatter;
var _default = createCallbackLogFormatter;
exports.default = _default;
//# sourceMappingURL=createCallbackLogFormatter.js.map
"use strict";
exports.__esModule = true;
exports.SandboxApp = exports.KnobsSnippet = exports.knobComponents = exports.createCallbackLogFormatter = void 0;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _createCallbackLogFormatter = require("./createCallbackLogFormatter");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createCallbackLogFormatter", {
enumerable: true,
get: function get() {
return _createCallbackLogFormatter.default;
}
});
Object.defineProperty(exports, "knobComponents", {
enumerable: true,
get: function get() {
return _knobComponents.default;
}
});
Object.defineProperty(exports, "KnobsSnippet", {
enumerable: true,
get: function get() {
return _KnobsSnippet.default;
}
});
Object.defineProperty(exports, "SandboxApp", {
enumerable: true,
get: function get() {
return _SandboxApp.default;
}
});
exports.createCallbackLogFormatter = _createCallbackLogFormatter.createCallbackLogFormatter;
var _createCallbackLogFormatter = _interopRequireDefault(require("./createCallbackLogFormatter"));
var _knobComponents = require("./knobComponents");
var _knobComponents = _interopRequireDefault(require("./knobComponents"));
exports.knobComponents = _knobComponents.knobComponents;
var _KnobsSnippet = _interopRequireDefault(require("./KnobsSnippet"));
var _KnobsSnippet = require("./KnobsSnippet");
exports.KnobsSnippet = _KnobsSnippet.KnobsSnippet;
var _SandboxApp = require("./SandboxApp");
exports.SandboxApp = _SandboxApp.SandboxApp;
var _SandboxApp = _interopRequireDefault(require("./SandboxApp"));
//# sourceMappingURL=index.js.map

@@ -5,4 +5,6 @@ "use strict";

exports.__esModule = true;
exports.knobComponents = void 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;

@@ -17,3 +19,3 @@ var _docsComponents = require("@fluentui/docs-components");

KnobBoolean: function KnobBoolean(props) {
return /*#__PURE__*/React.createElement(_reactNorthstar.Checkbox, {
return React.createElement(_reactNorthstar.Checkbox, {
checked: props.value,

@@ -27,7 +29,7 @@ title: "Toggle",

LogInspector: function LogInspector(props) {
return /*#__PURE__*/React.createElement(_reactNorthstar.Segment, {
return React.createElement(_reactNorthstar.Segment, {
styles: {
padding: 0
}
}, /*#__PURE__*/React.createElement("div", {
}, React.createElement("div", {
style: {

@@ -37,9 +39,9 @@ display: 'flex',

}
}, /*#__PURE__*/React.createElement("div", {
}, React.createElement("div", {
style: {
flexGrow: 1
}
}, /*#__PURE__*/React.createElement(_reactNorthstar.Text, {
}, React.createElement(_reactNorthstar.Text, {
weight: "semibold"
}, "Event log"), /*#__PURE__*/React.createElement(_reactNorthstar.Label, {
}, "Event log"), React.createElement(_reactNorthstar.Label, {
circular: true,

@@ -50,6 +52,6 @@ color: "brand",

}
}, props.items.length)), /*#__PURE__*/React.createElement(_reactNorthstar.Button, {
}, props.items.length)), React.createElement(_reactNorthstar.Button, {
onClick: props.clearLog,
size: "small"
}, "Clear")), props.items.length > 0 && /*#__PURE__*/React.createElement(_docsComponents.CodeSnippet, {
}, "Clear")), props.items.length > 0 && React.createElement(_docsComponents.CodeSnippet, {
fitted: true,

@@ -62,3 +64,4 @@ formattable: false,

};
exports.knobComponents = knobComponents;
var _default = knobComponents;
exports.default = _default;
//# sourceMappingURL=knobComponents.js.map

@@ -7,4 +7,6 @@ "use strict";

exports.__esModule = true;
exports.KnobsSnippet = void 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;

@@ -30,4 +32,2 @@ var _fromPairs2 = _interopRequireDefault(require("lodash/fromPairs"));

config = _ref.config;
// createComponent() is not compatible with hooks rules
// eslint-disable-next-line
var knobs = (0, _docsComponents.useKnobValues)();

@@ -37,9 +37,9 @@ var values = (0, _fromPairs2.default)(knobs.map(function (knob) {

}));
return /*#__PURE__*/React.createElement(_reactNorthstar.Flex, null, /*#__PURE__*/React.createElement("div", {
return React.createElement(_reactNorthstar.Flex, null, React.createElement("div", {
className: config.classes.root
}, children), /*#__PURE__*/React.createElement(_reactNorthstar.Flex.Item, {
}, children), React.createElement(_reactNorthstar.Flex.Item, {
grow: true
}, function (_ref2) {
var classes = _ref2.classes;
return /*#__PURE__*/React.createElement(_docsComponents.CodeSnippet, {
return React.createElement(_docsComponents.CodeSnippet, {
className: classes,

@@ -55,6 +55,7 @@ copyable: false,

});
exports.KnobsSnippet = KnobsSnippet;
KnobsSnippet.defaultProps = {
styles: knobsSnippetStyles
};
var _default = KnobsSnippet;
exports.default = _default;
//# sourceMappingURL=KnobsSnippet.js.map

@@ -7,5 +7,9 @@ "use strict";

exports.__esModule = true;
exports.SandboxApp = void 0;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _docsComponents = require("@fluentui/docs-components");

@@ -19,5 +23,5 @@

var _KnobsSnippet = require("./KnobsSnippet");
var _KnobsSnippet = _interopRequireDefault(require("./KnobsSnippet"));
var _knobComponents = require("./knobComponents");
var _knobComponents = _interopRequireDefault(require("./knobComponents"));

@@ -28,17 +32,12 @@ // @ts-ignore

label: 'Teams Light',
value: 'teamsTheme'
value: 'teams'
}, {
key: 'dark',
label: 'Teams Dark',
value: 'teamsDarkTheme'
value: 'teamsDark'
}, {
key: 'hc',
label: 'Teams High Contrast',
value: 'teamsHighContrastTheme'
value: 'teamsHighContrast'
}];
var themes = {
teamsTheme: _reactNorthstar.teamsTheme,
teamsDarkTheme: _reactNorthstar.teamsDarkTheme,
teamsHighContrastTheme: _reactNorthstar.teamsHighContrastTheme
};

@@ -49,7 +48,8 @@ var SandboxApp = function SandboxApp(props) {

var _React$useState = React.useState(items[0].value),
theme = _React$useState[0],
setTheme = _React$useState[1];
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
theme = _React$useState2[0],
setTheme = _React$useState2[1];
return /*#__PURE__*/React.createElement(_reactNorthstar.Provider, {
theme: themes[theme],
return React.createElement(_reactNorthstar.Provider, {
theme: _reactNorthstar.themes[theme],
styles: {

@@ -59,14 +59,14 @@ height: '100vh',

}
}, /*#__PURE__*/React.createElement("link", {
}, React.createElement("link", {
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/prismjs@1.16.0/themes/prism-tomorrow.min.css"
}), /*#__PURE__*/React.createElement(_docsComponents.KnobProvider, {
components: _knobComponents.knobComponents
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_reactNorthstar.Header, null, "Fluent UI @ ", _package.default.version), /*#__PURE__*/React.createElement("p", null, "This example is powered by Fluent UI, check", ' ', /*#__PURE__*/React.createElement(_reactNorthstar.Text, {
}), React.createElement(_docsComponents.KnobProvider, {
components: _knobComponents.default
}, React.createElement("div", null, React.createElement(_reactNorthstar.Header, null, "Fluent UI @ ", _package.default.version), React.createElement("p", null, "This example is powered by Fluent UI, check", ' ', React.createElement(_reactNorthstar.Text, {
as: "a",
href: "https://aka.ms/fluent-ui"
}, "our docs"), ' ', "and", ' ', /*#__PURE__*/React.createElement(_reactNorthstar.Text, {
}, "our docs"), ' ', "and", ' ', React.createElement(_reactNorthstar.Text, {
as: "a",
href: "https://github.com/microsoft/fluentui"
}, "GitHub"), "."), /*#__PURE__*/React.createElement(_reactNorthstar.Flex, null, "Select theme:", /*#__PURE__*/React.createElement(_reactNorthstar.RadioGroup, {
href: "https://github.com/OfficeDev/office-ui-fabric-react"
}, "GitHub"), "."), React.createElement(_reactNorthstar.Flex, null, "Select theme:", React.createElement(_reactNorthstar.RadioGroup, {
onCheckedValueChange: function onCheckedValueChange(e, data) {

@@ -77,8 +77,9 @@ return setTheme(data.value);

items: items
})), /*#__PURE__*/React.createElement(_reactNorthstar.Divider, null), /*#__PURE__*/React.createElement(_docsComponents.KnobInspector, null, function (knobs) {
return knobs && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_KnobsSnippet.KnobsSnippet, null, knobs), /*#__PURE__*/React.createElement(_reactNorthstar.Divider, null));
})), React.createElement(_reactNorthstar.Divider, null), React.createElement(_docsComponents.KnobInspector, null, function (knobs) {
return knobs && React.createElement(React.Fragment, null, React.createElement(_KnobsSnippet.default, null, knobs), React.createElement(_reactNorthstar.Divider, null));
}), children)));
};
exports.SandboxApp = SandboxApp;
var _default = SandboxApp;
exports.default = _default;
//# sourceMappingURL=SandboxApp.js.map

@@ -5,2 +5,3 @@ import * as React from 'react';

*/
export declare const createCallbackLogFormatter: (props?: string[]) => (name: string, e: React.SyntheticEvent<Element, Event>, data: Object) => string;
declare const createCallbackLogFormatter: (props?: string[]) => (name: string, e: React.SyntheticEvent<Element, Event>, data: Object) => string;
export default createCallbackLogFormatter;

@@ -6,7 +6,4 @@ import { formatCode } from '@fluentui/docs-components';

*/
export var createCallbackLogFormatter = function createCallbackLogFormatter(props) {
if (props === void 0) {
props = [];
}
var createCallbackLogFormatter = function createCallbackLogFormatter() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return function (name, e, data) {

@@ -17,5 +14,7 @@ var pickedProps = props.reduce(function (acc, propName) {

}, {});
return ["/*[" + new Date().toLocaleTimeString() + "]*/", name + " (e: { \"type\": \"" + (e ? e.type : 'NA') + "\" }, data: " + formatCode(JSON.stringify(pickedProps), 'json') + ")"].join(' ');
return ["/*[".concat(new Date().toLocaleTimeString(), "]*/"), "".concat(name, " (e: { \"type\": \"").concat(e ? e.type : 'NA', "\" }, data: ").concat(formatCode(JSON.stringify(pickedProps), 'json'), ")")].join(' ');
};
};
export default createCallbackLogFormatter;
//# sourceMappingURL=createCallbackLogFormatter.js.map

@@ -1,4 +0,4 @@

export { createCallbackLogFormatter } from './createCallbackLogFormatter';
export { knobComponents } from './knobComponents';
export { KnobsSnippet } from './KnobsSnippet';
export { SandboxApp } from './SandboxApp';
export { default as createCallbackLogFormatter } from './createCallbackLogFormatter';
export { default as knobComponents } from './knobComponents';
export { default as KnobsSnippet } from './KnobsSnippet';
export { default as SandboxApp } from './SandboxApp';

@@ -1,5 +0,5 @@

export { createCallbackLogFormatter } from './createCallbackLogFormatter';
export { knobComponents } from './knobComponents';
export { KnobsSnippet } from './KnobsSnippet';
export { SandboxApp } from './SandboxApp';
export { default as createCallbackLogFormatter } from './createCallbackLogFormatter';
export { default as knobComponents } from './knobComponents';
export { default as KnobsSnippet } from './KnobsSnippet';
export { default as SandboxApp } from './SandboxApp';
//# sourceMappingURL=index.js.map
import { KnobComponents } from '@fluentui/docs-components';
export declare const knobComponents: Partial<KnobComponents>;
declare const knobComponents: Partial<KnobComponents>;
export default knobComponents;
import { CodeSnippet } from '@fluentui/docs-components';
import { Button, Checkbox, Label, Segment, Text } from '@fluentui/react-northstar';
import * as React from 'react';
export var knobComponents = {
var knobComponents = {
KnobBoolean: function KnobBoolean(props) {
return /*#__PURE__*/React.createElement(Checkbox, {
return React.createElement(Checkbox, {
checked: props.value,

@@ -15,7 +15,7 @@ title: "Toggle",

LogInspector: function LogInspector(props) {
return /*#__PURE__*/React.createElement(Segment, {
return React.createElement(Segment, {
styles: {
padding: 0
}
}, /*#__PURE__*/React.createElement("div", {
}, React.createElement("div", {
style: {

@@ -25,9 +25,9 @@ display: 'flex',

}
}, /*#__PURE__*/React.createElement("div", {
}, React.createElement("div", {
style: {
flexGrow: 1
}
}, /*#__PURE__*/React.createElement(Text, {
}, React.createElement(Text, {
weight: "semibold"
}, "Event log"), /*#__PURE__*/React.createElement(Label, {
}, "Event log"), React.createElement(Label, {
circular: true,

@@ -38,6 +38,6 @@ color: "brand",

}
}, props.items.length)), /*#__PURE__*/React.createElement(Button, {
}, props.items.length)), React.createElement(Button, {
onClick: props.clearLog,
size: "small"
}, "Clear")), props.items.length > 0 && /*#__PURE__*/React.createElement(CodeSnippet, {
}, "Clear")), props.items.length > 0 && React.createElement(CodeSnippet, {
fitted: true,

@@ -50,2 +50,3 @@ formattable: false,

};
export default knobComponents;
//# sourceMappingURL=knobComponents.js.map

@@ -1,1 +0,2 @@

export declare const KnobsSnippet: import("../../react-northstar/src/utils/createComponentInternal").CreateComponentReturnType<any>;
declare const KnobsSnippet: import("../../react-northstar/src/utils/createComponentInternal").CreateComponentReturnType<any>;
export default KnobsSnippet;

@@ -11,38 +11,34 @@ import _fromPairs from "lodash/fromPairs";

};
export var KnobsSnippet = /*#__PURE__*/function () {
var KnobsSnippet = createComponent({
displayName: 'KnobsSnippet',
render: function render(_ref) {
var children = _ref.children,
config = _ref.config;
// createComponent() is not compatible with hooks rules
// eslint-disable-next-line
var knobs = useKnobValues();
var KnobsSnippet = createComponent({
displayName: 'KnobsSnippet',
render: function render(_ref) {
var children = _ref.children,
config = _ref.config;
var knobs = useKnobValues();
var values = _fromPairs(knobs.map(function (knob) {
return [knob.name, knob.value];
}));
var values = _fromPairs(knobs.map(function (knob) {
return [knob.name, knob.value];
}));
return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("div", {
className: config.classes.root
}, children), /*#__PURE__*/React.createElement(Flex.Item, {
grow: true
}, function (_ref2) {
var classes = _ref2.classes;
return /*#__PURE__*/React.createElement(CodeSnippet, {
className: classes,
copyable: false,
fitted: true,
label: "Knobs",
mode: "json",
value: JSON.stringify(values, null, 2)
});
}));
}
});
KnobsSnippet.defaultProps = {
styles: knobsSnippetStyles
};
return KnobsSnippet;
}();
return React.createElement(Flex, null, React.createElement("div", {
className: config.classes.root
}, children), React.createElement(Flex.Item, {
grow: true
}, function (_ref2) {
var classes = _ref2.classes;
return React.createElement(CodeSnippet, {
className: classes,
copyable: false,
fitted: true,
label: "Knobs",
mode: "json",
value: JSON.stringify(values, null, 2)
});
}));
}
});
KnobsSnippet.defaultProps = {
styles: knobsSnippetStyles
};
export default KnobsSnippet;
//# sourceMappingURL=KnobsSnippet.js.map
import * as React from 'react';
export declare const SandboxApp: React.FunctionComponent;
declare const SandboxApp: React.FunctionComponent;
export default SandboxApp;

@@ -0,34 +1,32 @@

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { KnobInspector, KnobProvider } from '@fluentui/docs-components';
import { Divider, Flex, Header, Provider, RadioGroup, Text, teamsTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-northstar'; // @ts-ignore
import { Divider, Flex, Header, Provider, RadioGroup, Text, themes } from '@fluentui/react-northstar'; // @ts-ignore
import pkg from '@fluentui/react-northstar/package.json';
import * as React from 'react';
import { KnobsSnippet } from './KnobsSnippet';
import { knobComponents } from './knobComponents';
import KnobsSnippet from './KnobsSnippet';
import knobComponents from './knobComponents';
var items = [{
key: 'light',
label: 'Teams Light',
value: 'teamsTheme'
value: 'teams'
}, {
key: 'dark',
label: 'Teams Dark',
value: 'teamsDarkTheme'
value: 'teamsDark'
}, {
key: 'hc',
label: 'Teams High Contrast',
value: 'teamsHighContrastTheme'
value: 'teamsHighContrast'
}];
var themes = {
teamsTheme: teamsTheme,
teamsDarkTheme: teamsDarkTheme,
teamsHighContrastTheme: teamsHighContrastTheme
};
export var SandboxApp = function SandboxApp(props) {
var SandboxApp = function SandboxApp(props) {
var children = props.children;
var _React$useState = React.useState(items[0].value),
theme = _React$useState[0],
setTheme = _React$useState[1];
_React$useState2 = _slicedToArray(_React$useState, 2),
theme = _React$useState2[0],
setTheme = _React$useState2[1];
return /*#__PURE__*/React.createElement(Provider, {
return React.createElement(Provider, {
theme: themes[theme],

@@ -39,14 +37,14 @@ styles: {

}
}, /*#__PURE__*/React.createElement("link", {
}, React.createElement("link", {
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/prismjs@1.16.0/themes/prism-tomorrow.min.css"
}), /*#__PURE__*/React.createElement(KnobProvider, {
}), React.createElement(KnobProvider, {
components: knobComponents
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, "Fluent UI @ ", pkg.version), /*#__PURE__*/React.createElement("p", null, "This example is powered by Fluent UI, check", ' ', /*#__PURE__*/React.createElement(Text, {
}, React.createElement("div", null, React.createElement(Header, null, "Fluent UI @ ", pkg.version), React.createElement("p", null, "This example is powered by Fluent UI, check", ' ', React.createElement(Text, {
as: "a",
href: "https://aka.ms/fluent-ui"
}, "our docs"), ' ', "and", ' ', /*#__PURE__*/React.createElement(Text, {
}, "our docs"), ' ', "and", ' ', React.createElement(Text, {
as: "a",
href: "https://github.com/microsoft/fluentui"
}, "GitHub"), "."), /*#__PURE__*/React.createElement(Flex, null, "Select theme:", /*#__PURE__*/React.createElement(RadioGroup, {
href: "https://github.com/OfficeDev/office-ui-fabric-react"
}, "GitHub"), "."), React.createElement(Flex, null, "Select theme:", React.createElement(RadioGroup, {
onCheckedValueChange: function onCheckedValueChange(e, data) {

@@ -57,6 +55,8 @@ return setTheme(data.value);

items: items
})), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(KnobInspector, null, function (knobs) {
return knobs && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KnobsSnippet, null, knobs), /*#__PURE__*/React.createElement(Divider, null));
})), React.createElement(Divider, null), React.createElement(KnobInspector, null, function (knobs) {
return knobs && React.createElement(React.Fragment, null, React.createElement(KnobsSnippet, null, knobs), React.createElement(Divider, null));
}), children)));
};
export default SandboxApp;
//# sourceMappingURL=SandboxApp.js.map
{
"name": "@fluentui/code-sandbox",
"description": "Fluent UI tools for CodeSandbox.",
"version": "0.47.9",
"version": "0.47.10-experimental.0",
"author": "Oleksandr Fediashov <a@fedyashov.com>",
"bugs": "https://github.com/OfficeDev/office-ui-fabric-react/issues",
"dependencies": {
"@fluentui/docs-components": "^0.47.9"
"@fluentui/docs-components": "^0.47.10-experimental.0"
},
"devDependencies": {
"@fluentui/react-northstar": "^0.47.9"
"@fluentui/react-northstar": "^0.47.10-experimental.0"
},

@@ -40,3 +40,3 @@ "files": [

"types": "dist/es/index.d.ts",
"gitHead": "9c61c7f71c84db004cc90a524d27ee06ebfd00f3"
"gitHead": "44cf34f59f25f7d0bf2c7cfb237c879368a2ce2b"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc