diff --git a/packages/canon/canon-docs/.gitignore b/packages/canon/canon-docs/.gitignore new file mode 100644 index 0000000000..5ef6a52078 --- /dev/null +++ b/packages/canon/canon-docs/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/packages/canon/canon-docs/README.md b/packages/canon/canon-docs/README.md new file mode 100644 index 0000000000..e215bc4ccf --- /dev/null +++ b/packages/canon/canon-docs/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/packages/canon/canon-docs/app/favicon.ico b/packages/canon/canon-docs/app/favicon.ico new file mode 100644 index 0000000000..718d6fea48 Binary files /dev/null and b/packages/canon/canon-docs/app/favicon.ico differ diff --git a/packages/canon/canon-docs/app/globals.css b/packages/canon/canon-docs/app/globals.css new file mode 100644 index 0000000000..ce79569b3d --- /dev/null +++ b/packages/canon/canon-docs/app/globals.css @@ -0,0 +1,11 @@ +body { + display: flex; + flex-direction: row; + background-color: var(--canon-background); + color: var(--canon-text-primary); +} + +iframe { + border: none; + width: 100%; +} diff --git a/packages/canon/canon-docs/app/layout.tsx b/packages/canon/canon-docs/app/layout.tsx new file mode 100644 index 0000000000..8db924521a --- /dev/null +++ b/packages/canon/canon-docs/app/layout.tsx @@ -0,0 +1,30 @@ +import type { Metadata } from 'next'; +import { Sidebar } from '../components/sidebar'; +import '../../src/css/core.css'; +import '../../src/css/components.css'; +import './globals.css'; +import { CanonProvider } from '../../src/contexts/canon'; + +export const metadata: Metadata = { + title: 'Canon', + description: 'UI library for Backstage', +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + + <> + + {children} + + + + + ); +} diff --git a/packages/canon/canon-docs/app/page.module.css b/packages/canon/canon-docs/app/page.module.css new file mode 100644 index 0000000000..601dd3a93d --- /dev/null +++ b/packages/canon/canon-docs/app/page.module.css @@ -0,0 +1,3 @@ +.page { + flex: 1; +} diff --git a/packages/canon/canon-docs/app/page.tsx b/packages/canon/canon-docs/app/page.tsx new file mode 100644 index 0000000000..09b77144cf --- /dev/null +++ b/packages/canon/canon-docs/app/page.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { useSearchParams } from 'next/navigation'; +import styles from './page.module.css'; + +export default function Home() { + const searchParams = useSearchParams(); + const theme = searchParams.get('theme') === 'dark' ? 'Dark' : 'Light'; + const chromaticId = '67584b7e8c2eb09c0422c27e-dmfbzicnkw'; + const chromaticUrl = `https://${chromaticId}.chromatic.com/iframe.html`; + const iframeUrl = `${chromaticUrl}?globals=theme%3A${theme}&args=&id=components-button--primary`; + + return ( +
+