@storybook/manager 8.2.0-alpha.8 → 8.2.0-beta.0

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,131 +1,36 @@
1
1
  {
2
2
  "name": "@storybook/manager",
3
- "version": "8.2.0-alpha.8",
3
+ "version": "8.2.0-beta.0",
4
4
  "description": "Core Storybook UI",
5
5
  "keywords": [
6
6
  "storybook"
7
7
  ],
8
- "homepage": "https://github.com/storybookjs/storybook/tree/next/code/ui/manager",
8
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/deprecated/manager",
9
9
  "bugs": {
10
10
  "url": "https://github.com/storybookjs/storybook/issues"
11
11
  },
12
12
  "repository": {
13
13
  "type": "git",
14
14
  "url": "https://github.com/storybookjs/storybook.git",
15
- "directory": "code/ui/manager"
15
+ "directory": "code/deprecated/manager"
16
16
  },
17
17
  "funding": {
18
18
  "type": "opencollective",
19
19
  "url": "https://opencollective.com/storybook"
20
20
  },
21
21
  "license": "MIT",
22
- "exports": {
23
- ".": {
24
- "types": "./dist/index.d.ts",
25
- "import": "./dist/index.js"
26
- },
27
- "./runtime": {
28
- "types": "./dist/runtime.d.ts",
29
- "import": "./dist/runtime.js"
30
- },
31
- "./globals-module-info": {
32
- "types": "./dist/globals-module-info.d.ts",
33
- "require": "./dist/globals-module-info.js"
34
- },
35
- "./globals": {
36
- "types": "./dist/globals.d.ts",
37
- "import": "./dist/globals.js",
38
- "require": "./dist/globals.js"
39
- },
40
- "./paths": "./paths.js",
41
- "./package.json": "./package.json"
42
- },
43
- "main": "dist/index.js",
44
- "module": "dist/index.js",
45
- "types": "dist/index.d.ts",
46
- "typesVersions": {
47
- "*": {
48
- "*": [
49
- "dist/index.d.ts"
50
- ],
51
- "runtime": [
52
- "dist/runtime.d.ts"
53
- ],
54
- "globals": [
55
- "dist/globals.d.ts"
56
- ],
57
- "globals-module-info": [
58
- "dist/globals-module-info.d.ts"
59
- ]
60
- }
61
- },
22
+ "sideEffects": false,
62
23
  "files": [
63
- "dist/**/*",
64
- "static/**/*",
65
24
  "README.md",
66
25
  "*.js",
67
- "*.d.ts",
68
- "!src/**/*"
26
+ "*.mjs",
27
+ "*.cjs",
28
+ "*.d.ts"
69
29
  ],
70
- "scripts": {
71
- "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
72
- "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/esm-bundle.ts"
73
- },
74
- "devDependencies": {
75
- "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
76
- "@storybook/addon-designs": "^7.0.4",
77
- "@storybook/channels": "8.2.0-alpha.8",
78
- "@storybook/client-logger": "8.2.0-alpha.8",
79
- "@storybook/components": "8.2.0-alpha.8",
80
- "@storybook/core-events": "8.2.0-alpha.8",
81
- "@storybook/global": "^5.0.0",
82
- "@storybook/icons": "^1.2.5",
83
- "@storybook/manager-api": "8.2.0-alpha.8",
84
- "@storybook/router": "8.2.0-alpha.8",
85
- "@storybook/test": "8.2.0-alpha.8",
86
- "@storybook/theming": "8.2.0-alpha.8",
87
- "@storybook/types": "8.2.0-alpha.8",
88
- "@tanstack/react-virtual": "^3.3.0",
89
- "@testing-library/react": "^11.2.2",
90
- "@types/react-transition-group": "^4",
91
- "@types/semver": "^7.3.4",
92
- "browser-dtector": "^3.4.0",
93
- "copy-to-clipboard": "^3.3.1",
94
- "downshift": "^9.0.4",
95
- "fs-extra": "^11.1.0",
96
- "fuse.js": "^3.6.1",
97
- "lodash": "^4.17.21",
98
- "markdown-to-jsx": "^7.4.5",
99
- "memoizerific": "^1.11.3",
100
- "polished": "^4.2.2",
101
- "qs": "^6.10.0",
102
- "react": "^18.2.0",
103
- "react-dom": "^18.2.0",
104
- "react-draggable": "^4.4.5",
105
- "react-helmet-async": "^1.3.0",
106
- "react-resize-detector": "^7.1.2",
107
- "react-transition-group": "^4.4.5",
108
- "resolve-from": "^5.0.0",
109
- "semver": "^7.3.7",
110
- "store2": "^2.14.2",
111
- "telejson": "^7.2.0",
112
- "ts-dedent": "^2.0.0",
113
- "typescript": "^5.3.2"
30
+ "peerDependencies": {
31
+ "storybook": "^8.2.0-beta.0"
114
32
  },
115
33
  "publishConfig": {
116
34
  "access": "public"
117
- },
118
- "bundler": {
119
- "pre": "./scripts/generate-exports-file.ts",
120
- "browserEntries": [
121
- "./src/index.tsx",
122
- "./src/runtime.ts",
123
- "./src/globals-runtime.ts"
124
- ],
125
- "nodeEntries": [
126
- "./src/globals.ts",
127
- "./src/globals-module-info.ts"
128
- ]
129
- },
130
- "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
35
+ }
131
36
  }
