npmpackage.info

Gathering detailed insights and metrics for @uifabric/example-app-base

@uifabric/example-app-base

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

7.22.33

18,800

NOASSERTION

TypeScript

3.85 MB

374,968 6.4

Installations

npm install @uifabric/example-app-base

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.18.1

NPM Version

6.14.15 Pull Requests

Open

154

Total

19,452

Closed

2,777

Merged

16,521

Issues

Open

473

Total

13,088

Closed

12,615

Releases

18,175

@fluentui/react-monaco-editor v1.7.288

@fluentui/react-monaco-editor_v1.7.288

Published on 31 Jan 2025

@fluentui/react-docsite-components v8.13.170

@fluentui/react-docsite-components_v8.13.170

Published on 31 Jan 2025

@fluentui/react-charting v5.23.50

@fluentui/react-charting_v5.23.50

Published on 31 Jan 2025

@fluentui/react-monaco-editor v1.7.287

@fluentui/react-monaco-editor_v1.7.287

Published on 30 Jan 2025

@fluentui/react-docsite-components v8.13.169

@fluentui/react-docsite-components_v8.13.169

Published on 30 Jan 2025

@fluentui/react-charting v5.23.49

@fluentui/react-charting_v5.23.49

Published on 30 Jan 2025

View all 18,175 releases

Contributors

897

View all 897 contributors

Languages

TypeScript

JavaScript

MDX

SCSS

HTML

CSS

Shell

EJS

Handlebars

Dockerfile

TypeScript (95.72%)

JavaScript (1.81%)

MDX (1.6%)

SCSS (0.51%)

HTML (0.2%)

CSS (0.15%)

Shell (0.01%)

EJS (0.01%)

Developer

microsoft

Download Statistics

Total Downloads

374,968

Last Day

Last Week

599

Last Month

3,335

Last Year

36,155

GitHub Statistics

18,800 Stars

18,997 Commits

2,762 Forks

289 Watching

95 Branches

897 Contributors

Maintainers

Package Meta Information

Latest Version

7.22.33

Package Id

@uifabric/example-app-base@7.22.33

Unpacked Size

3.85 MB

Size

591.04 kB

File Count

1,669

NPM Version

6.14.15

Node Version

14.18.1

Publised On

27 Jan 2023

Total Downloads

Cumulative downloads

Total Downloads

374,968

Last day

-24.6%

Compared to previous day

Last week

-47.6%

599

Compared to previous week

Last month

22.3%

3,335

Compared to previous month

Last year

2.6%

36,155

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

@uifabric/example-app-base

Components and utilities used to build internal documentation sites and inner loops for various Fluent UI React (formerly Office UI Fabric React) packages.

This package is in maintenance mode while we work on a replacement. It should only be used in new projects if you must have a published documentation site that looks like the official Fluent UI React docs. If all you need is an inner loop for component development, please use Storybook instead. Storybook is a well-supported, well-documented platform for component development and documentation.

Live editor support

To set up the live code editor in the demo app for a package other than the @fluentui/react package itself:

Follow the setup steps from the @uifabric/monaco-editor readme (the helpers mentioned are also re-exported from @uifabric/tsx-editor for convenience).
Set up a .d.ts rollup file for your package using API Extractor.
Add a dependency on raw-loader to the package containing your demo app.
Define the custom list of supported packages. For demonstration purposes, we'll assume:
- You're building off the default set of supported packages
- The package you're demoing is my-package
- my-package re-exports another package called my-package-utilities (it's not required that your package export anything else, but this is included to demonstrate setting it up)
- Each package's .d.ts rollup lives under <package-folder>/dist/<unscoped-package-name>.d.ts

1import { IPackageGroup } from '@uifabric/tsx-editor';
2import { defaultSupportedPackages } from '@uifabric/tsx-editor/lib/utilities/defaultSupportedPackages';
3
4export const editorSupportedPackages: IPackageGroup[] = [
5  ...defaultSupportedPackages,
6  {
7    // Package's exports will be made available under this global name at runtime
8    globalName: 'MyPackage',
9    // Loader for the package's contents
10    loadGlobal: () => import('my-package'),
11    // Alternatively, for non-delayed loading:
12    //   loadGlobal: () => require('my-package'),
13    // Or at the top of the file, `import * as MyPackage from 'my-package'`, then:
14    //   loadGlobal: () => Promise.resolve(MyPackage)
15    packages: [
16      {
17        packageName: 'my-package',
18        loadTypes: () => {
19          // Use import() so the types can potentially be split into a separate chunk and delay loaded.
20          // If you don't care about that, you could use require() instead.
21          // @ts-ignore: import is handled by webpack
22          return import('!raw-loader!my-package/dist/my-package.d.ts');
23        },
24      },
25      {
26        // my-package re-exports my-package-utilities from its root, so it goes under the same global
27        packageName: 'my-package-utilities',
28        loadTypes: () => {
29          // @ts-ignore: import is handled by webpack
30          return import('!raw-loader!my-package-utilities/dist/my-package-utilities.d.ts');
31        },
32      },
33    ],
34  },
35];

To apply to a single ExampleCard:

1import { editorSupportedPackages } from '<file path>';
2import { MyExample } from './MyExample.Example';
3const MyExampleCode = require('!raw-loader!./MyExample.Example.tsx');
4
5<ExampleCard title="My example" code={MyExampleCode} editorSupportedPackages={editorSupportedPackages}>
6  <MyExample />
7</ExampleCard>;

To apply to all ExampleCard instances in your app:

1import { editorSupportedPackages } from '<file path>';
2import { IExampleCardProps, IAppDefinition } from '@uifabric/example-app-base';
3
4const exampleCardProps: IExampleCardProps = { editorSupportedPackages };
5
6// same applies with ISiteDefinition
7const appDefinition: IAppDefinition = {
8  // ...
9  customizations: {
10    scopedSettings: {
11      ExampleCard: exampleCardProps,
12    },
13  },
14};

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

5

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/actions-mention-to-teams.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/actions-mention-to-teams.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-packages.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/check-packages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docsite-publish.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/docsite-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-housekeeping.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/pr-housekeeping.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:116: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:137: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:148: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:158: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-build.yml:169: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:139: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/screener-run.yml:144: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:150: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/screener-run.yml:182: update your workflow using https://app.stepsecurity.io/secureworkflow/karansuryadevra/introducing-go-the-book/screener-run.yml/main?enable=pin
Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:5: pin your Docker image by updating mcr.microsoft.com/vscode/devcontainers/javascript-node to mcr.microsoft.com/vscode/devcontainers/javascript-node@sha256:28d382643a2f24b421c5ae65661cb8dec3f4735fdb7427be1634d20aa12466f4
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6.4

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@uifabric/example-app-base

Installations

Developer Guide

No

CommonJS

14.18.1

6.14.15

Pull Requests

154

19,452

2,777

16,521

Issues

473

13,088

12,615

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

374,968

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@uifabric/example-app-base

Live editor support

10

10

10

10

10

10

9

8

5

0

0

0

0

6.4

/10