diff --git a/packages/guide/package.json b/packages/guide/package.json index 5e8fcb47f..e9f209eac 100644 --- a/packages/guide/package.json +++ b/packages/guide/package.json @@ -60,6 +60,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", "@types/node": "^16.11.64", + "@types/react": "^17.0.39", "@types/react-dom": "^17.0.17", "@types/react-syntax-highlighter": "^15.5.5", "@unocss/cli": "^0.45.26", diff --git a/packages/guide/src/components/Caution.tsx b/packages/guide/src/components/Caution.tsx deleted file mode 100644 index 94218e494..000000000 --- a/packages/guide/src/components/Caution.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { PropsWithChildren } from 'react'; -import { VscWarning } from 'react-icons/vsc'; - -export function Caution({ children }: PropsWithChildren<{}>) { - return ( -
-
-
{children}
-
-
-
-
- - Caution -
-
-
-
-
-
- ); -} diff --git a/packages/guide/src/components/Info.tsx b/packages/guide/src/components/Info.tsx deleted file mode 100644 index 9cced8dc4..000000000 --- a/packages/guide/src/components/Info.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { PropsWithChildren } from 'react'; -import { VscInfo } from 'react-icons/vsc'; - -export function Info({ children }: PropsWithChildren<{}>) { - return ( -
-
-
{children}
-
-
-
-
- - Info -
-
-
-
-
-
- ); -} diff --git a/packages/guide/src/components/Sidebar.tsx b/packages/guide/src/components/Sidebar.tsx index 9e7c7f394..75dd5c108 100644 --- a/packages/guide/src/components/Sidebar.tsx +++ b/packages/guide/src/components/Sidebar.tsx @@ -1,5 +1,5 @@ import { Scrollbars } from 'react-custom-scrollbars-2'; -import type { MDXPage } from './SidebarItems'; +import type { MDXPage } from './SidebarItems.jsx'; export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) { return ( diff --git a/packages/guide/src/components/Tip.tsx b/packages/guide/src/components/Tip.tsx deleted file mode 100644 index 06d42d34e..000000000 --- a/packages/guide/src/components/Tip.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { PropsWithChildren } from 'react'; -import { VscFlame } from 'react-icons/vsc'; - -export function Tip({ children }: PropsWithChildren<{}>) { - return ( -
-
-
{children}
-
-
-
-
- - Tip -
-
-
-
-
-
- ); -} diff --git a/packages/guide/src/pages/creating-your-bot/creating-commands.mdx b/packages/guide/src/pages/creating-your-bot/creating-commands.mdx index 3a092cc1c..5a1e77954 100644 --- a/packages/guide/src/pages/creating-your-bot/creating-commands.mdx +++ b/packages/guide/src/pages/creating-your-bot/creating-commands.mdx @@ -4,16 +4,16 @@ title: Creating commands category: Creating your bot --- -import { Tip } from '../../components/Tip.jsx'; -import { DiscordMessages } from '../../components/discord/Messages.jsx'; -import { DiscordMessage } from '../../components/discord/Message.jsx'; +import { CH } from '@code-hike/mdx/components'; +import { Alert, DiscordMessages, DiscordMessage } from '@discordjs/ui'; import { DocsLink } from '../../components/DocsLink.jsx'; import { ResultingCode } from '../../components/ResultingCode.jsx'; -import { CH } from '@code-hike/mdx/components'; # Creating commands -This page is a follow-up and bases its code on [the previous page](/creating-your-bot/). + + This page is a follow-up and bases its code on [the previous page](/creating-your-bot/). + + In order to get your application's client id, go to [Discord Developer Portal](https://discord.com/developers/applications) and choose your application. Find the id under "Application ID" in General Information subpage. To get guild id, open Discord and go to your settings. On the "Advanced" page, turn on "Developer Mode". This will enable a "Copy ID" button in the context menu when you right-click on a server icon, a user's profile, etc. - + @@ -94,10 +94,10 @@ rest Once you fill in these values, run `node deploy-commands.js` in your project directory to register your commands to a single guild. It's also possible to [register commands globally](/interactions/slash-commands.md#global-commands). - + You only need to run `node deploy-commands.js` once. You should only run it again if you add or edit existing commands. - + ## Replying to commands @@ -172,9 +172,9 @@ client.on('interactionCreate', async (interaction) => { You could also display the date the server was created, or the server's verification level. You would do those in the same manner – use `interaction.guild.createdAt` or `interaction.guild.verificationLevel`, respectively. - + Refer to the documentation for a list of all the available properties and methods! - + ### User info command @@ -218,9 +218,9 @@ client.on('interactionCreate', async (interaction) => { - + Refer to the documentation for a list of all the available properties and methods! - + And there you have it! diff --git a/packages/guide/src/pages/creating-your-bot/index.mdx b/packages/guide/src/pages/creating-your-bot/index.mdx index 2b26a7a26..de2e1a72a 100644 --- a/packages/guide/src/pages/creating-your-bot/index.mdx +++ b/packages/guide/src/pages/creating-your-bot/index.mdx @@ -5,9 +5,7 @@ category: Creating your bot --- import { CH } from '@code-hike/mdx/components'; -import { Section } from '@discordjs/ui'; -import { Tip } from '../../components/Tip.jsx'; -import { Caution } from '../../components/Caution.jsx'; +import { Alert, Section } from '@discordjs/ui'; import { DocsLink } from '../../components/DocsLink.jsx'; import { ResultingCode } from '../../components/ResultingCode.jsx'; @@ -43,10 +41,10 @@ console.log(token); - + If you're using Git, you should not commit this file and should [ignore it via `.gitignore`](/creating-your-bot/#git-and-gitignore). - + ### Using environment variables @@ -114,10 +112,10 @@ console.log(process.env.DISCORD_TOKEN); - + If you're using Git, you should not commit this file and should [ignore it via `.gitignore`](/creating-your-bot/#git-and-gitignore). - +
While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe: @@ -144,12 +142,12 @@ config.json - + Aside from keeping credentials safe, `node_modules` should be included here. Since this directory can be restored based on the entries in your `package.json` and `package-lock.json` files by running `npm install`, it does not need to be included in Git. You can specify quite intricate patterns in `.gitignore` files, check out the [Git documentation on `.gitignore`](https://git-scm.com/docs/gitignore) for more information! - + ## Creating the main file @@ -184,12 +182,12 @@ Intents also define which events Discord should send to your bot, and you may wi Open your terminal and run `node index.js` to start the process. If you see "Ready!" after a few seconds, you're good to go! - + You can open your `package.json` file and edit the `"main": "index.js"` field to point to your main file. You can then run `node .` in your terminal to start the process! After closing the process with `Ctrl + C`, you can press the up arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the process is a quick way to start it up again. - + ## Resulting code diff --git a/packages/guide/src/pages/requesting-more-content.mdx b/packages/guide/src/pages/requesting-more-content.mdx index 576ef182b..4c5b8541d 100644 --- a/packages/guide/src/pages/requesting-more-content.mdx +++ b/packages/guide/src/pages/requesting-more-content.mdx @@ -4,7 +4,7 @@ title: Requesting more content category: Home --- -import { Tip } from '../components/Tip.jsx'; +import { Alert } from '@discordjs/ui'; # Requesting more content @@ -14,7 +14,7 @@ Requests may be as simple as "add an example to the [frequently asked questions] To make a request, simply head over to [the repo's issue tracker](https://github.com/discordjs/guide/issues) and [create a new issue](https://github.com/discordjs/guide/issues/new)! Title it appropriately, and let us know exactly what you mean inside the issue description. Make sure that you've looked around the site before making a request; what you want to request might already exist! - + Remember that you can always [fork the repo](https://github.com/discordjs/guide) and [make a pull request](https://github.com/discordjs/guide/pulls) if you want to add anything to the guide yourself! - + diff --git a/packages/guide/src/pages/test.mdx b/packages/guide/src/pages/test.mdx index 7a9247eb8..2716d6ac1 100644 --- a/packages/guide/src/pages/test.mdx +++ b/packages/guide/src/pages/test.mdx @@ -3,9 +3,7 @@ title: Test category: Test --- -import { DiscordMessages } from '../components/discord/Messages.jsx'; -import { DiscordMessage } from '../components/discord/Message.jsx'; -import { DiscordMessageEmbed } from '../components/discord/MessageEmbed.jsx'; +import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui'; , + }; + } + + case 'info': { + return { + text: 'text-blue-500', + border: 'border-blue-500', + icon: , + }; + } + + case 'success': { + return { + text: 'text-green-500', + border: 'border-green-500', + icon: , + }; + } + } +} + +export function Alert({ title, type, children }: PropsWithChildren) { + const { text, border, icon } = resolveType(type); + + return ( +
+
+
{children}
+
+
+
+
+ {icon} + {title} +
+
+
+
+
+
+ ); +} diff --git a/packages/guide/src/components/discord/Message.tsx b/packages/ui/src/lib/components/discord/Message.tsx similarity index 100% rename from packages/guide/src/components/discord/Message.tsx rename to packages/ui/src/lib/components/discord/Message.tsx diff --git a/packages/guide/src/components/discord/MessageAuthor.tsx b/packages/ui/src/lib/components/discord/MessageAuthor.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageAuthor.tsx rename to packages/ui/src/lib/components/discord/MessageAuthor.tsx diff --git a/packages/guide/src/components/discord/MessageAuthorReply.tsx b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageAuthorReply.tsx rename to packages/ui/src/lib/components/discord/MessageAuthorReply.tsx diff --git a/packages/guide/src/components/discord/MessageBaseReply.tsx b/packages/ui/src/lib/components/discord/MessageBaseReply.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageBaseReply.tsx rename to packages/ui/src/lib/components/discord/MessageBaseReply.tsx diff --git a/packages/guide/src/components/discord/MessageEmbed.tsx b/packages/ui/src/lib/components/discord/MessageEmbed.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageEmbed.tsx rename to packages/ui/src/lib/components/discord/MessageEmbed.tsx diff --git a/packages/guide/src/components/discord/MessageEmbedAuthor.tsx b/packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageEmbedAuthor.tsx rename to packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx diff --git a/packages/guide/src/components/discord/MessageEmbedFooter.tsx b/packages/ui/src/lib/components/discord/MessageEmbedFooter.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageEmbedFooter.tsx rename to packages/ui/src/lib/components/discord/MessageEmbedFooter.tsx diff --git a/packages/guide/src/components/discord/MessageEmbedTitle.tsx b/packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageEmbedTitle.tsx rename to packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx diff --git a/packages/guide/src/components/discord/MessageInteraction.tsx b/packages/ui/src/lib/components/discord/MessageInteraction.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageInteraction.tsx rename to packages/ui/src/lib/components/discord/MessageInteraction.tsx diff --git a/packages/guide/src/components/discord/MessageReply.tsx b/packages/ui/src/lib/components/discord/MessageReply.tsx similarity index 100% rename from packages/guide/src/components/discord/MessageReply.tsx rename to packages/ui/src/lib/components/discord/MessageReply.tsx diff --git a/packages/guide/src/components/discord/Messages.tsx b/packages/ui/src/lib/components/discord/Messages.tsx similarity index 100% rename from packages/guide/src/components/discord/Messages.tsx rename to packages/ui/src/lib/components/discord/Messages.tsx diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts index c16365b9c..e491c923b 100644 --- a/packages/ui/src/lib/index.ts +++ b/packages/ui/src/lib/index.ts @@ -1 +1,14 @@ +export * from './components/Alert.jsx'; export * from './components/Section.jsx'; + +export * from './components/discord/Message.jsx'; +export * from './components/discord/MessageAuthor.jsx'; +export * from './components/discord/MessageAuthorReply.jsx'; +export * from './components/discord/MessageBaseReply.jsx'; +export * from './components/discord/MessageEmbed.jsx'; +export * from './components/discord/MessageEmbedAuthor.jsx'; +export * from './components/discord/MessageEmbedFooter.jsx'; +export * from './components/discord/MessageEmbedTitle.jsx'; +export * from './components/discord/MessageInteraction.jsx'; +export * from './components/discord/MessageReply.jsx'; +export * from './components/discord/Messages.jsx'; diff --git a/packages/website/package.json b/packages/website/package.json index 15e186a16..bccd87f67 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -72,6 +72,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^14.4.3", "@types/node": "^16.11.64", + "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "@types/react-syntax-highlighter": "^15.5.5", "@unocss/cli": "^0.45.26", diff --git a/packages/website/src/components/tsdoc/BlockComment.tsx b/packages/website/src/components/tsdoc/BlockComment.tsx index e5bdff2af..c7c53e75b 100644 --- a/packages/website/src/components/tsdoc/BlockComment.tsx +++ b/packages/website/src/components/tsdoc/BlockComment.tsx @@ -1,6 +1,6 @@ +import { Alert } from '@discordjs/ui'; import { StandardTags } from '@microsoft/tsdoc'; import type { PropsWithChildren } from 'react'; -import { VscWarning } from 'react-icons/vsc'; export function Block({ children, title }: PropsWithChildren<{ title: string }>) { return ( @@ -18,26 +18,6 @@ export function ExampleBlock({ return {children}; } -export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element { - return ( -
-
-
{children}
-
-
-
-
- - Deprecated -
-
-
-
-
-
- ); -} - export function DefaultValueBlock({ children }: PropsWithChildren): JSX.Element { return {children}; } @@ -58,7 +38,11 @@ export function BlockComment({ case StandardTags.example.tagNameWithUpperCase: return {children}; case StandardTags.deprecated.tagNameWithUpperCase: - return {children}; + return ( + + {children} + + ); case StandardTags.remarks.tagNameWithUpperCase: return {children}; case StandardTags.defaultValue.tagNameWithUpperCase: diff --git a/yarn.lock b/yarn.lock index 0d80e57a9..f4ceab22a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2105,6 +2105,7 @@ __metadata: "@testing-library/react": ^13.4.0 "@testing-library/user-event": ^14.4.3 "@types/node": ^16.11.64 + "@types/react": ^17.0.39 "@types/react-dom": ^17.0.17 "@types/react-syntax-highlighter": ^15.5.5 "@unocss/cli": ^0.45.26 @@ -2246,6 +2247,7 @@ __metadata: "@favware/cliff-jumper": ^1.8.8 "@ladle/react": ^2.4.3 "@types/node": ^16.11.64 + "@types/react": ^18.0.21 "@types/react-dom": ^18.0.6 "@unocss/reset": ^0.45.26 "@vitejs/plugin-react": ^2.1.0 @@ -2328,6 +2330,7 @@ __metadata: "@testing-library/react": ^13.4.0 "@testing-library/user-event": ^14.4.3 "@types/node": ^16.11.64 + "@types/react": ^18.0.21 "@types/react-dom": ^18.0.6 "@types/react-syntax-highlighter": ^15.5.5 "@unocss/cli": ^0.45.26 @@ -4311,7 +4314,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:>=16": +"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.21": version: 18.0.21 resolution: "@types/react@npm:18.0.21" dependencies: @@ -4322,7 +4325,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^17": +"@types/react@npm:^17, @types/react@npm:^17.0.39": version: 17.0.50 resolution: "@types/react@npm:17.0.50" dependencies: