@akinon/ui-layout 0.0.2 → 0.2.0

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.
Files changed (59) hide show
  1. package/dist/cjs/Content.d.ts.map +1 -0
  2. package/dist/cjs/Content.js +9 -0
  3. package/dist/cjs/Flex.d.ts +4 -0
  4. package/dist/cjs/Flex.d.ts.map +1 -0
  5. package/dist/cjs/Flex.js +5 -0
  6. package/dist/cjs/Footer.d.ts.map +1 -0
  7. package/dist/cjs/Footer.js +9 -0
  8. package/dist/cjs/Grid.d.ts +4 -0
  9. package/dist/cjs/Grid.d.ts.map +1 -0
  10. package/dist/cjs/Grid.js +6 -0
  11. package/dist/cjs/Header.d.ts.map +1 -0
  12. package/dist/cjs/Header.js +9 -0
  13. package/dist/{Layout.d.ts → cjs/Layout.d.ts} +0 -1
  14. package/dist/cjs/Layout.d.ts.map +1 -0
  15. package/dist/cjs/Layout.js +9 -0
  16. package/dist/{Sider.d.ts → cjs/Sider.d.ts} +1 -0
  17. package/dist/cjs/Sider.d.ts.map +1 -0
  18. package/dist/cjs/Sider.js +18 -0
  19. package/dist/cjs/index.css +56 -0
  20. package/dist/{index.d.ts → cjs/index.d.ts} +3 -0
  21. package/dist/cjs/index.d.ts.map +1 -0
  22. package/dist/cjs/index.js +32 -0
  23. package/dist/esm/Content.d.ts +6 -0
  24. package/dist/esm/Content.d.ts.map +1 -0
  25. package/dist/esm/Content.js +5 -0
  26. package/dist/esm/Flex.d.ts +4 -0
  27. package/dist/esm/Flex.d.ts.map +1 -0
  28. package/dist/esm/Flex.js +2 -0
  29. package/dist/esm/Footer.d.ts +6 -0
  30. package/dist/esm/Footer.d.ts.map +1 -0
  31. package/dist/esm/Footer.js +5 -0
  32. package/dist/esm/Grid.d.ts +4 -0
  33. package/dist/esm/Grid.d.ts.map +1 -0
  34. package/dist/esm/Grid.js +2 -0
  35. package/dist/esm/Header.d.ts +6 -0
  36. package/dist/esm/Header.d.ts.map +1 -0
  37. package/dist/esm/Header.js +5 -0
  38. package/dist/esm/Layout.d.ts +6 -0
  39. package/dist/esm/Layout.d.ts.map +1 -0
  40. package/dist/esm/Layout.js +5 -0
  41. package/dist/esm/Sider.d.ts +12 -0
  42. package/dist/esm/Sider.d.ts.map +1 -0
  43. package/dist/esm/Sider.js +14 -0
  44. package/dist/esm/index.css +56 -0
  45. package/dist/esm/index.d.ts +27 -0
  46. package/dist/esm/index.d.ts.map +1 -0
  47. package/dist/esm/index.js +15 -0
  48. package/package.json +18 -11
  49. package/dist/Content.d.ts.map +0 -1
  50. package/dist/Footer.d.ts.map +0 -1
  51. package/dist/Header.d.ts.map +0 -1
  52. package/dist/Layout.d.ts.map +0 -1
  53. package/dist/Sider.d.ts.map +0 -1
  54. package/dist/index.cjs +0 -119
  55. package/dist/index.d.ts.map +0 -1
  56. package/dist/index.js +0 -4855
  57. /package/dist/{Content.d.ts → cjs/Content.d.ts} +0 -0
  58. /package/dist/{Footer.d.ts → cjs/Footer.d.ts} +0 -0
  59. /package/dist/{Header.d.ts → cjs/Header.d.ts} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,iBAAkB,YAAY,sBAEjD,CAAC"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Content = void 0;
