Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: first pass at updating the documentation #399

Merged
merged 1 commit into from
Mar 12, 2024
Merged

docs: first pass at updating the documentation #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/documentation/.ladle/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const Provider: GlobalProvider = ({
"prose mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl",
{
"prose-dark dark:prose-lighter":
!globalState?.story.startsWith("system--typography"),
!globalState?.story.startsWith("styles--typography"),
},
);
const handleOnClickGitHub = () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/documentation/.ladle/config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@ export default {
"Components*",
"Form-components*",
"System*",
"Styles*",
],
appendToHead: `
<style>
// .ladle-background {background-color:rgb(100 116 139)}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
Expand Down
1 change: 0 additions & 1 deletion packages/documentation/src/GettingStarted/1-overview.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export const Overview: Story<any> = () => (
<ButtonIcon
spacing={{ t: 8 }}
labelLeft="Installation"
noBorder
onClick={linkTo("getting-started--installation")}
>
<IconNext monotone />
Comment on lines 23 to 28
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [17-17]

The removal of the noBorder property from the ButtonIcon component in the "Installation" button aligns with the broader effort to standardize component properties and appearances. Ensure this change is consistently applied across all relevant components for visual consistency.

Expand Down
80 changes: 75 additions & 5 deletions packages/documentation/src/GettingStarted/2-Installation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,92 @@
import { linkTo, Story } from "@ladle/react";
import { ButtonIcon } from "@versini/ui-components";
import {
ButtonIcon,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@versini/ui-components";
import { IconNext, IconPrevious } from "@versini/ui-icons";
import { Flexgrid, FlexgridItem } from "@versini/ui-system";

export default {
title: "Getting Started",
};

const data = [
{
id: 1,
name: "@versini/ui-components",
description: "Core components such as Button, Card, and Spinner.",
},
{
id: 2,
name: "@versini/ui-styles",
description:
"Required package to handle styles via TailwindCSS, including Typography.",
},
{
id: 3,
name: "@versini/ui-form",
description: "Form components such as TextInput, TextArea and Toggle.",
},
{
id: 4,
name: "@versini/ui-icons",
description: "All the icons used in the UI-Components library.",
},
{
id: 5,
name: "@versini/ui-system",
description: "System level components such as Flexgrid and ThemeProvider.",
},
];

export const Installation: Story<any> = () => (
<>
<h1>Installation</h1>
<p>
The <strong>UI-Components</strong> library is available as a npm package.
The <strong>UI-Components</strong> library is available as multiple npm
packages. The library has been split into multiple packages to make it
easier to manage and to reduce the size of the final bundle.
</p>
<div className="my-2 flex flex-wrap">
<Table>
<TableHead className="uppercase">
<TableRow>
<TableCell scope="col">Package name</TableCell>
<TableCell scope="col">Description</TableCell>
</TableRow>
</TableHead>

<TableBody>
{data.map((row, idx) => {
return (
<TableRow key={`${row.id}-${idx}`}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell>{row.description}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
<p>
<strong>NOTE</strong>: each package content is detailed in this
documentation. You can find them on the right side of the screen.
</p>
<h2>Example</h2>
<p>
If you only need some core components and of course the CSS styles
associated, use the following command:
</p>
<pre>
<code>$ npm install --save @versini/ui-components</code>
<code>
$ npm install --save @versini/ui-styles @versini/ui-components
</code>
</pre>
<p>
You also need to install React and React-DOM (at least 18.0.0 or above).
Expand All @@ -26,7 +98,6 @@ export const Installation: Story<any> = () => (
<FlexgridItem>
<ButtonIcon
labelRight="Overview"
noBorder
onClick={linkTo("getting-started--overview")}
>
<IconPrevious monotone />
Expand All @@ -35,7 +106,6 @@ export const Installation: Story<any> = () => (
<FlexgridItem>
<ButtonIcon
labelLeft="Configuration"
noBorder
onClick={linkTo("getting-started--configuration")}
>
<IconNext monotone />
Expand Down
32 changes: 4 additions & 28 deletions packages/documentation/src/GettingStarted/3-configuration.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,39 +39,17 @@ export const Configuration: Story<any> = () => (
<h2>CSS</h2>

<p>
You can use the <strong>UI-Components</strong> library with or without{" "}
<strong>TailwindCSS</strong>. Depending on your situation, you can either
use the pre-built CSS or the TailwindCSS plugin to build your own styles
and take advantage of tree-shaking unused styles.
</p>

<h2>Without TailwindCSS</h2>

<p>
If you are not using TailwindCSS, you can use the pre-built CSS file. Just
import it in your entry file:
</p>

<pre>
<code>
{`// index.js
import "@versini/ui-components/dist/style.css";`}
</code>
</pre>

<h2>With TailwindCSS</h2>

<p>
If you are using TailwindCSS, you can use the{" "}
<strong>UI-Components</strong> library TailwindCSS plugin:
TailwindCSS is required to style the components within the{" "}
<strong>UI-Components</strong> library. Thanks to our TailwindCSS plugin,
you can take advantage of tree-shaking unused styles:
</p>

<pre>
<code>
{`// tailwind.config.js
/** @type {import('tailwindcss').Config} */

