Skip to content

Commit

Permalink
release 0.0.6
Browse files Browse the repository at this point in the history
  • Loading branch information
yoshi6jp committed Jan 2, 2024
1 parent e62de18 commit b6e7ea8
Show file tree
Hide file tree
Showing 28 changed files with 753 additions and 43 deletions.
11 changes: 9 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
# rsc-daisyui

[![npm version](https://badge.fury.io/js/rsc-daisyui.svg)](https://badge.fury.io/js/rsc-daisyui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

- [daisyUI](https://daisyui.com/) components build with React, Typescript, [TailwindCSS](https://tailwindcss.com/) and [TW CLASSED](https://tw-classed.vercel.app/)
- Simple components available in the React Server Component
- No `useEffect`, `useState`, etc and used.

[Storybook](https://yoshi6jp.github.io/rsc-daisyui/)

[Next.js --- Kitchen Sink ---](https://rsc-daisyui-web.vercel.app/)

## rsc-daisyui 🌼

### Install
Expand Down Expand Up @@ -82,7 +89,7 @@ export default (props) => {

#### Navigation

- [ ] Breadcrumbs
- [x] Breadcrumbs
- [ ] Bottom navigation
- [ ] Link
- [ ] Menu
Expand All @@ -94,7 +101,7 @@ export default (props) => {
#### Feedback

- [ ] Alert
- [ ] Loading
- [x] Loading
- [ ] Progress
- [ ] Radial progress
- [ ] Skeleton
Expand Down
2 changes: 1 addition & 1 deletion apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"next": "^14.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rsc-daisyui": "^0.0.5"
"rsc-daisyui": "^0.0.6"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.5.6",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"lint": "turbo lint",
"clean": "turbo clean",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"publish-packages": "turbo run publish-packages",
"publish-packages": "cp README.md packages/rsc-daisyui && turbo run publish-packages && rm packages/rsc-daisyui/README.md",
"build-storybook": "cd packages/rsc-daisyui && pnpm build-storybook"
},
"devDependencies": {
Expand Down
1 change: 1 addition & 0 deletions packages/eslint-config-custom/react.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,6 @@ module.exports = {
// add rules configurations here
rules: {
"import/no-default-export": "off",
"jsx-a11y/anchor-is-valid": "off",
},
};
13 changes: 13 additions & 0 deletions packages/rsc-daisyui/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,19 @@ const preview: Preview = {
date: /Date$/i,
},
},
options: {
storySort: {
order: [
"Actions",
"Data Display",
"Navigation",
"Feedback",
"Data Input",
"Layout",
"Mockup",
],
},
},
},
decorators: [
(Story, context) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/rsc-daisyui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rsc-daisyui",
"version": "0.0.5",
"version": "0.0.6",
"sideEffects": [
"**/*.css"
],
Expand Down
105 changes: 105 additions & 0 deletions packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { getVariantConfig } from "@tw-classed/react";
import { toArgTypes } from "../storybook-helpers";
import { BreadcrumbsBase, Breadcrumbs } from "./breadcrumbs";

const meta: Meta<typeof Breadcrumbs> = {
title: "Navigation/Breadcrumbs",
component: Breadcrumbs,
tags: ["autodocs"],
argTypes: toArgTypes(getVariantConfig(BreadcrumbsBase)),
};

export default meta;
type Story = StoryObj<typeof Breadcrumbs>;

export const Default: Story = {
render: (args) => (
<Breadcrumbs {...args}>
<li>
<a>Home</a>
</li>
<li>
<a>Document</a>
</li>
<li>Add Document</li>
</Breadcrumbs>
),
};

export const Icons: Story = {
render: (args) => (
<Breadcrumbs {...args}>
<li>
<a className="gap-2" href="#">
<svg
className="w-4 h-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
Home
</a>
</li>
<li>
<a className="gap-2">
<svg
className="w-4 h-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
Documents
</a>
</li>
<li>
<span className="inline-flex gap-2 items-center">
<svg
className="w-4 h-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</svg>
Add Document
</span>
</li>
</Breadcrumbs>
),
};

export const MaxWidth: Story = {
args: {
className: "max-w-xs",
},
render: (args) => (
<Breadcrumbs {...args}>
<li>Long text 1</li>
<li>Long text 2</li>
<li>Long text 3</li>
<li>Long text 4</li>
<li>Long text 5</li>
</Breadcrumbs>
),
};
20 changes: 20 additions & 0 deletions packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import type { ComponentProps } from "react";
import { classed, deriveClassed } from "@tw-classed/react";
import { configWithThemeFn } from "../config";

export const breadcrumbsConfig = {
...configWithThemeFn({}),
base: "breadcrumbs text-sm",
};

export const BreadcrumbsBase = classed("div", breadcrumbsConfig);
export type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
export const Breadcrumbs = deriveClassed<typeof BreadcrumbsBase>(
({ children, ...rest }, ref) => {
return (
<BreadcrumbsBase {...rest} ref={ref}>
<ul>{children}</ul>
</BreadcrumbsBase>
);
}
);
1 change: 1 addition & 0 deletions packages/rsc-daisyui/src/breadcrumbs/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Breadcrumbs } from "./breadcrumbs";
55 changes: 31 additions & 24 deletions packages/rsc-daisyui/src/button/button.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./button";
import { getVariantConfig } from "@tw-classed/core";
import { getVariantConfig } from "@tw-classed/react";
import { toArgTypes } from "../storybook-helpers";
import { Loading } from "../loading";
import { Button } from "./button";

const meta: Meta<typeof Button> = {
title: "Actions/Button",
Expand Down Expand Up @@ -173,19 +174,25 @@ export const GlassButton: Story = {
};

export const DifferentHTMLTags: Story = {
render: ({ ...args }) => (
render: (args) => (
<>
{/* @ts-expect-error: as */}
<Button {...args} as="a">
Link
</Button>
<Button {...args} type="submit">
Button
</Button>
<Button {...args} as="input" value="Input" type="button" />
<Button {...args} as="input" value="Submit" type="submit" />
<Button {...args} as="input" aria-label="Radio" type="radio" />
<Button {...args} as="input" aria-label="Checkbox" type="checkbox" />
<Button {...args} as="input" value="Reset" type="reset" />
{/* @ts-expect-error: as */}
<Button {...args} as="input" type="button" value="Input" />
{/* @ts-expect-error: as */}
<Button {...args} as="input" type="submit" value="Submit" />
{/* @ts-expect-error: as */}
<Button {...args} aria-label="Radio" as="input" type="radio" />
{/* @ts-expect-error: as */}
<Button {...args} aria-label="Checkbox" as="input" type="checkbox" />
{/* @ts-expect-error: as */}
<Button {...args} as="input" type="reset" value="Reset" />
</>
),
parameters: {
Expand All @@ -198,14 +205,14 @@ export const DifferentHTMLTags: Story = {
export const DisabledButtons: Story = {
render: ({ ...args }) => (
<>
<Button {...args} disabled={true}>
<Button {...args} disabled>
Disabled using attributes
</Button>
<Button
{...args}
aria-disabled="true"
className="btn-disabled"
role="button"
aria-disabled="true"
>
Disabled using class name
</Button>
Expand All @@ -224,33 +231,33 @@ export const SquareButton: Story = {
<>
<Button {...args}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 18L18 6M6 6l12 12"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</Button>
<Button {...args} variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 18L18 6M6 6l12 12"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</Button>
Expand All @@ -276,17 +283,17 @@ export const IconAtStart: Story = {
render: ({ ...args }) => (
<Button {...args}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
Button
Expand All @@ -299,17 +306,17 @@ export const IconAtEnd: Story = {
<Button {...args}>
Button
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
</Button>
Expand All @@ -326,7 +333,7 @@ export const ButtonBlock: Story = {
export const LoadingSpinner: Story = {
render: ({ ...args }) => (
<Button {...args}>
<span className="loading loading-spinner" />
<Loading />
</Button>
),
args: {
Expand All @@ -337,7 +344,7 @@ export const LoadingSpinner: Story = {
export const LoadingSpinnerAndText: Story = {
render: ({ ...args }) => (
<Button {...args}>
<span className="loading loading-spinner" />
<Loading />
loading
</Button>
),
Expand Down
Loading

0 comments on commit b6e7ea8

Please sign in to comment.