diff --git a/code/.eslintrc.js b/code/.eslintrc.js
index a9a44f8459c1..8e7742dc111e 100644
--- a/code/.eslintrc.js
+++ b/code/.eslintrc.js
@@ -27,7 +27,7 @@ module.exports = {
'**/lib/theming/**/*',
'**/lib/router/**/*',
'**/ui/manager/**/*',
- '**/lib/components/**/*',
+ '**/ui/components/**/*',
],
rules: {
'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
diff --git a/code/addons/links/src/react/components/RoutedLink.tsx b/code/addons/links/src/react/components/RoutedLink.tsx
index a27a21221436..cfe6f4901cfa 100644
--- a/code/addons/links/src/react/components/RoutedLink.tsx
+++ b/code/addons/links/src/react/components/RoutedLink.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.tsx`.
+// NOTE: this is a copy of `code/ui/components/src/navigation/RoutedLink.tsx`.
// It's duplicated here because that copy has an explicit dependency on
// React 16.3+, which breaks older versions of React running in the preview.
// The proper DRY solution is to create a new package that doesn't depend
diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
index b61cbd025230..bda1707b6b51 100644
--- a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
@@ -819,7 +819,7 @@ const newWebpackConfiguration = (
'@storybook/api': '/Users/joe/storybook/lib/api',
'@storybook/channels': '/Users/joe/storybook/lib/channels',
'@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',
- '@storybook/components': '/Users/joe/storybook/lib/components',
+ '@storybook/components': '/Users/joe/storybook/ui/components',
'@storybook/core-events': '/Users/joe/storybook/lib/core-events',
'@storybook/router': '/Users/joe/storybook/lib/router',
'@storybook/theming': '/Users/joe/storybook/lib/theming',
diff --git a/code/lib/components/src/Badge/Badge.stories.tsx b/code/lib/components/src/Badge/Badge.stories.tsx
deleted file mode 100644
index f579398065b2..000000000000
--- a/code/lib/components/src/Badge/Badge.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Badge } from './Badge';
-
-storiesOf('Basics/Badge', module).add('all badges', () => (
-
- Neutral
- Positive
- Warning
- Negative
- Critical
-
-));
diff --git a/code/lib/components/src/Button/Button.stories.tsx b/code/lib/components/src/Button/Button.stories.tsx
deleted file mode 100644
index 787c55015987..000000000000
--- a/code/lib/components/src/Button/Button.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button } from './Button';
-import { Icons } from '../icon/icon';
-
-import { Form } from '../form/index';
-
-const { Button: FormButton } = Form;
-
-storiesOf('Basics/Button', module).add('all buttons', () => (
-
-
Button that is used for forms
-
Form.Button
-
-
Buttons that are used for everything else
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {['error', 'warn', 'valid', null].map((valid) => (
-
-
-
- ))}
-
-
-
-
-
- ));
-
-storiesOf('Basics/Form/Button', module)
- .add('sizes', () => (
-
- {['auto', 'flex', '100%'].map((size) => (
-
-
-
- ))}
-
- ))
- .add('validations', () => (
-
- {['error', 'warn', 'valid', null].map((valid) => (
-
-
-
- ))}
-
- ));
-
-storiesOf('Basics/Form/Textarea', module)
- .add('sizes', () => (
-
- {['auto', 'flex', '100%'].map((size) => (
-
-
-
- ))}
-
- ))
- .add('validations', () => (
-
- {['error', 'warn', 'valid', null].map((valid) => (
-
-
-
- ))}
-
- ))
- .add('alignment', () => (
-
- {['end', 'center', 'start'].map((align) => (
-
-
-
- ))}
-
- ))
- .add('height', () => (
-
- {[100, 200, undefined].map((height) => (
-
-
-
- ))}
-
- ));
-
-storiesOf('Basics/Form/Input', module)
- .add('sizes', () => (
-
- {['auto', 'flex', '100%'].map((size) => (
-
-
-
- ))}
-
- ))
- .add('validations', () => (
-
- {['error', 'warn', 'valid', null].map((valid) => (
-
-
-
- ))}
-
- ))
- .add('alignment', () => (
-
- {['end', 'center', 'start'].map((align) => (
-
-
-
- ))}
-
- ));
diff --git a/code/lib/components/src/spaced/Spaced.stories.tsx b/code/lib/components/src/spaced/Spaced.stories.tsx
deleted file mode 100644
index 6f3ef7b8065c..000000000000
--- a/code/lib/components/src/spaced/Spaced.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-
-import { Spaced } from './Spaced';
-
-const PlaceholderBlock = styled.div(({ color }) => ({
- background: color || 'hotpink',
- padding: 20,
-}));
-const PlaceholderInline = styled.span(({ color }) => ({
- background: color || 'hotpink',
- display: 'inline-block',
- padding: 20,
-}));
-
-storiesOf('Basics/Spaced', module)
- .add('row', () => (
-
- ))
- .add('row outer', () => (
-
- ))
- .add('row multiply', () => (
-
- ))
- .add('col', () => (
-
- ))
- .add('col outer', () => (
-
- ));
diff --git a/code/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
deleted file mode 100644
index 7ebf87a91eb2..000000000000
--- a/code/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { ThemeProvider, themes, ensure } from '@storybook/theming';
-import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
-
-storiesOf('Basics/SyntaxHighlighter', module)
- .add('bash', () => (
-
- npx npm-check-updates '/storybook/' -u && npm install
-
- ))
- .add('css', () => (
-
- {`
- .className {
- border: 1px solid hotpink;
- }
- `}
-
- ))
- .add('json', () => (
-
- {`
- {
- "number": 1,
- "string": "something",
- "object": {
- "property": "value",
- },
- array: [1,2,3],
- }
- `}
-
- ))
- .add('markdown', () => (
-
- {`
- # a big header
-
- some code:
-
- ~~~js
- const name = "a string";
- ~~~
-
- > crazy
-
- `}
-
- ))
- .add('yaml', () => (
-
- {`
- product:
- - sku : BL394D
- quantity : 4
- description : Basketball
- price : 450.00
- `}
-
- ))
- .add('jsx', () => (
-
- {`import { Good, Things } from 'life';
-
- const result = () => ;
-
- export { result as default };
- `}
-
- ))
- .add('js', () => (
-
- {`import React, { createElement } from 'react';
- import { Good, Things } from 'life';
-
- const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
-
- console.log(result);
-
- export { result as default };
- `}
-
- ))
- .add('graphql', () => (
-
- {`query HeroNameAndFriends($episode: Episode) {
- hero(episode: $episode) {
- name
- friends {
- name
- }
- }
- }
- `}
-
- ))
- .add('unsupported', () => (
-
- {`
- // A Hello World! program in C#.
- using System;
- namespace HelloWorld
- {
- class Hello
- {
- static void Main()
- {
- Console.WriteLine("Hello World!");
-
- // Keep the console window open in debug mode.
- Console.WriteLine("Press any key to exit.");
- Console.ReadKey();
- }
- }
- }
- `}
-
- ))
- .add('dark unsupported', () => {
- const theme = ensure(themes.dark);
- return (
-
-
- {`
- // A Hello World! program in C#.
- using System;
- namespace HelloWorld
- {
- class Hello
- {
- static void Main()
- {
- Console.WriteLine("Hello World!");
-
- // Keep the console window open in debug mode.
- Console.WriteLine("Press any key to exit.");
- Console.ReadKey();
- }
- }
- }
- `}
-
-
- );
- })
- .add('story', () => (
-
- {`
- import React from 'react';
- import { storiesOf } from '@storybook/react';
- import { styled } from '@storybook/theming';
-
- import Heading from './heading';
-
- const Holder = styled.div({
- margin: 10,
- border: '1px dashed deepskyblue',
- // overflow: 'hidden',
- });
-
- storiesOf('Basics|Heading', module).add('types', () => (
-
-
- DEFAULT WITH ALL CAPS
-
-
- THIS LONG DEFAULT WITH ALL CAPS & SUB
-
-
- page type
-
-
-
- page type
-
-
-
- ));
- `}
-
- ))
- .add('bordered & copy-able', () => (
-
- {`import { Good, Things } from 'life';
-
- const result = () => ;
-
- export { result as default };
- `}
-
- ))
- .add('padded', () => (
-
- {`import { Good, Things } from 'life';
-
- const result = () => ;
-
- export { result as default };
- `}
-
- ))
- .add('showLineNumbers', () => (
-
- {`import { Good, Things } from 'life';
-
- const result = () => ;
-
- export { result as default };
- `}
-
- ));
diff --git a/code/lib/components/src/tooltip/ListItem.stories.tsx b/code/lib/components/src/tooltip/ListItem.stories.tsx
deleted file mode 100644
index 3809e9101673..000000000000
--- a/code/lib/components/src/tooltip/ListItem.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import ListItem from './ListItem';
-
-import { Icons } from '../icon/icon';
-
-storiesOf('basics/Tooltip/ListItem', module)
- .add('all', () => (
-
-
-
- } />
-
-
- }
- />
-
-
- ))
- .add('loading', () => )
- .add('default', () => )
- .add('default icon', () => } />)
- .add('active icon', () => } />)
- .add('w/positions', () => )
- .add('w/positions active', () => (
-
- ))
- .add('disabled', () => (
-
- ));
diff --git a/code/lib/components/src/tooltip/Tooltip.stories.tsx b/code/lib/components/src/tooltip/Tooltip.stories.tsx
deleted file mode 100644
index 65c728ff9d5c..000000000000
--- a/code/lib/components/src/tooltip/Tooltip.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-import { Tooltip } from './Tooltip';
-
-// Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
-const mockPopperProps = { style: { position: 'relative', top: 20, left: 20 } };
-
-const Content = styled.div({
- width: '100px',
- height: '100px',
- fontSize: '16px',
- textAlign: 'center',
- lineHeight: '100px',
-});
-
-storiesOf('basics/Tooltip/Tooltip', module)
- .add('basic, default', () => (
-
- Text
-
- ))
- .add('basic, default, bottom', () => (
-
- Text
-
- ))
- .add('basic, default, left', () => (
-
- Text
-
- ))
- .add('basic, default, right', () => (
-
- Text
-
- ))
- .add('no chrome', () => (
-
- Text
-
- ));
diff --git a/code/lib/components/src/tooltip/TooltipLinkList.stories.tsx b/code/lib/components/src/tooltip/TooltipLinkList.stories.tsx
deleted file mode 100644
index 3afc5dd84379..000000000000
--- a/code/lib/components/src/tooltip/TooltipLinkList.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Children, cloneElement, FunctionComponent, MouseEvent, ReactElement } from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { WithTooltip } from './WithTooltip';
-
-import { TooltipLinkList } from './TooltipLinkList';
-
-const onLinkClick = action('onLinkClick');
-
-interface StoryLinkWrapperProps {
- href: string;
- passHref?: boolean;
-}
-
-const StoryLinkWrapper: FunctionComponent = ({
- href,
- passHref,
- children,
-}) => {
- const child = Children.only(children) as ReactElement;
-
- return cloneElement(child, {
- href: passHref && href,
- onClick: (e: MouseEvent) => {
- e.preventDefault();
- onLinkClick(href);
- },
- });
-};
-
-StoryLinkWrapper.defaultProps = {
- passHref: false,
-};
-
-export const links = [
- { id: '1', title: 'Link', href: 'http://google.com' },
- { id: '2', title: 'Link', href: 'http://google.com' },
- { id: '3', title: 'callback', onClick: action('onClick') },
-];
-
-storiesOf('basics/Tooltip/TooltipLinkList', module)
- .addDecorator((storyFn) => (
-
- ))
- .add('links', () => )
- .add('links and callback', () => (
-
- ));
diff --git a/code/lib/components/src/tooltip/TooltipMessage.stories.tsx b/code/lib/components/src/tooltip/TooltipMessage.stories.tsx
deleted file mode 100644
index 1e626b927663..000000000000
--- a/code/lib/components/src/tooltip/TooltipMessage.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
-
-import { TooltipMessage } from './TooltipMessage';
-
-storiesOf('basics/Tooltip/TooltipMessage', module)
- .addDecorator((storyFn) => (
-
- ))
- .add('default', () => (
-
- ))
- .add('with link', () => (
-
- ))
- .add('with links', () => (
-
- ))
- .add('minimal message', () => (
-
- ));
diff --git a/code/lib/components/src/tooltip/TooltipNote.stories.tsx b/code/lib/components/src/tooltip/TooltipNote.stories.tsx
deleted file mode 100644
index 2db9aa3e54dd..000000000000
--- a/code/lib/components/src/tooltip/TooltipNote.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
-
-import { TooltipNote } from './TooltipNote';
-
-storiesOf('basics/Tooltip/TooltipNote', module)
- .addDecorator((storyFn) => (
-
- ))
- .add('default', () => );
diff --git a/code/lib/components/src/tooltip/WithTooltip.stories.tsx b/code/lib/components/src/tooltip/WithTooltip.stories.tsx
deleted file mode 100644
index 9f12962f9ede..000000000000
--- a/code/lib/components/src/tooltip/WithTooltip.stories.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-
-import { TooltipMessage } from './TooltipMessage';
-import { WithToolTipState as WithTooltip } from './WithTooltip';
-
-const ViewPort = styled.div({
- height: 300,
-});
-
-const BackgroundBox = styled.div({
- width: 500,
- height: 500,
- overflowY: 'scroll',
- background: '#eee',
- position: 'relative',
-});
-
-const Spacer = styled.div({
- height: 100,
-});
-
-const Trigger = styled.div({
- width: 200,
- height: 100,
- backgroundColor: 'red',
- color: 'white',
-});
-
-interface TooltipProps {
- onHide?: () => void;
-}
-
-const Tooltip: FunctionComponent = ({ onHide }) => (
-
-);
-
-Tooltip.defaultProps = {
- onHide: null,
-};
-
-storiesOf('basics/Tooltip/WithTooltip', module)
- .addDecorator((storyFn) => (
-
-
-
- {storyFn()}
-
-
- ))
- .add('simple hover', () => (
- }>
- Hover me!
-
- ))
- .add('simple hover, functional', () => (
-
- Hover me!
-
- ))
- .add('simple click', () => (
- }>
- Click me!
-
- ))
- .add('simple click start open', () => (
- }>
- Click me!
-
- ))
- .add('simple click closeOnClick', () => (
- }>
- Click me!
-
- ))
- .add('no chrome', () => (
- }>
- Click me!
-
- ));
diff --git a/code/lib/components/src/typography/link/link.stories.tsx b/code/lib/components/src/typography/link/link.stories.tsx
deleted file mode 100644
index 10342dae39d0..000000000000
--- a/code/lib/components/src/typography/link/link.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { Link } from './link';
-import { Icons } from '../../icon/icon';
-
-const onClick = action('onClick');
-storiesOf('Basics/Link', module)
- .add('cancel w/ onClick', () => (
-
- Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
-
- ))
- .add('cancel w/ href', () => (
-
- Link
-
- ))
- .add('no-cancel w/ onClick', () => (
-
- any click will go through
-
- ))
- .add('no-cancel w/ href', () => (
-
- Link
-
- ))
- .add('styled links', () => (
-
- Default
-
-
- Secondary
-
-
-
- tertiary
-
-
-
- nochrome
-
-
-
-
- With icon in front
-
-
-
- {/* A linked icon by itself */}
-
-
-
-
- With arrow behind
-
-
-
-
- Inverted colors
-
-
-
-
- ));
diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts
index 7c5a2a9564ed..883637275c82 100644
--- a/code/lib/core-server/src/__for-testing__/main.ts
+++ b/code/lib/core-server/src/__for-testing__/main.ts
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
stories: [
'../../ui/manager/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
- '../../lib/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+ '../../ui/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
'./../../addons/docs/**/*.stories.@(ts|tsx|js|jsx|mdx)',
'./../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)',
],
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 0cf89ad31f89..ad6a6b4d60a7 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -1,12 +1,17 @@
-import vitePluginReact from '@vitejs/plugin-react';
-import type { PluginOption } from 'vite';
import type { StorybookConfig } from '../../frameworks/react-vite/dist';
const config: StorybookConfig = {
stories: [
- '../manager/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
- // '../../lib/components/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
- // '../../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+ {
+ directory: '../manager/src/**/',
+ files: '*.stories.@(ts|tsx|js|jsx|mdx)',
+ titlePrefix: 'Manager',
+ },
+ {
+ directory: '../components/src/**/',
+ files: '*.stories.@(js|jsx|ts|tsx|mdx)',
+ titlePrefix: 'Components',
+ },
],
addons: [
'@storybook/addon-links',
@@ -17,42 +22,6 @@ const config: StorybookConfig = {
name: '@storybook/react-vite',
options: {},
},
- viteFinal: (config) => {
- return {
- ...config,
- optimizeDeps: {
- ...config.optimizeDeps,
- include: [
- ...(config.optimizeDeps?.include ?? []),
- 'react-element-to-jsx-string',
- 'core-js/modules/es.regexp.flags.js',
- 'react-colorful',
- ],
- },
- /*
- This might look complex but all we're doing is removing the default set of React Vite plugins
- and adding them back in, but with the `jsxRuntime: 'classic'` option.
- TODO: When we've upgraded to React 18 all of this shouldn't be necessary anymore
- */
- plugins: [...withoutReactPlugins(config.plugins), vitePluginReact({ jsxRuntime: 'classic' })],
- };
- },
};
-// recursively remove all plugins from the React Vite plugin
-const withoutReactPlugins = (plugins: PluginOption[] = []) =>
- plugins.map((plugin) => {
- if (Array.isArray(plugin)) {
- return withoutReactPlugins(plugin);
- }
- if (
- plugin &&
- 'name' in plugin &&
- ['vite:react-jsx', 'vite:react-babel', 'vite:react-refresh'].includes(plugin.name)
- ) {
- return false;
- }
- return plugin;
- });
-
export default config;
diff --git a/code/ui/.storybook/preview.jsx b/code/ui/.storybook/preview.jsx
index 1b3ce4cdc6d0..b05579b7b134 100644
--- a/code/ui/.storybook/preview.jsx
+++ b/code/ui/.storybook/preview.jsx
@@ -9,8 +9,8 @@ import {
convert,
styled,
useTheme,
-} from '@storybook/theming';
-import { Symbols } from '@storybook/components';
+} from '../../lib/theming';
+import { Symbols } from '../components';
const { document } = global;
diff --git a/code/lib/components/README.md b/code/ui/components/README.md
similarity index 100%
rename from code/lib/components/README.md
rename to code/ui/components/README.md
diff --git a/code/lib/components/package.json b/code/ui/components/package.json
similarity index 96%
rename from code/lib/components/package.json
rename to code/ui/components/package.json
index ed2dbad623e9..d76629038882 100644
--- a/code/lib/components/package.json
+++ b/code/ui/components/package.json
@@ -5,14 +5,14 @@
"keywords": [
"storybook"
],
- "homepage": "https://github.com/storybookjs/storybook/tree/main/lib/components",
+ "homepage": "https://github.com/storybookjs/storybook/tree/main/code/ui/components",
"bugs": {
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybookjs/storybook.git",
- "directory": "lib/components"
+ "directory": "code/ui/components"
},
"funding": {
"type": "opencollective",
@@ -66,7 +66,7 @@
"global": "^4.4.0",
"overlayscrollbars": "^1.13.1",
"polished": "^4.2.2",
- "prettier": ">=2.2.1 <=2.3.0",
+ "prettier": ">=2.5",
"react-popper-tooltip": "^3.1.1",
"react-syntax-highlighter": "^15.4.5",
"react-textarea-autosize": "^8.3.0",
diff --git a/code/lib/components/scripts/writeCssScript.js b/code/ui/components/scripts/writeCssScript.js
similarity index 100%
rename from code/lib/components/scripts/writeCssScript.js
rename to code/ui/components/scripts/writeCssScript.js
diff --git a/code/lib/components/src/ActionBar/ActionBar.stories.tsx b/code/ui/components/src/ActionBar/ActionBar.stories.tsx
similarity index 100%
rename from code/lib/components/src/ActionBar/ActionBar.stories.tsx
rename to code/ui/components/src/ActionBar/ActionBar.stories.tsx
diff --git a/code/lib/components/src/ActionBar/ActionBar.tsx b/code/ui/components/src/ActionBar/ActionBar.tsx
similarity index 100%
rename from code/lib/components/src/ActionBar/ActionBar.tsx
rename to code/ui/components/src/ActionBar/ActionBar.tsx
diff --git a/code/ui/components/src/Badge/Badge.stories.tsx b/code/ui/components/src/Badge/Badge.stories.tsx
new file mode 100644
index 000000000000..c987d5a7b1cb
--- /dev/null
+++ b/code/ui/components/src/Badge/Badge.stories.tsx
@@ -0,0 +1,13 @@
+import { Badge } from './Badge';
+
+export default {
+ title: 'Basics/Badge',
+ component: Badge,
+};
+
+export const Default = { args: { children: 'Default' } };
+export const Positive = { args: { status: 'positive', children: 'Positive' } };
+export const Negative = { args: { status: 'negative', children: 'Negative' } };
+export const Neutral = { args: { status: 'neutral', children: 'Neutral' } };
+export const Warning = { args: { status: 'warning', children: 'Warning' } };
+export const Critical = { args: { status: 'critical', children: 'Critical' } };
diff --git a/code/lib/components/src/Badge/Badge.tsx b/code/ui/components/src/Badge/Badge.tsx
similarity index 100%
rename from code/lib/components/src/Badge/Badge.tsx
rename to code/ui/components/src/Badge/Badge.tsx
diff --git a/code/ui/components/src/Button/Button.stories.tsx b/code/ui/components/src/Button/Button.stories.tsx
new file mode 100644
index 000000000000..588779f887f2
--- /dev/null
+++ b/code/ui/components/src/Button/Button.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Args } from '@storybook/csf';
+
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
+import { Form } from '../form/index';
+
+export default {
+ title: 'Basics/Button',
+ component: Button,
+};
+
+export const Default = { args: { children: 'Default' } };
+
+export const FormButton = {
+ render: (args: Args) => ,
+ args: { children: 'Form.Button' },
+};
+
+export const Primary = { args: { primary: true, children: 'Primary' } };
+export const Secondary = { args: { secondary: true, children: 'Secondary' } };
+export const Tertiary = { args: { tertiary: true, children: 'Tertiary' } };
+export const Gray = { args: { gray: true, children: 'Gray' } };
+
+export const Outline = { args: { outline: true, children: 'Outline' } };
+export const OutlinePrimary = {
+ args: { outline: true, primary: true, children: 'Outline Primary' },
+};
+export const OutlineSecondary = {
+ args: { outline: true, secondary: true, children: 'Outline Secondary' },
+};
+export const OutlineTertiary = {
+ args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
+};
+
+export const Disabled = { args: { disabled: true, children: 'Disabled' } };
+export const DisabledPrimary = {
+ args: { disabled: true, primary: true, children: 'Disabled Priary' },
+};
+export const DisabledSecondary = {
+ args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
+};
+export const DisabledTertiary = {
+ args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
+};
+export const DisabledGray = {
+ args: { disabled: true, gray: true, children: 'Disabled Gray' },
+};
+
+export const Small = { args: { small: true, children: 'Small' } };
+export const SmallPrimary = {
+ args: { small: true, primary: true, children: 'Small Priary' },
+};
+export const SmallSecondary = {
+ args: { small: true, secondary: true, children: 'Small Secondary' },
+};
+export const SmallTertiary = {
+ args: { small: true, tertiary: true, children: 'Small Tertiary' },
+};
+export const SmallGray = {
+ args: { small: true, gray: true, children: 'Small Gray' },
+};
+
+export const IconPrimary = {
+ args: {
+ primary: true,
+ containsIcon: true,
+ title: 'link',
+ children: ,
+ },
+};
+export const IconOutline = {
+ args: { outline: true, containsIcon: true, title: 'link', children: },
+};
+export const IconOutlineSmall = {
+ args: {
+ outline: true,
+ containsIcon: true,
+ small: true,
+ title: 'link',
+ children: ,
+ },
+};
diff --git a/code/lib/components/src/Button/Button.tsx b/code/ui/components/src/Button/Button.tsx
similarity index 100%
rename from code/lib/components/src/Button/Button.tsx
rename to code/ui/components/src/Button/Button.tsx
diff --git a/code/lib/components/src/Colors/SideBySide.tsx b/code/ui/components/src/Colors/SideBySide.tsx
similarity index 100%
rename from code/lib/components/src/Colors/SideBySide.tsx
rename to code/ui/components/src/Colors/SideBySide.tsx
diff --git a/code/lib/components/src/Colors/colorpalette.stories.mdx b/code/ui/components/src/Colors/colorpalette.stories.mdx
similarity index 97%
rename from code/lib/components/src/Colors/colorpalette.stories.mdx
rename to code/ui/components/src/Colors/colorpalette.stories.mdx
index 4c868685824a..968a712dab29 100644
--- a/code/lib/components/src/Colors/colorpalette.stories.mdx
+++ b/code/ui/components/src/Colors/colorpalette.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
diff --git a/code/lib/components/src/Loader/Loader.stories.tsx b/code/ui/components/src/Loader/Loader.stories.tsx
similarity index 100%
rename from code/lib/components/src/Loader/Loader.stories.tsx
rename to code/ui/components/src/Loader/Loader.stories.tsx
diff --git a/code/lib/components/src/Loader/Loader.tsx b/code/ui/components/src/Loader/Loader.tsx
similarity index 100%
rename from code/lib/components/src/Loader/Loader.tsx
rename to code/ui/components/src/Loader/Loader.tsx
diff --git a/code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
similarity index 100%
rename from code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
rename to code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
diff --git a/code/lib/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
similarity index 100%
rename from code/lib/components/src/ScrollArea/OverlayScrollbars.tsx
rename to code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
diff --git a/code/lib/components/src/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx
similarity index 100%
rename from code/lib/components/src/ScrollArea/ScrollArea.stories.tsx
rename to code/ui/components/src/ScrollArea/ScrollArea.stories.tsx
diff --git a/code/lib/components/src/ScrollArea/ScrollArea.tsx b/code/ui/components/src/ScrollArea/ScrollArea.tsx
similarity index 100%
rename from code/lib/components/src/ScrollArea/ScrollArea.tsx
rename to code/ui/components/src/ScrollArea/ScrollArea.tsx
diff --git a/code/lib/components/src/Zoom/Zoom.stories.tsx b/code/ui/components/src/Zoom/Zoom.stories.tsx
similarity index 100%
rename from code/lib/components/src/Zoom/Zoom.stories.tsx
rename to code/ui/components/src/Zoom/Zoom.stories.tsx
diff --git a/code/lib/components/src/Zoom/Zoom.tsx b/code/ui/components/src/Zoom/Zoom.tsx
similarity index 100%
rename from code/lib/components/src/Zoom/Zoom.tsx
rename to code/ui/components/src/Zoom/Zoom.tsx
diff --git a/code/lib/components/src/Zoom/ZoomElement.tsx b/code/ui/components/src/Zoom/ZoomElement.tsx
similarity index 100%
rename from code/lib/components/src/Zoom/ZoomElement.tsx
rename to code/ui/components/src/Zoom/ZoomElement.tsx
diff --git a/code/lib/components/src/Zoom/ZoomIFrame.tsx b/code/ui/components/src/Zoom/ZoomIFrame.tsx
similarity index 100%
rename from code/lib/components/src/Zoom/ZoomIFrame.tsx
rename to code/ui/components/src/Zoom/ZoomIFrame.tsx
diff --git a/code/lib/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts
similarity index 100%
rename from code/lib/components/src/Zoom/browserSupportsCssZoom.ts
rename to code/ui/components/src/Zoom/browserSupportsCssZoom.ts
diff --git a/code/lib/components/src/addon-panel/addon-panel.tsx b/code/ui/components/src/addon-panel/addon-panel.tsx
similarity index 100%
rename from code/lib/components/src/addon-panel/addon-panel.tsx
rename to code/ui/components/src/addon-panel/addon-panel.tsx
diff --git a/code/lib/components/src/bar/bar.tsx b/code/ui/components/src/bar/bar.tsx
similarity index 100%
rename from code/lib/components/src/bar/bar.tsx
rename to code/ui/components/src/bar/bar.tsx
diff --git a/code/lib/components/src/bar/button.stories.tsx b/code/ui/components/src/bar/button.stories.tsx
similarity index 100%
rename from code/lib/components/src/bar/button.stories.tsx
rename to code/ui/components/src/bar/button.stories.tsx
diff --git a/code/lib/components/src/bar/button.tsx b/code/ui/components/src/bar/button.tsx
similarity index 100%
rename from code/lib/components/src/bar/button.tsx
rename to code/ui/components/src/bar/button.tsx
diff --git a/code/lib/components/src/bar/separator.tsx b/code/ui/components/src/bar/separator.tsx
similarity index 100%
rename from code/lib/components/src/bar/separator.tsx
rename to code/ui/components/src/bar/separator.tsx
diff --git a/code/ui/components/src/brand/StorybookIcon.stories.tsx b/code/ui/components/src/brand/StorybookIcon.stories.tsx
new file mode 100644
index 000000000000..1e4ae0177053
--- /dev/null
+++ b/code/ui/components/src/brand/StorybookIcon.stories.tsx
@@ -0,0 +1,8 @@
+import { StorybookIcon } from './StorybookIcon';
+
+export default {
+ title: 'Basics/Brand/StorybookIcon',
+ component: StorybookIcon,
+};
+
+export const Default = {};
diff --git a/code/lib/components/src/brand/StorybookIcon.tsx b/code/ui/components/src/brand/StorybookIcon.tsx
similarity index 100%
rename from code/lib/components/src/brand/StorybookIcon.tsx
rename to code/ui/components/src/brand/StorybookIcon.tsx
diff --git a/code/lib/components/src/brand/StorybookLogo.stories.tsx b/code/ui/components/src/brand/StorybookLogo.stories.tsx
similarity index 100%
rename from code/lib/components/src/brand/StorybookLogo.stories.tsx
rename to code/ui/components/src/brand/StorybookLogo.stories.tsx
diff --git a/code/lib/components/src/brand/StorybookLogo.tsx b/code/ui/components/src/brand/StorybookLogo.tsx
similarity index 100%
rename from code/lib/components/src/brand/StorybookLogo.tsx
rename to code/ui/components/src/brand/StorybookLogo.tsx
diff --git a/code/lib/components/src/form/field/field.tsx b/code/ui/components/src/form/field/field.tsx
similarity index 100%
rename from code/lib/components/src/form/field/field.tsx
rename to code/ui/components/src/form/field/field.tsx
diff --git a/code/ui/components/src/form/form.stories.tsx b/code/ui/components/src/form/form.stories.tsx
new file mode 100644
index 000000000000..b7926d660163
--- /dev/null
+++ b/code/ui/components/src/form/form.stories.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { action } from '@storybook/addon-actions';
+
+import * as InputComponents from './input/input';
+import { Field as FieldComponent } from './field/field';
+
+const Flexed = styled(FieldComponent)({ display: 'flex' });
+
+export default {
+ title: 'Basics/Form',
+};
+
+const sharedArgTypes = {
+ disabled: {
+ defaultValue: false,
+ control: {
+ type: 'boolean',
+ },
+ },
+ size: {
+ defaultValue: 'auto',
+ control: {
+ type: 'radio',
+ // TODO: weak typings
+ options: ['100%', 'auto', 'flex'] as InputComponents.Sizes[],
+ },
+ },
+ valid: {
+ control: {
+ type: 'radio',
+ // TODO: weak typings
+ options: [null, 'valid', 'warn', 'error'] as InputComponents.ValidationStates[],
+ },
+ },
+ align: {
+ control: {
+ type: 'radio',
+ // TODO: weak typings
+ options: [null, 'start', 'center', 'end'] as InputComponents.Alignments[],
+ },
+ },
+};
+
+export const Field = {
+ render: (args) => (
+
+
+
+
+
+
+
+ ),
+ argTypes: {
+ label: {
+ defaultValue: 'label',
+ control: {
+ type: 'text',
+ },
+ },
+ },
+};
+
+export const Select = {
+ render: (args) => (
+
+
+
+
+
+
+
+ ),
+ argTypes: {
+ ...sharedArgTypes,
+ value: {
+ defaultValue: 'val2',
+ control: {
+ type: 'radio',
+ options: ['val1', 'val2', 'val3'],
+ },
+ },
+ },
+};
+
+export const Button = {
+ render: (args) => (
+
+ Form Button
+
+ ),
+ argTypes: sharedArgTypes,
+};
+
+export const Textarea = {
+ render: (args) => (
+
+
+
+ ),
+ argTypes: {
+ ...sharedArgTypes,
+ height: {
+ control: {
+ type: 'number',
+ },
+ },
+ },
+};
+
+export const Input = {
+ render: (args) => (
+
+
+
+ ),
+ argTypes: {
+ ...sharedArgTypes,
+ value: {
+ control: {
+ type: 'text',
+ },
+ },
+ placeholder: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'Placeholder',
+ },
+ },
+};
diff --git a/code/lib/components/src/form/index.tsx b/code/ui/components/src/form/index.tsx
similarity index 100%
rename from code/lib/components/src/form/index.tsx
rename to code/ui/components/src/form/index.tsx
diff --git a/code/lib/components/src/form/input/input.tsx b/code/ui/components/src/form/input/input.tsx
similarity index 97%
rename from code/lib/components/src/form/input/input.tsx
rename to code/ui/components/src/form/input/input.tsx
index 1f6114f2d31a..5357f169f053 100644
--- a/code/lib/components/src/form/input/input.tsx
+++ b/code/ui/components/src/form/input/input.tsx
@@ -48,9 +48,9 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({
},
});
-type Sizes = '100%' | 'flex' | 'auto';
-type Alignments = 'end' | 'center' | 'start';
-type ValidationStates = 'valid' | 'error' | 'warn';
+export type Sizes = '100%' | 'flex' | 'auto';
+export type Alignments = 'end' | 'center' | 'start';
+export type ValidationStates = 'valid' | 'error' | 'warn';
const sizes = ({ size }: { size?: Sizes }): CSSObject => {
switch (size) {
diff --git a/code/lib/components/src/icon/icon.stories.tsx b/code/ui/components/src/icon/icon.stories.tsx
similarity index 100%
rename from code/lib/components/src/icon/icon.stories.tsx
rename to code/ui/components/src/icon/icon.stories.tsx
diff --git a/code/lib/components/src/icon/icon.tsx b/code/ui/components/src/icon/icon.tsx
similarity index 100%
rename from code/lib/components/src/icon/icon.tsx
rename to code/ui/components/src/icon/icon.tsx
diff --git a/code/lib/components/src/icon/icons.tsx b/code/ui/components/src/icon/icons.tsx
similarity index 100%
rename from code/lib/components/src/icon/icons.tsx
rename to code/ui/components/src/icon/icons.tsx
diff --git a/code/lib/components/src/icon/svg.tsx b/code/ui/components/src/icon/svg.tsx
similarity index 100%
rename from code/lib/components/src/icon/svg.tsx
rename to code/ui/components/src/icon/svg.tsx
diff --git a/code/lib/components/src/index.ts b/code/ui/components/src/index.ts
similarity index 100%
rename from code/lib/components/src/index.ts
rename to code/ui/components/src/index.ts
diff --git a/code/lib/components/src/placeholder/placeholder.stories.tsx b/code/ui/components/src/placeholder/placeholder.stories.tsx
similarity index 100%
rename from code/lib/components/src/placeholder/placeholder.stories.tsx
rename to code/ui/components/src/placeholder/placeholder.stories.tsx
diff --git a/code/lib/components/src/placeholder/placeholder.tsx b/code/ui/components/src/placeholder/placeholder.tsx
similarity index 100%
rename from code/lib/components/src/placeholder/placeholder.tsx
rename to code/ui/components/src/placeholder/placeholder.tsx
diff --git a/code/lib/components/src/shared/animation.ts b/code/ui/components/src/shared/animation.ts
similarity index 100%
rename from code/lib/components/src/shared/animation.ts
rename to code/ui/components/src/shared/animation.ts
diff --git a/code/ui/components/src/spaced/Spaced.stories.tsx b/code/ui/components/src/spaced/Spaced.stories.tsx
new file mode 100644
index 000000000000..17d66b9d9948
--- /dev/null
+++ b/code/ui/components/src/spaced/Spaced.stories.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+import { Spaced } from './Spaced';
+
+const PlaceholderBlock = styled.div(({ color }) => ({
+ background: color || 'hotpink',
+ padding: 20,
+}));
+const PlaceholderInline = styled.span(({ color }) => ({
+ background: color || 'hotpink',
+ display: 'inline-block',
+ padding: 20,
+}));
+
+export default {
+ title: 'Basics/Spaced',
+ component: Spaced,
+};
+
+export const Default = (args) => (
+
+);
+
+export const Column = {
+ render: (args) => (
+
+ ),
+};
+export const Row = {
+ render: (args) => (
+
+ ),
+ argTypes: {
+ col: {
+ defaultValue: 1,
+ },
+ },
+};
diff --git a/code/lib/components/src/spaced/Spaced.tsx b/code/ui/components/src/spaced/Spaced.tsx
similarity index 100%
rename from code/lib/components/src/spaced/Spaced.tsx
rename to code/ui/components/src/spaced/Spaced.tsx
diff --git a/code/lib/components/src/syntaxhighlighter/formatter.test.ts b/code/ui/components/src/syntaxhighlighter/formatter.test.ts
similarity index 100%
rename from code/lib/components/src/syntaxhighlighter/formatter.test.ts
rename to code/ui/components/src/syntaxhighlighter/formatter.test.ts
diff --git a/code/lib/components/src/syntaxhighlighter/formatter.ts b/code/ui/components/src/syntaxhighlighter/formatter.ts
similarity index 100%
rename from code/lib/components/src/syntaxhighlighter/formatter.ts
rename to code/ui/components/src/syntaxhighlighter/formatter.ts
diff --git a/code/lib/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
similarity index 100%
rename from code/lib/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
rename to code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
diff --git a/code/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
similarity index 100%
rename from code/lib/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
rename to code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
new file mode 100644
index 000000000000..fc7629b230d8
--- /dev/null
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { ThemeProvider, themes, ensure } from '@storybook/theming';
+import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
+
+export default {
+ title: 'Basics/SyntaxHighlighter',
+ component: SyntaxHighlighter,
+};
+
+export const JS = {
+ args: {
+ language: 'js',
+ children: `import React, { createElement } from 'react';
+import { Good, Things } from 'life';
+
+const result = () => createElement(Good, [createElement(Things, [], { all: true }), []);
+
+console.log(result);
+export { result as default };`,
+ },
+};
+
+export const Default = JS;
+
+export const Bash = {
+ args: {
+ language: 'bash',
+ children: `npx npm-check-updates ' / storybook / ' -u && npm install`,
+ },
+};
+
+export const CSS = {
+ args: {
+ language: 'css',
+ children: `.className {
+ border: 1px solid hotpink;
+ }`,
+ },
+};
+
+export const JSON = {
+ args: {
+ language: 'json',
+ children: `{
+ "number": 1,
+ "string": "something",
+ "object": {
+ "property": "value",
+ },
+ array: [1,2,3],
+ }`,
+ },
+};
+
+export const Markdown = {
+ args: {
+ language: 'markdown',
+ children: `
+# a big header
+
+some code:
+
+\`\`\`js
+const name = "a string";
+\`\`\`
+
+> crazy`,
+ },
+};
+
+export const Yaml = {
+ args: {
+ language: 'yaml',
+ children: `
+ product:
+ - sku: BL394D
+ quantity: 4
+ description: Basketball
+ price: 450.00
+`,
+ },
+};
+
+export const JSX = {
+ args: {
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };
+`,
+ },
+};
+
+export const GraphQL = {
+ args: {
+ language: 'graphql',
+ children: `query HeroNameAndFriends($episode: Episode) {
+ hero(episode: $episode) {
+ name
+ friends {
+ name
+ }
+ }
+ }
+`,
+ },
+};
+
+export const Unsupported = {
+ args: {
+ language: 'C#',
+ children: `// A Hello World! program in C#.
+ using System;
+ namespace HelloWorld
+ {
+ class Hello
+ {
+ static void Main()
+ {
+ Console.WriteLine("Hello World!");
+
+ // Keep the console window open in debug mode.
+ Console.WriteLine("Press any key to exit.");
+ Console.ReadKey();
+ }
+ }
+ }`,
+ },
+};
+
+export const UnsupportedDark = {
+ args: {
+ language: 'C#',
+ children: `// A Hello World! program in C#.
+ using System;
+ namespace HelloWorld
+ {
+ class Hello
+ {
+ static void Main()
+ {
+ Console.WriteLine("Hello World!");
+
+ // Keep the console window open in debug mode.
+ Console.WriteLine("Press any key to exit.");
+ Console.ReadKey();
+ }
+ }
+ }`,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
+
+export const Story = {
+ args: {
+ language: 'jsx',
+ children: `import React from 'react';
+ import { storiesOf } from '@storybook/react';
+ import { styled } from '@storybook/theming';
+
+ import Heading from './heading';
+
+ const Holder = styled.div({
+ margin: 10,
+ border: '1px dashed deepskyblue',
+ // overflow: 'hidden',
+ });
+
+ storiesOf('Basics|Heading', module).add('types', () => (
+
+
+ DEFAULT WITH ALL CAPS
+
+
+ THIS LONG DEFAULT WITH ALL CAPS & SUB
+
+
+ page type
+
+
+
+ page type
+
+
+
+ ));`,
+ },
+};
+
+export const BorderedCopyable = {
+ args: {
+ copyable: true,
+ bordered: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };`,
+ },
+};
+
+export const Padded = {
+ args: {
+ padded: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };`,
+ },
+};
+
+export const ShowLineNumbers = {
+ args: {
+ showLineNumbers: true,
+ language: 'jsx',
+ children: `import { Good, Things } from 'life';
+
+ const result = () => ;
+
+ export { result as default };`,
+ },
+};
diff --git a/code/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
similarity index 100%
rename from code/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
rename to code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
diff --git a/code/lib/components/src/tabs/tabs.stories.tsx b/code/ui/components/src/tabs/tabs.stories.tsx
similarity index 68%
rename from code/lib/components/src/tabs/tabs.stories.tsx
rename to code/ui/components/src/tabs/tabs.stories.tsx
index 18924fa66515..95c7f683048c 100644
--- a/code/lib/components/src/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/tabs/tabs.stories.tsx
@@ -1,8 +1,7 @@
import React, { Fragment, Key } from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { logger } from '@storybook/client-logger';
-
+import type { Meta } from '@storybook/react';
import { Tabs, TabsState, TabWrapper } from './tabs';
const colours = Array.from(new Array(15), (val, index) => index).map((i) =>
@@ -56,7 +55,11 @@ const panels: Panels = {
CONTENT 2
@@ -113,21 +116,27 @@ const content = Object.entries(panels).map(([k, v]) => (
));
-storiesOf('Basics/Tabs', module)
- .addDecorator((s) => (
-
- {s()}
-
- ))
- .add('stateful - static', () => (
-
+export default {
+ title: 'Basics/Tabs',
+ decorators: [
+ (story) => (
+
+ {story()}
+
+ ),
+ ],
+} as Meta;
+
+export const StatefulStatic = {
+ render: (args) => (
+
{({ active, selected }: { active: boolean; selected: string }) =>
active ?
{selected} is selected
: null
@@ -137,10 +146,13 @@ storiesOf('Basics/Tabs', module)
test2 is always active (but visually hidden)
-
+
{({ active, selected }: { active: boolean; selected: string }) =>
active ?
{selected} is selected
: null
@@ -151,10 +163,12 @@ storiesOf('Basics/Tabs', module)
-
+
{({ active, selected }: { active: boolean; selected: string }) =>
active ?
{selected} is selected
: null
@@ -165,26 +179,45 @@ storiesOf('Basics/Tabs', module)
{v.render}
))}
- ))
- .add('stateful - no initial', () => {content})
- .add('stateless - bordered', () => (
-
+ ),
+};
+export const StatefulNoInitial = {
+ render: (args) => {content},
+};
+export const StatelessBordered = {
+ render: (args) => (
+
{content}
- ))
- .add('stateless - with tools', () => (
+ ),
+};
+export const StatelessWithTools = {
+ render: (args) => (
}
+ {...args}
>
{content}
- ))
- .add('stateless - absolute', () => (
-
+ ),
+};
+export const StatelessAbsolute = {
+ render: (args) => (
+
{content}
- ))
- .add('stateless - absolute bordered', () => (
-
+ ),
+};
+export const StatelessAbsoluteBordered = {
+ render: (args) => (
+
{content}
- ))
- .add('stateless - empty', () => );
+ ),
+};
+export const StatelessEmpty = {
+ render: (args) => (
+
+ ),
+};
diff --git a/code/lib/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
similarity index 100%
rename from code/lib/components/src/tabs/tabs.tsx
rename to code/ui/components/src/tabs/tabs.tsx
diff --git a/code/ui/components/src/tooltip/ListItem.stories.tsx b/code/ui/components/src/tooltip/ListItem.stories.tsx
new file mode 100644
index 000000000000..b844fa027200
--- /dev/null
+++ b/code/ui/components/src/tooltip/ListItem.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import ListItem from './ListItem';
+import { Icons } from '../icon/icon';
+
+export default {
+ title: 'Basics/Tooltip/ListItem',
+ component: ListItem,
+};
+
+export const All = {
+ render: (args) => (
+
+
+
+ } />
+
+
+ }
+ />
+
+
+ ),
+};
+
+export const Default = {
+ args: {
+ title: 'Default',
+ },
+};
+
+export const Loading = {
+ args: {
+ loading: true,
+ },
+};
+
+export const DefaultIcon = {
+ args: {
+ title: 'Default icon',
+ right: ,
+ },
+};
+export const ActiveIcon = {
+ args: {
+ title: 'Active icon',
+ active: true,
+ right: ,
+ },
+};
+
+export const WPositions = {
+ args: {
+ left: 'left',
+ title: 'title',
+ center: 'center',
+ right: 'right',
+ },
+};
+
+export const WPositionsActive = {
+ args: {
+ active: true,
+ left: 'left',
+ title: 'title',
+ center: 'center',
+ right: 'right',
+ },
+};
+export const WPositionsDisabled = {
+ args: {
+ disabled: true,
+ left: 'left',
+ title: 'title',
+ center: 'center',
+ right: 'right',
+ },
+};
diff --git a/code/lib/components/src/tooltip/ListItem.tsx b/code/ui/components/src/tooltip/ListItem.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/ListItem.tsx
rename to code/ui/components/src/tooltip/ListItem.tsx
diff --git a/code/ui/components/src/tooltip/Tooltip.stories.tsx b/code/ui/components/src/tooltip/Tooltip.stories.tsx
new file mode 100644
index 000000000000..2a5cac438485
--- /dev/null
+++ b/code/ui/components/src/tooltip/Tooltip.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Tooltip } from './Tooltip';
+
+// Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
+const mockPopperProps = {
+ style: {
+ position: 'relative',
+ top: 20,
+ left: 20,
+ },
+};
+const Content = styled.div({
+ width: '100px',
+ height: '100px',
+ fontSize: '16px',
+ textAlign: 'center',
+ lineHeight: '100px',
+});
+
+export default {
+ component: Tooltip,
+ title: 'Basics/Tooltip/Tooltip',
+ args: mockPopperProps,
+};
+
+export const BasicDefault = {
+ // args: mockPopperProps,
+ render: (args) => (
+
+ Text
+
+ ),
+};
+
+export const BasicDefaultBottom = {
+ args: {
+ // ...mockPopperProps,
+ placement: 'bottom',
+ },
+ render: (args) => (
+
+ Text
+
+ ),
+};
+
+export const BasicDefaultLeft = {
+ args: {
+ // ...mockPopperProps,
+ placement: 'left',
+ },
+ render: (args) => (
+
+ Text
+
+ ),
+};
+
+export const BasicDefaultRight = {
+ args: {
+ // ...mockPopperProps,
+ placement: 'right',
+ },
+ render: (args) => (
+
+ Text
+
+ ),
+};
+
+export const WithoutChrome = {
+ args: {
+ // ...mockPopperProps,
+ hasChrome: false,
+ },
+ render: (args) => (
+
+ Text
+
+ ),
+};
diff --git a/code/lib/components/src/tooltip/Tooltip.tsx b/code/ui/components/src/tooltip/Tooltip.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/Tooltip.tsx
rename to code/ui/components/src/tooltip/Tooltip.tsx
diff --git a/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
new file mode 100644
index 000000000000..436840fa1676
--- /dev/null
+++ b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
@@ -0,0 +1,78 @@
+import React, { Children, cloneElement, FunctionComponent, MouseEvent, ReactElement } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Meta } from '@storybook/react';
+import { WithTooltip } from './WithTooltip';
+import { TooltipLinkList } from './TooltipLinkList';
+
+const onLinkClick = action('onLinkClick');
+
+interface StoryLinkWrapperProps {
+ href: string;
+ passHref?: boolean;
+}
+
+const StoryLinkWrapper: FunctionComponent = ({
+ href,
+ passHref = false,
+ children,
+}) => {
+ const child = Children.only(children) as ReactElement;
+ return cloneElement(child, {
+ href: passHref && href,
+ onClick: (e: MouseEvent) => {
+ e.preventDefault();
+ onLinkClick(href);
+ },
+ });
+};
+
+export const links = [
+ {
+ id: '1',
+ title: 'Link',
+ href: 'http://google.com',
+ },
+ {
+ id: '2',
+ title: 'Link',
+ href: 'http://google.com',
+ },
+ {
+ id: '3',
+ title: 'callback',
+ onClick: action('onClick'),
+ },
+];
+
+export default {
+ title: 'Basics/Tooltip/TooltipLinkList',
+ component: TooltipLinkList,
+ decorators: [
+ (storyFn) => (
+
+ ),
+ ],
+ excludeStories: ['links'],
+} as Meta;
+
+export const Links = {
+ args: {
+ links: links.slice(0, 2),
+ LinkWrapper: StoryLinkWrapper,
+ },
+};
+
+export const LinksAndCallback = {
+ args: {
+ links,
+ LinkWrapper: StoryLinkWrapper,
+ },
+};
diff --git a/code/lib/components/src/tooltip/TooltipLinkList.tsx b/code/ui/components/src/tooltip/TooltipLinkList.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/TooltipLinkList.tsx
rename to code/ui/components/src/tooltip/TooltipLinkList.tsx
diff --git a/code/ui/components/src/tooltip/TooltipMessage.stories.tsx b/code/ui/components/src/tooltip/TooltipMessage.stories.tsx
new file mode 100644
index 000000000000..7c0fd2c1a314
--- /dev/null
+++ b/code/ui/components/src/tooltip/TooltipMessage.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { WithTooltip } from './WithTooltip';
+import { TooltipMessage } from './TooltipMessage';
+
+export default {
+ title: 'Basics/Tooltip/TooltipMessage',
+ component: TooltipMessage,
+ decorators: [
+ (storyFn) => (
+
+ ),
+ ],
+} as Meta;
+
+export const Default = {
+ args: {
+ title: 'The title',
+ desc: 'The longest of the long description',
+ },
+};
+
+export const WithSingleLink = {
+ args: {
+ title: 'The title',
+ desc: 'The longest of the long description',
+ links: [
+ {
+ title: 'Continue',
+ href: 'test',
+ },
+ ],
+ },
+};
+
+export const WithMultipleLinks = {
+ args: {
+ title: 'The title',
+ desc: 'The longest of the long description',
+ links: [
+ {
+ title: 'Get more tips',
+ href: 'test',
+ },
+ {
+ title: 'Done',
+ href: 'test',
+ },
+ ],
+ },
+};
+
+export const DescriptionOnly = {
+ args: {
+ desc: 'The description',
+ },
+};
diff --git a/code/lib/components/src/tooltip/TooltipMessage.tsx b/code/ui/components/src/tooltip/TooltipMessage.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/TooltipMessage.tsx
rename to code/ui/components/src/tooltip/TooltipMessage.tsx
diff --git a/code/ui/components/src/tooltip/TooltipNote.stories.tsx b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
new file mode 100644
index 000000000000..7e19553c5d03
--- /dev/null
+++ b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { WithTooltip } from './WithTooltip';
+import { TooltipNote } from './TooltipNote';
+
+export default {
+ title: 'Basics/Tooltip/TooltipNote',
+ component: TooltipNote,
+ decorators: [
+ (storyFn) => (
+
+ ),
+ ],
+};
+
+export const Default = {
+ args: {
+ note: 'This is a note',
+ },
+};
diff --git a/code/lib/components/src/tooltip/TooltipNote.tsx b/code/ui/components/src/tooltip/TooltipNote.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/TooltipNote.tsx
rename to code/ui/components/src/tooltip/TooltipNote.tsx
diff --git a/code/ui/components/src/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
new file mode 100644
index 000000000000..0d09188106ba
--- /dev/null
+++ b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
@@ -0,0 +1,135 @@
+import React, { FunctionComponent, ComponentProps } from 'react';
+import type { StoryObj } from '@storybook/react';
+import { styled } from '@storybook/theming';
+import { TooltipMessage } from './TooltipMessage';
+import { WithToolTipState as WithTooltip } from './WithTooltip';
+
+const ViewPort = styled.div({
+ height: 300,
+});
+
+const BackgroundBox = styled.div({
+ width: 500,
+ height: 500,
+ overflowY: 'scroll',
+ background: '#eee',
+ position: 'relative',
+});
+
+const Spacer = styled.div({
+ height: 100,
+});
+
+const Trigger = styled.div({
+ width: 200,
+ height: 100,
+ backgroundColor: 'red',
+ color: 'white',
+});
+
+interface TooltipProps {
+ onHide?: () => void;
+}
+
+const Tooltip: FunctionComponent = ({ onHide }) => (
+
+);
+
+export default {
+ title: 'Basics/Tooltip/WithTooltip',
+ component: WithTooltip,
+ decorators: [
+ (storyFn) => (
+
+
+
+ {storyFn()}
+
+
+ ),
+ ],
+};
+
+export const SimpleHover: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'hover',
+ },
+ render: (args) => (
+ } {...args}>
+ Hover me!
+
+ ),
+};
+
+export const SimpleHoverFunctional: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'hover',
+ },
+ render: (args) => (
+
+ Hover me!
+
+ ),
+};
+
+export const SimpleClick: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'click',
+ },
+ render: (args) => (
+ } {...args}>
+ Click me!
+
+ ),
+};
+
+export const SimpleClickStartOpen: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'click',
+ startOpen: true,
+ },
+ render: (args) => (
+ } {...args}>
+ Click me!
+
+ ),
+};
+
+export const SimpleClickCloseOnClick: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'click',
+ closeOnClick: true,
+ },
+ render: (args) => (
+ } {...args}>
+ Click me!
+
+ ),
+};
+
+export const WithoutChrome: StoryObj> = {
+ args: {
+ placement: 'top',
+ trigger: 'click',
+ hasChrome: false,
+ },
+ render: (args) => (
+ } {...args}>
+ Click me!
+
+ ),
+};
diff --git a/code/lib/components/src/tooltip/WithTooltip.tsx b/code/ui/components/src/tooltip/WithTooltip.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/WithTooltip.tsx
rename to code/ui/components/src/tooltip/WithTooltip.tsx
diff --git a/code/lib/components/src/tooltip/lazy-WithTooltip.tsx b/code/ui/components/src/tooltip/lazy-WithTooltip.tsx
similarity index 100%
rename from code/lib/components/src/tooltip/lazy-WithTooltip.tsx
rename to code/ui/components/src/tooltip/lazy-WithTooltip.tsx
diff --git a/code/lib/components/src/typings.d.ts b/code/ui/components/src/typings.d.ts
similarity index 100%
rename from code/lib/components/src/typings.d.ts
rename to code/ui/components/src/typings.d.ts
diff --git a/code/lib/components/src/typography/DocumentFormatting.tsx b/code/ui/components/src/typography/DocumentFormatting.tsx
similarity index 100%
rename from code/lib/components/src/typography/DocumentFormatting.tsx
rename to code/ui/components/src/typography/DocumentFormatting.tsx
diff --git a/code/lib/components/src/typography/DocumentFormattingSample.md b/code/ui/components/src/typography/DocumentFormattingSample.mdx
similarity index 97%
rename from code/lib/components/src/typography/DocumentFormattingSample.md
rename to code/ui/components/src/typography/DocumentFormattingSample.mdx
index 55e06cf5d5d1..c022efeab78f 100644
--- a/code/lib/components/src/typography/DocumentFormattingSample.md
+++ b/code/ui/components/src/typography/DocumentFormattingSample.mdx
@@ -123,11 +123,11 @@ Right aligned columns
[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
-
+{/* lint disable no-literal-urls */}
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
-
+{/* lint enable no-literal-urls */}
# [Link](https://storybook.js.org/) in heading
diff --git a/code/lib/components/src/typography/DocumentWrapper.stories.tsx b/code/ui/components/src/typography/DocumentWrapper.stories.tsx
similarity index 98%
rename from code/lib/components/src/typography/DocumentWrapper.stories.tsx
rename to code/ui/components/src/typography/DocumentWrapper.stories.tsx
index a67b2bc8b293..17d8639ec608 100644
--- a/code/lib/components/src/typography/DocumentWrapper.stories.tsx
+++ b/code/ui/components/src/typography/DocumentWrapper.stories.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { DocumentWrapper } from './DocumentWrapper';
-import MarkdownSample from './DocumentFormattingSample.md';
+import MarkdownSample from './DocumentFormattingSample.mdx';
export default {
component: DocumentWrapper,
diff --git a/code/lib/components/src/typography/DocumentWrapper.tsx b/code/ui/components/src/typography/DocumentWrapper.tsx
similarity index 100%
rename from code/lib/components/src/typography/DocumentWrapper.tsx
rename to code/ui/components/src/typography/DocumentWrapper.tsx
diff --git a/code/lib/components/src/typography/ResetWrapper.tsx b/code/ui/components/src/typography/ResetWrapper.tsx
similarity index 100%
rename from code/lib/components/src/typography/ResetWrapper.tsx
rename to code/ui/components/src/typography/ResetWrapper.tsx
diff --git a/code/lib/components/src/typography/components.tsx b/code/ui/components/src/typography/components.tsx
similarity index 100%
rename from code/lib/components/src/typography/components.tsx
rename to code/ui/components/src/typography/components.tsx
diff --git a/code/lib/components/src/typography/elements/A.tsx b/code/ui/components/src/typography/elements/A.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/A.tsx
rename to code/ui/components/src/typography/elements/A.tsx
diff --git a/code/lib/components/src/typography/elements/Blockquote.tsx b/code/ui/components/src/typography/elements/Blockquote.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Blockquote.tsx
rename to code/ui/components/src/typography/elements/Blockquote.tsx
diff --git a/code/lib/components/src/typography/elements/Code.tsx b/code/ui/components/src/typography/elements/Code.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Code.tsx
rename to code/ui/components/src/typography/elements/Code.tsx
diff --git a/code/lib/components/src/typography/elements/DL.tsx b/code/ui/components/src/typography/elements/DL.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/DL.tsx
rename to code/ui/components/src/typography/elements/DL.tsx
diff --git a/code/lib/components/src/typography/elements/Div.tsx b/code/ui/components/src/typography/elements/Div.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Div.tsx
rename to code/ui/components/src/typography/elements/Div.tsx
diff --git a/code/lib/components/src/typography/elements/H1.tsx b/code/ui/components/src/typography/elements/H1.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H1.tsx
rename to code/ui/components/src/typography/elements/H1.tsx
diff --git a/code/lib/components/src/typography/elements/H2.tsx b/code/ui/components/src/typography/elements/H2.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H2.tsx
rename to code/ui/components/src/typography/elements/H2.tsx
diff --git a/code/lib/components/src/typography/elements/H3.tsx b/code/ui/components/src/typography/elements/H3.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H3.tsx
rename to code/ui/components/src/typography/elements/H3.tsx
diff --git a/code/lib/components/src/typography/elements/H4.tsx b/code/ui/components/src/typography/elements/H4.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H4.tsx
rename to code/ui/components/src/typography/elements/H4.tsx
diff --git a/code/lib/components/src/typography/elements/H5.tsx b/code/ui/components/src/typography/elements/H5.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H5.tsx
rename to code/ui/components/src/typography/elements/H5.tsx
diff --git a/code/lib/components/src/typography/elements/H6.tsx b/code/ui/components/src/typography/elements/H6.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/H6.tsx
rename to code/ui/components/src/typography/elements/H6.tsx
diff --git a/code/lib/components/src/typography/elements/HR.tsx b/code/ui/components/src/typography/elements/HR.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/HR.tsx
rename to code/ui/components/src/typography/elements/HR.tsx
diff --git a/code/lib/components/src/typography/elements/Img.tsx b/code/ui/components/src/typography/elements/Img.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Img.tsx
rename to code/ui/components/src/typography/elements/Img.tsx
diff --git a/code/lib/components/src/typography/elements/LI.tsx b/code/ui/components/src/typography/elements/LI.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/LI.tsx
rename to code/ui/components/src/typography/elements/LI.tsx
diff --git a/code/lib/components/src/typography/elements/Link.tsx b/code/ui/components/src/typography/elements/Link.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Link.tsx
rename to code/ui/components/src/typography/elements/Link.tsx
diff --git a/code/lib/components/src/typography/elements/OL.tsx b/code/ui/components/src/typography/elements/OL.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/OL.tsx
rename to code/ui/components/src/typography/elements/OL.tsx
diff --git a/code/lib/components/src/typography/elements/P.tsx b/code/ui/components/src/typography/elements/P.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/P.tsx
rename to code/ui/components/src/typography/elements/P.tsx
diff --git a/code/lib/components/src/typography/elements/Pre.tsx b/code/ui/components/src/typography/elements/Pre.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Pre.tsx
rename to code/ui/components/src/typography/elements/Pre.tsx
diff --git a/code/lib/components/src/typography/elements/Span.tsx b/code/ui/components/src/typography/elements/Span.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Span.tsx
rename to code/ui/components/src/typography/elements/Span.tsx
diff --git a/code/lib/components/src/typography/elements/TT.tsx b/code/ui/components/src/typography/elements/TT.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/TT.tsx
rename to code/ui/components/src/typography/elements/TT.tsx
diff --git a/code/lib/components/src/typography/elements/Table.tsx b/code/ui/components/src/typography/elements/Table.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/Table.tsx
rename to code/ui/components/src/typography/elements/Table.tsx
diff --git a/code/lib/components/src/typography/elements/UL.tsx b/code/ui/components/src/typography/elements/UL.tsx
similarity index 100%
rename from code/lib/components/src/typography/elements/UL.tsx
rename to code/ui/components/src/typography/elements/UL.tsx
diff --git a/code/lib/components/src/typography/lib/common.tsx b/code/ui/components/src/typography/lib/common.tsx
similarity index 100%
rename from code/lib/components/src/typography/lib/common.tsx
rename to code/ui/components/src/typography/lib/common.tsx
diff --git a/code/lib/components/src/typography/lib/isReactChildString.tsx b/code/ui/components/src/typography/lib/isReactChildString.tsx
similarity index 100%
rename from code/lib/components/src/typography/lib/isReactChildString.tsx
rename to code/ui/components/src/typography/lib/isReactChildString.tsx
diff --git a/code/ui/components/src/typography/link/link.stories.tsx b/code/ui/components/src/typography/link/link.stories.tsx
new file mode 100644
index 000000000000..cdafd9c6b963
--- /dev/null
+++ b/code/ui/components/src/typography/link/link.stories.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Link } from './link';
+import { Icons } from '../../icon/icon';
+
+const onClick = action('onClick');
+
+export default {
+ title: 'Basics/Link',
+ component: Link,
+};
+
+export const CancelWOnClick = {
+ args: {
+ href: '/',
+ onClick,
+ children: 'Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)',
+ },
+ name: 'Cancel w/ onClick',
+};
+
+export const CancelWHref = {
+ args: {
+ href: 'http://example.com',
+ children: 'Link',
+ },
+ name: 'Cancel w/ href',
+};
+
+export const NoCancelWOnClick = {
+ args: {
+ href: '/',
+ children: 'Any click will go through',
+ onClick,
+ },
+ name: 'No-cancel w/ onClick',
+};
+
+export const NoCancelWHref = {
+ args: {
+ href: 'http://example.com',
+ children: 'Link',
+ },
+ name: 'No-cancel w/ href',
+};
+
+export const StyledLinks = {
+ render: (args) => (
+
+
+ Default
+
+
+
+ Secondary
+
+
+
+ tertiary
+
+
+
+ nochrome
+
+
+
+
+ With icon in front
+
+
+
+ {/* A linked icon by itself */}
+
+
+
+
+ With arrow behind
+
+
+
+
+ Inverted colors
+
+
+
+
+ ),
+ name: 'Styled links',
+};
diff --git a/code/lib/components/src/typography/link/link.test.tsx b/code/ui/components/src/typography/link/link.test.tsx
similarity index 100%
rename from code/lib/components/src/typography/link/link.test.tsx
rename to code/ui/components/src/typography/link/link.test.tsx
diff --git a/code/lib/components/src/typography/link/link.tsx b/code/ui/components/src/typography/link/link.tsx
similarity index 100%
rename from code/lib/components/src/typography/link/link.tsx
rename to code/ui/components/src/typography/link/link.tsx
diff --git a/code/lib/components/src/typography/typography.stories.mdx b/code/ui/components/src/typography/typography.stories.mdx
similarity index 72%
rename from code/lib/components/src/typography/typography.stories.mdx
rename to code/ui/components/src/typography/typography.stories.mdx
index 8077be5509e9..22a14c3acebc 100644
--- a/code/lib/components/src/typography/typography.stories.mdx
+++ b/code/ui/components/src/typography/typography.stories.mdx
@@ -1,5 +1,5 @@
import { typography } from '@storybook/theming';
-import { Meta, Typeset } from '@storybook/addon-docs';
+import { Meta, Typeset } from '@storybook/blocks';
export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
(size) => `${typography.size[size]}px`
@@ -12,20 +12,6 @@ export const sampleText =
## Sans-serif
-```
-font-family:
- "Nunito Sans",
- -apple-system,
- ".SFNSText-Regular",
- "San Francisco",
- BlinkMacSystemFont,
- "Segoe UI",
- "Helvetica Neue",
- Helvetica,
- Arial,
- sans-serif;
-```
-
render({ key: id, active }))}
-- The error is most likely the shenanigans we do at code/lib/components/src/tabs/tabs.tsx#childrenToList
+- The error is most likely the shenanigans we do at code/ui/components/src/tabs/tabs.tsx#childrenToList
export const FilteredAddons = () => By default all addon panels are rendered
;
FilteredAddons.parameters = {
diff --git a/code/workspace.json b/code/workspace.json
index 11bfd4a6206c..824228ee3c7b 100644
--- a/code/workspace.json
+++ b/code/workspace.json
@@ -157,7 +157,7 @@
"implicitDependencies": []
},
"@storybook/components": {
- "root": "lib/components",
+ "root": "ui/components",
"type": "library",
"implicitDependencies": []
},
diff --git a/code/yarn.lock b/code/yarn.lock
index 7cff46ca671c..4cb6ab990170 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6524,9 +6524,9 @@ __metadata:
languageName: unknown
linkType: soft
-"@storybook/components@7.0.0-alpha.42, @storybook/components@workspace:*, @storybook/components@workspace:lib/components":
+"@storybook/components@7.0.0-alpha.42, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
version: 0.0.0-use.local
- resolution: "@storybook/components@workspace:lib/components"
+ resolution: "@storybook/components@workspace:ui/components"
dependencies:
"@popperjs/core": ^2.6.0
"@storybook/client-logger": 7.0.0-alpha.42
@@ -6540,7 +6540,7 @@ __metadata:
memoizerific: ^1.11.3
overlayscrollbars: ^1.13.1
polished: ^4.2.2
- prettier: ">=2.2.1 <=2.3.0"
+ prettier: ">=2.5"
react-popper-tooltip: ^3.1.1
react-syntax-highlighter: ^15.4.5
react-textarea-autosize: ^8.3.0
@@ -28522,7 +28522,7 @@ __metadata:
languageName: node
linkType: hard
-"prettier@npm:2.7.1, prettier@npm:^1.18.2 || ^2.0.0":
+"prettier@npm:2.7.1, prettier@npm:>=2.5, prettier@npm:^1.18.2 || ^2.0.0":
version: 2.7.1
resolution: "prettier@npm:2.7.1"
bin:
diff --git a/docs/addons/addon-knowledge-base.md b/docs/addons/addon-knowledge-base.md
index fd38290f4ec0..dd4aa0986bc7 100644
--- a/docs/addons/addon-knowledge-base.md
+++ b/docs/addons/addon-knowledge-base.md
@@ -49,30 +49,30 @@ Addon authors can develop their UIs using any React library. But we recommend us
Use the components listed below with your next addon.
-| Component | Source | Story |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/ActionBar/ActionBar.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-actionbar--single-item) |
-| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/addon-panel/addon-panel.tsx) | N/A |
-| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/Badge/Badge.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-badge--all-badges) |
-| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/Button/Button.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-button--all-buttons) |
-| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/form/index.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-form-button--sizes) |
-| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/Loader/Loader.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-loader--progress-bar) |
-| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/placeholder/placeholder.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-placeholder--single-child) |
-| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-scrollarea--vertical) |
-| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/spaced/Spaced.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-spaced--row) |
-| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) |
-| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/tabs/tabs.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tabs--stateful-static) |
-| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/bar/bar.tsx) | N/A |
-| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/tooltip/Tooltip.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) |
-| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/Zoom/Zoom.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-zoom--element-actual-size) |
+| Component | Source | Story |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ActionBar/ActionBar.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-actionbar--single-item) |
+| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/addon-panel/addon-panel.tsx) | N/A |
+| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Badge/Badge.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-badge--all-badges) |
+| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Button/Button.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-button--all-buttons) |
+| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/form/index.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-form-button--sizes) |
+| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Loader/Loader.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-loader--progress-bar) |
+| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/placeholder/placeholder.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-placeholder--single-child) |
+| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-scrollarea--vertical) |
+| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/spaced/Spaced.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-spaced--row) |
+| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) |
+| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tabs/tabs.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tabs--stateful-static) |
+| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/bar/bar.tsx) | N/A |
+| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tooltip/Tooltip.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) |
+| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Zoom/Zoom.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-zoom--element-actual-size) |
Complementing the components, also included is a set of UI primitives. Use the content listed below as a reference for styling your addon.
-| Component | Source | Story |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
-| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) |
-| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) |
+| Component | Source | Story |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) |
+| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) |
+| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) |
The color palette implemented by
@storybook/components is a high-level abstraction of the
@storybook/theming package.