diff --git a/site/.env b/site/.env index 1063152f2d..73db7413dc 100644 --- a/site/.env +++ b/site/.env @@ -6,5 +6,4 @@ # ... env.prod - to override these env vars when running a PROD version NEXT_PUBLIC_ENABLE_LOGIN=false SITE_URL=https://www.saltdesignsystem.com/ -GRAPH_QL = https://api.github.com/graphql MOSAIC_SNAPSHOT_DIR=snapshots/latest diff --git a/site/docs/about/glossary.mdx b/site/docs/about/glossary.mdx index 07048961e4..3d66f2458f 100644 --- a/site/docs/about/glossary.mdx +++ b/site/docs/about/glossary.mdx @@ -5,8 +5,6 @@ sidebar: priority: 1 --- -# Glossary - ## Characteristic A Salt characteristic refers to a [design token](#design-token) that aligns with a holistic semantic used throughout the design language. diff --git a/site/docs/about/index.mdx b/site/docs/about/index.mdx index 4727ed514d..c789300f40 100644 --- a/site/docs/about/index.mdx +++ b/site/docs/about/index.mdx @@ -8,18 +8,8 @@ sidebar: Salt is the J.P. Morgan design system, an open-source solution for building exceptional products and digital experiences in financial services and other industries. - - } - title="Research approach" - url="./research" - keylineColor="blue" - > -Research is vital to our efforts to build a fast, modern and open design system. - - } + + + A glossary of terms. + + + + The platforms supported by Salt. + + diff --git a/site/docs/about/research.mdx b/site/docs/about/research.mdx deleted file mode 100644 index ae9b779957..0000000000 --- a/site/docs/about/research.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Our approach to research -layout: DetailTechnical -sidebar: - label: Research approach - priority: 2 ---- - -The Salt Design System team puts people at the heart of its design process. This philosophy is most evident in the team’s user-centered approach to usability research. - -Research is vital to our efforts to build a fast, modern and open design system. It means we can collect data about how our system works in practice, then use that data to improve the system and create a better product for users. - -When it comes to research, our key principles are: - -- Mix methods: we adopt a holistic approach that includes qualitative and quantitative data to best serve evidence-based recommendations to our builders and internal decision makers -- Build to scale: we aim to make it easier to reuse our methods and report results - -The users of our design system are: - -- Product teams: developers, designers, content teams and beyond all use our design system to create experiences in their applications -- End-user: individuals or teams that use applications built with Salt - -We consider how the designer and developer interpret the design system and how they adjust it for the end user. The usability of an application is dependent on two parties: our team and the application team using the design system. - -A digram depiciting a relationship between Design System, Creator/Builder and App Usability. The design system, which provides rules, components, patterns and guidance, directly affects the usability of selecting, interpreting and ultimately using those things for creators and builders. Their work in turn directly affects the usability of apps they make, as does the design system, albeit to a lesser extent. - -To that end, our research team adopts an iterative approach, works to build on past findings, and undertakes a constant evolution of research methods to support product needs. - -One way in which we achieve rapid delivery of insights is by following method templates. These define exactly who the participants are, the study design, what to measure and what to compare outcomes against. - -This practice means that we spend less time testing new components or patterns as they are conceptualized. We can also compare outcomes to historic results and share insights in our technical documentation when a new component or pattern is released. - -{/* TODO: Check what to do here */} - -Overall, the research program aims for a complete understanding of the usability of the design system. - -{/* TODO: Check if subsequent sections should be included or not */} diff --git a/site/docs/about/roadmap.mdx b/site/docs/about/roadmap.mdx index a44ae0b516..01ac611b04 100644 --- a/site/docs/about/roadmap.mdx +++ b/site/docs/about/roadmap.mdx @@ -2,12 +2,13 @@ title: Roadmap layout: DetailTechnical sidebar: - label: Roadmap priority: 4 --- ## How we prioritize our work +We track all our work using [GitHub issues](https://github.com/jpmorganchase/salt-ds/issues?q=is%3Aissue+is%3Aopen) so if you see an issue that you're interested in please leave an 👍. + We use the below list to determine how we should prioritize our work. 1. Currently in progress @@ -22,12 +23,6 @@ We use the below list to determine how we should prioritize our work. 10. Overall feedback as low business priority (not including Figma) 11. Figma analytics only -## Available components - -To view available components, check out the [Components page](../components/). - -## Upcoming components - -Below is a list of components either in-progress or on-deck for future releases. Filter the list using the input below: +## GitHub project - +We use a GitHub project as our roadmap. To view our in progress and planned work, check out the [Salt - Components, Patterns and Theming](https://github.com/orgs/jpmorganchase/projects/18) project. diff --git a/site/package.json b/site/package.json index 12d791d602..f3341e6667 100644 --- a/site/package.json +++ b/site/package.json @@ -39,8 +39,7 @@ "@types/react": "^18.3.3", "lodash-es": "^4.17.21", "next": "^14.2.10", - "next-auth": "^4.24.7", - "node-fetch": "^3.0.0" + "next-auth": "^4.24.7" }, "devDependencies": { "@types/node": "^20.0.0", diff --git a/site/public/img/about/beaker.svg b/site/public/img/about/beaker.svg deleted file mode 100644 index 486c5474ee..0000000000 --- a/site/public/img/about/beaker.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/site/public/img/about/research/ds-users.svg b/site/public/img/about/research/ds-users.svg deleted file mode 100644 index 20e5581210..0000000000 --- a/site/public/img/about/research/ds-users.svg +++ /dev/null @@ -1,2 +0,0 @@ -Creator/Builder(Selection, Interpretation, Mistakes, -Ulitmate Use)Design System(Rules, Components, Patterns, Guidance)App Usability \ No newline at end of file diff --git a/site/public/img/about/icon.svg b/site/public/img/about/roadmap.svg similarity index 100% rename from site/public/img/about/icon.svg rename to site/public/img/about/roadmap.svg diff --git a/site/src/components/index.ts b/site/src/components/index.ts index 777b264f18..305a4a72da 100644 --- a/site/src/components/index.ts +++ b/site/src/components/index.ts @@ -1,4 +1,3 @@ -// importing this directly in MDX file didn't work, so adding here instead export { GridLayout } from "@salt-ds/core"; export { Card, H1, Panel, Text } from "@salt-ds/core"; @@ -7,8 +6,6 @@ export * from "./app-header"; export * from "./callout"; export * from "./card"; -export * from "./roadmap"; - export * from "./components"; export * from "./diagrams"; export * from "./example-container"; diff --git a/site/src/components/roadmap/Roadmap.tsx b/site/src/components/roadmap/Roadmap.tsx deleted file mode 100644 index 12e997e828..0000000000 --- a/site/src/components/roadmap/Roadmap.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import { - Banner, - BannerContent, - FormField, - FormFieldLabel, - GridLayout, - H3, - Input, - InteractableCard, - type InteractableCardProps, - Spinner, - Text, -} from "@salt-ds/core"; -import { - FilterIcon, - ProgressInprogressIcon, - ProgressTodoIcon, -} from "@salt-ds/icons"; -import { type FC, type ReactNode, useEffect, useState } from "react"; -import { Heading4 } from "../mdx/h4"; - -import styles from "./style.module.css"; - -interface RoadmapProps { - title: string; - children: ReactNode; - endpoint: string; -} - -interface IterationData { - title: string; // e.g. Q1 - startDate: string; // e.g. "2024-01-01" - duration: number; // e.g. 91 -} - -interface RoadmapData { - id: string; - startSprint: IterationData | null; - endSprint: IterationData | null; - issueUrl: string; - title: string; - quarter: IterationData | null; -} - -function RoadmapCard(props: InteractableCardProps) { - return ( - <> - - - ); -} - -export const Roadmap = ({ endpoint }: RoadmapProps) => { - const [roadmapData, setRoadmapData] = useState([]); - const [searchQuery, setSearchQuery] = useState(""); - const [status, setStatus] = useState<"pending" | "success" | "error">( - "pending", - ); - - const filteredRoadmapData = roadmapData.filter( - (r) => - (r.quarter !== null || r.startSprint !== null || r.endSprint !== null) && - r.title.match(new RegExp(searchQuery, "i")), - ); - - useEffect(() => { - const abortController = new AbortController(); - - const fetchData = async () => { - try { - setStatus("pending"); - const response = await fetch(`${endpoint}`, { - signal: abortController.signal, - }); - const items = (await response.json()).nodes as unknown[]; - //creates an array of objects with data from github - const extractedData: RoadmapData[] = items?.map(mapRoadmapData); - - setRoadmapData(extractedData || []); - setStatus("success"); - } catch (error) { - setStatus("error"); - } - }; - - void fetchData(); - - return () => { - abortController.abort(); - }; - }, [endpoint]); - - // biome-ignore lint/suspicious/noExplicitAny: any is simpler here. - const mapRoadmapData = (responseItem: any): RoadmapData => { - const data: RoadmapData = { - id: responseItem.id, - startSprint: null, - endSprint: null, - issueUrl: responseItem.content.url, - title: "", - quarter: null, - }; - for (const fieldValueNode of responseItem.fieldValues.nodes) { - if (!("field" in fieldValueNode)) { - continue; - } - switch (fieldValueNode.field.name) { - case "Title": { - data.title = fieldValueNode.text; - break; - } - case "Start Sprint": { - data.startSprint = { - title: fieldValueNode.title, - startDate: fieldValueNode.startDate, - duration: fieldValueNode.duration, - }; - break; - } - case "End Sprint": { - data.endSprint = { - title: fieldValueNode.title, - startDate: fieldValueNode.startDate, - duration: fieldValueNode.duration, - }; - break; - } - case "Quarter": { - data.quarter = { - title: fieldValueNode.title, - startDate: fieldValueNode.startDate, - duration: fieldValueNode.duration, - }; - break; - } - } - } - return data; - }; - - return ( -
- - Filter list - setSearchQuery(event.target.value), - }} - className={styles.searchInput} - startAdornment={} - /> - - - {roadmapData.length > 0 ? ( - - ) : status !== "error" ? ( - - ) : ( - - No data available - - )} -
- ); -}; - -const ColumnData: FC<{ item: RoadmapData; future?: boolean }> = ({ - item, - future = true, -}) => { - return ( - <> - - - {item.title} - {future ? ( - Scheduled for: {item.quarter?.title} - ) : ( - Target for sprint: {item.endSprint?.title} - )} - - - - ); -}; - -interface CardViewProps { - data: RoadmapData[]; -} - -const CardView = ({ data }: CardViewProps) => { - const plannedData: RoadmapData[] = []; - const inProgressData: RoadmapData[] = []; - - for (const d of data) { - if (d.endSprint) { - const sprintDate = new Date(d.endSprint.startDate); - sprintDate.setDate(sprintDate.getDate() + d.endSprint.duration); - if (new Date() < sprintDate) { - inProgressData.push(d); - } else { - plannedData.push(d); - } - } else { - plannedData.push(d); - } - } - - return ( - -
-

- - In-Progress{" "} -

- {inProgressData.map((item) => ( - - ))} -
-
-

- - In backlog -

- {plannedData - .sort((a, b) => { - const aQuarter = a.quarter?.title ?? ""; - const bQuarter = b.quarter?.title ?? ""; - return aQuarter.localeCompare(bQuarter); - }) - .map((item) => ( - - ))} -
- - ); -}; diff --git a/site/src/components/roadmap/index.ts b/site/src/components/roadmap/index.ts deleted file mode 100644 index ad9415f646..0000000000 --- a/site/src/components/roadmap/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Roadmap"; diff --git a/site/src/components/roadmap/style.module.css b/site/src/components/roadmap/style.module.css deleted file mode 100644 index 23f4c246cd..0000000000 --- a/site/src/components/roadmap/style.module.css +++ /dev/null @@ -1,77 +0,0 @@ -.heading { - margin-bottom: 5%; - text-align: left; - display: inline-flex; - align-items: center; - white-space: nowrap; -} - -.heading4 { - margin: auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.cardContainer:global(.saltGridLayout) { - margin-top: 50px; - gap: 20px; -} - -.content { - flex: 1; - flex-direction: column; -} - -.searchInput { - flex: 1; - max-width: 400px; - width: 100%; -} - -.column { - padding-right: 20px; -} - -.cardFuture { - width: 400px; - margin-bottom: 15px; - min-height: unset; - border-left-color: var(--salt-status-static-foreground); -} - -.cardInProgress { - width: 400px; - margin-bottom: 15px; - min-height: unset; - border-left-color: var(--salt-status-info-borderColor); -} - -.backlogIcon { - color: var(--salt-status-static-foreground); - margin-right: 10%; -} - -.progressIcon { - color: var(--salt-status-info-borderColor); - margin-right: 10%; -} - -.loading { - display: flex; - margin-left: 50%; -} - -@media (max-width: 767px) { - .cardFuture { - width: 80%; - } - - .cardInProgress { - width: 80%; - } - .cardContainer { - grid-template-columns: 1fr; - gap: 10px; - } -} diff --git a/site/src/pages/api/roadmap.ts b/site/src/pages/api/roadmap.ts deleted file mode 100644 index d21f0cd9c6..0000000000 --- a/site/src/pages/api/roadmap.ts +++ /dev/null @@ -1,110 +0,0 @@ -require("dotenv").config(); -import type { NextApiRequest, NextApiResponse } from "next"; -import fetch from "node-fetch"; - -const handler = async (req: NextApiRequest, res: NextApiResponse) => { - try { - const org = "jpmorganchase"; - const repo = "salt-ds"; - - const query = ` - query($org: String!, $repo: String!, $endCursor: String) { - organization(login: $org) { - repository(name: $repo) { - projectV2(number: 18) { - items(first: 100, after: $endCursor) { - pageInfo { - hasNextPage - endCursor - } - nodes { - id - content { - ...on Issue { - url - } - } - fieldValues(first: 20) { - nodes { - ...on ProjectV2ItemFieldDateValue { - date - field { - ...on ProjectV2Field { - name - } - } - } - ...on ProjectV2ItemFieldTextValue { - text - field { - ...on ProjectV2Field { - name - } - } - } - ...on ProjectV2ItemFieldSingleSelectValue { - name - field { - ...on ProjectV2SingleSelectField { - name - } - } - } - ... on ProjectV2ItemFieldIterationValue { - title - startDate - duration - field { - ... on ProjectV2IterationField { - name - } - } - } - } - } - } - } - } - } - } - } - `; - - let hasNextPage = true; - let endCursor = "null"; - const allProjectItems = []; - - while (hasNextPage) { - const response = await fetch(`${process.env.GRAPH_QL}`, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${process.env.GITHUB_TOKEN}`, - }, - body: JSON.stringify({ - query, - variables: { org, repo, endCursor }, - }), - }); - - const responseData = await response.json(); - const projectItems = - // @ts-ignore - responseData.data.organization.repository.projectV2.items; - - hasNextPage = projectItems.pageInfo.hasNextPage; - endCursor = projectItems.pageInfo.endCursor; - - allProjectItems.push(...projectItems.nodes); - } - - const response = { nodes: allProjectItems }; - console.log("Requested GitHub API", { allProjectItems }); - res.status(200).json(response); - } catch (error) { - console.error(error); - res.status(404).json({ message: "Error fetching data" }); - } -}; - -export default handler; diff --git a/yarn.lock b/yarn.lock index fc62eabd1e..26d07e4f25 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5884,7 +5884,6 @@ __metadata: lodash-es: "npm:^4.17.21" next: "npm:^14.2.10" next-auth: "npm:^4.24.7" - node-fetch: "npm:^3.0.0" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" react-markdown: "npm:^8.0.7" @@ -20841,7 +20840,7 @@ __metadata: languageName: node linkType: hard -"node-fetch@npm:*, node-fetch@npm:^3.0.0": +"node-fetch@npm:*": version: 3.3.2 resolution: "node-fetch@npm:3.3.2" dependencies: