Skip to content

Commit

Permalink
feat: enhance shell examples and add colSpan prop to widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@sapkra
sapkra committed Apr 22, 2024
1 parent aeb239f commit df72720
Show file tree
Hide file tree
Showing 3 changed files with 239 additions and 31 deletions.
241 changes: 215 additions & 26 deletions src/fragments/shell/Shell.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,15 @@ import {
TableHeader,
TableRow,
Tab,
Tabs
Tabs,
BreadcrumbItem,
Breadcrumbs,
Textarea,
Switch
} from "../../components/base";
import { FormSection } from "../form/FormSection";
import { Widget } from "../widget/Widget";
import { Chart, Grid } from "../../components";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta<typeof Shell> = {
Expand Down Expand Up @@ -161,6 +166,10 @@ export const Auto: Story = {
export const WithTable: Story = {
args: {
...Primary.args,
sidebar: Primary.args?.sidebar ? {
...Primary.args.sidebar,
autoLayout: true,
} : undefined,
children: (
<>
<h1>Customers</h1>
Expand Down Expand Up @@ -204,30 +213,24 @@ export const WithTable: Story = {
<Tab key="settings" title="Settings">
<form>
<h2>First Section</h2>
<FormSection title="Title" description="Description">
<Input />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
<FormSection title="Name" description="Description" direction="horizontal">
<Input label="First name" />
<Input label="Last name" />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
<FormSection title="Biography" description="Description">
<Textarea label="Biography" minRows={6} />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
<FormSection title="Notifications" description="Turn on/off email notifications." direction="horizontal">
<Switch />
</FormSection>
<h2>Second Section</h2>
<FormSection title="Title" description="Description">
<Input />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
<FormSection title="Title" description="Description" direction="horizontal">
<Input label="First name" />
<Input label="Last name" />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
</FormSection>
<FormSection title="Title" description="Description">
<Input />
<FormSection title="Title" description="Description" direction="horizontal">
<Input label="First name" />
<Input label="Last name" />
</FormSection>
</form>
</Tab>
Expand All @@ -248,17 +251,203 @@ export const WithTable: Story = {
export const WithGrid: Story = {
args: {
...Primary.args,
sidebar: Primary.args?.sidebar ? {
...Primary.args.sidebar,
autoLayout: true,
} : undefined,
children: (
<>
<Breadcrumbs>
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Customers</BreadcrumbItem>
</Breadcrumbs>
<h1>Customers</h1>
<p className="mt-2 text-foreground-500">Blablabla</p>
<Divider className="my-4" />
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-6">
<Widget title="Bla">Bla</Widget>
<Widget title="Bla">Bla</Widget>
<Widget title="Bla">Bla</Widget>
<Widget title="Bla">Bla</Widget>
</div>
<Grid size="lg">
<Widget title="Analytics" colSpan={2}>
<Chart
type="line"
series={[
{
name: "Clicks",
data: [6500, 6418, 6456, 6526, 6356, 6456],
color: "#1A56DB",
},
{
name: "CPC",
data: [6456, 6356, 6526, 6332, 6418, 6500],
color: "#7E3AF2",
},
]}
height="350px"
/>
</Widget>
<Widget title="Traffic">
<Chart
type="pie"
options={{
labels: ["Direct", "Organic search", "Referrals"],
yaxis: {
labels: {
formatter: function (value) {
return value + "%"
},
},
},
xaxis: {
labels: {
formatter: function (value) {
return value + "%"
},
},
}
}}
series={[52.8, 26.8, 20.4]}
height="350px"
/>
</Widget>
<Widget title="Origins" colSpan={2}>
<Chart
type="column"
series={[
{
name: "Organic",
color: "#1A56DB",
data: [
{ x: "Mon", y: 231 },
{ x: "Tue", y: 122 },
{ x: "Wed", y: 63 },
{ x: "Thu", y: 421 },
{ x: "Fri", y: 122 },
{ x: "Sat", y: 323 },
{ x: "Sun", y: 111 },
],
},
{
name: "Social media",
color: "#FDBA8C",
data: [
{ x: "Mon", y: 232 },
{ x: "Tue", y: 113 },
{ x: "Wed", y: 341 },
{ x: "Thu", y: 224 },
{ x: "Fri", y: 522 },
{ x: "Sat", y: 411 },
{ x: "Sun", y: 243 },
],
},
]}
height="350px"
/>
</Widget>
<Widget title="Cost">
<Chart
type="bar"
options={{
tooltip: {
y: {
formatter: function (value) {
return "$" + value
}
}
},
}}
series={[
{
name: "Income",
color: "#31C48D",
data: [1420, 1620, 1820, 1420, 1650, 2120],
},
{
name: "Expense",
data: [788, 810, 866, 788, 1100, 1200],
color: "#F05252",
}
]}
/>
</Widget>
<Widget title="New Users">
<Chart
type="area"
options={{
xaxis: {
categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
}
}}
series={[
{
name: "New users",
data: [6500, 6418, 6456, 6526, 6356, 6456],
color: "#1A56DB",
},
]}
/>
</Widget>
<Widget title="Website traffic">
<Chart
type="donut"
options={{
labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
plotOptions: {
pie: {
donut: {
labels: {
total: {
label: "Unique visitors",
formatter: function (w) {
const sum = w.globals.seriesTotals.reduce((a: number, b: number) => {
return a + b
}, 0)
return sum + 'k'
},
},
value: {
formatter: function (value) {
return value + "k"
},
}
}
}
}
},
yaxis: {
labels: {
formatter: function (value) {
return value + "k"
},
},
},
xaxis: {
labels: {
formatter: function (value) {
return value + "k"
},
},
},
}}
series={[35.1, 23.5, 2.4, 5.4]}
height="350px"
/>
</Widget>
<Widget title="New Users">
<Chart
type="radial"
options={{
labels: ["Done", "In progress", "To do"],
yaxis: {
labels: {
formatter: function (value) {
return value + '%';
}
}
}
}}
series={[90, 85, 70]}
height="350px"
/>
</Widget>
</Grid>
</>
),
},
Expand Down
4 changes: 2 additions & 2 deletions src/fragments/shell/Shell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ interface ShellProps {

export const Shell: React.FC<ShellProps> = ({ sidebar, children }) => {
return (
<div className={`flex min-h-screen`}>
<div className="flex min-h-screen">
<Sidebar {...sidebar} />
<main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl min-w-0">
<main className="flex-1 px-6 lg:px-12 xl:px-20 py-14 max-w-screen-2xl">
{children}
</main>
</div>
Expand Down
25 changes: 22 additions & 3 deletions src/fragments/widget/Widget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,39 @@ export interface WidgetProps {
endContent?: React.ReactNode;
};
title: string;
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}

const widget = tv({
slots: {
base: 'border-[1px] border-default-100 px-5 py-3',
base: 'border-[1px] border-default-100',
headerEndContent: 'ml-auto',
header: 'px-7 pt-5',
body: 'px-7 pb-5',
},
variants: {
colSpan: {
1: 'lg:col-span-1',
2: 'lg:col-span-2',
3: 'lg:col-span-3',
4: 'lg:col-span-4',
5: 'lg:col-span-5',
6: 'lg:col-span-6',
7: 'lg:col-span-7',
8: 'lg:col-span-8',
9: 'lg:col-span-9',
10: 'lg:col-span-10',
11: 'lg:col-span-11',
12: 'lg:col-span-12',
},
},
});

export const Widget: React.FC<WidgetProps> = ({ children, title, header, ...props }) => {
const { base, headerEndContent } = widget(props);
const { base, body, header: headerClasses, headerEndContent } = widget(props);

return (
<Card shadow="none" classNames={{ base: base() }}>
<Card shadow="none" classNames={{ base: base(), body: body(), header: headerClasses(), }}>
<CardHeader>
<h3>{title}</h3>
<div className={headerEndContent()}>{header?.endContent}</div>
Expand Down

0 comments on commit df72720

Please sign in to comment.