import { twPlugin } from "@versini/ui-components/dist/utilities";
import { twPlugin } from "@versini/ui-styles";

export default twPlugin.merge({
// this is an example, you can change the path to your files
Expand All @@ -84,7 +62,6 @@ export default twPlugin.merge({
<FlexgridItem>
<ButtonIcon
labelRight="Installation"
noBorder
onClick={linkTo("getting-started--installation")}
>
<IconPrevious monotone />
Expand All @@ -93,7 +70,6 @@ export default twPlugin.merge({
<FlexgridItem>
<ButtonIcon
labelLeft="Usage"
noBorder
onClick={linkTo("getting-started--usage")}
>
<IconNext monotone />
Expand Down
2 changes: 0 additions & 2 deletions packages/documentation/src/GettingStarted/4-usage.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ function App() {
<FlexgridItem>
<ButtonIcon
labelRight="Configuration"
noBorder
onClick={linkTo("getting-started--configuration")}
>
<IconPrevious monotone />
aversini marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -61,7 +60,6 @@ function App() {
<FlexgridItem>
<ButtonIcon
labelLeft="Release Tags"
noBorder
onClick={linkTo("getting-started--release-tags")}
>
<IconNext monotone />
Expand Down
1 change: 0 additions & 1 deletion packages/documentation/src/GettingStarted/5-alpha-beta.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ export const ReleaseTags: Story<any> = () => (
<FlexgridItem>
<ButtonIcon
labelRight="Usage"
noBorder
onClick={linkTo("getting-started--usage")}
>
<IconPrevious monotone />
aversini marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 2 additions & 2 deletions ...mentation/src/System/DarkMode.stories.tsx → ...mentation/src/Styles/DarkMode.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
IconSettings,
} from "@versini/ui-icons";

export default { title: "System/Dark Mode" };
export default { title: "Styles/Dark Mode" };

const data = [
{
Expand Down Expand Up @@ -118,7 +118,7 @@ module.exports = {
label="Type your question here"
helperText="Powered by the sun"
rightElement={
<Button mode="light" focus="light" noBorder>
<Button mode="light" focusMode="light" noBorder>
Send
</Button>
}
Expand Down
12 changes: 6 additions & 6 deletions ...ntation/src/System/Typography.stories.tsx → ...ntation/src/Styles/Typography.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import type { Story } from "@ladle/react";

export default { title: "System/Typography" };
export default { title: "Styles/Typography" };

const CommonTemplate = ({
intro,
Expand Down Expand Up @@ -214,7 +214,7 @@ const CommonTemplate = ({
);
};

export const Basic: Story<any> = () => (
export const QuickStart: Story<any> = () => (
<div className="prose prose-dark dark:prose-lighter">
<h1>Typography</h1>
<p>
Expand All @@ -223,23 +223,23 @@ export const Basic: Story<any> = () => (
</p>
<h2>Installation</h2>
<p>
You do not have to install anything special, besides the main library:
You have to install the <code>@versini/ui-styles</code> package:
</p>
<pre>
<code>$ npm install --save @versini/ui-components</code>
<code>$ npm install --save @versini/ui-styles</code>
</pre>

<h2>Configuration</h2>
<p>
However, you need to configure your application to use TailwindCSS and our
You need to configure your application to use TailwindCSS and our
TailwindCSS plugin:
</p>
<pre>
<code>
{`// tailwind.config.js
/** @type {import('tailwindcss').Config} */

import { twPlugin } from "@versini/ui-components/dist/utilities";
import { twPlugin } from "@versini/ui-styles";

export default twPlugin.merge({
// this is an example, you can change the path to your files
Expand Down
Loading