style(prettier): 💄 update tailwind arrangement using prettier plugin

adaptui · Feb 1, 2022 · 5f6e990 · 5f6e990 · vercel · Feb 1, 2022
1 parent 7e41734
commit 5f6e990
Show file tree

Hide file tree

Showing 47 changed files with 97 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -175,6 +175,7 @@
     "postcss-focus-visible": "6.0.3",
     "postcss-selector-parser": "6.0.9",
     "prettier": "2.5.1",
+    "prettier-plugin-tailwindcss": "0.1.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "7.25.3",

diff --git a/src/avatar-group/stories/AvatarGroupBasic.stories.tsx b/src/avatar-group/stories/AvatarGroupBasic.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-orange-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-orange-200">
           <Story />
         </div>
       );

diff --git a/src/avatar-group/stories/AvatarGroupIcon.stories.tsx b/src/avatar-group/stories/AvatarGroupIcon.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-purple-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-purple-200">
           <Story />
         </div>
       );

diff --git a/src/avatar-group/stories/AvatarGroupName.stories.tsx b/src/avatar-group/stories/AvatarGroupName.stories.tsx
@@ -47,7 +47,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-yellow-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-yellow-200">
           <Story />
         </div>
       );

diff --git a/src/avatar-group/stories/AvatarGroupStack.stories.tsx b/src/avatar-group/stories/AvatarGroupStack.stories.tsx
@@ -44,7 +44,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-red-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-red-200">
           <Story />
         </div>
       );

diff --git a/src/avatar/stories/AvatarBasic.stories.tsx b/src/avatar/stories/AvatarBasic.stories.tsx
@@ -151,7 +151,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-blue-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-blue-200">
           <Story />
         </div>
       );

