thread-ui 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -53
- package/dist/components/media/info-card/info-card.d.ts.map +1 -1
- package/dist/components/media/info-card/info-card.js +14 -1
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/info-card/info-card.types.d.ts +2 -1
- package/dist/components/media/info-card/info-card.types.d.ts.map +1 -1
- package/dist/styles/panda.css +4 -4
- package/dist/utils/get-utility-font-size/getUtilityFontSize.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,68 +1,30 @@
|
|
|
1
1
|
# Thread UI
|
|
2
2
|
|
|
3
|
-
Thread is a UI Library I created for use in my personal website.
|
|
3
|
+
Thread is a UI Library I created for use in my [personal website](http://fisherandrew.org).
|
|
4
4
|
|
|
5
5
|
# Get Started
|
|
6
6
|
|
|
7
7
|
All components work out of the box. Documentation coming soon to thread.fisherandrew.org
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
Thread-UI supports custom themes created by the user that override the default theme, even when using SSR in Next.js. To implement a custom theme, first create a config file in the root of the project named `thread.config.ts`. Define the Theme attributes you'd like to override, initilize it using using the thread-ui `createTheme` function, and export your theme.
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
import { createTheme } from 'thread-ui';
|
|
15
|
-
|
|
16
|
-
const threadConfig = {
|
|
17
|
-
colors: {
|
|
18
|
-
primary: {
|
|
19
|
-
light: '#4f46e5',
|
|
20
|
-
main: '#4338ca',
|
|
21
|
-
dark: '#3730a3',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
} as const;
|
|
9
|
+
# Features
|
|
25
10
|
|
|
26
|
-
|
|
27
|
-
export const ThreadTheme = createTheme(threadConfig);
|
|
28
|
-
```
|
|
11
|
+
## SSR
|
|
29
12
|
|
|
30
|
-
|
|
13
|
+
All CSS is pre-generated using `panda-css`, so most components can easily be rendered server-side.
|
|
31
14
|
|
|
32
|
-
|
|
33
|
-
'use client';
|
|
34
|
-
import { ThemeProvider } from 'thread-ui';
|
|
35
|
-
import { ThreadTheme } from '@/thread.config';
|
|
15
|
+
## Custom Themes
|
|
36
16
|
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<ThemeProvider initialTheme={ThreadTheme} initialMode="light">
|
|
40
|
-
{children}
|
|
41
|
-
</ThemeProvider>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
```
|
|
17
|
+
Thread-UI supports custom themes created by the user that override the default theme, even when using SSR in Next.js. To implement a custom theme, simply wrap the application contents in the `ThemeProvider` Component. The provider can be configured with a partial of the `Theme` type, to allow you to customize as much or as little as you want!
|
|
45
18
|
|
|
46
|
-
|
|
19
|
+
For Example:
|
|
47
20
|
|
|
48
21
|
```
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
<html lang="en">
|
|
58
|
-
<body className={`${font.className}`}>
|
|
59
|
-
<Providers>
|
|
60
|
-
<NavMenu />
|
|
61
|
-
<main>{children}</main>
|
|
62
|
-
<Footer />
|
|
63
|
-
</Providers>
|
|
64
|
-
</body>
|
|
65
|
-
</html>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
22
|
+
const ThreadTheme: ThemeConfig = {
|
|
23
|
+
primary: {
|
|
24
|
+
light: '#4f46e5',
|
|
25
|
+
main: '#4338ca',
|
|
26
|
+
dark: '#3730a3',
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
return <ThemeProvider theme={ThreadTheme}>{children}</ThemeProvider>;
|
|
68
30
|
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"info-card.d.ts","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"info-card.d.ts","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,eAAO,MAAM,QAAQ,GAAI,2BAA2B,aAAa,4CAiFhE,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Icon } from '../../../components/ui';
|
|
2
3
|
import { css } from '../../../styled-system/css';
|
|
3
4
|
export const InfoCard = ({ title, url, icon, img }) => {
|
|
4
5
|
const styles = {
|
|
@@ -37,6 +38,7 @@ export const InfoCard = ({ title, url, icon, img }) => {
|
|
|
37
38
|
}),
|
|
38
39
|
caption: css({
|
|
39
40
|
display: 'flex',
|
|
41
|
+
gap: '8px',
|
|
40
42
|
justifyContent: 'flex-start',
|
|
41
43
|
alignItems: 'center',
|
|
42
44
|
}),
|
|
@@ -52,6 +54,17 @@ export const InfoCard = ({ title, url, icon, img }) => {
|
|
|
52
54
|
color: 'text.standard',
|
|
53
55
|
}),
|
|
54
56
|
};
|
|
55
|
-
|
|
57
|
+
const renderIcon = () => {
|
|
58
|
+
if (typeof icon === 'string') {
|
|
59
|
+
return _jsx(Icon, { name: icon, size: 24 });
|
|
60
|
+
}
|
|
61
|
+
else if (icon.type === 'svg') {
|
|
62
|
+
return _jsx("img", { className: styles.captionIcon, height: 23, width: 23, src: icon.content, alt: "Article Icon" });
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
_jsx("span", { className: styles.captionIcon, role: "img", children: JSON.parse(`"${icon.content}"`) });
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
return (_jsx("div", { className: styles.card, children: _jsxs("a", { href: url, className: styles.link, children: [_jsx("div", { className: styles.imageWrapper, children: _jsx("img", { className: styles.image, src: img, alt: "Article Cover Image" }) }), _jsx("div", { className: styles.captionBlock, children: _jsxs("span", { className: styles.caption, children: [renderIcon(), _jsx("p", { className: styles.captionText, children: title })] }) })] }) }));
|
|
56
69
|
};
|
|
57
70
|
//# sourceMappingURL=info-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"info-card.js","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"info-card.types.d.ts","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"info-card.types.d.ts","sourceRoot":"","sources":["../../../../src/components/media/info-card/info-card.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC"}
|
package/dist/styles/panda.css
CHANGED
|
@@ -846,6 +846,10 @@
|
|
|
846
846
|
border-style: solid;
|
|
847
847
|
}
|
|
848
848
|
|
|
849
|
+
.thread-ui-gap_8px {
|
|
850
|
+
gap: 8px;
|
|
851
|
+
}
|
|
852
|
+
|
|
849
853
|
.thread-ui-gap_24px {
|
|
850
854
|
gap: 24px;
|
|
851
855
|
}
|
|
@@ -878,10 +882,6 @@
|
|
|
878
882
|
gap: 3rem;
|
|
879
883
|
}
|
|
880
884
|
|
|
881
|
-
.thread-ui-gap_8px {
|
|
882
|
-
gap: 8px;
|
|
883
|
-
}
|
|
884
|
-
|
|
885
885
|
.thread-ui-px_16px {
|
|
886
886
|
padding-inline: 16px;
|
|
887
887
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { UtilitySizeOptions } from '../../types';
|
|
2
|
-
export declare const getUtilityFontSize: (size: UtilitySizeOptions) => "0.75rem" | "
|
|
2
|
+
export declare const getUtilityFontSize: (size: UtilitySizeOptions) => "0.75rem" | "1rem" | "1.25rem";
|
|
3
3
|
//# sourceMappingURL=getUtilityFontSize.d.ts.map
|