Skip to content

Commit

Permalink
chore: linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@kotAPI
kotAPI committed Oct 29, 2023
1 parent 911f545 commit 6706c35
Show file tree
Hide file tree
Showing 37 changed files with 753 additions and 732 deletions.
34 changes: 31 additions & 3 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,41 @@ module.exports = {
],
'rules': {
'react/react-in-jsx-scope': 'off',
'no-multiple-empty-lines': ['error', {'max': 1, 'maxEOF': 1}],
'indent': ['error', 4],
'no-multiple-empty-lines': ['warn', {'max': 1, 'maxEOF': 1}],
'indent': ['warn', 4],
'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}],
'no-trailing-spaces': 'warn',
'no-mixed-spaces-and-tabs': 'warn',
'no-multi-spaces': 'warn',
'no-unexpected-multiline': 'warn',
'no-unused-vars': 'warn',
'no-var': 'warn',
'prefer-const': 'warn',
'space-before-blocks': 'warn',
'space-before-function-paren': ['warn', 'never'],
'space-in-parens': 'warn',
'spaced-comment': 'warn',
'arrow-spacing': 'warn',
'comma-style': 'warn',
'eol-last': 'warn',
'func-call-spacing': 'warn',
'comma-spacing': ['warn', {'before': false, 'after': true}],
'quotes': ['warn', 'single'],
'react/prop-types': 'off',
'prefer-rest-params': 'off',
'no-func-assign': 'off',
'no-invalid-this': 'off',
'react/no-unknown-property': 'off',
'camelcase': 'off',
'react/jsx-key': 'off',
'require-jsdoc': 'off',
'guard-for-in': 'off',
'no-empty-pattern': 'off',

// ignore long strings
'max-len': 'off',
'semi': [
'error',
'warn',
'always',
],
},
Expand Down
4 changes: 4 additions & 0 deletions .husky/pre-commit
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint
22 changes: 22 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"build-storybook": "storybook build",
"build": "rollup -c",
"generate-tokens": "node ./scripts/tokenGen",
"publish": "npm publish --access public"
"publish": "npm publish --access public",
"lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -51,6 +52,7 @@
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"postcss": "^8.4.29",
"prop-types": "^15.8.1",
"rollup": "^3.29.0",
Expand Down
10 changes: 5 additions & 5 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
'postcss-import': {},
'tailwindcss': {},
'autoprefixer': {},
},
};
2 changes: 1 addition & 1 deletion rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
onwarn(warning, warn) {
if (
warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
warning.message.includes(`use client`)
warning.message.includes('use client')
) {
// Ignore this warning
return;
Expand Down
45 changes: 19 additions & 26 deletions scripts/tokenGen/generateAccentTokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,43 +20,36 @@ const COLOR_PREFIX = '--rad-ui-color-';
*/


let accentColor = colors.red;
let jsVariables = {};
const accentColor = colors.red;
const jsVariables = {};
const generateAccentTokens = (theme) => {
let cssVariables = [];
const cssVariables = [];
const color = accentColor;

let accentStyleSheet = "";

for(const colorObj in colors){

let colorName = colorObj
let accentColors = colors[colorObj][theme];
console.log(accentColors)
let accentStyleSheet = '';

for (const colorObj in colors) {
const colorName = colorObj;
const accentColors = colors[colorObj][theme];
console.log(accentColors);

//generate data-accent-color css styles
// generate data-accent-color css styles
let cssVariableName = `[data-accent-color=${colorObj}]{`;
cssVariableName += `\n`;
cssVariableName += '\n';
// plug in variables here
for(const [shadeName, shadeValue] of Object.entries(accentColors)){
for (const [shadeName, shadeValue] of Object.entries(accentColors)) {
cssVariableName += `${COLOR_PREFIX}accent-${shadeName}: var(${COLOR_PREFIX}${colorName}-${shadeName});`;
cssVariableName += `\n`;

cssVariableName += '\n';
}

// close css variable
cssVariableName += `}`;
cssVariableName += `\n`;
console.log(cssVariableName)
cssVariableName += '}';
cssVariableName += '\n';
console.log(cssVariableName);
accentStyleSheet += cssVariableName;



}

return accentStyleSheet
}

return accentStyleSheet;
};

export default generateAccentTokens;
export default generateAccentTokens;
39 changes: 18 additions & 21 deletions scripts/tokenGen/generateCSSTokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,32 @@ import colors from '../../src/colors/index.js';
const COLOR_PREFIX = '--rad-ui-color-';

// Function to generate CSS variables based on the theme
let jsVariables = {};
const jsVariables = {};

function generateCSSTokens(theme) {
let cssVariables = [];



// Loop through the colors
for (const [colorName, colorShades] of Object.entries(colors)) {
// Loop through the shades
for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) {
// Loop through the shades
for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) {
// Create the CSS variable name
const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`;
// Add the CSS variable to the array
cssVariables.push(`${cssVariableName}: ${shadeValue};`);

// Create the JS variable name
const jsVariableName = `${colorName}`;
// Add the JS variable to the object
jsVariables[jsVariableName] = jsVariables[jsVariableName] || {};
jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`;

}
const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`;
// Add the CSS variable to the array
cssVariables.push(`${cssVariableName}: ${shadeValue};`);

// Create the JS variable name
const jsVariableName = `${colorName}`;
// Add the JS variable to the object
jsVariables[jsVariableName] = jsVariables[jsVariableName] || {};
jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`;
}
}

// Return the CSS variables as a string
cssVariables= cssVariables.join("\n");

return {cssVariables, jsVariables}
}
cssVariables= cssVariables.join('\n');

return {cssVariables, jsVariables};
}

