From e92e2bd1cd73947c4cfbdde6341ad89525c275d5 Mon Sep 17 00:00:00 2001 From: Ryan Nowak Date: Wed, 27 Dec 2023 15:05:51 -0800 Subject: [PATCH] Enable linters Signed-off-by: Ryan Nowak --- .eslintignore | 1 - .eslintrc.js | 3 - .eslintrc.json | 29 ++ .github/workflows/build.yaml | 24 +- .gitignore | 6 +- .prettierignore | 1 + .prettierrc | 2 +- .vscode/extensions.json | 3 + .vscode/settings.json | 21 ++ README.md | 30 +- app-config.yaml | 6 +- package.json | 3 +- packages/app/src/App.test.tsx | 2 +- packages/app/src/components/Root/Root.tsx | 2 +- packages/backend/src/index.ts | 1 - packages/backend/src/plugins/catalog.ts | 2 +- packages/backend/src/plugins/kubernetes.ts | 2 +- packages/rad-components/.storybook/main.ts | 20 +- packages/rad-components/.storybook/preview.ts | 4 +- packages/rad-components/setupTests.ts | 10 +- .../src/components/appgraph/AppGraph.tsx | 89 +++-- .../components/appgraph/__docs__/AppGraph.mdx | 8 +- .../appgraph/__docs__/AppGraph.stories.tsx | 10 +- .../components/appgraph/__docs__/Example.tsx | 22 +- .../appgraph/__test__/AppGraph.test.tsx | 22 +- .../src/components/appgraph/index.ts | 2 +- .../rad-components/src/components/index.ts | 2 +- .../components/resourcenode/ResourceNode.tsx | 17 +- .../resourcenode/__docs__/Example.tsx | 16 +- .../resourcenode/__docs__/ResourceNode.mdx | 8 +- .../__docs__/ResourceNode.stories.tsx | 10 +- .../__test__/ResourceNode.test.tsx | 20 +- .../src/components/resourcenode/index.ts | 2 +- packages/rad-components/src/graph.ts | 2 +- packages/rad-components/src/index.ts | 2 +- packages/rad-components/src/sampledata.ts | 56 +-- .../rad-components/src/stories/Configure.mdx | 57 +-- packages/rad-components/tsconfig.json | 35 -- packages/rad-components/vite.config.ts | 20 +- plugins/plugin-radius-backend/package.json | 3 + plugins/plugin-radius-backend/src/index.ts | 1 + .../src/service/catalog.ts | 181 ++++++---- plugins/plugin-radius/dev/index.tsx | 2 +- .../ApplicationPageComponent.test.tsx | 2 +- .../EnvironmentPageComponent.tsx | 5 +- .../ExampleFetchComponent.test.tsx | 4 +- .../ExampleFetchComponent.tsx | 336 +++++++++--------- plugins/plugin-radius/src/plugin.ts | 13 +- tsconfig.json | 13 +- yarn.lock | 3 + 50 files changed, 637 insertions(+), 498 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.js create mode 100644 .eslintrc.json create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json delete mode 100644 packages/rad-components/tsconfig.json diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index e5b1994..0000000 --- a/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -playwright.config.ts diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index e351352..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - root: true, -}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..f8f3c3f --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json", + "root": true, + "ignorePatterns": [ + "dist/", + "dist-types/", + "node_modules/", + "playwright.config.ts" + ], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "sourceType": "module" + }, + "plugins": ["@typescript-eslint"], + "settings": { + "react": { + "version": "detect" + } + }, + "rules": { + "@typescript-eslint/triple-slash-reference": 0, + "react/no-children-prop": 0 + } +} diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index fc003cf..98ff20e 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -16,13 +16,21 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 - - run: corepack enable - - name: Install Node.js 20 + - name: Enable corepack + run: corepack enable + - name: Install Node.js 20 # Must be after corepack is enabled. uses: actions/setup-node@v4 with: - node-version: "20" - cache: "yarn" - cache-dependency-path: "yarn.lock" - - run: yarn install --frozen-lockfile - - run: yarn workspaces foreach -A run build:all - - run: yarn workspace rad-components run build-storybook + node-version: '20' + cache: 'yarn' + cache-dependency-path: 'yarn.lock' + - name: Install dependencies + run: yarn install --frozen-lockfile + - name: Lint + run: yarn run lint:all + - name: Format + run: yarn run format:check + - name: Build + run: yarn workspaces foreach -A run build:all + - name: Build Storybook + run: yarn workspace rad-components run build-storybook diff --git a/.gitignore b/.gitignore index 06e5560..f3b41c5 100644 --- a/.gitignore +++ b/.gitignore @@ -32,9 +32,9 @@ node_modules/ .env.test # Build output -dist -dist-types -storybook-static +dist/ +dist-types/ +storybook-static/ # Temporary change files created by Vim *.swp diff --git a/.prettierignore b/.prettierignore index dfb0f1c..047c036 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,4 @@ dist dist-types coverage .vscode +node_modules/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index ed2af8f..af26d1f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,4 @@ { "printWidth": 160, "tabWidth": 2 -} \ No newline at end of file +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..1d7ac85 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f521f01 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,21 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[json]": { + "editor.tabSize": 2 + }, + "[jsonc]": { + "editor.tabSize": 2 + }, + "[javascript]": { + "editor.tabSize": 2 + }, + "[javascriptreact]": { + "editor.tabSize": 2 + }, + "[typescript]": { + "editor.tabSize": 2 + }, + "[typescriptreact]": { + "editor.tabSize": 2 + } +} diff --git a/README.md b/README.md index 6bd1b91..4460862 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ It is organized as a mono-repo. You'll also want an environment where you can experiment with Radius. +For development, we recommend VS Code. This repo is configured with recommended extensions that can automate parts of the development process when installed. + ## Building **Install dependencies:** @@ -54,4 +56,30 @@ yarn workspace rad-components run lint yarn workspace rad-components run storybook ``` -This will launch Storybook at `http://localhost:6006` \ No newline at end of file +This will launch Storybook at `http://localhost:6006` + +## Linting + +This project is configured to use `eslint` for linting, along with recommended rules for React and TypeScript. This is checked as part of the pull-request process. + +**Run the linter manually:** + +``` +yarn run lint:all +``` + +## Formatting + +This project is configured to use `prettier` for code formatting. This is checked as part of the pull-request process. + +**Run the formatter to find violations:** + +``` +yarn run format:check +``` + +**Run the formatter to automatically fix violations:** + +``` +yarn run format:write +``` diff --git a/app-config.yaml b/app-config.yaml index 1b7136a..facc733 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -43,7 +43,8 @@ integrations: # apiBaseUrl: https://ghe.example.net/api/v3 # token: ${GHE_TOKEN} -proxy: {} +proxy: + {} ### Example for how to add a proxy endpoint for the frontend. ### A typical reason to do this is to handle HTTPS and CORS for internal services. # endpoints: @@ -66,7 +67,8 @@ auth: # see https://backstage.io/docs/auth/ to learn about auth providers providers: {} -scaffolder: {} +scaffolder: + {} # see https://backstage.io/docs/features/software-templates/configuration for software template options catalog: diff --git a/package.json b/package.json index ee52bb6..1e6c113 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "fix": "backstage-cli repo fix", "lint": "backstage-cli repo lint --since origin/main", "lint:all": "backstage-cli repo lint", - "prettier:check": "prettier --check .", + "format:check": "prettier --check .", + "format:write": "prettier --write .", "new": "backstage-cli new --scope internal" }, "workspaces": { diff --git a/packages/app/src/App.test.tsx b/packages/app/src/App.test.tsx index b94cac7..7324cde 100644 --- a/packages/app/src/App.test.tsx +++ b/packages/app/src/App.test.tsx @@ -17,7 +17,7 @@ describe('App', () => { }, context: 'test', }, - ] as any, + ] as unknown as string, }; const rendered = await renderWithEffects(); diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 72219c7..2ee58e0 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -57,7 +57,7 @@ const SidebarLogo = () => { ); }; -export const Root = ({ children }: PropsWithChildren<{}>) => ( +export const Root = ({ children }: PropsWithChildren>) => ( diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts index 898bbfa..035161e 100644 --- a/packages/backend/src/index.ts +++ b/packages/backend/src/index.ts @@ -96,7 +96,6 @@ async function main() { apiRouter.use('/proxy', await proxy(proxyEnv)); apiRouter.use('/search', await search(searchEnv)); apiRouter.use('/kubernetes', await kubernetes(kubernetesEnv)); - //apiRouter.use('/radius', await radius(radiusEnv)); // Add backends ABOVE this line; this 404 handler is the catch-all fallback apiRouter.use(notFoundHandler()); diff --git a/packages/backend/src/plugins/catalog.ts b/packages/backend/src/plugins/catalog.ts index fac19cf..97b398d 100644 --- a/packages/backend/src/plugins/catalog.ts +++ b/packages/backend/src/plugins/catalog.ts @@ -2,7 +2,7 @@ import { CatalogBuilder } from '@backstage/plugin-catalog-backend'; import { ScaffolderEntitiesProcessor } from '@backstage/plugin-catalog-backend-module-scaffolder-entity-model'; import { Router } from 'express'; import { PluginEnvironment } from '../types'; -import { RadiusProcessor } from '../../../../plugins/plugin-radius-backend/src/service/catalog'; +import { RadiusProcessor } from '@internal/plugin-radius-backend'; export default async function createPlugin( env: PluginEnvironment, diff --git a/packages/backend/src/plugins/kubernetes.ts b/packages/backend/src/plugins/kubernetes.ts index 666639e..dd90bdf 100644 --- a/packages/backend/src/plugins/kubernetes.ts +++ b/packages/backend/src/plugins/kubernetes.ts @@ -14,4 +14,4 @@ export default async function createPlugin( permissions: env.permissions, }).build(); return router; -} \ No newline at end of file +} diff --git a/packages/rad-components/.storybook/main.ts b/packages/rad-components/.storybook/main.ts index 2449fd7..16ef7cc 100644 --- a/packages/rad-components/.storybook/main.ts +++ b/packages/rad-components/.storybook/main.ts @@ -1,28 +1,28 @@ -import type { StorybookConfig } from "@storybook/react-vite"; +import type { StorybookConfig } from '@storybook/react-vite'; -import { join, dirname } from "path"; +import { join, dirname } from 'path'; /** * This function is used to resolve the absolute path of a package. * It is needed in projects that use Yarn PnP or are set up within a monorepo. */ function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, "package.json"))); + return dirname(require.resolve(join(value, 'package.json'))); } const config: StorybookConfig = { - stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - getAbsolutePath("@storybook/addon-links"), - getAbsolutePath("@storybook/addon-essentials"), - getAbsolutePath("@storybook/addon-onboarding"), - getAbsolutePath("@storybook/addon-interactions"), + getAbsolutePath('@storybook/addon-links'), + getAbsolutePath('@storybook/addon-essentials'), + getAbsolutePath('@storybook/addon-onboarding'), + getAbsolutePath('@storybook/addon-interactions'), ], framework: { - name: getAbsolutePath("@storybook/react-vite"), + name: getAbsolutePath('@storybook/react-vite'), options: {}, }, docs: { - autodocs: "tag", + autodocs: 'tag', }, }; export default config; diff --git a/packages/rad-components/.storybook/preview.ts b/packages/rad-components/.storybook/preview.ts index ff58bbd..817ac3c 100644 --- a/packages/rad-components/.storybook/preview.ts +++ b/packages/rad-components/.storybook/preview.ts @@ -1,8 +1,8 @@ -import type { Preview } from "@storybook/react"; +import type { Preview } from '@storybook/react'; const preview: Preview = { parameters: { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, diff --git a/packages/rad-components/setupTests.ts b/packages/rad-components/setupTests.ts index 195ddde..ede41bc 100644 --- a/packages/rad-components/setupTests.ts +++ b/packages/rad-components/setupTests.ts @@ -1,12 +1,12 @@ /// -import { expect } from "vitest"; +import { expect } from 'vitest'; import '@testing-library/jest-dom'; -import * as matchers from "@testing-library/jest-dom/matchers"; -import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers"; -declare module "vitest" { +import * as matchers from '@testing-library/jest-dom/matchers'; +import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'; +declare module 'vitest' { // eslint-disable-next-line @typescript-eslint/no-explicit-any interface Assertion extends jest.Matchers, TestingLibraryMatchers {} } -expect.extend(matchers); \ No newline at end of file +expect.extend(matchers); diff --git a/packages/rad-components/src/components/appgraph/AppGraph.tsx b/packages/rad-components/src/components/appgraph/AppGraph.tsx index 5963749..7c9b3fd 100644 --- a/packages/rad-components/src/components/appgraph/AppGraph.tsx +++ b/packages/rad-components/src/components/appgraph/AppGraph.tsx @@ -1,13 +1,21 @@ -import { useCallback } from "react"; -import { ReactFlow, Edge, Node, useReactFlow, useNodesState, useEdgesState, ReactFlowProvider } from 'reactflow'; +import React, { useCallback } from 'react'; +import { + ReactFlow, + Edge, + Node, + useReactFlow, + useNodesState, + useEdgesState, + ReactFlowProvider, +} from 'reactflow'; import Dagre, { Label } from '@dagrejs/dagre'; -import { AppGraph as AppGraphData, Resource } from "../../graph"; -import { ResourceNode } from "../resourcenode/index"; +import { AppGraph as AppGraphData, Resource } from '../../graph'; +import { ResourceNode } from '../resourcenode/index'; import 'reactflow/dist/style.css'; export type AppGraphProps = { - graph: AppGraphData, + graph: AppGraphData; }; const nodeTypes = { default: ResourceNode }; @@ -19,16 +27,19 @@ const LayoutFlow = (props: AppGraphProps) => { const [nodes, setNodes, onNodesChange] = useNodesState(initial.nodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initial.edges); - useCallback((direction) => { - const layouted = getLayoutedElements(nodes, edges, { direction }); + useCallback( + direction => { + const layouted = getLayoutedElements(nodes, edges, { direction }); - setNodes([...layouted.nodes]); - setEdges([...layouted.edges]); + setNodes([...layouted.nodes]); + setEdges([...layouted.edges]); - window.requestAnimationFrame(() => { - fitView(); - }); - }, [nodes, edges]); + window.requestAnimationFrame(() => { + fitView(); + }); + }, + [nodes, edges], + ); return ( { ); }; -function AppGraph2(props: AppGraphProps) { +function AppGraph(props: AppGraphProps) { return (
- - - + + +
); -}; +} -function initialNodes(graph: AppGraphData): { nodes: Node[], edges: Edge[] } { +function initialNodes(graph: AppGraphData): { + nodes: Node[]; + edges: Edge[]; +} { const nodes: Node[] = []; const edges: Edge[] = []; let i = 0; for (const resource of graph.resources) { - nodes.push({ id: resource.id, position: { x: 0, y: 200 * i++ }, data: resource, type: 'default', }); + nodes.push({ + id: resource.id, + position: { x: 0, y: 200 * i++ }, + data: resource, + type: 'default', + }); if (resource.connections) { for (const connection of resource.connections) { if (connection.direction === 'Inbound') { - edges.push({ id: `${connection.id}-${resource.id}`, type: 'smoothstep', source: connection.id, target: resource.id }); + edges.push({ + id: `${connection.id}-${resource.id}`, + type: 'smoothstep', + source: connection.id, + target: resource.id, + }); } else { - edges.push({ id: `${resource.id}-${connection.id}`, type: 'smoothstep', source: resource.id, target: connection.id }); + edges.push({ + id: `${resource.id}-${connection.id}`, + type: 'smoothstep', + source: resource.id, + target: connection.id, + }); } } } @@ -76,22 +105,26 @@ function initialNodes(graph: AppGraphData): { nodes: Node[], edges: Ed const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); -function getLayoutedElements(nodes: Node[], edges: Edge[], options: { direction: string}) { +function getLayoutedElements( + nodes: Node[], + edges: Edge[], + options: { direction: string }, +) { g.setGraph({ rankdir: options.direction }); - edges.forEach((edge) => g.setEdge(edge.source, edge.target)); - nodes.forEach((node) => g.setNode(node.id, node as Label)); + edges.forEach(edge => g.setEdge(edge.source, edge.target)); + nodes.forEach(node => g.setNode(node.id, node as Label)); Dagre.layout(g); return { - nodes: nodes.map((node) => { + nodes: nodes.map(node => { const { x, y } = g.node(node.id); return { ...node, position: { x, y } }; }), edges, }; -}; +} -export default AppGraph2; \ No newline at end of file +export default AppGraph; diff --git a/packages/rad-components/src/components/appgraph/__docs__/AppGraph.mdx b/packages/rad-components/src/components/appgraph/__docs__/AppGraph.mdx index 4ad71fb..22ac330 100644 --- a/packages/rad-components/src/components/appgraph/__docs__/AppGraph.mdx +++ b/packages/rad-components/src/components/appgraph/__docs__/AppGraph.mdx @@ -1,6 +1,6 @@ -import { Canvas, Meta } from "@storybook/blocks"; -import Example from "./Example.tsx"; -import * as AppGraph from "./AppGraph.stories.tsx"; +import { Canvas, Meta } from '@storybook/blocks'; +import Example from './Example.tsx'; +import * as AppGraph from './AppGraph.stories.tsx'; @@ -14,4 +14,4 @@ AppGraph displays the topology of different applications. #### Arguments -- **resource** _`AppGraph`_ - The application graph to display. \ No newline at end of file +- **resource** _`AppGraph`_ - The application graph to display. diff --git a/packages/rad-components/src/components/appgraph/__docs__/AppGraph.stories.tsx b/packages/rad-components/src/components/appgraph/__docs__/AppGraph.stories.tsx index dac9297..265c8a9 100644 --- a/packages/rad-components/src/components/appgraph/__docs__/AppGraph.stories.tsx +++ b/packages/rad-components/src/components/appgraph/__docs__/AppGraph.stories.tsx @@ -1,9 +1,9 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import Example from "./Example"; -import * as sampledata from "../../../sampledata"; +import type { Meta, StoryObj } from '@storybook/react'; +import Example from './Example'; +import * as sampledata from '../../../sampledata'; const meta: Meta = { - title: "AppGraph", + title: 'AppGraph', component: Example, }; @@ -14,4 +14,4 @@ export const Demo: Story = { args: { graph: sampledata.DemoApplication, }, -}; \ No newline at end of file +}; diff --git a/packages/rad-components/src/components/appgraph/__docs__/Example.tsx b/packages/rad-components/src/components/appgraph/__docs__/Example.tsx index ff89e50..7ba3568 100644 --- a/packages/rad-components/src/components/appgraph/__docs__/Example.tsx +++ b/packages/rad-components/src/components/appgraph/__docs__/Example.tsx @@ -1,18 +1,16 @@ -import React, { FC } from "react"; -import AppGraph, { AppGraphProps } from "../AppGraph"; -import * as sampledata from "../../../sampledata"; +import React, { FC } from 'react'; +import AppGraph, { AppGraphProps } from '../AppGraph'; +import * as sampledata from '../../../sampledata'; -const Example: FC = ({ - graph = sampledata.DemoApplication, -}) => { +const Example: FC = ({ graph = sampledata.DemoApplication }) => { return (
@@ -20,4 +18,4 @@ const Example: FC = ({ ); }; -export default Example; \ No newline at end of file +export default Example; diff --git a/packages/rad-components/src/components/appgraph/__test__/AppGraph.test.tsx b/packages/rad-components/src/components/appgraph/__test__/AppGraph.test.tsx index 73a0cd4..e74e908 100644 --- a/packages/rad-components/src/components/appgraph/__test__/AppGraph.test.tsx +++ b/packages/rad-components/src/components/appgraph/__test__/AppGraph.test.tsx @@ -1,24 +1,24 @@ -import { describe, expect, it } from "vitest"; +import { describe, expect, it } from 'vitest'; import '@testing-library/jest-dom'; -import { render, screen } from "@testing-library/react"; -import AppGraph from "../AppGraph"; -import * as sampledata from "../../../sampledata"; -import React from "react"; +import { render, screen } from '@testing-library/react'; +import AppGraph from '../AppGraph'; +import * as sampledata from '../../../sampledata'; +import React from 'react'; -describe("AppGraph component", () => { - it("AppGraph should render correctly", () => { +describe('AppGraph component', () => { + it('AppGraph should render correctly', () => { const application = sampledata.DemoApplication; render(); - const name = screen.getByRole("heading", { name: application.name}); + const name = screen.getByRole('heading', { name: application.name }); expect(name).toBeInTheDocument(); // Each resource should be rendered. for (const resource of application.resources) { - const name = screen.getByRole("heading", { name: resource.name}); + const name = screen.getByRole('heading', { name: resource.name }); expect(name).toBeInTheDocument(); - const type = screen.getByRole("heading", { name: resource.type}); + const type = screen.getByRole('heading', { name: resource.type }); expect(type).toBeInTheDocument(); } }); -}); \ No newline at end of file +}); diff --git a/packages/rad-components/src/components/appgraph/index.ts b/packages/rad-components/src/components/appgraph/index.ts index 71744f3..d0b7139 100644 --- a/packages/rad-components/src/components/appgraph/index.ts +++ b/packages/rad-components/src/components/appgraph/index.ts @@ -1 +1 @@ -export { default as AppGraph } from './AppGraph'; \ No newline at end of file +export { default as AppGraph } from './AppGraph'; diff --git a/packages/rad-components/src/components/index.ts b/packages/rad-components/src/components/index.ts index 4aa2094..e5f93fa 100644 --- a/packages/rad-components/src/components/index.ts +++ b/packages/rad-components/src/components/index.ts @@ -1,2 +1,2 @@ export * from './appgraph'; -export * from './resourcenode'; \ No newline at end of file +export * from './resourcenode'; diff --git a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx index 87f7b57..504dc2c 100644 --- a/packages/rad-components/src/components/resourcenode/ResourceNode.tsx +++ b/packages/rad-components/src/components/resourcenode/ResourceNode.tsx @@ -1,19 +1,22 @@ -import { PropsWithChildren } from "react"; -import {Resource} from "../../graph"; +import React, { PropsWithChildren } from 'react'; +import { Resource } from '../../graph'; export interface ResourceNodeProps { data: Resource; -}; +} function ResourceNode(props: PropsWithChildren) { return ( -
-

{props.data.name}

+
+

{props.data.name}

{props.data.type}
asdsfdsdfafdfdff
); -}; +} -export default ResourceNode; \ No newline at end of file +export default ResourceNode; diff --git a/packages/rad-components/src/components/resourcenode/__docs__/Example.tsx b/packages/rad-components/src/components/resourcenode/__docs__/Example.tsx index 2071b38..ba70816 100644 --- a/packages/rad-components/src/components/resourcenode/__docs__/Example.tsx +++ b/packages/rad-components/src/components/resourcenode/__docs__/Example.tsx @@ -1,6 +1,6 @@ -import React, { FC } from "react"; -import ResourceNode, { ResourceNodeProps } from "../ResourceNode"; -import * as sampledata from "../../../sampledata"; +import React, { FC } from 'react'; +import ResourceNode, { ResourceNodeProps } from '../ResourceNode'; +import * as sampledata from '../../../sampledata'; const Example: FC = ({ data = sampledata.ContainerResource, @@ -8,10 +8,10 @@ const Example: FC = ({ return (
@@ -19,4 +19,4 @@ const Example: FC = ({ ); }; -export default Example; \ No newline at end of file +export default Example; diff --git a/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.mdx b/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.mdx index 9973b4d..bba674b 100644 --- a/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.mdx +++ b/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.mdx @@ -1,6 +1,6 @@ -import { Canvas, Meta } from "@storybook/blocks"; -import Example from "./Example.tsx"; -import * as ResourceNode from "./ResourceNode.stories.tsx"; +import { Canvas, Meta } from '@storybook/blocks'; +import Example from './Example.tsx'; +import * as ResourceNode from './ResourceNode.stories.tsx'; @@ -14,4 +14,4 @@ ResourceNode component for different types of resources. #### Arguments -- **resource** _`Resource`_ - The resource to display. \ No newline at end of file +- **resource** _`Resource`_ - The resource to display. diff --git a/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.stories.tsx b/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.stories.tsx index 995ad01..4724e22 100644 --- a/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.stories.tsx +++ b/packages/rad-components/src/components/resourcenode/__docs__/ResourceNode.stories.tsx @@ -1,9 +1,9 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import Example from "./Example"; -import * as sampledata from "../../../sampledata"; +import type { Meta, StoryObj } from '@storybook/react'; +import Example from './Example'; +import * as sampledata from '../../../sampledata'; const meta: Meta = { - title: "ResourceNode", + title: 'ResourceNode', component: Example, }; @@ -14,4 +14,4 @@ export const Container: Story = { args: { data: sampledata.ContainerResource, }, -}; \ No newline at end of file +}; diff --git a/packages/rad-components/src/components/resourcenode/__test__/ResourceNode.test.tsx b/packages/rad-components/src/components/resourcenode/__test__/ResourceNode.test.tsx index 4d02572..c2d8891 100644 --- a/packages/rad-components/src/components/resourcenode/__test__/ResourceNode.test.tsx +++ b/packages/rad-components/src/components/resourcenode/__test__/ResourceNode.test.tsx @@ -1,17 +1,17 @@ -import React from "react"; -import { describe, expect, it } from "vitest"; +import React from 'react'; +import { describe, expect, it } from 'vitest'; import '@testing-library/jest-dom'; -import { render, screen } from "@testing-library/react"; -import ResourceNode from "../ResourceNode"; -import * as sampledata from "../../../sampledata"; +import { render, screen } from '@testing-library/react'; +import ResourceNode from '../ResourceNode'; +import * as sampledata from '../../../sampledata'; -describe("ResourceNode component", () => { - it("ResourceNode should render correctly", () => { +describe('ResourceNode component', () => { + it('ResourceNode should render correctly', () => { const resource = sampledata.ContainerResource; render(); - const name = screen.getByRole("heading", { name: resource.name}); + const name = screen.getByRole('heading', { name: resource.name }); expect(name).toBeInTheDocument(); - const type = screen.getByRole("heading", { name: resource.type}); + const type = screen.getByRole('heading', { name: resource.type }); expect(type).toBeInTheDocument(); }); -}); \ No newline at end of file +}); diff --git a/packages/rad-components/src/components/resourcenode/index.ts b/packages/rad-components/src/components/resourcenode/index.ts index fd89cba..da4a7f4 100644 --- a/packages/rad-components/src/components/resourcenode/index.ts +++ b/packages/rad-components/src/components/resourcenode/index.ts @@ -1 +1 @@ -export { default as ResourceNode } from './ResourceNode'; \ No newline at end of file +export { default as ResourceNode } from './ResourceNode'; diff --git a/packages/rad-components/src/graph.ts b/packages/rad-components/src/graph.ts index 165da99..8442386 100644 --- a/packages/rad-components/src/graph.ts +++ b/packages/rad-components/src/graph.ts @@ -21,4 +21,4 @@ export interface Connection { direction: Direction; } -export type Direction = 'Outbound' | 'Inbound'; \ No newline at end of file +export type Direction = 'Outbound' | 'Inbound'; diff --git a/packages/rad-components/src/index.ts b/packages/rad-components/src/index.ts index 099b463..07635cb 100644 --- a/packages/rad-components/src/index.ts +++ b/packages/rad-components/src/index.ts @@ -1 +1 @@ -export * from './components'; \ No newline at end of file +export * from './components'; diff --git a/packages/rad-components/src/sampledata.ts b/packages/rad-components/src/sampledata.ts index acf08dc..fadfd15 100644 --- a/packages/rad-components/src/sampledata.ts +++ b/packages/rad-components/src/sampledata.ts @@ -1,36 +1,38 @@ -import { AppGraph, Resource } from "./graph"; +import { AppGraph, Resource } from './graph'; export const DemoApplication: AppGraph = { name: 'demo', resources: [ { - id: "/planes/radius/local/resourceGroups/test-group/providers/Applications.Core/containers/webapp", - name: "webapp", - type: "Applications.Core/container", - provider: "radius", - provisioningState: "Succeeded", - connections: [{ - id: "/planes/radius/local/resourceGroups/test-group/providers/Applications.Datastores/redisCaches/db", - name: "db", - type: "Applications.Datastores/redisCaches", - provider: "radius", - direction: "Outbound", - }] + id: '/planes/radius/local/resourceGroups/test-group/providers/Applications.Core/containers/webapp', + name: 'webapp', + type: 'Applications.Core/container', + provider: 'radius', + provisioningState: 'Succeeded', + connections: [ + { + id: '/planes/radius/local/resourceGroups/test-group/providers/Applications.Datastores/redisCaches/db', + name: 'db', + type: 'Applications.Datastores/redisCaches', + provider: 'radius', + direction: 'Outbound', + }, + ], }, { - id: "/planes/radius/local/resourceGroups/test-group/providers/Applications.Datastores/redisCaches/db", - name: "db", - type: "Applications.Datastores/redisCaches", - provider: "radius", - provisioningState: "Succeeded", - } - ] -} + id: '/planes/radius/local/resourceGroups/test-group/providers/Applications.Datastores/redisCaches/db', + name: 'db', + type: 'Applications.Datastores/redisCaches', + provider: 'radius', + provisioningState: 'Succeeded', + }, + ], +}; export const ContainerResource: Resource = { - id: "/planes/radius/local/resourceGroups/test-group/providers/Applications.Core/containers/test-container", - name: "test-container", - type: "Applications.Core/container", - provider: "radius", - provisioningState: "Succeeded", -} \ No newline at end of file + id: '/planes/radius/local/resourceGroups/test-group/providers/Applications.Core/containers/test-container', + name: 'test-container', + type: 'Applications.Core/container', + provider: 'radius', + provisioningState: 'Succeeded', +}; diff --git a/packages/rad-components/src/stories/Configure.mdx b/packages/rad-components/src/stories/Configure.mdx index 5157090..fd0a8f1 100644 --- a/packages/rad-components/src/stories/Configure.mdx +++ b/packages/rad-components/src/stories/Configure.mdx @@ -1,35 +1,37 @@ -import { Meta } from "@storybook/blocks"; - -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => ( + - - + > + + +); @@ -38,6 +40,7 @@ export const RightArrow = () =>
@@ -84,6 +87,7 @@ export const RightArrow = () =>
@@ -203,6 +207,7 @@ export const RightArrow = () => Discover tutorials
+