Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-14 02:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: storybook

Browse Source
This commit is contained in:
iCrawl
2023-04-13 19:09:56 +02:00
parent 8218ffc78d
commit e5859b41cf
91 changed files with 3660 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/lib/components/Alert.tsx
View File

@@ -51,7 +51,7 @@ export function Alert({ title, type, children }: PropsWithChildren<IAlert>) {
<div className="mb-4 mt-6">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="pointer-events-none absolute flex h-full w-full">
<div className="pointer-events-none absolute h-full w-full flex">
<div className={`rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-b-2 border-l-2 border-t-2 ${border}`} />
<div className={`relative border-b-2 ${border}`}>
<div className={`-translate-y-50% pointer-events-auto flex place-items-center gap-2 px-2 ${text}`}>

65
packages/ui/src/lib/components/Section.stories.tsx
View File

@@ -1,58 +1,13 @@
import type { Story } from '@ladle/react';
import type { PropsWithChildren } from 'react';
import { Section, type SectionOptions } from './Section.jsx';
import type { Meta, StoryObj } from '@storybook/react';
import { Section } from './Section.jsx';
export const Default = () => <Section title="Test">Test 1234</Section>;
export default {
title: 'Section',
component: Section,
} satisfies Meta<typeof Section>;
export const Padded = () => (
<Section padded title="Test">
Test 1234
</Section>
);
type Story = StoryObj<typeof Section>;
export const Background = () => (
<Section background title="Test">
Test 1234
</Section>
);
export const Dense = () => (
<Section dense title="Test">
Test 1234
</Section>
);
export const Gutter = () => (
<Section gutter title="Test">
Test 1234
</Section>
);
export const Playground: Story<PropsWithChildren<SectionOptions>> = ({
title,
background,
defaultClosed,
dense,
gutter,
padded,
}: PropsWithChildren<SectionOptions>) => (
<Section
background={background}
defaultClosed={defaultClosed}
dense={dense}
gutter={gutter}
padded={padded}
title={title}
>
Test 1234
</Section>
);
Playground.args = {
title: 'Test',
background: true,
defaultClosed: false,
dense: false,
gutter: true,
padded: true,
};
export const Default = {
render: () => <Section title="Test">Test Content</Section>,
} satisfies Story;

2
packages/ui/src/lib/components/discord/Message.tsx
View File

@@ -40,7 +40,7 @@ export function DiscordMessage({
<div className="static" id="content-wrapper">
{followUp ? (
<span
className="h-5.5 absolute left-0 mr-1 hidden w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
className="absolute left-0 mr-1 hidden h-5.5 w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
id="time"
>
{time}

4
packages/ui/src/lib/components/discord/MessageAuthor.tsx
View File

@@ -13,11 +13,11 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
className="absolute left-[16px] mt-0.5 h-10 w-10 cursor-pointer select-none rounded-full"
src={avatar}
/>
<h2 className="text-size-inherit m-0 font-medium leading-snug" id="user-info">
<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
<span className="mr-1" id="username">
<span className="cursor-pointer text-base font-medium text-white hover:underline">{username}</span>
{bot ? (
<span className="bg-blurple vertical-top relative top-1 ml-1 rounded px-1 text-xs" id="bot">
<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
BOT
</span>
) : null}

2
packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
View File

@@ -9,7 +9,7 @@ export function DiscordMessageAuthorReply({ avatar, bot, username }: IDiscordMes
<>
<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
{bot ? (
<div className="bg-blurple vertical-top mr-1 rounded px-1 text-xs" id="bot">
<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
BOT
</div>
) : null}

2
packages/ui/src/lib/components/discord/MessageBaseReply.tsx
View File

@@ -8,7 +8,7 @@ export function DiscordMessageBaseReply({
}: PropsWithChildren<{ author?: IDiscordMessageAuthorReply | undefined; authorNode?: ReactNode | undefined }>) {
return (
<div
className="before:rounded-tl-1.5 relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:content-none"
className="relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:rounded-tl-1.5 before:content-none"
id="reply-wrapper"
>
<div className="flex place-items-center [&>span]:opacity-60">

2
packages/ui/src/lib/components/discord/MessageEmbed.tsx
View File

@@ -23,7 +23,7 @@ export function DiscordMessageEmbed({
}: PropsWithChildren<IDiscordMessageEmbed>) {
return (
<div className="py-0.5" id="outer-embed-wrapper">
<div className="border-l-blurple grid max-w-max rounded border-l-4 bg-[rgb(47_49_54)]" id="embed-wrapper">
<div className="grid max-w-max border-l-4 border-l-blurple rounded bg-[rgb(47_49_54)]" id="embed-wrapper">
<div className="max-w-128">
<div className="pb-4 pl-3 pr-4 pt-2">
{author ? <DiscordMessageEmbedAuthor {...author} /> : authorNode ?? null}

2
packages/ui/src/lib/components/discord/MessageInteraction.tsx
View File

@@ -12,7 +12,7 @@ export function DiscordMessageInteraction({ author, authorNode, command }: IDisc
return (
<DiscordMessageBaseReply author={author} authorNode={authorNode}>
<span className="mr-1 select-none text-sm leading-snug text-white">used</span>
<div className="text-blurple cursor-pointer text-sm leading-snug hover:underline">{command}</div>
<div className="cursor-pointer text-sm leading-snug text-blurple hover:underline">{command}</div>
</DiscordMessageBaseReply>
);
}