4
+ const antd_1 = require("antd");
5
+ const React = require("react");
6
+ const Content = ({ children }) => {
7
+ return React.createElement(antd_1.Layout.Content, null, children);
8
+ };
9
+ exports.Content = Content;
@@ -0,0 +1,4 @@
1
+ import { Flex, FlexProps } from 'antd';
2
+ export type { FlexProps };
3
+ export { Flex };
4
+ //# sourceMappingURL=Flex.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEvC,YAAY,EAAE,SAAS,EAAE,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Flex = void 0;
4
+ const antd_1 = require("antd");
5
+ Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return antd_1.Flex; } });
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/Footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAM/C,CAAC"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Footer = void 0;
4
+ const antd_1 = require("antd");
5
+ const React = require("react");
6
+ const Footer = ({ children }) => {
7
+ return (React.createElement(antd_1.Layout.Footer, { style: { textAlign: 'center' } }, children));
8
+ };
9
+ exports.Footer = Footer;
@@ -0,0 +1,4 @@
1
+ import { Col, ColProps, Row, RowProps } from 'antd';
2
+ export type { ColProps, RowProps };
3
+ export { Col, Row };
4
+ //# sourceMappingURL=Grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAEpD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Row = exports.Col = void 0;
4
+ const antd_1 = require("antd");
5
+ Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return antd_1.Col; } });
6
+ Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return antd_1.Row; } });
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAE/C,CAAC"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Header = void 0;
4
+ const antd_1 = require("antd");
5
+ const React = require("react");
6
+ const Header = ({ children }) => {
7
+ return React.createElement(antd_1.Layout.Header, null, children);
8
+ };
9
+ exports.Header = Header;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  interface LayoutProps {
3
2
  children: any;
4
3
  }
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/Layout.tsx"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACnB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,KAAG,WAElD,CAAC"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Layout = void 0;
4
+ const antd_1 = require("antd");
5
+ const React = require("react");
6
+ const Layout = ({ children }) => {
7
+ return React.createElement(antd_1.Layout, { style: { minHeight: '100vh' } }, children);
8
+ };
9
+ exports.Layout = Layout;
@@ -1,3 +1,4 @@
1
+ import './index.css';
1
2
  import * as React from 'react';
