Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-11 14:52:55 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Tasks completed to update Storybook and Typescript versions. Please see phase-1-summary.md for details

Browse Source
This commit is contained in:
Richard Osborne
2025-12-08 16:19:56 +01:00
parent ef1ffdd593
commit e927df760f
117 changed files with 8853 additions and 4913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/noodl-core-ui/src/@include-types/global.d.ts vendored
View File

@@ -1,18 +1,10 @@
type TSFixme = any;
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module '*.css' {
const styles: { readonly [key: string]: string };
export default styles;
}
declare module '*.scss' {
const styles: { readonly [key: string]: string };
export default styles;
}
/**
* Global type declarations for noodl-core-ui
*
* This file imports shared global types from @noodl/noodl-types.
* Package-specific types can be added below the reference directive.
*
* @see packages/noodl-types/src/global.d.ts for shared types
*/
/// <reference path="../../../../noodl-types/src/global.d.ts" />

9
packages/noodl-core-ui/src/components/ai/AiChatBox/AiChatBox.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import React, { useEffect, useState } from 'react';
import { AiChatLoader } from '@noodl-core-ui/components/ai/AiChatLoader';
@@ -14,11 +14,14 @@ import { VStack } from '@noodl-core-ui/components/layout/Stack';
import { AiChatBox } from './AiChatBox';
export default {
const meta: Meta<typeof AiChatBox> = {
title: 'Ai/Ai ChatBox',
component: AiChatBox,
argTypes: {}
} as ComponentMeta<typeof AiChatBox>;
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Preview = () => (
<div style={{ maxWidth: '380px', height: '800px' }}>

15
packages/noodl-core-ui/src/components/ai/AiChatCard/AiChatCard.stories.tsx
View File

@@ -1,18 +1,19 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AiChatCard } from './AiChatCard';
export default {
const meta: Meta<typeof AiChatCard> = {
title: 'Ai/Ai Chat Card',
component: AiChatCard,
argTypes: {}
} as ComponentMeta<typeof AiChatCard>;
};
const Template: ComponentStory<typeof AiChatCard> = (args) => <AiChatCard {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
title: 'Home page',
subtitle: 'Landing page for the app'
},
};

26
packages/noodl-core-ui/src/components/ai/AiChatLoader/AiChatLoader.stories.tsx
View File