package/README.md DELETED
@@ -1,188 +0,0 @@
1
- <h1>Storybook manager's UI</h1>
2
-
3
- Storybook manager is the core UI of [Storybook](https://storybook.js.org).
4
- It's a React based UI which you can initialize with a function.
5
- You can configure it by providing a provider API.
6
-
7
- ## Table of Contents
8
-
9
- - [Table of Contents](#table-of-contents)
10
- - [Usage](#usage)
11
- - [API](#api)
12
- - [.setOptions()](#setoptions)
13
- - [.setStories()](#setstories)
14
- - [.onStory()](#onstory)
15
- - [Hacking Guide](#hacking-guide)
16
- - [The App](#the-app)
17
- - [Changing UI](#changing-ui)
18
- - [Mounting](#mounting)
19
- - [App Context](#app-context)
20
- - [Actions](#actions)
21
- - [Core API](#core-api)
22
- - [Keyboard Shortcuts](#keyboard-shortcuts)
23
- - [URL Changes](#url-changes)
24
- - [Story Order](#story-order)
25
-
26
- ## Usage
27
-
28
- First you need to install `@storybook/manager` into your app.
29
-
30
- ```sh
31
- yarn add @storybook/manager --dev
32
- ```
33
-
34
- Then you need to create a Provider class like this:
35
-
36
- ```js
37
- import React from 'react';
38
- import { Provider } from '@storybook/manager';
39
-
40
- export default class MyProvider extends Provider {
41
- getElements(type) {
42
- return {};
43
- }
44
-
45
- renderPreview() {
46
- return <p>This is the Preview</p>;
47
- }
48
-
49
- handleAPI(api) {
50
- // no need to do anything for now.
51
- }
52
- }
53
- ```
54
-
55
- Then you need to initialize the UI like this:
56
-
57
- ```js
58
- import global from 'global';
59
- import { renderStorybookUI } from '@storybook/manager';
60
- import Provider from './provider';
61
-
62
- const { document } = global;
63
-
64
- const roolEl = document.getElementById('root');
65
- renderStorybookUI(roolEl, new Provider());
66
- ```
67
-
68
- ## API
69
-
70
- ### .setOptions()
71
-
72
- ```js
73
- import { Provider } from '@storybook/manager';
74
-
75
- class ReactProvider extends Provider {
76
- handleAPI(api) {
77
- api.setOptions({
78
- // see available options in
79
- // https://storybook.js.org/docs/react/configure/features-and-behavior
80
- });
81
- }
82
- }
83
- ```
84
-
85
- ## .setStories()
86
-
87
- This API is used to pass the`kind` and `stories` list to storybook-ui.
88
-
89
- ```js
90
- import { Provider } from '@storybook/manager';
91
-
92
- class ReactProvider extends Provider {
93
- handleAPI(api) {
94
- api.setStories([
95
- {
96
- kind: 'Component 1',
97
- stories: ['State 1', 'State 2'],
98
- },
99
-
100
- {
101
- kind: 'Component 2',
102
- stories: ['State a', 'State b'],
103
- },
104
- ]);
105
- }
106
- }
107
- ```
108
-
109
- ## .onStory()
110
-
111
- You can use to listen to the story change and update the preview.
112
-
113
- ```js
114
- import { Provider } from '@storybook/manager';
115
-
116
- class ReactProvider extends Provider {
117
- handleAPI(api) {
118
- api.onStory((kind, story) => {
119
- this.globalState.emit('change', kind, story);
120
- });
121
- }
122
- }
123
- ```
124
-
125
- ## Hacking Guide
126
-
127
- If you like to add features to the Storybook UI or fix bugs, this is the guide you need to follow.
128
-
129
- First of all, familiarize yourself with code used. Check the [source](./src/) folder for the source code.
130
-
131
- ### The App
132
-
133
- This is a Redux app written based on the [Mantra architecture](https://github.com/kadirahq/mantra/).
134
- It's a set of modules. You can see those modules at `src/modules` directory.
135
-
136
- ### Changing UI
137
-
138
- If you like to change the appearance of the UI, you need to look at the `ui` module. Change components at the `components` directory for UI tweaks.
139
-
140
- You can also change containers(which are written with [react-komposer](https://github.com/kadirahq/react-komposer/)) to add more data from the redux state.
141
-
142
- ### Mounting
143
-
144
- The UI is mounted in the `src/modules/ui/routes.js`. Inside that, we have injected dependencies as well. Refer [mantra-core](https://github.com/mantrajs/mantra-core) for that.
145
-
146
- We've injected the context and actions.
147
-
148
- ### App Context
149
-
150
- App context is the app which application context you initialize when creating the UI. It is initialized in the `src/index.js` file. It's a non serializable state. You can access the app context from containers and basically most of the place in the app.
151
-
152
- So, that's the place to put app wide configurations and objects which won't changed after initialized. Our redux store is also stayed inside the app context.
153
-
154
- ### Actions
155
-
156
- Actions are the place we implement app logic in a Mantra app. Each module has a set of actions and they are globally accessible. These actions are located at `<module>/actions` directory.
157
-
158
- They got injected into the app(when mounting) and you can access them via containers. If you are familiar with redux, this is exactly action creators. But they are not only limited to do redux stuff. Actions has the access to the app context, so literally it can do anything.
159
-
160
- ### Core API
161
-
162
- Core API (which is passed to the Provider with `handleAPI` method) is implemented in the `api` module. We put the provider passed by the user in the app context. Then api module access it and use it as needed.
163
-
164
- ### Keyboard Shortcuts
165
-
166
- Keyboard shortcuts are implemented in a bit different way. The final state of keyboard shortcuts is managed by the `shortcuts` module. But they are implemented in the `ui` module with `src/modules/ui/configs/handle_routing.js`
167
-
168
- These shortcuts also can be called from main API using the `handleShortcut` method. Check the example app for the usage. That's implemented as an action in the `shortcuts` module.
169
-
170
- The above action(or the `handleShortcut` method) accepts events as a constant defined by this module. They are defined in the `src/libs/key_events.js`. This is basically to serialize these events.
171
-
172
- > In react-storybook we need to pass these events from the preview iframe to the main app. That's the core reason for this.
173
-
174
- ### URL Changes
175
-
176
- TODO: state we use reach/router customized to query params
177
-
178
- ### Story Order
179
-
180
- Stories are sorted in the order in which they were imported. This can be overridden by adding storySort to the Parameters for the stories in `.storybook/preview.js`:
181
-
182
- ```js
183
- addParameters({
184
- options: {
185
- storySort: (a, b) => a[1].id.localeCompare(b[1].id),
186
- },
187
- });
188
- ```
@@ -1 +0,0 @@
1
- import{WithToolTipState,WithTooltipPure}from"./chunk-BOKMJXTL.js";import"./chunk-OUWKM4RB.js";import"./chunk-VCKCP2R2.js";export{WithToolTipState,WithToolTipState as WithTooltip,WithTooltipPure};