2
3
  export interface SiderProps {
3
4
  children?: React.ReactNode;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sider.d.ts","sourceRoot":"","sources":["../../src/Sider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,+EAOf,UAAU,sBA8BZ,CAAC"}
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Sider = void 0;
4
+ require("./index.css");
5
+ const antd_1 = require("antd");
6
+ const React = require("react");
7
+ const Sider = ({ children, direction, collapsed, collapsedWidth, iconUrl, brandImageUrl }) => {
8
+ let LogoContainer;
9
+ if (iconUrl && brandImageUrl) {
10
+ LogoContainer = (React.createElement("div", { className: `logo-container ${collapsed ? 'collapsed' : ''}` },
11
+ React.createElement("img", { className: "logo", src: iconUrl, alt: "icon", width: 20, height: 20 }),
12
+ React.createElement("img", { className: "brand-image", src: brandImageUrl, alt: "brand-image", height: 20 })));
13
+ }
14
+ return (React.createElement(antd_1.Layout.Sider, { collapsible: true, collapsed: collapsed, collapsedWidth: collapsedWidth, trigger: null, width: 250, className: `${direction}` },
15
+ LogoContainer,
16
+ children));
17
+ };
18
+ exports.Sider = Sider;
@@ -0,0 +1,56 @@
1
+ /* TODO normalize cross-browser incosistencies */
2
+ body {
3
+ padding: 0;
4
+ margin: 0;
5
+ }
6
+
7
+ .akinon-layout {
8
+ &:not(.akinon-layout-has-sider) {
9
+ border-inline: 1px solid var(--color-gray-900);
10
+ }
11
+
12
+ .akinon-layout-header {
13
+ padding-inline: 1rem;
14
+ height: 3.5rem;
15
+ border-bottom: 1px solid var(--color-gray-900);
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+ line-height: unset;
20
+ position: sticky;
21
+ top: 0;
22
+ z-index: 999;
23
+ }
24
+
25
+ .akinon-layout-sider {
26
+ position: sticky;
27
+ top: 0;
28
+ height: 100vh;
29
+ overflow-y: auto;
30
+
31
+ /* TODO normalize scrollbars. they took up huge space */
32
+ &.left {
33
+ inset-inline-start: 0;
34
+ }
35
+
36
+ &.right {
37
+ inset-inline-end: 0;
38
+ }
39
+
40
+ .logo-container {
41
+ display: flex;
42
+ flex-direction: row;
43
+ justify-content: center;
44
+ align-items: center;
45
+ height: 3.5rem;
46
+ gap: 0.8rem;
47
+ /* border-bottom: 1px solid var(--color-gray-900); */
48
+
49
+ &.collapsed {
50
+ .brand-image {
51
+ display: none;
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import './index.css';
2
3
  import { Content } from './Content';
3
4
  import { Footer } from './Footer';
4
5
  import { Header } from './Header';
@@ -21,4 +22,6 @@ export type LeftSiderItem = {
21
22
  disabled?: boolean;
22
23
  };
23
24
  export { Layout };
25
+ export * from './Flex';
26
+ export * from './Grid';
24
27
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.Layout = void 0;
18
+ require("./index.css");
19
+ const Content_1 = require("./Content");
20
+ const Footer_1 = require("./Footer");
21
+ const Header_1 = require("./Header");
22
+ const Layout_1 = require("./Layout");
23
+ const Sider_1 = require("./Sider");
24
+ const Layout = Object.assign(Layout_1.Layout, {
25
+ Header: Header_1.Header,
26
+ Footer: Footer_1.Footer,
27
+ Content: Content_1.Content,
28
+ Sider: Sider_1.Sider
29
+ });
30
+ exports.Layout = Layout;
31
+ __exportStar(require("./Flex"), exports);
32
+ __exportStar(require("./Grid"), exports);
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ export interface ContentProps {
3
+ children?: React.ReactNode;
4
+ }
5
+ export declare const Content: ({ children }: ContentProps) => React.JSX.Element;
6
+ //# sourceMappingURL=Content.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,iBAAkB,YAAY,sBAEjD,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Layout as AntLayout } from 'antd';
2
+ import * as React from 'react';
3
+ export const Content = ({ children }) => {
4
+ return React.createElement(AntLayout.Content, null, children);
5
+ };
@@ -0,0 +1,4 @@
1
+ import { Flex, FlexProps } from 'antd';
2
+ export type { FlexProps };
3
+ export { Flex };
4
+ //# sourceMappingURL=Flex.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEvC,YAAY,EAAE,SAAS,EAAE,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -0,0 +1,2 @@
1
+ import { Flex } from 'antd';
2
+ export { Flex };
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ export interface FooterProps {
3
+ children?: React.ReactNode;
4
+ }
5
+ export declare const Footer: ({ children }: FooterProps) => React.JSX.Element;
6
+ //# sourceMappingURL=Footer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/Footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAM/C,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Layout as AntLayout } from 'antd';
2
+ import * as React from 'react';
3
+ export const Footer = ({ children }) => {
4
+ return (React.createElement(AntLayout.Footer, { style: { textAlign: 'center' } }, children));
5
+ };
@@ -0,0 +1,4 @@
1
+ import { Col, ColProps, Row, RowProps } from 'antd';
2
+ export type { ColProps, RowProps };
3
+ export { Col, Row };
4
+ //# sourceMappingURL=Grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAEpD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC"}
@@ -0,0 +1,2 @@
1
+ import { Col, Row } from 'antd';
2
+ export { Col, Row };
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ export interface HeaderProps {
3
+ children?: React.ReactNode;
4
+ }
5
+ export declare const Header: ({ children }: HeaderProps) => React.JSX.Element;
6
+ //# sourceMappingURL=Header.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAE/C,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Layout as AntLayout } from 'antd';
2
+ import * as React from 'react';
3
+ export const Header = ({ children }) => {
4
+ return React.createElement(AntLayout.Header, null, children);
5
+ };
@@ -0,0 +1,6 @@
1
+ interface LayoutProps {
2
+ children: any;
3
+ }
4
+ export declare const Layout: ({ children }: LayoutProps) => JSX.Element;
5
+ export {};
6
+ //# sourceMappingURL=Layout.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/Layout.tsx"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACnB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,KAAG,WAElD,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Layout as AntLayout } from 'antd';
2
+ import * as React from 'react';
3
+ export const Layout = ({ children }) => {
4
+ return React.createElement(AntLayout, { style: { minHeight: '100vh' } }, children);
5
+ };
@@ -0,0 +1,12 @@
1
+ import './index.css';
2
+ import * as React from 'react';
3
+ export interface SiderProps {
4
+ children?: React.ReactNode;
5
+ direction: 'left' | 'right';
6
+ collapsed?: boolean;
7
+ collapsedWidth?: number | string;
8
+ iconUrl?: string;
9
+ brandImageUrl?: string;
10
+ }
11
+ export declare const Sider: ({ children, direction, collapsed, collapsedWidth, iconUrl, brandImageUrl }: SiderProps) => React.JSX.Element;
12
+ //# sourceMappingURL=Sider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sider.d.ts","sourceRoot":"","sources":["../../src/Sider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,+EAOf,UAAU,sBA8BZ,CAAC"}
@@ -0,0 +1,14 @@
1
+ import './index.css';
2
+ import { Layout as AntLayout } from 'antd';
3
+ import * as React from 'react';
4
+ export const Sider = ({ children, direction, collapsed, collapsedWidth, iconUrl, brandImageUrl }) => {
5
+ let LogoContainer;
6
+ if (iconUrl && brandImageUrl) {
7
+ LogoContainer = (React.createElement("div", { className: `logo-container ${collapsed ? 'collapsed' : ''}` },
8
+ React.createElement("img", { className: "logo", src: iconUrl, alt: "icon", width: 20, height: 20 }),
9
+ React.createElement("img", { className: "brand-image", src: brandImageUrl, alt: "brand-image", height: 20 })));
10
+ }
11
+ return (React.createElement(AntLayout.Sider, { collapsible: true, collapsed: collapsed, collapsedWidth: collapsedWidth, trigger: null, width: 250, className: `${direction}` },
12
+ LogoContainer,
13
+ children));
14
+ };
@@ -0,0 +1,56 @@
1
+ /* TODO normalize cross-browser incosistencies */
2
+ body {
3
+ padding: 0;
4
+ margin: 0;
5
+ }
6
+
7
+ .akinon-layout {
8
+ &:not(.akinon-layout-has-sider) {
9
+ border-inline: 1px solid var(--color-gray-900);
10
+ }
11
+
12
+ .akinon-layout-header {
13
+ padding-inline: 1rem;
14
+ height: 3.5rem;
15
+ border-bottom: 1px solid var(--color-gray-900);
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+ line-height: unset;
20
+ position: sticky;
21
+ top: 0;
22
+ z-index: 999;
23
+ }
24
+
25
+ .akinon-layout-sider {
26
+ position: sticky;
27
+ top: 0;
28
+ height: 100vh;
29
+ overflow-y: auto;
30
+
31
+ /* TODO normalize scrollbars. they took up huge space */
32
+ &.left {
33
+ inset-inline-start: 0;
34
+ }
35
+
36
+ &.right {
37
+ inset-inline-end: 0;
38
+ }
39
+
40
+ .logo-container {
41
+ display: flex;
42
+ flex-direction: row;
43
+ justify-content: center;
44
+ align-items: center;
45
+ height: 3.5rem;
46
+ gap: 0.8rem;
47
+ /* border-bottom: 1px solid var(--color-gray-900); */
48
+
49
+ &.collapsed {
50
+ .brand-image {
51
+ display: none;
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
@@ -0,0 +1,27 @@
1
+ /// <reference types="react" />
2
+ import './index.css';
3
+ import { Content } from './Content';
4
+ import { Footer } from './Footer';
5
+ import { Header } from './Header';
6
+ import { Layout as InternalLayout } from './Layout';
7
+ import { Sider } from './Sider';
8
+ type CompoundedComponent = typeof InternalLayout & {
9
+ Header: typeof Header;
10
+ Footer: typeof Footer;
11
+ Content: typeof Content;
12
+ Sider: typeof Sider;
13
+ };
14
+ declare const Layout: CompoundedComponent;
15
+ export type LeftSiderItem = {
16
+ key: string;
17
+ label: string;
18
+ icon?: React.ReactNode;
19
+ className?: string;
20
+ onClick?: () => void;
21
+ children?: LeftSiderItem[];
22
+ disabled?: boolean;
23
+ };
24
+ export { Layout };
25
+ export * from './Flex';
26
+ export * from './Grid';
27
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
@@ -0,0 +1,15 @@
1
+ import './index.css';
2
+ import { Content } from './Content';
3
+ import { Footer } from './Footer';
4
+ import { Header } from './Header';
5
+ import { Layout as InternalLayout } from './Layout';
6
+ import { Sider } from './Sider';
7
+ const Layout = Object.assign(InternalLayout, {
8
+ Header,
9
+ Footer,
10
+ Content,
11
+ Sider
12
+ });
13
+ export { Layout };
14
+ export * from './Flex';
15
+ export * from './Grid';
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@akinon/ui-layout",
3
- "version": "0.0.2",
3
+ "version": "0.2.0",
4
4
  "private": false,
5
5
  "type": "module",
6
- "main": "dist/index.js",
7
- "module": "dist/index.js",
6
+ "main": "dist/esm/index.js",
7
+ "module": "dist/esm/index.js",
8
8
  "files": [
9
9
  "dist"
10
10
  ],
@@ -13,26 +13,33 @@
13
13
  },
14
14
  "devDependencies": {
15
15
  "clean-package": "2.2.0",
16
- "@akinon/vite-config": "^0.1.1",
17
- "eslint-config-custom": "0.1.0",
18
- "tsconfig": "0.0.0"
16
+ "copyfiles": "^2.4.1",
17
+ "rimraf": "^5.0.5",
18
+ "typescript": "^5.2.2",
19
+ "@akinon/vite-config": "0.2.0",
20
+ "@akinon/eslint-config": "0.1.0",
21
+ "@akinon/typescript-config": "0.0.0"
19
22
  },
20
23
  "peerDependencies": {
21
24
  "react": ">=18",
22
25
  "react-dom": ">=18"
23
26
  },
24
27
  "clean-package": "../../../clean-package.config.json",
25
- "types": "dist/index.d.ts",
28
+ "types": "dist/esm/index.d.ts",
26
29
  "exports": {
27
30
  ".": {
28
- "types": "./dist/index.d.ts",
29
- "import": "./dist/index.js",
30
- "require": "./dist/index.cjs"
31
+ "types": "./dist/esm/index.d.ts",
32
+ "import": "./dist/esm/index.js",
33
+ "require": "./dist/cjs/index.js"
31
34
  },
32
35
  "./package.json": "./package.json"
33
36
  },
34
37
  "scripts": {
35
- "build": "vite build",
38
+ "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
39
+ "build:esm": "tsc --outDir dist/esm",
40
+ "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
41
+ "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
42
+ "clean": "rimraf dist/",
36
43
  "lint": "eslint *.ts*",
37
44
  "test": "vitest run",
38
45
  "test:ui": "vitest --ui",
@@ -1 +0,0 @@
1
- {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../src/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,iBAAkB,YAAY,sBAEjD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../src/Footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAM/C,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../src/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAE/C,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../src/Layout.tsx"],"names":[],"mappings":";AAGA,UAAU,WAAW;IACnB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,KAAG,WAElD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Sider.d.ts","sourceRoot":"","sources":["../src/Sider.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,+EAOf,UAAU,sBA8BZ,CAAC"}