Docs2: Extract doc blocks into a separate package

addons/controls/package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.7",
     "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/blocks": "7.0.0-alpha.7",
     "@storybook/client-logger": "7.0.0-alpha.7",
     "@storybook/components": "7.0.0-alpha.7",
     "@storybook/core-common": "7.0.0-alpha.7",

addons/controls/src/ControlsPanel.tsx

@@ -7,7 +7,12 @@ import {
   useParameter,
   useStorybookState,
 } from '@storybook/api';
-import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';
+import {
+  PureArgsTable as ArgsTable,
+  NoControlsWarning,
+  PresetColor,
+  SortType,
+} from '@storybook/blocks';
 
 import { PARAM_KEY } from './constants';
 

addons/docs/package.json

@@ -54,6 +54,7 @@
     "@mdx-js/react": "^1.6.22",
     "@storybook/addons": "7.0.0-alpha.7",
     "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/blocks": "7.0.0-alpha.7",
     "@storybook/components": "7.0.0-alpha.7",
     "@storybook/core-common": "7.0.0-alpha.7",
     "@storybook/core-events": "7.0.0-alpha.7",

addons/docs/src/blocks/index.ts

@@ -1,28 +1 @@
-export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
-
-export * from './Anchor';
-export * from './ArgsTable';
-export * from './Canvas';
-export * from './Description';
-export * from './DocsContext';
-export * from './DocsPage';
-export * from './DocsContainer';
-export * from './DocsRenderer'; // For testing
-export * from './ExternalDocsContainer';
-export * from './DocsStory';
-export * from './Heading';
-export * from './Meta';
-export * from './Preview';
-export * from './Primary';
-export * from './Props';
-export * from './Source';
-export * from './SourceContainer';
-export * from './Stories';
-export * from './Story';
-export * from './Subheading';
-export * from './Subtitle';
-export * from './Title';
-export * from './Wrapper';
-
-export * from './types';
-export * from './mdx';
+export * from '@storybook/blocks';

addons/docs/src/preview.ts

@@ -1,7 +1,7 @@
-export const parameters = {
+export const parameters: any = {
   docs: {
     renderer: async () => {
-      const { DocsRenderer } = await import('./blocks/DocsRenderer');
+      const { DocsRenderer } = (await import('./blocks')) as any;
       return new DocsRenderer();
     },
   },

examples/doc-blocks/.env

@@ -0,0 +1 @@
+FOO=bar

examples/doc-blocks/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../../../lib/blocks/src/**/*.stories.*'],
+  logLevel: 'debug',
+  addons: ['@storybook/addon-essentials'],
+  core: {
+    channelOptions: { allowFunction: false, maxDepth: 10 },
+    disableTelemetry: true,
+  },
+  typescript: {
+    check: true,
+    checkOptions: {},
+  },
+  features: {
+    postcss: false,
+    storyStoreV7: true,
+    buildStoriesJson: true,
+    babelModeV7: true,
+    warnOnLegacyHierarchySeparator: false,
+    previewMdx2: true,
+    breakingChangesV7: true,
+  },
+  framework: '@storybook/react-webpack5',
+};
+module.exports = config;

examples/doc-blocks/.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+  sidebar: {
+    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+  },
+});

examples/doc-blocks/.storybook/preview.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Global, ThemeProvider, convert, themes, createReset } from '@storybook/theming';
+
+export const decorators = [
+  (StoryFn) => (
+    <ThemeProvider theme={convert(themes.light)}>
+      <Global styles={createReset} />
+      <StoryFn />
+    </ThemeProvider>
+  ),
+];

examples/doc-blocks/README.md

@@ -0,0 +1,3 @@
+# Storybook TS example
+
+This Storybook demonstrates support for TypeScript in Storybook without additional configuration.

examples/doc-blocks/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { chrome: '100' } }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

examples/doc-blocks/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@storybook/example-doc-blocks",
+  "version": "7.0.0-alpha.7",
+  "private": true,
+  "scripts": {
+    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
+    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011",
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9010 --no-manager-cache"
+  },
+  "dependencies": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@storybook/addon-essentials": "7.0.0-alpha.7",
+    "@storybook/addon-storyshots": "7.0.0-alpha.7",
+    "@storybook/addon-storysource": "7.0.0-alpha.7",
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/cli": "7.0.0-alpha.7",
+    "@storybook/components": "7.0.0-alpha.7",
+    "@storybook/react-webpack5": "7.0.0-alpha.7",
+    "@storybook/theming": "7.0.0-alpha.7",
+    "@types/babel__preset-env": "^7",
+    "@types/react": "^16.14.23",
+    "@types/react-dom": "^16.9.14",
+    "cross-env": "^7.0.3",
+    "lodash": "^4.17.21",
+    "sb": "7.0.0-alpha.7",
+    "typescript": "~4.6.3",
+    "webpack": "5"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "2ea6e5abac97"
+    }
+  }
+}

examples/doc-blocks/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": [
+    "src/*",
+    ".storybook/main.ts"
+  ]
+}

lib/blocks/README.md

@@ -0,0 +1,23 @@
+# Storybook Doc Blocks
+
+Portable documentation components for building design systems in Storybook.
+
+## Blocks development
+
+To bootstrap, in the monorepo root:
+
+```sh
+yarn && yarn bootstrap --core
+```
+
+To develop this package, in the monorepo root:
+
+```sh
+yarn build blocks --watch
+```
+
+To run storybook, in this directory:
+
+```sh
+yarn storybook
+```

