Merge pull request #71 from tone-row/fix-value-problem

fix(value problem): 0 values not added

docs/components/slang/config.ts

@@ -1,19 +1,23 @@
 import { SlangConfig } from "@tone-row/slang";
 
 const config: Partial<SlangConfig> = {
+  // Type
   baseFontFamily: "Neue Montreal",
   baseFontSizePx: 20,
   baseFontSizeMobilePx: 16,
   baseFontLineHeight: 1.4,
   baseFontLineHeightMobile: 1.5,
-  baseContainerSizePx: 700,
-  baseSpacingPx: 30,
-  spacerPx: 4,
-  baseSpacingScale: 1.1,
   errorCorrectionTopPx: -1.32,
   errorCorrectionTopScale: 1.5,
   errorCorrectionBottomPx: 1.67,
   errorCorrectionBottomScale: 1.486,
+
+  // Can be removed
+  baseContainerSizePx: 700,
+
+  baseSpacingPx: 30,
+  spacerPx: 4,
+  baseSpacingScale: 1.1,
   typeScaleBase: 1.4,
   typeScaleBaseMobile: 1.16,
   inverseTypeScaleLineHeight: 0.96,
@@ -33,3 +37,59 @@ const config: Partial<SlangConfig> = {
 };
 
 export default config;
+
+/*
+
+The future of slang might look something like
+
+those functions are explicitly tied to certain things being available on the interface
+
+you more want to declare certain components i guess
+
+like, make me a box component using these settings
+
+make me a type component using these settings
+
+
+
+you describe the elements of a component
+- the base class name
+- the static props
+- the psuedo/responsive props
+
+There's also global properties
+How do you describe that a property expects a global property – like a palette color or something
+👌
+
+
+We want to convince the compiler to generate something to the tune of:
+
+  export type TypeProps = PropsWithAs<BaseTypeProps<Breakpoints, Colors>>;
+  const Type = forwardRefWithAs<TypeProps, "p">(TypeComponent); 
+
+For this site I need two Type components for each of my fonts
+
+I'm using the API of the "slang config", one API to produce two components
+
+2 components = slang(config)
+
+this is weird because slang is kind of both the end result (the components) and the capacity to produce the end result (the generator and the generation schema)
+
+so there's an API over top of an API ;\ THAT'S The part that makes me uneasy
+
+you have a lot of people and flexibility in the generator. And you're not making that power/flexibilty sing; you're putting it in a cage and saying it can only be used in this very specific way.
+
+Okay, dandy
+
+so what are you going to do about it
+
+Or, do you go – shortest path to accomodate two types into 
+
+
+Do I need to an audit of the concepts in slang?
+
+
+
+
+
+*/

slang/src/index.ts

@@ -1,10 +1,15 @@
 import "modern-normalize";
 import "./index.css";
-export { default as BoxComponent, BaseBoxProps } from "./Box/Box";
-export { default as TypeComponent, BaseTypeProps } from "./Type/Type";
+
+// Global Configuration
 export { SlangConfig, defaultConfig, mergeDefault } from "./config";
+
+// CSS Generation Logic
 export { makeCSS as getThemeCss, getPaletteColorName } from "./makeCSS";
-export { forwardRefWithAs, PropsWithAs } from "./utils";
 
-// This will come in handy from quite-fast-design.systems
-// export { default as Global } from "./Global";
+// Components
+export { default as BoxComponent, BaseBoxProps } from "./Box/Box";
+export { default as TypeComponent, BaseTypeProps } from "./Type/Type";
+
+// Component Utilities
+export { forwardRefWithAs, PropsWithAs } from "./utils";

slang/src/utils.ts

@@ -166,7 +166,7 @@ function getIndividualChildCssProp<
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const v = propValueToCssValue(node?.[key]);
-  if (v) {
+  if (typeof v === "number" || typeof v === "string") {
     last = v;
     // add the class
     classes.push(key.toString());
@@ -197,7 +197,7 @@ function getIndividualChildCssProp<
       // Don't put classes or properties on the element if not defined at a size
       if (typeof rawValue === "undefined") continue;
       const value = propValueToCssValue(rawValue);
-      if (value) {
+      if (typeof value === "number" || typeof value === "string") {
         classes.push(breakpoint);
         classes.push(`${key}-${breakpoint}`);
         v = value;