docs: add tailwind status to tracking

docs/src/components/Dashboard/components/ComponentList.tsx

@@ -11,8 +11,9 @@ import {
   TableRow,
   TableCell,
 } from "@kiwicom/orbit-components";
-import { ChevronDown, ChevronUp } from "@kiwicom/orbit-components/icons";
+import { CheckCircle, ChevronDown, ChevronUp } from "@kiwicom/orbit-components/icons";
 
+import tailwindMigrationData from "../../../data/tailwind-migration-status.yaml";
 import { TrackedData } from "../interfaces";
 
 type ComponentData = Pick<TrackedData, "name" | "instances" | "category" | "isDeprecated" | "slug">;
@@ -40,13 +41,9 @@ const Sort = ({
 );
 
 const ComponentList = ({ components, unused }: Props) => {
-  const [data, setData] = React.useState<ComponentData[]>([]);
+  const [data, setData] = React.useState<ComponentData[]>(components);
   const [isSorted, setSorted] = React.useState(false);
 
-  React.useEffect(() => {
-    setData(components);
-  }, [setData, components]);
-
   const mappedUnused = unused
     ? unused.map(name => ({
         name,
@@ -90,11 +87,12 @@ const ComponentList = ({ components, unused }: Props) => {
                   }
                 }}
               >
-                Number of instances
+                # of instances
               </Sort>
             </TableCell>
             <TableCell>Category</TableCell>
             <TableCell>Deprecated</TableCell>
+            <TableCell>Migrated to Tailwind</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -116,6 +114,9 @@ const ComponentList = ({ components, unused }: Props) => {
                   </span>
                 )}
               </TableCell>
+              <TableCell align="center">
+                {tailwindMigrationData[name] && <CheckCircle color="success" />}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

docs/src/data/tailwind-migration-status.yaml

@@ -0,0 +1,72 @@
+Accordion: false
+AirportIllustration: false
+Alert: true
+Badge: true
+BadgeList: true
+BaggageStepper: false
+Breadcrumbs: true
+Box: true
+Button: true
+ButtonGroup: true
+ButtonLink: true
+ButtonMobileStore: false
+ButtonPrimitive: true
+CallOutBanner: false
+Card: true
+CarrierLogo: true
+Checkbox: false
+ChoiceGroup: false
+Collapse: false
+Coupon: false
+CountryFlag: true
+Dialog: true
+Drawer: true
+ErrorFormTooltip: true
+FeatureIcon: false
+FormLabel: true
+Grid: true
+Heading: true
+IllustrationPrimitive: true
+IllustrationPrimitiveList: false
+InputField: false
+InputFile: true
+InputGroup: false
+InputSelect: true
+Inline: false
+Itinerary: false
+Layout: true
+LinkList: true
+List: true
+ListChoice: true
+Loading: true
+Modal: false
+NavigationBar: true
+NotificationBadge: false
+Pagination: false
+Popover: false
+Radio: true
+Seat: false
+SegmentedSwitch: true
+Select: true
+Separator: false
+ServiceLogo: false
+SkipLink: false
+SkipNavigation: false
+Slider: false
+SocialButton: false
+Stack: true
+Stepper: false
+StopoverArrow: false
+Switch: true
+Table: false
+Tabs: false
+Tag: false
+Tile: false
+TileGroup: false
+Text: true
+TextLink: true
+Textarea: true
+Timeline: false
+Toast: false
+Truncate: false
+Wizard: false

docs/src/data/tailwind-migration-status.yaml.d.ts

@@ -0,0 +1,3 @@
+declare const tailwindMigrationStatusData: Record<string, boolean>;
+
+export default tailwindMigrationStatusData;