Merge pull request morfeojs#26 from VLK-STUDIO/feat/morfeo-fonts

Feat/morfeo fonts

apps/svelte-sandbox/src/main.js

@@ -1,8 +1,18 @@
-import { theme, resetCss } from '@morfeo/web';
+import { theme, resetCss, loadFont } from '@morfeo/web';
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
 import App from './App.svelte';
 import { lightTheme } from './theme';
 
+loadFont({
+  importFontFace: true,
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap',
+    },
+  ],
+  name: 'regular',
+  family: 'Roboto',
+});
 enableMorfeoDevTool();
 resetCss();
 theme.set(lightTheme);

apps/web-sandbox/src/App.tsx

@@ -33,12 +33,14 @@ function App() {
   const { containerStyle, blockStyle, codeStyle } = useStyles({
     containerStyle: {
       bg: 'secondary',
-      width: '100vw' as any,
+      width: '100%' as any,
       display: 'flex',
-      height: '100vh' as any,
+      minHeight: '100vh' as any,
       alignItems: 'center',
       justifyContent: 'space-evenly',
       transition: 'light',
+      pt: 's',
+      pb: 's'
     },
     blockStyle: {
       flex: 1,

apps/web-sandbox/src/index.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import { theme, resetCss } from '@morfeo/react';
+import { theme, resetCss, loadFont } from '@morfeo/react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { lightTheme } from './theme';
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
 
+loadFont({
+  importFontFace: true,
+  urls: [{
+    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'
+  }],
+  name: 'regular',
+  family: 'Roboto',
+})
 enableMorfeoDevTool();
-
 resetCss();
 theme.set(lightTheme as any);
 

apps/web-sandbox/src/theme.ts

@@ -33,6 +33,9 @@ export const lightTheme = {
     warning: '#f39c12',
     transparent: 'transparent',
   },
+  fontFamilies: {
+    regular: 'Roboto',
+  },
   gradients,
   radii: {
     m: '10px',
@@ -42,6 +45,15 @@ export const lightTheme = {
     s: '40px',
     m: '100px',
   },
+  lineHeights: {
+    s: 1.7,
+  },
+  letterSpacings: {
+    s: 1.6,
+  },
+  fontSizes: {
+    s: '14px',
+  },
   sizes: {
     s: '10px',
     m: '100px',
@@ -137,7 +149,12 @@ export const lightTheme = {
     },
     Typography: {
       tag: 'p',
-      style: {},
+      style: {
+        fontFamily: 'regular',
+        fontSize: 's',
+        lineHeight: 's',
+        letterSpacing: 's',
+      },
       variants: {
         h1: {
           tag: 'h1',

packages/fonts/LICENSE

@@ -0,0 +1,25 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2021 Mauro Erta.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

packages/fonts/README.md

@@ -0,0 +1,123 @@
+<div align="center">
+<h1>@morfeo/fonts</h1>
+</div>
+
+**@morfeo/fonts** provide 2 helpers to easily load a font on your document style and your mofeo theme both.
+
+**@morfeo/fonts** is part of the [@morfeo](https://github.com/VLK-STUDIO/morfeo) eco-system, a set of **framework-agnostic** tools that help you to create beautiful design systems for your web and mobile apps.
+
+---
+
+<div align="center">
+  <a href="https://github.com/VLK-STUDIO/morfeo">Documentation</a> |
+  <a href="https://github.com/VLK-STUDIO/morfeo">API</a> |
+  <a href="https://github.com/VLK-STUDIO/morfeo">Contributing</a> |
+  <a href="https://morfeo.slack.com">Slack</a>
+</div>
+
+---
+
+## Table of contents
+
+#### [Installation](#installation-1)
+
+#### [APIS](#apis-1)
+
+- [mountFont](#mountFont)
+    - [@import fontFace](#@import)
+    - [define fontFace](#@fontFace)
+    - [references](#@references)
+
+---
+
+## Installation
+
+with [npm](https://www.npmjs.com/package/@morfeo/fonts):
+
+```bash
+npm install @morfeo/fonts
+```
+
+or [yarn](https://yarn.pm/@morfeo/fonts):
+
+```bash
+ yarn add @morfeo/fonts
+```
+
+**note:** @morfeo/fonts is also included on **@morfeo/web**
+
+---
+
+## Apis 
+
+### mountFont
+
+The `mountFont` Api mount a font on the document head
+
+#### @import
+
+Setting the prop `importFontFace` to `true` the style will be resolve to `@import ...`.
+
+It is usefull if you want to import a css file with the fontFace definitions.
+
+It is also the case of Google Font.
+
+```typescript
+import { mountFont } from '@morfeo/fonts';
+
+mountFont({
+  urls: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'
+    },
+  ],
+  name: 'bold',
+  family: 'Roboto', 
+  importFontFace: true,
+})
+```
+
+#### @fontFace
+
+By not defining or setting to `true` the `importFontFace` prop the style will resolve on `@fontFace ...`.
+It allows to create `@fontFace` definition from scratch
+
+```typescript
+import { mountFont } from '@morfeo/fonts';
+
+mountFont({
+  urls: [
+    {
+      url: 'src/fonts/Roboto-bold.woff',
+      format: 'woff'
+    },
+    {
+      url: 'src/fonts/Roboto-bold.woff2',
+      format: 'woff2'
+    },
+  ],
+  name: 'bold',
+  family: 'Roboto', 
+  weight: 'bold'
+})
+```
+
+#### References
+
+```typescript
+export type FontType = 'woff' | 'woff2' | 'trueType' | 'embedded-opentype';
+
+export type FontUrl = {
+  url: string;
+  format?: FontType;
+};
+
+export type MountFontParams = {
+  name: string; 
+  urls: FontUrl[];
+  family: string;
+  importFontFace?: boolean;
+  weight?: string;
+};
+```
+

packages/fonts/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@morfeo/fonts",
+  "author": {
+    "name": "Andrea Simone Porceddu",
+    "email": "[email protected]"
+  },
+  "private": false,
+  "version": "0.1.5",
+  "license": "MIT",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index",
+  "typings": "build/index",
+  "keywords": [
+    "design",
+    "system",
+    "font",
+    "load"
+  ],
+  "scripts": {
+    "build": "rimraf build && tsc",
+    "watch": "tsc -w"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "build"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VLK-STUDIO/morfeo"
+  },
+  "homepage": "https://github.com/VLK-STUDIO/morfeo/tree/main/packages/fonts",
+  "bugs": {
+    "url": "https://github.com/VLK-STUDIO/morfeo/issues"
+  }
+}

packages/fonts/src/index.ts

@@ -0,0 +1 @@
+export * from './mountFont';

packages/fonts/src/mountFont.ts

@@ -0,0 +1,103 @@
+export type FontType = 'woff' | 'woff2' | 'trueType' | 'embedded-opentype';
+
+export type FontUrl = {
+  url: string;
+  format?: FontType;
+};
+
+export type MountFontParams = {
+  name: string;
+  urls: FontUrl[];
+  family: string;
+  /**
+   * set to true if you are providing a css url with predefined fontFace(example: Google Font)
+   * Please note: it support **one font family** per css import
+   */
+  importFontFace?: boolean;
+  weight?: string;
+};
+
+export function unmountFont(name: string) {
+  const currentFontStyle = document.getElementById(`font-${name}`);
+
+  if (currentFontStyle) {
+    currentFontStyle.remove();
+  }
+}
+
+/**
+ * Mount a fontFace on document head style
+ *
+ * ---
+ *
+ * ### mount a google font
+ *
+ * ```ts
+ * mountFont({
+ *   urls: [{
+ *     url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'
+ *   }],
+ *   importFontFace: true,
+ *   fontFamily: 'Roboto',
+ *   name: 'bold',
+ * })
+ * ```
+ *
+ * ---
+ *
+ * ### mount a local font
+ *
+ *  ```ts
+ * mountFont({
+ *   urls: [
+ *     {
+ *       url: './fonts/Roboto-bold.woff',
+ *       format: 'woff'
+ *     },
+ *     {
+ *       url: './fonts/Roboto-bold.woff2',
+ *       format: 'woff2'
+ *     },
+ *   ],
+ *   importFontFace: true,
+ *   fontFamily: 'Roboto',
+ *   name: 'bold',
+ * })
+ * ```
+ */
+
+export function mountFont(font: MountFontParams) {
+  let newFontFaceContent = '';
+
+  if (font.importFontFace) {
+    newFontFaceContent += `
+    @import ${font.urls.reduce((_, value) => `url(${value.url})`, '')}
+    `;
+  }
+
+  if (!font.importFontFace) {
+    newFontFaceContent += `
+    @fontFace {
+      font-family: ${font.family};
+      ${font.weight ? `font-weight: ${font.weight};` : ''}
+      url: ${font.urls.reduce(
+        (acc, value) =>
+          `${acc ? acc + '\n' : acc} url('${value.url}') ${
+            value.format ? `format('${value.format}')` : ''
+          }`,
+        '',
+      )}
+    }
+  `;
+  }
+
+  const newFontStyle = `
+    <style id="font-${font.name}">
+      ${newFontFaceContent}
+    </style>
+  `;
+
+  unmountFont(font.name);
+
+  document.head.innerHTML += newFontStyle;
+}