mirror of
https://github.com/Kong/insomnia
synced 2024-11-07 22:30:15 +00:00
Remove insomnia-components (#2043)
This commit is contained in:
Opender Singh
GitHub
parent
c3d4d89193
commit
b4b6464f9e
1719
packages/insomnia-app/package-lock.json
generated
1719
packages/insomnia-app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -137,7 +137,6 @@
|
||||
"html-entities": "^1.2.0",
|
||||
"httpsnippet": "^1.19.1",
|
||||
"iconv-lite": "^0.4.15",
|
||||
"insomnia-components": "^2.1.6",
|
||||
"insomnia-cookies": "^2.1.4",
|
||||
"insomnia-importers": "^2.1.6",
|
||||
"insomnia-libcurl": "^2.1.4",
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
"babel-plugin-styled-components",
|
||||
"babel-plugin-inline-react-svg",
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
],
|
||||
"presets": [
|
||||
"@babel/preset-flow",
|
||||
"@babel/preset-react",
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": "> 0.25%, not dead"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
[ignore]
|
||||
.*/node_modules/.*
|
||||
./.cache
|
||||
./dist
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
./flow-typed
|
||||
|
||||
[options]
|
||||
|
||||
[lints]
|
||||
1
packages/insomnia-components/.gitignore
vendored
1
packages/insomnia-components/.gitignore
vendored
@ -1 +0,0 @@
|
||||
.cache
|
||||
@ -1,10 +0,0 @@
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
addDecorator(
|
||||
withInfo({
|
||||
inline: true,
|
||||
}),
|
||||
);
|
||||
|
||||
configure(require.context('../components', true, /\.stories\.js$/), module);
|
||||
@ -1,230 +0,0 @@
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.body.setAttribute('theme', 'default');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* reset.css */
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
html {
|
||||
--font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
|
||||
'Droid Sans Fallback';
|
||||
--font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
|
||||
'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
|
||||
--font-ligatures: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#root {
|
||||
max-width: 70rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#story-root {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
font-family: var(--font-default);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
.storybook-skinny {
|
||||
max-width: 40rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.simplebar-content pre {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Default Theme Variables -->
|
||||
<style>
|
||||
html {
|
||||
--font-size: 14px;
|
||||
}
|
||||
|
||||
*[theme],
|
||||
*[subtheme] {
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
|
||||
/* Colors */
|
||||
--color-success: #50a500;
|
||||
--color-notice: #d1b800;
|
||||
--color-warning: #d48a39;
|
||||
--color-danger: #bf0000;
|
||||
--color-surprise: #8570d2;
|
||||
--color-info: #0092bf;
|
||||
|
||||
/* Font Colors */
|
||||
--color-font-success: #fff;
|
||||
--color-font-notice: #fff;
|
||||
--color-font-warning: #fff;
|
||||
--color-font-danger: #fff;
|
||||
--color-font-surprise: #fff;
|
||||
--color-font-info: #fff;
|
||||
|
||||
/* Highlight */
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
--hl-sm: rgba(130, 130, 130, 0.25);
|
||||
--hl-md: rgba(130, 130, 130, 0.35);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
/* Font Size */
|
||||
--font-size-xxs: 8px;
|
||||
--font-size-xs: 11px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size-md: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 19px;
|
||||
--font-size-xxl: 21px;
|
||||
--font-size-xxxl: 24px;
|
||||
--font-size: var(--font-size-md);
|
||||
|
||||
/* Padding */
|
||||
--padding-md: calc(var(--font-size) * 1.2);
|
||||
--padding-sm: calc(var(--font-size) * 0.6);
|
||||
--padding-xs: calc(var(--font-size) * 0.4);
|
||||
--padding-xxs: calc(var(--font-size) * 0.2);
|
||||
--padding-lg: calc(var(--font-size) * 2.5);
|
||||
--padding-xl: calc(var(--font-size) * 5);
|
||||
|
||||
/* Wrapper */
|
||||
--line-height-md: calc(var(--font-size) * 3.6);
|
||||
--line-height-sm: calc(var(--font-size) * 2.88);
|
||||
--line-height-xs: calc(var(--font-size) * 2.448);
|
||||
--line-height-xxs: calc(var(--font-size) * 2.08);
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +0,0 @@
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="fill-hl" cx="6" cy="6" r="6"/>
|
||||
<polygon class="fill-hl-font" fill="#FFFFFF" points="3 5 3 7 6 7 6 9 10 6 6 3 6 5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 247 B |
@ -1,3 +0,0 @@
|
||||
<svg width="12px" height="12px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-font" d="M1,2l-1,1l5,5l5,-5l-1,-1l-4,4l-4,-4Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 179 B |
@ -1,3 +0,0 @@
|
||||
<svg width="12px" height="12px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-font" d="M1,8l-1,-1l5,-5l5,5l-1,1l-4,-4l-4,4Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 179 B |
@ -1,5 +0,0 @@
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="fill-danger" opacity="0.9" fill="#BF0000" cx="6" cy="6" r="6"/>
|
||||
<path class="fill-fg-danger" d="M8.09867337,3 L9,3.90132663 L6.901,6 L9,8.09867337 L8.09867337,9 L6,6.901 L3.90132663,9 L3,8.09867337 L5.098,6 L3,3.90132663 L3.90132663,3 L6,5.098 L8.09867337,3 Z"
|
||||
id="Combined-Shape" fill="#FFFFFF" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 440 B |
@ -1,6 +0,0 @@
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="fill-notice" d="M0.0964168861,10.5456976 C-0.116224648,11.027611 0.0346078718,11.6266353 0.433310748,11.8836558 C0.551806547,11.9600431 0.684037065,12 0.818332304,12 L11.1818292,12 C11.6336925,12 12,11.5572429 12,11.0110744 C12,10.8487513 11.9669424,10.6889239 11.9037446,10.5456976 L7.26977361,0.916890992 C6.82873384,0.000466030324 5.90271122,-0.275213859 5.20144421,0.301142724 C5.01103712,0.457634304 4.84999947,0.66808302 4.73025128,0.916911448 L0.0964168861,10.5456976 Z"
|
||||
fill="#F2B230" opacity="0.9"/>
|
||||
<path class="fill-notice-fg" d="M6.5,8 C6.77614237,8 7,8.22385763 7,8.5 L7,9.5 C7,9.77614237 6.77614237,10 6.5,10 L5.5,10 C5.22385763,10 5,9.77614237 5,9.5 L5,8.5 C5,8.22385763 5.22385763,8 5.5,8 L6.5,8 Z M6.5,3 C6.77614237,3 7,3.22385763 7,3.5 L7,6.5 C7,6.77614237 6.77614237,7 6.5,7 L5.5,7 C5.22385763,7 5,6.77614237 5,6.5 L5,3.5 C5,3.22385763 5.22385763,3 5.5,3 L6.5,3 Z"
|
||||
fill="#FFFFFF"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1,47 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type Props = {
|
||||
onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
|
||||
bg?: 'success' | 'notice' | 'warning' | 'danger' | 'surprise' | 'info',
|
||||
};
|
||||
|
||||
const StyledButton: React.ComponentType<Props> = styled.button`
|
||||
text-align: center;
|
||||
color: ${({ bg }) => (bg ? `var(--color-${bg})` : 'var(--color-font)')};
|
||||
font-size: var(--font-size-sm);
|
||||
padding: 0 var(--padding-md);
|
||||
height: var(--line-height-xs);
|
||||
opacity: 0.8;
|
||||
border-radius: 2px;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
|
||||
border: ${({ noOutline }) => (noOutline ? '0' : '1px solid')};
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: 0;
|
||||
background-color: var(--hl-xxs);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--hl-xs);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block !important;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
`;
|
||||
|
||||
class Button extends React.Component<Props> {
|
||||
render() {
|
||||
return <StyledButton {...(this.props: Object)} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Button;
|
||||
@ -1,36 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import Button from './button';
|
||||
import styled from 'styled-components';
|
||||
import SvgIcon from './svg-icon';
|
||||
|
||||
export default { title: 'Button' };
|
||||
|
||||
const Wrapper: React.ComponentType<any> = styled.div`
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
`;
|
||||
Wrapper.displayName = '...';
|
||||
|
||||
export const _default = () => <Button onClick={() => window.alert('Clicked!')}>Click Me</Button>;
|
||||
|
||||
export const withIcon = () => (
|
||||
<Button onClick={() => window.alert('Clicked!')}>
|
||||
Expand <SvgIcon icon="chevron-down" />
|
||||
</Button>
|
||||
);
|
||||
|
||||
export const colors = () => (
|
||||
<Wrapper>
|
||||
<Button>Default</Button>
|
||||
<Button bg="success">Success</Button>
|
||||
<Button bg="surprise">Surprise</Button>
|
||||
<Button bg="danger">Danger</Button>
|
||||
<Button bg="warning">Warning</Button>
|
||||
<Button bg="notice">Notice</Button>
|
||||
<Button bg="info">Info</Button>
|
||||
</Wrapper>
|
||||
);
|
||||
@ -1,189 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
|
||||
import Button from './button';
|
||||
import styled from 'styled-components';
|
||||
import SvgIcon from './svg-icon';
|
||||
|
||||
type Notice = {|
|
||||
type: 'warning' | 'error',
|
||||
line: number,
|
||||
message: string,
|
||||
|};
|
||||
|
||||
type Props = {
|
||||
notices: Array<Notice>,
|
||||
|
||||
// Optional
|
||||
onClick?: (n: Notice, e: SyntheticEvent<HTMLElement>) => any,
|
||||
onVisibilityToggle?: (expanded: boolean) => any,
|
||||
compact?: boolean,
|
||||
className?: string,
|
||||
};
|
||||
|
||||
type State = {
|
||||
collapsed: boolean,
|
||||
};
|
||||
|
||||
const Wrapper: React.ComponentType<any> = styled.div`
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--hl-sm) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const ErrorCount: React.ComponentType<any> = styled.div`
|
||||
margin-right: var(--padding-md);
|
||||
`;
|
||||
|
||||
const JumpButton: React.ComponentType<any> = styled.button`
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-md);
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -0.5em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
z-index: 1;
|
||||
|
||||
& svg {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active svg {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
tr:hover & {
|
||||
// To keep icon centered vertically
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const Header: React.ComponentType<any> = styled.header`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 0;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--hl-sm);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding-left: var(--padding-md);
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
svg {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class NoticeTable extends React.PureComponent<Props, State> {
|
||||
state = {
|
||||
collapsed: false,
|
||||
};
|
||||
|
||||
collapse(e: SyntheticEvent<HTMLButtonElement>) {
|
||||
const { onVisibilityToggle } = this.props;
|
||||
this.setState(
|
||||
state => ({ collapsed: !state.collapsed }),
|
||||
() => {
|
||||
if (onVisibilityToggle) {
|
||||
onVisibilityToggle(!this.state.collapsed);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
onClick(notice: Notice, e: SyntheticEvent<HTMLButtonElement>) {
|
||||
const { onClick } = this.props;
|
||||
if (!onClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
onClick(notice, e);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { notices, compact } = this.props;
|
||||
const { collapsed } = this.state;
|
||||
|
||||
const caret = collapsed ? <SvgIcon icon="chevron-up" /> : <SvgIcon icon="chevron-down" />;
|
||||
|
||||
const errors = notices.filter(n => n.type === 'error');
|
||||
const warnings = notices.filter(n => n.type === 'warning');
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Header>
|
||||
<div>
|
||||
{errors.length > 0 && (
|
||||
<ErrorCount>
|
||||
<SvgIcon icon="error" /> {errors.length}
|
||||
</ErrorCount>
|
||||
)}
|
||||
{warnings.length > 0 && (
|
||||
<ErrorCount>
|
||||
<SvgIcon icon="warning" /> {warnings.length}
|
||||
</ErrorCount>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={this.collapse.bind(this)} noOutline>
|
||||
{collapsed ? 'Show' : 'Hide'} Details{caret}
|
||||
</Button>
|
||||
</Header>
|
||||
{!collapsed && (
|
||||
<Table striped compact={compact}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader align="center">Type</TableHeader>
|
||||
<TableHeader style={{ minWidth: '3em' }} align="center">
|
||||
Line
|
||||
</TableHeader>
|
||||
<TableHeader style={{ width: '100%' }} align="left">
|
||||
Message
|
||||
</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{notices.map((n, i) => (
|
||||
<TableRow key={`${n.line}:${n.type}:${n.message}`}>
|
||||
<TableData align="center">
|
||||
<SvgIcon icon={n.type} />
|
||||
</TableData>
|
||||
<TableData align="center">
|
||||
{n.line}
|
||||
<JumpButton onClick={this.onClick.bind(this, n)}>
|
||||
<SvgIcon icon="arrow-right" />
|
||||
</JumpButton>
|
||||
</TableData>
|
||||
<TableData align="left">{n.message}</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NoticeTable;
|
||||
@ -1,31 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import NoticeTable from './notice-table';
|
||||
|
||||
export default { title: 'NoticeTable' };
|
||||
|
||||
const notices = [
|
||||
{ type: 'error', line: 3, message: 'This must be fixed now!' },
|
||||
{ type: 'warning', line: 10, message: 'This is a small nitpick' },
|
||||
{
|
||||
type: 'warning',
|
||||
line: 40,
|
||||
message: "Another small warning because you didn't the right thing",
|
||||
},
|
||||
{
|
||||
type: 'error',
|
||||
line: 3212,
|
||||
message:
|
||||
'This is a really, really, really, long error message and I hope it makes sense ' +
|
||||
"because it's just made up of random thoughts and things. But, don't let that fool you " +
|
||||
"it's really important and you should fix it as soon as possible!",
|
||||
},
|
||||
];
|
||||
|
||||
export const _default = () => (
|
||||
<NoticeTable
|
||||
notices={notices}
|
||||
onClick={n => window.alert(n.message)}
|
||||
onVisibilityToggle={v => console.log('Visible?', v)}
|
||||
/>
|
||||
);
|
||||
@ -1,79 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import IcnArrowRight from '../assets/icn-arrow-right.svg';
|
||||
import IcnChevronDown from '../assets/icn-chevron-down.svg';
|
||||
import IcnChevronUp from '../assets/icn-chevron-up.svg';
|
||||
import IcnWarning from '../assets/icn-warning.svg';
|
||||
import IcnError from '../assets/icn-errors.svg';
|
||||
|
||||
type Props = {
|
||||
icon: 'arrow-right' | 'chevron-up' | 'chevron-down' | 'warning' | 'error',
|
||||
};
|
||||
|
||||
const SvgIconStyled: React.ComponentType<any> = styled.div`
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
transform: scale(0.9);
|
||||
|
||||
// Ensures that the svg doesn't "bounce out" of the div
|
||||
// (flex-box parent styles can cause this to happen)
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
svg .fill-font {
|
||||
fill: var(--color-font);
|
||||
}
|
||||
svg .fill-danger {
|
||||
fill: var(--color-danger);
|
||||
}
|
||||
svg .fill-danger-font {
|
||||
fill: var(--color-font-danger);
|
||||
}
|
||||
svg .fill-warning {
|
||||
fill: var(--color-warning);
|
||||
}
|
||||
svg .fill-warning-font {
|
||||
fill: var(--color-font-warning);
|
||||
}
|
||||
svg .fill-notice {
|
||||
fill: var(--color-notice);
|
||||
}
|
||||
svg .fill-notice-font {
|
||||
fill: var(--color-font-notice);
|
||||
}
|
||||
svg .fill-hl {
|
||||
fill: var(--hl);
|
||||
}
|
||||
svg .fill-hl-font {
|
||||
fill: var(--color-font-danger);
|
||||
}
|
||||
`;
|
||||
|
||||
class SvgIcon extends React.Component<Props> {
|
||||
static icns = {
|
||||
'arrow-right': <IcnArrowRight />,
|
||||
'chevron-up': <IcnChevronUp />,
|
||||
'chevron-down': <IcnChevronDown />,
|
||||
warning: <IcnWarning />,
|
||||
error: <IcnError />,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { icon } = this.props;
|
||||
return <SvgIconStyled>{SvgIcon.icns[icon]}</SvgIconStyled>;
|
||||
}
|
||||
}
|
||||
|
||||
export default SvgIcon;
|
||||
@ -1,48 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import SvgIcon from './svg-icon';
|
||||
import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export default { title: 'SvgIcon' };
|
||||
|
||||
const Wrapper = styled.div`
|
||||
font-size: 1.5rem;
|
||||
& > * {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
`;
|
||||
Wrapper.displayName = '...';
|
||||
|
||||
export const _default = () => <SvgIcon icon="arrow-right" />;
|
||||
|
||||
export const reference = () => (
|
||||
<React.Fragment>
|
||||
<Table striped outlined>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Icon</TableHeader>
|
||||
<TableHeader>1rem</TableHeader>
|
||||
<TableHeader>1.5rem</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{Object.keys(SvgIcon.icns)
|
||||
.sort()
|
||||
.map(name => (
|
||||
<TableRow>
|
||||
<TableData>
|
||||
<code>{name}</code>
|
||||
</TableData>
|
||||
<TableData style={{ fontSize: '1rem' }}>
|
||||
<SvgIcon icon={name} />
|
||||
</TableData>
|
||||
<TableData style={{ fontSize: '1.5rem' }}>
|
||||
<SvgIcon icon={name} />
|
||||
</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</React.Fragment>
|
||||
);
|
||||
@ -1,123 +0,0 @@
|
||||
// @flow
|
||||
import styled from 'styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
/***********/
|
||||
/* <table> */
|
||||
/***********/
|
||||
|
||||
type TableProps = {
|
||||
children: React.Node,
|
||||
striped?: boolean,
|
||||
outlined?: boolean,
|
||||
compact?: boolean,
|
||||
headings?: Array<React.Node>,
|
||||
};
|
||||
|
||||
const TableStyled: React.ComponentType<{}> = styled.table`
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: ${({ compact }) => (compact ? 'var(--padding-xs)' : 'var(--padding-sm)')}
|
||||
${({ compact }) => (compact ? 'var(--padding-sm)' : 'var(--padding-md)')};
|
||||
}
|
||||
|
||||
${({ striped }) =>
|
||||
striped &&
|
||||
`
|
||||
tbody tr:nth-child(odd) {
|
||||
background: var(--hl-xs);
|
||||
}`}
|
||||
|
||||
${({ outlined }) =>
|
||||
outlined &&
|
||||
`
|
||||
& {
|
||||
th {
|
||||
background: var(--hl-xxs);
|
||||
}
|
||||
|
||||
&,
|
||||
td {
|
||||
border: 1px solid var(--hl-sm);
|
||||
}
|
||||
|
||||
tr.table--no-outline-row td {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
& {
|
||||
border-radius: 3px;
|
||||
border-collapse: unset;
|
||||
}
|
||||
|
||||
td {
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}`}
|
||||
`;
|
||||
const Table = (props: TableProps) => <TableStyled {...props} />;
|
||||
|
||||
/********/
|
||||
/* <tr> */
|
||||
/********/
|
||||
|
||||
const TableRowStyled: React.ComponentType<{}> = styled.tr``;
|
||||
const TableRow = (props: {}) => <TableRowStyled {...props} />;
|
||||
|
||||
/********/
|
||||
/* <td> */
|
||||
/********/
|
||||
|
||||
type TableDataProps = {
|
||||
compact?: boolean,
|
||||
align?: 'center' | 'left',
|
||||
};
|
||||
const TableDataStyled: React.ComponentType<{
|
||||
compact?: boolean,
|
||||
align?: 'center' | 'left',
|
||||
}> = styled.td`
|
||||
vertical-align: top;
|
||||
padding: 0 var(--padding-md);
|
||||
text-align: ${({ align }) => align || 'left'};
|
||||
`;
|
||||
const TableData = (props: TableDataProps) => <TableDataStyled {...props} />;
|
||||
|
||||
/********/
|
||||
/* <th> */
|
||||
/********/
|
||||
type TableHeaderProps = {
|
||||
compact?: boolean,
|
||||
align?: 'center' | 'left',
|
||||
};
|
||||
const TableHeaderStyled: React.ComponentType<TableHeaderProps> = styled.th`
|
||||
vertical-align: top;
|
||||
padding: 0 var(--padding-md);
|
||||
text-align: ${({ align }) => align || 'left'};
|
||||
`;
|
||||
const TableHeader = (props: TableHeaderProps) => <TableHeaderStyled {...props} />;
|
||||
|
||||
/***********/
|
||||
/* <thead> */
|
||||
/***********/
|
||||
|
||||
const TableHeadStyled: React.ComponentType<{}> = styled.thead``;
|
||||
const TableHead = (props: {}) => <TableHeadStyled {...props} />;
|
||||
|
||||
/***********/
|
||||
/* <tbody> */
|
||||
/***********/
|
||||
|
||||
const TableBodyStyled: React.ComponentType<{}> = styled.tbody``;
|
||||
const TableBody = (props: {}) => <TableBodyStyled {...props} />;
|
||||
|
||||
export { Table, TableBody, TableHead, TableHeader, TableRow, TableData };
|
||||
@ -1,89 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
|
||||
|
||||
export default { title: 'Table' };
|
||||
|
||||
export const _default = () => (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Col 1</TableHeader>
|
||||
<TableHeader>Col 2</TableHeader>
|
||||
<TableHeader>Col 3</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[1, 2, 3].map(i => (
|
||||
<TableRow key={i}>
|
||||
<TableData>Column 1</TableData>
|
||||
<TableData>Column 2</TableData>
|
||||
<TableData>Column 3</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const striped = () => (
|
||||
<Table striped>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Col 1</TableHeader>
|
||||
<TableHeader>Col 2</TableHeader>
|
||||
<TableHeader>Col 3</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[1, 2, 3].map(i => (
|
||||
<TableRow key={i}>
|
||||
<TableData>Column 1</TableData>
|
||||
<TableData>Column 2</TableData>
|
||||
<TableData>Column 3</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const stripedAndOutlined = () => (
|
||||
<Table striped outlined>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Col 1</TableHeader>
|
||||
<TableHeader>Col 2</TableHeader>
|
||||
<TableHeader>Col 3</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[1, 2, 3].map(i => (
|
||||
<TableRow key={i}>
|
||||
<TableData>Column 1</TableData>
|
||||
<TableData>Column 2</TableData>
|
||||
<TableData>Column 3</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
export const compactAndOutlined = () => (
|
||||
<Table outlined compact>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Col 1</TableHeader>
|
||||
<TableHeader>Col 2</TableHeader>
|
||||
<TableHeader>Col 3</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{[1, 2, 3].map(i => (
|
||||
<TableRow key={i}>
|
||||
<TableData>Column 1</TableData>
|
||||
<TableData>Column 2</TableData>
|
||||
<TableData>Column 3</TableData>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
4599
packages/insomnia-components/dist/index.js
vendored
4599
packages/insomnia-components/dist/index.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,23 +0,0 @@
|
||||
// flow-typed signature: a00cf41b09af4862583460529d5cfcb9
|
||||
// flow-typed version: c6154227d1/classnames_v2.x.x/flow_>=v0.104.x
|
||||
|
||||
type $npm$classnames$Classes =
|
||||
| string
|
||||
| { [className: string]: *, ... }
|
||||
| false
|
||||
| void
|
||||
| null;
|
||||
|
||||
declare module "classnames" {
|
||||
declare module.exports: (
|
||||
...classes: Array<$npm$classnames$Classes | $npm$classnames$Classes[]>
|
||||
) => string;
|
||||
}
|
||||
|
||||
declare module "classnames/bind" {
|
||||
declare module.exports: $Exports<"classnames">;
|
||||
}
|
||||
|
||||
declare module "classnames/dedupe" {
|
||||
declare module.exports: $Exports<"classnames">;
|
||||
}
|
||||
@ -1,432 +0,0 @@
|
||||
// flow-typed signature: 2326ecddadf3dc85a1fe1dd91ba9a93c
|
||||
// flow-typed version: bac16db19f/styled-components_v4.x.x/flow_>=v0.104.x
|
||||
|
||||
// @flow
|
||||
|
||||
declare module 'styled-components' {
|
||||
declare class InterpolatableComponent<P> extends React$Component<P> {
|
||||
static +styledComponentId: string;
|
||||
}
|
||||
|
||||
declare export type Interpolation<P> =
|
||||
| ((executionContext: P) =>
|
||||
| ((executionContext: P) => InterpolationBase)
|
||||
| InterpolationBase
|
||||
)
|
||||
| Class<InterpolatableComponent<any>>
|
||||
| InterpolationBase
|
||||
|
||||
declare export type InterpolationBase =
|
||||
| CSSRules
|
||||
| KeyFrames
|
||||
| string
|
||||
| number
|
||||
| false // falsy values are OK, true is the only one not allowed, because it renders as "true"
|
||||
| null
|
||||
| void
|
||||
| {[ruleOrSelector: string]: string | number, ...} // CSS-in-JS object returned by polished are also supported
|
||||
|
||||
declare export type TaggedTemplateLiteral<I, R> = (strings: string[], ...interpolations: Interpolation<I>[]) => R
|
||||
|
||||
// Should this be `mixed` perhaps?
|
||||
declare export type CSSRules = Interpolation<any>[] // eslint-disable-line flowtype/no-weak-types
|
||||
|
||||
declare export type CSSConstructor = TaggedTemplateLiteral<any, CSSRules> // eslint-disable-line flowtype/no-weak-types
|
||||
declare export type KeyFramesConstructor = TaggedTemplateLiteral<any, KeyFrames> // eslint-disable-line flowtype/no-weak-types
|
||||
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<any, React$ComponentType<*>> // eslint-disable-line flowtype/no-weak-types
|
||||
|
||||
declare interface Tag<T> {
|
||||
styleTag: HTMLStyleElement | null;
|
||||
getIds(): string[];
|
||||
hasNameForId(id: string, name: string): boolean;
|
||||
insertMarker(id: string): T;
|
||||
insertRules(id: string, cssRules: string[], name: ?string): void;
|
||||
removeRules(id: string): void;
|
||||
css(): string;
|
||||
toHTML(additionalAttrs: ?string): string;
|
||||
toElement(): React$Element<*>;
|
||||
clone(): Tag<T>;
|
||||
sealed: boolean;
|
||||
}
|
||||
|
||||
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
|
||||
declare export class StyleSheet {
|
||||
static get master() : StyleSheet;
|
||||
static get instance() : StyleSheet;
|
||||
static reset(forceServer? : boolean) : void;
|
||||
|
||||
id : number;
|
||||
forceServer : boolean;
|
||||
target : ?HTMLElement;
|
||||
tagMap : { [string]: Tag<any>, ... }; // eslint-disable-line flowtype/no-weak-types
|
||||
deferred: { [string]: string[] | void, ... };
|
||||
rehydratedNames: { [string]: boolean, ... };
|
||||
ignoreRehydratedNames: { [string]: boolean, ... };
|
||||
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
|
||||
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
capacity: number;
|
||||
clones: StyleSheet[];
|
||||
|
||||
constructor(?HTMLElement) : this;
|
||||
rehydrate() : this;
|
||||
clone() : StyleSheet;
|
||||
sealAllTags() : void;
|
||||
makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
hasId(id: string) : boolean;
|
||||
hasNameForId(id: string, name: string) : boolean;
|
||||
deferredInject(id : string, cssRules : string[]) : void;
|
||||
inject(id: string, cssRules : string[], name? : string) : void;
|
||||
remove(id : string) : void;
|
||||
toHtml() : string;
|
||||
toReactElements() : React$ElementType[];
|
||||
}
|
||||
|
||||
declare export function isStyledComponent(target: any): boolean;
|
||||
|
||||
declare type SCMProps = {
|
||||
children?: React$Element<any>,
|
||||
sheet?: StyleSheet,
|
||||
target?: HTMLElement,
|
||||
...
|
||||
}
|
||||
|
||||
declare export var StyleSheetContext: React$Context<StyleSheet>;
|
||||
declare export var StyleSheetConsumer : React$ComponentType<{|
|
||||
children: (value: StyleSheet) => ?React$Node
|
||||
|}>
|
||||
declare var StyleSheetProvider: React$ComponentType<{|
|
||||
children?: React$Node,
|
||||
value: StyleSheet,
|
||||
|}>
|
||||
|
||||
declare export class StyleSheetManager extends React$Component<SCMProps> {
|
||||
getContext(sheet: ?StyleSheet, target: ?HTMLElement): StyleSheet;
|
||||
render(): React$Element<typeof(StyleSheetProvider)>
|
||||
}
|
||||
|
||||
declare export class ServerStyleSheet {
|
||||
instance: StyleSheet;
|
||||
masterSheet: StyleSheet;
|
||||
sealed: boolean;
|
||||
|
||||
seal(): void;
|
||||
collectStyles(children: any): React$Element<StyleSheetManager>;
|
||||
getStyleTags(): string;
|
||||
toReactElements(): React$ElementType[];
|
||||
// This seems to be use a port of node streams in the Browsers. Not gonna type this for now
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
interleaveWithNodeStream(stream: any): any;
|
||||
}
|
||||
|
||||
declare export class KeyFrames {
|
||||
id : string;
|
||||
name : string;
|
||||
rules : string[];
|
||||
|
||||
constructor(name : string, rules : string[]) : this;
|
||||
inject(StyleSheet) : void;
|
||||
toString() : string;
|
||||
getName() : string;
|
||||
}
|
||||
|
||||
// I think any is appropriate here?
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
declare export var css : CSSConstructor;
|
||||
declare export var keyframes : KeyFramesConstructor;
|
||||
declare export var createGlobalStyle : CreateGlobalStyleConstructor
|
||||
declare export var ThemeConsumer : React$ComponentType<{|
|
||||
children: (value: mixed) => ?React$Node
|
||||
|}>
|
||||
declare export var ThemeProvider: React$ComponentType<{|
|
||||
children?: ?React$Node,
|
||||
theme: mixed | (mixed) => mixed,
|
||||
|}>
|
||||
|
||||
/**
|
||||
Any because the intended use-case is for users to do:
|
||||
|
||||
import {ThemeContext} from 'styled-components';
|
||||
...
|
||||
const theme = React.useContext<MyTheme>(ThemeContext);
|
||||
|
||||
If they want DRY-er code, they could declare their own version of this via something like
|
||||
|
||||
import { ThemeContext as SCThemeContext } from 'styled-components';
|
||||
export const ThemeContext: React$Context<MyTheme> = SCThemeContext;
|
||||
|
||||
and then
|
||||
|
||||
import {ThemeContext} from './theme';
|
||||
*/
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
declare export var ThemeContext: React$Context<any>;
|
||||
|
||||
declare export type ThemeProps<T> = {|
|
||||
theme: T
|
||||
|}
|
||||
|
||||
declare export type PropsWithTheme<Props, T> = {|
|
||||
...ThemeProps<T>,
|
||||
...$Exact<Props>
|
||||
|}
|
||||
|
||||
declare export function withTheme<Theme, Config: {...}, Instance>(Component: React$AbstractComponent<Config, Instance>): React$AbstractComponent<$Diff<Config, ThemeProps<Theme | void>>, Instance>
|
||||
|
||||
declare export type StyledComponent<Props, Theme, Instance> = React$AbstractComponent<Props, Instance> & Class<InterpolatableComponent<Props>>
|
||||
|
||||
declare export type StyledFactory<StyleProps, Theme, Instance> = {|
|
||||
[[call]]: TaggedTemplateLiteral<PropsWithTheme<StyleProps, Theme>, StyledComponent<StyleProps, Theme, Instance>>;
|
||||
+attrs: <A: {...}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
|
||||
PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
|
||||
StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, Instance>
|
||||
>;
|
||||
|}
|
||||
|
||||
declare export type StyledShorthandFactory<V> = {|
|
||||
[[call]]: <StyleProps, Theme>(string[], ...Interpolation<PropsWithTheme<StyleProps, Theme>>[]) => StyledComponent<StyleProps, Theme, V>;
|
||||
+attrs: <A: {...}, StyleProps = {||}, Theme = {||}>(((StyleProps) => A) | A) => TaggedTemplateLiteral<
|
||||
PropsWithTheme<{|...$Exact<StyleProps>, ...$Exact<A>|}, Theme>,
|
||||
StyledComponent<React$Config<{|...$Exact<StyleProps>, ...$Exact<A>|}, $Exact<A>>, Theme, V>
|
||||
>;
|
||||
|}
|
||||
|
||||
|
||||
declare type BuiltinElementInstances = {
|
||||
a: React$ElementRef<'a'>,
|
||||
abbr: React$ElementRef<'abbr'>,
|
||||
address: React$ElementRef<'address'>,
|
||||
area: React$ElementRef<'area'>,
|
||||
article: React$ElementRef<'article'>,
|
||||
aside: React$ElementRef<'aside'>,
|
||||
audio: React$ElementRef<'audio'>,
|
||||
b: React$ElementRef<'b'>,
|
||||
base: React$ElementRef<'base'>,
|
||||
bdi: React$ElementRef<'bdi'>,
|
||||
bdo: React$ElementRef<'bdo'>,
|
||||
big: React$ElementRef<'big'>,
|
||||
blockquote: React$ElementRef<'blockquote'>,
|
||||
body: React$ElementRef<'body'>,
|
||||
br: React$ElementRef<'br'>,
|
||||
button: React$ElementRef<'button'>,
|
||||
canvas: React$ElementRef<'canvas'>,
|
||||
caption: React$ElementRef<'caption'>,
|
||||
cite: React$ElementRef<'cite'>,
|
||||
code: React$ElementRef<'code'>,
|
||||
col: React$ElementRef<'col'>,
|
||||
colgroup: React$ElementRef<'colgroup'>,
|
||||
data: React$ElementRef<'data'>,
|
||||
datalist: React$ElementRef<'datalist'>,
|
||||
dd: React$ElementRef<'dd'>,
|
||||
del: React$ElementRef<'del'>,
|
||||
details: React$ElementRef<'details'>,
|
||||
dfn: React$ElementRef<'dfn'>,
|
||||
dialog: React$ElementRef<'dialog'>,
|
||||
div: React$ElementRef<'div'>,
|
||||
dl: React$ElementRef<'dl'>,
|
||||
dt: React$ElementRef<'dt'>,
|
||||
em: React$ElementRef<'em'>,
|
||||
embed: React$ElementRef<'embed'>,
|
||||
fieldset: React$ElementRef<'fieldset'>,
|
||||
figcaption: React$ElementRef<'figcaption'>,
|
||||
figure: React$ElementRef<'figure'>,
|
||||
footer: React$ElementRef<'footer'>,
|
||||
form: React$ElementRef<'form'>,
|
||||
h1: React$ElementRef<'h1'>,
|
||||
h2: React$ElementRef<'h2'>,
|
||||
h3: React$ElementRef<'h3'>,
|
||||
h4: React$ElementRef<'h4'>,
|
||||
h5: React$ElementRef<'h5'>,
|
||||
h6: React$ElementRef<'h6'>,
|
||||
head: React$ElementRef<'head'>,
|
||||
header: React$ElementRef<'header'>,
|
||||
hgroup: React$ElementRef<'hgroup'>,
|
||||
hr: React$ElementRef<'hr'>,
|
||||
html: React$ElementRef<'html'>,
|
||||
i: React$ElementRef<'i'>,
|
||||
iframe: React$ElementRef<'iframe'>,
|
||||
img: React$ElementRef<'img'>,
|
||||
input: React$ElementRef<'input'>,
|
||||
ins: React$ElementRef<'ins'>,
|
||||
kbd: React$ElementRef<'kbd'>,
|
||||
label: React$ElementRef<'label'>,
|
||||
legend: React$ElementRef<'legend'>,
|
||||
li: React$ElementRef<'li'>,
|
||||
link: React$ElementRef<'link'>,
|
||||
main: React$ElementRef<'main'>,
|
||||
map: React$ElementRef<'map'>,
|
||||
mark: React$ElementRef<'mark'>,
|
||||
menu: React$ElementRef<'menu'>,
|
||||
meta: React$ElementRef<'meta'>,
|
||||
meter: React$ElementRef<'meter'>,
|
||||
nav: React$ElementRef<'nav'>,
|
||||
noscript: React$ElementRef<'noscript'>,
|
||||
object: React$ElementRef<'object'>,
|
||||
ol: React$ElementRef<'ol'>,
|
||||
optgroup: React$ElementRef<'optgroup'>,
|
||||
option: React$ElementRef<'option'>,
|
||||
output: React$ElementRef<'output'>,
|
||||
p: React$ElementRef<'p'>,
|
||||
param: React$ElementRef<'param'>,
|
||||
picture: React$ElementRef<'picture'>,
|
||||
pre: React$ElementRef<'pre'>,
|
||||
progress: React$ElementRef<'progress'>,
|
||||
q: React$ElementRef<'q'>,
|
||||
rp: React$ElementRef<'rp'>,
|
||||
rt: React$ElementRef<'rt'>,
|
||||
ruby: React$ElementRef<'ruby'>,
|
||||
s: React$ElementRef<'s'>,
|
||||
samp: React$ElementRef<'samp'>,
|
||||
script: React$ElementRef<'script'>,
|
||||
section: React$ElementRef<'section'>,
|
||||
select: React$ElementRef<'select'>,
|
||||
small: React$ElementRef<'small'>,
|
||||
source: React$ElementRef<'source'>,
|
||||
span: React$ElementRef<'span'>,
|
||||
strong: React$ElementRef<'strong'>,
|
||||
style: React$ElementRef<'style'>,
|
||||
sub: React$ElementRef<'sub'>,
|
||||
summary: React$ElementRef<'summary'>,
|
||||
sup: React$ElementRef<'sup'>,
|
||||
table: React$ElementRef<'table'>,
|
||||
tbody: React$ElementRef<'tbody'>,
|
||||
td: React$ElementRef<'td'>,
|
||||
textarea: React$ElementRef<'textarea'>,
|
||||
tfoot: React$ElementRef<'tfoot'>,
|
||||
th: React$ElementRef<'th'>,
|
||||
thead: React$ElementRef<'thead'>,
|
||||
time: React$ElementRef<'time'>,
|
||||
title: React$ElementRef<'title'>,
|
||||
tr: React$ElementRef<'tr'>,
|
||||
track: React$ElementRef<'track'>,
|
||||
u: React$ElementRef<'u'>,
|
||||
ul: React$ElementRef<'ul'>,
|
||||
var: React$ElementRef<'var'>,
|
||||
video: React$ElementRef<'video'>,
|
||||
wbr: React$ElementRef<'wbr'>,
|
||||
// SVG
|
||||
circle: React$ElementRef<'circle'>,
|
||||
clipPath: React$ElementRef<'clipPath'>,
|
||||
defs: React$ElementRef<'defs'>,
|
||||
ellipse: React$ElementRef<'ellipse'>,
|
||||
g: React$ElementRef<'g'>,
|
||||
image: React$ElementRef<'image'>,
|
||||
line: React$ElementRef<'line'>,
|
||||
linearGradient: React$ElementRef<'linearGradient'>,
|
||||
mask: React$ElementRef<'mask'>,
|
||||
path: React$ElementRef<'path'>,
|
||||
pattern: React$ElementRef<'pattern'>,
|
||||
polygon: React$ElementRef<'polygon'>,
|
||||
polyline: React$ElementRef<'polyline'>,
|
||||
radialGradient: React$ElementRef<'radialGradient'>,
|
||||
rect: React$ElementRef<'rect'>,
|
||||
stop: React$ElementRef<'stop'>,
|
||||
svg: React$ElementRef<'svg'>,
|
||||
text: React$ElementRef<'text'>,
|
||||
tspan: React$ElementRef<'tspan'>,
|
||||
// Deprecated, should be HTMLUnknownElement, but Flow doesn't support it
|
||||
keygen: React$ElementRef<'keygen'>,
|
||||
menuitem: React$ElementRef<'menuitem'>,
|
||||
...
|
||||
}
|
||||
|
||||
declare type BuiltinElementType<ElementName: string> = $ElementType<BuiltinElementInstances, ElementName>
|
||||
|
||||
declare type ConvenientShorthands = $ObjMap<
|
||||
BuiltinElementInstances,
|
||||
<V>(V) => StyledShorthandFactory<V>
|
||||
>
|
||||
|
||||
declare interface Styled {
|
||||
<StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>(ElementName): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>;
|
||||
<Comp: React$ComponentType<any>, Theme, OwnProps = React$ElementConfig<Comp>>(Comp): StyledFactory<{|...$Exact<OwnProps>|}, Theme, Comp>;
|
||||
}
|
||||
|
||||
declare export default Styled & ConvenientShorthands
|
||||
}
|
||||
|
||||
|
||||
declare module 'styled-components/native' {
|
||||
import type {
|
||||
CSSRules,
|
||||
CSSConstructor,
|
||||
KeyFramesConstructor,
|
||||
CreateGlobalStyleConstructor,
|
||||
StyledComponent,
|
||||
Interpolation,
|
||||
|
||||
// "private" types
|
||||
TaggedTemplateLiteral,
|
||||
StyledFactory,
|
||||
StyledShorthandFactory,
|
||||
ThemeProps,
|
||||
PropsWithTheme,
|
||||
} from 'styled-components';
|
||||
|
||||
declare type BuiltinElementInstances = {
|
||||
ActivityIndicator: React$ComponentType<{...}>,
|
||||
ActivityIndicatorIOS: React$ComponentType<{...}>,
|
||||
ART: React$ComponentType<{...}>,
|
||||
Button: React$ComponentType<{...}>,
|
||||
DatePickerIOS: React$ComponentType<{...}>,
|
||||
DrawerLayoutAndroid: React$ComponentType<{...}>,
|
||||
Image: React$ComponentType<{...}>,
|
||||
ImageBackground: React$ComponentType<{...}>,
|
||||
ImageEditor: React$ComponentType<{...}>,
|
||||
ImageStore: React$ComponentType<{...}>,
|
||||
KeyboardAvoidingView: React$ComponentType<{...}>,
|
||||
ListView: React$ComponentType<{...}>,
|
||||
MapView: React$ComponentType<{...}>,
|
||||
Modal: React$ComponentType<{...}>,
|
||||
NavigatorIOS: React$ComponentType<{...}>,
|
||||
Picker: React$ComponentType<{...}>,
|
||||
PickerIOS: React$ComponentType<{...}>,
|
||||
ProgressBarAndroid: React$ComponentType<{...}>,
|
||||
ProgressViewIOS: React$ComponentType<{...}>,
|
||||
ScrollView: React$ComponentType<{...}>,
|
||||
SegmentedControlIOS: React$ComponentType<{...}>,
|
||||
Slider: React$ComponentType<{...}>,
|
||||
SliderIOS: React$ComponentType<{...}>,
|
||||
SnapshotViewIOS: React$ComponentType<{...}>,
|
||||
Switch: React$ComponentType<{...}>,
|
||||
RecyclerViewBackedScrollView: React$ComponentType<{...}>,
|
||||
RefreshControl: React$ComponentType<{...}>,
|
||||
SafeAreaView: React$ComponentType<{...}>,
|
||||
StatusBar: React$ComponentType<{...}>,
|
||||
SwipeableListView: React$ComponentType<{...}>,
|
||||
SwitchAndroid: React$ComponentType<{...}>,
|
||||
SwitchIOS: React$ComponentType<{...}>,
|
||||
TabBarIOS: React$ComponentType<{...}>,
|
||||
Text: React$ComponentType<{...}>,
|
||||
TextInput: React$ComponentType<{...}>,
|
||||
ToastAndroid: React$ComponentType<{...}>,
|
||||
ToolbarAndroid: React$ComponentType<{...}>,
|
||||
Touchable: React$ComponentType<{...}>,
|
||||
TouchableHighlight: React$ComponentType<{...}>,
|
||||
TouchableNativeFeedback: React$ComponentType<{...}>,
|
||||
TouchableOpacity: React$ComponentType<{...}>,
|
||||
TouchableWithoutFeedback: React$ComponentType<{...}>,
|
||||
View: React$ComponentType<{...}>,
|
||||
ViewPagerAndroid: React$ComponentType<{...}>,
|
||||
WebView: React$ComponentType<{...}>,
|
||||
FlatList: React$ComponentType<{...}>,
|
||||
SectionList: React$ComponentType<{...}>,
|
||||
VirtualizedList: React$ComponentType<{...}>,
|
||||
...
|
||||
}
|
||||
|
||||
declare type BuiltinElementType<ElementName: string> = $ElementType<BuiltinElementInstances, ElementName>
|
||||
|
||||
declare type ConvenientShorthands = $ObjMap<
|
||||
BuiltinElementInstances,
|
||||
<V>(V) => StyledShorthandFactory<V>
|
||||
>
|
||||
|
||||
declare interface Styled {
|
||||
<StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>(ElementName): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>;
|
||||
<Comp: React$ComponentType<any>, Theme, OwnProps = React$ElementConfig<Comp>>(Comp): StyledFactory<{|...$Exact<OwnProps>|}, Theme, Comp>;
|
||||
}
|
||||
|
||||
declare export default Styled & ConvenientShorthands
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import _Button from './components/button';
|
||||
import _NoticeTable from './components/notice-table';
|
||||
import _SvgIcon from './components/svg-icon';
|
||||
import * as table from './components/table';
|
||||
|
||||
export const Button = _Button;
|
||||
export const NoticeTable = _NoticeTable;
|
||||
export const SvgIcon = _SvgIcon;
|
||||
export const Table = table.Table;
|
||||
export const TableBody = table.TableBody;
|
||||
export const TableData = table.TableData;
|
||||
export const TableHead = table.TableHead;
|
||||
export const TableHeader = table.TableHeader;
|
||||
export const TableRow = table.TableRow;
|
||||
13789
packages/insomnia-components/package-lock.json
generated
13789
packages/insomnia-components/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,29 +0,0 @@
|
||||
{
|
||||
"name": "insomnia-components",
|
||||
"version": "2.1.6",
|
||||
"author": "Gregory Schier <greg.schier@konghq.com>",
|
||||
"description": "Insomnia UI component library",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"build": "parcel build ./*.js --bundle-node-modules --no-minify --target browser",
|
||||
"storybook": "start-storybook --port 3223",
|
||||
"bootstrap": "rimraf node_modules/fsevents"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run build"
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
"@storybook/addon-info": "^5.2.8",
|
||||
"@storybook/react": "^5.2.8",
|
||||
"parcel-bundler": "^1.12.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"styled-components": "^4.4.1"
|
||||
},
|
||||
"gitHead": "e46bf021cf4b4379e31d2b2d9025d476d6839fa1"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user