✨ add docs

.eslintrc.json

@@ -25,6 +25,7 @@
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }],
     "react/jsx-props-no-spreading": [0],
+    "react/no-unknown-property": ["error", { "ignore": ["jsx"] }],
     "react/react-in-jsx-scope": "off",
     "react/jsx-indent-props": ["error", 2],
     "import/extensions": [0],

.prettierignore

@@ -0,0 +1,2 @@
+*.mdx
+*.md

docs/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

docs/components/GlobalStyle.ts

@@ -0,0 +1,97 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  a:hover {
+    filter: brightness(1) !important;
+  }
+
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    border: 0 solid ${({ theme }) => theme.colors.layout.dark}
+  }
+`;
+
+export default GlobalStyle;

docs/components/Playground/code-theme.ts

@@ -0,0 +1,135 @@
+import { PrismTheme } from "prism-react-renderer";
+import { DefaultTheme } from "@tonightpass/kitchen";
+
+const makeCodeTheme = (theme: DefaultTheme): PrismTheme => ({
+  plain: {
+    backgroundColor: theme.colors.layout.darkest,
+    color: theme.colors.text.lightest,
+    fontWeight: "400",
+    fontStyle: "normal",
+    fontFamily: theme.family.monospace,
+    fontSize: ".875rem",
+    textRendering: "geometricPrecision",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#B362FF",
+      },
+    },
+    {
+      types: ["punctuation"],
+      style: {
+        color: "#FFFFFF",
+      },
+    },
+    {
+      types: ["namespace"],
+      style: {
+        opacity: 1,
+      },
+    },
+    {
+      types: ["tag", "operator"],
+      style: {
+        color: "#9EFFFF",
+      },
+    },
+    {
+      types: ["number"],
+      style: {
+        color: "#FF628C",
+      },
+    },
+    {
+      types: ["property", "function", "constant"],
+      style: {
+        color: "#FAD000",
+      },
+    },
+    {
+      types: ["tag-id", "selector", "atrule-id"],
+      style: {
+        color: "#eeebff",
+      },
+    },
+    {
+      types: ["attr-name"],
+      style: {
+        color: "#FAD000",
+      },
+    },
+    {
+      types: [
+        "boolean",
+        "entity",
+        "url",
+        "control",
+        "directive",
+        "unit",
+        "statement",
+        "regex",
+        "at-rule",
+        "placeholder",
+        "variable",
+        "imports",
+        "class-name",
+        "property-access",
+      ],
+      style: {
+        color: "#9EFFFF",
+      },
+    },
+    {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#A5FF90",
+      },
+    },
+    {
+      types: ["keyword"],
+      style: {
+        color: "#FF9D00",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        textDecorationLine: "line-through",
+      },
+    },
+    {
+      types: ["language-javascript", "script"],
+      style: {
+        color: theme.colors.accent.success,
+      },
+    },
+    {
+      types: ["inserted"],
+      style: {
+        textDecorationLine: "underline",
+      },
+    },
+    {
+      types: ["italic"],
+      style: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["important", "bold"],
+      style: {
+        fontWeight: "bold",
+      },
+    },
+    {
+      types: ["important"],
+      style: {
+        color: "#c4b9fe",
+      },
+    },
+  ],
+});
+
+export default makeCodeTheme;

docs/components/Playground/dynamic-live.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from "@tonightpass/kitchen";
+import React from "react";
+import { LivePreview, LiveProvider, LiveError } from "react-live";
+import makeCodeTheme from "./code-theme";
+import Editor from "./editor";
+import kitchenScope from "./scope";
+
+export interface Props {
+  code: string;
+  scope: {
+    [key: string]: unknown;
+  };
+}
+
+const DynamicLive: React.FC<Props> = ({ code, scope }) => {
+  const { theme } = useTheme();
+  const codeTheme = makeCodeTheme(theme);
+  return (
+    <LiveProvider
+      code={code}
+      scope={{ ...scope, ...kitchenScope }}
+      theme={codeTheme}
+    >
+      <div className="wrapper">
+        <LivePreview />
+        <LiveError className="live-error" />
+      </div>
+      <Editor code={code} />
+      <style jsx>{`
+        .wrapper {
+          width: 100%;
+          padding: 20px;
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+        }
+        .wrapper > :global(div) {
+          width: 100%;
+          background-color: transparent;
+        }
+        .wrapper > :global(.live-error) {
+          padding: 10px 12px 0 12px;
+          margin-bottom: 0;
+          border: 2px ${theme.colors.accent.danger} dotted;
+          border-radius: 10px;
+          color: ${theme.colors.accent.danger};
+          font-size: 13px;
+        }
+      `}</style>
+    </LiveProvider>
+  );
+};
+
+export default DynamicLive;