@eightshift/frontend-libs-tailwind 1.0.0

package/linters/stylelint.config.js

@@ -0,0 +1,146 @@
+module.exports = {
+	plugins: [
+		'@stylistic/stylelint-plugin'
+	],
+	extends: [
+		'stylelint-config-standard',
+	],
+	rules: {
+		// Stylistic rules.
+		'@stylistic/indentation': 'tab',
+
+		'@stylistic/max-empty-lines': 2,
+		'@stylistic/max-line-length': 250,
+
+		'@stylistic/color-hex-case': 'upper',
+
+		'@stylistic/no-eol-whitespace': true,
+
+		'@stylistic/media-feature-colon-space-after': 'always',
+		'@stylistic/media-feature-colon-space-before': 'never',
+		'@stylistic/media-feature-range-operator-space-after': 'always',
+		'@stylistic/media-feature-range-operator-space-before': 'always',
+
+		'@stylistic/selector-list-comma-newline-after': 'always',
+		'@stylistic/selector-list-comma-newline-before': 'never-multi-line',
+
+		'@stylistic/block-opening-brace-newline-after': 'always',
+		'@stylistic/block-opening-brace-newline-before': 'always-single-line',
+		'@stylistic/block-opening-brace-space-before': 'always',
+
+		'@stylistic/declaration-block-semicolon-newline-after': 'always',
+		'@stylistic/declaration-block-semicolon-newline-before': 'never-multi-line',
+		'@stylistic/declaration-block-semicolon-space-after': 'always-single-line',
+		'@stylistic/declaration-block-semicolon-space-before': 'never',
+
+		'@stylistic/value-list-comma-newline-before': 'never-multi-line',
+		'@stylistic/value-list-comma-newline-after': null,
+		'@stylistic/value-list-comma-space-before': 'never',
+		'@stylistic/value-list-comma-space-after': 'always-single-line',
+
+		'@stylistic/value-list-max-empty-lines': 1,
+
+		'@stylistic/selector-combinator-space-after': 'always',
+		'@stylistic/selector-combinator-space-before': 'always',
+
+		'@stylistic/declaration-bang-space-after': 'never',
+		'@stylistic/declaration-bang-space-before': 'always',
+		'@stylistic/declaration-colon-space-before': 'never',
+		'@stylistic/declaration-colon-space-after': 'always-single-line',
+		'@stylistic/declaration-colon-newline-after': null,
+
+		'@stylistic/declaration-block-trailing-semicolon': 'always',
+
+		'@stylistic/function-comma-space-after': 'always',
+		'@stylistic/function-comma-space-before': 'never',
+
+		'@stylistic/number-leading-zero': 'always',
+		'@stylistic/number-no-trailing-zeros': true,
+
+		'@stylistic/string-quotes': 'single',
+
+		'@stylistic/block-closing-brace-newline-after': 'always',
+		'@stylistic/block-closing-brace-newline-before': 'always',
+
+		'@stylistic/function-parentheses-newline-inside': 'never-multi-line',
+		'@stylistic/function-parentheses-space-inside': 'never',
+
+		'@stylistic/function-whitespace-after': 'always',
+
+		// Standard rules.
+		'comment-empty-line-before': [
+			'always', {
+				ignore: ['stylelint-commands', 'after-comment'],
+			},
+		],
+
+		'rule-empty-line-before': [
+			'always', {
+				except: ['first-nested'],
+				ignore: ['after-comment'],
+			},
+		],
+		'alpha-value-notation': 'number',
+
+		'color-hex-length': 'long',
+		'color-named': null,
+		'color-no-invalid-hex': true,
+		'color-function-notation': null,
+
+		'font-family-name-quotes': 'always-unless-keyword',
+
+		'font-weight-notation': 'named-where-possible',
+
+		'function-calc-no-unspaced-operator': true,
+		'function-linear-gradient-no-nonstandard-direction': true,
+		'function-url-quotes': 'always',
+
+		'number-max-precision': 5,
+		'length-zero-no-unit': true,
+
+		'string-no-newline': true,
+		'unit-no-unknown': true,
+
+		'value-no-vendor-prefix': true,
+		'value-keyword-case': null,
+
+		'property-no-vendor-prefix': true,
+
+		'declaration-empty-line-before': null,
+		'declaration-no-important': true,
+
+		'declaration-block-no-duplicate-properties': true,
+		'declaration-block-no-shorthand-property-overrides': true,
+		'declaration-block-single-line-max-declarations': 1,
+		"declaration-block-no-redundant-longhand-properties": [
+			true,
+			{
+				"ignoreShorthands": [
+					"grid-template"
+				]
+			}
+		],
+
+		'block-no-empty': true,
+
+		'selector-max-specificity': '0,4,0',
+		'selector-no-vendor-prefix': true,
+		'selector-pseudo-element-colon-notation': 'double',
+
+		'media-feature-name-no-vendor-prefix': true,
+
+		'at-rule-no-vendor-prefix': true,
+
+		'comment-whitespace-inside': 'always',
+
+		'max-nesting-depth': 3,
+		'no-duplicate-selectors': true,
+		'no-unknown-animations': true,
+
+		'keyframes-name-pattern': null,
+		'selector-class-pattern': null,
+		'no-descending-specificity': null,
+
+		'import-notation': null,
+	},
+};

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@eightshift/frontend-libs-tailwind",
+  "version": "1.0.0",
+  "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
+  "author": {
+    "name": "Eightshift team",
+    "email": "team@eightshift.com",
+    "url": "https://eightshift.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/infinum/eightshift-frontend-libs-tailwind.git"
+  },
+  "keywords": [
+    "frontend",
+    "css",
+    "mixin",
+    "js",
+    "utility",
+    "module",
+    "WordPress",
+    "tailwind",
+    "TailwindCSS"
+  ],
+  "bugs": {
+    "url": "https://github.com/infinum/eightshift-frontend-libs-tailwind/issues"
+  },
+  "homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
+  "license": "MIT",
+  "dependencies": {
+    "@eightshift/ui-components": "^1.1.2",
+    "@eslint/compat": "^1.1.0",
+    "@stylistic/eslint-plugin-js": "^2.3.0",
+    "@stylistic/stylelint-plugin": "^2.1.2",
+    "@swc/core": "^1.6.5",
+    "@wordpress/api-fetch": "^7.2.0",
+    "@wordpress/block-editor": "^13.2.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
+    "@wordpress/dom-ready": "^4.2.0",
+    "@wordpress/server-side-render": "^5.2.0",
+    "browserslist": "^4.23.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "eslint": "^9.6.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "file-loader": "^6.2.0",
+    "globals": "^15.6.0",
+    "husky": "^9.0.11",
+    "lightningcss": "^1.25.1",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "sonner": "^1.5.0",
+    "stylelint": "^16.6.1",
+    "stylelint-config-standard": "^36.0.1",
+    "swc-loader": "^0.2.6",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-merge": "^5.10.0"
+  },
+  "devDependencies": {
+    "embla-carousel": "^8.1.5",
+    "fluid-tailwind": "^1.0.2",
+    "lint-staged": "^15.2.7",
+    "micromodal": "^0.4.10",
+    "ol": "^9.2.4",
+    "ol-mapbox-style": "^12.3.4",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "sideEffects": false,
+  "lint-staged": {
+    "*.css": [
+      "npm run lintStyle"
+    ],
+    "*.js": [
+      "npm run lintJs --ignore-pattern node_modules"
+    ],
+    "*.php": [
+      "composer test"
+    ]
+  },
+  "scripts": {
+    "lintStyle": "stylelint **/*.css",
+    "lintJs": "npx eslint",
+    "lint": "npm run lintJs && npm run lintStyle"
+  }
+}

