Skip to content

Commit 7a6d3a5

Browse files
JulianCataldoJulianCataldo
committed
feat: add components for all ui libraries packages
1 parent fc247f6 commit 7a6d3a5

Some content is hidden

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

80 files changed

+2165
-0
lines changed

‎packages/carbon/src/widgets/_all.scss

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.theme-carbon {
2+
font-family: var(--cds-font-sans);
3+
font-size: 16px;
4+
}
5+
6+
// @use '@carbon/styles/scss/reset';
7+
// @use '@carbon/styles/scss/theme';
8+
// @use '@carbon/styles/scss/themes';
9+
10+
// :root {
11+
// @include theme.theme(themes.$white);
12+
// background-color: var(--cds-background);
13+
// color: var(--cds-text-primary);
14+
// }
15+
16+
// @use '@carbon/styles/scss/reset';
17+
// @use '@carbon/styles/scss/theme';
18+
// @use '@carbon/styles/scss/themes';
19+
// @use '@carbon/styles/scss/fonts';
20+
21+
// .theme-carbon {
22+
// --cds-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
23+
24+
// @include theme.theme(themes.$g100);
25+
// background-color: var(--cds-background);
26+
// color: var(--cds-text-primary);
27+
// }
28+
29+
// background-color: var(--cds-background);
30+
// color: var(--cds-text-primary);
31+
32+
// @use '@carbon/styles/scss/reset';
33+
// @use '@carbon/styles/scss/theme';
34+
// @use '@carbon/styles/scss/themes';
35+
// // @use '@carbon/styles/scss/fonts';
36+
37+
// // @import '@carbon/type/scss/type';
38+
// // @import '@carbon/type/scss/font-face/mono';
39+
// // @import '@carbon/type/scss/font-face/sans';
40+
41+
// // @include carbon--type-reset();
42+
// // @include carbon--font-face-mono();
43+
// // @include carbon--font-face-sans();
44+
45+
// @import '@carbon/type/scss/font-face/sans';
46+
47+
// @include carbon--font-face-sans();

‎packages/carbon/src/widgets/number.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/number-input/index.js';
7+
import type CDSTextInput from '@carbon/web-components/es/components/number-input/number-input.js';
8+
9+
export const number: Widgets['number'] = (options) => html`
10+
<cds-number-input
11+
.supportingText=${options.helpText}
12+
.id=${options.id}
13+
.label=${options.label}
14+
step=${typeof options.step === 'number' ? options.step : 0.1}
15+
min=${ifDefined(options.min)}
16+
max=${ifDefined(options.max)}
17+
.name=${options.id}
18+
.placeholder=${options.placeholder}
19+
.required=${options.required}
20+
value=${ifDefined(options.value) /* keep-sorted end */}
21+
@input=${(event: CustomEvent) => {
22+
const { valueAsNumber: newValue } = event.target as CDSTextInput;
23+
options.valueChangedCallback?.(newValue);
24+
}}
25+
@keydown=${options.handleKeydown}
26+
>
27+
<style>
28+
md-outlined-text-field {
29+
width: 100%;
30+
}
31+
</style>
32+
</cds-number-input>
33+
`;

‎packages/carbon/src/widgets/object.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.theme-carbon.widget-object {
2+
.widget-object__children {
3+
position: relative;
4+
display: flex;
5+
flex-direction: column;
6+
gap: 2em 0;
7+
padding: 1.5em 1em;
8+
}
9+
// margin: 0;
10+
// font-weight: 300;
11+
// border: none;
12+
// // border: 1px solid transparent;
13+
// border-radius: 1rem;
14+
// transition-timing-function: ease-in-out;
15+
// transition-duration: 250ms;
16+
17+
// legend {
18+
// width: 100%;
19+
// font-size: 1.5em;
20+
// border-bottom: 1px solid ///;
21+
// }
22+
23+
.widget-object__description {
24+
margin: 1rem 0 0rem 0;
25+
opacity: calc(3 / 4);
26+
font-size: var(--cds-label-02-font-size);
27+
}
28+
}

‎packages/carbon/src/widgets/object.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { nothing, html } from 'lit';
2+
import type { Widgets } from '@j_c/jsfe__types';
3+
4+
import '@carbon/web-components/es/components/form-group/index.js';
5+
import '@carbon/web-components/es/components/stack/index.js';
6+
7+
export const object: Widgets['object'] = (options) => html`
8+
<cds-form-group
9+
.legendText=${options.label ?? ''}
10+
id=${options.id}
11+
class="theme-carbon widget-object"
12+
part="widget-object"
13+
>
14+
<!-- .message=${true}
15+
.messageText=$ {options.helpText} -->
16+
<!-- -->
17+
${options.helpText
18+
? html`<div class="widget-object__description">${options.helpText}</div>`
19+
: nothing}
20+
<div class="widget-object__children">${options.children}</div>
21+
</cds-form-group>
22+
`;