lib/blocks/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@storybook/blocks",
+  "version": "7.0.0-alpha.7",
+  "description": "Storybook Doc Blocks",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/blocks",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "lib/blocks"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/client-logger": "7.0.0-alpha.7",
+    "@storybook/components": "7.0.0-alpha.7",
+    "@storybook/core-events": "7.0.0-alpha.7",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/docs-tools": "7.0.0-alpha.7",
+    "@storybook/preview-web": "7.0.0-alpha.7",
+    "@storybook/store": "7.0.0-alpha.7",
+    "@storybook/theming": "7.0.0-alpha.7",
+    "color-convert": "^2.0.1",
+    "core-js": "^3.8.2",
+    "fast-deep-equal": "^3.1.3",
+    "global": "^4.4.0",
+    "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.1.3",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.2.2",
+    "react-colorful": "^5.1.2",
+    "ts-dedent": "^2.0.0",
+    "util-deprecate": "^1.0.2"
+  },
+  "devDependencies": {
+    "@digitak/esrun": "^3.2.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundlerEntrypoint": [
+    "./src/index.ts"
+  ],
+  "gitHead": "b2e85f3599c043815b18bbfc5ca563bf1c6e4add"
+}

addons/docs/src/blocks/ArgsTable.tsx → lib/blocks/src/blocks/ArgsTable.tsx

@@ -1,17 +1,17 @@
 import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
 import mapValues from 'lodash/mapValues';
+import { ArgTypesExtractor } from '@storybook/docs-tools';
+import { addons } from '@storybook/addons';
+import { filterArgTypes, PropDescriptor } from '@storybook/store';
+import Events from '@storybook/core-events';
+import { StrictArgTypes, Args, Globals } from '@storybook/csf';
 import {
   ArgsTable as PureArgsTable,
   ArgsTableProps as PureArgsTableProps,
   ArgsTableError,
   SortType,
   TabbedArgsTable,
-} from '@storybook/components';
-import { ArgTypesExtractor } from '@storybook/docs-tools';
-import { addons } from '@storybook/addons';
-import { filterArgTypes, PropDescriptor } from '@storybook/store';
-import Events from '@storybook/core-events';
-import { StrictArgTypes, Args, Globals } from '@storybook/csf';
+} from '../components';
 
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';

addons/docs/src/blocks/Canvas.tsx → lib/blocks/src/blocks/Canvas.tsx

@@ -1,12 +1,12 @@
 import React, { FC, ReactElement, ReactNode, ReactNodeArray, useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { toId, storyNameFromExport, AnyFramework } from '@storybook/csf';
+import { resetComponents } from '@storybook/components';
 import {
-  resetComponents,
   Preview as PurePreview,
   PreviewProps as PurePreviewProps,
   PreviewSkeleton,
-} from '@storybook/components';
+} from '../components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { SourceContext, SourceContextProps } from './SourceContainer';
 import { getSourceProps, SourceState } from './Source';

addons/docs/src/blocks/Description.tsx → lib/blocks/src/blocks/Description.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useContext } from 'react';
-import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
 import { str } from '@storybook/docs-tools';
+import { Description, DescriptionProps as PureDescriptionProps } from '../components';
 
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './types';

addons/docs/src/blocks/DocsContainer.tsx → lib/blocks/src/blocks/DocsContainer.tsx

@@ -4,8 +4,9 @@ import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
+import { components as htmlComponents } from '@storybook/components';
 import { AnyFramework } from '@storybook/csf';
+import { DocsWrapper, DocsContent } from '../components';
 import { DocsContextProps, DocsContext } from './DocsContext';
 import { anchorBlockIdFromId } from './Anchor';
 import { storyBlockIdFromId } from './Story';

addons/docs/src/blocks/Source.tsx → lib/blocks/src/blocks/Source.tsx

@@ -1,12 +1,12 @@
 import React, { ComponentProps, FC, useContext } from 'react';
-import { Source as PureSource, SourceError } from '@storybook/components';
 import type { StoryId, Parameters } from '@storybook/api';
 import type { Story } from '@storybook/store';
+import { SourceType } from '@storybook/docs-tools';
 
+import { Source as PureSource, SourceError } from '../components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { SourceContext, SourceContextProps, SourceItem } from './SourceContainer';
 import { CURRENT_SELECTION } from './types';
-import { SourceType } from '../shared';
 
 import { enhanceSource } from './enhanceSource';
 import { useStories } from './useStory';

addons/docs/src/blocks/SourceContainer.tsx → lib/blocks/src/blocks/SourceContainer.tsx

@@ -1,9 +1,11 @@
 import React, { FC, Context, createContext, useEffect, useState } from 'react';
+
 import deepEqual from 'fast-deep-equal';
 import { addons } from '@storybook/addons';
+
+import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
 import type { StoryId } from '@storybook/api';
-import { SNIPPET_RENDERED } from '../shared';
 
 export interface SourceItem {
   code: string;

addons/docs/src/blocks/Story.tsx → lib/blocks/src/blocks/Story.tsx

@@ -9,10 +9,11 @@ import React, {
   useState,
 } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
+import { resetComponents } from '@storybook/components';
 import { StoryId, toId, storyNameFromExport, StoryAnnotations, AnyFramework } from '@storybook/csf';
 import type { ModuleExport, ModuleExports, Story as StoryType } from '@storybook/store';
 
+import { Story as PureStory, StorySkeleton } from '../components';
 import { CURRENT_SELECTION } from './types';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { useStory } from './useStory';