Working on playground
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -1,3 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
import { Text } from '@backstage/canon';
|
||||
import { screenSizes } from '@/utils/data';
|
||||
import { Frame } from '@/components/Frame';
|
||||
import { Stack, Inline, Button } from '@backstage/canon';
|
||||
|
||||
export default function PlaygroundPage() {
|
||||
return <div></div>;
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{screenSizes.map(screenSize => (
|
||||
<div
|
||||
className={styles.breakpointContainer}
|
||||
style={{ width: screenSize.width }}
|
||||
key={screenSize.slug}
|
||||
>
|
||||
<Text>
|
||||
{screenSize.title} - {screenSize.width}px
|
||||
</Text>
|
||||
<div className={styles.breakpointContent}>
|
||||
<Frame>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text>Button - Primary - Small</Text>
|
||||
<Inline alignY="center">
|
||||
<Button iconStart="cloud">Button</Button>
|
||||
<Button iconEnd="chevronRight">Button</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">
|
||||
Button
|
||||
</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">
|
||||
Button
|
||||
</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">
|
||||
Button
|
||||
</Button>
|
||||
<Button iconStart="cloud" iconEnd="chevronRight">
|
||||
Button
|
||||
</Button>
|
||||
</Inline>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Frame>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.breakpointContainer {
|
||||
flex-shrink: 0;
|
||||
margin-top: 40px;
|
||||
height: calc(100vh - 86px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.breakpointContent {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--canon-border-base);
|
||||
background-color: var(--canon-background-base);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import ReactFrame from 'react-frame-component';
|
||||
import '@backstage/canon/src/css/core.css';
|
||||
import '@backstage/canon/src/css/components.css';
|
||||
|
||||
export const Frame = ({ children }: { children: React.ReactNode }) => {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setShow(true);
|
||||
}, []);
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<ReactFrame
|
||||
loading="lazy"
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
head={
|
||||
<>
|
||||
<link rel="stylesheet" href="/core.css" />
|
||||
<link rel="stylesheet" href="/components.css" />
|
||||
</>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</ReactFrame>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import styles from './Sidebar.module.css';
|
||||
import { TabsVersion, TabsTheme, TabsPages } from '../Tabs';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import { Docs } from './docs';
|
||||
import { Playground } from './playground';
|
||||
|
||||
export const Sidebar = () => {
|
||||
const pathname = usePathname();
|
||||
const isPlayground = pathname.includes('/playground');
|
||||
|
||||
return (
|
||||
<div className={styles.sidebar}>
|
||||
<div className={styles.content}>
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
import Link from 'next/link';
|
||||
'use client';
|
||||
|
||||
import { components } from '@/utils/data';
|
||||
import { Box, Checkbox, Text } from '@backstage/canon';
|
||||
import { motion } from 'framer-motion';
|
||||
import styles from './Sidebar.module.css';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const breakpoints = [
|
||||
{ title: 'XSmall', slug: 'xs' },
|
||||
{ title: 'Small', slug: 'sm' },
|
||||
{ title: 'Medium', slug: 'md' },
|
||||
{ title: 'Large', slug: 'lg' },
|
||||
{ title: 'XLarge', slug: 'xl' },
|
||||
{ title: 'XXLarge', slug: '2xl' },
|
||||
];
|
||||
import { screenSizes } from '@/utils/data';
|
||||
|
||||
export const Playground = () => {
|
||||
const pathname = usePathname();
|
||||
@@ -40,18 +33,18 @@ export const Playground = () => {
|
||||
</Text>
|
||||
</Box>
|
||||
{components.map(({ slug, title }) => (
|
||||
<div className={styles.line}>
|
||||
<div className={styles.line} key={slug}>
|
||||
<Text variant="body">{title}</Text>
|
||||
<Checkbox />
|
||||
</div>
|
||||
))}
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
Breakpoints
|
||||
Screen sizes
|
||||
</Text>
|
||||
</Box>
|
||||
{breakpoints.map(({ title }) => (
|
||||
<div className={styles.line}>
|
||||
{screenSizes.map(({ slug, title }) => (
|
||||
<div className={styles.line} key={slug}>
|
||||
<Text variant="body">{title}</Text>
|
||||
<Checkbox />
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,14 @@
|
||||
|
||||
import { useTheme } from 'next-themes';
|
||||
import styles from './styles.module.css';
|
||||
export const Story = ({ id, height }: { id: string; height?: number }) => {
|
||||
import IframeResizer from '@iframe-resizer/react';
|
||||
|
||||
interface StoryProps {
|
||||
id: string;
|
||||
border?: boolean;
|
||||
}
|
||||
|
||||
export const Story = ({ id, border = true }: StoryProps) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
const localTheme = theme === 'dark' ? 'Dark' : 'Light';
|
||||
@@ -13,11 +20,14 @@ export const Story = ({ id, height }: { id: string; height?: number }) => {
|
||||
const iframeUrl = `${url}?globals=theme%3A${localTheme}&args=&id=${id}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
<IframeResizer
|
||||
src={iframeUrl}
|
||||
license="GPLv3"
|
||||
checkOrigin={false}
|
||||
className={styles.container}
|
||||
style={{ height: height ? `${height}px` : '120px' }}
|
||||
>
|
||||
<iframe src={iframeUrl} width="100%" height="100%" />
|
||||
</div>
|
||||
style={{
|
||||
border: border ? '1px solid var(--canon-border-base)' : 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
border: 1px solid var(--canon-border-base);
|
||||
width: 1px;
|
||||
min-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@ Here's a view when buttons have icons.
|
||||
|
||||
Here's a view when buttons are full width.
|
||||
|
||||
<Story id="button--full-width" height={240} />
|
||||
<Story id="button--full-width" />
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack style={{ width: '300px' }}>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { PropsTable } from '../components/PropsTable';
|
||||
|
||||
Headings are used to structure the content of your page.
|
||||
|
||||
<Story id="heading--title-1" height={108} />
|
||||
<Story id="heading--title-1" />
|
||||
|
||||
<CodeBlock
|
||||
code={`import { Heading } from "@backstage/canon";
|
||||
@@ -44,7 +44,7 @@ Headings are used to structure the content of your page.
|
||||
The `Heading` component has a `variant` prop that can be used to change the
|
||||
appearance of the heading.
|
||||
|
||||
<Story id="heading--all-variants" height={400} />
|
||||
<Story id="heading--all-variants" />
|
||||
|
||||
<CodeBlock
|
||||
code={`<Stack gap="md">
|
||||
|
||||
@@ -15,7 +15,7 @@ create a hierarchy of information and to make the content more readable. The
|
||||
best way to use add these headings to your page is to import the [Heading
|
||||
component](?path=/docs/components-heading--docs).
|
||||
|
||||
<Story id="heading--all-variants" height={400} />
|
||||
<Story id="heading--all-variants" />
|
||||
|
||||
## Text
|
||||
|
||||
@@ -25,4 +25,4 @@ versatile and can be paired with regular and bold of font weights. You can use
|
||||
the [Text component](?path=/docs/components-text--docs) to add text to your
|
||||
page.
|
||||
|
||||
<Story id="text--all-variants" height={410} />
|
||||
<Story id="text--all-variants" />
|
||||
|
||||
@@ -5,16 +5,15 @@
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"dev": "concurrently \"next dev\" \"yarn watch-css\"",
|
||||
"lint": "next lint",
|
||||
"prettier:check": "prettier --check .",
|
||||
"prettier:fix": "prettier --write .",
|
||||
"start": "next start"
|
||||
"start": "next start",
|
||||
"watch-css": "node scripts/watch-css.js"
|
||||
},
|
||||
"prettier": "@backstage/cli/config/prettier",
|
||||
"dependencies": {
|
||||
"@backstage/canon": "workspace:^",
|
||||
"@base-ui-components/react": "^1.0.0-alpha.4",
|
||||
"@iframe-resizer/react": "^5.3.2",
|
||||
"@mdx-js/loader": "^3.1.0",
|
||||
"@mdx-js/react": "^3.1.0",
|
||||
"@next/mdx": "^15.1.3",
|
||||
@@ -23,15 +22,19 @@
|
||||
"next": "15.1.3",
|
||||
"next-themes": "^0.4.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"react-frame-component": "^5.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"chokidar": "^4.0.3",
|
||||
"concurrently": "^9.1.2",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.1.3",
|
||||
"lightningcss": "^1.28.2",
|
||||
"shiki": "^1.24.4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.cn-button{all:unset;user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);font-size:var(--canon-font-size-body);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.cn-button-primary{background-color:var(--canon-accent);color:var(--canon-text-primary-on-accent);&:hover{box-shadow:inset 0 0 0 1px var(--canon-outline-focus);color:var(--canon-text-primary);background-color:#0000}}.cn-button-secondary{box-shadow:inset 0 0 0 1px var(--canon-outline);color:var(--canon-text-primary);background-color:#0000;&:hover{box-shadow:inset 0 0 0 1px var(--canon-outline-hover)}}.cn-button-tertiary{color:var(--canon-text-primary);background-color:#0000;&:hover{color:var(--canon-text-secondary)}}.cn-button-small{height:32px;padding-left:6px;padding-right:6px}.cn-button-medium{height:40px;padding-left:8px;padding-right:8px}.cn-button-content{align-items:center;gap:var(--canon-spacing-xs);font-weight:var(--canon-font-weight-bold);display:flex}.cn-button-content-icon-both{flex:1}.canon-stack{flex-direction:column;display:flex}.canon-inline{flex-wrap:wrap;display:flex}.canon-grid{display:grid}.canon-container{max-width:var(--canon-container-max-width);padding:0 var(--canon-container-padding);margin:0 auto}.icon-12{width:12px;height:12px}.icon-16{width:16px;height:16px}.icon-24{width:24px;height:24px}.checkbox-label{justify-content:center;align-items:center;gap:var(--canon-spacing-xs);font-size:var(--canon-font-size-xs);font-family:var(--canon-font-regular);color:var(--canon-text-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .checkbox{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.checkbox{all:unset;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border-base);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&[data-checked]{background-color:var(--canon-accent)}}.checkbox-indicator{color:var(--canon-text-primary-on-accent);justify-content:center;align-items:center;display:flex}.table{background-color:var(--canon-surface-1);border-radius:var(--canon-border-radius-xs);width:100%;padding-bottom:var(--canon-spacing-5xs);padding-top:var(--canon-spacing-5xs);font-size:var(--canon-font-size-body);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-spacing-xs)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-surface-3)}& .table-cell:first-child{border-top-left-radius:var(--canon-border-radius-xs);border-bottom-left-radius:var(--canon-border-radius-xs);box-shadow:inset 4px 2px 0 0 var(--canon-surface-1),inset 4px -2px 0 0 var(--canon-surface-1);padding-left:var(--canon-spacing-xs)}& .table-cell:last-child{border-top-right-radius:var(--canon-border-radius-xs);border-bottom-right-radius:var(--canon-border-radius-xs);box-shadow:inset -4px 2px 0 0 var(--canon-surface-1),inset -4px -2px 0 0 var(--canon-surface-1);padding-right:var(--canon-spacing-xs)}}.table-cell{padding:var(--canon-spacing-xs);background-color:var(--canon-surface-2);box-shadow:inset 0px 2px 0 0 var(--canon-surface-1),inset 0px -2px 0 0 var(--canon-surface-1)}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-body{font-size:var(--canon-font-size-body);line-height:140%}&.text-subtitle{font-size:var(--canon-font-size-subtitle);line-height:140%}&.text-caption{font-size:var(--canon-font-size-caption);line-height:140%}&.text-label{font-size:var(--canon-font-size-label);line-height:140%}&.text-regular{font-weight:var(--canon-font-weight-regular)}&.text-bold{font-weight:var(--canon-font-weight-bold)}}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-display{font-size:var(--canon-font-size-display);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title1{font-size:var(--canon-font-size-title1);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title2{font-size:var(--canon-font-size-title2);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title3{font-size:var(--canon-font-size-title3);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title4{font-size:var(--canon-font-size-title4);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title5{font-size:var(--canon-font-size-title5);line-height:100%;font-weight:var(--canon-font-weight-bold)}}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,43 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const chokidar = require('chokidar');
|
||||
const { bundle } = require('lightningcss');
|
||||
|
||||
const source = '../../packages/canon/src/css';
|
||||
const destination = '../public';
|
||||
|
||||
const source1 = path.join(__dirname, `${source}/core.css`);
|
||||
const destination1 = path.join(__dirname, `${destination}/core.css`);
|
||||
const source2 = path.join(__dirname, `${source}/components.css`);
|
||||
const destination2 = path.join(__dirname, `${destination}/components.css`);
|
||||
|
||||
// Function to bundle and copy the CSS file
|
||||
const bundleAndCopyFile = async (source, destination) => {
|
||||
try {
|
||||
const result = await bundle({
|
||||
filename: source,
|
||||
minify: true, // Optional: Minify the output
|
||||
});
|
||||
|
||||
fs.writeFileSync(destination, result.code);
|
||||
console.log('File bundled and copied successfully!');
|
||||
} catch (err) {
|
||||
console.error('Error bundling file:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// Watch the source file for changes
|
||||
chokidar.watch(source1).on('change', () => {
|
||||
console.log('Detected change in core.css, bundling and copying...');
|
||||
bundleAndCopyFile(source1, destination1);
|
||||
});
|
||||
|
||||
// Watch the components.css file for changes
|
||||
chokidar.watch(source2).on('change', () => {
|
||||
console.log('Detected change in components.css, bundling and copying...');
|
||||
bundleAndCopyFile(source2, destination2);
|
||||
});
|
||||
|
||||
// Initial bundle and copy
|
||||
bundleAndCopyFile(source1, destination1);
|
||||
bundleAndCopyFile(source2, destination2);
|
||||
@@ -70,3 +70,10 @@ export const components = [
|
||||
slug: 'text',
|
||||
},
|
||||
];
|
||||
|
||||
export const screenSizes = [
|
||||
{ title: 'Mobile', slug: 'mobile', width: 390 },
|
||||
{ title: 'Tablet', slug: 'tablet', width: 768 },
|
||||
{ title: 'Desktop', slug: 'desktop', width: 1280 },
|
||||
{ title: 'Wide', slug: 'wide', width: 1600 },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"
|
||||
></script>
|
||||
@@ -19,13 +19,10 @@ import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Button } from './Button';
|
||||
import { Inline } from '../Inline';
|
||||
import { Stack } from '../Stack';
|
||||
|
||||
import { Text } from '../Text';
|
||||
const meta = {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'select',
|
||||
@@ -125,3 +122,21 @@ export const Responsive: Story = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Playground: Story = {
|
||||
args: {
|
||||
children: 'Button',
|
||||
},
|
||||
render: args => (
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text>Primary</Text>
|
||||
<Inline alignY="center">
|
||||
<Button {...args} iconStart="cloud" />
|
||||
<Button {...args} iconEnd="chevronRight" />
|
||||
<Button {...args} iconStart="cloud" iconEnd="chevronRight" />
|
||||
</Inline>
|
||||
</Stack>
|
||||
</Stack>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -9,39 +9,33 @@
|
||||
color: var(--canon-text-primary);
|
||||
user-select: none;
|
||||
|
||||
& .checkbox {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-shadow: inset 0 0 0 1px var(--canon-outline);
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&[data-state='unchecked'] {
|
||||
& .checkbox-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: var(--canon-accent);
|
||||
}
|
||||
}
|
||||
|
||||
& .checkbox-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--canon-text-primary-on-accent);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .checkbox {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-base);
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&[data-checked] {
|
||||
background-color: var(--canon-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--canon-text-primary-on-accent);
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
/* Borders */
|
||||
--canon-border-base: rgba(0, 0, 0, 0.1);
|
||||
--canon-border-hover: rgba(0, 0, 0, 0.2);
|
||||
--canon-border-warning: #e36d05;
|
||||
--canon-border-error: #e22b2b;
|
||||
--canon-border-selected: #1db954;
|
||||
|
||||
@@ -3325,7 +3325,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
|
||||
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.25.7, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
|
||||
version: 7.26.0
|
||||
resolution: "@babel/runtime@npm:7.26.0"
|
||||
dependencies:
|
||||
@@ -10431,6 +10431,26 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@iframe-resizer/core@npm:5.3.2":
|
||||
version: 5.3.2
|
||||
resolution: "@iframe-resizer/core@npm:5.3.2"
|
||||
checksum: dccfa96e9e760827e6133dd0d57e17d5bdece6561fef73c7786a9304884ddffc1c511e29eb5a9a2dfbd642f7bc50dc5a15bd3da903eaf052e66b020a48e7018c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@iframe-resizer/react@npm:^5.3.2":
|
||||
version: 5.3.2
|
||||
resolution: "@iframe-resizer/react@npm:5.3.2"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.25.7
|
||||
"@iframe-resizer/core": 5.3.2
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
checksum: fd05015db207d85d9de0726a112271860d1604eb3a7e0e5ed23d8c561f9126af1ce5f1e0829091fabeaa3d76c5eef405f5241ccf501e7df5746b521c1e5b5f20
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@img/sharp-darwin-arm64@npm:0.33.5":
|
||||
version: 0.33.5
|
||||
resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
|
||||
@@ -24535,6 +24555,7 @@ __metadata:
|
||||
"@backstage/canon": "workspace:^"
|
||||
"@base-ui-components/react": ^1.0.0-alpha.4
|
||||
"@eslint/eslintrc": ^3
|
||||
"@iframe-resizer/react": ^5.3.2
|
||||
"@mdx-js/loader": ^3.1.0
|
||||
"@mdx-js/react": ^3.1.0
|
||||
"@next/mdx": ^15.1.3
|
||||
@@ -24542,13 +24563,17 @@ __metadata:
|
||||
"@types/node": ^20
|
||||
"@types/react": ^19
|
||||
"@types/react-dom": ^19
|
||||
chokidar: ^4.0.3
|
||||
concurrently: ^9.1.2
|
||||
eslint: ^9
|
||||
eslint-config-next: 15.1.3
|
||||
lightningcss: ^1.28.2
|
||||
motion: ^11.15.0
|
||||
next: 15.1.3
|
||||
next-themes: ^0.4.4
|
||||
react: ^19.0.0
|
||||
react-dom: ^19.0.0
|
||||
react-frame-component: ^5.2.7
|
||||
shiki: ^1.24.4
|
||||
typescript: ^5
|
||||
languageName: unknown
|
||||
@@ -24736,6 +24761,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"chokidar@npm:^4.0.3":
|
||||
version: 4.0.3
|
||||
resolution: "chokidar@npm:4.0.3"
|
||||
dependencies:
|
||||
readdirp: ^4.0.1
|
||||
checksum: a8765e452bbafd04f3f2fad79f04222dd65f43161488bb6014a41099e6ca18d166af613d59a90771908c1c823efa3f46ba36b86ac50b701c20c1b9908c5fe36e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"chownr@npm:^1.1.1":
|
||||
version: 1.1.4
|
||||
resolution: "chownr@npm:1.1.4"
|
||||
@@ -25538,6 +25572,24 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"concurrently@npm:^9.1.2":
|
||||
version: 9.1.2
|
||||
resolution: "concurrently@npm:9.1.2"
|
||||
dependencies:
|
||||
chalk: ^4.1.2
|
||||
lodash: ^4.17.21
|
||||
rxjs: ^7.8.1
|
||||
shell-quote: ^1.8.1
|
||||
supports-color: ^8.1.1
|
||||
tree-kill: ^1.2.2
|
||||
yargs: ^17.7.2
|
||||
bin:
|
||||
conc: dist/bin/concurrently.js
|
||||
concurrently: dist/bin/concurrently.js
|
||||
checksum: 9e25e8ee6272ada26739aff1fb43e96ac458fafca82f45b8360bdd9115d60bbc679d282dfc52001b861b6e9f32b3063aed975691d8dec9e62807a9679763a1d8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"conf@npm:^10.2.0":
|
||||
version: 10.2.0
|
||||
resolution: "conf@npm:10.2.0"
|
||||
@@ -26969,6 +27021,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"detect-libc@npm:^1.0.3":
|
||||
version: 1.0.3
|
||||
resolution: "detect-libc@npm:1.0.3"
|
||||
bin:
|
||||
detect-libc: ./bin/detect-libc.js
|
||||
checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3":
|
||||
version: 2.0.3
|
||||
resolution: "detect-libc@npm:2.0.3"
|
||||
@@ -35104,6 +35165,116 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-darwin-arm64@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-darwin-arm64@npm:1.28.2"
|
||||
conditions: os=darwin & cpu=arm64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-darwin-x64@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-darwin-x64@npm:1.28.2"
|
||||
conditions: os=darwin & cpu=x64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-freebsd-x64@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-freebsd-x64@npm:1.28.2"
|
||||
conditions: os=freebsd & cpu=x64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-linux-arm-gnueabihf@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-linux-arm-gnueabihf@npm:1.28.2"
|
||||
conditions: os=linux & cpu=arm
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-linux-arm64-gnu@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-linux-arm64-gnu@npm:1.28.2"
|
||||
conditions: os=linux & cpu=arm64 & libc=glibc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-linux-arm64-musl@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-linux-arm64-musl@npm:1.28.2"
|
||||
conditions: os=linux & cpu=arm64 & libc=musl
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-linux-x64-gnu@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-linux-x64-gnu@npm:1.28.2"
|
||||
conditions: os=linux & cpu=x64 & libc=glibc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-linux-x64-musl@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-linux-x64-musl@npm:1.28.2"
|
||||
conditions: os=linux & cpu=x64 & libc=musl
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-win32-arm64-msvc@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-win32-arm64-msvc@npm:1.28.2"
|
||||
conditions: os=win32 & cpu=arm64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss-win32-x64-msvc@npm:1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss-win32-x64-msvc@npm:1.28.2"
|
||||
conditions: os=win32 & cpu=x64
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lightningcss@npm:^1.28.2":
|
||||
version: 1.28.2
|
||||
resolution: "lightningcss@npm:1.28.2"
|
||||
dependencies:
|
||||
detect-libc: ^1.0.3
|
||||
lightningcss-darwin-arm64: 1.28.2
|
||||
lightningcss-darwin-x64: 1.28.2
|
||||
lightningcss-freebsd-x64: 1.28.2
|
||||
lightningcss-linux-arm-gnueabihf: 1.28.2
|
||||
lightningcss-linux-arm64-gnu: 1.28.2
|
||||
lightningcss-linux-arm64-musl: 1.28.2
|
||||
lightningcss-linux-x64-gnu: 1.28.2
|
||||
lightningcss-linux-x64-musl: 1.28.2
|
||||
lightningcss-win32-arm64-msvc: 1.28.2
|
||||
lightningcss-win32-x64-msvc: 1.28.2
|
||||
dependenciesMeta:
|
||||
lightningcss-darwin-arm64:
|
||||
optional: true
|
||||
lightningcss-darwin-x64:
|
||||
optional: true
|
||||
lightningcss-freebsd-x64:
|
||||
optional: true
|
||||
lightningcss-linux-arm-gnueabihf:
|
||||
optional: true
|
||||
lightningcss-linux-arm64-gnu:
|
||||
optional: true
|
||||
lightningcss-linux-arm64-musl:
|
||||
optional: true
|
||||
lightningcss-linux-x64-gnu:
|
||||
optional: true
|
||||
lightningcss-linux-x64-musl:
|
||||
optional: true
|
||||
lightningcss-win32-arm64-msvc:
|
||||
optional: true
|
||||
lightningcss-win32-x64-msvc:
|
||||
optional: true
|
||||
checksum: 6860b65b4352c2bcc3b81bf4950ad754ec431bac89fe44e608325976a096f98985b998a8dda6dc924abb87d0e946e4a8051514ca562d1e453c737184edda4702
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lilconfig@npm:^2.0.3":
|
||||
version: 2.1.0
|
||||
resolution: "lilconfig@npm:2.1.0"
|
||||
@@ -41968,6 +42139,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-frame-component@npm:^5.2.7":
|
||||
version: 5.2.7
|
||||
resolution: "react-frame-component@npm:5.2.7"
|
||||
peerDependencies:
|
||||
prop-types: ^15.5.9
|
||||
react: ">= 16.3"
|
||||
react-dom: ">= 16.3"
|
||||
checksum: e28975cf8ca1e730f66f1fc9e4d4248f33970088b95737d6a271ba8650bc35c1bbf97537685c8ab9a32af0fd89c52777e03de848b8cc3c9e8842506ddc3f65d9
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-grid-layout@npm:1.3.4":
|
||||
version: 1.3.4
|
||||
resolution: "react-grid-layout@npm:1.3.4"
|
||||
@@ -42633,6 +42815,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"readdirp@npm:^4.0.1":
|
||||
version: 4.0.2
|
||||
resolution: "readdirp@npm:4.0.2"
|
||||
checksum: 309376e717f94fb7eb61bec21e2603243a9e2420cd2e9bf94ddf026aefea0d7377ed1a62f016d33265682e44908049a55c3cfc2307450a1421654ea008489b39
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"readline-sync@npm:1.4.9":
|
||||
version: 1.4.9
|
||||
resolution: "readline-sync@npm:1.4.9"
|
||||
@@ -43733,7 +43922,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"rxjs@npm:7.8.1, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5":
|
||||
"rxjs@npm:7.8.1, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5, rxjs@npm:^7.8.1":
|
||||
version: 7.8.1
|
||||
resolution: "rxjs@npm:7.8.1"
|
||||
dependencies:
|
||||
|
||||
Reference in New Issue
Block a user