Add documentation

.size-limit.js

@@ -23,11 +23,11 @@ module.exports = [
     modifyWebpackConfig,
   },
   {
-    path: "packages/shared-types/next/dist/musy-app-shared-types.cjs.prod.js",
+    path: "packages/shared-types/dist/musy-app-shared-types.cjs.prod.js",
     modifyWebpackConfig,
   },
   {
-    path: "packages/shared-types/next/dist/musy-app-shared-types.esm.js",
+    path: "packages/shared-types/dist/musy-app-shared-types.esm.js",
     modifyWebpackConfig,
   },
 ];

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 "@tonightpass/kitchen";
+
+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/Landing/Featured/index.tsx

@@ -0,0 +1,52 @@
+import { Button, Container, Link, Text } from "@tonightpass/kitchen";
+
+const Featured: React.FC = () => {
+  return (
+    <Container
+      id={"header"}
+      maxW={"mobile"}
+      mx={"auto"}
+      py={"extraLarge"}
+      header
+    >
+      <Container align={"center"}>
+        <Text
+          align={"center"}
+          size={"extraTitle"}
+          weight={"black"}
+          accent={"primary"}
+          h1
+        >
+          Tonight Pass
+        </Text>
+        <Text align={"center"} size={"title"} weight={"bold"} h2>
+          delicious react styled-components
+        </Text>
+      </Container>
+      <Text
+        size={"medium"}
+        mt={"normal"}
+        weight={"medium"}
+        align={"center"}
+        color={"darker"}
+      >
+        Design UI like Tonight Pass in React or React Native with optimized and
+        customizable styled-components.
+      </Text>
+      <Container row gap={"normal"} justify={"center"} mt={"large"}>
+        <Button forwardedAs={Link} href={"/docs"}>
+          Get started
+        </Button>
+        <Button
+          type={"dark"}
+          forwardedAs={Link}
+          href={"https://github.com/tonightpass/kitchen"}
+        >
+          Contribute
+        </Button>
+      </Container>
+    </Container>
+  );
+};
+
+export default Featured;

docs/components/Landing/Features/index.tsx

@@ -0,0 +1,121 @@
+import kitchen, { Container, Text } from "@tonightpass/kitchen";
+
+const Features = () => {
+  return (
+    <Container id={"features"} py={"extraLarge"} align={"center"} section>
+      <Text transform={"uppercase"} weight={"bold"} align={"center"} h3>
+        All features{" "}
+        <Text transform={"uppercase"} weight={"bold"} accent={"primary"} span>
+          Kitchen contains
+        </Text>
+      </Text>
+      <Text
+        size={"medium"}
+        mt={"normal"}
+        weight={"medium"}
+        align={"center"}
+        color={"darker"}
+      >
+        Discover all of them. Say bye to wasted time and hello to fresh design.
+      </Text>
+      <Container mt={"large"} w={"100%"} gap={"normal"}>
+        <Container direction={["column", "column", "row"]} gap={"normal"}>
+          <Container gap={"normal"}>
+            <FeatureContainer minH={200} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                Accessible
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                Kitchen strictly follows WAI-ARIA standards for all components.
+              </Text>
+            </FeatureContainer>
+            <FeatureContainer minH={100} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                Responsive support
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                Build simple web apps with our simple responsive system.
+              </Text>
+            </FeatureContainer>
+          </Container>
+          <Container gap={"normal"}>
+            <FeatureContainer minH={100} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                Themeable
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                Customize any part of our components to match your design needs.
+              </Text>
+            </FeatureContainer>
+            <FeatureContainer minH={200} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                All platform support
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                Whether you use React, React Native or a framework react,
+                Kitchen is compatible with all platforms.
+              </Text>
+            </FeatureContainer>
+          </Container>
+          <Container gap={"normal"}>
+            <FeatureContainer minH={200} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                Active Community
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                We are a team of active maintainers ready to help you whenever
+                you need, and using it for our own products.
+              </Text>
+            </FeatureContainer>
+            <FeatureContainer minH={100} p={"medium"}>
+              <Text size={"large"} weight={"bold"}>
+                Reusable hooks
+              </Text>
+              <Text mt={"small"} color={"lighter"}>
+                Lots of useful hooks to use in your applications.
+              </Text>
+            </FeatureContainer>
+          </Container>
+        </Container>
+        <FeatureContainer p={"medium"}>
+          <Text size={"large"} weight={"bold"}>
+            Developer experience
+          </Text>
+          <Text mt={"small"} color={"lighter"}>
+            Guaranteed to boost your productivity when building your mobile app
+            or website.
+          </Text>
+        </FeatureContainer>
+        <Container direction={["column", "row"]} gap={"normal"}>
+          <FeatureContainer p={"medium"}>
+            <Text size={"large"} weight={"bold"}>
+              Light & Dark support
+            </Text>
+            <Text mt={"small"} color={"lighter"}>
+              Kitchen strictly follows WAI-ARIA standards for all components.
+            </Text>
+          </FeatureContainer>
+          <FeatureContainer p={"medium"}>
+            <Text size={"large"} weight={"bold"}>
+              Stylable
+            </Text>
+            <Text mt={"small"} color={"lighter"}>
+              Easy to redesign with your standard thanks to styled components
+              already implemented.
+            </Text>
+          </FeatureContainer>
+        </Container>
+      </Container>
+    </Container>
+  );
+};
+
+const FeatureContainer = kitchen(Container)`
+  background-color: ${({ theme }) => theme.colors.layout.darker};
+
+  @media (min-width: ${({ theme }) => theme.breakpoint.mobile}) {
+
+  }
+`;
+
+export default Features;

docs/components/Landing/Render/index.tsx

@@ -0,0 +1,49 @@
+import { Sandpack } from "@codesandbox/sandpack-react";
+import kitchen, { Container, useTheme } from "@tonightpass/kitchen";
+
+const Render: React.FC = () => {
+  const { theme } = useTheme();
+
+  const code = `import { KitchenProvider, Container, Button } from "@tonightpass/kitchen";
+
+import "@tonightpass/kitchen/fonts.css";
+
+export default function App() {
+  return (
+    <KitchenProvider>
+      <Container h={"100vh"} align={"center"} justify={"center"}>
+        <Button>Button</Button>
+      </Container>
+    </KitchenProvider>
+  );
+}`;
+
+  return (
+    <StyledContainer id={"render"} section>
+      <Sandpack
+        template={"react-ts"}
+        theme={theme.id === 2 ? "light" : "dark"}
+        files={{
+          "/App.tsx": code,
+        }}
+        customSetup={{
+          dependencies: {
+            "@tonightpass/kitchen": "1.0.0",
+            next: "latest", // TODO: remove this after @tonightpass/kitchen is published
+          },
+        }}
+      />
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = kitchen(Container)`
+  font-family: ${({ theme }) => theme.family.monospace};
+  font-size: 14px;
+  body, div, span, input, button, textarea, select, option {
+    font-family: inherit;
+    font-size: inherit;
+  }
+`;
+
+export default Render;