CPC: Cleanup the ui dir

.circleci/config.yml

@@ -267,7 +267,7 @@ jobs:
  at: .
  - codecov/upload
  - report-workflow-on-failure
- chromatic-internal-storybooks:
+ chromatic-internal-storybook:
  executor:
  class: medium+
  name: sb_node_18_browsers
@@ -280,10 +280,8 @@ jobs:
  at: .
  - run:
  name: Running Chromatic
- command: |
- cd code
- yarn storybook:ui:chromatic
- yarn storybook:blocks:chromatic
+ command: yarn storybook:ui:chromatic
+ working_directory: code
  - report-workflow-on-failure
  - store_test_results:
  path: test-results
@@ -655,7 +653,7 @@ workflows:
  - script-checks:
  requires:
  - build
- - chromatic-internal-storybooks:
+ - chromatic-internal-storybook:
  requires:
  - build
  - coverage:
@@ -717,7 +715,7 @@ workflows:
  - script-checks:
  requires:
  - build
- - chromatic-internal-storybooks:
+ - chromatic-internal-storybook:
  requires:
  - build
  - coverage:
@@ -780,7 +778,7 @@ workflows:
  - script-checks:
  requires:
  - build
- - chromatic-internal-storybooks:
+ - chromatic-internal-storybook:
  requires:
  - build
  - create-sandboxes:

code/.eslintrc.js

@@ -9,10 +9,6 @@ const addonsPackages = fs
 const libPackages = fs
  .readdirSync(path.join(__dirname, 'lib'))
  .filter((p) => fs.statSync(path.join(__dirname, 'lib', p)).isDirectory());
-const uiPackages = fs
- .readdirSync(path.join(__dirname, 'ui'))
- .filter((p) => fs.statSync(path.join(__dirname, 'ui', p)).isDirectory())
- .filter((p) => !p.startsWith('.'));
 
 module.exports = {
  root: true,
@@ -104,7 +100,7 @@ module.exports = {
  },
  },
  {
- files: ['**/ui/.storybook/**'],
+ files: ['**/.storybook/**'],
  rules: {
  'import/no-extraneous-dependencies': [
  'error',
@@ -124,19 +120,6 @@ module.exports = {
  ],
  },
  })),
