Skip to content

Commit 39d92d9

Browse files
elycruzelycruz
committed
Import of all inflight work in 'dev' branch.
2 parents 688691f + d5995c4 commit 39d92d9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+2845
-1555
lines changed

‎.eslintrc.json

-4
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@
2121
"error",
2222
2
2323
],
24-
"linebreak-style": [
25-
"error",
26-
"unix"
27-
],
2824
"quotes": [
2925
"error",
3026
"single"

‎ATOMIC-UI-JS.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ An atomic, CSS first, user interface library.
1515
- [ ] `.x-input`
1616
- [ ] `.x-mds-icon`
1717
- [ ] `.x-menu`
18-
- [x] `.x-radio`
18+
- [x] `.x-radio` - Available also via `.x-input`.
1919
- [ ] `.x-section`
2020
- [ ] `.x-select`
2121
- [ ] `.x-table`

‎apps/atomic-ui-js-site/src/app/css-components/button/page.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,26 @@ export default function ButtonPage() {
1818
<header>
1919
<h2>Button</h2>
2020
</header>
21+
22+
<div className="x-section-body">
23+
<dl>
24+
<dt>Button Sizes</dt>
25+
<dd className="x-btn-group">
26+
<button className="x-btn x-theme-primary x-outlined" type="button">
27+
<XRippleComponent></XRippleComponent>
28+
<span>Default</span>
29+
</button>
30+
{Object.keys(sizeVariants).map(k3 => k3 === 'Normal' ? null :
31+
<button key={`sized-button-${k3}`}
32+
className={`x-btn x-${sizeVariants[k3]} x-theme-primary x-outlined`}
33+
type="button">
34+
<XRippleComponent></XRippleComponent>
35+
<span>{k3}</span>
36+
</button>)}
37+
</dd>
38+
</dl>
39+
</div>
40+
2141
<div className="x-section-body">
2242
<h3>Button Varieties</h3>
2343

‎apps/atomic-ui-js-site/src/app/components/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/x-appbar/page.module.scss ‎apps/atomic-ui-js-site/src/app/custom-elements/x-appbar/page.module.scss

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/x-appbar/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-appbar/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/field/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-field/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/custom-elements/x-input/alignment/page.module.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.fieldset {
2+
gap: 1rem;
3+
}

‎apps/atomic-ui-js-site/src/app/custom-elements/x-input/alignment/page.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {inputTypes} from '@/data/controls-metadata';
2+
3+
let _uuid = 0;
4+
5+
export default function XInputAlignmentPage() {
6+
return <section>
7+
<header>
8+
<h2>Input Controls Alignment</h2>
9+
</header>
10+
<article>
11+
<form action="#">
12+
<fieldset className={'x-flex x-flex-row-wrap gap-16px'}>
13+
<legend>Horizontal alignment</legend>
14+
15+
{inputTypes.map((inputType) => {
16+
const id = `example-${_uuid++}-${inputType}`;
17+
const isButton = /reset|submit|button$/i.test(inputType);
18+
19+
if (inputType === 'hidden') return;
20+
21+
return <>
22+
{!isButton ? <label htmlFor={id}>{inputType}:</label> : null}
23+
<input
24+
type={inputType}
25+
className={`${inputType === 'button' ? 'x-btn x-primary x-filled' : ''}`}
26+
defaultValue={isButton ? inputType[0].toUpperCase() + inputType.slice(1) : ''}
27+
name={`example-${_uuid}-${inputType}`}
28+
id={id}
29+
/>
30+
</>;
31+
})}
32+
</fieldset>
33+
</form>
34+
</article>
35+
</section>;
36+
}

‎apps/atomic-ui-js-site/src/app/components/input/page.module.css ‎apps/atomic-ui-js-site/src/app/custom-elements/x-input/page.module.css

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/input/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-input/page.tsx

+69-64
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,45 @@
11
import styles from './page.module.css';
2+
import {inputTypes} from '@/data/controls-metadata';
23

3-
export default function InputPage() {
4+
let _uuid = Number.MIN_SAFE_INTEGER;
45

5-
// All HTMLInputElement types
6-
// ----
7-
const inputTypes = [
8-
'button',
9-
'checkbox',
10-
'color',
11-
'date',
12-
'datetime-local',
13-
'email',
14-
'file',
15-
'hidden',
16-
'image',
17-
'month',
18-
'number',
19-
'password',
20-
'radio',
21-
'range',
22-
'reset',
23-
'search',
24-
'submit',
25-
'tel',
26-
'text',
27-
'time',
28-
'url',
29-
'week'
30-
],
31-
32-
elementsConfig = inputTypes.map(type => {
33-
let options = null;
34-
35-
switch (type) {
36-
case 'button':
37-
case 'image':
38-
case 'submit':
39-
case 'reset':
40-
return [type, {value: type[0].toUpperCase() + type.substring(1)}];
41-
case 'hidden':
42-
break;
43-
case 'date':
44-
options = {showReadonly: true, readonly2Value: '2023-05-01'};
45-
break;
46-
case 'datetime-local':
47-
options = {showReadonly: true, readonly2Value: '2023-05-10T11:59'};
48-
break;
49-
case 'time':
50-
options = {showReadonly: true, readonly2Value: '11:59'};
51-
break;
52-
case 'number':
53-
options = {showReadonly: true, readonly2Value: '1000'};
54-
break;
55-
case 'email':
56-
options = {showReadonly: true, readonly2Value: '[email protected]'};
57-
break;
58-
case 'file':
59-
options = {showReadonly: true};
60-
break;
61-
default:
62-
options = {showReadonly: true, readonly2Value: 'Readonly'};
63-
break;
64-
}
65-
66-
return [type, options];
67-
});
6+
export default function InputPage() {
7+
const elementsConfig = inputTypes.map(type => {
8+
let options = null;
9+
10+
switch (type) {
11+
case 'button':
12+
case 'image':
13+
case 'submit':
14+
case 'reset':
15+
return [type, {value: type[0].toUpperCase() + type.substring(1)}];
16+
case 'hidden':
17+
break;
18+
case 'date':
19+
options = {showReadonly: true, readonly2Value: '2023-05-01'};
20+
break;
21+
case 'datetime-local':
22+
options = {showReadonly: true, readonly2Value: '2023-05-10T11:59'};
23+
break;
24+
case 'time':
25+
options = {showReadonly: true, readonly2Value: '11:59'};
26+
break;
27+
case 'number':
28+
options = {showReadonly: true, readonly2Value: '1000'};
29+
break;
30+
case 'email':
31+
options = {showReadonly: true, readonly2Value: '[email protected]'};
32+
break;
33+
case 'file':
34+
options = {showReadonly: true};
35+
break;
36+
default:
37+
options = {showReadonly: true, readonly2Value: 'Readonly'};
38+
break;
39+
}
40+
41+
return [type, options];
42+
});
6843

6944
return <section className="x-flex x-flex-row-wrap">
7045
<article className={styles['article']}>
@@ -193,5 +168,35 @@ export default function InputPage() {
193168
</fieldset>
194169
</form>
195170
</article>
171+
172+
<article>
173+
<header>
174+
<h3>Input Controls Alignment</h3>
175+
</header>
176+
177+
<form action="#">
178+
<fieldset className={`${styles.fieldset} x-flex x-flex-row-wrap`}>
179+
<legend>Horizontal alignment</legend>
180+
181+
{inputTypes.map((inputType) => {
182+
const id = `example-${_uuid++}-${inputType}`;
183+
const isButton = /reset|submit|button$/i.test(inputType);
184+
185+
if (inputType === 'hidden') return;
186+
187+
return <>
188+
{!isButton ? <label htmlFor={id}>{inputType}:</label> : null}
189+
<input
190+
type={inputType}
191+
className={`${inputType === 'button' ? 'x-btn x-primary x-filled' : ''}`}
192+
defaultValue={isButton ? inputType[0].toUpperCase() + inputType.slice(1) : ''}
193+
name={`example-${_uuid}-${inputType}`}
194+
id={id}
195+
/>
196+
</>;
197+
})}
198+
</fieldset>
199+
</form>
200+
</article>
196201
</section>;
197202
}

‎apps/atomic-ui-js-site/src/app/components/menu/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-menu/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/ripple/page.module.css ‎apps/atomic-ui-js-site/src/app/custom-elements/x-ripple/page.module.css

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/ripple/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-ripple/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/x-toggleonscroll/page.module.scss ‎apps/atomic-ui-js-site/src/app/custom-elements/x-toggleonscroll/page.module.scss

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/components/x-toggleonscroll/page.tsx ‎apps/atomic-ui-js-site/src/app/custom-elements/x-toggleonscroll/page.tsx

File renamed without changes.

‎apps/atomic-ui-js-site/src/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import '../css/index.scss';
3-
import {AppNav} from '../features/app-nav';
3+
import {AppNav} from '@/features/app-nav';
44
import {AppNavToggle} from '@/components/app-nav-toggle';
55

66
export const metadata = {

‎apps/atomic-ui-js-site/src/app/other/size-reference/page.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {factorsOf, multiplesOf, commonFactorsOf, fib} from 'atomic-ui-js/utils/number.js';
2+
3+
export default function Page() {
4+
const factorsOf144 = factorsOf(144),
5+
multiplesOf4 = multiplesOf(4, Math.round(144 / 4)),
6+
multiplesOf6 = multiplesOf(6, Math.round(144 / 6)),
7+
multiplesOf8 = multiplesOf(8, Math.round(144 / 8)),
8+
fib144 = fib(144),
9+
commonNumbers = (() => {
10+
const counts = []
11+
.concat(factorsOf144, multiplesOf4, multiplesOf6, multiplesOf8, fib144)
12+
.reduce((acc, curr) => {
13+
if (acc[curr]) acc[curr] += 1;
14+
else acc[curr] = 1;
15+
return acc;
16+
}, {} as Record<number, number>)
17+
;
18+
return Object.keys(counts).reduce((acc, curr) => {
19+
if (counts[curr] > 1) acc.push(parseInt(curr, 10));
20+
return acc;
21+
}, [] as number[])
22+
.sort((a, b) => a - b);
23+
})(),
24+
commonNumberFactors = commonFactorsOf(...new Set(commonNumbers));
25+
26+
return (
27+
<section>
28+
<header>
29+
<h3>
30+
Size values in library
31+
</h3>
32+
</header>
33+
<article>
34+
<p>Note: The values here are all tentative (except the &ldquo;common&rdquo; set, below).</p>
35+
<dl>
36+
<dt>Factors of 144</dt>
37+
<dd>{factorsOf144.join(', ')}</dd>
38+
{([
39+
[4, multiplesOf4],
40+
[6, multiplesOf6],
41+
[8, multiplesOf8]
42+
] as [number, number[]][]
43+
).flatMap(([x, set], i) => <>
44+
<dt key={`dt-${x}-${i}`}>Multiples of {x} (up to 144)</dt>
45+
<dd key={`dt-${x}-${i}-2`}>
46+
{set.join(', ')}
47+
</dd>
48+
</>)
49+
}
50+
<dt>Fibonacci (up to 144)</dt>
51+
<dd>{fib144.join(', ')}</dd>
52+
<dt>Common (from above)</dt>
53+
<dd>
54+
<span>{commonNumbers.join(', ')}</span>
55+
<p>Strive to use this set aside from other numbers as the values here
56+
will pair up well with each other due to them having the common factors {commonNumberFactors.join(', ')}.</p>
57+
</dd>
58+
</dl>
59+
</article>
60+
</section>
61+
);
62+
}

‎apps/atomic-ui-js-site/src/data/controls-metadata.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export const
2+
3+
/**
4+
* All HTMLInputElement type names.
5+
*
6+
* @type {string[]}
7+
*/
8+
inputTypes = [
9+
'button',
10+
'checkbox',
11+
'color',
12+
'date',
13+
'datetime-local',
14+
'email',
15+
'file',
16+
'hidden',
17+
'image',
18+
'month',
19+
'number',
20+
'password',
21+
'radio',
22+
'range',
23+
'reset',
24+
'search',
25+
'submit',
26+
'tel',
27+
'text',
28+
'time',
29+
'url',
30+
'week'
31+
];

0 commit comments

Comments
 (0)