Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
Merge pull request #77 from gluestack/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@madhav23bansal
madhav23bansal authored Mar 17, 2023
2 parents 6c50d00 + 8f6d079 commit 72d3b51
Show file tree
Hide file tree
Showing 9 changed files with 189 additions and 23 deletions.
1 change: 1 addition & 0 deletions example/storybook/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ module.exports = {
include: [
// path.resolve('../../', 'node_modules/@universa11y'),
path.resolve('../../', 'node_modules/@gluestack-ui'),
path.resolve('../../', 'node_modules/@gluestack/design-system'),
path.resolve('./', 'node_modules/@dank-style/react'),
// path.resolve('./', 'node_modules/@gluestack-ui'),
],
Expand Down
2 changes: 1 addition & 1 deletion example/storybook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
},
"devDependencies": {
"@babel/core": "^7.19.3",
"@dank-style/react": "0.3.5",
"@dank-style/react": "0.3.6",
"@storybook/addon-actions": "^6.5.14",
"@storybook/addon-controls": "^6.5.14",
"@storybook/addon-docs": "^6.5.15",
Expand Down
12 changes: 11 additions & 1 deletion packages/babel-plugin-styled-resolver/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,8 @@ module.exports = function (b) {
}

let styledImportName = '';
let styledAlias = 'styled';
let styledAliasImportedName = '';
let tempPropertyResolverNode;
let isValidConfig = true;
let platform = 'all';
Expand All @@ -267,6 +269,8 @@ module.exports = function (b) {
ImportDeclaration(path, state) {
sourceFileName = state?.opts?.filename || DANK_IMPORT_NAME;
currentFileName = state.file.opts.filename;
styledAlias = state?.opts?.styledAlias;

if (state?.opts?.configPath) {
configPath = state?.opts?.configPath;
}
Expand Down Expand Up @@ -304,12 +308,18 @@ module.exports = function (b) {
if (importSpecifierPath.node.imported.name === 'styled') {
styledImportName = importSpecifierPath.node.local.name;
}
if (importSpecifierPath.node.imported.name === styledAlias) {
styledAliasImportedName = importSpecifierPath.node.local.name;
}
},
});
}
},
CallExpression(path) {
if (path.node.callee.name === styledImportName) {
if (
path.node.callee.name === styledAliasImportedName ||
path.node.callee.name === styledImportName
) {
path.traverse({
ObjectProperty(ObjectPath) {
if (t.isIdentifier(ObjectPath.node.value)) {
Expand Down
8 changes: 8 additions & 0 deletions packages/react/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# @dank-style/react

## 0.3.6

### Patch Changes

- Fix: Font resolver token resolution
Feat: Added environment based font family resolution
Feat: Added typings for dank plugins

## 0.3.5

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dank-style/react",
"version": "0.3.5",
"version": "0.3.6",
"main": "lib/commonjs/index",
"types": "lib/typescript/index.d.ts",
"module": "lib/module/index",
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/convertSxToSxVerbosed.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const PROPS = 'props';
const DESCENDANTS = 'descendants';

// ------------------------------------------- Reserved keys -------------------------------------------
const reservedKeys = {
const reservedKeys: any = {
state: {
':indeterminate': 'indeterminate',
':checked': 'checked',
Expand Down Expand Up @@ -118,7 +118,7 @@ export function resolveStyledPropsRecursively(
const themeKeys = Object.keys(theme);

themeKeys?.forEach((prop) => {
if (prop?.startsWith(':')) {
if (reservedKeys.state[prop]) {
path.push(STATE, prop.slice(1));
resolveStyledPropsRecursively(theme[prop], path, sxVerbosed, breakpoint);
path.pop();
Expand Down
26 changes: 22 additions & 4 deletions packages/react/src/createStyled.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { styled } from './styled';
import type { ConfigType, IThemeNew } from './types';

export interface IStyledPlugin {
styledUtils?: IStyled;
Expand All @@ -14,10 +15,11 @@ export class IStyled {
}

export const createStyled = (plugins: any) => {
return (
Component: any,
styledObject: any,
compConfig: any = {},
let wrapperComponent: any;
let styledComponent = <P, Variants>(
Component: React.ComponentType<P>,
styledObject: IThemeNew<Variants, P>,
compConfig: ConfigType = {},
extendedConfig: any = {}
) => {
let styledObj: any = styledObject;
Expand All @@ -39,6 +41,22 @@ export const createStyled = (plugins: any) => {
}
}

for (const pluginName in plugins) {
const compWrapper =
typeof plugins[pluginName].wrapperComponentMiddleWare === 'function'
? plugins[pluginName].wrapperComponentMiddleWare()
: null;

if (compWrapper) {
wrapperComponent = compWrapper;
}
}

return NewComp;
};

//@ts-ignore
if (wrapperComponent) styledComponent.Component = wrapperComponent;

return styledComponent;
};
152 changes: 138 additions & 14 deletions packages/react/src/plugins/font-resolver.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import { Platform } from 'react-native';
import React, { useMemo } from 'react';
import type { IStyled, IStyledPlugin } from '../createStyled';
import { useStyled } from '../StyledProvider';
import { propertyTokenMap } from '../propertyTokenMap';
import { deepMerge } from '../utils';

const fontWeights: any = {
'100': 'Thin',
Expand All @@ -15,6 +17,30 @@ const fontWeights: any = {
'950': 'ExtraBlack',
};

const DANK_STYLE_FONT_RESOLVER_STRATEGY = 'web';

/*
process.env.DANK_STYLE_FONT_RESOLVER_STRATEGY= expo | web
android / ios - font merge logic
NextJS + web - web logic
else (assuming it's expo) - Font merge logic
*/

function isExpoStrategy() {
return !(
(typeof window !== 'undefined' && //@ts-ignore
window.next) ||
process.env.DANK_STYLE_FONT_RESOLVER_STRATEGY ===
DANK_STYLE_FONT_RESOLVER_STRATEGY ||
process.env.REACT_APP_DANK_STYLE_FONT_RESOLVER_STRATEGY ===
DANK_STYLE_FONT_RESOLVER_STRATEGY ||
process.env.STORYBOOK_DANK_STYLE_FONT_RESOLVER_STRATEGY ===
DANK_STYLE_FONT_RESOLVER_STRATEGY ||
process.env.NEXT_PUBLIC_STORYBOOK_DANK_STYLE_FONT_RESOLVER_STRATEGY ===
DANK_STYLE_FONT_RESOLVER_STRATEGY
);
}

interface FontPlugin {
mapFonts?(style: any): any;
}
Expand All @@ -24,16 +50,28 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
styledUtils: IStyled | undefined = {};

mapFonts(style: any) {
if (Platform.OS !== 'web') {
let fontFamilyValue = style.fontFamily.replace(/ /g, '');
if (isExpoStrategy()) {
let fontFamilyValue = style.fontFamily
.replace(/ /g, '')
.replace(/^\w/, (c: any) => c.toUpperCase());

if (
style.fontWeight &&
(typeof style.fontWeight === 'string' ||
typeof style.fontWeight === 'number')
) {
fontFamilyValue = `${fontFamilyValue}_${style.fontWeight}${
fontWeights[style.fontWeight]
}`;
fontFamilyValue = `${fontFamilyValue}_${style.fontWeight}`;
if (
typeof style.fontWeight === 'string' &&
!style.fontWeight.startsWith('$')
) {
fontFamilyValue = `${fontFamilyValue}${
fontWeights[style.fontWeight]
}`;
} else if (typeof style.fontWeight === 'number') {
const fontWeightString = fontWeights[style.fontWeight];
fontFamilyValue = `${fontFamilyValue}${fontWeightString}`;
}
}
if (style.fontStyle && typeof style.fontStyle === 'string') {
const fontStyle = style.fontStyle.replace(/^\w/, (c: any) =>
Expand All @@ -44,6 +82,8 @@ export class FontResolver implements IStyledPlugin, FontPlugin {

style.fontFamily = fontFamilyValue;

this.#fontFamily = fontFamilyValue;

delete style.fontWeight;
delete style.fontStyle;
}
Expand Down Expand Up @@ -77,29 +117,112 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
this.mapFonts = mapFonts || this.mapFonts;
}

inputMiddleWare(styledObj: any = {}) {
this.fontHandler(styledObj);
inputMiddleWare(styledObj: any = {}, fontStyleObject: any = {}) {
const modifiedStyledObject = this.fontHandler({
...fontStyleObject,
...styledObj,
});

return styledObj;
return modifiedStyledObject;
}

fontHandler(styledObject: any = {}) {
#fontFamily: any = '';

#fontFamilyTokenConfig: any = {};

#fontWeightsTokenConfig: any = {};

fontHandler(styledObject: any = {}, fontStyleObject: any = {}) {
for (const styledObjectKey in styledObject) {
if (typeof styledObject[styledObjectKey] === 'object') {
this.fontHandler(styledObject[styledObjectKey]);
} else if (
styledObjectKey === 'fontFamily' &&
typeof styledObject[styledObjectKey] === 'string'
) {
if (!styledObject.fontFamily) {
styledObject.fontFamily = fontStyleObject?.fontFamily;
}
if (!styledObject.fontStyle) {
styledObject.fontStyle = fontStyleObject?.fontStyle;
}
if (!styledObject.fontWeight) {
styledObject.fontWeight = fontStyleObject?.fontWeight ?? '400';
}

if (styledObject.fontFamily.startsWith('$')) {
const fontFamily = styledObject.fontFamily.slice(1);
styledObject.fontFamily =
this.#fontFamilyTokenConfig?.[fontFamily] ??
styledObject.fontFamily;
}
if (
typeof styledObject.fontWeight === 'string' &&
styledObject.fontWeight.startsWith('$')
) {
const fontWeight = styledObject.fontWeight.slice(1);
styledObject.fontWeight =
this.#fontWeightsTokenConfig?.[fontWeight] ??
styledObject.fontWeight;
}

this.mapFonts(styledObject);
}
}

return styledObject;
}

componentMiddleWare({ NewComp }: any) {
return React.forwardRef((props: any, ref: any) => {
componentMiddleWare({ NewComp, extendedConfig }: any) {
const fontFamilyFromStyledObject = this.#fontFamily;
const Comp = React.forwardRef((props: any, ref: any) => {
const styledContext = useStyled();
const CONFIG = useMemo(
() => ({
...styledContext.config,
propertyTokenMap,
}),
[styledContext.config]
);
let componentExtendedConfig = CONFIG;
if (extendedConfig) {
componentExtendedConfig = deepMerge(CONFIG, extendedConfig);
}
this.#fontFamilyTokenConfig = componentExtendedConfig?.tokens?.fonts;
this.#fontWeightsTokenConfig =
componentExtendedConfig?.tokens?.fontWeights;
const { sx, ...restProps } = props;
const resolvedFontsStyledWithStyledObject = this.inputMiddleWare(sx);

let fontStyleObject: any = {};

if (fontFamilyFromStyledObject) {
// const splitFontFamily = /^([\w-]+)_([\w-]+)(?:_([\w-]+))?$/;
const [family, weight, style = ''] =
fontFamilyFromStyledObject.split('_');

fontStyleObject = {
fontFamily: family,
fontWeight: weight.startsWith('$')
? weight
: weight.match(/(\d+)\D+/)[1],
fontStyle: style.replace(/^\w/, (c: any) => c.toLowerCase()),
};
}

fontStyleObject = {
fontFamily: restProps?.fontFamily ?? fontStyleObject?.fontFamily,
fontWeight: restProps?.fontWeight ?? fontStyleObject?.fontWeight,
fontStyle: restProps?.fontStyle ?? fontStyleObject?.fontStyle,
};

delete restProps.fontFamily;
delete restProps.fontWeight;
delete restProps.fontStyle;

const resolvedFontsStyledWithStyledObject = this.inputMiddleWare(
sx,
fontStyleObject
);

return (
<NewComp
Expand All @@ -109,5 +232,6 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
/>
);
});
return Comp;
}
}
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1885,6 +1885,11 @@
resolved "https://registry.yarnpkg.com/@dank-style/react/-/react-0.3.0.tgz#9d28be13d6b742ec492b8e034399fd9bda550e13"
integrity sha512-wooV//nhvu38+ZVW5EBszmkp5CGvEvL9KgBj9bl1Hutj6qr4xcTEb0xHrsDHru2zFwXzTvmD0O5nqMUKVaYMZg==

"@dank-style/[email protected]":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@dank-style/react/-/react-0.3.0.tgz#9d28be13d6b742ec492b8e034399fd9bda550e13"
integrity sha512-wooV//nhvu38+ZVW5EBszmkp5CGvEvL9KgBj9bl1Hutj6qr4xcTEb0xHrsDHru2zFwXzTvmD0O5nqMUKVaYMZg==

"@dank-style/react@^0.2.25", "@dank-style/react@^0.2.27":
version "0.2.29"
resolved "https://registry.yarnpkg.com/@dank-style/react/-/react-0.2.29.tgz#941a353592268da7782a0e656ccc01f5f7a14222"
Expand Down

0 comments on commit 72d3b51

Please sign in to comment.