init tailwind

thomaspoignant · Oct 14, 2024 · 2e2643d · 2e2643d
1 parent cf90a24
commit 2e2643d
Show file tree

Hide file tree

Showing 19 changed files with 553 additions and 845 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -3,7 +3,6 @@
 
 const lightCodeTheme = require('prism-react-renderer').themes.github;
 const darkCodeTheme = require('prism-react-renderer').themes.dracula;
-const tailwindPlugin = require('./tailwind-config.cjs');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -17,7 +16,19 @@ const config = {
   organizationName: 'thomaspoignant',
   projectName: 'go-feature-flag',
   trailingSlash: false,
-  plugins: [tailwindPlugin],
+  plugins: [
+    async function myPlugin(context, options) {
+      return {
+        name: 'docusaurus-tailwindcss',
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require('tailwindcss'));
+          postcssOptions.plugins.push(require('autoprefixer'));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
 
   customFields: {
     description:
@@ -70,7 +81,6 @@ const config = {
           customCss: [
             require.resolve('./src/css/custom.css'),
             require.resolve('./src/css/pushy-buttons.css'), //https://github.com/iRaul/pushy-buttons
-            require.resolve('./src/css/simplegrid.css'), //https://thisisdallas.github.io/Simple-Grid/
           ],
         },
         sitemap: {
@@ -100,7 +110,7 @@ const config = {
     ],
   ],
   themeConfig:
-  /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       announcementBar: {
         id: 'support_usz', // Increment on change
@@ -308,7 +318,7 @@ const config = {
           'csharp',
           'yaml',
           'python',
-          'ruby'
+          'ruby',
         ],
       },
     }),

diff --git a/website/src/components/doc/cardv2/index.js b/website/src/components/doc/cardv2/index.js
@@ -7,11 +7,16 @@ import PropTypes from 'prop-types';
 Cards.prototype = {
   cards: PropTypes.array.isRequired,
 };
+
 export function Cards(props) {
   const listItems = props.cards.map((item, index) => (
     <Card {...item} key={index} />
   ));
-  return <div className="grid grid-pad">{listItems}</div>;
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 xl:grid-cols-3">
+      {listItems}
+    </div>
+  );
 }
 
 Card.propTypes = {
@@ -22,47 +27,46 @@ Card.propTypes = {
   logoImg: PropTypes.string,
   docLink: PropTypes.string,
 };
+
 export function Card(props) {
   return (
-    <div className={clsx('col-1-3 mobile-col-1-1')}>
-      <Link to={props.docLink} className={styles.link}>
-        <div className={styles.card}>
-          <div className={styles.header}>
-            <span className={styles.socialIcon}>
-              {props.logoCss && <i className={props.logoCss}></i>}
-              {props.logoImg && (
-                <img src={props.logoImg} className={styles.logoImg} />
-              )}
-            </span>
-          </div>
-          <div>
-            <p className={styles.name}>{props.title}</p>
-          </div>
-          <p className={styles.message}>{props.content}</p>
-          <div className={styles.badgeSection}>
-            {props.badges &&
-              props.badges.map((item, i) => {
-                return (
-                  <span
-                    className={clsx(styles.badge, styles.badgeInfo)}
-                    key={item}>
-                    {item}
-                  </span>
-                );
-              })}
-            {props.warningBadges &&
-              props.warningBadges.map((item, i) => {
-                return (
-                  <span
-                    className={clsx(styles.badge, styles.badgeWarning)}
-                    key={item}>
-                    {item}
-                  </span>
-                );
-              })}
-          </div>
+    <Link to={props.docLink} className={styles.link}>
+      <div className={styles.card}>
+        <div className={styles.header}>
+          <span className={styles.socialIcon}>
+            {props.logoCss && <i className={props.logoCss}></i>}
+            {props.logoImg && (
+              <img src={props.logoImg} className={styles.logoImg} />
+            )}
+          </span>
         </div>
-      </Link>
-    </div>
+        <div>
+          <p className={styles.name}>{props.title}</p>
+        </div>
+        <p className={styles.message}>{props.content}</p>
+        <div className={styles.badgeSection}>
+          {props.badges &&
+            props.badges.map((item, i) => {
+              return (
+                <span
+                  className={clsx(styles.badge, styles.badgeInfo)}
+                  key={item}>
+                  {item}
+                </span>
+              );
+            })}
+          {props.warningBadges &&
+            props.warningBadges.map((item, i) => {
+              return (
+                <span
+                  className={clsx(styles.badge, styles.badgeWarning)}
+                  key={item}>
+                  {item}
+                </span>
+              );
+            })}
+        </div>
+      </div>
+    </Link>
   );
 }
diff --git a/website/src/components/editor/FlagForm/index.js b/website/src/components/editor/FlagForm/index.js
@@ -2,7 +2,6 @@ import styles from './styles.module.css';
 import {Input} from '../Input';
 import React from 'react';
 import {Switch} from '../Switch';
-import clsx from 'clsx';
 import {Select} from '../Select';
 import {Variations} from '../Variation';
 import {useFormContext} from 'react-hook-form';
@@ -15,6 +14,7 @@ import {FlagTest} from '../FlagTest';
 FlagForm.propTypes = {
   label: PropTypes.string.isRequired,
 };
+
 export function FlagForm({label}) {
   const {watch} = useFormContext();
   const typeSelectorContent = [
@@ -26,41 +26,38 @@ export function FlagForm({label}) {
 
   return (
     <div className={styles.flagContainer}>
-      <div className="grid-pad grid">
-        <div className="col-6-12 mobile-col-1-2">
+      <div className="grid grid-cols-12">
+        <div className="xl:col-span-6 col-span-2 mb-4">
           <Input
             displayText="Flag Name"
             label={`${label}.flagName`}
             required={true}
           />
         </div>
-        <div className="col-3-12 mobile-col-1-2">
+        <div className="col-span-3">
           <Switch
             id="disable"
             label={`${label}.disable`}
             displayText="Disable"
           />
         </div>
-        <div className="col-3-12 mobile-col-1-2">
+        <div className="col-span-3">
           <Switch
             id="disable"
             label={`${label}.trackEvents`}
             displayText="Track event"
             defaultChecked={true}
           />
         </div>
-      </div>
-      <div className="grid-pad grid">
-        <div className={clsx('col-3-12 mobile-col-1-2')}>
+        <div className={'col-span-3'}>
           <Select
             title="Flag type"
             content={typeSelectorContent}
             label={`${label}.type`}
             required={true}
           />
         </div>
-        <div className={clsx('col-1-12', 'mobile-col-1-1')}></div>
-        <div className="col-2-12 mobile-col-1-2">
+        <div className="col-start-5 col-span-3">
           <Input
             id="version"
             label={`${label}.version`}

diff --git a/website/src/components/editor/FlagForm/styles.module.css b/website/src/components/editor/FlagForm/styles.module.css
@@ -1,21 +1,21 @@
 .flagContainer {
-  background-color: var(--goff-editor-container-bg);
-  border-radius: 0.3rem;
-  box-sizing: border-box;
-  padding: 1rem 1rem;
-  margin-bottom: 2rem;
+    background-color: var(--goff-editor-container-bg);
+    border-radius: 0.3rem;
+    box-sizing: border-box;
+    margin: 1rem;
+    padding: 1.5rem;
 }
 
 .flagContainer h1 {
-  font-size: 1.3rem;
-  padding: 0.3rem 1rem 0.3rem;
-  background-color: var(--goff-editor-title-bg);
-  font-family: poppins, sans-serif;
-  font-weight: 400;
-  border-radius: 0.3rem;
-  box-sizing: border-box;
+    font-size: 1.3rem;
+    padding: 0.3rem 1rem 0.3rem;
+    background-color: var(--goff-editor-title-bg);
+    font-family: poppins, sans-serif;
+    font-weight: 400;
+    border-radius: 0.3rem;
+    box-sizing: border-box;
 }
 
 h2 {
-  margin-top: 1.5rem;
+    margin-top: 1.5rem;
 }
diff --git a/website/src/components/editor/FlagTest/index.js b/website/src/components/editor/FlagTest/index.js
@@ -59,22 +59,22 @@ export function FlagTest({flagInfo}) {
   return (
     <div>
       <h2>Test your flag</h2>
-      <div className="grid-pad grid">
-        <div className="col-5-12">
+      <div className="grid grid-cols-12">
+        <div className="col-span-5">
           <h4>Evaluation Context</h4>
           <JsonEditor
             label={`${flagInfo}.context`}
             value={JSON.stringify(defaultContext, ' ', 2)}
           />
         </div>
-        <div className={clsx('col-2-12', styles.buttonContainer)}>
+        <div className={clsx('col-span-2', styles.buttonContainer)}>
           <button
             className="pushy__btn pushy__btn--md pushy__btn--black"
             onClick={submit}>
             Evaluate Flag
           </button>
         </div>
-        <div className="col-5-12">
+        <div className="col-span-5">
           <h4>Flag evaluation Details</h4>
           <div>
             {data.resolutionDetail !== undefined && (

diff --git a/website/src/components/editor/Variation/index.js b/website/src/components/editor/Variation/index.js
@@ -11,6 +11,7 @@ Variations.propTypes = {
   type: PropTypes.string,
   label: PropTypes.string.isRequired,
 };
+
 export function Variations({type, label}) {
   const {control} = useFormContext();
   const {fields, append, remove} = useFieldArray({
@@ -25,7 +26,7 @@ export function Variations({type, label}) {
   return (
     <div>
       <h2>Variations</h2>
-      <div className="grid grid-pad">
+      <div className="grid grid-cols-12">
         {fields.map((field, index) => (
           <Variation
             type={type}
@@ -54,6 +55,7 @@ Variation.propTypes = {
   index: PropTypes.number.isRequired,
   icon: PropTypes.string,
 };
+
 function Variation({type, label, remove, index, icon}) {
   const {register} = useFormContext();
   const valueField = (type, label, register) => {
@@ -76,15 +78,15 @@ function Variation({type, label, remove, index, icon}) {
     remove(index);
   };
   return (
-    <div className={styles.variation}>
-      <div className={clsx('col-4-12 mobile-col-5-12', styles.icons)}>
+    <>
+      <div className={clsx('col-span-5 mb-5 pb-1', styles.icons)}>
         <div className={styles.icon}>{icon}</div>
         <Input displayText="Name" label={`${label}.name`} required={true} />
       </div>
-      <div className={clsx('col-6-12 mobile-col-7-12')}>
+      <div className={clsx('col-span-6')}>
         {valueField(type, label + '.value', register)}
       </div>
-      <div className="col-1-12 mobile-col-1-12">
+      <div className="col-span-1">
         {
           <button className={styles.buttonPlus} onMouseDown={handleOnClick}>
             <span className="fa-stack fa-1x">
@@ -98,6 +100,6 @@ function Variation({type, label, remove, index, icon}) {
           </button>
         }
       </div>
-    </div>
+    </>
   );
 }
diff --git a/website/src/components/home/HomeHeader/index.js b/website/src/components/home/HomeHeader/index.js
@@ -45,8 +45,8 @@ export function HomeHeader() {
         </svg>
       </div>
       <div className={clsx('container', styles.container)}>
-        <div className="grid grid-pad">
-          <div className="col-1-2">
+        <div className="row">
+          <div className="col col--6">
             <div className={styles.heroContent}>
               <span className="goffMainTitle">GO Feature Flag</span>
               <br />
@@ -100,7 +100,7 @@ export function HomeHeader() {
               </Link>
             </div>
           </div>
-          <div className="col-1-2">
+          <div className="col col--6">
             <div className="hero-image">
               <img src={siteConfig.customFields.logo} alt="hero-img" />
             </div>

diff --git a/website/src/components/home/benefit/index.js b/website/src/components/home/benefit/index.js
@@ -8,6 +8,7 @@ BenefitCard.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
 };
+
 function BenefitCard({img, title, description}) {
   return (
     <div className="col-1-5 mobile-col-1-1">
@@ -42,7 +43,7 @@ export function Benefit() {
           </div>
         </div>
       </div>
-      <div className="grid grid-pad">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-2 px-3">
         <BenefitCard
           img="img/benefits/rocket.jpg"
           title="Test in production"