package/readme/packages.md

@@ -0,0 +1,74 @@
+# Packages readme
+
+This is a document explaining what each `package.json` package is used for.
+
+## Dependencies
+
+* @babel/cli - Adds terminal commands for babel.
+* @babel/core - Main Babel core package.
+* @babel/eslint-parser - JS Parser for babel.
+* @babel/eslint-plugin - JS Parser for babel plugin.
+* @dnd-kit/core - Modern helper for creating re-orderable react components
+* @dnd-kit/modifiers - Modern helper for creating re-orderable react components
+* @dnd-kit/sortable - Modern helper for creating re-orderable react components
+* @dnd-kit/utilities - Modern helper for creating re-orderable react components
+* @infinumjs/eslint-config-react-js - Adds JS linter config.
+* @swc/core - loader swc for faster build times.
+* @wordpress/api-fetch - WP package for api fetch.
+* @wordpress/dependency-extraction-webpack-plugin - Allows Webpack to read all @wordpress packages as external dependency.
+* @wordpress/dom-ready - WP package to load JS when dom is ready.
+* @wordpress/icons - WP icons package.
+* autoprefixer - Package for adding vendor prefix depending on your browserlist.
+* babel-loader - Loader used for Webpack.
+* browser-sync - Browser sync.
+* browser-sync-webpack-plugin - Browser sync plugin for Webpack.
+* classnames - Classnames package used in view components.
+* clean-webpack-plugin - Webpack plugin used to delete build folder.
+* core-js - Latest core Js to use in babel.
+* css-loader - Webpack loader user for css.
+* css-minimizer-webpack-plugin - Webpack plugin used to minimize output.
+* eslint - Package used for linting JS.
+* eslint-plugin-jsx-a11y - Package used for linting JS.
+* eslint-plugin-react - Package used for linting JS.
+* eslint-plugin-react-hooks - Package used for linting JS.
+* file-loader - Webpack loaded used for images and files.
+* husky - Package used for linting code on git commands.
+* import-glob - Webpack loader used for putting regex in css import.
+* media-blender - Package used for providing media queries.
+* mini-css-extract-plugin - Webpack plugin extracts CSS into separate files.
+* postcss - package for getting postcss options.
+* postcss-loader - Webpack loader used for postcss.
+* postcss-scss - package for parsing scss used for style linter.
+* promisify-child-process - Async child process library used in project setup.
+* raw-loader - Webpack loader used for files.
+* rc-slider - React slider component used in our components.
+* rc-tooltip - React tooltip component used in our components.
+* react-select - Select component for React.
+* regenerator-runtime - Used for Core-js polyfill.
+* sass - A pure JavaScript implementation of Sass
+* sass-loader - Webpack loader used for sass.
+* storybook - Storybook library used in projects.
+* style-loader - Webpack loader used for styles.
+* stylelint - Css linter.
+* stylelint-config-standard-scss - Css linter for scss type.
+* terser-webpack-plugin - Webpack plugin used for minimization.
+* webpack - Webpack library.
+* webpack-cli - Webpack cli library.
+* webpack-manifest-plugin - Webpack plugin used for outputting manifest.json.
+* webpack-merge - Webpack utility for merging multiple webpack files.
+
+## Dev dependencies
+
+* @babel/preset-env - Is a smart preset that allows you to use the latest JavaScript without needing to micromanage.
+* @babel/preset-react - Babel preset for React.
+* @eightshift/storybook - Our storybook used for frontend libs.
+* chalk - Terminal coloring library. Used in project setup.
+* del - Terminal delete library. Used in project setup.
+* gh-pages - Terminal GH pages lib for deployment to GH pages.
+* micromodal - Modal component used in the project here only for storybook.
+* ol - Map component used in the project here only for storybook.
+* ol-mapbox-style - Map component used in the project here only for storybook.
+* react-test-renderer - This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects.
+* replace-in-file - A simple utility to quickly replace text in one or more files or globs.
+* sassdoc - Sass docs library.
+* swiper - Swiper component used in the project here only for storybook.

