docs(tokens): update tokens and tailwind documentation (#3931)

* docs(tokens): update tokens and tailwind documentation

* chore(tokens): change deprecated version for deprecated tokens

* fixup! docs(tokens): update tokens and tailwind documentation

* chore(docs): add tailwind classnames to documentation

* docs(tokens): refactor Tailwind page

* fixup! chore(docs): add tailwind classnames to documentation

docs/src/components/DesignTokensList/ComponentDesignTokens.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import tokensList from "@kiwicom/orbit-design-tokens/output/docs-tokens.json";
+import componentCategories from "@kiwicom/orbit-design-tokens/output/docs-components.json";
+import { Separator, Select, InputField, Stack, Box } from "@kiwicom/orbit-components";
+import { Search } from "@kiwicom/orbit-components/icons";
+import { camelCase } from "lodash";
+
+import DesignTokensTable from "./components/DesignTokensTable";
+import { Platforms } from "./types.d";
+import useDebounce from "./useDebounce";
+
+const allTokens = Object.entries(tokensList).map(([name, value]) => ({
+  name,
+  value,
+}));
+
+const componentTokens = Object.assign(
+  {},
+  ...componentCategories.categories
+    .filter(category => category !== "background")
+    .map(category => {
+      const categoryTokens = allTokens.filter(
+        ({
+          value: {
+            schema: { namespace, object },
+          },
+        }) => {
+          return namespace === "component" && object === category;
+        },
+      );
+      return { [category]: categoryTokens };
+    }),
+);
+
+const ComponentDesignTokens = () => {
+  const [filter, setFilter] = React.useState<string>("");
+  const [platform, setPlatform] = React.useState<keyof typeof Platforms>("javascript");
+  const debouncedFilter = useDebounce(filter, 300);
+
+  return (
+    <Stack spacing="large">
+      <Stack spacing="medium" direction="row">
+        <InputField
+          prefix={<Search />}
+          placeholder="Filter design tokens from categories..."
+          value={filter}
+          onChange={event => setFilter(event.currentTarget.value)}
+        />
+        <Box maxWidth="200px" width="full">
+          <Select
+            value={platform}
+            onChange={event => {
+              const value = event.currentTarget.value as Platforms;
+              setPlatform(value);
+            }}
+            options={[
+              { value: "placeholder", label: "Platform", disabled: true },
+              { value: "javascript", label: "Javascript" },
+              { value: "foundation", label: "Foundation alias" },
+            ]}
+          />
+        </Box>
+      </Stack>
+      <Separator />
+      {Object.entries(componentTokens).map(([category, value]) => {
+        if (Array.isArray(value)) {
+          const name = `${camelCase(category)} tokens`;
+          return (
+            <DesignTokensTable
+              tokens={value}
+              filter={debouncedFilter}
+              platform={platform}
+              tableName={name}
+              showVariantColumn
+            />
+          );
+        }
+        return null;
+      })}
+    </Stack>
+  );
+};
+
+export default ComponentDesignTokens;

docs/src/components/DesignTokensList/GlobalDesignTokens.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import tokensList from "@kiwicom/orbit-design-tokens/output/docs-tokens.json";
+import globalCategories from "@kiwicom/orbit-design-tokens/output/docs-categories.json";
+import { Separator, Select, InputField, Stack, Box } from "@kiwicom/orbit-components";
+import { Search } from "@kiwicom/orbit-components/icons";
+
+import DesignTokensTable from "./components/DesignTokensTable";
+import OptionsFilter from "./OptionsFilter";
+import { GlobalCategories, Platforms, TypographyCategories } from "./types.d";
+import useDebounce from "./useDebounce";
+
+const categories = globalCategories.categories as (keyof typeof GlobalCategories)[];
+
+const allTokens = Object.entries(tokensList).map(([name, value]) => ({
+  name,
+  value,
+}));
+
+const groupedCategories = [...categories, "deprecated"]
+  .map(category => {
+    if (category in TypographyCategories) return "typography";
+    return category;
+  })
+  .filter((v, i, a) => a.indexOf(v) === i);
+
+const globalTokens = Object.assign(
+  {},
+  ...groupedCategories.map(category => {
+    const categoryTokens = allTokens.filter(token => {
+      const { namespace, object } = token.value.schema;
+
+      if (token.value.deprecated) return category === "deprecated";
+
+      if (namespace === "global") {
+        if (category === "typography" && object in TypographyCategories) return true;
+        return object === category;
+      }
+
+      return false;
+    });
+    return { [category]: categoryTokens };
+  }),
+);
+
+const GlobalDesignTokens = () => {
+  const [filter, setFilter] = React.useState<string>("");
+  const [platform, setPlatform] = React.useState<keyof typeof Platforms>("javascript");
+  const [selectedCategories, setSelectedCategories] = React.useState<string[]>([]);
+
+  const handleSelectCategory = (name: string) => {
+    if (selectedCategories.includes(name)) {
+      setSelectedCategories(prev => prev.filter(category => category !== name));
+      return;
+    }
+
+    setSelectedCategories(prev => [...prev, name]);
+  };
+
+  const debouncedFilter = useDebounce(filter, 300);
+
+  return (
+    <Stack spacing="large">
+      <Stack spacing="medium" direction="row">
+        <InputField
+          prefix={<Search />}
+          placeholder="Filter design tokens from categories..."
+          value={filter}
+          onChange={event => setFilter(event.currentTarget.value)}
+        />
+        <Box maxWidth="200px" width="full">
+          <Select
+            value={platform}
+            onChange={event => {
+              const value = event.currentTarget.value as Platforms;
+              setPlatform(value);
+            }}
+            options={[
+              { value: "placeholder", label: "Platform", disabled: true },
+              { value: "javascript", label: "Javascript" },
+              { value: "foundation", label: "Foundation alias" },
+            ]}
+          />
+        </Box>
+      </Stack>
+      <OptionsFilter
+        label="Selected categories"
+        value={selectedCategories}
+        options={groupedCategories.map(c => ({ key: c, name: GlobalCategories[c] }))}
+        onChange={handleSelectCategory}
+      />
+      <Separator />
+      {Object.entries(globalTokens).map(([category, value]) => {
+        if (
+          Array.isArray(value) &&
+          category in GlobalCategories &&
+          (selectedCategories.length === 0 || selectedCategories.includes(category))
+        ) {
+          const name = GlobalCategories[category];
+          return (
+            <DesignTokensTable
+              tokens={value}
+              filter={debouncedFilter}
+              platform={platform}
+              showReplacement={category === "deprecated"}
+              tableName={name}
+            />
+          );
+        }
+        return null;
+      })}
+    </Stack>
+  );
+};
+
+export default GlobalDesignTokens;

docs/src/components/DesignTokensList/OptionsFilter.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button, Inline, Stack, Text } from "@kiwicom/orbit-components";
+
+interface Option {
+  key: string;
+  name: string | null;
+}
+
+const OptionsFilter = ({
+  value,
+  options,
+  label,
+  onChange,
+}: {
+  value: string[];
+  label?: string;
+  options: Option[];
+  onChange: (key: string) => void;
+}) => {
+  return (
+    <Stack>
+      {label && (
+        <Text size="small" weight="bold">
+          {label}
+        </Text>
+      )}
+      <Inline spacing="XSmall">
+        {options.map(({ key, name }) => {
+          return (
+            <Button
+              size="small"
+              type={value.includes(key) ? "primarySubtle" : "secondary"}
+              onClick={() => onChange(key)}
+              key={key}
+            >
+              {name}
+            </Button>
+          );
+        })}
+      </Inline>
+    </Stack>
+  );
+};
+
+export default OptionsFilter;