Merge pull request #166 from brainstormforce/dev

v1.1.0

.eslintrc.js → .eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
 	extends: [
 		'plugin:@wordpress/eslint-plugin/recommended-with-formatting',
 		'plugin:storybook/recommended',
+		'plugin:@typescript-eslint/recommended',
 	],
 	settings: {
 		'import/resolver': {
@@ -17,7 +18,7 @@ module.exports = {
 					['@/utilities', './src/utilities'],
 					['@', './src'],
 				],
-				extensions: ['.js', '.jsx'],
+				extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			},
 		},
 	},
@@ -27,12 +28,22 @@ module.exports = {
 			presets: ['@wordpress/babel-preset-default'],
 		},
 	},
+	overrides: [
+		{
+			files: ['./src/utilities/withTW.js'],
+			rules: {
+				'@typescript-eslint/no-var-requires': 'off',
+			},
+		},
+	],
 	rules: {
 		'jsx-a11y/click-events-have-key-events': 'off',
 		'react-hooks/exhaustive-deps': 'off',
 		'jsx-a11y/label-has-associated-control': 'off',
 		'jsx-a11y/no-noninteractive-element-interactions': 'off',
 		'jsx-a11y/anchor-is-valid': 'off',
+
+		'no-mixed-spaces-and-tabs': 'off',
 	},
 	globals: {
 		localStorage: 'readonly',

.gitignore

@@ -3,4 +3,6 @@ dist/*
 .DS_Store
 *storybook.log
 storybook-static/*
-*.zip
+*.zip
+*.app.tsbuildinfo
+*.node.tsbuildinfo

.prettierrc.js → .prettierrc.mjs

@@ -1,7 +1,7 @@
 // Import the default config file and expose it in the project root.
 // Useful for editor integrations.
 
-const config = require('@wordpress/prettier-config');
+import config from '@wordpress/prettier-config';
 
 config.overrides = [
 	{
@@ -13,4 +13,4 @@ config.overrides = [
 	},
 ];
 
-module.exports = config;
+export default config;

.storybook/main.ts

@@ -0,0 +1,62 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-onboarding',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions',
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {
+			builder: {
+				viteConfigPath: path.resolve(__dirname, '..', 'vite.config.ts'),
+			},
+		},
+	},
+	core: {
+		builder: '@storybook/builder-vite',
+	},
+	viteFinal: async (config) => {
+		// Merge custom configuration into the default config
+		const { mergeConfig } = await import('vite');
+
+		return mergeConfig(config, {
+			optimizeDeps: {
+				include: [
+					'storybook-dark-mode',
+					'storybook-addon-interactions',
+				],
+			},
+			resolve: {
+				...config.resolve,
+				alias: {
+					...config.resolve?.alias,
+					// 👇 Internal modules
+					'@/icons': path.resolve(
+						__dirname,
+						'..',
+						'src/ui/icons.jsx'
+					),
+					'@/utilities': path.resolve(
+						__dirname,
+						'..',
+						'src/utilities'
+					),
+					'@/components': path.resolve(
+						__dirname,
+						'..',
+						'src/components'
+					),
+					'@': path.resolve(__dirname, '..', 'src'),
+				},
+			},
+		});
+	},
+};
+export default config;

.storybook/preview.js → .storybook/preview.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+
 /** @type { import('@storybook/react').Preview } */
-import '../dist/force-ui.css';
-const preview = {
+import '../dist/style.css';
+const preview: Preview = {
 	parameters: {
 		controls: {
 			matchers: {

.stylelintrc.mjs

@@ -0,0 +1,51 @@
+export default {
+	extends: ['@wordpress/stylelint-config'],
+	rules: {
+		'font-family-name-quotes': 'always-where-recommended',
+		'function-url-quotes': 'always',
+		'declaration-property-unit-allowed-list': {
+			'/^line-height/': ['em', 'rem', 'px'],
+		},
+		'comment-empty-line-before': null,
+		'selector-class-pattern': null,
+		'selector-id-pattern': null,
+		'no-descending-specificity': null,
+		'no-duplicate-selectors': null,
+		'at-rule-no-unknown': null,
+		'at-rule-empty-line-before': null,
+		'at-rule-empty-line-before': [
+			'always',
+			{
+				except: ['blockless-after-same-name-blockless', 'first-nested'],
+				ignore: ['after-comment'],
+			},
+		],
+		'block-no-empty': true,
+		'no-empty-source': true,
+		'declaration-empty-line-before': [
+			'always',
+			{
+				except: ['after-declaration', 'first-nested'],
+				ignore: ['after-comment', 'inside-single-line-block'],
+			},
+		],
+		'rule-empty-line-before': [
+			'always-multi-line',
+			{
+				except: ['first-nested'],
+				ignore: ['after-comment'],
+			},
+		],
+	},
+	overrides: [
+		{
+			files: ['*.scss', '**/*.scss'],
+			extends: '@wordpress/stylelint-config/scss-stylistic',
+		},
+		{
+			files: ['*.css', '**/*.css'],
+			extends: '@wordpress/stylelint-config/stylistic',
+		},
+	],
+	customSyntax: 'postcss-scss',
+};

README.md

@@ -1,4 +1,4 @@
-### Getting Started
+## Getting Started
 
 Learn how to use @bsf/force-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS.
 

jsconfig.json

@@ -1,8 +1,10 @@
 {
     "compilerOptions": {
+	  "jsx": "react",
       "baseUrl": "./",
       "paths": {
         "@/components/*": ["src/components/*"],
+        "@/components": ["src/components"],
         "@/utilities/*": ["src/utilities/*"],
         "@/icons": ["src/ui/icons"],
         "@/*": ["src/*"],