package/schemas/block.json

@@ -0,0 +1,302 @@
+{
+	"title": "JSON schema for Eightshift blocks",
+	"$schema": "http://json-schema.org/draft-04/schema#",
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"type": "string"
+		},
+		"active": {
+			"type": "boolean",
+			"description": "Set to 'false' if you don't want the block to be registered.",
+			"default": true
+		},
+		"blockName": {
+			"type": "string",
+			"pattern": "^[^\/][a-z0-9-]*$",
+			"description": "Block name. Should be unique!"
+		},
+		"title": {
+			"type": "string",
+			"description": "Name of the block, shown in the Inserter, Sidebar, ..."
+		},
+		"category": {
+			"description": "To improve user experience, you can categorize blocks. The default category is 'eightshift', more can be added with hooks in 'src/Blocks/Blocks.php'.",
+			"anyOf": [
+				{
+					"type": "string"
+				},
+				{
+					"enum": [
+						"text",
+						"media",
+						"design",
+						"widgets",
+						"theme",
+						"embed"
+					]
+				}
+			],
+			"default": "eightshift"
+		},
+		"parent": {
+			"type": "array",
+			"description": "If set, this block will only be available within the provided block. For example, if a 'Columns' block can only have 'Column' blocks as children, set 'parent' to '<namespace>/columns' in the 'Column' block manifest.",
+			"items": {
+				"type": "string"
+			}
+		},
+		"icon": {
+			"type": "object",
+			"description": "Icon to identify the block, shown in various places within the Block editor.",
+			"properties": {
+				"background": {
+					"type": "string",
+					"description": "Block icon background color. If not set, value from Global manifest is used."
+				},
+				"foreground": {
+					"type": "string",
+					"description": "Block icon color. If not set, value from Global manifest is used."
+				},
+				"src": {
+					"type": "string",
+					"description": "Icon source, can be either Eightshift icons ('es-' prefix), SVG strings, or Dashicon name."
+				}
+			},
+			"additionalProperties": false
+		},
+		"description": {
+			"type": "string",
+			"description": "A short description of the block, shown in a couple of places in the Block editor, e.g. options sidebar."
+		},
+		"keywords": {
+			"type": "array",
+			"description": "Additional keywords to help users find the block. Keywords are used when searching for blocks.",
+			"items": {
+				"type": "string"
+			}
+		},
+		"attributes": {
+			"type": "object",
+			"description": "Source of truth for data used within the block. Check https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/ for more details.",
+			"patternProperties": {
+				"[a-zA-Z]": {
+					"type": "object",
+					"properties": {
+						"type": {
+							"description": "The type indicates the type of data that is stored by the attribute. It does not indicate where the data is stored, which is defined by the source field.\n\nA type is required, unless an enum is provided. A type can be used with an enum.\n\nNote that the validity of an object is determined by your source. For an example, see the query details below.",
+							"oneOf": [
+								{
+									"type": "string",
+									"enum": [
+										"null",
+										"boolean",
+										"object",
+										"array",
+										"string",
+										"integer",
+										"number"
+									]
+								},
+								{
+									"type": "array",
+									"uniqueItems": true,
+									"items": {
+										"type": "string",
+										"enum": [
+											"null",
+											"boolean",
+											"object",
+											"array",
+											"string",
+											"integer",
+											"number"
+										]
+									}
+								}
+							]
+						},
+						"enum": {
+							"type": "array",
+							"description": "An attribute can be defined as one of a fixed set of values. This is specified by an enum, which contains an array of allowed values:",
+							"items": {
+								"oneOf": [
+									{
+										"type": "boolean"
+									},
+									{
+										"type": "number"
+									},
+									{
+										"type": "string"
+									}
+								]
+							}
+						},
+						"source": {
+							"type": "string",
+							"description": "Attribute sources are used to define how the attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.",
+							"enum": [
+								"attribute"
+							]
+						},
+						"attribute": {
+							"type": "string",
+							"description": "Use an attribute source to extract the value from an attribute in the markup. The attribute is specified by the attribute field, which must be supplied.\n\nExample: Extract the src attribute from an image found in the block's markup."
+						}
+					},
+					"required": [
+						"type"
+					]
+				}
+			},
+			"additionalProperties": false
+		},
+		"example": {
+			"type": "object",
+			"description": "Data for the block preview, shown in the Inserter when hovering over block names.",
+			"properties": {
+				"attributes": {
+					"type": "object",
+					"description": "Set the attribues for the block example"
+				},
+				"innerBlocks": {
+					"type": "array",
+					"description": "Set the inner blocks that should be used within the block example. The blocks should be defined as a nested array like this: \n\n [ [ 'core/heading', { content: 'This is an Example' }, [] ] ]\n\n Where each block itself is an array that contains the block name, the block attributes, and the blocks inner blocks."
+				}
+			}
+		},
+		"hasInnerBlocks": {
+			"type": "boolean",
+			"description": "Set to 'true' if the block needs to support 'InnerBlocks'. You can then use '$renderContent' in the PHP view file to render the inner blocks.",
+			"default": false
+		},
+		"components": {
+			"type": "object",
+			"description": "Defines components used within the block. Component attributes can be used with the 'props' function. Check https://eightshift.com/docs/basics/blocks-component-in-block/ for more info."
+		},
+		"options": {
+			"type": "object",
+			"description": "Defines common option definitions for attributes. Check https://eightshift.com/docs/basics/blocks-component-in-block/ for more info."
+		},
+		"tailwind": {
+			"type": "object",
+			"description": "Defines shared Tailwind configs for the block. 'base' sets the base classes for the main part of the block. The base is augmented by 'options' and 'combinations', if set. 'parts' can be used for static/supporting parts of the block.",
+			"properties": {
+				"base": {
+					"type": "object",
+					"description": "Base classes for the main part of the block.",
+					"properties": {
+						"twClasses": {
+							"type": "string",
+							"description": "Classnames to apply."
+						},
+						"twClassesEditor": {
+							"type": "string",
+							"description": "Editor-specific classnames to apply. Overrides 'twClasses'"
+						}
+					},
+					"minProperties": 1
+				},
+				"options": {
+					"type": "object",
+					"description": "Per-attribute classes, added to the base class. Key represents the attribute name.",
+					"additionalProperties": {
+						"$ref": "#/$defs/twOptionsEntry"
+					},
+					"minProperties": 1
+				},
+				"parts": {
+					"type": "object",
+					"description": "Stand-alone parts of the block, not affected by 'options' or 'combinations'. Key represents the part name.",
+					"additionalProperties": {
+						"$ref": "#/$defs/twPartEntry"
+					},
+					"minProperties": 1
+				},
+				"combinations": {
+					"type": "array",
+					"description": "Conditionally applied classes, depending on the set attribute values. Added to the base class.",
+					"items": {
+						"type": "object",
+						"properties": {
+							"attributes": {
+								"type": "object",
+								"description": "Attributes to check for the condition. Key is the attribute name, value is the attribute value (or an array of possible values) to check for.",
+								"patternProperties": {
+									"[a-zA-Z]": {
+										"anyOf": [
+											{
+												"type": "string",
+												"minLength": 1
+											},
+											{
+												"type": "array",
+												"items": {
+													"type": "string",
+													"minLength": 1
+												}
+											}
+										]
+									}
+								}
+							},
+							"twClasses": {
+								"type": "string",
+								"description": "Classnames to apply if all conditions match. Key is the attribute value, value is the classnames to apply."
+							},
+							"twClassesEditor": {
+								"type": "string",
+								"description": "Editor-specific classnames to apply if all conditions match. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply."
+							}
+						},
+						"required": [
+							"attributes",
+							"twClasses"
+						]
+					},
+					"minLength": 1
+				}
+			},
+			"minProperties": 1
+		}
+	},
+	"required": [
+		"blockName",
+		"title"
+	],
+	"$defs": {
+		"twPartEntry": {
+			"type": "object",
+			"properties": {
+				"twClasses": {
+					"type": "string",
+					"description": "Classnames to apply."
+				},
+				"twClassesEditor": {
+					"type": "string",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'."
+				}
+			}
+		},
+		"twOptionsEntry": {
+			"type": "object",
+			"properties": {
+				"twClasses": {
+					"type": "object",
+					"description": "Classnames to apply. Key is the attribute value, value is the classnames to apply.",
+					"additionalProperties": {
+						"type": "string"
+					}
+				},
+				"twClassesEditor": {
+					"type": "object",
+					"description": "Editor-specific classnames to apply. Overrides 'twClasses'. Key is the attribute value, value is the classnames to apply.",
+					"additionalProperties": {
+						"type": "string"
+					}
+				}
+			}
+		}
+	}
+}