2 | 
Construct-UI
6 | 7 |
8 |
9 | ### A [Mithril.js](https://github.com/MithrilJS/mithril.js) UI library.
10 |
11 | [](https://www.npmjs.com/package/construct-ui)
12 | 
13 | [](https://gitter.im/construct-ui/Lobby)
14 |
15 |
16 |
17 | ## Documentation
18 | Check out the [documentation website](https://vrimar.github.io/construct-ui) for installation instructions and getting started.
19 |
20 | ## Playground
21 | Check out [codesandbox](https://codesandbox.io/s/x7zzjovzyz) examples for basic usage.
22 |
23 | ## Development
24 | 1. `npm i`
25 | 2. `npm run generate:icons`
26 | 3. `npm run generate:docs`
27 | 4. `npm run watch:docs`
28 |
29 | ## Credits
30 | Inspired by [blueprint](https://github.com/palantir/blueprint), [polythene](https://github.com/ArthurClemens/polythene) and [ant-design](https://github.com/ant-design/ant-design).
31 |
--------------------------------------------------------------------------------
/scripts/generateIcons.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const ICONS = require('feather-icons/dist/icons.json');
4 |
5 | const GENERATED_ICON_PATH = path.resolve(process.cwd(), './src/components/icon/generated');
6 |
7 | if (!fs.existsSync(GENERATED_ICON_PATH)) {
8 | fs.mkdirSync(GENERATED_ICON_PATH);
9 | }
10 |
11 | async function writeLinesToFile(filename, ...lines) {
12 | const outputPath = path.join(GENERATED_ICON_PATH, filename);
13 | const contents = ['/* eslint:disable */', ...lines, ''].join('\n');
14 | fs.writeFileSync(outputPath, contents);
15 | }
16 |
17 | function exportIconNames() {
18 | return Object.keys(ICONS).map(iconName => {
19 | const constName = iconName.replace(/-/g, '_').toUpperCase();
20 | return `export const ${constName} = '${iconName}';`;
21 | });
22 | }
23 |
24 | function exportIconContents() {
25 | const contents = Object.keys(ICONS).map(iconName => `'${iconName}' : '${ICONS[iconName]}'\n`);
26 | return `export default {
27 | ${contents}
28 | }`;
29 | }
30 |
31 | function generateIndex() {
32 | return `import * as Icons from './IconNames';
33 | import IconContents from './IconContents';
34 |
35 | export { Icons, IconContents };
36 | `;
37 | }
38 |
39 | writeLinesToFile('IconNames.ts', ...exportIconNames());
40 | writeLinesToFile('IconContents.ts', exportIconContents());
41 | writeLinesToFile('index.ts', generateIndex());
42 |
--------------------------------------------------------------------------------
/src/_shared/_utility.scss:
--------------------------------------------------------------------------------
1 | .cui-align-right {
2 | display: flex;
3 | justify-content: flex-end;
4 | }
5 |
6 | .cui-align-left {
7 | display: flex;
8 | justify-content: flex-start;
9 | }
10 |
11 | .cui-fluid {
12 | width:100%;
13 | }
14 |
15 | .cui-disabled {
16 | cursor: not-allowed !important;
17 | opacity: 0.65 !important;
18 | }
19 |
20 | .cui-hidden {
21 | display: none;
22 | }
23 |
--------------------------------------------------------------------------------
/src/_shared/align.ts:
--------------------------------------------------------------------------------
1 | export const Align = {
2 | LEFT: 'left',
3 | CENTER: 'center',
4 | RIGHT: 'right'
5 | } as const;
6 |
7 | export type Align = typeof Align[keyof typeof Align];
8 |
--------------------------------------------------------------------------------
/src/_shared/attrs.ts:
--------------------------------------------------------------------------------
1 | import m from 'mithril';
2 | import { IconName, Intent, Size } from '..';
3 | import { IIconAttrs } from '../components/icon';
4 |
5 | export type Style = string | Partial'; 7 | 8 | export class CollapseExample { 9 | private isOpen = false; 10 | private content = [SAMPLE_TEXT]; 11 | 12 | public view() { 13 | return m(Example, { center: false, src: EXAMPLE_SRC }, [ 14 | m(Button, { 15 | label: this.isOpen ? 'Hide collapse' : 'Show collapse', 16 | intent: 'primary', 17 | onclick: this.toggleOpen, 18 | style: 'margin-right: 10px' 19 | }), 20 | 21 | m(Button, { 22 | label: 'Append content', 23 | onclick: this.appendContent 24 | }), 25 | 26 | m(Collapse, { duration: 200, isOpen: this.isOpen }, [ 27 | m(Card, { style: 'margin-top:20px' }, this.content.map((text) => m.trust(text))) 28 | ]) 29 | ]); 30 | } 31 | 32 | private appendContent = () => { 33 | this.content.push(SAMPLE_TEXT); 34 | }; 35 | 36 | private toggleOpen = () => { 37 | this.isOpen = !this.isOpen; 38 | }; 39 | } 40 | -------------------------------------------------------------------------------- /src/components/collapse/index.scss: -------------------------------------------------------------------------------- 1 | @import '../../_shared/variables'; 2 | 3 | .cui-collapse { 4 | height: 0; 5 | overflow: hidden; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/control-group/control-group.md: -------------------------------------------------------------------------------- 1 | @# Control Group 2 | A control group arranges inputs, buttons, button groups and selects into one unit. Note: Each individual child component must specify its own intent/size. 3 | 4 | @example ControlGroupExample 5 | 6 | @## ControlGroup Attrs 7 | @interface IControlGroupAttrs 8 | -------------------------------------------------------------------------------- /src/components/control-group/examples/index.ts: -------------------------------------------------------------------------------- 1 | import m from 'mithril'; 2 | import { ControlGroup, Button, Input, Icon, Icons, Select, Spinner, CustomSelect } from '@/'; 3 | import { Example } from '@shared/examples'; 4 | 5 | const EXAMPLE_SRC = 'components/control-group/examples/index.ts'; 6 | const options = ['Option 1', 'Option 2']; 7 | 8 | export class ControlGroupExample { 9 | public view() { 10 | return m(Example, { direction: 'column', src: EXAMPLE_SRC }, [ 11 | m(ControlGroup, { style: 'margin-bottom:15px' }, [ 12 | m(Input, { 13 | contentLeft: m(Icon, { name: Icons.SEARCH }), 14 | placeholder: 'Input placeholder...' 15 | }), 16 | m(Button, { 17 | iconLeft: Icons.USERS, 18 | label: 'Button' 19 | }), 20 | m(Select, { options }) 21 | ]), 22 | 23 | m(ControlGroup, [ 24 | m(Button, { 25 | iconLeft: Icons.SETTINGS, 26 | label: 'Action' 27 | }), 28 | m(Input, { 29 | contentLeft: m(Icon, { name: Icons.USER }), 30 | contentRight: m(Spinner, { active: true }), 31 | placeholder: 'Enter name...' 32 | }), 33 | m(CustomSelect, { 34 | options, 35 | defaultValue: 'Option 2' 36 | }) 37 | ]) 38 | ]); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/control-group/index.scss: -------------------------------------------------------------------------------- 1 | @import '../../_shared/variables'; 2 | 3 | .cui-control-group { 4 | display: inline-flex; 5 | vertical-align: middle; 6 | margin-right: $cui-base-size; 7 | 8 | &:last-child { 9 | margin:0; 10 | } 11 | 12 | > :first-child { 13 | border-radius: $cui-border-radius 0 0 $cui-border-radius; 14 | margin-right: -1px; 15 | } 16 | 17 | > :last-child { 18 | border-radius: 0 $cui-border-radius $cui-border-radius 0; 19 | } 20 | 21 | > :only-child { 22 | border-radius: $cui-border-radius; 23 | margin:0; 24 | } 25 | 26 | > :not(:first-child):not(:last-child) { 27 | border-radius: 0; 28 | margin-right: -1px; 29 | } 30 | 31 | .cui-select select, 32 | .cui-input input, 33 | .cui-custom-select button { 34 | border-radius: inherit; 35 | } 36 | 37 | & :focus, 38 | & :hover, 39 | & :active, 40 | & .cui-active { 41 | z-index: 1; 42 | } 43 | 44 | & :focus { 45 | z-index: 1; 46 | } 47 | 48 | &.cui-fluid > * { 49 | flex: 1 1 auto; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/control-group/index.spec.ts: -------------------------------------------------------------------------------- 1 | import m from 'mithril'; 2 | import { describe, beforeEach, expect, it } from 'vitest'; 3 | import { ControlGroup, Classes, IControlGroupAttrs, Button, Input } from '@/'; 4 | import { hasClass } from '@test-utils'; 5 | 6 | describe('control-group', () => { 7 | const el = () => document.body.firstChild as HTMLElement; 8 | 9 | beforeEach(() => m.mount(document.body, null)); 10 | 11 | it('Renders correctly', () => { 12 | mount({ 13 | style: 'margin: 0' 14 | }); 15 | 16 | expect(hasClass(el(), Classes.CONTROL_GROUP)).toBeTruthy(); 17 | expect(el().hasAttribute('style')).toBeTruthy(); 18 | }); 19 | 20 | it('Renders children', () => { 21 | mount({}); 22 | 23 | const length = el().children.length; 24 | expect(length).toBe(2); 25 | }); 26 | 27 | it('Passes through html attrs', () => { 28 | mount({ 29 | id: 1, 30 | name: 'name' 31 | }); 32 | 33 | expect(el().hasAttribute('id')).toBeTruthy(); 34 | expect(el().hasAttribute('name')).toBeTruthy(); 35 | }); 36 | 37 | function mount(attrs: IControlGroupAttrs) { 38 | const component = { 39 | view: () => m(ControlGroup, { ...attrs }, [ 40 | m(Button, { label: 'label' }), 41 | m(Input) 42 | ]) 43 | }; 44 | m.mount(document.body, component); 45 | } 46 | }); 47 | -------------------------------------------------------------------------------- /src/components/control-group/index.ts: -------------------------------------------------------------------------------- 1 | import m from 'mithril'; 2 | import classnames from 'classnames'; 3 | import { Classes, IAttrs } from '../../_shared'; 4 | 5 | export interface IControlGroupAttrs extends IAttrs { 6 | [htmlAttrs: string]: any; 7 | } 8 | 9 | export class ControlGroup implements m.Component
@import '~construct-ui/lib/scss/variables';
16 |
17 | .red {
18 | color: $red100
19 | }
20 |