v0.2.0

CHANGELOG.md

@@ -1,60 +1,20 @@
 # Changelog
 
-## v0.1.20
+## v0.2.0
 
-### Added focus interaction on focusable elements
-  - `/src/scss/animation.scss`
+### Added the universal prop `nostyle` and added the functions `cn()` and `opt()` that make it work.
+  - Removed `/deps.ts`
+  - `/src/types.ts`
+  - `/src/utils.ts`
+  - `/components/**/setup.ts`
+
+### Minor updates
+  - `/import_map.json`
   - `/src/scss/components.scss`
-  - `/src/scss/index.scss`
+  - `/static/style.css`
 
 ## Roadmap
 
-### v0.1
-
-  - [x] Update all components to GarliCSS and display on index route.
-  - [x] Document all needed fixes and upgrades possible using this structure:
-    - Add a comment where the fix should be added using the `@todo`.
-    - Grade the fix using one to three `!`s.
-      - `!!!`: Urgent
-      - `!!`: Before next version.
-      - `!`: After next version.
-      - ` `: Whenever
-      - `?`: Possible fix, question it later.
-    - Substitue the `Features` section of this document to a list of every feature with its pending.
-  - [x] Fix `!!`s and `!!!`s.
-  - [x] Reorganize project structure
-    - [x] Every component has its own directory.
-    - [x] Every component directory contains a setup file.
-    - [x] Every setup file contains the prop type (`iComponent`).
-    - [x] Every value inside a prop type (`iComponent`) must not be optional
-      - Use a default value of null instead of undefined, in types where undefined is a useful option.
-  - [x] Fix the fwd ref problem.
-    - [x] Card
-    - [x] Code
-    - [x] Footer
-    - [x] Header
-    - [x] Input
-    - [x] Layout
-    - [x] Linkmap
-    - [x] Main
-    - [x] Navigation
-    - [x] Select
-    - [x] Textarea
-  - [x] Do a documentation cleanup.
-    - [x] Readme.md
-      - [x] Features
-        - [x] List of components.
-        - [x] Component configuration example.
-        - [x] Utilities
-      - [x] Installation guide
-      - [x] Usage guide
-  - [x] Minor Fixes
-    - [x] Rename elements.ts to types.ts
-    - [x] Move system scss modules to its own directory
-    - [x] Removed the components scss directory
-    - [x] Take back enums structure and change it to string union types.
-    - [ ] Globalize the prop 'nostyle' on all components.
-
 ### v0.2
 
   - [ ] Update components to GarliCSS animations.

components/Button/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { BUTTON_TYPES } from '../../src/enums.ts';
 import { iExtendedElement } from '../../src/types.ts';
 
