Prefix Yail TW utility classes

Author: agjs

assets/icons/icon-linkedin.svg

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.157",
+  "version": "1.0.158",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

assets/icons/icon-twitter.svg

@@ -209,7 +209,7 @@ export const Primary = () => {
   return (
     <div>
       <Accordion
-        className='w-[500px]'
+        className='yl-w-[500px]'
         selectedId={2}
         sections={sections}
         expanded={expandedSections}

package.json

@@ -6,20 +6,20 @@ exports[`Accordion component > renders correctly 1`] = `
     class=""
   >
     <div
-      class="mb-4 border-b-0"
+      class="yl-mb-4 yl-border-b-0"
       role="presentation"
     >
       <h3
         aria-expanded="true"
-        class="relative flex cursor-pointer select-none items-center justify-between font-semibold capitalize text-primary-text-color"
+        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color"
         role="button"
         tabindex="0"
       >
         <div
-          class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap text-base"
+          class="yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
         >
           <svg
-            class="absolute right-0 w-6 cursor-pointer fill-primary-text-color hover:fill-primary"
+            class="yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
             data-testid="icon-expand-less"
             fill="currentColor"
             viewBox="0 0 24 24"
@@ -38,14 +38,14 @@ exports[`Accordion component > renders correctly 1`] = `
       </h3>
       <ul
         aria-labelledby="1"
-        class="animate-height-animation leading-8"
+        class="animate-height-animation yl-leading-8"
         role="region"
       >
         <li
-          class="text-primary-text-color cursor-pointer"
+          class="yl-text-primary-text-color yl-cursor-pointer"
         >
           <div
-            class="flex break-all"
+            class="yl-flex yl-break-all"
           >
             <span
               class=""
@@ -55,10 +55,10 @@ exports[`Accordion component > renders correctly 1`] = `
           </div>
         </li>
         <li
-          class="text-primary-text-color cursor-pointer"
+          class="yl-text-primary-text-color yl-cursor-pointer"
         >
           <div
-            class="flex break-all"
+            class="yl-flex yl-break-all"
           >
             <span
               class=""
@@ -75,15 +75,15 @@ exports[`Accordion component > renders correctly 1`] = `
     >
       <h3
         aria-expanded="false"
-        class="relative flex cursor-pointer select-none items-center justify-between font-semibold capitalize text-primary-text-color"
+        class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color"
         role="button"
         tabindex="0"
       >
         <div
-          class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap text-base"
+          class="yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
         >
           <svg
-            class="absolute right-0 w-6 cursor-pointer fill-primary-text-color hover:fill-primary"
+            class="yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
             data-testid="icon-expand-more"
             fill="currentColor"
             viewBox="0 0 24 24"

src/Components/Accordion/Accordion.stories.tsx

@@ -45,13 +45,13 @@ const Accordion: FC<IAccordionProps> = ({
         <div
           key={section.id}
           className={classNames({
-            "mb-4 border-b-0": idx !== sections.length - 1
+            "yl-mb-4 yl-border-b-0": idx !== sections.length - 1
           })}
           role='presentation'
         >
           <h3
             className={classNames(
-              "relative flex cursor-pointer select-none items-center justify-between font-semibold capitalize text-primary-text-color",
+              "yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color",
               sectionTitleClassName
             )}
             onClick={() => toggleExpand(section.id)}
@@ -64,31 +64,31 @@ const Accordion: FC<IAccordionProps> = ({
             role='button'
             aria-expanded={expanded.includes(section.id)}
           >
-            <div className='flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap text-base'>
+            <div className='yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
               {expanded.includes(section.id) ? (
-                <IconExpandLess className='absolute right-0 w-6 cursor-pointer fill-primary-text-color hover:fill-primary' />
+                <IconExpandLess className='yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
               ) : (
-                <IconExpandMore className='absolute right-0 w-6 cursor-pointer fill-primary-text-color hover:fill-primary' />
+                <IconExpandMore className='yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
               )}
               {section.title}
             </div>
             {itemsLabelText && (
-              <span className='whitespace-nowrap pr-6 lowercase text-primary-text-color'>
+              <span className='yl-whitespace-nowrap yl-pr-6 yl-lowercase yl-text-primary-text-color'>
                 {getItemsLabelText(section.items.length)}
               </span>
             )}
           </h3>
           {expanded.includes(section.id) && (
             <ul
-              className='animate-height-animation leading-8'
+              className='animate-height-animation yl-leading-8'
               role='region'
               aria-labelledby={section.id.toString()}
             >
               {section.items.map(item => (
                 <li
-                  className={classNames("text-primary-text-color", {
-                    "cursor-pointer": onSectionItemClick,
-                    "text-primary": selectedItemId === item.id
+                  className={classNames("yl-text-primary-text-color", {
+                    "yl-cursor-pointer": onSectionItemClick,
+                    "yl-text-primary": selectedItemId === item.id
                   })}
                   key={item.id}
                   onClick={() => {
@@ -101,10 +101,10 @@ const Accordion: FC<IAccordionProps> = ({
                     setSelectedItemId(item.id);
                   }}
                 >
-                  <div className='flex break-all'>
+                  <div className='yl-flex yl-break-all'>
                     <span
                       className={classNames({
-                        "text-primary": selectedItemId === item.id
+                        "yl-text-primary": selectedItemId === item.id
                       })}
                     >
                       {item.title}

src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -35,20 +35,20 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
   );
 
   return (
-    <div className='grid grid-cols-12 items-start gap-2 my-4'>
+    <div className='yl-grid yl-grid-cols-12 yl-items-start yl-gap-2 my-4'>
       <Select
         name='platform'
         label='Platform'
         onChange={form.set}
-        inputWrapperClassName='col-span-5'
+        inputWrapperClassName='yl-col-span-5'
         value={form.state.platform.value}
         error={form.state.platform.error}
         options={platforms.map(({ name }) => ({
           label: name,
           value: name
         }))}
       />
-      <div className='col-span-5'>
+      <div className='yl-col-span-5'>
         <Input
           name='url'
           label='Username'
@@ -58,8 +58,9 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
                 Username, a slug or a handle. Different platforms call it
                 differently.
               </Paragraph>
-              <Paragraph className='text-red-500'>
-                <span className='font-bold'>Do not</span> include the base URL.
+              <Paragraph className='yl-text-red-500'>
+                <span className='yl-font-bold'>Do not</span> include the base
+                URL.
               </Paragraph>
             </div>
           }
@@ -70,7 +71,7 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
       </div>
       <Button
         outlined
-        className='col-span-1 mt-8'
+        className='yl-col-span-1 yl-mt-8'
         onClick={() => {
           if (!form.validate().isValid) {
             return;

src/Components/Accordion/index.tsx

@@ -16,48 +16,48 @@ export default meta;
 export const Success = () => {
   return (
     <Alert type='success'>
-      <span className='font-bold'>Lorem ipsum dolor</span> sit amet, consectetur
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi magni
-      obcaecati, itaque dolorum quidem, delectus reiciendis rerum ullam beatae
-      veniam rem saepe eius tempora ab possimus quis sint nulla ipsa, pariatur
-      qui. Explicabo, cum inventore laudantium dicta deserunt doloribus. Amet
-      iusto dolores harum ullam delectus, minima id praesentium deleniti fugit
-      molestiae similique ducimus, laborum cupiditate quaerat exercitationem
-      doloremque quis quibusdam, ea voluptatibus quisquam laudantium nesciunt
-      voluptate molestias! Rem nam cupiditate libero tenetur quod, doloremque
-      magni sunt numquam nulla voluptates illo quo repellendus voluptatum rerum
-      alias, sapiente, ad minima deleniti omnis. Autem soluta sit libero quam
-      sequi dolor sed adipisci incidunt!
+      <span className='yl-font-bold'>Lorem ipsum dolor</span> sit amet,
+      consectetur Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Eligendi magni obcaecati, itaque dolorum quidem, delectus reiciendis rerum
+      ullam beatae veniam rem saepe eius tempora ab possimus quis sint nulla
+      ipsa, pariatur qui. Explicabo, cum inventore laudantium dicta deserunt
+      doloribus. Amet iusto dolores harum ullam delectus, minima id praesentium
+      deleniti fugit molestiae similique ducimus, laborum cupiditate quaerat
+      exercitationem doloremque quis quibusdam, ea voluptatibus quisquam
+      laudantium nesciunt voluptate molestias! Rem nam cupiditate libero tenetur
+      quod, doloremque magni sunt numquam nulla voluptates illo quo repellendus
+      voluptatum rerum alias, sapiente, ad minima deleniti omnis. Autem soluta
+      sit libero quam sequi dolor sed adipisci incidunt!
     </Alert>
   );
 };
 
 export const Error = () => {
   return (
     <Alert type='error'>
-      <span className='font-bold'>Lorem ipsum dolor</span> sit amet, consectetur
-      adipisicing elit. Doloremque sed numquam iste fugiat odit accusamus culpa,
-      recusandae ea nemo quo!
+      <span className='yl-font-bold'>Lorem ipsum dolor</span> sit amet,
+      consectetur adipisicing elit. Doloremque sed numquam iste fugiat odit
+      accusamus culpa, recusandae ea nemo quo!
     </Alert>
   );
 };
 
 export const Warning = () => {
   return (
     <Alert type='warning'>
-      <span className='font-bold'>Lorem ipsum dolor</span> sit amet, consectetur
-      adipisicing elit. Doloremque sed numquam iste fugiat odit accusamus culpa,
-      recusandae ea nemo quo!
+      <span className='yl-font-bold'>Lorem ipsum dolor</span> sit amet,
+      consectetur adipisicing elit. Doloremque sed numquam iste fugiat odit
+      accusamus culpa, recusandae ea nemo quo!
     </Alert>
   );
 };
 
 export const Info = () => {
   return (
     <Alert type='info'>
-      <span className='font-bold'>Lorem ipsum dolor</span> sit amet, consectetur
-      adipisicing elit. Doloremque sed numquam iste fugiat odit accusamus culpa,
-      recusandae ea nemo quo!
+      <span className='yl-font-bold'>Lorem ipsum dolor</span> sit amet,
+      consectetur adipisicing elit. Doloremque sed numquam iste fugiat odit
+      accusamus culpa, recusandae ea nemo quo!
     </Alert>
   );
 };

src/Components/AddSocialPlatform/index.tsx

@@ -3,13 +3,13 @@
 exports[`Alert component > renders correctly with children 1`] = `
 <DocumentFragment>
   <div
-    class="flex min-h-screen max-w-screen-sm items-center justify-center"
+    class="yl-flex yl-min-h-screen yl-max-w-screen-sm yl-items-center yl-justify-center"
   >
     <div
-      class="bg-gradient-to-r p-[1px] from-green-400 via-green-500 to-green-900 text-green-500"
+      class="yl-bg-gradient-to-r yl-p[1px] from-green-400 via-green-500 to-green-900 text-green-500"
     >
       <div
-        class="back flex h-full w-full items-center justify-center bg-primary-background-color p-4"
+        class="back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-primary-background-color yl-p-4"
       >
         <span>
           Success Message

src/Components/Alert/Alert.stories.tsx

@@ -5,19 +5,20 @@ import { AlertProps } from "./types";
 
 const Alert: FC<AlertProps> = ({ type, children, className }) => {
   return (
-    <div className='flex min-h-screen max-w-screen-sm items-center justify-center'>
+    <div className='yl-flex yl-min-h-screen yl-max-w-screen-sm yl-items-center yl-justify-center'>
       <div
-        className={classNames("bg-gradient-to-r p-[1px]", className, {
-          "from-green-400 via-green-500 to-green-900 text-green-500":
+        className={classNames("yl-bg-gradient-to-r yl-p-[1px]", className, {
+          "yl-from-green-400 yl-via-green-500 yl-to-green-900 yl-text-green-500":
             type === "success",
-          "from-red-400 via-red-500 to-red-900 text-red-500": type === "error",
-          "from-yellow-400 via-yellow-500 to-yellow-900 text-yellow-500":
+          "yl-from-red-400 yl-via-red-500 yl-to-red-900 yl-text-red-500":
+            type === "error",
+          "yl-from-yellow-400 yl-via-yellow-500 yl-to-yellow-900 yl-text-yellow-500":
             type === "warning",
-          "from-blue-400 via-blue-500 to-blue-900 text-blue-500":
+          "yl-from-blue-400 yl-via-blue-500 yl-to-blue-900 yl-text-blue-500":
             type === "info"
         })}
       >
-        <div className='back flex h-full w-full items-center justify-center bg-primary-background-color p-4'>
+        <div className='back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-primary-background-color yl-p-4'>
           <span>{children}</span>
         </div>
       </div>