Feature/from classes to functions (#49)

* Move from classes to functions

* Changeset

.changeset/chilled-squids-trade.md

@@ -0,0 +1,5 @@
+---
+'@runroom/design-tokens': patch
+---
+
+Move from classes to functions

.github/workflows/ci.yaml

@@ -33,3 +33,5 @@ jobs:
 
             - name: Coverage Report
               uses: ArtiomTr/jest-coverage-report-action@v2
+              with:
+                  annotations: none

src/classes/Borders.ts

@@ -3,63 +3,73 @@ import {
   BorderCollection,
   BorderToken,
   CreateFile,
-  DesignTokensGenerator
+  DesignTokensGenerator,
+  TokenPayload
 } from '@/types/designTokens';
-import { FigmaBorderComponent, FigmaFrame } from '@/types/figma';
+import { FigmaBorderComponent } from '@/types/figma';
 
-export class Borders implements DesignTokensGenerator {
-  readonly tokens: BorderCollection;
+const generateCssBordersVariables = ({ borders }: BorderCollection) => {
+  let bordersVars = '';
+  const borderBaseName = '--border-radius';
 
-  constructor(figmaFrame: FigmaFrame) {
-    this.tokens = getTokens<FigmaBorderComponent, BorderCollection, BorderToken>(
-      'Borders',
-      figmaFrame,
-      this.getBoundingWidth
-    );
+  for (const key in borders) {
+    const borderName = `${borderBaseName}-${key}`;
+    const borderValue = borders[key].value;
+    bordersVars = `${bordersVars}${borderName}: ${borderValue};`;
   }
 
-  writeTokens(createFile: CreateFile, outputDir: string, name = 'borders') {
-    return [createFile(name, this.tokens, outputDir, 'json')];
-  }
+  return {
+    bordersVars: createRootString(bordersVars)
+  };
+};
 
-  writeCssVariables(createFile: CreateFile, outputDir: string, name = 'borders-vars') {
-    const { bordersVars } = this.generateCssBordersVariables(this.tokens);
-    return [createFile(name, bordersVars, outputDir, 'css')];
+const getBoundingWidth = (component: FigmaBorderComponent): BorderToken | false => {
+  if (!(component && component.name)) {
+    return false;
   }
 
-  private generateCssBordersVariables({ borders }: BorderCollection) {
-    let bordersVars = '';
-    const borderBaseName = '--border-radius';
+  const corner = component.cornerRadius
+    ? component.cornerRadius
+    : component.children
+      ? component.children[0].cornerRadius
+      : 0;
 
-    for (const key in borders) {
-      const borderName = `${borderBaseName}-${key}`;
-      const borderValue = borders[key].value;
-      bordersVars = `${bordersVars}${borderName}: ${borderValue};`;
+  const name = snakeCase(component.name);
+  const value = remify(corner);
+
+  return {
+    [name]: {
+      value
     }
+  };
+};
 
-    return {
-      bordersVars: createRootString(bordersVars)
-    };
-  }
+const writeBorderTokens =
+  (tokens: BorderCollection) =>
+  (createFile: CreateFile, outputDir: string, name = 'borders') => {
+    return [createFile(name, tokens, outputDir, 'json')];
+  };
 
-  private getBoundingWidth(component: FigmaBorderComponent): BorderToken | false {
-    if (!(component && component.name)) {
-      return false;
-    }
+const writeBorderVariables =
+  (tokens: BorderCollection) =>
+  (createFile: CreateFile, outputDir: string, name = 'borders-vars') => {
+    const { bordersVars } = generateCssBordersVariables(tokens);
+    return [createFile(name, bordersVars, outputDir, 'css')];
+  };
 
-    const corner = component.cornerRadius
-      ? component.cornerRadius
-      : component.children
-        ? component.children[0].cornerRadius
-        : 0;
+const Borders = ({ frame }: TokenPayload): DesignTokensGenerator => {
+  const tokens = getTokens<FigmaBorderComponent, BorderCollection, BorderToken>(
+    'Borders',
+    frame,
+    getBoundingWidth
+  );
 
-    const name = snakeCase(component.name);
-    const value = remify(corner);
+  return {
+    name: 'Borders',
+    tokens,
+    writeTokens: writeBorderTokens(tokens),
+    writeCssVariables: writeBorderVariables(tokens)
+  };
+};
 
-    return {
-      [name]: {
-        value
-      }
-    };
-  }
-}
+export { Borders };

src/classes/Breakpoints.ts

@@ -2,60 +2,70 @@ import {
   BreakpointCollection,
   BreakpointToken,
   CreateFile,
-  DesignTokensGenerator
+  DesignTokensGenerator,
+  TokenPayload
 } from '@/types/designTokens';
-import { FigmaBreakPointComponent, FigmaFrame } from '@/types/figma';
+import { FigmaBreakPointComponent } from '@/types/figma';
 import { createRootString, getTokens, pixelate, remify, snakeCase } from '@/functions';
 
-export class Breakpoints implements DesignTokensGenerator {
-  readonly tokens: BreakpointCollection;
+const generateCssBreakpointVariables = ({ breakpoints }: BreakpointCollection) => {
+  let breakpointsVars = '';
+  const breakpointsBaseName = 'breakpoint';
 
-  constructor(figmaFrame: FigmaFrame) {
-    this.tokens = getTokens<FigmaBreakPointComponent, BreakpointCollection, BreakpointToken>(
-      'Breakpoints',
-      figmaFrame,
-      this.getBoundingWidth
-    );
+  for (const key in breakpoints) {
+    const breakpointVarsName = `--${breakpointsBaseName}-${key}`;
+    const breakpointRemValue = `${breakpointVarsName}: ${breakpoints[key].remValue}`;
+    breakpointsVars = `${breakpointsVars}${breakpointRemValue};`;
   }
 
-  writeTokens(createFile: CreateFile, outputDir: string, name = 'breakpoints') {
-    return [createFile(name, this.tokens, outputDir, 'json')];
-  }
+  return {
+    breakpointsVars: createRootString(breakpointsVars)
+  };
+};
 
-  writeCssVariables(createFile: CreateFile, outputDir: string, name = 'breakpoints-vars') {
-    const { breakpointsVars } = this.generateCssBreakpointVariables(this.tokens);
-    return [createFile(name, breakpointsVars, outputDir, 'css')];
+const getBoundingWidth = (component: FigmaBreakPointComponent): BreakpointToken | false => {
+  if (!(component && component.name)) {
+    return false;
   }
 
-  private generateCssBreakpointVariables({ breakpoints }: BreakpointCollection) {
-    let breakpointsVars = '';
-    const breakpointsBaseName = 'breakpoint';
+  const name = snakeCase(component.name);
+  const value = pixelate(component.absoluteBoundingBox.width);
+  const remValue = remify(component.absoluteBoundingBox.width);
 
-    for (const key in breakpoints) {
-      const breakpointVarsName = `--${breakpointsBaseName}-${key}`;
-      const breakpointRemValue = `${breakpointVarsName}: ${breakpoints[key].remValue}`;
-      breakpointsVars = `${breakpointsVars}${breakpointRemValue};`;
+  return {
+    [name]: {
+      value,
+      remValue
     }
+  };
+};
 
-    return {
-      breakpointsVars: createRootString(breakpointsVars)
-    };
-  }
+const writeBreakpointTokens =
+  (tokens: BreakpointCollection) =>
+  (createFile: CreateFile, outputDir: string, name = 'breakpoints') => {
+    return [createFile(name, tokens, outputDir, 'json')];
+  };
 
-  private getBoundingWidth(component: FigmaBreakPointComponent): BreakpointToken | false {
-    if (!(component && component.name)) {
-      return false;
-    }
+const writeBreakPointVariables =
+  (tokens: BreakpointCollection) =>
+  (createFile: CreateFile, outputDir: string, name = 'breakpoints-vars') => {
+    const { breakpointsVars } = generateCssBreakpointVariables(tokens);
+    return [createFile(name, breakpointsVars, outputDir, 'css')];
+  };
 
-    const name = snakeCase(component.name);
-    const value = pixelate(component.absoluteBoundingBox.width);
-    const remValue = remify(component.absoluteBoundingBox.width);
+const Breakpoints = ({ frame }: TokenPayload): DesignTokensGenerator => {
+  const tokens = getTokens<FigmaBreakPointComponent, BreakpointCollection, BreakpointToken>(
+    'Breakpoints',
+    frame,
+    getBoundingWidth
+  );
 
-    return {
-      [name]: {
-        value,
-        remValue
-      }
-    };
-  }
-}
+  return {
+    name: 'Breakpoints',
+    tokens,
+    writeTokens: writeBreakpointTokens(tokens),
+    writeCssVariables: writeBreakPointVariables(tokens)
+  };
+};
+
+export { Breakpoints };