20 |
23 |
25 |
29 |
10 |
14 |
34 |
37 |
14 |
15 |
16 |
40 |
41 |
42 |
54 |
55 |
56 |
78 |
79 |
80 |
81 |
8 |
9 | K
10 |
11 |
32 |
33 |
34 |
35 |
36 |
37 |
43 |
44 | P
45 |
46 |
47 |
53 | /
54 |
55 |
14 |
15 |
16 |
17 |
20 |
48 |
28 |
29 |
30 |
31 |
39 |
40 |
46 |
47 | The content for the popover.
71 |
16 |
41 |
42 | 24 | <>Tags 25 |
26 | {Array.from({ length: 50 }) 27 | .map((_, i, a) => `v1.2.0-beta.${a.length - i}`) 28 | .map((tag) => ( 29 |
37 | {tag}
38 |
39 | ))}
40 | -
54 | {items.map((item) => (
55 |
8 |
41 |
16 |
23 | 17 | <>Foundry Combat Systems 18 |
19 |20 | <>Advanced Arms and Armament Explorer. 21 |
22 |
34 |
40 | Weapons
35 | Builds
37 | Guides
39 |
10 |
13 | I'm a flex child
9 | I'm a 2nd flex child
10 | I'm a flex child
22 | I'm a 2nd flex child
23 |
12 |
67 |
23 | {`abcdefghijklmnopqrstuvwxyz`}
24 |
25 |
26 |
36 | {`abcdefghijklmnopqrstuvwxyz`}
37 |
38 |
39 |
49 | {`123456789.`}
50 |
51 |
52 |
62 | {`⌘⌥⇧⌃⌅⌫↩⎋
63 | !?@#%{}()45° 2/5`}
64 |
65 |
66 |
7 |
12 |
13 | Why is the Magazine stat on X weapon slightly off?
8 | 9 | The Magazine stat we get from Bungie's API has a documented history of being inaccurate to what's in game. We do our best to account for these discrepancies, but expect the numbers to occasionally be a bit off. 10 | 11 |
14 |
21 |
22 | Why is X new perk info not showing correctly/infomation incorrect?
15 | 16 | Whenever a new perk is added, it takes time for us to properly implement it. Some perks are easier than others, but they all require some amount of time to be added. In addition, some time may be required to test the perk to get accurate values as well. We appreciate your patience! 17 | 18 | If an older perk is having issues please feel free to look in the support channel in our discord, and if needed, open a new thread. 19 | 20 |
23 |
34 |
--------------------------------------------------------------------------------
/apps/web/content/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | description: Foundry is an advanced weapon roll explorer and buildcrafting tool for Destiny
4 | ---
5 |
6 | Foundry is an advanced weapon roll explorer and buildcrafting tool for Destiny 2.
7 |
--------------------------------------------------------------------------------
/apps/web/content/explorer/categories.json:
--------------------------------------------------------------------------------
1 | {
2 | "categories": [
3 | { "name": "Weapons", "slug": "weapons", "count": 11, "parent": null },
4 | { "name": "Perks", "slug": "perks", "count": 12, "parent": null },
5 | {
6 | "name": "Exotic Armor",
7 | "slug": "exotic-armor",
8 | "count": 10,
9 | "parent": null
10 | },
11 | {
12 | "name": "Weapon Mods",
13 | "slug": "weapon-mods",
14 | "count": 10,
15 | "parent": null
16 | },
17 | { "name": "Armor Mods", "slug": "armor-mods", "count": 10, "parent": null },
18 | {
19 | "name": "Exotic Weapons",
20 | "slug": "exotic",
21 | "count": 11,
22 | "parent": "weapons"
23 | },
24 | {
25 | "name": "Hunter",
26 | "slug": "hunter",
27 | "count": 11,
28 | "parent": "exotic-armor"
29 | },
30 | { "name": "Titan", "slug": "titan", "count": 11, "parent": "exotic-armor" },
31 | {
32 | "name": "Warlock",
33 | "slug": "warlock",
34 | "count": 11,
35 | "parent": "exotic-armor"
36 | },
37 | {
38 | "name": "Weapon Perks",
39 | "slug": "weapon",
40 | "count": 12,
41 | "parent": "perks"
42 | },
43 | {
44 | "name": "Intrinsic Traits",
45 | "slug": "intrinsic",
46 | "count": 12,
47 | "parent": "perks"
48 | },
49 | {
50 | "name": "Origin Traits",
51 | "slug": "origin",
52 | "count": 12,
53 | "parent": "perks"
54 | }
55 | ]
56 | }
57 |
--------------------------------------------------------------------------------
/apps/web/content/posts/2022-11-21.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: '2022-11-21'
3 | excerpt: '// The one about Community Perk information.'
4 | date: '2022-11-21T18:00:00-05:00'
5 | author:
6 | name: gothfemme
7 | ---
8 |
9 |
10 | Hello Guardians,
11 |
12 | Thank you for using FOUNDRY and for your patience as I get things up and running.
13 |
14 | With this latest release, you can expect a few changes to make your experience more delightful, including:
15 |
16 | * Community Perk information, provided from our friends at{" "} [Clarity](https://www.d2clarity.com)
17 | * Added Tooltip stat displays for perks, barrels, mags, sights, etc
18 | * Added Recoil Direction semi-circle stat display
19 | * Adjustments to the display of stat bar deltas when both positive and negative effects are applied
20 | * Selected mod stat deltas will now display in a separate color
21 | * Added ammo type icons
22 | * Moved toggle for "Screenshot mode" to the newly added weapon overflow dropdown menu
23 | * Added an option to clear selections to the weapon overflow dropdown menu
24 | * Performance improvements surrounding image optimization and page stability while loading
25 | * Adjustments to how the search dropdown toggles at mobile screen widths
26 | * Added permalink functionality for rolls
27 | * Fixed an issue with curated rolls not displaying in screenshot mode
28 | * Fixed background images being unruly
29 | * Fixed an issue with site hydration when visiting from a permalink
30 | * Improved search performance on startup
31 | * Improved search performance with short queries
32 | * Added loading bar for page transitions
33 | * Styling tweaks and additional bug fixes
34 |
35 | I am still working on getting communication channels (Discord, Twitter, etc) set up specifically for this project, but if you would like to leave any feedback or suggestions, please feel free to drop me a line at my [Twitter](https://twitter.com/gothfemme).
36 |
37 | -- Kat
38 |
--------------------------------------------------------------------------------
/apps/web/content/posts/2022-12-07.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: '2022-12-07'
3 | excerpt: '// The one about Range, in meters.'
4 | date: '2022-12-07T00:38:00-05:00'
5 | author:
6 | name: gothfemme
7 | ---
8 |
9 | Hello Guardians,
10 |
11 | A few minor updates have gone out since the last post, but wanted to highlight the latest addition first and foremost.
12 |
13 | ## Calculated Range
14 |
15 | Weapon pages will now show the Damage Falloff Start Distance for both Hip-Fire and ADS, for weapon types we have data on.
16 |
17 | It should work as you might expect, including with Rangefinder. So go check out some of the new weapons from this Season and try it out!
18 |
19 | There's definitely a ton more work for me to do around stat display, calculators, and the likes, but I wanted to get quickly get this out as I know it's important to folks for comparing weapons.
20 |
21 | ## Discord
22 |
23 | We now have a Discord, please join if you'd like to give any feedback, get additional updates, or just talk about the game. I post previews of what I'm working on and would enjoy getting more people's thoughts on things. [You can join our Discord here.](https://discord.gg/dzW2DZBBQH)
24 |
25 | Thanks again for using the site!
26 |
27 | -- Kat
28 |
--------------------------------------------------------------------------------
/apps/web/content/posts/2022-12-27.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Home for the Holidays'
3 | excerpt: '// The one about the new home page.'
4 | date: '2022-12-27T18:00:00-05:00'
5 | author:
6 | name: gothfemme
7 | ---
8 |
9 | Hello Guardians,
10 |
11 | Hope you're all having a happy and healthy Dawning season. You may have noticed things look a little different over here.
12 |
13 | Initially I started off this chunk of work with the intention to just give the home page a bit of a makeover, as well as to sort out the organization of some site-specific pages like the changelog, etc. This... then ballooned into a much larger project of further refining parts of the site's UI, and well, here we are!
14 |
15 | Let me know what you all think about the upgrades, especially on mobile!
16 |
17 | Keeping this one short and sweet. Thanks again for using the site, and a huge thanks to all the folks who have been giving me their feedback.
18 |
19 | – Kat
20 |
--------------------------------------------------------------------------------
/apps/web/content/posts/2023-04-18.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Updates, updates, updates!'
3 | excerpt: '// That time I forgot to update the blog for 4 months.'
4 | date: '2023-04-18T20:37:00-04:00'
5 | author:
6 | name: gothfemme
7 | ---
8 |
9 | Hello Guardians,
10 |
11 | It has been quite some time! Obviously still here considering the updates keep rolling out, and I hope you all have been enjoying the new features and have been cooking up some spicy god rolls. I owe you all a more proper blog post at... some point in the future. When the inspiration strikes me? But for now here's a quick recap of everything's that's launched in the past couple months:
12 |
13 | - A weapon page UI that can scale with all we're adding
14 | - A whole bunch of calculators
15 | - TTK, Damage Falloff, Handling, Reload, Flinch Resist and more!
16 | - These live in the accordion section and update while you select perks
17 | - Selectable Perk effects
18 | - Preview your weapon's performance and stats at different stack levels!
19 | - See all our cool calculators update in real time!
20 | - A revamped Screenshot Mode
21 | - It looks like in-game!
22 | - There's a settings menu in the top right that lets you change some display options
23 | - Lots of new search filters
24 | - I really like the `trait_1` and `trait_2` ones for finding the perfect combos
25 | - You can now download the site as an app (If you dare)
26 | - You can find the "Add to Home Screen" or "Download as app" button in your browser to get a slightly more focused version of Foundry!
27 |
28 |
29 | Cool! That's it for this one.
30 |
31 | – Kat
32 |
--------------------------------------------------------------------------------
/apps/web/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "drizzle-kit";
2 |
3 | export default {
4 | out: "./src/lib/database/drizzle",
5 | schema: "./src/lib/database/schemas/schema.ts",
6 | driver: "better-sqlite",
7 | dbCredentials: {
8 | url: "./src/lib/database/sqlite.db",
9 | },
10 | } satisfies Config;
11 |
--------------------------------------------------------------------------------
/apps/web/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// How is damage calculated?
24 | 25 | The short answer is that we use formulas and base values from Mossy (Discord: mossy.max // Reddit: u/LegoWitch) 26 | 27 | They wrote a [reddit write-up](https://www.reddit.com/r/DestinyTheGame/comments/umnoex/exhaustive_breakdown_of_every_outgoing_damage/) where they answer a lot of questions pertaining to damage with topics ranging from comparing damage across different activites to how damage scales due the rank of the enenmy being hit. 28 | 29 | A direct link to their spreadsheet can be [found here](https://docs.google.com/spreadsheets/d/1b57Hb8m1L3daFfUckQQqvvN6VOpD03KEssvQLMFpC5I/edit#gid=1386975095) if you prefer that medium. 30 | 31 | In time we would like to have this information more readily available within our docs, but for now, we can only point you towards those links. 32 | 33 |
20 |
23 |
25 |
29 | {post.title}
24 |
12 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/src/app/(docs)/design/[[...slug]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { allDesignDocs } from "contentlayer/generated";
2 |
3 | import { notFound } from "next/navigation";
4 |
5 | import { Client } from "./client";
6 | import { DocsPager } from "../../pager";
7 |
8 | interface DocPageProps {
9 | params: {
10 | slug: string[];
11 | };
12 | }
13 |
14 | async function getDocFromParams({ params }: DocPageProps) {
15 | const slug = params.slug?.join("/") || "";
16 | const doc = allDesignDocs.find((doc) => doc.slugAsParams === slug);
17 |
18 | if (!doc) {
19 | null;
20 | }
21 |
22 | return doc;
23 | }
24 |
25 | export async function generateStaticParams() {
26 | return allDesignDocs.map((doc) => ({
27 | slug: doc.slugAsParams.split("/"),
28 | }));
29 | }
30 |
31 | export default async function Page({ params }: { params: { slug: string[] } }) {
32 | // Find the post for the current page.
33 | const doc = await getDocFromParams({ params });
34 |
35 | // 404 if the doc does not exist.
36 | if (!doc) {
37 | notFound();
38 | }
39 |
40 | return (
41 |
42 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/apps/web/src/app/(docs)/docs/[[...slug]]/docs-sidebar-config.ts:
--------------------------------------------------------------------------------
1 | export const DOCS_SIDEBAR_CONFIG = [
2 | {
3 | title: "Calculations",
4 | items: [
5 | {
6 | title: "Range",
7 | href: "/docs/calculations/range",
8 | items: [],
9 | },
10 | {
11 | title: "Reload",
12 | href: "/docs/calculations/reload",
13 | items: [],
14 | },
15 | ],
16 | },
17 | {
18 | title: "FAQ",
19 | href: "/docs/faq",
20 | items: [],
21 | },
22 | {
23 | title: "Features",
24 | items: [
25 | {
26 | title: "Compare",
27 | href: "/docs/features/compare",
28 | items: [],
29 | },
30 | {
31 | title: "Roll Editor",
32 | href: "/docs/features/roll-editor",
33 | items: [],
34 | },
35 | {
36 | title: "Search",
37 | href: "/docs/features/search",
38 | items: [],
39 | },
40 | ]
41 | }
42 | ]
--------------------------------------------------------------------------------
/apps/web/src/app/(docs)/docs/[[...slug]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { allDocs } from "contentlayer/generated";
2 | import { notFound } from "next/navigation";
3 | import { DocsPager } from "../../pager";
4 |
5 |
6 | interface DocPageProps {
7 | params: {
8 | slug: string[];
9 | };
10 | }
11 |
12 | async function getDocFromParams({ params }: DocPageProps) {
13 | const slug = params.slug?.join("/") || "";
14 | const doc = allDocs.find((doc) => doc.slugAsParams === slug);
15 |
16 | if (!doc) {
17 | null;
18 | }
19 |
20 | return doc;
21 | }
22 |
23 | export async function generateStaticParams() {
24 | return allDocs.map((doc) => ({
25 | slug: doc.slugAsParams.split("/"),
26 | }));
27 | }
28 |
29 | export default async function Page({ params }: { params: { slug: string[] } }) {
30 | // Find the post for the current page.
31 | const doc = await getDocFromParams({ params });
32 |
33 | // 404 if the doc does not exist.
34 | if (!doc) {
35 | notFound();
36 | }
37 |
38 | return (
39 |
40 |
41 |
49 |
51 | );
52 | }
53 |
54 |
--------------------------------------------------------------------------------
/apps/web/src/app/(docs)/layout.module.scss:
--------------------------------------------------------------------------------
1 | .inner {
2 | display: flex;
3 | flex-direction: column;
4 | width: 100%;
5 | max-width: var(--page-width);
6 | min-height: 100vh;
7 | margin: 0 auto;
8 | // background-color: var(--appBg);
9 |
10 | @media (width >= 768px) {
11 | gap: var(--spacing-2);
12 | flex-direction: row;
13 | }
14 | }
15 |
16 | .container {
17 | width: 100%;
18 | // background-color: var(--appBg);
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/src/app/(docs)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Flex } from "@foundry/ui/components";
2 | import { DocsSidebarNav } from "./sidebar";
3 | import styles from "./layout.module.scss";
4 |
5 | export default function Layout({
6 | children,
7 | }: {
8 | children: React.ReactNode;
9 | }): JSX.Element {
10 | return (
11 |
42 |
44 |
48 | {doc.title}
43 |
15 |
17 | {explorerCategory.categories?.map((cat) => cat.name)}
18 |
19 | {slicedWeapons?.map((v) => (
20 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/apps/web/src/app/(home)/Home.module.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/d2foundry/foundry/11b597a2fd5badafbef08d67ea344ce3dae5344d/apps/web/src/app/(home)/Home.module.scss
--------------------------------------------------------------------------------
/apps/web/src/app/(home)/home.tsx:
--------------------------------------------------------------------------------
1 | // "use client";
2 | import React from "react";
3 |
4 | // import Image from "next/image";
5 | // import Link from "next/link";
6 |
7 | // import {
8 | // ArrowRightIcon,
9 | // HeartFilledIcon,
10 | // InfoCircledIcon,
11 | // } from "@radix-ui/react-icons";
12 | // import { cn } from "@foundry/ui/utils";
13 |
14 | import styles from "./Home.module.scss";
15 | import { BlogSection, ChangelogSection } from "./blog-section";
16 | import { Flex } from "@foundry/ui/components";
17 |
18 | // import { cn } from "@utils/ui";
19 |
20 | const SEASON_NAME_TEXT = "Season of the Witch";
21 | const TAGLINE = `Your companion to Destiny 2 weapons and perks.`;
22 |
23 | const CURRENT_YEAR_NUMBER = 6;
24 | const CURRENT_SEASON_NUMBER = 22;
25 |
26 | // interface HomeProps {
27 | // allPosts: PostType[];
28 | // allChangelogPosts: PostType[];
29 | // // heroImage: {
30 | // // src: string;
31 | // // blurDataUrl: string;
32 | // // };
33 | // trendingWeapons: TrendingWeapons;
34 | // currentSeasonWeapons: FoundryWeaponSearchItem[];
35 | // }
36 | // const showNightlyAtom = atom(false);
37 |
38 | export function Home() {
39 | // const { weeklyItems, dailyItems } = await getTrendingWeapons();
40 | return (
41 | Weapons
16 |{`${v.displayProperties.name}`}
21 | ))}
22 |
44 | {/*
47 |
2 | 
3 |
47 | {/* */}
48 |
52 | );
53 |
--------------------------------------------------------------------------------
/packages/ui/components/CodeBlock/index.ts:
--------------------------------------------------------------------------------
1 | export { CodeBlock } from "./CodeBlock";
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Container/Container.module.scss:
--------------------------------------------------------------------------------
1 | .Container {
2 | --container-1: 448px;
3 | --container-2: 688px;
4 | --container-3: 880px;
5 | --container-4: 1136px;
6 |
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | flex-shrink: 0;
11 | flex-grow: 1;
12 | }
13 |
14 | .ContainerInner {
15 | width: 100%;
16 | }
17 |
18 | /***************************************************************************************************
19 | * *
20 | * SIZES *
21 | * *
22 | ***************************************************************************************************/
23 |
24 | // @breakpoints {
25 | .ContainerInner {
26 | :where(.Container.size-1) & {
27 | max-width: var(--container-1);
28 | }
29 | :where(.Container.size-2) & {
30 | max-width: var(--container-2);
31 | }
32 | :where(.Container.size-3) & {
33 | max-width: var(--container-3);
34 | }
35 | :where(.Container.size-4) & {
36 | max-width: var(--container-4);
37 | }
38 | }
39 | // }
40 |
--------------------------------------------------------------------------------
/packages/ui/components/Container/Container.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Container.module.scss";
3 | import { cva } from "class-variance-authority";
4 | import { cn } from "../../utils";
5 | const sizes = ["1", "2", "3", "4"] as const;
6 | const displayValues = ["none", "block"] as const;
7 |
8 | interface ContainerProps extends React.HTMLAttributes
40 |
42 | );
43 | }
44 | );
45 |
46 | Container.displayName = "Container";
47 |
--------------------------------------------------------------------------------
/packages/ui/components/Container/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Container";
--------------------------------------------------------------------------------
/packages/ui/components/Dialog/index.ts:
--------------------------------------------------------------------------------
1 | export {
2 | Dialog,
3 | DialogContent,
4 | DialogTrigger,
5 | DialogHeader,
6 | DialogFooter,
7 | DialogTitle,
8 | DialogBody,
9 | DialogDescription,
10 | } from "./Dialog";
11 |
--------------------------------------------------------------------------------
/packages/ui/components/Drawer/Drawer.module.scss:
--------------------------------------------------------------------------------
1 | .overlay {
2 | position: fixed;
3 | z-index: 999;
4 | inset: 0;
5 | opacity: 1;
6 | background-color: var(--black-9);
7 | }
8 |
9 | .close {
10 | position: absolute;
11 | top: 5px;
12 | right: 5px;
13 | justify-content: center;
14 | padding: var(--spacing-1);
15 | }
16 |
17 | .content {
18 | display: flex;
19 | position: fixed;
20 | z-index: 999;
21 | right: 0;
22 | bottom: 0;
23 | left: 0;
24 | flex-direction: column;
25 | width: 100%;
26 | max-width: 100%;
27 | height: 100%;
28 | min-height: 40dvh;
29 | max-height: 75dvh;
30 | overflow: hidden;
31 | animation: contentShow 250ms ease;
32 | border-top: 1px solid var(--color-gray-border);
33 | border-top-left-radius: var(--border-radius-sm);
34 | border-top-right-radius: var(--border-radius-sm);
35 | background-color: var(--color-gray-bg);
36 | color: var(--color-gray-text-contrast);
37 | font-size: var(--font-size-body-sm);
38 | line-height: 1;
39 | }
40 |
41 | @keyframes contentShow {
42 | from {
43 | transform: translate(0, 40px);
44 | opacity: 0;
45 | }
46 |
47 | to {
48 | transform: translate(0, 0);
49 | opacity: 1;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/ui/components/Drawer/Drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { forwardRef } from "react";
4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
5 | import { Cross2Icon } from "@radix-ui/react-icons";
6 |
7 | import { IconButton } from "../IconButton";
8 | import { cn } from "../../utils/cn";
9 |
10 | import styles from "./Drawer.module.scss";
11 |
12 | export const Drawer = DialogPrimitive.Root;
13 | export const DrawerTrigger = DialogPrimitive.Trigger;
14 |
15 | export const DrawerContent = forwardRef<
16 | HTMLDivElement,
17 | DialogPrimitive.DialogContentProps &
18 | Pick{children}
41 |
64 | {children}
65 |
66 | );
67 | }
68 | );
69 |
70 | Flex.displayName = "Flex";
71 |
--------------------------------------------------------------------------------
/packages/ui/components/Flex/index.tsx:
--------------------------------------------------------------------------------
1 | export { Flex } from "./Flex";
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Heading/Heading.module.scss:
--------------------------------------------------------------------------------
1 | .Heading {
2 | display: initial;
3 | font-weight: var(--font-weight-medium);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/ui/components/Heading/Heading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Slot } from "@radix-ui/react-slot";
3 | import { cn } from "../../utils";
4 |
5 | import styles from "./Heading.module.scss";
6 |
7 | interface Props {
8 | children?: React.ReactNode;
9 | as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
10 | asChild?: never;
11 | }
12 |
13 | export const Heading = React.forwardRef<
14 | HTMLHeadingElement,
15 | Props & React.HTMLAttributes
11 |
19 | );
20 |
--------------------------------------------------------------------------------
/packages/ui/components/Message/index.ts:
--------------------------------------------------------------------------------
1 | export { Message } from "./Message";
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Note/Note.module.scss:
--------------------------------------------------------------------------------
1 | .note {
2 | display: flex;
3 | align-items: center;
4 | width: 100%;
5 | height: min-content;
6 | padding: var(--spacing-1-half) var(--spacing-2);
7 | border: 1px solid;
8 | border-radius: var(--border-radius-sm);
9 | font-size: var(--font-size-regular);
10 | line-height: 1;
11 | gap: var(--spacing-2);
12 | }
13 |
14 | .info {
15 | border-color: var(--color-accent-border);
16 | background-color: var(--color-accent-bg);
17 | color: var(--color-accent-text);
18 | }
19 |
20 | .success {
21 | border-color: var(--color-success-border);
22 | background-color: var(--color-success-bg);
23 | color: var(--color-success-text);
24 | }
25 |
26 | .warning {
27 | border-color: var(--color-warning-border);
28 | background-color: var(--color-warning-bg);
29 | color: var(--color-warning-text);
30 | }
31 |
32 | .destructive {
33 | border-color: var(--color-danger-border);
34 | background-color: var(--color-danger-bg);
35 | color: var(--color-danger-text);
36 | }
37 |
38 | .close {
39 | // color: inherit;
40 | margin-bottom: auto;
41 | margin-right: -0.5rem;
42 | margin-top: -0.5rem;
43 | }
44 |
--------------------------------------------------------------------------------
/packages/ui/components/Note/Note.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Cross2Icon,
3 | ExclamationTriangleIcon,
4 | InfoCircledIcon,
5 | } from "@radix-ui/react-icons";
6 | import { cn } from "../../utils/cn";
7 | import React, { HTMLAttributes } from "react";
8 | import { VariantProps, cva } from "class-variance-authority";
9 | import styles from "./Note.module.scss";
10 | import { IconButton } from "../IconButton";
11 |
12 | export const noteVariants = cva(styles.note, {
13 | variants: {
14 | variant: {
15 | default: styles.info,
16 | destructive: styles.destructive,
17 | warning: styles.warning,
18 | success: styles.success,
19 | info: styles.info,
20 | },
21 | },
22 | defaultVariants: {
23 | variant: "default",
24 | },
25 | });
26 | interface NoteProps {
27 | dismissible?: boolean;
28 | onDismiss?: () => void;
29 | }
30 |
31 | export const Note: React.FC<
32 | HTMLAttributes
12 |
14 |
15 |
18 | {title}
16 | {body}
17 |
35 |
56 | );
57 |
--------------------------------------------------------------------------------
/packages/ui/components/Note/index.ts:
--------------------------------------------------------------------------------
1 | export { Note } from "./Note";
2 |
--------------------------------------------------------------------------------
/packages/ui/components/Popover/Popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { forwardRef } from "react";
3 | import * as PopoverPrimitive from "@radix-ui/react-popover";
4 | import { Cross2Icon } from "@radix-ui/react-icons";
5 |
6 | import { IconButton } from "../IconButton";
7 | import { cn } from "../../utils/cn";
8 |
9 | import styles from "./Popover.module.scss";
10 |
11 | export const Popover = PopoverPrimitive.Root;
12 | export const PopoverTrigger = PopoverPrimitive.Trigger;
13 |
14 | export const PopoverContent = forwardRef<
15 | HTMLDivElement,
16 | PopoverPrimitive.PopoverContentProps &
17 | Pick
36 | {variant === "warning" ? (
37 |
42 | {children}
43 | {dismissible ? (
44 |
45 |
51 |
53 |
54 | ) : null}
55 | 45 | {children} 46 |
47 | ); 48 | PopoverTitle.displayName = "PopoverTitle"; 49 | -------------------------------------------------------------------------------- /packages/ui/components/Popover/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Popover, 3 | PopoverContent, 4 | PopoverTitle, 5 | PopoverTrigger, 6 | } from "./Popover"; 7 | -------------------------------------------------------------------------------- /packages/ui/components/RadioGroup/RadioGroup.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { PropsWithChildren } from "react"; 3 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; 4 | 5 | import styles from "./RadioGroup.module.scss"; 6 | 7 | // interface RadioGroupProps {} 8 | 9 | interface RadioGroupItemProps extends RadioGroupPrimitive.RadioGroupItemProps { 10 | label: string | React.ReactNode; 11 | } 12 | 13 | export const RadioGroupItem: React.FC
36 | {!!(tickMarks && props.max && props.max < MAX_TICKS)
37 | ? Array(props.max + 1)
38 | .fill("")
39 | .map((_, i) => (
40 |
44 | ))
45 | : null}
46 |
47 | {value?.map((_, i) => (
48 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
20 | {children}
21 |
22 | );
23 |
--------------------------------------------------------------------------------
/packages/ui/demos/ComponentPreview/index.ts:
--------------------------------------------------------------------------------
1 | export { ComponentPreview } from "./ComponentPreview";
2 |
--------------------------------------------------------------------------------
/packages/ui/demos/SpacingDemo/SpacingDemo.module.scss:
--------------------------------------------------------------------------------
1 | .listItem {
2 | display: grid;
3 | grid-template-columns: 2fr 1fr 1fr;
4 | align-items: center;
5 | width: 100%;
6 | padding: var(--spacing-1-half) var(--spacing-1-half);
7 | border-bottom: 1px solid var(--color-gray-line);
8 | color: var(--color-gray-text);
9 | gap: var(--spacing-1);
10 |
11 | @media (width >= 768px) {
12 | grid-template-columns: 3fr 0.75fr 0.75fr 6fr;
13 | }
14 | }
15 |
16 | .header {
17 | padding: var(--spacing-1) var(--spacing-1-half);
18 | border: 1px solid var(--color-gray-line);
19 | border-radius: var(--border-radius-sm);
20 | background-color: var(--color-gray-bg-subtle);
21 | color: var(--color-gray-text);
22 | font-size: var(--font-size-small);
23 | font-weight: 500;
24 | text-transform: uppercase;
25 | }
26 |
27 | .list {
28 | width: 100%;
29 | overflow-x: auto;
30 | font-size: var(--font-size-regular);
31 | }
32 |
33 | .tokenName {
34 | font-size: var(--font-size-small);
35 | &::after,
36 | &::before {
37 | content: "";
38 | }
39 | }
40 |
41 | .spacingBar {
42 | grid-column: 1 / -1;
43 | grid-row: 2;
44 | height: var(--spacing-2);
45 | background-color: var(--color-accent-solid);
46 |
47 | @media (width >= 768px) {
48 | grid-column: auto;
49 | grid-row: auto;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/ui/demos/SpacingDemo/SpacingDemo.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "../../utils";
2 |
3 | import styles from "./SpacingDemo.module.scss";
4 | // interface SpacingDemoProps {}
5 |
6 | const spacingTokens = [
7 | { token: "--spacing-0-quarter", size: 0.125 },
8 | { token: "--spacing-0-half", size: 0.25 },
9 | { token: "--spacing-1", size: 0.5 },
10 | { token: "--spacing-1-half", size: 0.75 },
11 | { token: "--spacing-2", size: 1 },
12 | { token: "--spacing-3", size: 1.5 },
13 | { token: "--spacing-4", size: 2 },
14 | { token: "--spacing-5", size: 2.5 },
15 | { token: "--spacing-6", size: 3 },
16 | { token: "--spacing-7", size: 3.5 },
17 | { token: "--spacing-8", size: 4 },
18 | { token: "--spacing-9", size: 4.5 },
19 | { token: "--spacing-10", size: 5 },
20 | { token: "--spacing-12", size: 6 },
21 | { token: "--spacing-14", size: 7 },
22 | { token: "--spacing-16", size: 8 },
23 | { token: "--spacing-18", size: 9 },
24 | { token: "--spacing-20", size: 10 },
25 | { token: "--spacing-30", size: 15 },
26 | { token: "--spacing-40", size: 20 },
27 | ];
28 | export const SpacingDemo = ({}) => (
29 |
30 |
50 | );
51 |
--------------------------------------------------------------------------------
/packages/ui/demos/SpacingDemo/index.ts:
--------------------------------------------------------------------------------
1 | export { SpacingDemo } from "./SpacingDemo";
2 |
--------------------------------------------------------------------------------
/packages/ui/demos/TypographyScale/TypographyScale.module.scss:
--------------------------------------------------------------------------------
1 | .container * {
2 | all: unset;
3 | box-sizing: border-box;
4 | // color: var(--color-gray-text-contrast);
5 | font-family: var(--font-text);
6 | // line-height: 1;
7 | }
8 |
9 | .row {
10 | display: grid;
11 | grid-template-columns: 1fr 0.5fr 0.5fr 10fr;
12 | align-items: baseline;
13 | gap: var(--spacing-1);
14 | color: var(--color-gray-text);
15 | line-height: 1;
16 | }
17 |
18 | .textSpecimen {
19 | overflow: hidden;
20 | color: var(--color-gray-text-contrast);
21 | text-overflow: ellipsis;
22 | white-space: nowrap;
23 | }
24 |
25 | .container {
26 | display: flex;
27 | flex-direction: column;
28 | font-size: var(--font-size-regular);
29 | gap: var(--spacing-1);
30 |
31 | // font-weight: 600;
32 |
33 | // & .h00 {
34 | // font-size: 3rem;
35 | // }
36 |
37 | // & .h0 {
38 | // font-size: 2.5rem;
39 | // }
40 |
41 | // & .h1 {
42 | // font-size: 2rem;
43 | // }
44 |
45 | // & .h2 {
46 | // font-size: 1.5rem;
47 | // }
48 |
49 | // & .h3 {
50 | // font-size: 1.25rem;
51 | // }
52 |
53 | // & .h4 {
54 | // font-size: 1rem;
55 | // }
56 |
57 | // & .h5 {
58 | // font-size: 0.875rem;
59 | // }
60 |
61 | // & .h6 {
62 | // font-size: 0.75rem;
63 | // }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/ui/demos/TypographyScale/TypographyScale.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "../../utils";
2 |
3 | import styles from "./TypographyScale.module.scss";
4 | // interface TypographyScaleProps {}
5 |
6 | const specimen = "Sphinx of black quartz, judge my vow.";
7 |
8 | const scale = [
9 | {
10 | size: 2,
11 | },
12 | {
13 | size: 1.5,
14 | },
15 | {
16 | size: 1.25,
17 | },
18 | {
19 | size: 1,
20 | },
21 | { size: 0.875 },
22 | { size: 0.75 },
23 | ];
24 |
25 | export const TypographyScale = ({}) => (
26 |
31 |
36 | {spacingTokens.map((spacingToken) => (
37 | Token
32 | rem
33 | px
34 |
35 |
38 |
48 | ))}
49 |
39 |
41 | {spacingToken.token}
40 | {spacingToken.size}
42 | {spacingToken.size * 16}
43 |
47 |
27 | {scale.map(({ size }, i) => {
28 | const lineHeight = Math.ceil((size * 16 * 1.3) / 8) * 8;
29 | return (
30 |
47 | );
48 |
--------------------------------------------------------------------------------
/packages/ui/demos/TypographyScale/index.ts:
--------------------------------------------------------------------------------
1 | export { TypographyScale } from "./TypographyScale";
2 |
--------------------------------------------------------------------------------
/packages/ui/demos/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./ColorPalette";
2 | export * from "./ComponentPreview";
3 | export * from "./SpacingDemo";
4 | export * from "./TypographyScale";
5 |
--------------------------------------------------------------------------------
/packages/ui/design-system/globals.scss:
--------------------------------------------------------------------------------
1 | @import "./tokens.scss";
2 |
--------------------------------------------------------------------------------
/packages/ui/design-system/spacing.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --spacing-0-quarter: 0.125rem;
3 | --spacing-0-half: 0.25rem;
4 | --spacing-1: 0.5rem;
5 | --spacing-1-half: 0.75rem;
6 | --spacing-2: 1rem;
7 | --spacing-3: 1.5rem;
8 | --spacing-4: 2rem;
9 | --spacing-5: 2.5rem;
10 | --spacing-6: 3rem;
11 | --spacing-7: 3.5rem;
12 | --spacing-8: 4rem;
13 | --spacing-9: 4.5rem;
14 | --spacing-10: 5rem;
15 | --spacing-12: 6rem;
16 | --spacing-14: 7rem;
17 | --spacing-16: 8rem;
18 | --spacing-18: 9rem;
19 | --spacing-20: 10rem;
20 | --spacing-30: 15rem;
21 | --spacing-40: 20rem;
22 | }
23 |
--------------------------------------------------------------------------------
/packages/ui/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.scss" {
2 | const classes: { [key: string]: string };
3 | export default classes;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/ui/index.tsx:
--------------------------------------------------------------------------------
1 | export * as components from "./components";
2 | export * as utils from "./utils";
3 | export * as demos from "./demos";
4 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@foundry/tsconfig/react-library.json",
3 | "include": ["."],
4 | "exclude": ["dist", "build", "node_modules"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/ui/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | // eslint-disable-next-line import/no-default-export -- Turbo generators require default export
6 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
7 | // A simple generator to add a new React component to the internal UI library
8 | plop.setGenerator("react-component", {
9 | description: "Adds a new react component",
10 | prompts: [
11 | {
12 | type: "input",
13 | name: "name",
14 | message: "What is the name of the component?",
15 | },
16 | ],
17 | actions: [
18 | {
19 | type: "add",
20 | path: "./components/{{pascalCase name}}/{{pascalCase name}}.module.scss",
21 | templateFile: "templates/scss_module.hbs",
22 | },
23 | {
24 | type: "add",
25 | path: "./components/{{pascalCase name}}/{{pascalCase name}}.tsx",
26 | templateFile: "templates/component.hbs",
27 | },
28 | {
29 | type: "add",
30 | path: "./components/{{pascalCase name}}/index.tsx",
31 | template: 'export * from "./{{pascalCase name}}";',
32 | },
33 | {
34 | type: "append",
35 | path: "./components/index.tsx",
36 | pattern: /(?
31 |
44 | );
45 | })}
46 | {size}
32 | {size * 16}
33 | {lineHeight}
34 | 41 | {specimen} 42 |
43 |
12 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/ui/turbo/generators/templates/scss_module.hbs:
--------------------------------------------------------------------------------
1 | .{{ pascalCase name }} {
2 | display: initial;
3 | }
--------------------------------------------------------------------------------
/packages/ui/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import type { ClassValue } from "clsx";
3 |
4 | export function cn(...inputs: ClassValue[]): string {
5 | return clsx(inputs);
6 | }
7 |
--------------------------------------------------------------------------------
/packages/ui/utils/copyToClipboard.ts:
--------------------------------------------------------------------------------
1 | export async function copyToClipboard(text: string) {
2 | // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
3 | if (navigator.clipboard) {
4 | try {
5 | await navigator.clipboard.writeText(text);
6 |
7 | console.log("Content copied to clipboard");
8 | } catch (err) {
9 | console.error("Failed to copy: ", err);
10 | }
11 | } else if (typeof document !== "undefined") {
12 | try {
13 | const textarea = document.createElement("textarea");
14 | textarea.value = text;
15 | textarea.setAttribute("readonly", "");
16 | textarea.style.position = "absolute";
17 | textarea.style.left = "-9999px";
18 | document.body.appendChild(textarea);
19 |
20 | textarea.select();
21 |
22 | textarea.setSelectionRange(0, 99999); /*For mobile devices*/
23 | document.execCommand("copy");
24 | document.body.removeChild(textarea);
25 | } catch (err) {
26 | console.error("Failed to copy: ", err);
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/ui/utils/index.ts:
--------------------------------------------------------------------------------
1 | export { cn } from "./cn";
2 | export { copyToClipboard } from "./copyToClipboard";
3 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 |
--------------------------------------------------------------------------------
/scripts/generate/componentTemplates.js:
--------------------------------------------------------------------------------
1 | // component.tsx
2 | exports.component = (name) => `import React from 'react';
3 | import styles from './${name}.module.scss';
4 | interface ${name}Props {}
5 | export const ${name}: React.FC<${name}Props> = ({}) => (
6 | {{ name }}
13 | {children} 14 |Hello 👋, I am a ${name} component.
7 | );
8 | `;
9 |
10 | // storybook
11 | exports.story = (name) => `import { ComponentStory } from "@storybook/react";
12 |
13 | import { ${name} } from "./${name}";
14 |
15 | export const Default: ComponentStory