‎packages/carbon/src/widgets/submit.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.theme-carbon.widget-submit {
2+
display: flex;
3+
justify-content: center;
4+
margin: 2.5rem 0;
5+
font-size: 4em;
6+
}

‎packages/carbon/src/widgets/submit.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { html } from 'lit';
2+
3+
import type { Widgets } from '@j_c/jsfe__types';
4+
5+
import '@carbon/web-components/es/components/button/index.js';
6+
7+
export const submit: Widgets['submit'] = (options) => html`
8+
<!-- -->
9+
<div id=${options.id} class="theme-carbon widget-submit">
10+
<cds-button type="submit" isExpressive size="lg">Submit</cds-button>
11+
</div>
12+
`;

‎packages/carbon/src/widgets/text.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.theme-carbon.widget-text {
2+
//
3+
}

‎packages/carbon/src/widgets/text.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/text-input/index.js';
7+
import type CDSTextInput from '@carbon/web-components/es/components/text-input/text-input.js';
8+
9+
export const text: Widgets['text'] = (options) => html`
10+
<cds-text-input
11+
class="theme-carbon widget-text"
12+
.type=${'text' /* keep-sorted start */}
13+
.helperText=${options.helpText ?? ''}
14+
.id=${options.id}
15+
.label=${options.label ?? ''}
16+
maxCount=${ifDefined(options.maxLength)}
17+
minCount=${ifDefined(options.minLength)}
18+
.name=${options.id}
19+
.enableCounter=${true}
20+
pattern=${ifDefined(options.pattern)}
21+
.placeholder=${options.placeholder ?? ''}
22+
.required=${options.required ?? false}
23+
.value=${options.value ?? '' /* keep-sorted end */}
24+
@input=${(event: CustomEvent) => {
25+
const { value: newValue } = event.target as CDSTextInput;
26+
options.valueChangedCallback?.(newValue);
27+
}}
28+
@keydown=${options.handleKeydown}
29+
>
30+
</cds-text-input>
31+
`;

‎packages/carbon/src/widgets/textarea.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/textarea/index.js';
7+
import type CDSTextArea from '@carbon/web-components/es/components/textarea/textarea.js';
8+
9+
export const textarea: Widgets['text'] = (options) => html`
10+
<cds-textarea
11+
class="theme-carbon widget-textarea"
12+
.type=${'text'}
13+
.helperText=${options.helpText ?? ''}
14+
.id=${options.id}
15+
.label=${options.label ?? ''}
16+
maxLength=${ifDefined(options.maxLength)}
17+
minLength=${ifDefined(options.minLength)}
18+
.name=${options.id}
19+
pattern=${ifDefined(options.pattern)}
20+
.placeholder=${options.placeholder ?? ''}
21+
.required=${options.required ?? false}
22+
.value=${options.value ?? ''}
23+
@input=${(event: CustomEvent) => {
24+
const { value: newValue } = event.target as CDSTextArea;
25+
options.valueChangedCallback?.(newValue);
26+
}}
27+
@keydown=${options.handleKeydown}
28+
>
29+
</cds-textarea>
30+
`;

‎packages/material/src/styles.scss

+1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
@import './widgets/_all.scss';
33
@import './widgets/callout.scss';
44
@import './widgets/object.scss';
5+
@import './widgets/range.scss';
56
@import './widgets/submit.scss';
67
// keep-sorted end

