tabler-react-2 0.1.76 → 0.1.78

package/docs/src/docs/getting-started.mdx

@@ -0,0 +1,79 @@
+---
+title: 'Getting started'
+description: Learn how to get started with Rocket Docs.
+---
+
+> Rocket Docs is ready for Gatsby v5. New projects will use the new version!
+
+The best way to start is by using our starter:
+
+```bash
+npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs
+```
+
+But, if you prefer, you can install and configure manually.
+
+#### Using Yarn:
+
+```bash
+yarn add @rocketseat/gatsby-theme-docs
+```
+
+#### Using NPM:
+
+```bash
+npm i @rocketseat/gatsby-theme-docs
+```
+
+## Theme Options
+
+| Key           | Default | Required | Description                                                                                                                                                            |
+| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| basePath      | /       | No       | Root url for all docs                                                                                                                                                  |
+| configPath    | config  | No       | Location of config files                                                                                                                                               |
+| docsPath      | docs    | No       | The site description for SEO and social (FB, Twitter) tags                                                                                                             |
+| homePath      | -       | No       | Location of home file                                                                                                                                                  |
+| githubUrl     | -       | -        | Deprecated in favor of `repositoryUrl`                                                                                                                                 |
+| repositoryUrl | -       | No       | The complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: `https://github/jpedroschmitz/rocketdocs`                                        |
+| baseDir       | -       | No       | If your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (ex: `docs`)                                         |
+| withMdx       | true    | No       | If necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include `gatsby-plugin-mdx` on your `gatsby-config` |
+| branch        | main    | No       | Default branch of the repository                                                                                                                                       |
+
+<br />
+
+> Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src/<branch>` to it.
+> Example of correct link: <br /> `https://bitbucket.org/jpedroschmitz/rocketdocs`
+
+## Example usage
+
+```js title=gatsby-config.js
+module.exports = {
+  siteMetadata: {
+    siteTitle: `@rocketseat/gatsby-theme-docs`,
+    defaultTitle: `@rocketseat/gatsby-theme-docs`,
+    siteTitleShort: `gatsby-theme-docs`,
+    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
+    siteUrl: `https://rocketdocs.netlify.app`,
+    siteAuthor: `@jpedroschmitz`,
+    siteImage: `/banner.png`,
+    siteLanguage: `en`,
+    themeColor: `#8257E6`,
+    basePath: `/`,
+  },
+  plugins: [
+    {
+      resolve: `@rocketseat/gatsby-theme-docs`,
+      options: {
+        basePath: `/`,
+        configPath: `src/config`,
+        docsPath: `src/docs`,
+        homePath: `src/home`,
+        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
+        baseDir: `examples/gatsby-theme-docs`,
+      },
+    },
+  ],
+};
+```
+
+Once you have installed the dependencies you will need to create the [navigation](/usage/navigation) and [documentation](/usage/creating-docs) files.

package/docs/src/docs/todo.md

@@ -0,0 +1,5 @@
+---
+title: To do list for documentation
+---
+
+- [ ] Padding

package/docs/src/docs/utilities/colors.mdx

@@ -0,0 +1,114 @@
+---
+title: Colors
+---
+
+import { ColorSwatch } from "../../components/ColorSwatch.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+## Color Usage
+
+Colors are used by providing a class to an element you wish to color. The classname is comprised of `[fg|bg]-[colorName]`. For example, to color an element with a background of the `primary` color, you would use the class `bg-primary`, and to color an element with the text color of the `primary` color, you would use the class `text-primary`.
+
+## Color Palette
+
+### Semantic Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="primary" fg="white" />
+    <ColorSwatch colorName="secondary" fg="white" />
+    <ColorSwatch colorName="success" fg="white" />
+    <ColorSwatch colorName="danger" fg="white" />
+    <ColorSwatch colorName="warning" fg="white" />
+    <ColorSwatch colorName="info" fg="white" />
+    <ColorSwatch colorName="light" fg="black" />
+    <ColorSwatch colorName="dark" fg="white" />
+  </div>
+</Excerpt>
+
+### Bold Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="blue" fg="white" />
+    <ColorSwatch colorName="azure" fg="white" />
+    <ColorSwatch colorName="indigo" fg="white" />
+    <ColorSwatch colorName="purple" fg="white" />
+    <ColorSwatch colorName="pink" fg="white" />
+    <ColorSwatch colorName="red" fg="white" />
+    <ColorSwatch colorName="orange" fg="white" />
+    <ColorSwatch colorName="yellow" fg="white" />
+    <ColorSwatch colorName="lime" fg="white" />
+    <ColorSwatch colorName="green" fg="white" />
+    <ColorSwatch colorName="teal" fg="white" />
+    <ColorSwatch colorName="cyan" fg="white" />
+  </div>
+</Excerpt>
+
+### Light Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="blue-lt" fg="black" />
+    <ColorSwatch colorName="azure-lt" fg="black" />
+    <ColorSwatch colorName="indigo-lt" fg="black" />
+    <ColorSwatch colorName="purple-lt" fg="black" />
+    <ColorSwatch colorName="pink-lt" fg="black" />
+    <ColorSwatch colorName="red-lt" fg="black" />
+    <ColorSwatch colorName="orange-lt" fg="black" />
+    <ColorSwatch colorName="yellow-lt" fg="black" />
+    <ColorSwatch colorName="lime-lt" fg="black" />
+    <ColorSwatch colorName="green-lt" fg="black" />
+    <ColorSwatch colorName="teal-lt" fg="black" />
+    <ColorSwatch colorName="cyan-lt" fg="black" />
+  </div>
+</Excerpt>
+
+### Grays
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="gray-50" fg="black" />
+    <ColorSwatch colorName="gray-100" fg="black" />
+    <ColorSwatch colorName="gray-200" fg="black" />
+    <ColorSwatch colorName="gray-300" fg="black" />
+    <ColorSwatch colorName="gray-400" fg="black" />
+    <ColorSwatch colorName="gray-500" fg="black" />
+    <ColorSwatch colorName="gray-600" fg="black" />
+    <ColorSwatch colorName="gray-700" fg="black" />
+    <ColorSwatch colorName="gray-800" fg="black" />
+    <ColorSwatch colorName="gray-900" fg="black" />
+  </div>
+</Excerpt>
+
+### Brand Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="facebook" fg="white" />
+    <ColorSwatch colorName="twitter" fg="white" />
+    <ColorSwatch colorName="linkedin" fg="white" />
+    <ColorSwatch colorName="google" fg="white" />
+    <ColorSwatch colorName="youtube" fg="white" />
+    <ColorSwatch colorName="vimeo" fg="white" />
+    <ColorSwatch colorName="dribbble" fg="white" />
+    <ColorSwatch colorName="github" fg="white" />
+    <ColorSwatch colorName="instagram" fg="white" />
+    <ColorSwatch colorName="pinterest" fg="white" />
+    <ColorSwatch colorName="vk" fg="white" />
+    <ColorSwatch colorName="rss" fg="white" />
+    <ColorSwatch colorName="flickr" fg="white" />
+    <ColorSwatch colorName="bitbucket" fg="white" />
+    <ColorSwatch colorName="tabler" fg="white" />
+  </div>
+</Excerpt>

package/docs/src/docs/utilities/margins.mdx

@@ -0,0 +1,90 @@
+---
+title: Margins
+---
+
+import { Margin } from "../../components/Margin.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+# Margin utilities
+
+Margin utilities are provided by the `m[direction]-[0-6]` classes.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="m-auto" />
+    <Margin className="m-0" />
+    <Margin className="m-1" />
+    <Margin className="m-2" />
+    <Margin className="m-3" />
+    <Margin className="m-4" />
+    <Margin className="m-5" />
+  </div>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="mt-auto" />
+    <Margin className="mt-0" />
+    <Margin className="mt-1" />
+    <Margin className="mt-2" />
+    <Margin className="mt-3" />
+    <Margin className="mt-4" />
+    <Margin className="mt-5" />
+  </div>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="mb-auto" />
+    <Margin className="mb-0" />
+    <Margin className="mb-1" />
+    <Margin className="mb-2" />
+    <Margin className="mb-3" />
+    <Margin className="mb-4" />
+    <Margin className="mb-5" />
+  </div>
+</Excerpt>
+
+## Margin directions
+
+The margin utilities can be applied to the following directions:
+
+- `mt-*` = `margin-top`
+- `mb-*` = `margin-bottom`
+- `m-*` = `margin`
+
+## Margin sizes
+
+The margin utilities can be applied to the following sizes:
+
+- `0` = `0`
+- `1` = `.25rem`
+- `2` = `.5rem`
+- `3` = `1rem`
+- `4` = `2rem`
+- `5` = `4rem`
+- `auto` = `auto`

package/docs/src/home/index.mdx

@@ -0,0 +1,23 @@
+# Introduction
+
+Rocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've
+developed it to be easy to use and customize. Forget about other
+things and focus on what matters: **writing docs.**
+
+## Features
+
+- ⚛️ Ready for Gatsby v5;
+- 📝 MDX for docs;
+- 🛣 Yaml-based sidebar navigation;
+- 📱 Responsive and mobile friendly;
+- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
+- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
+- 📈 Google Analytics support;
+- 📄 Custom docs schema;
+- 🖱 Table of Contents;
+- ⚡️ Offline Support & WebApp Manifest;
+- and much more 🔥
+
+<br />
+
+[Get started now!](/getting-started)

package/docs/src/pages/404.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+import Layout from '@rocketseat/gatsby-theme-docs/src/components/Layout';
+import Seo from '@rocketseat/gatsby-theme-docs/src/components/SEO';
+
+export default function NotFound() {
+  return (
+    <Layout title="Page not found!">
+      <Seo title="404: Not found" />
+      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <p>
+        If you&#39;d like to go back to homepage, <Link to="/">click here</Link>
+        .
+      </p>
+    </Layout>
+  );
+}

package/docs/src/yamlFiles/letters.yml

@@ -0,0 +1,3 @@
+- character: a
+- character: b
+- character: c