diff --git a/.licenserc.json b/.licenserc.json index 04830fd..5e7ce63 100644 --- a/.licenserc.json +++ b/.licenserc.json @@ -1,15 +1,15 @@ { "**/*.{js, ts, tsx}": [ - "/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors", - "SPDX-License-Identifier: GPL-3.0-only */" + "/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors", + "SPDX-License-Identifier: MIT */" ], "**/*.scss": [ - "/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors", - "SPDX-License-Identifier: GPL-3.0-only */" + "/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors", + "SPDX-License-Identifier: MIT */" ], "**/*.cjs": [ - "// Copyright 2024 @polkadot-cloud/frontpage authors & contributors", - "// SPDX-License-Identifier: GPL-3.0-only" + "// Copyright 2024 @polkadot-ui/frontpage authors & contributors", + "// SPDX-License-Identifier: MIT" ], "ignore": ["testdata", "npm"] } diff --git a/.prettierrc.cjs b/.prettierrc.cjs index c9149bd..a8159e7 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -1,5 +1,5 @@ -// Copyright 2024 @polkadot-cloud/frontpage authors & contributors", -// SPDX-License-Identifier: GPL-3.0-only +// Copyright 2024 @polkadot-ui/frontpage authors & contributors", +// SPDX-License-Identifier: MIT module.exports = { arrowParens: "always", diff --git a/LICENSE b/LICENSE index 8047e8c..aa50fc2 100644 --- a/LICENSE +++ b/LICENSE @@ -652,7 +652,7 @@ Also add information on how to contact you by electronic and paper mail. If the program does terminal interaction, make it output a short notice like this when it starts in an interactive mode: - Polkadot Cloud Copyright (C) 2023-2024 Ross Bulat - Nikolaos Kontakis + Polkadot UI Copyright (C) 2023-2024 Ross Bulat - Nikolaos Kontakis This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. This is free software, and you are welcome to redistribute it under certain conditions; type `show c' for details. diff --git a/README.md b/README.md index 65e2f8d..bda79dd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -[![Polkadot - Cloud](https://img.shields.io/badge/Polkadot-Assets-E6007A?logo=polkadot&logoColor=E6007A)]([https://github.com/polkadot-cloud/frontpage]) ![ci](https://github.com/polkadot-cloud/frontpage/actions/workflows/main.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL_3.0_only-blue.svg)](https://opensource.org/license/gpl-3-0/) +[![Polkadot - UI](https://img.shields.io/badge/Polkadot-Assets-E6007A?logo=polkadot&logoColor=E6007A)]([https://github.com/polkadot-ui/frontpage]) ![ci](https://github.com/polkadot-ui/frontpage/actions/workflows/main.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL_3.0_only-blue.svg)](https://opensource.org/license/gpl-3-0/) -# Polkadot Cloud Front Page +# Polkadot UI Front Page -Polkadot Cloud is a library and platform for developing and publishing Polkadot development assets. +Polkadot UI is a library and platform for developing and publishing Polkadot development assets. diff --git a/index.html b/index.html index f5f7274..4f50d25 100644 --- a/index.html +++ b/index.html @@ -28,40 +28,40 @@ - +
Web3 wallet extension data can be imported from{" "}
@@ -38,7 +38,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
{" "}
and{" "}
@@ -157,7 +157,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
To open a PR and add additional extensions to this list, refer to the
instructions hosted in this package's{" "}
diff --git a/src/docs/Assets/Validators/ValidatorOperator.tsx b/src/docs/Assets/Validators/ValidatorOperator.tsx
index 895bf2b..617d7fe 100644
--- a/src/docs/Assets/Validators/ValidatorOperator.tsx
+++ b/src/docs/Assets/Validators/ValidatorOperator.tsx
@@ -1,12 +1,12 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../lib/SimpleEditor";
export const ValidatorOperator = () => {
const code = `// Import validator community object.
-import { ValidatorCommunity } from '@polkadot-cloud/assets/validators';`;
+import { ValidatorCommunity } from '@polkadot-ui/assets/validators';`;
return
A list of validator operators are available as a{" "}
@@ -40,7 +40,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
To open a PR to add an additional validator operator to this list,
refer to the instructions hosted in this package's{" "}
diff --git a/src/docs/Components/Connect/ExtensionAccountsProvider/AccountsExample.tsx b/src/docs/Components/Connect/ExtensionAccountsProvider/AccountsExample.tsx
index be5e050..91b1ed7 100644
--- a/src/docs/Components/Connect/ExtensionAccountsProvider/AccountsExample.tsx
+++ b/src/docs/Components/Connect/ExtensionAccountsProvider/AccountsExample.tsx
@@ -1,12 +1,12 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../../lib/SimpleEditor";
export const AccountsExample = () => {
const code = `import {
useExtensionAccounts,
-} from '@polkadot-cloud/react/hooks';
+} from '@polkadot-ui/react/hooks';
const ConnectedAccounts = () => {
const { extensionAccounts } = useExtensionAccounts();
diff --git a/src/docs/Components/Connect/ExtensionAccountsProvider/ConnectExample.tsx b/src/docs/Components/Connect/ExtensionAccountsProvider/ConnectExample.tsx
index 9658394..e6518e2 100644
--- a/src/docs/Components/Connect/ExtensionAccountsProvider/ConnectExample.tsx
+++ b/src/docs/Components/Connect/ExtensionAccountsProvider/ConnectExample.tsx
@@ -1,12 +1,12 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../../lib/SimpleEditor";
export const ConnectExample = () => {
const code = `import {
useExtensionAccounts,
- } from '@polkadot-cloud/react/hooks';
+ } from '@polkadot-ui/react/hooks';
const ConnectAccounts = () => {
const { connectExtensionAccounts } = useExtensionAccounts();
diff --git a/src/docs/Components/Connect/ExtensionAccountsProvider/ProviderExample.tsx b/src/docs/Components/Connect/ExtensionAccountsProvider/ProviderExample.tsx
index 5ef0829..1f5b6a4 100644
--- a/src/docs/Components/Connect/ExtensionAccountsProvider/ProviderExample.tsx
+++ b/src/docs/Components/Connect/ExtensionAccountsProvider/ProviderExample.tsx
@@ -1,5 +1,5 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../../lib/SimpleEditor";
@@ -7,7 +7,7 @@ export const ProviderExample = () => {
const code = `import {
ExtensionsProvider,
ExtensionAccountsProvider,
- } from '@polkadot-cloud/react/providers';
+ } from '@polkadot-ui/react/providers';
const AppWithProviders = () => {
diff --git a/src/docs/Components/Connect/ExtensionAccountsProvider/index.tsx b/src/docs/Components/Connect/ExtensionAccountsProvider/index.tsx
index 7045588..1251554 100644
--- a/src/docs/Components/Connect/ExtensionAccountsProvider/index.tsx
+++ b/src/docs/Components/Connect/ExtensionAccountsProvider/index.tsx
@@ -1,12 +1,12 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { Doc } from "./main";
export const ExtensionAccountsProvider = () => (
diff --git a/src/docs/Components/Connect/ExtensionsProvider/HookExample.tsx b/src/docs/Components/Connect/ExtensionsProvider/HookExample.tsx
index be75c94..51452b1 100644
--- a/src/docs/Components/Connect/ExtensionsProvider/HookExample.tsx
+++ b/src/docs/Components/Connect/ExtensionsProvider/HookExample.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../../lib/SimpleEditor";
export const HookExample = () => {
- const code = `import { useExtensions } from '@polkadot-cloud/react/hooks';
+ const code = `import { useExtensions } from '@polkadot-ui/react/hooks';
const App = () => {
const { extensions } = useExtensions();
diff --git a/src/docs/Components/Connect/ExtensionsProvider/ProviderExample.tsx b/src/docs/Components/Connect/ExtensionsProvider/ProviderExample.tsx
index 7db5c0c..a3786cf 100644
--- a/src/docs/Components/Connect/ExtensionsProvider/ProviderExample.tsx
+++ b/src/docs/Components/Connect/ExtensionsProvider/ProviderExample.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../../lib/SimpleEditor";
export const ProviderExample = () => {
- const code = `import { ExtensionsProvider } from '@polkadot-cloud/react/providers';
+ const code = `import { ExtensionsProvider } from '@polkadot-ui/react/providers';
const AppWithProvider = () => (
diff --git a/src/docs/Components/Odometer/OdometerH1.tsx b/src/docs/Components/Odometer/OdometerH1.tsx
index db3bbcc..0ecb0c5 100644
--- a/src/docs/Components/Odometer/OdometerH1.tsx
+++ b/src/docs/Components/Odometer/OdometerH1.tsx
@@ -1,9 +1,9 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { useState } from "react";
import { SimpleEditor } from "../../lib/SimpleEditor";
-import { Odometer } from "@polkadot-cloud/react/complex/Odometer";
+import { Odometer } from "@polkadot-ui/react/complex/Odometer";
import BigNumber from "bignumber.js";
import { Demo } from "../../lib/Demo";
diff --git a/src/docs/Components/Odometer/index.tsx b/src/docs/Components/Odometer/index.tsx
index 76b42ec..baf70e7 100644
--- a/src/docs/Components/Odometer/index.tsx
+++ b/src/docs/Components/Odometer/index.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { Doc } from "./main";
export const Odometer = () => (
diff --git a/src/docs/Components/Overlay/OpenOverlay.tsx b/src/docs/Components/Overlay/OpenOverlay.tsx
index e7c51f7..b0eed8f 100644
--- a/src/docs/Components/Overlay/OpenOverlay.tsx
+++ b/src/docs/Components/Overlay/OpenOverlay.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../lib/SimpleEditor";
export const OpenOverlay = () => {
- const code = `import { useOverlay } from '@polkadot-cloud/react/hooks';
+ const code = `import { useOverlay } from '@polkadot-ui/react/hooks';
export const AppComponent = () => {
const { openModal } = useOverlay().modal;
diff --git a/src/docs/Components/Overlay/OverlayBasic.tsx b/src/docs/Components/Overlay/OverlayBasic.tsx
index 18bf461..8d8c729 100644
--- a/src/docs/Components/Overlay/OverlayBasic.tsx
+++ b/src/docs/Components/Overlay/OverlayBasic.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../lib/SimpleEditor";
export const OverlayBasic = () => {
- const code = `import { Overlay } from '@polkadot-cloud/react';
+ const code = `import { Overlay } from '@polkadot-ui/react';
import { MyModal, AnotherModal } from './modals';
import { FallbackModal } from './fallback-modal';
diff --git a/src/docs/Components/Overlay/OverlayConfig.tsx b/src/docs/Components/Overlay/OverlayConfig.tsx
index 1e4e423..c3eba25 100644
--- a/src/docs/Components/Overlay/OverlayConfig.tsx
+++ b/src/docs/Components/Overlay/OverlayConfig.tsx
@@ -1,5 +1,5 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../lib/SimpleEditor";
diff --git a/src/docs/Components/Overlay/OverlayProvider.tsx b/src/docs/Components/Overlay/OverlayProvider.tsx
index 240fccc..5a9d716 100644
--- a/src/docs/Components/Overlay/OverlayProvider.tsx
+++ b/src/docs/Components/Overlay/OverlayProvider.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { SimpleEditor } from "../../lib/SimpleEditor";
export const OverlayProvider = () => {
- const code = `import { OverlayProvider } from '@polkadot-cloud/react/providers';
+ const code = `import { OverlayProvider } from '@polkadot-ui/react/providers';
const AppWithProvider = () => (
An{" "}
@@ -32,7 +32,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
{" "}
context and{" "}
diff --git a/src/docs/Components/Polkicon/PolkiconColors.tsx b/src/docs/Components/Polkicon/PolkiconColors.tsx
index e072ffa..c238172 100644
--- a/src/docs/Components/Polkicon/PolkiconColors.tsx
+++ b/src/docs/Components/Polkicon/PolkiconColors.tsx
@@ -1,7 +1,7 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
-import { Polkicon } from "@polkadot-cloud/react/icons/Polkicon";
+import { Polkicon } from "@polkadot-ui/react/icons/Polkicon";
import { SimpleEditor } from "../../lib/SimpleEditor";
import { Demo } from "../../lib/Demo";
diff --git a/src/docs/Components/Polkicon/PolkiconCopy.tsx b/src/docs/Components/Polkicon/PolkiconCopy.tsx
index 299e296..cf5afc8 100644
--- a/src/docs/Components/Polkicon/PolkiconCopy.tsx
+++ b/src/docs/Components/Polkicon/PolkiconCopy.tsx
@@ -1,7 +1,7 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
-import { Polkicon } from "@polkadot-cloud/react/icons/Polkicon";
+import { Polkicon } from "@polkadot-ui/react/icons/Polkicon";
import { SimpleEditor } from "../../lib/SimpleEditor";
import { Demo } from "../../lib/Demo";
diff --git a/src/docs/Components/Polkicon/PolkiconSize.tsx b/src/docs/Components/Polkicon/PolkiconSize.tsx
index d1133ce..f7f8724 100644
--- a/src/docs/Components/Polkicon/PolkiconSize.tsx
+++ b/src/docs/Components/Polkicon/PolkiconSize.tsx
@@ -1,7 +1,7 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
-import { Polkicon } from "@polkadot-cloud/react/icons/Polkicon";
+import { Polkicon } from "@polkadot-ui/react/icons/Polkicon";
import { SimpleEditor } from "../../lib/SimpleEditor";
import { Demo } from "../../lib/Demo";
diff --git a/src/docs/Components/Polkicon/PolkiconTheme.tsx b/src/docs/Components/Polkicon/PolkiconTheme.tsx
index 0fa1b0e..0db0630 100644
--- a/src/docs/Components/Polkicon/PolkiconTheme.tsx
+++ b/src/docs/Components/Polkicon/PolkiconTheme.tsx
@@ -1,7 +1,7 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
-import { Polkicon } from "@polkadot-cloud/react/icons/Polkicon";
+import { Polkicon } from "@polkadot-ui/react/icons/Polkicon";
import { SimpleEditor } from "../../lib/SimpleEditor";
import { Demo } from "../../lib/Demo";
diff --git a/src/docs/Components/Polkicon/index.tsx b/src/docs/Components/Polkicon/index.tsx
index ed4e63a..887b2c3 100644
--- a/src/docs/Components/Polkicon/index.tsx
+++ b/src/docs/Components/Polkicon/index.tsx
@@ -1,10 +1,10 @@
-/* @license Copyright 2024 @polkadot-cloud/frontpage authors & contributors
-SPDX-License-Identifier: GPL-3.0-only */
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
import { Doc } from "./main";
export const Polkicon = () => (
@@ -41,7 +41,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
the
The default value can be overridden with a custom color, or be set to{" "}
@@ -79,7 +79,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
If the address provided to the polkadot icon is not a valid one (using
- the
- If your project requires Polkadot Cloud CSS variables, assets, or
+ If your project requires Polkadot UI CSS variables, assets, or
utilities, install the following dependencies:
- Many of the UI components of
- That's it! You're now ready to start using Polkadot Cloud UI components.
+ That's it! You're now ready to start using Polkadot UI UI components.
- Polkadot Cloud hosts a library of assets, ranging from data sources,
+ Polkadot UI hosts a library of assets, ranging from data sources,
graphical elements, to fully functional components, for app developers
to plug and play into their codebases.
- Polkadot Cloud is Javascript framework agonostic.{" "}
-
All UI component styling and theming is held in{" "}
-
- Polkadot Cloud aims to fill a void in the Polkadot app developer space
+ Polkadot UI aims to fill a void in the Polkadot app developer space
by providing high quality, well-maintained, critical assets for app
developers.
The goals of Polkadot Cloud are as follows: The goals of Polkadot UI are as follows:
- Polkadot Cloud UI components use CSS variables so apps can customise
+ Polkadot UI UI components use CSS variables so apps can customise
their look and feel without having to delve into the component source
code. Apps can either define the CSS variables themselves, or use
- pre-packaged themes from Polkadot Cloud.
+ pre-packaged themes from Polkadot UI.
- Polkadot Cloud uses a 2-dimensional theme setup, meaning there are 2
+ Polkadot UI uses a 2-dimensional theme setup, meaning there are 2
separate files for defining CSS variables that comprise a theme:
- To use an accent and theme combo from Polkadot Cloud, simply import them
+ To use an accent and theme combo from Polkadot UI, simply import them
into your project and wrap your component hierarchy with their
corresponding classes. Both classes can be applied to the same element.
Polkicon
component. To add support to other networks,
contributors are welcome to{" "}
@@ -63,7 +63,7 @@ export const Doc = ({ folder, npm }: DocProps) => {
outerColor
prop. This is the color of the outermost circle
of the icon. The default outerColor
value is the{" "}
--background-default
variable, used throughout the Polkadot
- Cloud library of UI components.{" "}
+ UI library of UI components.{" "}
isValidAddress
from @polkadot-cloud/utils
+ the isValidAddress
from @polkadot-ui/utils
), then a generic "deactive" Polkicon wll appear;
Basic Installation
Installation for React
@polkadot‑cloud/react
{" "}
- use CSS variables from @polkadot‑cloud/core
. If you
+ Many of the UI components of @polkadot‑ui/react
{" "}
+ use CSS variables from @polkadot‑ui/core
. If you
are only using headless components from react
, then{" "}
core
is not required and react
can be
installed on its own:
@@ -78,7 +78,7 @@ export const Doc = ({ folder }: DocProps) => {
Introduction
@polkadot-cloud/core
+ @polkadot-ui/core
: Core styles and themes for Polkadot dApps.
@polkadot-cloud/react
+ @polkadot-ui/react
: Functional React components for Polkadot dApps.
@polkadot-cloud/assets
+ @polkadot-ui/assets
: Data sources and graphical assets for key ecosystem elements, such
as web extension wallets and validator operators.
@polkadot-cloud/utils
+ @polkadot-ui/utils
: Common utility functions to aid in Polkadot dApp development.
@polkadot-cloud/react
hosts all library components for{" "}
+ Polkadot UI is Javascript framework agonostic.{" "}
+ @polkadot-ui/react
hosts all library components for{" "}
ReactJS
@@ -81,7 +81,7 @@ export const Doc = ({ folder }: DocProps) => {
@polkadot-cloud/core
, in which other packages can utilise
+ @polkadot-ui/core
, in which other packages can utilise
to implement the supported UI components in their respective
frameworks.
Goals
Introduction
2-Dimensional Theming
@@ -48,7 +48,7 @@ export const Doc = ({ folder }: DocProps) => {
Kusama, and a few other identities.
@@ -65,7 +65,7 @@ export const Doc = ({ folder }: DocProps) => {
bundle their preferred fonts if developers wish to use them.
@@ -114,7 +114,7 @@ export const Doc = ({ folder }: DocProps) => {
Using Themes