Temporary renaming

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

packages/canon/.storybook/main.ts

@@ -14,8 +14,8 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: [
     '../docs/**/*.mdx',
-    '../src/components/**/*.mdx',
-    '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/components-new/**/*.mdx',
+    '../src/components-new/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   staticDirs: ['../static'],
   addons: [

packages/canon/docs/Home.mdx

@@ -1,5 +1,5 @@
 import { Unstyled } from '@storybook/blocks';
-import { Columns, Text, ComponentStatus, Banner } from './components';
+import { Columns, Text, ComponentStatus, Banner } from './components-new';
 
 <Unstyled>
 

packages/canon/docs/Layout.mdx

@@ -1,6 +1,6 @@
 import { Unstyled, Source } from '@storybook/blocks';
-import { Title, Text, LayoutComponents } from './components';
-import * as Table from './components/table';
+import { Title, Text, LayoutComponents } from './components-new';
+import * as Table from './components-new/Table';
 
 <Unstyled>
 

packages/canon/docs/Theme.mdx

@@ -1,6 +1,6 @@
 import { Unstyled, Source } from '@storybook/blocks';
-import { Title, Text, Chip } from './components';
-import * as Table from './components/table';
+import { Title, Text, Chip } from './components-new';
+import * as Table from './components-new/Table';
 
 <Unstyled>
 

packages/canon/docs/components-new/index.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-export * from './chip';
-export * from './table';
-export * from './title';
-export * from './text';
-export * from './columns';
-export * from './component-status';
-export * from './layout-components';
-export * from './banner';
+export * from './Chip';
+export * from './Table';
+export * from './Title';
+export * from './Text';
+export * from './Columns';
+export * from './ComponentStatus';
+export * from './LayoutComponents';
+export * from './Banner';

packages/canon/src/components-new/Box/box.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta, Unstyled } from '@storybook/blocks';
+import * as BoxStories from './Box.stories';
+import { Chip } from '../../../docs/components-new/Chip';
+import * as Table from '../../../docs/components-new/Table';
+import { Box } from './Box';
+import { Stack } from '../Stack';
+import { Title, Text } from '../../../docs/components-new';
+import { Padding } from './docs/padding';
+import { listResponsiveValues, listColorValues } from '../../utils/list-values';
+import { responsiveProperties } from './sprinkles.css';
+import { PropsTable } from './docs/props-table';
+import { SpacingTable } from './docs/spacing-table';
+
+<Meta of={BoxStories} />
+
+<Unstyled>
+
+<Title type="h1">Box</Title>
+<Text>
+  Box is the lowest-level component in Canon. We use it internally to build all
+  of our components. It is a wrapper around the HTML `<div>` element and
+  provides a consistent API for styling and layout. You'll find below a list of all the available properties.
+</Text>
+
+<PropsTable />
+
+<Title type="h2">Padding & Margin</Title>
+<Text>
+  Padding and margin are used to create space around your component using our
+  predefined spacing tokens. We would recommend to use padding over margin to
+  avoid collapsing margins but both are available.
+</Text>
+
+<Padding />
+
+<SpacingTable />
+
+</Unstyled>

packages/canon/src/components-new/Box/docs/props-table.tsx

@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import * as Table from '../../../../docs/components';
-import { Chip } from '../../../../docs/components';
+import * as Table from '../../../../docs/components-new';
+import { Chip } from '../../../../docs/components-new';
 import { listResponsiveValues } from '../../../utils/list-values';
 import { responsiveProperties } from '../sprinkles.css';
 

packages/canon/src/components-new/Box/docs/spacing-table.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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-new';
+import { Chip } from '../../../../docs/components-new';
+import { listResponsiveValues } from '../../../utils/list-values';
+import { responsiveProperties } from '../sprinkles.css';
+
+console.log(responsiveProperties.styles);
+
+export const SpacingTable = () => {
+  return (
+    <Table.Root>
+      <Table.Header>
+        <Table.HeaderRow>
+          <Table.HeaderCell>Prop</Table.HeaderCell>
+          <Table.HeaderCell>Type</Table.HeaderCell>
+        </Table.HeaderRow>
+      </Table.Header>
+      <Table.Body>
+        {Object.keys(responsiveProperties.styles)
+          .filter(n =>
+            [
+              'padding',
+              'paddingX',
+              'paddingY',
+              'paddingLeft',
+              'paddingRight',
+              'paddingTop',
+              'paddingBottom',
+              'margin',
+              'marginX',
+              'marginY',
+              'marginLeft',
+              'marginRight',
+              'marginTop',
+              'marginBottom',
+            ].includes(n),
+          )
+          .map(n => (
+            <Table.Row key={n}>
+              <Table.Cell>
+                <Chip head>{n}</Chip>
+              </Table.Cell>
+              <Table.Cell>
+                {listResponsiveValues(
+                  'paddingTop' as keyof typeof responsiveProperties.styles,
+                ).map(value => (
+                  <Chip key={value}>{value}</Chip>
+                ))}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};

packages/canon/src/components/Box/docs/spacing-table.tsx

@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import * as Table from '../../../../docs/components';
-import { Chip } from '../../../../docs/components';
+import * as Table from '../../../../docs/components-new';
+import { Chip } from '../../../../docs/components-new';
 import { listResponsiveValues } from '../../../utils/list-values';
 import { responsiveProperties } from '../sprinkles.css';
 

packages/canon/src/components/box/box.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Meta, Unstyled } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
-import { Chip } from '../../../docs/components/chip';
-import * as Table from '../../../docs/components/table';
+import { Chip } from '../../../docs/components-new/Chip';
+import * as Table from '../../../docs/components-new/Table';
 import { Box } from './Box';
 import { Stack } from '../Stack';
-import { Title, Text } from '../../../docs/components';
+import { Title, Text } from '../../../docs/components-new';
 import { Padding } from './docs/padding';
 import { listResponsiveValues, listColorValues } from '../../utils/list-values';
 import { responsiveProperties } from './sprinkles.css';

packages/canon/src/index.ts

@@ -20,6 +20,6 @@
  * @packageDocumentation
  */
 
-export * from './components/Button';
-export * from './components/Box';
-export * from './components/Icon';
+export * from './components-new/Button';
+export * from './components-new/Box';
+export * from './components-new/Icon';

packages/canon/src/theme/styles.css

@@ -22,4 +22,4 @@
 @import './theme.css';
 
 /* Components */
-@import '../components/Button/styles.css';
+@import '../components-new/Button/styles.css';

packages/canon/src/utils/align.ts

@@ -17,7 +17,7 @@
 import {
   type OptionalResponsiveValue,
   mapResponsiveValue,
-} from '../components/Box/sprinkles.css';
+} from '../components-new/Box/sprinkles.css';
 
 export type Align = 'left' | 'center' | 'right';
 export type AlignY = 'top' | 'center' | 'bottom';

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

@@ -17,7 +17,7 @@
 import {
   responsiveProperties,
   colorProperties,
-} from '../components/Box/sprinkles.css';
+} from '../components-new/Box/sprinkles.css';
 
 export const listResponsiveValues = (
   value: keyof typeof responsiveProperties.styles,