Fix lint issues + API report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/.eslintrc.js

@@ -1,4 +1,8 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname), {
+module.exports = {
+  ...require('@backstage/cli/config/eslint-factory')(__dirname),
   extends: ['plugin:storybook/recommended'],
+  rules: {
+    'react/forbid-elements': 'off',
+  },
 };
 

packages/canon/docs/components/chip/chip.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { recipe } from '@vanilla-extract/recipes';
 
 export const chipStyles = recipe({

packages/canon/docs/components/chip/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { chipStyles } from './chip.css';
 

packages/canon/docs/components/columns/columns.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { style } from '@vanilla-extract/css';
 
 export const styles = style({

packages/canon/docs/components/columns/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { styles } from './columns.css';
 

packages/canon/docs/components/component-status/component-status.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 

packages/canon/docs/components/component-status/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { container, pill, title } from './component-status.css';
 

packages/canon/docs/components/index.ts

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 export * from './chip';
 export * from './table';
 export * from './title';

packages/canon/docs/components/layout-components/index.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import {
   container,

packages/canon/docs/components/layout-components/layout-components.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { style } from '@vanilla-extract/css';
 
 export const container = style({

packages/canon/docs/components/table/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import {
   cellStyles,

packages/canon/docs/components/table/table.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { style, globalStyle } from '@vanilla-extract/css';
 
 export const wrapperStyles = style({

packages/canon/docs/components/text/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { textStyles } from './text.css';
 

packages/canon/docs/components/text/text.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { globalStyle, style } from '@vanilla-extract/css';
 
 export const textStyles = style({

packages/canon/docs/components/title/index.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { titleStyles } from './title.css';
 

packages/canon/docs/components/title/title.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { recipe } from '@vanilla-extract/recipes';
 
 export const titleStyles = recipe({

packages/canon/src/components/box/box.css.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { style } from '@vanilla-extract/css';
 
 export const base = style({

packages/canon/src/components/box/box.tsx

@@ -13,36 +13,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { createElement } from 'react';
-import { sprinkles, Sprinkles } from './sprinkles.css';
+import { boxSprinkles } from './sprinkles.css';
 import { base } from './box.css';
 
-type HTMLProperties = Omit<
-  React.AllHTMLAttributes<HTMLElement>,
-  keyof Sprinkles
->;
-
-export type BoxProps = Sprinkles &
-  HTMLProperties & {
+/**
+ * Properties for {@link Box}
+ *
+ * @public
+ */
+export type BoxProps = Parameters<typeof boxSprinkles>[0] &
+  Omit<
+    React.AllHTMLAttributes<HTMLElement>,
+    keyof Parameters<typeof boxSprinkles>[0]
+  > & {
     as?: keyof JSX.IntrinsicElements;
   };
 
+/** @public */
 export const Box = ({ as = 'div', className, style, ...props }: BoxProps) => {
-  const sprinklesProps: Record<string, unknown> = {};
+  const boxSprinklesProps: Record<string, unknown> = {};
   const nativeProps: Record<string, unknown> = {};
 
   // Split props between sprinkles and native HTML props
   Object.entries(props).forEach(([key, value]) => {
     if (value === undefined) return;
 
-    if (sprinkles.properties.has(key as keyof Sprinkles)) {
-      sprinklesProps[key] = value;
+    if (
+      boxSprinkles.properties.has(
+        key as keyof Parameters<typeof boxSprinkles>[0],
+      )
+    ) {
+      boxSprinklesProps[key] = value;
     } else {
       nativeProps[key] = value;
     }
   });
 
-  const sprinklesClassName = sprinkles(sprinklesProps);
+  const sprinklesClassName = boxSprinkles(boxSprinklesProps);
 
   return createElement(as, {
     className: [base, sprinklesClassName, className].filter(Boolean).join(' '),

packages/canon/src/components/box/docs/padding.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import { Stack } from '../../stack/stack';
 import { Inline } from '../../inline/inline';

packages/canon/src/components/box/docs/props-table.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import * as Table from '../../../../docs/components';
 import { Chip } from '../../../../docs/components';

packages/canon/src/components/box/index.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Box } from './box';
+export type { BoxProps } from './box';
+export { boxSprinkles } from './sprinkles.css';

packages/canon/src/components/box/properties.ts

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 export const breakpoints = {
   xs: {},
   sm: { '@media': 'screen and (min-width: 640px)' },

packages/canon/src/components/box/sprinkles.css.ts

@@ -111,10 +111,11 @@ export const colorProperties = defineProperties({
   },
 });
 
-export const sprinkles = createSprinkles(responsiveProperties, colorProperties);
-
-// It's a good idea to export the Sprinkles type too
-export type Sprinkles = Parameters<typeof sprinkles>[0];
+/** @public */
+export const boxSprinkles = createSprinkles(
+  responsiveProperties,
+  colorProperties,
+);
 
 export type OptionalResponsiveValue<Value extends string | number> =
   ConditionalValue<typeof responsiveProperties, Value>;

packages/canon/src/components/button/button.css.ts

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { recipe } from '@vanilla-extract/recipes';
-// import { vars } from '../../theme/themes.css';
 
 export const button = recipe({
   base: {

packages/canon/src/components/button/button.stories.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './button';

packages/canon/src/components/button/button.tsx

@@ -13,12 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { button } from './button.css';
 import { Box } from '../box/box';
 import { Icon } from '../icon/icon';
 import { IconNames } from '../icon/context';
 
+/**
+ * Properties for {@link Button}
+ *
+ * @public
+ */
 export interface ButtonProps {
   size?: 'small' | 'medium';
   variant?: 'primary' | 'secondary';
@@ -28,6 +34,7 @@ export interface ButtonProps {
   iconEnd?: IconNames;
 }
 
+/** @public */
 export const Button = ({
   size = 'medium',
   variant = 'primary',

packages/canon/src/components/button/index.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { Button } from './button';
+export type { ButtonProps } from './button';

packages/canon/src/components/button/styles.css

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 :root {
   --button-primary-background-color: #1ed760;
   --button-primary-background-color-hover: #3be477;

packages/canon/src/components/icon/context.tsx

@@ -1,8 +1,25 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React, { createContext, useContext, ReactNode } from 'react';
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Cloud } from 'lucide-react';
 import { CustomIcon } from './custom-icon';
 
 // List of icons available that can also be overridden.
+/** @public */
 export type IconNames =
   | 'ArrowDown'
   | 'ArrowLeft'
@@ -29,12 +46,13 @@ const defaultIcons: IconMap = {
 
 const IconContext = createContext<IconContextProps>({ icons: defaultIcons });
 
+/** @public */
 export const IconProvider = ({
   children,
   overrides,
 }: {
   children: ReactNode;
-  overrides: IconMap;
+  overrides: Partial<Record<IconNames, React.ComponentType>>;
 }) => {
   // Merge provided overrides with default icons
   const combinedIcons = { ...defaultIcons, ...overrides };
@@ -46,4 +64,5 @@ export const IconProvider = ({
   );
 };
 
+/** @public */
 export const useIcons = () => useContext(IconContext);

packages/canon/src/components/icon/custom-icon.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 
 export const CustomIcon = () => (

packages/canon/src/components/icon/icon.stories.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon } from './icon';

packages/canon/src/components/icon/icon.tsx

@@ -1,6 +1,23 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
 import { useIcons, IconNames } from './context';
 
+/** @public */
 export const Icon = ({ name }: { name: IconNames }) => {
   const { icons } = useIcons();
 

packages/canon/src/components/icon/index.tsx

@@ -1,2 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 export * from './icon';
-export * from './context';
+export { IconProvider } from './context';
+export type { IconNames } from './context';

packages/canon/src/components/inline/inline.stories.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Inline } from './inline';

packages/canon/src/components/stack/stack.stories.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Stack } from './stack';

packages/canon/src/index.ts

@@ -15,6 +15,6 @@
  */
 
 // Components
-export * from './components/button/button';
-export * from './components/box/box';
+export * from './components/button';
+export * from './components/box';
 export * from './components/icon';

packages/canon/src/theme/styles.css

@@ -6,6 +6,12 @@
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 /* Geist font */

packages/canon/src/theme/theme.css

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* Light theme */
 :root {
   --canon-accent: #1ed760;

packages/canon/src/utils/align.ts

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import {
   type OptionalResponsiveValue,
   mapResponsiveValue,

packages/canon/src/utils/list-values.ts

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import {
   responsiveProperties,
   colorProperties,