diff --git a/src/avatar/stories/AvatarStack.stories.tsx b/src/avatar/stories/AvatarStack.stories.tsx
@@ -136,7 +136,7 @@ export const ParentBackgroundMatch: Story = {
   decorators: [
     Story => {
       return (
-        <div className="flex items-center justify-center bg-green-200 w-80 h-80">
+        <div className="flex h-80 w-80 items-center justify-center bg-green-200">
           <Story />
         </div>
       );

diff --git a/src/box/stories/BoxAs.component.tsx b/src/box/stories/BoxAs.component.tsx
@@ -11,7 +11,7 @@ export const BoxAs: React.FC<BoxAsProps> = props => {
     <Box
       as={Button}
       suffix={<ClockIcon />}
-      className={tcm("bg-red-500 rounded-lg", className)}
+      className={tcm("rounded-lg bg-red-500", className)}
       {...rest}
     >
       Box

diff --git a/src/box/stories/BoxStyled.component.tsx b/src/box/stories/BoxStyled.component.tsx
@@ -10,18 +10,18 @@ export const BoxStyled: React.FC<BoxStyledProps> = props => {
   return (
     <Box
       as="figure"
-      className={tcm("p-8 overflow-hidden bg-gray-100 rounded-xl", className)}
+      className={tcm("overflow-hidden rounded-xl bg-gray-100 p-8", className)}
       {...rest}
     >
       <Box
         as="img"
-        className="object-cover w-32 h-32 mx-auto rounded-full md:w-48 md:h-auto md:rounded-md"
+        className="mx-auto h-32 w-32 rounded-full object-cover md:h-auto md:w-48 md:rounded-md"
         src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
         alt="Image of a women"
         width="384"
         height="512"
       />
-      <Box className="pt-6 space-y-4 text-center md:p-8 md:text-left">
+      <Box className="space-y-4 pt-6 text-center md:p-8 md:text-left">
         <Box as="blockquote">
           <Box as="p" className="text-lg font-semibold">
             “Tailwind CSS is the only framework that I've seen scale on large

diff --git a/src/button/stories/ButtonBasic.stories.tsx b/src/button/stories/ButtonBasic.stories.tsx
@@ -143,7 +143,7 @@ export const ExtendedSpinner: Story = {
 
 const CustomSpinnerComponent = () => {
   return (
-    <div className="inline-block w-4 h-4 m-2 after:block after:w-4 after:h-4 rounded-[50%] border-2 border-t-green-500 border-r-transparent border-b-green-500 border-l-transparent animate-spin" />
+    <div className="m-2 inline-block h-4 w-4 animate-spin rounded-[50%] border-2 border-t-green-500 border-r-transparent border-b-green-500 border-l-transparent after:block after:h-4 after:w-4" />
   );
 };
 

diff --git a/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx b/src/checkbox-group/stories/CheckboxGroupBasic.component.tsx
@@ -17,7 +17,7 @@ export const CheckboxGroupBasic: React.FC<CheckboxGroupBasicProps> = props => {
   if (!Array.isArray(state)) return null;
 
   return (
-    <div className="flex flex-col space-y-4 min-h-96">
+    <div className="flex min-h-96 flex-col space-y-4">
       <div className="text-xl font-bold" id="label">
         Pick fruits to eat
       </div>

diff --git a/src/checkbox/stories/CheckboxControlled.component.tsx b/src/checkbox/stories/CheckboxControlled.component.tsx
@@ -39,14 +39,14 @@ export const CheckboxControlled: React.FC<CheckboxControlledProps> = () => {
   const radioState = getRadioState();
 
   return (
-    <div className="flex flex-col items-center space-y-4 w-96">
+    <div className="flex w-96 flex-col items-center space-y-4">
       <Checkbox
         state={checkboxState}
         onStateChange={setCheckboxState}
         label={capitalizeFirstLetter(radioState as string)}
       />
 
-      <Separator className="w-full my-4" />
+      <Separator className="my-4 w-full" />
 
       <RadioComponent
         state={radioState}

diff --git a/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx b/src/checkbox/stories/CheckboxCustomAdvanced.component.tsx
@@ -54,13 +54,13 @@ const CustomCheckbox: React.FC<CustomCheckboxProps> = props => {
   return (
     <CheckboxLabel
       {...state}
-      className={tcm("px-8 py-2 border-2 border-blue-500 rounded", className)}
+      className={tcm("rounded border-2 border-blue-500 px-8 py-2", className)}
     >
       <CheckboxInput {...state} {...inputProps} />
       {state.isChecked ? (
-        <CheckboxIcon className="text-blue-500 absolute inset-y-0 left-0 flex items-center pl-1.5">
+        <CheckboxIcon className="absolute inset-y-0 left-0 flex items-center pl-1.5 text-blue-500">
           <svg
-            className="w-5 h-5"
+            className="h-5 w-5"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"

diff --git a/src/checkbox/stories/CheckboxCustomMedium.component.tsx b/src/checkbox/stories/CheckboxCustomMedium.component.tsx
@@ -19,7 +19,7 @@ export const CheckboxCustomMedium: React.FC<CheckboxCustomMediumProps> = () => {
       {state => {
         return (
           <>
-            <CheckboxLabel className="p-2 border-2 border-blue-500 rounded" />
+            <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
             <CheckboxIcon
               className={
                 state.isChecked

diff --git a/src/checkbox/stories/CheckboxCustomSimple.component.tsx b/src/checkbox/stories/CheckboxCustomSimple.component.tsx
@@ -22,7 +22,7 @@ export const CheckboxCustomSimple: React.FC<CheckboxCustomSimpleProps> = () => {
       label="Checkbox"
       description="Fruits in the basket"
     >
-      <CheckboxLabel className="p-2 border-2 border-blue-500 rounded" />
+      <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
       <CheckboxIcon className="bg-red-500">{CustomIconElement}</CheckboxIcon>
       <CheckboxText className="text-green-500">New Checkbox</CheckboxText>
       <CheckboxDescription className="text-orange-500">

diff --git a/src/checkbox/stories/CheckboxStack.component.tsx b/src/checkbox/stories/CheckboxStack.component.tsx
@@ -9,23 +9,23 @@ export const CheckboxStack: React.FC<CheckboxStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox small example"
       >
         <Checkbox size="sm" {...props} />
         <Checkbox size="sm" defaultState={true} {...props} />
         <Checkbox size="sm" defaultState={"indeterminate"} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox medium example"
       >
         <Checkbox size="md" {...props} />
         <Checkbox size="md" defaultState={true} {...props} />
         <Checkbox size="md" defaultState={"indeterminate"} {...props} />
       </Group>
       <Group
-        className="flex flex-row space-x-4 w-fit"
+        className="flex w-fit flex-row space-x-4"
         aria-label="Checkbox large example"
       >
         <Checkbox size="lg" {...props} />

diff --git a/src/circular-progress/stories/CircularProgressBasic.component.tsx b/src/circular-progress/stories/CircularProgressBasic.component.tsx
@@ -52,10 +52,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>

diff --git a/src/circular-progress/stories/CircularProgressCustom.component.tsx b/src/circular-progress/stories/CircularProgressCustom.component.tsx
@@ -59,10 +59,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>

diff --git a/src/circular-progress/stories/CircularProgressHint.component.tsx b/src/circular-progress/stories/CircularProgressHint.component.tsx
@@ -52,10 +52,10 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-4" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-4 block" onClick={() => setValue(0)}>
         Restart CircularProgress
       </Button>
-      <Button onClick={() => setValue(null)} className="block mt-2">
+      <Button onClick={() => setValue(null)} className="mt-2 block">
         Make Indeterminate - Sets value to `null`
       </Button>
     </>

diff --git a/src/create-icon/stories/IconAll.component.tsx b/src/create-icon/stories/IconAll.component.tsx
@@ -27,7 +27,7 @@ export type IconProps = {};
 
 export const Icon: React.FC<IconProps> = props => {
   return (
-    <div className="inline-grid grid-cols-6 gap-4 text-5xl place-items-center">
+    <div className="inline-grid grid-cols-6 place-items-center gap-4 text-5xl">
       <SlotIcon />
       <CaretDownIcon />
       <CaretLeftIcon />
@@ -43,7 +43,7 @@ export const Icon: React.FC<IconProps> = props => {
       <AwayStatusIcon />
       <TypingSmallStatusIcon className="inline-block w-12" />
       <TypingLargeStatusIcon className="inline-block w-12" />
-      <ArrowIcon className="inline-block w-12 h-12" />
+      <ArrowIcon className="inline-block h-12 w-12" />
       <EqualsIcon />
       <ErrorIcon />
       <SelectIcon />

diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
@@ -43,7 +43,7 @@ export const useDivider = createHook<DividerOptions, DividerHTMLProps>({
       (element: React.ReactNode) => {
         if (label) {
           element = (
-            <div className="w-full h-full">
+            <div className="h-full w-full">
               {element}
               <span className={labelClassName}>
                 {runIfFn(label, { orientation })}

diff --git a/src/divider/stories/DividerVertical.component.tsx b/src/divider/stories/DividerVertical.component.tsx
@@ -6,7 +6,7 @@ export type DividerVerticalProps = DividerProps & {};
 
 export const DividerVertical: React.FC<DividerVerticalProps> = props => {
   return (
-    <div className="flex items-center justify-center h-80">
+    <div className="flex h-80 items-center justify-center">
       <Divider orientation="vertical" {...props} />
     </div>
   );

diff --git a/src/icons/TypingLargeStatus.tsx b/src/icons/TypingLargeStatus.tsx
@@ -35,7 +35,7 @@ export const TypingLargeStatusIcon = React.forwardRef<
         y="2.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-333"
+        className="animate-pulse animation-delay-333 animation-duration-1000"
       />
       <rect
         width="2"
@@ -44,7 +44,7 @@ export const TypingLargeStatusIcon = React.forwardRef<
         y="2.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-667"
+        className="animate-pulse animation-delay-667 animation-duration-1000"
       />
     </Box>
   );

diff --git a/src/icons/TypingSmallStatus.tsx b/src/icons/TypingSmallStatus.tsx
@@ -34,7 +34,7 @@ export const TypingSmallStatusIcon = React.forwardRef<
         y="1.5"
         fill="#fff"
         rx="1"
-        className="animate-pulse animation-duration-1000 animation-delay-500"
+        className="animate-pulse animation-delay-500 animation-duration-1000"
       ></rect>
     </Box>
   );

diff --git a/src/input/stories/InputStack.component.tsx b/src/input/stories/InputStack.component.tsx
@@ -7,7 +7,7 @@ export type InputStackProps = InputProps & {};
 export const InputStack: React.FC<InputStackProps> = props => {
   return (
     <div className="flex flex-col space-y-4">
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="outline">
           Continue
         </Input>
@@ -21,7 +21,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="subtle">
           Continue
         </Input>
@@ -35,7 +35,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="underline">
           Continue
         </Input>
@@ -49,7 +49,7 @@ export const InputStack: React.FC<InputStackProps> = props => {
           Continue
         </Input>
       </div>
-      <div className="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row">
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <Input {...props} size="sm" variant="ghost">
           Continue
         </Input>

diff --git a/src/meter/stories/MeterBasic.component.tsx b/src/meter/stories/MeterBasic.component.tsx
@@ -44,7 +44,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>

diff --git a/src/meter/stories/MeterCustom.component.tsx b/src/meter/stories/MeterCustom.component.tsx
@@ -47,7 +47,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>

diff --git a/src/meter/stories/MeterHint.component.tsx b/src/meter/stories/MeterHint.component.tsx
@@ -52,7 +52,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>

diff --git a/src/meter/stories/MeterInterval.component.tsx b/src/meter/stories/MeterInterval.component.tsx
@@ -16,7 +16,7 @@ export const MeterInterval: React.FC<MeterIntervalProps> = props => {
   const [value, setValue] = useMeterState(0, max, stepState.valueAsNumber);
 
   return (
-    <div className="space-y-4 w-80">
+    <div className="w-80 space-y-4">
       <div className="flex justify-between space-x-4">
         <Input state={intervalState} label="Interval" />
         <Input state={stepState} label="Step" />
@@ -67,7 +67,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>
@@ -81,12 +81,12 @@ const Input: React.FC<{
   const { state, label } = props;
   return (
     <label>
-      <span className="inline-block mb-1 text-sm font-medium text-gray-700">
+      <span className="mb-1 inline-block text-sm font-medium text-gray-700">
         {label}
       </span>
       <NumberInput
         id="interval"
-        className="block w-full border-gray-300 rounded-md shadow-sm form-input focus:ring-gray-300 focus:border-gray-500 sm:text-sm"
+        className="form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-300 sm:text-sm"
         {...state}
       />
     </label>

diff --git a/src/meter/stories/MeterLabel.component.tsx b/src/meter/stories/MeterLabel.component.tsx
@@ -44,7 +44,7 @@ const ActionButtons: React.FC<{
 }> = ({ setValue }) => {
   return (
     <>
-      <Button type="reset" className="block mt-2" onClick={() => setValue(0)}>
+      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
         Restart Meter
       </Button>
     </>