@@ -17,20 +16,23 @@ export default (props: Partial<iButton>) => {
   const p = applyDefaults<iButton>(defaults, props);
 
   const classes = partializeClasses({
-    button: cn(
-      'comp-button',
-      props.type === 'disabled'
-        ? 'clr-bg-disabled'
-        : props.type === 'error'
-        ? 'clr-bg-error'
-        : props.type === 'invisible'
-        ? 'comp-button_invisible'
-        : props.type === 'panel'
-        ? 'comp-button_panel'
-        : props.type === 'contrast'
-        ? 'clr-bg-input'
-        : 'clr-bg-input',
-      props.class
+    button: opt(
+      cn(
+        'comp-button',
+        props.type === 'disabled'
+          ? 'clr-bg-disabled'
+          : props.type === 'error'
+          ? 'clr-bg-error'
+          : props.type === 'invisible'
+          ? 'comp-button_invisible'
+          : props.type === 'panel'
+          ? 'comp-button_panel'
+          : props.type === 'contrast'
+          ? 'clr-bg-input'
+          : 'clr-bg-input'
+      ),
+      p.class,
+      p.nostyle
     ),
   });
 

components/Card/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 
 export type iCard = iExtendedElement<HTMLDivElement> & {
@@ -15,9 +14,11 @@ const defaults: iCard = {
 export default (props: Partial<iCard>) => {
   const p = applyDefaults<iCard>(defaults, props);
 
+  const { panel } = p.fwd;
+
   const classes = partializeClasses({
-    card: cn('comp-card clr-bg-panel', p.class),
-    panel: cn(p.fwd.panel?.class),
+    card: opt(cn('comp-card clr-bg-panel'), p.class, p.nostyle),
+    panel: cn(panel?.class),
   });
 
   delete p.class;

components/Code/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 
 export type iCode = iExtendedElement & {
@@ -15,9 +14,11 @@ const defaults: iCode = {
 export default (props: Partial<iCode>) => {
   const p = applyDefaults<iCode>(defaults, props);
 
+  const { wrapper } = p.fwd;
+
   const classes = partializeClasses({
-    code: cn('comp-code clr-txt-personality', p.class),
-    wrapper: cn('comp-code_wrapper clr-bg-panel', p.fwd.wrapper?.class),
+    code: opt(cn('comp-code clr-txt-personality', p.class), p.nostyle),
+    wrapper: opt(cn('comp-code_wrapper clr-bg-panel', wrapper?.class), wrapper?.nostyle),
   });
 
   delete p.class;

components/Footer/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 import { LAYOUT_TYPES } from '../../src/enums.ts';
 
@@ -30,13 +29,15 @@ export default (props: Partial<iFooter>) => {
 
   const p = applyDefaults<iFooter>(defaults, props);
 
+  const { layout, panel, badge_link, badge_dark, badge_light } = p.fwd;
+
   const classes = partializeClasses({
-    footer: cn('comp-footer', p.class),
-    layout: cn(p.fwd.layout?.class),
-    panel: cn(p.fwd.panel?.class),
-    badge_link: cn('made-with-fresh', p.fwd.badge_link?.class),
-    badge_light: cn('fresh-badge light', p.fwd.badge_light?.class),
-    badge_dark: cn('fresh-badge dark', p.fwd.badge_dark?.class),
+    footer: opt(cn('comp-footer'), p.class, p.nostyle),
+    layout: cn(layout?.class),
+    panel: cn(panel?.class),
+    badge_link: opt(cn('made-with-fresh'), badge_link?.class, badge_link?.nostyle),
+    badge_light: opt(cn('fresh-badge light'), badge_light?.class, badge_light?.nostyle),
+    badge_dark: opt(cn('fresh-badge dark'), badge_dark?.class, badge_dark?.nostyle),
   });
 
   delete p.class;

components/Header/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 import { LAYOUT_TYPES } from '../../src/enums.ts';
 
@@ -21,10 +20,12 @@ const defaults: iHeader = {
 export default (props: Partial<iHeader>) => {
   const p = applyDefaults<iHeader>(defaults, props);
 
+  const { layout, panel } = p.fwd;
+
   const classes = partializeClasses({
-    header: cn('comp-header', p.class),
-    layout: cn(p.fwd.layout?.class),
-    panel: cn(p.banner ? 'comp-header_banner' : null, p.fwd.panel?.class),
+    header: opt(cn('comp-header'), p.class, p.nostyle),
+    layout: cn(layout?.class),
+    panel: opt(cn(p.banner ? 'comp-header_banner' : null), panel?.class, panel?.nostyle),
   });
 
   delete p.class;

components/Input/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 
 export type iInput = iExtendedElement<HTMLInputElement> & {
@@ -26,27 +25,32 @@ const defaults: iInput = {
 export default (props: Partial<iInput>) => {
   const p = applyDefaults<iInput>(defaults, props);
 
+  const { text, label, error, required, container } = p.fwd;
+
   const classes = partializeClasses({
-    input: cn(
-      'comp-input',
-      p.error ? 'clr-bg-error' : p.disabled ? 'clr-bg-disabled' : 'clr-bg-input',
-      p.class
+    input: opt(
+      cn('comp-input', p.error ? 'clr-bg-error' : p.disabled ? 'clr-bg-disabled' : 'clr-bg-input'),
+      p.class,
+      p.nostyle
     ),
-    text: cn('select-none', p.fwd.text?.class),
-    label: cn('comp-input_label', p.fwd.label?.class),
-    error: cn('comp-input_error clr-txt-error', p.fwd.error?.class),
-    required: cn('comp-input_required clr-txt-error', p.fwd.text?.class),
-    container: cn(
-      'comp-input_container',
-      p.type && ['button', 'image', 'reset', 'submit'].includes(p.type)
-        ? 'comp-input_button'
-        : p.type && ['radio', 'checkbox'].includes(p.type)
-        ? 'comp-input_bool'
-        : p.type && ['datetime-local', 'date', 'month', 'time', 'week'].includes(p.type)
-        ? 'comp-input_date'
-        : 'comp-input_box',
-      p.maxWidth ? 'comp-input_maxwidth' : null,
-      p.fwd.container?.class
+    text: opt(cn('select-none'), text?.class, text?.nostyle),
+    label: opt(cn('comp-input_label'), label?.class, label?.nostyle),
+    error: opt(cn('comp-input_error clr-txt-error'), error?.class, error?.nostyle),
+    required: opt(cn('comp-input_required clr-txt-error'), required?.class, required?.nostyle),
+    container: opt(
+      cn(
+        'comp-input_container',
+        p.type && ['button', 'image', 'reset', 'submit'].includes(p.type)
+          ? 'comp-input_button'
+          : p.type && ['radio', 'checkbox'].includes(p.type)
+          ? 'comp-input_bool'
+          : p.type && ['datetime-local', 'date', 'month', 'time', 'week'].includes(p.type)
+          ? 'comp-input_date'
+          : 'comp-input_box',
+        p.maxWidth ? 'comp-input_maxwidth' : null
+      ),
+      container?.class,
+      container?.nostyle
     ),
   });
 

components/Layout/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 import { LAYOUT_TYPES } from '../../src/enums.ts';
 
@@ -18,9 +17,11 @@ const defaults: iLayout = {
 export default (props: Partial<iLayout>) => {
   const p = applyDefaults<iLayout>(defaults, props);
 
+  const { module } = p.fwd;
+
   const classes = partializeClasses({
-    layout: cn(`comp-grid comp-layout-${p.type}`, p.class),
-    module: cn('comp-layout-module', p.fwd.module?.class),
+    layout: opt(cn(`comp-grid comp-layout-${p.type}`), p.class, p.nostyle),
+    module: opt(cn('comp-layout-module'), module?.class, module?.nostyle),
   });
 
   delete p.class;

components/Link/setup.ts

@@ -1,20 +1,13 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement } from '../../src/types.ts';
 
-export type iLink = iExtendedElement<HTMLAnchorElement> & {
-  nostyle: boolean;
-};
-
-const defaults: iLink = {
-  nostyle: false,
-};
+export type iLink = iExtendedElement<HTMLAnchorElement>;
 
 export default (props: Partial<iLink>) => {
-  const p = applyDefaults<iLink>(defaults, props);
+  const p = props;
 
   const classes = partializeClasses({
-    link: cn(p.nostyle ? null : 'comp-link clr-txt-personality', p.class),
+    link: opt(cn('comp-link clr-txt-personality'), p.class, p.nostyle),
   });
 
   delete p.class;

components/Linkmap/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 
 export type iLinkmapitem = {
@@ -26,9 +25,11 @@ const defaults: iLinkmap = {
 export default (props: Partial<iLinkmap>) => {
   const p = applyDefaults<iLinkmap>(defaults, props);
 
+  const { list } = p.fwd;
+
   const classes = partializeClasses({
-    linkmap: cn('comp-linkmap', p.class),
-    list: cn('comp-linkmap_list', p.fwd.list?.class),
+    linkmap: opt(cn('comp-linkmap'), p.class, p.nostyle),
+    list: opt(cn('comp-linkmap_list'), list?.class, list?.nostyle),
     item: cn(p.fwd.item?.class),
     link: cn(p.fwd.link?.class),
     text: cn(p.fwd.text?.class),

components/Main/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 import { LAYOUT_TYPES } from '../../src/enums.ts';
 
@@ -18,9 +17,11 @@ const defaults: iMain = {
 export default (props: Partial<iMain>) => {
   const p = applyDefaults<iMain>(defaults, props);
 
+  const { layout } = p.fwd;
+
   const classes = partializeClasses({
-    main: cn('comp-main clr-bg-page', p.class),
-    layout: cn(p.fwd.layout?.class),
+    main: opt(cn('comp-main clr-bg-page'), p.class, p.nostyle),
+    layout: cn(layout?.class),
   });
 
   delete p.class;

components/Navigation/setup.ts

@@ -1,5 +1,4 @@
-import { cn } from '../../deps.ts';
-import { applyDefaults, partializeClasses } from '../../src/utils.ts';
+import { cn, opt, applyDefaults, partializeClasses } from '../../src/utils.ts';
 import { iExtendedElement, iFwd } from '../../src/types.ts';
 
 export type iNavigation = iExtendedElement & {
@@ -19,11 +18,13 @@ const defaults: iNavigation = {
 export default (props: Partial<iNavigation>) => {
   const p = applyDefaults<iNavigation>(defaults, props);
 
+  const { wrapper, panel, layout } = p.fwd;
+
   const classes = partializeClasses({
-    nav: cn('comp-navigation', p.class),
-    wrapper: cn('comp-navigation_wrapper', p.fwd.wrapper?.class),
-    panel: cn(p.fwd.panel?.class),
-    layout: cn(p.fwd.layout?.class),
+    nav: opt(cn('comp-navigation'), p.class, p.nostyle),
+    wrapper: opt(cn('comp-navigation_wrapper'), wrapper?.class, wrapper?.nostyle),
+    panel: cn(panel?.class),
+    layout: cn(layout?.class),
   });
 
   delete p.class;