‎packages/material/src/widgets/_all.scss

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:host {
2+
--md-ref-typeface-brand: 'Roboto';
3+
--md-ref-typeface-plain: system-ui;
4+
}
5+
6+
.theme-material {
7+
font-family: Roboto, system-ui;
8+
}
9+
10+
// .material {
11+
// &[part='field-checkbox'] {
12+
// /* cursor: pointer; */
13+
// /* width: 100%; */
14+
// display: flex;
15+
// /* gap: 1em; */
16+
// align-items: center;
17+
18+
// small {
19+
// color: var(--md-sys-color-on-surface-variant);
20+
// }
21+
// }
22+
23+
// // Enumerations
24+
// &[part='field-select'] {
25+
// --md-menu-container-color: var(--md-sys-color-background);
26+
27+
// &,
28+
// md-select-option,
29+
// md-menu {
30+
// width: 100%;
31+
// }
32+
33+
// &::part(menu) {
34+
// width: 100%;
35+
// }
36+
// }
37+
// }
38+
39+
// .dummy {
40+
// --md-sys-color-primary: #88ceff;
41+
// --md-sys-color-on-primary: #00344d;
42+
// --md-sys-color-primary-container: #004c6d;
43+
// --md-sys-color-on-primary-container: #c8e6ff;
44+
// --md-sys-color-secondary: #b7c9d8;
45+
// --md-sys-color-on-secondary: #21323f;
46+
// --md-sys-color-secondary-container: #384956;
47+
// --md-sys-color-on-secondary-container: #d3e5f5;
48+
// --md-sys-color-tertiary: #cec0e8;
49+
// --md-sys-color-on-tertiary: #352b4b;
50+
// --md-sys-color-tertiary-container: #4b4163;
51+
// --md-sys-color-on-tertiary-container: #e9ddff;
52+
// --md-sys-color-error: #ffb4ab;
53+
// --md-sys-color-on-error: #690005;
54+
// --md-sys-color-error-container: #93000a;
55+
// --md-sys-color-on-error-container: #ffb4ab;
56+
// --md-sys-color-background: #191c1e;
57+
// --md-sys-color-on-background: #e2e2e5;
58+
// --md-sys-color-surface: #191c1e;
59+
// --md-sys-color-on-surface: #e2e2e5;
60+
// --md-sys-color-surface-variant: #41484d;
61+
// --md-sys-color-on-surface-variant: #c1c7ce;
62+
// --md-sys-color-outline: #8b9198;
63+
// --md-sys-color-outline-variant: #41484d;
64+
// --md-sys-color-shadow: #000;
65+
// --md-sys-color-scrim: #000;
66+
// --md-sys-color-inverse-surface: #e2e2e5;
67+
// --md-sys-color-inverse-on-surface: #2e3133;
68+
// --md-sys-color-inverse-primary: #006590;
69+
// }

‎packages/material/src/widgets/callout.scss

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// NOTE: Extracted from Shoelace docs website
2+
3+
/* Callouts */
4+
.theme-material[part='widget-callout'] {
5+
position: relative;
6+
padding: 1rem 1.5rem 1rem 2rem;
7+
margin: 1rem 0;
8+
9+
color: var(--md-sys-color-error);
10+
// background-color: var(--md-sys-color-error-container);
11+
border: solid 1px var(--md-sys-color-error);
12+
border-color: var(--md-sys-color-error-container);
13+
border-left: solid 3px var(--md-sys-color-error);
14+
border-radius: 0.25rem;
15+
16+
& > :first-child {
17+
margin-top: 0;
18+
}
19+
20+
& > :last-child {
21+
margin-bottom: 0;
22+
}
23+
24+
// &.callout--tip {
25+
// color: var(--sl-color-primary-800);
26+
// background-color: var(--sl-color-primary-100);
27+
// border-left-color: var(--sl-color-primary-600);
28+
// }
29+
30+
&::before {
31+
position: absolute;
32+
top: calc(50% - 0.8rem);
33+
left: calc(-0.8rem - 2px);
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
width: 1.6rem;
38+
height: 1.6rem;
39+
clip-path: circle(50% at 50% 50%);
40+
// font-family: var(--sl-font-serif);
41+
// font-weight: var(--sl-font-weight-bold);
42+
color: var(--md-sys-color-on-error);
43+
content: '';
44+
}
45+
46+
// &.callout--tip::before {
47+
// font-style: italic;
48+
// content: 'i';
49+
// background-color: var(--sl-color-primary-600);
50+
// }
51+
52+
&.callout--warning {
53+
// color: var(--sl-color-warning-800);
54+
// background-color: var(--sl-color-warning-100);
55+
// border-left-color: var(--sl-color-warning-600);
56+
}
57+
58+
&.callout--warning::before {
59+
content: '!';
60+
background-color: var(--md-sys-color-error);
61+
}
62+
63+
// &.callout--danger {
64+
// color: var(--sl-color-danger-800);
65+
// background-color: var(--sl-color-danger-100);
66+
// border-left-color: var(--sl-color-danger-600);
67+
// }
68+
69+
// &.callout--danger::before {
70+
// content: '‼';
71+
// background-color: var(--sl-color-danger-600);
72+
// }
73+
74+
// & + & {
75+
// margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));
76+
// }
77+
78+
// a {
79+
// color: inherit;
80+
// }
81+
}

0 commit comments

Comments
 (0)