Pages in Storybook
19 |20 | We recommend building UIs with a{' '} 21 | 22 | component-driven 23 | {' '} 24 | process starting with atomic components and ending with pages. 25 |
26 |27 | Render pages with mock data. This makes it easy to build and review page states without 28 | needing to navigate to them in your app. Here are some handy patterns for managing page data 29 | in Storybook: 30 |
31 |-
32 |
- 33 | Use a higher-level connected component. Storybook helps you compose such data from the 34 | "args" of child component stories 35 | 36 |
- 37 | Assemble data in the page component from your services. You can mock these services out 38 | using Storybook. 39 | 40 |
42 | Get a guided tutorial on component-driven development at{' '} 43 | 44 | Learn Storybook 45 | 46 | . Read more in the{' '} 47 | 48 | docs 49 | 50 | . 51 |
52 |
53 | Tip Adjust the width of the canvas with the{' '}
54 |
63 | Viewports addon in the toolbar
64 |
65 | 
14 |
15 |
16 | `}
17 | />
18 | );
19 |
20 | // It renders markdown
21 | expect(screen.getByText('Hello world')).toBeTruthy();
22 | // and paragraphs
23 | expect(screen.getByTitle('para')).toHaveTextContent('This is some safe text!');
24 | // but blocks attributes that can run code
25 | expect(screen.getByTitle('xssimg')).not.toHaveAttribute('onerror');
26 | // and blocks script and style tags outright
27 | expect(screen.queryByTitle('xss')).toBeNull();
28 | expect(screen.queryByTitle('xsscss')).toBeNull();
29 | });
30 | })
31 |
--------------------------------------------------------------------------------
/src/title.ts:
--------------------------------------------------------------------------------
1 | import { JsonSchema1 } from "./schema";
2 |
3 | export function getTitle(reference: string, schema: JsonSchema1): string {
4 | return findTitle(reference, schema) || 'object';
5 | }
6 |
7 | export function findTitle(reference: string, schema: JsonSchema1): string | undefined {
8 | if (schema.title !== undefined) {
9 | return schema.title;
10 | }
11 |
12 | const rs = reference.split('/');
13 | const last = rs[rs.length - 1];
14 | const secondLast = rs[rs.length - 2];
15 | const thirdLast = rs[rs.length - 3];
16 | if (['properties', 'definitions'].includes(secondLast)) {
17 | return last;
18 | } else if (last === 'additionalProperties') {
19 | return '(Additional properties)';
20 | } else if (last === 'items' && ['properties', 'definitions'].includes(thirdLast)) {
21 | return secondLast + ' items';
22 | }
23 |
24 | return undefined;
25 | }
--------------------------------------------------------------------------------
/src/type-inference.ts:
--------------------------------------------------------------------------------
1 | import { JsonSchema1, SimpleTypes } from './schema';
2 | import { isPresent } from 'ts-is-present';
3 |
4 | function hasNumericalRestrictor(s: JsonSchema1): boolean {
5 | return [
6 | s.minimum,
7 | s.maximum,
8 | s.exclusiveMaximum,
9 | s.exclusiveMinimum,
10 | s.multipleOf
11 | ].some(v => v !== undefined);
12 | }
13 |
14 | function hasStringRestrictor(s: JsonSchema1): boolean {
15 | return [
16 | s.minLength,
17 | s.maxLength,
18 | s.pattern
19 | ].some(v => v !== undefined);
20 | }
21 |
22 | function hasObjectRestrictor(s: JsonSchema1): boolean {
23 | return [
24 | s.properties,
25 | s.additionalProperties,
26 | s.minProperties,
27 | s.maxProperties
28 | ].some(v => v !== undefined);
29 | }
30 |
31 | function hasArrayRestrictor(s: JsonSchema1): boolean {
32 | return [
33 | s.items,
34 | s.minItems,
35 | s.maxItems,
36 | s.uniqueItems
37 | ].some(v => v !== undefined);
38 | }
39 |
40 | export function jsonTypeToSchemaType(someType: unknown): SimpleTypes | undefined {
41 | switch (typeof someType) {
42 | case 'boolean':
43 | return 'boolean';
44 | case 'string':
45 | return 'string';
46 | case 'number':
47 | return 'number';
48 | case 'bigint':
49 | return 'integer';
50 | case 'object':
51 | return 'object';
52 | default:
53 | return undefined;
54 | }
55 | }
56 |
57 | export function getTypesFromEnum(enumValue: NonNullable