export default generateCSSTokens;
export default generateCSSTokens;
20 changes: 8 additions & 12 deletions scripts/tokenGen/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
import fs from "fs"
import fs from 'fs';

import colors from '../../src/colors/index.js';

import generateCSSTokens from "./generateCSSTokens.js"
import generateAccentTokens from "./generateAccentTokens.js"
import generateCSSTokens from './generateCSSTokens.js';
import generateAccentTokens from './generateAccentTokens.js';

// Generate CSS variables for the light theme

let jsVariables = {};


const {cssVariables: lightThemeCss, jsVariables:lightThemeJSTokens} = generateCSSTokens("light");
jsVariables = {...jsVariables, ...lightThemeJSTokens}


const {cssVariables: lightThemeCss, jsVariables: lightThemeJSTokens} = generateCSSTokens('light');
jsVariables = {...jsVariables, ...lightThemeJSTokens};

// Generate CSS variables for the dark theme
const {cssVariables: DarkThemeCss, jsVariables:DarkThemeJSTokens} = generateCSSTokens("dark");
jsVariables = {...jsVariables, ...DarkThemeJSTokens}
const {cssVariables: DarkThemeCss, jsVariables: DarkThemeJSTokens} = generateCSSTokens('dark');
jsVariables = {...jsVariables, ...DarkThemeJSTokens};

// Generate accent colors css

const accentTokens= generateAccentTokens("light");

const accentTokens= generateAccentTokens('light');

// Combine light and dark theme CSS
const combinedCss = `
Expand Down
50 changes: 25 additions & 25 deletions src/colors/crimson.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
const crimson = {
light: {
50: "hsl(332, 100%, 99.4%)",
100: "hsl(330, 100%, 98.4%)",
200: "hsl(331, 85.6%, 96.6%)",
300: "hsl(331, 78.1%, 94.2%)",
400: "hsl(332, 72.1%, 91.1%)",
500: "hsl(333, 67.0%, 86.7%)",
600: "hsl(335, 63.5%, 80.4%)",
700: "hsl(336, 62.3%, 72.9%)",
800: "hsl(336, 80.0%, 57.8%)",
900: "hsl(336, 71.3%, 52.8%)",
950: "hsl(336, 75.0%, 45.5%)",
1000: "hsl(332, 63.0%, 23.5%)",
50: 'hsl(332, 100%, 99.4%)',
100: 'hsl(330, 100%, 98.4%)',
200: 'hsl(331, 85.6%, 96.6%)',
300: 'hsl(331, 78.1%, 94.2%)',
400: 'hsl(332, 72.1%, 91.1%)',
500: 'hsl(333, 67.0%, 86.7%)',
600: 'hsl(335, 63.5%, 80.4%)',
700: 'hsl(336, 62.3%, 72.9%)',
800: 'hsl(336, 80.0%, 57.8%)',
900: 'hsl(336, 71.3%, 52.8%)',
950: 'hsl(336, 75.0%, 45.5%)',
1000: 'hsl(332, 63.0%, 23.5%)',
},
dark: {
50: "hsl(335, 20.0%, 9.6%)",
100: "hsl(336, 32.3%, 12.2%)",
200: "hsl(336, 40.2%, 16.0%)",
300: "hsl(336, 44.4%, 18.5%)",
400: "hsl(336, 48.4%, 21.3%)",
500: "hsl(336, 53.9%, 25.5%)",
600: "hsl(336, 62.7%, 32.8%)",
700: "hsl(336, 80.0%, 45.1%)",
800: "hsl(336, 80.0%, 57.8%)",
900: "hsl(339, 87.0%, 67.2%)",
950: "hsl(341, 100%, 76.0%)",
1000: "hsl(330, 90.0%, 91.0%)",
50: 'hsl(335, 20.0%, 9.6%)',
100: 'hsl(336, 32.3%, 12.2%)',
200: 'hsl(336, 40.2%, 16.0%)',
300: 'hsl(336, 44.4%, 18.5%)',
400: 'hsl(336, 48.4%, 21.3%)',
500: 'hsl(336, 53.9%, 25.5%)',
600: 'hsl(336, 62.7%, 32.8%)',
700: 'hsl(336, 80.0%, 45.1%)',
800: 'hsl(336, 80.0%, 57.8%)',
900: 'hsl(339, 87.0%, 67.2%)',
950: 'hsl(341, 100%, 76.0%)',
1000: 'hsl(330, 90.0%, 91.0%)',
},
};

export default crimson
export default crimson;
Loading

0 comments on commit 6706c35

Please sign in to comment.