- ...uiPackages.map((directory) => ({
- files: [path.join('**', 'ui', directory, '**', '*.*')],
- rules: {
- 'import/no-extraneous-dependencies': [
- 'error',
- {
- packageDir: [__dirname, path.join(__dirname, 'ui', directory)],
- devDependencies: true,
- peerDependencies: true,
- },
- ],
- },
- })),
  ...libPackages.map((directory) => ({
  files: [path.join('**', 'lib', directory, '**', '*.*')],
  rules: {

code/.storybook/main.ts

@@ -0,0 +1,87 @@
+import path from 'path';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '../frameworks/react-vite';
+
+const componentsPath = path.join(__dirname, '../core/src/components');
+const managerApiPath = path.join(__dirname, '../core/src/manager-api');
+
+const config: StorybookConfig = {
+ stories: [
+ {
+ directory: '../core/src/manager',
+ titlePrefix: '@manager',
+ },
+ {
+ directory: '../core/src/preview-api',
+ titlePrefix: '@preview',
+ },
+ {
+ directory: '../core/src/components',
+ titlePrefix: '@components',
+ },
+ {
+ directory: '../lib/blocks/src',
+ titlePrefix: '@blocks',
+ },
+ {
+ directory: '../addons/controls/src',
+ titlePrefix: '@addons/controls',
+ },
+ {
+ directory: '../addons/onboarding/src',
+ titlePrefix: '@addons/onboarding',
+ },
+ {
+ directory: '../addons/interactions/src',
+ titlePrefix: '@addons/interactions',
+ },
+ ],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/addon-storysource',
+ '@storybook/addon-designs',
+ '@storybook/addon-a11y',
+ '@chromatic-com/storybook',
+ ],
+ build: {
+ test: {
+ // we have stories for the blocks here, we can't exclude them
+ disableBlocks: false,
+ // some stories in blocks (ArgTypes, Controls) depends on argTypes inference
+ disableDocgen: false,
+ },
+ },
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+ core: {
+ disableTelemetry: true,
+ },
+ viteFinal: (viteConfig, { configType }) =>
+ mergeConfig(viteConfig, {
+ resolve: {
+ alias: {
+ ...(configType === 'DEVELOPMENT'
+ ? {
+ '@storybook/components': componentsPath,
+ 'storybook/components': componentsPath,
+ '@storybook/manager-api': managerApiPath,
+ 'storybook/manager-api': managerApiPath,
+ }
+ : {}),
+ },
+ },
+ optimizeDeps: { force: true },
+ build: {
+ // disable sourcemaps in CI to not run out of memory
+ sourcemap: process.env.CI !== 'true',
+ },
+ }),
+ logLevel: 'debug',
+};
+
+export default config;

code/ui/.storybook/preview.tsx → code/.storybook/preview.tsx

@@ -17,7 +17,7 @@ import type { Channel } from 'storybook/channels';
 
 import { DocsContext } from '@storybook/blocks';
 
-import { DocsPageWrapper } from '../blocks/src/components';
+import { DocsPageWrapper } from '../lib/blocks/src/components';
 
 const { document } = global;
 
@@ -107,7 +107,7 @@ export const loaders = [
  if (!relativeCsfPaths) return {};
  const csfFiles = await Promise.all(
  (relativeCsfPaths as string[]).map(async (blocksRelativePath) => {
- const projectRelativePath = `./ui/blocks/src/${blocksRelativePath.replace(
+ const projectRelativePath = `./lib/blocks/src/${blocksRelativePath.replace(
  /^..\//,
  ''
  )}.tsx`;

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from 'storybook/theming';
 import { userEvent, within, waitFor, expect } from '@storybook/test';
-import { isChromatic } from '../../../../ui/.storybook/isChromatic';
+import { isChromatic } from '../../../../.storybook/isChromatic';
 
 import { getCalls, getInteractions } from '../mocks';
 import { InteractionsPanel } from './InteractionsPanel';

code/chromatic.config.json

@@ -3,7 +3,7 @@
  "projectToken": "80b312430ec4",
  "buildScriptName": "storybook:ui:build",
  "onlyChanged": false,
- "storybookConfigDir": "ui/.storybook",
+ "storybookConfigDir": ".storybook",
  "storybookBaseDir": "./code",
  "zip": true
 }

code/core/src/common/versions.ts

@@ -56,6 +56,7 @@ export default {
  '@storybook/vue3-webpack5': '8.2.0-alpha.10',
  '@storybook/web-components-vite': '8.2.0-alpha.10',
  '@storybook/web-components-webpack5': '8.2.0-alpha.10',
+ '@storybook/blocks': '8.2.0-alpha.10',
  storybook: '8.2.0-alpha.10',
  sb: '8.2.0-alpha.10',
  '@storybook/cli': '8.2.0-alpha.10',
@@ -80,5 +81,4 @@ export default {
  '@storybook/svelte': '8.2.0-alpha.10',
  '@storybook/vue3': '8.2.0-alpha.10',
  '@storybook/web-components': '8.2.0-alpha.10',
- '@storybook/blocks': '8.2.0-alpha.10',
 };

code/core/src/preview-api/modules/preview-web/PreviewWeb.integration.test.ts

@@ -30,7 +30,7 @@ vi.mock('@storybook/core/channels', async (importOriginal) => {
  };
 });
 vi.mock('@storybook/blocks', async () => {
- const { CodeOrSourceMdx } = await import('../../../../../ui/blocks/src/blocks/mdx');
+ const { CodeOrSourceMdx } = await import('../../../../../lib/blocks/src/blocks/mdx');
  return {
  Docs: vi.fn(() => 'Docs'),
  CodeOrSourceMdx: CodeOrSourceMdx,

code/deprecated/components/package.json

@@ -5,14 +5,14 @@
  "keywords": [
  "storybook"
  ],
- "homepage": "https://github.com/storybookjs/storybook/tree/next/code/ui/components",
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/deprecated/components",
  "bugs": {
  "url": "https://github.com/storybookjs/storybook/issues"
  },
  "repository": {
  "type": "git",
  "url": "https://github.com/storybookjs/storybook.git",
- "directory": "code/ui/components"
+ "directory": "code/deprecated/components"
  },
  "funding": {
  "type": "opencollective",

code/deprecated/manager/package.json

@@ -5,14 +5,14 @@
  "keywords": [
  "storybook"
  ],
- "homepage": "https://github.com/storybookjs/storybook/tree/next/code/ui/manager",
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/deprecated/manager",
  "bugs": {
  "url": "https://github.com/storybookjs/storybook/issues"
  },
  "repository": {
  "type": "git",
  "url": "https://github.com/storybookjs/storybook.git",
- "directory": "code/ui/manager"
+ "directory": "code/deprecated/manager"
  },
  "funding": {
  "type": "opencollective",

code/ui/blocks/package.json → code/lib/blocks/package.json

@@ -5,14 +5,14 @@
  "keywords": [
  "storybook"
  ],
- "homepage": "https://github.com/storybookjs/storybook/tree/next/code/ui/blocks",
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/blocks",
  "bugs": {
  "url": "https://github.com/storybookjs/storybook/issues"
  },
  "repository": {
  "type": "git",
  "url": "https://github.com/storybookjs/storybook.git",
- "directory": "code/ui/blocks"
+ "directory": "code/lib/blocks"
  },
  "funding": {
  "type": "opencollective",

code/ui/blocks/src/blocks/Canvas.stories.tsx → code/lib/blocks/src/blocks/Canvas.stories.tsx

@@ -81,7 +81,7 @@ export const PropAdditionalActions: Story = {
  title: 'Open in GitHub',
  onClick: () => {
  window.open(
- 'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/examples/Button.stories.tsx',
+ 'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/examples/Button.stories.tsx',
  '_blank'
  );
  },

code/ui/blocks/src/blocks/Unstyled.mdx → code/lib/blocks/src/blocks/Unstyled.mdx

@@ -1,4 +1,4 @@
-import { Unstyled } from './Unstyled.tsx';
+import { Unstyled } from './Unstyled';
 
 # The Unstyled Block
 

code/ui/blocks/src/components/Preview.stories.tsx → code/lib/blocks/src/components/Preview.stories.tsx

@@ -249,7 +249,7 @@ export const WithAdditionalActions = (
  title: 'Open on GitHub',
  onClick: () => {
  global.location.href =
- 'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/components/Preview.stories.tsx#L165-L186';
+ 'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/components/Preview.stories.tsx#L165-L186';
  },
  },
  ]}

code/ui/blocks/src/examples/CanvasParameters.stories.tsx → code/lib/blocks/src/examples/CanvasParameters.stories.tsx

@@ -22,7 +22,7 @@ export const AdditionalActions: Story = {
  title: 'Open in GitHub',
  onClick: () => {
  window.open(
- 'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/examples/Button.stories.tsx',
+ 'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/examples/Button.stories.tsx',
  '_blank'
  );
  },

code/package.json

@@ -20,7 +20,6 @@
  "lib/*",
  "deprecated/*",
  "builders/*",
- "ui/*",
  "presets/*",
  "renderers/*"
  ]
@@ -46,12 +45,9 @@
  "lint:package": "sort-package-json",
  "local-registry": "yarn --cwd ../scripts local-registry",
  "publish-sandboxes": "yarn --cwd ../scripts publish",
- "storybook:blocks": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui",
- "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build",
- "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
- "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.cjs dev --port 6006 --config-dir ./ui/.storybook",
- "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.cjs build --config-dir ./ui/.storybook --webpack-stats-json",
- "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --exit-zero-on-changes --exit-once-uploaded",
+ "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.cjs dev --port 6006 --config-dir ./.storybook",
+ "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.cjs build --config-dir ./.storybook --webpack-stats-json",
+ "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --exit-zero-on-changes --exit-once-uploaded",
  "task": "yarn --cwd ../scripts task",
  "test": "NODE_OPTIONS=--max_old_space_size=4096 vitest run",
  "test:watch": "NODE_OPTIONS=--max_old_space_size=4096 vitest watch"