Merge pull request #329 from infinum/feature/fe-libs-tailwind

FE libs Tailwind - part 4 (ES UI components docs)

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"useTabs": true,
+	"jsxSingleQuote": true,
+	"singleQuote": true,
+	"singleAttributePerLine": true,
+	"printWidth": 120
+}

website/blog/2022-03-03-adding-blocks-wpcli.md

@@ -7,7 +7,7 @@ date: 2022-03-14
 tags: [eightshift, boilerplate, wpcli, components, blocks]
 hide_table_of_contents: false
 ---
-Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/devkit-components).
+Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/components/legacy-component-docs).
 
 These can be used out-of-the-box, but also as a good starting point if you need similar blocks in your projects. It will also speed up your development time since you don't have to build everything from scratch.
 

website/blog/2022-04-25-using-assets.md

@@ -99,7 +99,7 @@ Here are some examples of icons available out-of-the-box in our Icon component:
 
 ## Using icons for editor and block options
 
-When developing your blocks and adding new options, you may need to add icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/devkit-components) under `UI icons` and `Block icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
+When developing your blocks and adding new options, you may need to add icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/components/legacy-component-docs) under `UI icons` and `Block icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
 ```jsx
 import { ColorPaletteCustom, IconLabel, icons } from '@eightshift/frontend-libs/scripts';
 

website/docusaurus.config.js

@@ -1,10 +1,11 @@
-const {themes} = require('prism-react-renderer');
+const { themes } = require('prism-react-renderer');
 
 const darkTheme = themes.dracula;
 
 module.exports = {
 	title: 'Eightshift Development kit',
-	tagline: 'All the tools you need to start building a modern WordPress project, using all the latest front end development tools.',
+	tagline:
+		'All the tools you need to start building a modern WordPress project, using all the latest front end development tools.',
 	url: 'https://eightshift.com',
 	baseUrl: '/',
 	favicon: '/img/favicon.png',
@@ -16,7 +17,7 @@ module.exports = {
 			src: 'https://buttons.github.io/buttons.js',
 			async: true,
 			defer: true,
-		}
+		},
 	],
 	themeConfig: {
 		navbar: {
@@ -38,8 +39,8 @@ module.exports = {
 					position: 'right',
 				},
 				{
-					to: '/devkit-components/',
-					activeBasePath: 'devkit-components',
+					to: '/components/welcome',
+					activeBasePath: 'components',
 					label: 'Components',
 					position: 'right',
 				},
@@ -107,7 +108,11 @@ module.exports = {
 			appId: 'CWB1S6U3C4',
 			apiKey: 'cbae3fc769aee256328548eff1e91c1c',
 			indexName: 'infinum_eightshift',
-			startUrls: ['https://eightshift.com', 'https://eightshift.com/docs', 'https://eightshift.com/forms'],
+			startUrls: [
+				'https://eightshift.com',
+				'https://eightshift.com/docs',
+				'https://eightshift.com/forms',
+			],
 			contextualSearch: false,
 		},
 		prism: {
@@ -122,9 +127,9 @@ module.exports = {
 		docs: {
 			sidebar: {
 				autoCollapseCategories: true,
-			}
+			},
 		},
-		trailingSlash: false
+		trailingSlash: false,
 	},
 	presets: [
 		[
@@ -146,7 +151,8 @@ module.exports = {
 				},
 				blog: {
 					blogTitle: 'Tutorials and articles about Eightshift development kit',
-					blogDescription: 'Tutorials and articles about Eightshift development kit',
+					blogDescription:
+						'Tutorials and articles about Eightshift development kit',
 					blogSidebarTitle: 'Latest posts',
 					showReadingTime: true,
 					postsPerPage: 9,
@@ -168,6 +174,15 @@ module.exports = {
 				sidebarPath: require.resolve('./sidebars-forms.js'),
 			},
 		],
+		[
+			'@docusaurus/plugin-content-docs',
+			{
+				id: 'ui-components',
+				path: 'ui-components',
+				routeBasePath: 'components',
+				sidebarPath: require.resolve('./sidebars-components.js'),
+			},
+		],
 		'es-text-loader',
 	],
 	customFields: {
@@ -178,7 +193,7 @@ module.exports = {
 			'Gutenberg blocks',
 			'development kit',
 			'wordpress kit',
-			'devkit'
+			'devkit',
 		],
 		image: 'img-why-boilerplate@2x.png',
 	},

website/package.json

@@ -34,6 +34,7 @@
 	"dependencies": {
 		"@docusaurus/core": "^3.4.0",
 		"@docusaurus/preset-classic": "^3.4.0",
+		"@eightshift/ui-components": "^1.2.0",
 		"@infinum/docusaurus-theme": "^0.5.0",
 		"@mdx-js/react": "^3.0.1",
 		"@wp-playground/client": "^0.7.20",