@@ -1,24 +1,28 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AiChatLoader } from './AiChatLoader';
export default {
const meta: Meta<typeof AiChatLoader> = {
title: 'Ai/Ai Chat Loader',
component: AiChatLoader,
argTypes: {}
} as ComponentMeta<typeof AiChatLoader>;
};
const Template: ComponentStory<typeof AiChatLoader> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: '337px' }}>
<AiChatLoader {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const LongText = Template.bind({});
LongText.args = {
text: 'Making sense of the universe... one moment please!'
export const Common: Story = {
args: {},
};
export const LongText: Story = {
args: {
text: 'Making sense of the universe... one moment please!'
},
};

37
packages/noodl-core-ui/src/components/ai/AiChatMessage/AiChatMessage.stories.tsx
View File

@@ -1,51 +1,56 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { AiChatMessage } from './AiChatMessage';
export default {
const meta: Meta<typeof AiChatMessage> = {
title: 'Ai/Ai Chat Message',
component: AiChatMessage,
argTypes: {}
} as ComponentMeta<typeof AiChatMessage>;
};
const Template: ComponentStory<typeof AiChatMessage> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ maxWidth: '280px' }}>
<AiChatMessage {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
user: {
role: 'user',
name: 'Tore K'
},
content: 'Get the current weather at my location.'
},
};
export const User_BigContent = Template.bind({});
User_BigContent.args = {
export const User_BigContent: Story = {
args: {
user: {
role: 'user',
name: 'Tore K'
},
content: `This Function node fetches a location's address using its latitude and longitude from Google's Geocoding API. It requires an API key, latitude, and longitude as inputs and outputs the formatted address and success or failure signals.`
},
};
export const Assistant_BigContent = Template.bind({});
Assistant_BigContent.args = {
export const Assistant_BigContent: Story = {
args: {
user: {
role: 'assistant'
},
content: `This Function node fetches a location's address using its latitude and longitude from Google's Geocoding API. It requires an API key, latitude, and longitude as inputs and outputs the formatted address and success or failure signals.`
},
};
export const Assistant_BigContentAffix = Template.bind({});
Assistant_BigContentAffix.args = {
export const Assistant_BigContentAffix: Story = {
args: {
user: {
role: 'assistant'
},
@@ -59,10 +64,12 @@ Assistant_BigContentAffix.args = {
isGrowing
/>
)
},
};
export const None_BigContent = Template.bind({});
None_BigContent.args = {
export const None_BigContent: Story = {
args: {
user: null,
content: `This Function node fetches a location's address using its latitude and longitude from Google's Geocoding API. It requires an API key, latitude, and longitude as inputs and outputs the formatted address and success or failure signals.`
},
};

21
packages/noodl-core-ui/src/components/ai/AiChatSuggestion/AiChatSuggestion.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { PrimaryButton, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
@@ -6,26 +6,31 @@ import { Box } from '@noodl-core-ui/components/layout/Box';
import { AiChatSuggestion } from './AiChatSuggestion';
export default {
const meta: Meta<typeof AiChatSuggestion> = {
title: 'Ai/Ai Chat Suggestion',
component: AiChatSuggestion,
argTypes: {}
} as ComponentMeta<typeof AiChatSuggestion>;
};
const Template: ComponentStory<typeof AiChatSuggestion> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ maxWidth: '280px' }}>
<AiChatSuggestion {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
text: 'What are the required inputs for this node to work correctly?'
},
};
export const IsLoading = Template.bind({});
IsLoading.args = {
export const IsLoading: Story = {
args: {
isLoading: true
},
};
export const OnUpdate = () => {

22
packages/noodl-core-ui/src/components/ai/AiChatboxError/AiChatboxError.stories.tsx
View File

@@ -1,25 +1,29 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AiChatboxError } from './AiChatboxError';
export default {
const meta: Meta<typeof AiChatboxError> = {
title: 'Ai/Ai Chatbox Error',
component: AiChatboxError,
argTypes: {}
} as ComponentMeta<typeof AiChatboxError>;
};
const Template: ComponentStory<typeof AiChatboxError> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ maxWidth: '380px', height: '800px', border: '1px solid black' }}>
<AiChatboxError {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const NotFound = Template.bind({});
NotFound.args = {
export const NotFound: Story = {
args: {
content:
'Cannot find the chat history for this node. Could it be that the chat history is missing in Version Control? :('
},
};

15
packages/noodl-core-ui/src/components/ai/AiIcon/AiIcon.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AiIcon } from './AiIcon';
export default {
const meta: Meta<typeof AiIcon> = {
title: 'Ai/Ai Icon',
component: AiIcon,
argTypes: {}
} as ComponentMeta<typeof AiIcon>;
};
const Template: ComponentStory<typeof AiIcon> = (args) => <AiIcon {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

26
packages/noodl-core-ui/src/components/ai/AiIconAnimated/AiIconAnimated.stories.tsx
View File

@@ -1,15 +1,17 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AiIconAnimated } from './AiIconAnimated';
export default {
const meta: Meta<typeof AiIconAnimated> = {
title: 'Ai/Ai Icon Animated',
component: AiIconAnimated,
argTypes: {}
} as ComponentMeta<typeof AiIconAnimated>;
};
const Template: ComponentStory<typeof AiIconAnimated> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div
style={{
// A background is required for the mask to work
@@ -20,10 +22,12 @@ const Template: ComponentStory<typeof AiIconAnimated> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Listening = Template.bind({});
Listening.args = {
isListening: true
export const Common: Story = {
args: {},
};
export const Listening: Story = {
args: {
isListening: true
},
};

17
packages/noodl-core-ui/src/components/app/SideNavigation/SideNavigation.stories.tsx
View File

@@ -1,5 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
@@ -7,20 +6,23 @@ import { Container, ContainerDirection } from '@noodl-core-ui/components/layout/
import { SideNavigation, SideNavigationButton } from './SideNavigation';
export default {
const meta: Meta<typeof SideNavigation> = {
title: 'App/Side Navigation',
component: SideNavigation,
argTypes: {}
} as ComponentMeta<typeof SideNavigation>;
};
const Template: ComponentStory<typeof SideNavigation> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: '380px', height: '800px' }}>
<SideNavigation {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
toolbar: (
<>
<Container direction={ContainerDirection.Vertical} UNSAFE_style={{ flex: '1' }}>
@@ -43,4 +45,5 @@ Common.args = {
<PrimaryButton label="Hello World" isGrowing />
</Container>
)
},
};

32
packages/noodl-core-ui/src/components/app/TitleBar/TitleBar.stories.tsx
View File

@@ -1,47 +1,53 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { TitleBar, TitleBarState } from './TitleBar';
export default {
const meta: Meta<typeof TitleBar> = {
title: 'App/Title Bar',
component: TitleBar,
argTypes: {}
} as ComponentMeta<typeof TitleBar>;
};
const Template: ComponentStory<typeof TitleBar> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ position: 'relative', width: 950, height: 40 }}>
<TitleBar {...args}></TitleBar>
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
title: 'Noodl Storybook',
version: '2.6.5',
isWindows: false
},
};
export const IsWindows = Template.bind({});
IsWindows.args = {
export const IsWindows: Story = {
args: {
title: 'Noodl Storybook',
version: '2.6.5',
isWindows: true
},
};
export const UpdateAvailable = Template.bind({});
UpdateAvailable.args = {
export const UpdateAvailable: Story = {
args: {
title: 'Noodl Storybook',
version: '2.6.5',
versionAvailable: '2.6.6',
state: TitleBarState.UpdateAvailable,
isWindows: true
},
};
export const Updated = Template.bind({});
Updated.args = {
export const Updated: Story = {
args: {
title: 'Noodl Storybook',
version: '2.6.5',
state: TitleBarState.Updated,
isWindows: true
},
};

17
packages/noodl-core-ui/src/components/common/ActivityIndicator/ActivityIndicator.stories.tsx
View File

@@ -1,17 +1,20 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ActivityIndicator } from './ActivityIndicator';
export default {
const meta: Meta<typeof ActivityIndicator> = {
title: 'Common/Activity Indicator',
component: ActivityIndicator,
argTypes: {},
} as ComponentMeta<typeof ActivityIndicator>;
};
const Template: ComponentStory<typeof ActivityIndicator> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<ActivityIndicator {...args} />
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

15
packages/noodl-core-ui/src/components/common/Card/Card.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Card } from './Card';
export default {
const meta: Meta<typeof Card> = {
title: 'Common/Card',
component: Card,
argTypes: {}
} as ComponentMeta<typeof Card>;
};
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

16
packages/noodl-core-ui/src/components/common/EditorNode/EditorNode.stories.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { EditorNode } from './EditorNode';
export default {
const meta: Meta<typeof EditorNode> = {
title: 'Common/EditorNode',
component: EditorNode,
argTypes: {
@@ -25,9 +25,13 @@ export default {
}
}
}
} as ComponentMeta<typeof EditorNode>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof EditorNode> = (args) => <EditorNode {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

10
packages/noodl-core-ui/src/components/common/ErrorBoundary/ErrorBoundary.stories.tsx
View File

@@ -1,14 +1,16 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ErrorBoundary } from './ErrorBoundary';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof ErrorBoundary> = {
title: 'Common/Error Boundary',
component: ErrorBoundary,
argTypes: {}
} as ComponentMeta<typeof ErrorBoundary>;
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = (args) => (
<ErrorBoundary {...args}>

16
packages/noodl-core-ui/src/components/common/HtmlRenderer/HtmlRenderer.stories.tsx
View File

@@ -1,21 +1,25 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { HtmlRenderer } from './HtmlRenderer';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof HtmlRenderer> = {
title: 'Common/HtmlRenderer',
component: HtmlRenderer,
argTypes: {}
} as ComponentMeta<typeof HtmlRenderer>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof HtmlRenderer> = (args) => (
const Template: Story = (args) => (
<>
<Text>Pass an HTML string to the html-prop</Text>
<HtmlRenderer {...args} />;
</>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

16
packages/noodl-core-ui/src/components/common/Icon/Icon.stories.tsx
View File

@@ -1,17 +1,21 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Icon, IconName } from './Icon';
export default {
const meta: Meta<typeof Icon> = {
title: 'Common/Icon',
component: Icon,
argTypes: {
icon: { control: 'select', options: IconName }
}
} as ComponentMeta<typeof Icon>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

27
packages/noodl-core-ui/src/components/common/Logo/Logo.stories.tsx
View File

@@ -1,29 +1,34 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import type { Meta, StoryObj } from '@storybook/react';
import { Logo, LogoVariant } from "./Logo";
export default {
const meta: Meta<typeof Logo> = {
title: "Common/Logo",
component: Logo,
argTypes: {},
} as ComponentMeta<typeof Logo>;
};
const Template: ComponentStory<typeof Logo> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ padding: '10px' }}>
<Logo {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const Inverted = Template.bind({});
Inverted.args = {
export const Inverted: Story = {
args: {
variant: LogoVariant.Inverted
},
};
export const Grayscale = Template.bind({});
Grayscale.args = {
export const Grayscale: Story = {
args: {
variant: LogoVariant.Grayscale
},
};

44
packages/noodl-core-ui/src/components/common/Markdown/Markdown.stories.tsx
View File

@@ -1,30 +1,32 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Markdown } from './Markdown';
export default {
const meta: Meta<typeof Markdown> = {
title: 'Common/Markdown',
component: Markdown,
argTypes: {}
} as ComponentMeta<typeof Markdown>;
};
const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const TextSpanStyle = Template.bind({});
TextSpanStyle.args = {
export const TextSpanStyle: Story = {
args: {
content: `
<span style="color: red;">Red Text</span>
<span style="color: green;">Green Text</span>
<span style="color: blue;">Blue Text</span>
`
},
};
export const Demo = Template.bind({});
Demo.args = {
export const Demo: Story = {
args: {
content: `
# h1 Heading 8-)
## h2 Heading
@@ -33,7 +35,6 @@ Demo.args = {
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
@@ -42,7 +43,6 @@ ___
***
## Typographic replacements
Enable typographer option to see result.
@@ -55,7 +55,6 @@ test.. test... test..... test?..... test!....
"Smartypants, double quotes" and 'single quotes'
## Emphasis
**This is bold text**
@@ -68,15 +67,12 @@ _This is italic text_
~~Strikethrough~~
## Blockquotes
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
## Lists
Unordered
@@ -95,7 +91,6 @@ Ordered
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as \`1.\`
@@ -104,7 +99,6 @@ Start numbering with offset:
57. foo
1. bar
## Code
Inline \`code\`
@@ -116,7 +110,6 @@ Indented code
line 2 of code
line 3 of code
Block code "fences"
\`\`\`
@@ -128,6 +121,7 @@ Syntax highlighting
\`\`\`js
var foo = function (bar) {
return bar++;
},
};
console.log(foo(5));
@@ -149,7 +143,6 @@ Right aligned columns
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
[link text](http://dev.nodeca.com)
@@ -158,7 +151,6 @@ Right aligned columns
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
## Images
![Minion](https://octodex.github.com/images/minion.png)
@@ -172,13 +164,11 @@ With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
## Plugins
The killer feature of \`markdown-it\` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
@@ -187,23 +177,19 @@ The killer feature of \`markdown-it\` is very effective support of
see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
- 19^th^
- H~2~O
### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
++Inserted text++
### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
==Marked text==
### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
Footnote 1 link[^first].
@@ -220,7 +206,6 @@ Duplicated footnote reference[^second].
[^second]: Footnote text.
### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
Term 1
@@ -245,7 +230,6 @@ Term 2
~ Definition 2a
~ Definition 2b
### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
This is HTML abbreviation example.

52
packages/noodl-core-ui/src/components/inputs/ActionButton/ActionButton.stories.tsx
View File

@@ -1,73 +1,82 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ActionButton, ActionButtonVariant } from './ActionButton';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { Text, TextType } from '@noodl-core-ui/components/typography/Text';
import { Container } from '@noodl-core-ui/components/layout/Container';
export default {
const meta: Meta<typeof ActionButton> = {
title: 'Inputs/Action Button',
component: ActionButton,
argTypes: {}
} as ComponentMeta<typeof ActionButton>;
};
const Template: ComponentStory<typeof ActionButton> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<ActionButton {...args}></ActionButton>
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const UpToDate = Template.bind({});
UpToDate.args = {
export const UpToDate: Story = {
args: {
variant: ActionButtonVariant.Default,
label: 'Up to date',
value: 'Last updated 14:39'
},
};
export const ReceivingUpdates = Template.bind({});
ReceivingUpdates.args = {
export const ReceivingUpdates: Story = {
args: {
variant: ActionButtonVariant.BackgroundAction,
label: 'Receiving updates',
affixText: '75%'
},
};
export const CheckingForUpdates = Template.bind({});
CheckingForUpdates.args = {
export const CheckingForUpdates: Story = {
args: {
variant: ActionButtonVariant.BackgroundAction,
label: 'Checking for updates...',
affixText: 'Last updated 14:39'
},
};
export const PullChanges = Template.bind({});
PullChanges.args = {
export const PullChanges: Story = {
args: {
variant: ActionButtonVariant.CallToAction,
icon: IconName.ArrowDown,
label: 'Pull changes',
affixText: 'Last updates just now'
},
};
export const PushChanges = Template.bind({});
PushChanges.args = {
export const PushChanges: Story = {
args: {
variant: ActionButtonVariant.CallToAction,
icon: IconName.ArrowUp,
label: 'Push changes',
affixText: 'Last updates just now'
},
};
export const Back = Template.bind({});
Back.args = {
export const Back: Story = {
args: {
variant: ActionButtonVariant.Default,
icon: IconName.ArrowLeft,
label: 'Back',
affixText: undefined
},
};
export const ComparingBranches = Template.bind({});
ComparingBranches.args = {
export const ComparingBranches: Story = {
args: {
variant: ActionButtonVariant.Proud,
icon: IconName.ArrowLeft,
prefixText: 'Comparing',
@@ -85,4 +94,5 @@ ComparingBranches.args = {
</Container>
),
affixText: undefined
},
};

70
packages/noodl-core-ui/src/components/inputs/Checkbox/Checkbox.stories.tsx
View File

@@ -1,47 +1,53 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox, CheckboxSize } from './Checkbox';
export default {
const meta: Meta<typeof Checkbox> = {
title: 'Inputs/Checkbox',
component: Checkbox,
argTypes: {},
} as ComponentMeta<typeof Checkbox>;
const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const Selected = Template.bind({});
Selected.args = {
label: "I want cookies",
isChecked: true
};
export const Disabled = Template.bind({});
Disabled.args = {
label: "I want cookies",
isDisabled: true,
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {},
};
export const HiddenCheckbox = Template.bind({});
HiddenCheckbox.args = {
label: "I want cookies",
hasHiddenCheckbox: true,
export const Selected: Story = {
args: {
label: 'I want cookies',
isChecked: true,
},
};
export const SizeSmall = Template.bind({});
SizeSmall.args = {
label: "I want cookies",
isChecked: true,
checkboxSize: CheckboxSize.Small,
export const Disabled: Story = {
args: {
label: 'I want cookies',
isDisabled: true,
},
};
export const SizeLarge = Template.bind({});
SizeLarge.args = {
label: "I want cookies",
isChecked: true,
checkboxSize: CheckboxSize.Large,
export const HiddenCheckbox: Story = {
args: {
label: 'I want cookies',
hasHiddenCheckbox: true,
},
};
export const SizeSmall: Story = {
args: {
label: 'I want cookies',
isChecked: true,
checkboxSize: CheckboxSize.Small,
},
};
export const SizeLarge: Story = {
args: {
label: 'I want cookies',
isChecked: true,
checkboxSize: CheckboxSize.Large,
},
};

15
packages/noodl-core-ui/src/components/inputs/ExternalLink/ExternalLink.stories.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ExternalLink } from './ExternalLink';
export default {
const meta: Meta<typeof ExternalLink> = {
title: 'Inputs/External Link',
component: ExternalLink,
argTypes: {}
} as ComponentMeta<typeof ExternalLink>;
};
const Template: ComponentStory<typeof ExternalLink> = (args) => <ExternalLink {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = { children: 'I am a link' };
export const Common: Story = {
args: { children: 'I am a link' },
};

16
packages/noodl-core-ui/src/components/inputs/IconButton/IconButton.stories.tsx
View File

@@ -1,19 +1,23 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconButton } from './IconButton';
export default {
const meta: Meta<typeof IconButton> = {
title: 'Inputs/Icon Button',
component: IconButton,
argTypes: {}
} as ComponentMeta<typeof IconButton>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof IconButton> = (args) => (
const Template: Story = (args) => (
<>
<IconButton {...args} />
</>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

21
packages/noodl-core-ui/src/components/inputs/InputLabelSection/InputLabelSection.stories.tsx
View File

@@ -1,17 +1,18 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { InputLabelSection } from './InputLabelSection';
export default {
const meta: Meta<typeof InputLabelSection> = {
title: 'Inputs/Input Label Section',
component: InputLabelSection,
argTypes: {},
} as ComponentMeta<typeof InputLabelSection>;
const Template: ComponentStory<typeof InputLabelSection> = (args) => <InputLabelSection {...args} />;
export const Common = Template.bind({});
Common.args = {
label: 'Hello World',
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {
label: 'Hello World',
},
};

17
packages/noodl-core-ui/src/components/inputs/LegacyIconButton/LegacyIconButton.stories.tsx
View File

@@ -1,20 +1,23 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { LegacyIconButton } from './LegacyIconButton';
export default {
const meta: Meta<typeof LegacyIconButton> = {
title: 'Inputs/Legacy Icon Button',
component: LegacyIconButton,
argTypes: {},
} as ComponentMeta<typeof LegacyIconButton>;
};
const Template: ComponentStory<typeof LegacyIconButton> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<>
DONT USE THIS COMPONENT
<LegacyIconButton {...args} />
</>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

15
packages/noodl-core-ui/src/components/inputs/NotificationFeedbackDisplay/NotificationFeedbackDisplay.stories.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { NotificationFeedbackDisplay } from './NotificationFeedbackDisplay';
export default {
const meta: Meta<typeof NotificationFeedbackDisplay> = {
title: 'Inputs/Notification Feedback Display',
component: NotificationFeedbackDisplay,
argTypes: {},
} as ComponentMeta<typeof NotificationFeedbackDisplay>;
};
const Template: ComponentStory<typeof NotificationFeedbackDisplay> = (args) => <NotificationFeedbackDisplay {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

66
packages/noodl-core-ui/src/components/inputs/PrimaryButton/PrimaryButton.stories.tsx
View File

@@ -1,44 +1,50 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { PrimaryButton, PrimaryButtonVariant } from './PrimaryButton';
export default {
const meta: Meta<typeof PrimaryButton> = {
title: 'Inputs/Primary Button',
component: PrimaryButton,
argTypes: {}
} as ComponentMeta<typeof PrimaryButton>;
const Template: ComponentStory<typeof PrimaryButton> = (args) => <PrimaryButton {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const Primary = Template.bind({});
Primary.args = {
label: 'Click me'
argTypes: {},
};
export const Disabled = Template.bind({});
Disabled.args = {
label: 'Click me',
isDisabled: true
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {},
};
export const Muted = Template.bind({});
Muted.args = {
label: 'Click me',
variant: PrimaryButtonVariant.Muted
export const Primary: Story = {
args: {
label: 'Click me',
},
};
export const Ghost = Template.bind({});
Ghost.args = {
label: 'Click me',
variant: PrimaryButtonVariant.Ghost
export const Disabled: Story = {
args: {
label: 'Click me',
isDisabled: true,
},
};
export const Danger = Template.bind({});
Danger.args = {
label: 'Click me',
variant: PrimaryButtonVariant.Danger
export const Muted: Story = {
args: {
label: 'Click me',
variant: PrimaryButtonVariant.Muted,
},
};
export const Ghost: Story = {
args: {
label: 'Click me',
variant: PrimaryButtonVariant.Ghost,
},
};
export const Danger: Story = {
args: {
label: 'Click me',
variant: PrimaryButtonVariant.Danger,
},
};

15
packages/noodl-core-ui/src/components/inputs/SearchInput/SearchInput.stories.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { SearchInput } from './SearchInput';
export default {
const meta: Meta<typeof SearchInput> = {
title: 'Inputs/Search Input',
component: SearchInput,
argTypes: {},
} as ComponentMeta<typeof SearchInput>;
};
const Template: ComponentStory<typeof SearchInput> = (args) => <SearchInput {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

22
packages/noodl-core-ui/src/components/inputs/Select/Select.stories.tsx
View File

@@ -1,9 +1,9 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { Select } from './Select';
export default {
const meta: Meta<typeof Select> = {
title: 'Inputs/Select',
component: Select,
argTypes: {
@@ -28,18 +28,23 @@ export default {
]
}
}
} as ComponentMeta<typeof Select>;
};
const Template: ComponentStory<typeof Select> = (args) => {
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => {
const [value, setValue] = useState(null);
return <Select {...args} value={value} onChange={setValue} />;
};
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const InFlexColumn: ComponentStory<typeof Select> = (args) => (
export const InFlexColumn: Story = {
render: (args) => (
<div
style={{
display: 'flex',
@@ -54,7 +59,8 @@ export const InFlexColumn: ComponentStory<typeof Select> = (args) => (
</div>
);
export const AtBottom: ComponentStory<typeof Select> = (args) => (
export const AtBottom: Story = {
render: (args) => (
<div
style={{
display: 'flex',

21
packages/noodl-core-ui/src/components/inputs/TagButton/TagButton.stories.tsx
View File

@@ -1,17 +1,18 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { TagButton } from './TagButton';
export default {
const meta: Meta<typeof TagButton> = {
title: 'Inputs/Tag Button',
component: TagButton,
argTypes: {},
} as ComponentMeta<typeof TagButton>;
const Template: ComponentStory<typeof TagButton> = (args) => <TagButton {...args} />;
export const Common = Template.bind({});
Common.args = {
label: 'Hello World',
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {
label: 'Hello World',
},
};

27
packages/noodl-core-ui/src/components/inputs/TextArea/TextArea.stories.tsx
View File

@@ -1,38 +1,43 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { InputNotificationDisplayMode } from '@noodl-types/globalInputTypes';
import { FeedbackType } from '@noodl-constants/FeedbackType';
import { TextArea } from './TextArea';
export default {
const meta: Meta<typeof TextArea> = {
title: 'Inputs/Text Area',
component: TextArea,
argTypes: {}
} as ComponentMeta<typeof TextArea>;
};
const Template: ComponentStory<typeof TextArea> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<TextArea {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const ErrorMessage = Template.bind({});
ErrorMessage.args = {
export const ErrorMessage: Story = {
args: {
value: 'I got the error',
notification: {
type: FeedbackType.Danger,
message: 'I am error!',
displayMode: InputNotificationDisplayMode.Stay
}
},
};
export const BigMessage = Template.bind({});
BigMessage.args = {
export const BigMessage: Story = {
args: {
value: 'Hello\nHello\nHello\nHello\n',
isResizeDisabled: true
},
};

55
packages/noodl-core-ui/src/components/inputs/TextButton/TextButton.stories.tsx
View File

@@ -1,73 +1,86 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { TextButton } from './TextButton';
import { FeedbackType } from '@noodl-constants/FeedbackType';
import { TextType } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof TextButton> = {
title: 'Inputs/Text Button',
component: TextButton,
argTypes: {},
} as ComponentMeta<typeof TextButton>;
};
const Template: ComponentStory<typeof TextButton> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<TextButton {...args} />
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const Submit = Template.bind({});
Submit.args = {
export const Submit: Story = {
args: {
label: 'Submit',
},
};
//
// variant: FeedbackType
//
export const Danger = Template.bind({});
Danger.args = {
export const Danger: Story = {
args: {
label: 'Submit',
variant: FeedbackType.Danger,
},
};
export const Notice = Template.bind({});
Notice.args = {
export const Notice: Story = {
args: {
label: 'Submit',
variant: FeedbackType.Notice,
},
};
export const Success = Template.bind({});
Success.args = {
export const Success: Story = {
args: {
label: 'Submit',
variant: FeedbackType.Success,
},
};
//
// variant: TextType
//
export const DefaultContrast = Template.bind({});
DefaultContrast.args = {
export const DefaultContrast: Story = {
args: {
label: 'Submit',
variant: TextType.DefaultContrast,
},
};
export const Disabled = Template.bind({});
Disabled.args = {
export const Disabled: Story = {
args: {
label: 'Submit',
variant: TextType.Disabled,
},
};
export const Proud = Template.bind({});
export const Proud: Story = {
args: {},
};
Disabled.args = {
label: 'Submit',
variant: TextType.Proud,
};
export const Shy = Template.bind({});
export const Shy: Story = {
args: {},
};
Disabled.args = {
label: 'Submit',
variant: TextType.Shy,

45
packages/noodl-core-ui/src/components/inputs/TextInput/TextInput.stories.tsx
View File

@@ -1,5 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { InputNotificationDisplayMode } from '@noodl-types/globalInputTypes';
import { FeedbackType } from '@noodl-constants/FeedbackType';
@@ -11,36 +10,41 @@ import { VStack } from '@noodl-core-ui/components/layout/Stack';
import { TextInput } from './TextInput';
export default {
const meta: Meta<typeof TextInput> = {
title: 'Inputs/Text Input',
component: TextInput,
argTypes: {
value: { summary: 'string' }
}
} as ComponentMeta<typeof TextInput>;
const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const CopyMe = Template.bind({});
CopyMe.args = {
value: 'Copy Me',
isCopyable: true
};
export const ErrorMessage = Template.bind({});
ErrorMessage.args = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {},
};
export const CopyMe: Story = {
args: {
value: 'Copy Me',
isCopyable: true
},
};
export const ErrorMessage: Story = {
args: {
value: 'I got the error',
notification: {
type: FeedbackType.Danger,
message: 'I am error!',
displayMode: InputNotificationDisplayMode.Stay
}
},
};
export const SuffixText: ComponentStory<typeof TextInput> = (args) => (
export const SuffixText: Story = {
render: (args) => (
<div>
<Box hasBottomSpacing>
<TextInput placeholder="placeholder" value="" suffix=".noodl.net" />
@@ -51,15 +55,16 @@ export const SuffixText: ComponentStory<typeof TextInput> = (args) => (
</div>
);
export const SuffixSlotAfter = Template.bind({});
SuffixSlotAfter.args = {
export const SuffixSlotAfter: Story = {
args: {
value: 'example',
suffix: '.noodl.net',
isCopyable: true,
slotAfterInput: <IconButton icon={IconName.Bug} />
},
};
const StyleTestTemplate: ComponentStory<typeof TextInput> = (args) => (
const StyleTestTemplate: Story = (args) => (
<div>
<Box hasBottomSpacing>
<TextInput {...args} />

31
packages/noodl-core-ui/src/components/inputs/ToggleSwitch/ToggleSwitch.stories.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ToggleSwitch } from './ToggleSwitch';
export default {
title: 'Inputs/Toggle Switch',
component: ToggleSwitch,
argTypes: {}
} as ComponentMeta<typeof ToggleSwitch>;
const Template: ComponentStory<typeof ToggleSwitch> = (args) => <ToggleSwitch {...args} />;
export const Common = Template.bind({});
Common.args = {};
import type { Meta, StoryObj } from '@storybook/react';
import { ToggleSwitch } from './ToggleSwitch';
const meta: Meta<typeof ToggleSwitch> = {
title: 'Inputs/Toggle Switch',
component: ToggleSwitch,
argTypes: {},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {},
};

16
packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.stories.tsx
View File

@@ -1,15 +1,18 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { BaseDialog } from './BaseDialog';
export default {
const meta: Meta<typeof BaseDialog> = {
title: 'Layout/Base Dialog',
component: BaseDialog,
argTypes: {}
} as ComponentMeta<typeof BaseDialog>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof BaseDialog> = (args) => {
const Template: Story = (args) => {
const [isDialogVisible, setIsDialogVisible] = useState(false);
const [reload, setReload] = useState(Date.now());
return (
@@ -31,5 +34,6 @@ const Template: ComponentStory<typeof BaseDialog> = (args) => {
);
};
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

17
packages/noodl-core-ui/src/components/layout/Box/Box.stories.tsx
View File

@@ -1,16 +1,18 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Box } from './Box';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof Box> = {
title: 'Layout/Box',
component: Box,
argTypes: {}
} as ComponentMeta<typeof Box>;
};
const Template: ComponentStory<typeof Box> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<Box {...args}>
<Text>Text</Text>
@@ -18,5 +20,6 @@ const Template: ComponentStory<typeof Box> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

17
packages/noodl-core-ui/src/components/layout/Carousel/Carousel.stories.tsx
View File

@@ -1,5 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { Box } from '@noodl-core-ui/components/layout/Box';
@@ -48,20 +47,23 @@ function NodePickerSlider({ subtitle, title, text, action }: NodePickerSliderPro
);
}
export default {
const meta: Meta<typeof Carousel> = {
title: 'Layout/Carousel',
component: Carousel,
argTypes: {}
} as ComponentMeta<typeof Carousel>;
};
const Template: ComponentStory<typeof Carousel> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: '430px' }}>
<Carousel {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
items: [
{
slot: (
@@ -86,4 +88,5 @@ Common.args = {
{ slot: <>Test 3</> }
],
indicator: CarouselIndicatorDot
},
};

15
packages/noodl-core-ui/src/components/layout/CarouselIndicatorDot/CarouselIndicatorDot.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CarouselIndicatorDot } from './CarouselIndicatorDot';
export default {
const meta: Meta<typeof CarouselIndicatorDot> = {
title: 'Layout/Carousel Indicator Dot',
component: CarouselIndicatorDot,
argTypes: {}
} as ComponentMeta<typeof CarouselIndicatorDot>;
};
const Template: ComponentStory<typeof CarouselIndicatorDot> = (args) => <CarouselIndicatorDot {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

15
packages/noodl-core-ui/src/components/layout/Center/Center.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Center } from './Center';
export default {
const meta: Meta<typeof Center> = {
title: 'Layout/Center',
component: Center,
argTypes: {}
} as ComponentMeta<typeof Center>;
};
const Template: ComponentStory<typeof Center> = (args) => <Center {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

75
packages/noodl-core-ui/src/components/layout/Collapsible/Collapsible.stories.tsx
View File

@@ -1,44 +1,47 @@
import { useState } from '@storybook/addons';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { Collapsible } from '@noodl-core-ui/components/layout/Collapsible/Collapsible';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof Collapsible> = {
title: 'Layout/Collapsible',
argTypes: {}
} as ComponentMeta<typeof Collapsible>;
const Template: ComponentStory<typeof Collapsible> = (args) => {
const [showMore, setShowMore] = useState(false);
return (
<div style={{ width: 280 }}>
<PrimaryButton
variant={PrimaryButtonVariant.Muted}
size={PrimaryButtonSize.Small}
label="More info"
onClick={() => setShowMore((prev) => !prev)}
hasBottomSpacing
/>
<Collapsible isCollapsed={showMore}>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit ante, imperdiet quis placerat nec, porta a
erat. Nam dapibus dictum sagittis. Vivamus ut eros et sapien fringilla pretium a quis lectus. Donec suscipit,
ipsum quis mollis varius, ante velit tempor augue, ac consequat risus massa eget sem. Aenean eu egestas lorem.
Praesent quis justo dictum, consectetur enim nec, rutrum tortor. Donec elementum condimentum lacus ac
pellentesque. Nam purus sem, fringilla finibus sapien a, ultrices aliquam ligula. Vestibulum dictum enim nec
elit rhoncus, vel sodales ante condimentum. Pellentesque volutpat lectus eget ipsum vehicula, vel vestibulum
metus fringilla. Nulla urna orci, fermentum non fermentum id, tempor sit amet ex. Quisque elit neque, tempor
vel congue vehicula, hendrerit vitae metus. Maecenas dictum auctor neque in venenatis. Etiam faucibus eleifend
urna, non tempor felis eleifend a. Suspendisse fermentum odio quis tristique gravida. Nulla facilisi.
</Text>
</Collapsible>
</div>
);
component: Collapsible,
argTypes: {},
};
export const Common = Template.bind({});
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
render: () => {
const [showMore, setShowMore] = useState(false);
return (
<div style={{ width: 280 }}>
<PrimaryButton
variant={PrimaryButtonVariant.Muted}
size={PrimaryButtonSize.Small}
label="More info"
onClick={() => setShowMore((prev) => !prev)}
hasBottomSpacing
/>
<Collapsible isCollapsed={showMore}>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit ante, imperdiet quis placerat nec, porta a
erat. Nam dapibus dictum sagittis. Vivamus ut eros et sapien fringilla pretium a quis lectus. Donec suscipit,
ipsum quis mollis varius, ante velit tempor augue, ac consequat risus massa eget sem. Aenean eu egestas lorem.
Praesent quis justo dictum, consectetur enim nec, rutrum tortor. Donec elementum condimentum lacus ac
pellentesque. Nam purus sem, fringilla finibus sapien a, ultrices aliquam ligula. Vestibulum dictum enim nec
elit rhoncus, vel sodales ante condimentum. Pellentesque volutpat lectus eget ipsum vehicula, vel vestibulum
metus fringilla. Nulla urna orci, fermentum non fermentum id, tempor sit amet ex. Quisque elit neque, tempor
vel congue vehicula, hendrerit vitae metus. Maecenas dictum auctor neque in venenatis. Etiam faucibus eleifend
urna, non tempor felis eleifend a. Suspendisse fermentum odio quis tristique gravida. Nulla facilisi.
</Text>
</Collapsible>
</div>
);
},
};

27
packages/noodl-core-ui/src/components/layout/ConditionalContainer/ConditionalContainer.stories.tsx
View File

@@ -1,11 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
export default {
title: 'Layout/Conditional Container',
argTypes: {}
};
const Template = (args) => <div style={{ width: 280 }}>TODO: component exists, write stories</div>;
export const Common = Template.bind({});
import type { Meta, StoryObj } from '@storybook/react';
import { ConditionalContainer } from './ConditionalContainer';
const meta: Meta<typeof ConditionalContainer> = {
title: 'Layout/Conditional Container',
component: ConditionalContainer,
argTypes: {},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
render: () => <div style={{ width: 280 }}>TODO: component exists, write stories</div>,
};

17
packages/noodl-core-ui/src/components/layout/Container/Container.stories.tsx
View File

@@ -1,23 +1,26 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Container, ContainerDirection } from './Container';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof Container> = {
title: 'Layout/Container', // Layout scaffolding ?
component: Container,
argTypes: {}
} as ComponentMeta<typeof Container>;
};
const Template: ComponentStory<typeof Container> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<Container {...args}></Container>
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const SpaceBetweenHorizontal = () => (
/* Showcase how it is when the size is set on the parent */

15
packages/noodl-core-ui/src/components/layout/DocumentTopToolbar/DocumentTopToolbar.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { DocumentTopToolbar } from './DocumentTopToolbar';
export default {
const meta: Meta<typeof DocumentTopToolbar> = {
title: 'Layout/DocumentTopToolbar',
component: DocumentTopToolbar,
argTypes: {}
} as ComponentMeta<typeof DocumentTopToolbar>;
};
const Template: ComponentStory<typeof DocumentTopToolbar> = (args) => <DocumentTopToolbar {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

27
packages/noodl-core-ui/src/components/layout/FrameDivider/FrameDivider.stories.tsx
View File

@@ -1,16 +1,19 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { FrameDivider, FrameDividerOwner } from './FrameDivider';
import { TestView } from '@noodl-core-ui/components/layout/TestView/TestView';
export default {
const meta: Meta<typeof FrameDivider> = {
title: 'Layout/Frame Divider',
component: FrameDivider,
argTypes: {}
} as ComponentMeta<typeof FrameDivider>;
};
const Template: ComponentStory<typeof FrameDivider> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 1280, height: 800, background: 'lightgray' }}>
<FrameDivider
{...args}
@@ -20,17 +23,19 @@ const Template: ComponentStory<typeof FrameDivider> = (args) => (
</div>
);
export const Horizontal = Template.bind({});
Horizontal.args = {
export const Horizontal: Story = {
args: {
horizontal: true
},
};
export const Vertical = Template.bind({});
Vertical.args = {
export const Vertical: Story = {
args: {
horizontal: false
},
};
export const Editor3Horizontal: ComponentStory<typeof FrameDivider> = () => {
export const Editor3Horizontal: Story = () => {
const [firstSize, setFirstSize] = useState(343);
const [secondSize, setSecondSize] = useState(343);
@@ -57,7 +62,7 @@ export const Editor3Horizontal: ComponentStory<typeof FrameDivider> = () => {
</div>
);
};
export const Editor3Vertical: ComponentStory<typeof FrameDivider> = () => {
export const Editor3Vertical: Story = () => {
const [firstSize, setFirstSize] = useState(300);
const [secondSize, setSecondSize] = useState(300);
@@ -84,7 +89,7 @@ export const Editor3Vertical: ComponentStory<typeof FrameDivider> = () => {
);
};
export const Editor2Horizontal1Vertical: ComponentStory<typeof FrameDivider> = () => {
export const Editor2Horizontal1Vertical: Story = () => {
const [firstSize, setFirstSize] = useState(300);
const [secondSize, setSecondSize] = useState(300);

27
packages/noodl-core-ui/src/components/layout/ListItem/ListItem.stories.tsx
View File

@@ -1,37 +1,42 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ListItem } from './ListItem';
import { Icon, IconName } from '@noodl-core-ui/components/common/Icon';
export default {
const meta: Meta<typeof ListItem> = {
title: 'Layout/List Item',
component: ListItem,
argTypes: {}
} as ComponentMeta<typeof ListItem>;
};
const Template: ComponentStory<typeof ListItem> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<ListItem {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
icon: IconName.Home,
text: 'Home'
},
};
export const isDisabled = Template.bind({});
isDisabled.args = {
export const isDisabled: Story = {
args: {
icon: IconName.Home,
text: 'Home',
isDisabled: true
},
};
export const withAffix = Template.bind({});
withAffix.args = {
export const withAffix: Story = {
args: {
icon: IconName.Home,
text: 'Home',
affix: <Icon icon={IconName.ImportDown} />
},
};

22
packages/noodl-core-ui/src/components/layout/ListItemMenu/ListItemMenu.stories.tsx
View File

@@ -1,24 +1,26 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ListItemMenu } from './ListItemMenu';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { ListItemVariant } from '@noodl-core-ui/components/layout/ListItem/ListItem';
export default {
const meta: Meta<typeof ListItemMenu> = {
title: 'Layout/List Item Menu',
component: ListItemMenu,
argTypes: {}
} as ComponentMeta<typeof ListItemMenu>;
};
const Template: ComponentStory<typeof ListItemMenu> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<ListItemMenu {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
icon: IconName.Home,
text: 'Home',
menuItems: [
@@ -32,13 +34,15 @@ Common.args = {
label: 'Delete'
}
]
},
};
export const ShyWithIcon = Template.bind({});
ShyWithIcon.args = {
export const ShyWithIcon: Story = {
args: {
variant: ListItemVariant.Shy,
icon: IconName.Home,
text: 'Home',
menuIcon: IconName.ImportDown,
menuItems: []
},
};

77
packages/noodl-core-ui/src/components/layout/Modal/Modal.stories.tsx
View File

@@ -1,42 +1,59 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Modal } from '@noodl-core-ui/components/layout/Modal/Modal';
export default {
const meta: Meta<typeof Modal> = {
title: 'Layout/Modal',
argTypes: {}
component: Modal,
argTypes: {},
decorators: [
(Story) => (
<div style={{ width: 280 }}>
<Story />
</div>
),
],
};
const Template = (args) => (
<div style={{ width: 280 }}>
<Modal isVisible {...args}>
Content in a Modal
</Modal>
</div>
);
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
export const Header = Template.bind({});
Header.args = {
strapline: 'strapline',
title: 'title',
subtitle: 'subtitle',
hasHeaderDivider: true
export const Common: Story = {
args: {
isVisible: true,
children: 'Content in a Modal',
},
};
export const Footer = Template.bind({});
Footer.args = {
footerSlot: <>Content in Footer</>,
hasFooterDivider: true
export const Header: Story = {
args: {
isVisible: true,
children: 'Content in a Modal',
strapline: 'strapline',
title: 'title',
subtitle: 'subtitle',
hasHeaderDivider: true,
},
};
export const Full = Template.bind({});
Full.args = {
strapline: 'strapline',
title: 'title',
subtitle: 'subtitle',
hasHeaderDivider: true,
footerSlot: <>Content in Footer</>,
hasFooterDivider: true
export const Footer: Story = {
args: {
isVisible: true,
children: 'Content in a Modal',
footerSlot: <>Content in Footer</>,
hasFooterDivider: true,
},
};
export const Full: Story = {
args: {
isVisible: true,
children: 'Content in a Modal',
strapline: 'strapline',
title: 'title',
subtitle: 'subtitle',
hasHeaderDivider: true,
footerSlot: <>Content in Footer</>,
hasFooterDivider: true,
},
};

15
packages/noodl-core-ui/src/components/layout/ModalSection/ModalSection.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ModalSection } from './ModalSection';
export default {
const meta: Meta<typeof ModalSection> = {
title: 'Layout/Modal Section',
component: ModalSection,
argTypes: {}
} as ComponentMeta<typeof ModalSection>;
};
const Template: ComponentStory<typeof ModalSection> = (args) => <ModalSection {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

21
packages/noodl-core-ui/src/components/layout/Portal/Portal.stories.tsx
View File

@@ -1,17 +1,18 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Portal } from './Portal';
export default {
const meta: Meta<typeof Portal> = {
title: 'Layout/Portal',
component: Portal,
argTypes: {}
} as ComponentMeta<typeof Portal>;
const Template: ComponentStory<typeof Portal> = (args) => <Portal {...args} />;
export const Common = Template.bind({});
Common.args = {
portalRoot: document.querySelector('.dialog-layer-portal-target')
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {
portalRoot: document.querySelector('.dialog-layer-portal-target')
},
};

15
packages/noodl-core-ui/src/components/layout/ScrollArea/ScrollArea.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ScrollArea } from './ScrollArea';
export default {
const meta: Meta<typeof ScrollArea> = {
title: 'Layout/ScrollArea',
component: ScrollArea,
argTypes: {}
} as ComponentMeta<typeof ScrollArea>;
};
const Template: ComponentStory<typeof ScrollArea> = (args) => <ScrollArea {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

19
packages/noodl-core-ui/src/components/layout/Stack/HStack.stories.tsx
View File

@@ -1,26 +1,29 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Text } from '@noodl-core-ui/components/typography/Text';
import { HStack } from './Stack';
export default {
const meta: Meta<typeof HStack> = {
title: 'Layout/HStack',
component: HStack,
argTypes: {}
} as ComponentMeta<typeof HStack>;
};
const Template: ComponentStory<typeof HStack> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<HStack {...args}></HStack>
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
const ListTemplate: ComponentStory<typeof HStack> = (args) => (
const ListTemplate: Story = (args) => (
/* Showcase how it is when the size is set on the parent */
<div style={{ width: 500, height: 500 }}>
<HStack {...args}>

19
packages/noodl-core-ui/src/components/layout/Stack/VStack.stories.tsx
View File

@@ -1,26 +1,29 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Text } from '@noodl-core-ui/components/typography/Text';
import { VStack } from '../Stack/Stack';
export default {
const meta: Meta<typeof VStack> = {
title: 'Layout/VStack',
component: VStack,
argTypes: {}
} as ComponentMeta<typeof VStack>;
};
const Template: ComponentStory<typeof VStack> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<VStack {...args}></VStack>
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
const ListTemplate: ComponentStory<typeof VStack> = (args) => (
const ListTemplate: Story = (args) => (
/* Showcase how it is when the size is set on the parent */
<div style={{ width: 500, height: 500 }}>
<VStack {...args}>

33
packages/noodl-core-ui/src/components/layout/Tabs/Tabs.stories.tsx
View File

@@ -1,23 +1,26 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Tabs, TabsVariant } from './Tabs';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof Tabs> = {
title: 'Layout/Tabs',
component: Tabs,
argTypes: {}
} as ComponentMeta<typeof Tabs>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof Tabs> = (args) => (
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<Tabs {...args}></Tabs>
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
tabs: [
{
label: 'First tab',
@@ -28,10 +31,11 @@ Common.args = {
content: 'Second tab content!'
}
]
},
};
export const VariantText = Template.bind({});
VariantText.args = {
export const VariantText: Story = {
args: {
variant: TabsVariant.Text,
tabs: [
{
@@ -43,10 +47,11 @@ VariantText.args = {
content: <Text>Second tab content!</Text>
}
]
},
};
export const VariantSidebar = Template.bind({});
VariantSidebar.args = {
export const VariantSidebar: Story = {
args: {
variant: TabsVariant.Sidebar,
tabs: [
{
@@ -58,10 +63,11 @@ VariantSidebar.args = {
content: <Text>Second tab content!</Text>
}
]
},
};
export const SettingTabsWithId = Template.bind({});
SettingTabsWithId.args = {
export const SettingTabsWithId: Story = {
args: {
tabs: [
{
label: 'Same label',
@@ -74,4 +80,5 @@ SettingTabsWithId.args = {
id: 2
}
]
};
},
};

15
packages/noodl-core-ui/src/components/layout/TestView/TestView.stories.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { TestView } from './TestView';
export default {
const meta: Meta<typeof TestView> = {
title: 'Layout/TestView',
component: TestView,
argTypes: {}
} as ComponentMeta<typeof TestView>;
};
const Template: ComponentStory<typeof TestView> = (args) => <TestView {...args} />
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

20
packages/noodl-core-ui/src/components/popups/ConfirmationDialog/ConfirmationDialog.stories.tsx
View File

@@ -1,18 +1,21 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ConfirmationDialog } from './ConfirmationDialog';
import { Text } from '@noodl-core-ui/components/typography/Text';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { useConfirmationDialog } from '@noodl-core-ui/components/popups/ConfirmationDialog/ConfirmationDialog.hooks';
export default {
const meta: Meta<typeof ConfirmationDialog> = {
title: 'Popups/Confirmation Dialog',
component: ConfirmationDialog,
argTypes: {}
} as ComponentMeta<typeof ConfirmationDialog>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof ConfirmationDialog> = (args) => {
const Template: Story = (args) => {
const [isDialogVisible, setIsDialogVisible] = useState(args.isVisible);
return (
@@ -28,10 +31,11 @@ const Template: ComponentStory<typeof ConfirmationDialog> = (args) => {
);
};
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};
export const Usage: ComponentStory<typeof ConfirmationDialog> = (args) => {
export const Usage: Story = (args) => {
const [Dialog, handleConfirmation] = useConfirmationDialog({
title: args.title || 'Please confirm your actions',
message: args.message || 'Do you want to see an alert after this popup has been closed?',
@@ -79,4 +83,4 @@ function onClick() {
<PrimaryButton label="Click to trigger dialog" onClick={onClick} />
</>
);
};
};

18
packages/noodl-core-ui/src/components/popups/ContextMenu/ContextMenu.stories.tsx
View File

@@ -1,25 +1,28 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import {
ContextMenu,
ContextMenuProps
} from '@noodl-core-ui/components/popups/ContextMenu/ContextMenu';
import { IconName } from '@noodl-core-ui/components/common/Icon';
export default {
const meta: Meta<typeof ContextMenu> = {
title: 'Popups/Context Menu',
component: ContextMenu,
argTypes: {}
} as ComponentMeta<typeof ContextMenu>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof ContextMenu> = (args: ContextMenuProps) => (
const Template: Story = (args: ContextMenuProps) => (
<div style={{ width: '100vw', height: '100vh' }}>
<ContextMenu {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
menuItems: [
{
label: 'Action',
@@ -45,4 +48,5 @@ Common.args = {
endSlot: 'Subtitle goes here'
}
]
};
},
};

17
packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.stories.tsx
View File

@@ -1,24 +1,26 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { MenuDialog, MenuDialogWidth } from './MenuDialog';
export default {
const meta: Meta<typeof MenuDialog> = {
title: 'Popups/Menu Dialog',
component: MenuDialog,
argTypes: {}
} as ComponentMeta<typeof MenuDialog>;
};
const Template: ComponentStory<typeof MenuDialog> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div>
<MenuDialog {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
title: 'Preview layout',
width: MenuDialogWidth.Small,
isVisible: true,
@@ -47,4 +49,5 @@ Common.args = {
tooltipShowAfterMs: 300
}
]
},
};

23
packages/noodl-core-ui/src/components/popups/PopupSection/PopupSection.stories.tsx
View File

@@ -1,16 +1,19 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { PopupSection } from './PopupSection';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof PopupSection> = {
title: 'Popups/Popup Section',
component: PopupSection,
argTypes: {}
} as ComponentMeta<typeof PopupSection>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof PopupSection> = (args) => (
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PopupSection {...args}>
<Text>
@@ -23,13 +26,15 @@ const Template: ComponentStory<typeof PopupSection> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
title: 'Cloud services'
},
};
export const WithContent = Template.bind({});
WithContent.args = {
export const WithContent: Story = {
args: {
content:
'Create a new backend. Each backend is isolated so you can create one for development, testing and production, or for different locales.'
};
},
};

22
packages/noodl-core-ui/src/components/popups/PopupToolbar/PopupToolbar.stories.tsx
View File

@@ -1,23 +1,25 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { PopupToolbar, PopupToolbarProps } from '@noodl-core-ui/components/popups/PopupToolbar/PopupToolbar';
export default {
const meta: Meta<typeof PopupToolbar> = {
title: 'Popups/PopupToolbar',
component: PopupToolbar,
argTypes: {}
} as ComponentMeta<typeof PopupToolbar>;
};
const Template: ComponentStory<typeof PopupToolbar> = (args: PopupToolbarProps) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args: PopupToolbarProps) => (
<div style={{ width: '100vw', height: '100vh' }}>
<PopupToolbar {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
menuItems: [
{
tooltip: 'Action',
@@ -53,10 +55,11 @@ Common.args = {
endSlot: 'Subtitle goes here'
}
]
},
};
export const NoContextMenu = Template.bind({});
NoContextMenu.args = {
export const NoContextMenu: Story = {
args: {
menuItems: [
{
tooltip: 'Action',
@@ -67,4 +70,5 @@ NoContextMenu.args = {
icon: IconName.Plus
}
]
},
};

16
packages/noodl-core-ui/src/components/popups/Tooltip/Tooltip.stories.tsx
View File

@@ -1,19 +1,22 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Tooltip } from './Tooltip';
export default {
const meta: Meta<typeof Tooltip> = {
title: 'Popups/Tooltip',
component: Tooltip,
argTypes: {}
} as ComponentMeta<typeof Tooltip>;
};
export default meta;
type Story = StoryObj<typeof meta>;
function HoverTarget() {
return <div style={{ padding: 10, backgroundColor: 'lightcoral' }}>HOVER ME</div>;
}
const Template: ComponentStory<typeof Tooltip> = (args) => (
const Template: Story = (args) => (
<div
style={{
height: 'calc(100vh - 35px)',
@@ -63,5 +66,6 @@ const Template: ComponentStory<typeof Tooltip> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

22
packages/noodl-core-ui/src/components/property-panel/PropertyPanelButton/PropertyPanelButton.stories.tsx
View File

@@ -1,31 +1,35 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelButton } from '@noodl-core-ui/components/property-panel/PropertyPanelButton';
export default {
const meta: Meta<typeof PropertyPanelButton> = {
title: 'Property Panel/Button',
component: PropertyPanelButton,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelButton>;
};
const Template: ComponentStory<typeof PropertyPanelButton> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelButton {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
properties: {
buttonLabel: 'Verify API Key'
}
},
};
export const Primary = Template.bind({});
Primary.args = {
export const Primary: Story = {
args: {
properties: {
isPrimary: true,
buttonLabel: 'Verify API Key'
}
},
};

17
packages/noodl-core-ui/src/components/property-panel/PropertyPanelCheckbox/PropertyPanelCheckbox.stories.tsx
View File

@@ -1,19 +1,22 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelCheckbox } from '@noodl-core-ui/components/property-panel/PropertyPanelCheckbox';
export default {
const meta: Meta<typeof PropertyPanelCheckbox> = {
title: 'Property Panel/Checkbox',
component: PropertyPanelCheckbox,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelCheckbox>;
};
const Template: ComponentStory<typeof PropertyPanelCheckbox> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelCheckbox {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

61
packages/noodl-core-ui/src/components/property-panel/PropertyPanelInput/PropertyPanelInput.stories.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import {
PropertyPanelInput,
@@ -10,13 +10,16 @@ import { ReactComponent as AlignLeftIcon } from '../../../assets/icons/align-lef
import { ReactComponent as AlignCenterIcon } from '../../../assets/icons/align-center.svg';
import { ReactComponent as AlignRightcon } from '../../../assets/icons/align-right.svg';
export default {
const meta: Meta<typeof PropertyPanelInput> = {
title: 'Property Panel/# Generic',
component: PropertyPanelInput,
argTypes: {},
} as ComponentMeta<typeof PropertyPanelInput>;
};
const Template: ComponentStory<typeof PropertyPanelInput> = (args) => {
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => {
const [value, setValue] = useState(args.value || '');
return (
@@ -33,30 +36,34 @@ const Template: ComponentStory<typeof PropertyPanelInput> = (args) => {
);
};
export const Common = Template.bind({});
Common.args = { label: 'Label' };
export const Common: Story = {
args: { label: 'Label' },
};
export const Text = Template.bind({});
Text.args = {
export const Text: Story = {
args: {
inputType: PropertyPanelInputType.Text,
label: 'Text',
},
};
export const Number = Template.bind({});
Number.args = {
export const Number: Story = {
args: {
inputType: PropertyPanelInputType.Number,
label: 'Number',
},
};
export const LengthUnit = Template.bind({});
LengthUnit.args = {
export const LengthUnit: Story = {
args: {
inputType: PropertyPanelInputType.LengthUnit,
label: 'Length unit',
value: '200px',
},
};
export const Slider = Template.bind({});
Slider.args = {
export const Slider: Story = {
args: {
inputType: PropertyPanelInputType.Slider,
label: 'Slider',
value: 50,
@@ -65,10 +72,11 @@ Slider.args = {
max: 90,
step: 5,
},
},
};
export const Select = Template.bind({});
Select.args = {
export const Select: Story = {
args: {
inputType: PropertyPanelInputType.Select,
label: 'Select',
value: 'first',
@@ -89,10 +97,11 @@ Select.args = {
},
],
},
},
};
export const TextRadio = Template.bind({});
TextRadio.args = {
export const TextRadio: Story = {
args: {
inputType: PropertyPanelInputType.TextRadio,
label: 'Text radio',
value: 'one',
@@ -113,10 +122,11 @@ TextRadio.args = {
},
],
},
},
};
export const IconRadio = Template.bind({});
IconRadio.args = {
export const IconRadio: Story = {
args: {
inputType: PropertyPanelInputType.IconRadio,
label: 'Icon radio',
value: 'left',
@@ -137,21 +147,24 @@ IconRadio.args = {
},
],
},
},
};
export const Checkbox = Template.bind({});
Checkbox.args = {
export const Checkbox: Story = {
args: {
inputType: PropertyPanelInputType.Checkbox,
label: 'Checkbox',
value: true,
},
};
export const Button = Template.bind({});
Button.args = {
export const Button: Story = {
args: {
inputType: PropertyPanelInputType.Button,
label: 'Button',
properties: {
buttonLabel: 'Click me',
onClick: () => alert('hello'),
},
},
};

16
packages/noodl-core-ui/src/components/property-panel/PropertyPanelMarginPadding/PropertyPanelMarginPadding.stories.tsx
View File

@@ -1,18 +1,21 @@
import { useEffect } from '@storybook/addons';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import { PropertyPanelSection } from '@noodl-core-ui/components/property-panel/PropertyPanelSection';
import { PropertyPanelMarginPadding } from './PropertyPanelMarginPadding';
export default {
const meta: Meta<typeof PropertyPanelMarginPadding> = {
title: 'Property Panel/Margin Padding',
component: PropertyPanelMarginPadding,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelMarginPadding>;
};
const Template: ComponentStory<typeof PropertyPanelMarginPadding> = (args) => {
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => {
const [values, setValues] = useState({
padding: { top: '10px', bottom: '10px', left: '10px', right: '10px' },
margin: { top: '10px', bottom: '10px', left: '10px', right: '10px' }
@@ -82,5 +85,6 @@ const Template: ComponentStory<typeof PropertyPanelMarginPadding> = (args) => {
);
};
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

17
packages/noodl-core-ui/src/components/property-panel/PropertyPanelNumberInput/PropertyPanelNumberInput.stories.tsx
View File

@@ -1,19 +1,22 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelNumberInput } from './PropertyPanelNumberInput';
export default {
const meta: Meta<typeof PropertyPanelNumberInput> = {
title: 'Property Panel/Number',
component: PropertyPanelNumberInput,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelNumberInput>;
};
const Template: ComponentStory<typeof PropertyPanelNumberInput> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelNumberInput {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

17
packages/noodl-core-ui/src/components/property-panel/PropertyPanelPasswordInput/PropertyPanelPasswordInput.stories.tsx
View File

@@ -1,21 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelPasswordInput } from './PropertyPanelPasswordInput';
export default {
const meta: Meta<typeof PropertyPanelPasswordInput> = {
title: 'Property Panel/Password',
component: PropertyPanelPasswordInput,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelPasswordInput>;
};
const Template: ComponentStory<typeof PropertyPanelPasswordInput> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelPasswordInput {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
value: 'Hello World'
},
};

16
packages/noodl-core-ui/src/components/property-panel/PropertyPanelSection/PropertyPanelSection.stories.tsx
View File

@@ -1,15 +1,19 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { PropertyPanelSection } from './PropertyPanelSection';
export default {
const meta: Meta<typeof PropertyPanelSection> = {
title: 'Property Panel/Property Panel Section',
component: PropertyPanelSection,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelSection>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof PropertyPanelSection> = (args) => <PropertyPanelSection {...args} />;
export const Common = Template.bind({});
Common.args = { title: 'Section title' };
export const Common: Story = {
args: { title: 'Section title' },
};

22
packages/noodl-core-ui/src/components/property-panel/PropertyPanelSelectInput/PropertyPanelSelectInput.stories.tsx
View File

@@ -1,22 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelSelectInput } from './PropertyPanelSelectInput';
export default {
const meta: Meta<typeof PropertyPanelSelectInput> = {
title: 'Property Panel/Select',
component: PropertyPanelSelectInput,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelSelectInput>;
};
const Template: ComponentStory<typeof PropertyPanelSelectInput> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelSelectInput {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
value: 'disabled',
properties: {
options: [
@@ -25,10 +27,11 @@ Common.args = {
{ label: 'Full Beta (gpt-4)', value: 'full-beta' }
]
}
},
};
export const hasSmallText = Template.bind({});
hasSmallText.args = {
export const hasSmallText: Story = {
args: {
value: 'disabled',
properties: {
options: [
@@ -38,4 +41,5 @@ hasSmallText.args = {
]
},
hasSmallText: true
},
};

17
packages/noodl-core-ui/src/components/property-panel/PropertyPanelTextInput/PropertyPanelTextInput.stories.tsx
View File

@@ -1,21 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelTextInput } from './PropertyPanelTextInput';
export default {
const meta: Meta<typeof PropertyPanelTextInput> = {
title: 'Property Panel/Text',
component: PropertyPanelTextInput,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelTextInput>;
};
const Template: ComponentStory<typeof PropertyPanelTextInput> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelTextInput {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
value: 'Hello World'
},
};

17
packages/noodl-core-ui/src/components/property-panel/PropertyPanelTextRadioInput/PropertyPanelTextRadioInput.stories.tsx
View File

@@ -1,22 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PropertyPanelTextRadioInput } from './PropertyPanelTextRadioInput';
export default {
const meta: Meta<typeof PropertyPanelTextRadioInput> = {
title: 'Property Panel/Radio',
component: PropertyPanelTextRadioInput,
argTypes: {}
} as ComponentMeta<typeof PropertyPanelTextRadioInput>;
};
const Template: ComponentStory<typeof PropertyPanelTextRadioInput> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PropertyPanelTextRadioInput {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
value: 'one',
properties: {
options: [
@@ -35,4 +37,5 @@ Common.args = {
}
]
}
},
};

23
packages/noodl-core-ui/src/components/sidebar/BasePanel/BasePanel.stories.tsx
View File

@@ -1,28 +1,33 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { BasePanel } from './BasePanel';
export default {
const meta: Meta<typeof BasePanel> = {
title: 'Sidebar/Base Panel',
component: BasePanel,
argTypes: {}
} as ComponentMeta<typeof BasePanel>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof BasePanel> = (args) => (
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<BasePanel {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
title: 'Common'
},
};
export const WithFooter = Template.bind({});
WithFooter.args = {
export const WithFooter: Story = {
args: {
title: 'Common',
children: 'Children',
footerSlot: 'Footer'
};
},
};

48
packages/noodl-core-ui/src/components/sidebar/CollapsableSection/CollapsableSection.stories.tsx
View File

@@ -1,5 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { IconButton } from '@noodl-core-ui/components/inputs/IconButton';
@@ -10,13 +9,16 @@ import { Text } from '@noodl-core-ui/components/typography/Text';
import { CollapsableSection } from './CollapsableSection';
export default {
const meta: Meta<typeof CollapsableSection> = {
title: 'Layout/Collapsable Section',
component: CollapsableSection,
argTypes: {}
} as ComponentMeta<typeof CollapsableSection>;
};
const Template: ComponentStory<typeof CollapsableSection> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<CollapsableSection {...args}>
<Container hasYSpacing>
@@ -26,38 +28,44 @@ const Template: ComponentStory<typeof CollapsableSection> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const VariantPanel = Template.bind({});
VariantPanel.args = {
title: 'Title',
variant: SectionVariant.Panel
export const Common: Story = {
args: {},
};
export const CollapsableVariantPanel = Template.bind({});
CollapsableVariantPanel.args = {
export const VariantPanel: Story = {
args: {
title: 'Title',
variant: SectionVariant.Panel
},
};
export const CollapsableVariantPanel: Story = {
args: {
title: 'Title',
variant: SectionVariant.Panel,
isCollapsable: true
},
};
export const VariantPanelShy = Template.bind({});
VariantPanelShy.args = {
export const VariantPanelShy: Story = {
args: {
title: 'Title',
variant: SectionVariant.PanelShy
},
};
export const VariantInModal = Template.bind({});
VariantInModal.args = {
export const VariantInModal: Story = {
args: {
title: 'Title',
variant: SectionVariant.InModal
},
};
export const WithAction = Template.bind({});
WithAction.args = {
export const WithAction: Story = {
args: {
title: 'Title',
actions: <IconButton icon={IconName.Plus} />
},
};
// Boring, but it should be content size and not handle scrollbars

25
packages/noodl-core-ui/src/components/sidebar/PanelHeader/PanelHeader.stories.tsx
View File

@@ -1,24 +1,29 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { PanelHeader } from './PanelHeader';
export default {
const meta: Meta<typeof PanelHeader> = {
title: 'Sidebar/Panel Header',
component: PanelHeader,
argTypes: {}
} as ComponentMeta<typeof PanelHeader>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof PanelHeader> = (args) => (
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<PanelHeader {...args} />
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const Example = Template.bind({});
Example.args = {
title: 'Hello World'
export const Common: Story = {
args: {},
};
export const Example: Story = {
args: {
title: 'Hello World'
},
};

48
packages/noodl-core-ui/src/components/sidebar/Section/Section.stories.tsx
View File

@@ -1,5 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import { IconButton } from '@noodl-core-ui/components/inputs/IconButton';
@@ -9,13 +8,16 @@ import { Text } from '@noodl-core-ui/components/typography/Text';
import { Section, SectionVariant } from './Section';
export default {
const meta: Meta<typeof Section> = {
title: 'Layout/Section',
component: Section,
argTypes: {}
} as ComponentMeta<typeof Section>;
};
const Template: ComponentStory<typeof Section> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<Section {...args}>
<Container hasYSpacing>
@@ -25,38 +27,44 @@ const Template: ComponentStory<typeof Section> = (args) => (
</div>
);
export const Common = Template.bind({});
Common.args = {};
export const VariantPanel = Template.bind({});
VariantPanel.args = {
title: 'Title',
variant: SectionVariant.Panel
export const Common: Story = {
args: {},
};
export const CollapsableVariantPanel = Template.bind({});
CollapsableVariantPanel.args = {
export const VariantPanel: Story = {
args: {
title: 'Title',
variant: SectionVariant.Panel
},
};
export const CollapsableVariantPanel: Story = {
args: {
title: 'Title',
variant: SectionVariant.Panel,
isCollapsable: true
},
};
export const VariantPanelShy = Template.bind({});
VariantPanelShy.args = {
export const VariantPanelShy: Story = {
args: {
title: 'Title',
variant: SectionVariant.PanelShy
},
};
export const VariantInModal = Template.bind({});
VariantInModal.args = {
export const VariantInModal: Story = {
args: {
title: 'Title',
variant: SectionVariant.InModal
},
};
export const WithAction = Template.bind({});
WithAction.args = {
export const WithAction: Story = {
args: {
title: 'Title',
actions: <IconButton icon={IconName.Plus} />
},
};
// Boring, but it should be content size and not handle scrollbars

21
packages/noodl-core-ui/src/components/toolbar/ToolbarButton/ToolbarButton.stories.tsx
View File

@@ -1,20 +1,21 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { ToolbarButton } from './ToolbarButton';
export default {
const meta: Meta<typeof ToolbarButton> = {
title: 'Toolbar/Toolbar Button',
component: ToolbarButton,
argTypes: {
label: { control: 'text' },
prefix: { control: 'slot' }
}
} as ComponentMeta<typeof ToolbarButton>;
const Template: ComponentStory<typeof ToolbarButton> = (args) => <ToolbarButton {...args} />;
export const Common = Template.bind({});
Common.args = {
label: 'PRESS ME',
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = {
args: {
label: 'PRESS ME',
},
};

15
packages/noodl-core-ui/src/components/toolbar/ToolbarGrip/ToolbarGrip.stories.tsx
View File

@@ -1,15 +1,16 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ToolbarGrip } from './ToolbarGrip';
export default {
const meta: Meta<typeof ToolbarGrip> = {
title: 'Toolbar/Toolbar Grip',
component: ToolbarGrip,
argTypes: {}
} as ComponentMeta<typeof ToolbarGrip>;
};
const Template: ComponentStory<typeof ToolbarGrip> = (args) => <ToolbarGrip {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

12
packages/noodl-core-ui/src/components/tree-view/BasicTreeView/BasicTreeView.stories.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { IconName } from '@noodl-core-ui/components/common/Icon';
import {
@@ -10,13 +9,16 @@ import {
import { ContextMenu } from '@noodl-core-ui/components/popups/ContextMenu';
import { IconButtonVariant } from '@noodl-core-ui/components/inputs/IconButton';
export default {
const meta: Meta<typeof BasicTreeView> = {
title: 'Tree View/Basic Tree View',
component: BasicTreeView,
argTypes: {}
} as ComponentMeta<typeof BasicTreeView>;
};
export const Common: ComponentStory<typeof BasicTreeView> = (args) => {
export default meta;
type Story = StoryObj<typeof meta>;
export const Common: Story = (args) => {
return (
<div style={{ width: 280 }}>
<BasicTreeView {...args} />

15
packages/noodl-core-ui/src/components/tree-view/ColorListView/ColorListView.stories.tsx
View File

@@ -1,18 +1,18 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ColorListView } from './ColorListView';
export default {
const meta: Meta<typeof ColorListView> = {
title: 'Tree View/Color List View',
component: ColorListView,
argTypes: {}
} as ComponentMeta<typeof ColorListView>;
};
const Template: ComponentStory<typeof ColorListView> = (args) => <ColorListView {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
items: [
{ id: 0, text: 'Grey - 200', color: '#F4F4F4' },
{ id: 1, text: 'Grey - 300', color: '#E9E9E9' },
@@ -53,4 +53,5 @@ Common.args = {
{ id: 36, text: 'Grey - 600', color: '#757575' },
{ id: 37, text: 'Black', color: '#000000' }
]
},
};

17
packages/noodl-core-ui/src/components/tree-view/TreeView/TreeView.stories.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import {
TreeView,
@@ -8,11 +7,14 @@ import {
} from '@noodl-core-ui/components/tree-view/TreeView';
import { Text } from '@noodl-core-ui/components/typography/Text';
export default {
const meta: Meta<typeof TreeView> = {
title: 'Tree View/Tree View',
component: TreeView,
argTypes: {}
} as ComponentMeta<typeof TreeView>;
};
export default meta;
type Story = StoryObj<typeof meta>;
interface NodeProps extends TreeViewChildProps<SimpleTreeViewItem> {}
function Node({ depth, item, children, onClick }: NodeProps) {
@@ -31,10 +33,8 @@ function Node({ depth, item, children, onClick }: NodeProps) {
);
}
const Template: ComponentStory<typeof TreeView> = (args) => <TreeView {...args} />;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
node: Node,
items: [
{
@@ -62,4 +62,5 @@ Common.args = {
]
}
]
},
};

16
packages/noodl-core-ui/src/components/typography/Label/Label.stories.tsx
View File

@@ -1,15 +1,18 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './Label';
export default {
const meta: Meta<typeof Label> = {
title: 'Typography/Label',
component: Label,
argTypes: {}
} as ComponentMeta<typeof Label>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof Label> = (args) => (
const Template: Story = (args) => (
<>
<p>
This component is a work in progress and will be rolled out in the future to replace Title and
@@ -19,5 +22,6 @@ const Template: ComponentStory<typeof Label> = (args) => (
</>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

23
packages/noodl-core-ui/src/components/typography/Text/Text.stories.tsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Text } from './Text';
export default {
const meta: Meta<typeof Text> = {
title: 'Typography/Text',
component: Text,
argTypes: {
@@ -41,11 +40,15 @@ export default {
isSpan: { control: 'boolean' },
isCentered: { control: 'boolean' },
},
} as ComponentMeta<typeof Text>;
const Template: ComponentStory<typeof Text> = (args) => <Text {...args}>{args.children}</Text>;
export const Common = Template.bind({});
Common.args = {
children: "Typography",
};
export default meta;
type Story = StoryObj<typeof meta>;
{args.children}</Text>;
export const Common: Story = {
args: {
children: "Typography",
},
};

23
packages/noodl-core-ui/src/components/typography/Title/Title.stories.tsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { Title } from './Title';
export default {
const meta: Meta<typeof Title> = {
title: 'Typography/Title',
component: Title,
argTypes: {
@@ -34,11 +33,15 @@ export default {
isCentered: { control: 'boolean' },
isInline: { control: 'boolean' },
},
} as ComponentMeta<typeof Title>;
const Template: ComponentStory<typeof Title> = (args) => <Title {...args}>{args.children}</Title>;
export const Common = Template.bind({});
Common.args = {
children: "Typography",
};
export default meta;
type Story = StoryObj<typeof meta>;
{args.children}</Title>;
export const Common: Story = {
args: {
children: "Typography",
},
};

30
packages/noodl-core-ui/src/components/user/UserBadge/UserBadge.stories.tsx
View File

@@ -1,9 +1,8 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { UserBadge, UserBadgeSize } from './UserBadge';
export default {
const meta: Meta<typeof UserBadge> = {
title: 'User/User Badge',
component: UserBadge,
argTypes: {
@@ -11,37 +10,42 @@ export default {
email: { control: 'text' },
id: { control: 'text' }
}
} as ComponentMeta<typeof UserBadge>;
};
const Template: ComponentStory<typeof UserBadge> = (args) => <UserBadge {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
name: 'John Doe',
email: 'john@noodl.net',
id: '20'
},
};
export const SizeMedium = Template.bind({});
SizeMedium.args = {
export const SizeMedium: Story = {
args: {
name: 'John Doe',
email: 'john@noodl.net',
id: '20',
size: UserBadgeSize.Medium
},
};
export const SizeSmall = Template.bind({});
SizeSmall.args = {
export const SizeSmall: Story = {
args: {
name: 'John Doe',
email: 'john@noodl.net',
id: '20',
size: UserBadgeSize.Small
},
};
export const TinySmall = Template.bind({});
TinySmall.args = {
export const TinySmall: Story = {
args: {
name: 'John Doe',
email: 'john@noodl.net',
id: '20',
size: UserBadgeSize.Tiny
},
};

15
packages/noodl-core-ui/src/components/user/UserBadgeList/UserBadgeList.stories.tsx
View File

@@ -1,18 +1,18 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { UserBadgeList } from './UserBadgeList';
export default {
const meta: Meta<typeof UserBadgeList> = {
title: 'User/UserBadgeList',
component: UserBadgeList,
argTypes: {}
} as ComponentMeta<typeof UserBadgeList>;
};
const Template: ComponentStory<typeof UserBadgeList> = (args) => <UserBadgeList {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
badges: [
{
email: 'kotte@noodl.net',
@@ -30,4 +30,5 @@ Common.args = {
name: 'Michael Cartner'
}
]
},
};

15
packages/noodl-core-ui/src/components/user/UserListingCard/UserListingCard.stories.tsx
View File

@@ -1,9 +1,8 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { UserListingCard } from './UserListingCard';
export default {
const meta: Meta<typeof UserListingCard> = {
title: 'User/User Listing Card',
component: UserListingCard,
argTypes: {
@@ -25,13 +24,15 @@ export default {
interactionSlot: { control: 'slot' },
isLoading: { control: 'boolean' },
},
} as ComponentMeta<typeof UserListingCard>;
};
const Template: ComponentStory<typeof UserListingCard> = (args) => <UserListingCard {...args} />;
export default meta;
type Story = StoryObj<typeof meta>;
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
name: 'John Doe',
email: 'john@noodl.net',
id: '20',
},
};

37
packages/noodl-core-ui/src/components/version-control/GitHistoryItem/GitHistoryItem.stories.tsx
View File

@@ -1,22 +1,24 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { GitHistoryItem } from './GitHistoryItem';
export default {
const meta: Meta<typeof GitHistoryItem> = {
title: 'Version Control/History Item',
component: GitHistoryItem,
argTypes: {}
} as ComponentMeta<typeof GitHistoryItem>;
};
const Template: ComponentStory<typeof GitHistoryItem> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<div style={{ width: 280 }}>
<GitHistoryItem {...args}></GitHistoryItem>
</div>
);
export const Common = Template.bind({});
Common.args = {
export const Common: Story = {
args: {
branches: [
{
bottom: true,
@@ -33,10 +35,11 @@ Common.args = {
label: 'JD',
color: 'red'
}
},
};
export const FirstCommit = Template.bind({});
FirstCommit.args = {
export const FirstCommit: Story = {
args: {
branches: [
{
bottom: false,
@@ -54,10 +57,11 @@ FirstCommit.args = {
label: 'JD',
color: 'red'
}
},
};
export const LocalChanges = Template.bind({});
LocalChanges.args = {
export const LocalChanges: Story = {
args: {
branches: [
{
bottom: true,
@@ -71,10 +75,11 @@ LocalChanges.args = {
message: 'Local changes',
date: undefined,
badge: undefined
},
};
export const BeforeLocalChanges = Template.bind({});
BeforeLocalChanges.args = {
export const BeforeLocalChanges: Story = {
args: {
branches: [
{
bottom: true,
@@ -93,10 +98,11 @@ BeforeLocalChanges.args = {
label: 'JD',
color: 'red'
}
},
};
export const LongCommitMessage = Template.bind({});
LongCommitMessage.args = {
export const LongCommitMessage: Story = {
args: {
branches: [
{
bottom: true,
@@ -116,4 +122,5 @@ LongCommitMessage.args = {
label: 'JD',
color: 'red'
}
},
};

17
packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.stories.tsx
View File

@@ -1,15 +1,18 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Launcher } from './Launcher';
export default {
const meta: Meta<typeof Launcher> = {
title: 'Preview/Launcher/[WIP] Launcher',
component: Launcher,
argTypes: {}
} as ComponentMeta<typeof Launcher>;
};
const Template: ComponentStory<typeof Launcher> = (args) => <Launcher {...args}></Launcher>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary = Template.bind({});
Primary.args = {};
</Launcher>;
export const Primary: Story = {
args: {},
};

6
packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherProjectCard/LauncherProjectCard.tsx
View File

@@ -140,7 +140,7 @@ export function LauncherProjectCard({
<HStack UNSAFE_style={{ alignItems: 'center' }}>
<Icon icon={IconName.CloudDownload} variant={FeedbackType.Notice} size={IconSize.Tiny} />
<Label hasLeftSpacing={LabelSpacingSize.Small} variant={FeedbackType.Notice}>
{pullAmount}
{String(pullAmount)}
</Label>
</HStack>
</Tooltip>
@@ -155,7 +155,7 @@ export function LauncherProjectCard({
<HStack UNSAFE_style={{ alignItems: 'center' }}>
<Icon icon={IconName.CloudUpload} variant={FeedbackType.Danger} size={IconSize.Tiny} />
<Label hasLeftSpacing={LabelSpacingSize.Small} variant={FeedbackType.Danger}>
{pushAmount}
{String(pushAmount)}
</Label>
</HStack>
</Tooltip>
@@ -175,7 +175,7 @@ export function LauncherProjectCard({
UNSAFE_className={css.VersionControlTooltip}
/>
<Label hasLeftSpacing={LabelSpacingSize.Small} variant={FeedbackType.Danger}>
{uncommittedChangesAmount}
{String(uncommittedChangesAmount)}
</Label>
</HStack>
</Tooltip>

16
packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherSearchBar/LauncherSearchBar.stories.tsx
View File

@@ -1,15 +1,19 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { LauncherSearchBar } from './LauncherSearchBar';
export default {
const meta: Meta<typeof LauncherSearchBar> = {
title: 'CATEGORY_HERE/LauncherSearchBar',
component: LauncherSearchBar,
argTypes: {},
} as ComponentMeta<typeof LauncherSearchBar>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof LauncherSearchBar> = (args) => <LauncherSearchBar {...args} />;
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

17
packages/noodl-core-ui/src/preview/property-panel/Group/Group.stories.tsx
View File

@@ -1,15 +1,18 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Group } from './Group';
export default {
const meta: Meta<typeof Group> = {
title: 'Preview/Property Panel/[WIP] Group',
component: Group,
argTypes: {}
} as ComponentMeta<typeof Group>;
};
const Template: ComponentStory<typeof Group> = (args) => <Group></Group>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary = Template.bind({});
Primary.args = {};
const Template: Story = (args) => <Group></Group>;
export const Primary: Story = {
args: {},
};

8
packages/noodl-core-ui/src/preview/property-panel/Group/Group.tsx
View File

@@ -248,7 +248,7 @@ function GroupPanel() {
<CollapsableSection title="Style">
<Box hasXSpacing hasBottomSpacing>
<PropertyPanelRow label="Opacity" isChanged={false}>
<PropertyPanelSliderInput value={1} properties={{ min: 0, max: 1 }} />
<PropertyPanelSliderInput value={1} properties={{ min: 0, max: 1, step: 0.01 }} />
</PropertyPanelRow>
<PropertyPanelRow label="Blend Mode" isChanged={false}>
<PropertyPanelSelectInput
@@ -266,7 +266,7 @@ function GroupPanel() {
<PropertyPanelCheckbox value={true} />
</PropertyPanelRow>
<PropertyPanelRow label="zIndex" isChanged={false}>
<PropertyPanelNumberInput value="" />
<PropertyPanelNumberInput value="" type="number" />
</PropertyPanelRow>
</Box>
</CollapsableSection>
@@ -389,12 +389,12 @@ function GroupPanel() {
<PropertyPanelInput
inputType={PropertyPanelInputType.Slider}
label="Rotation"
properties={{ min: -365, max: 365 }}
properties={{ min: -365, max: 365, step: 1 }}
value={0}
/>
<PropertyPanelRow label="Scale" isChanged={false}>
<PropertyPanelNumberInput value="1" />
<PropertyPanelNumberInput value="1" type="number" />
</PropertyPanelRow>
<PropertyPanelRow label="Transform Origin X" isChanged={false}>
<PropertyPanelLengthUnitInput value="50%" />

17
packages/noodl-core-ui/src/preview/template/DefaultApp/DefaultApp.stories.tsx
View File

@@ -1,17 +1,20 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import type { Meta, StoryObj } from '@storybook/react';
import { DefaultApp } from "./DefaultApp";
export default {
const meta: Meta<typeof DefaultApp> = {
title: "Preview/Template/App",
component: DefaultApp,
argTypes: {},
} as ComponentMeta<typeof DefaultApp>;
};
const Template: ComponentStory<typeof DefaultApp> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<DefaultApp {...args}></DefaultApp>
);
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

26
packages/noodl-core-ui/src/preview/template/LauncherApp/LauncherApp.stories.tsx
View File

@@ -1,22 +1,26 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import type { Meta, StoryObj } from '@storybook/react';
import { LauncherApp, LauncherSidebarExample } from "./LauncherApp";
export default {
const meta: Meta<typeof LauncherApp> = {
title: "Preview/Template/Launcher",
component: LauncherApp,
argTypes: {},
} as ComponentMeta<typeof LauncherApp>;
};
const Template: ComponentStory<typeof LauncherApp> = (args) => (
export default meta;
type Story = StoryObj<typeof meta>;
const Template: Story = (args) => (
<LauncherApp {...args}></LauncherApp>
);
export const Common = Template.bind({});
Common.args = {};
export const WithSidebar = Template.bind({});
WithSidebar.args = {
sidePanel: <LauncherSidebarExample />
export const Common: Story = {
args: {},
};
export const WithSidebar: Story = {
args: {
sidePanel: <LauncherSidebarExample />
},
};

16
packages/noodl-core-ui/src/stories/hooks/useAutofocusInput.stories.tsx
View File

@@ -1,16 +1,19 @@
import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { TextInput } from '@noodl-core-ui/components/inputs/TextInput';
import { useAutofocusInput } from '@noodl-core-ui/hooks/useAutofocusInput';
export default {
const meta: Meta<typeof TextInput> = {
title: 'Hooks/useAutofocusInput',
component: TextInput,
argTypes: {}
} as ComponentMeta<typeof TextInput>;
};
export default meta;
type Story = StoryObj<typeof meta>;
const Template: ComponentStory<typeof TextInput> = () => {
const Template: Story = () => {
const setRef = useAutofocusInput();
const [secondInputState, setSecondInputState] = useState('Focus me manually');
@@ -22,5 +25,6 @@ const Template: ComponentStory<typeof TextInput> = () => {
);
};
export const Common = Template.bind({});
Common.args = {};
export const Common: Story = {
args: {},
};

40
packages/noodl-editor/@include-types/global.d.ts vendored
View File

@@ -1,31 +1,11 @@
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
/**
* Global type declarations for noodl-editor
*
* This file imports shared global types from @noodl/noodl-types.
* Package-specific types can be added below the reference directive.
*
* @see packages/noodl-types/src/global.d.ts for shared types
*/
declare module '*.css' {
const styles: { readonly [key: string]: string };
export default styles;
}
declare module '*.scss' {
const styles: { readonly [key: string]: string };
export default styles;
}
type TSFixme = any;
type NodeColor = 'data' | 'visual' | 'logic' | 'component' | 'javascript';
interface Window {
noodlEditorPreviewRoute: string;
}
type Prettify<T> = {
[K in keyof T]: T[K];
// eslint-disable-next-line @typescript-eslint/ban-types
} & {};
type PartialWithRequired<T, K extends keyof T> = Pick<T, K> & Partial<T>;
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../noodl-types/src/global.d.ts" />

2
packages/noodl-editor/tsconfig.json
View File

@@ -1,8 +1,10 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"skipLibCheck": true,
"moduleResolution": "node",
"module": "es2020",
"baseUrl": ".",
"paths": {
"@noodl-core-ui/*": ["../noodl-core-ui/src/*"],
"@noodl-hooks/*": ["./src/editor/src/hooks/*"],

49
packages/noodl-editor/webpackconfigs/webpack.renderer.dev.js
View File

@@ -4,9 +4,14 @@ const merge = require('webpack-merge').default;
const shared = require('./shared/webpack.renderer.shared.js');
const getExternalModules = require('./helpers/get-externals-modules');
// Track if electron has been started to prevent multiple launches
let electronStarted = false;
module.exports = merge(shared, {
mode: 'development',
devtool: 'eval-source-map',
// Use faster sourcemap for development - 'eval-cheap-module-source-map' is much faster
// than 'eval-source-map' while still providing decent debugging experience
devtool: 'eval-cheap-module-source-map',
externals: getExternalModules({
production: false
}),
@@ -27,20 +32,34 @@ module.exports = merge(shared, {
host: 'localhost', // Default: '0.0.0.0' that is causing issues on some OS / net interfaces
port: 8080,
onListening(devServer) {
//start electron when the dev server has started
child_process
.spawn('npm', ['run', 'start:_dev'], {
shell: true,
env: process.env,
stdio: 'inherit'
})
.on('close', (code) => {
devServer.stop();
})
.on('error', (spawnError) => {
console.error(spawnError);
devServer.stop();
});
// Wait for webpack compilation to finish before starting Electron
// This prevents the black screen issue where Electron opens before
// the bundle is ready to be served
devServer.compiler.hooks.done.tap('StartElectron', (stats) => {
// Only start once, and only if compilation succeeded
if (electronStarted) return;
if (stats.hasErrors()) {
console.error('Webpack compilation has errors - not starting Electron');
return;
}
electronStarted = true;
console.log('\n✓ Webpack compilation complete - launching Electron...\n');
child_process
.spawn('npm', ['run', 'start:_dev'], {
shell: true,
env: process.env,
stdio: 'inherit'
})
.on('close', (code) => {
devServer.stop();
})
.on('error', (spawnError) => {
console.error(spawnError);
devServer.stop();
});
});
}
}
});

30
packages/noodl-git/src/core/models/diff-data.ts
View File

@@ -1,4 +1,5 @@
import { FileChange, getMediaType } from './status';
import { DiffLine } from './diff-line';
export enum DiffType {
/** Changes to a text file, which may be partially selected for commit */
@@ -10,13 +11,38 @@ export enum DiffType {
/** Change to a repository which is included as a submodule of this repository */
Submodule,
/** Diff that will not be rendered */
Unrenderable
Unrenderable,
/** Changes to a large text file */
LargeText
}
/** Hunk header information */
export interface IDiffHunkHeader {
readonly oldStartLine: number;
readonly oldLineCount: number;
readonly newStartLine: number;
readonly newLineCount: number;
}
/** A hunk in a diff */
export interface IDiffHunk {
readonly header: IDiffHunkHeader;
readonly lines: ReadonlyArray<DiffLine>;
readonly unifiedDiffStart: number;
}
export interface ITextDiff {
readonly kind: DiffType.Text;
readonly modified?: string;
readonly original: string;
readonly hunks?: ReadonlyArray<IDiffHunk>;
}
export interface ILargeTextDiff {
readonly kind: DiffType.LargeText;
readonly modified?: string;
readonly original: string;
readonly hunks?: ReadonlyArray<IDiffHunk>;
}
export class Image {
@@ -55,4 +81,4 @@ export interface IUnrenderableDiff {
}
/** The union of diff types */
export type IDiff = ITextDiff | IImageDiff | IBinaryDiff | IUnrenderableDiff;
export type IDiff = ITextDiff | IImageDiff | IBinaryDiff | IUnrenderableDiff | ILargeTextDiff;

74
packages/noodl-types/src/global.d.ts vendored Normal file
View File

@@ -0,0 +1,74 @@
/**
* Global Type Declarations for OpenNoodl
*
* This file contains shared global type declarations used across all packages.
* It consolidates declarations previously duplicated in noodl-editor and noodl-core-ui.
*
* @module noodl-types
* @since 1.1.0
*/
// =============================================================================
// Module Declarations
// =============================================================================
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module '*.css' {
const styles: { readonly [key: string]: string };
export default styles;
}
declare module '*.scss' {
const styles: { readonly [key: string]: string };
export default styles;
}
// =============================================================================
// Global Types
// =============================================================================
/**
* Escape hatch for any type - use sparingly and document why.
* Prefer proper typing where possible.
*/
type TSFixme = any;
/**
* Node color categories used in the visual node graph editor.
*/
type NodeColor = 'data' | 'visual' | 'logic' | 'component' | 'javascript';
// =============================================================================
// Utility Types
// =============================================================================
/**
* Expand types for better IDE tooltips.
* Converts intersection types to a flat object type.
*/
type Prettify<T> = {
[K in keyof T]: T[K];
// eslint-disable-next-line @typescript-eslint/ban-types
} & {};
/**
* Make specific properties required while keeping others optional.
*/
type PartialWithRequired<T, K extends keyof T> = Pick<T, K> & Partial<T>;
// =============================================================================
// Window Augmentation
// =============================================================================
interface Window {
/**
* Current route used in the editor preview.
*/
noodlEditorPreviewRoute: string;
}