From 5b21d394f902805813b18c8ffcf47bf3271e53a8 Mon Sep 17 00:00:00 2001 From: zaaakher Date: Thu, 1 Feb 2024 01:20:01 +0300 Subject: [PATCH] docs: cleanup and updated toaster docs #skip_publish --- apps/docs/app/page.tsx | 2 - apps/docs/components/component-preview.tsx | 167 +-- apps/docs/components/mdx-components.tsx | 1 + apps/docs/config/docs.ts | 4 +- apps/docs/content/docs/changelog.mdx | 1007 +++++++++-------- apps/docs/content/docs/elements/accordion.mdx | 13 +- .../docs/elements/{toast.mdx => toaster.mdx} | 9 +- apps/docs/content/docs/hooks/use-toast.mdx | 28 +- apps/docs/content/docs/index.mdx | 65 +- apps/docs/content/docs/installation.mdx | 260 ++--- apps/docs/lib/sync-changelog.js | 31 + apps/docs/package.json | 3 +- .../default/example/accordion-demo.tsx | 60 +- 13 files changed, 818 insertions(+), 832 deletions(-) rename apps/docs/content/docs/elements/{toast.mdx => toaster.mdx} (89%) create mode 100644 apps/docs/lib/sync-changelog.js diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index 9879dfa0a..1a7b80824 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -16,10 +16,8 @@ import Image from "next/image"; import Link from "next/link"; import { CodeBlock, Button } from "@sikka/hawa/elements"; -import { useToast } from "@sikka/hawa/hooks"; export default function IndexPage() { - const { toast } = useToast(); return (
diff --git a/apps/docs/components/component-preview.tsx b/apps/docs/components/component-preview.tsx index e150e80ae..d72a7fa1b 100644 --- a/apps/docs/components/component-preview.tsx +++ b/apps/docs/components/component-preview.tsx @@ -1,27 +1,28 @@ -"use client" +"use client"; -import * as React from "react" -import { Index } from "@/__registry__" +import * as React from "react"; -import { cn } from "@/lib/utils" -import { useConfig } from "@/hooks/use-config" -import { CopyButton, CopyWithClassNames } from "@/components/copy-button" -import { Icons } from "@/components/icons" -import { StyleSwitcher } from "@/components/style-switcher" -import { ThemeWrapper } from "@/components/theme-wrapper" +import { Index } from "@/__registry__"; +import { CopyButton, CopyWithClassNames } from "@/components/copy-button"; +import { Icons } from "@/components/icons"; +import { StyleSwitcher } from "@/components/style-switcher"; +import { ThemeWrapper } from "@/components/theme-wrapper"; +import { useConfig } from "@/hooks/use-config"; +import { cn } from "@/lib/utils"; import { Tabs, TabsContent, TabsList, - TabsTrigger, -} from "@/registry/new-york/ui/tabs" -import { styles } from "@/registry/styles" + TabsTrigger +} from "@/registry/new-york/ui/tabs"; +import { styles } from "@/registry/styles"; interface ComponentPreviewProps extends React.HTMLAttributes { - name: string - extractClassname?: boolean - extractedClassNames?: string - align?: "center" | "start" | "end" + name: string; + extractClassname?: boolean; + extractedClassNames?: string; + align?: "center" | "start" | "end"; + previewOnly?: boolean; } export function ComponentPreview({ @@ -33,29 +34,29 @@ export function ComponentPreview({ align = "center", ...props }: ComponentPreviewProps) { - const [config] = useConfig() - const index = styles.findIndex((style) => style.name === config.style) + const [config] = useConfig(); + const index = styles.findIndex((style) => style.name === config.style); - const Codes = React.Children.toArray(children) as React.ReactElement[] - const Code = Codes[index] + const Codes = React.Children.toArray(children) as React.ReactElement[]; + const Code = Codes[index]; const Preview = React.useMemo(() => { - const Component = Index[config.style][name]?.component + const Component = Index[config.style][name]?.component; if (!Component) { return ( -

+

Component{" "} - + {name} {" "} not found in registry.

- ) + ); } - return - }, [name, config.style]) + return ; + }, [name, config.style]); const codeString = React.useMemo(() => { if ( @@ -63,45 +64,18 @@ export function ComponentPreview({ ) { const [, Button] = React.Children.toArray( Code.props.children - ) as React.ReactElement[] - return Button?.props?.value || Button?.props?.__rawString__ || null + ) as React.ReactElement[]; + return Button?.props?.value || Button?.props?.__rawString__ || null; } - }, [Code]) + }, [Code]); return (
- -
- - - Preview - - - Code - - -
- -
- {/* */} - {extractedClassNames ? ( - - ) : ( - codeString && - )} -
+ {props.previewOnly ? ( +
+
Loading...
@@ -125,15 +99,70 @@ export function ComponentPreview({
- - -
-
- {Code} -
+
+ ) : ( + +
+ + + Preview + + + Code + +
- - + +
+ {/* */} + {extractedClassNames ? ( + + ) : ( + codeString && + )} +
+ +
+ + + Loading... +
+ } + > + {Preview} + +
+ + + +
+
+ {Code} +
+
+ + + )}
- ) + ); } diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx index 9ac6102bd..852b2c197 100644 --- a/apps/docs/components/mdx-components.tsx +++ b/apps/docs/components/mdx-components.tsx @@ -306,3 +306,4 @@ export function Mdx({ code }: MdxProps) {
); } + diff --git a/apps/docs/config/docs.ts b/apps/docs/config/docs.ts index 85b67c839..54b19ff37 100644 --- a/apps/docs/config/docs.ts +++ b/apps/docs/config/docs.ts @@ -236,8 +236,8 @@ export const docsConfig: DocsConfig = { // items: [] // }, { - title: "Toast", - href: "/docs/elements/toast", + title: "Toaster", + href: "/docs/elements/toaster", items: [] } // { diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index 57e48ed2b..a3eca8f1f 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -4,584 +4,659 @@ description: Latest updates and announcements. toc: false --- -## December 2023 - New components, CLI and more +# @sikka/hawa -We've added new components to shadcn/ui and made a lot of improvements to the CLI. +## 0.27.12 -Here's a quick overview of what's new: +### Patch Changes -- [**Carousel**](#carousel) - A carousel component with motion, swipe gestures and keyboard support. -- [**Drawer**](#drawer) - A drawer component that looks amazing on mobile. -- [**Pagination**](#pagination) - A pagination component with page navigation, previous and next buttons. -- [**Resizable**](#resizable) - A resizable component for building resizable panel groups and layouts. -- [**Sonner**](#sonner) - The last toast component you'll ever need. -- [**CLI updates**](#cli-updates) - Support for custom **Tailwind prefix** and `tailwind.config.ts`. +- Added `use client` directive to all components via `tsup` config -### Carousel +## 0.27.9 -We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of [Embla Carousel](https://www.embla-carousel.com). +### Patch Changes -It has support for infinite looping, autoplay, vertical orientation, and more. +- Added `prefixText` to `Input` which adds a non-editable text before the input itself. +- Added ability to disable `Tooltip` +- Added `loadingCard` and `loadingPrice` to `PricingCard` which will show a skeleton if true. +- Added loading ability to cards in `PricingPlans` - +## 0.27.7 -### Drawer +### Patch Changes -Oh the drawer component 😍. Built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski\_](https://twitter.com/emilkowalski_). +- Fixed fade direction in `Skeleton` -Try opening the following drawer on mobile. It looks amazing! +## 0.27.6 - +### Patch Changes -### Pagination +- Added `fade` feature to `Skeleton` +- Made `name` property required in `Radio` -We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's `` component. +## 0.27.5 - +### Patch Changes -### Resizable +- Added sizes to `Loading` +- Added sizes to `Tooltip` +- Fixed missing loading state in `FeedbackForm` -Build resizable panel groups and layouts with this `` component. +## 0.27.4 - +### Patch Changes -`` is built using [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn). It has support for mouse, touch and keyboard. +0cc9ae5: - Made usernameOptions optional in `RegisterForm` -### Sonner +- `FeedbackForm` : add min-h for the textarea -Another one by [emilkowalski\_](https://twitter.com/emilkowalski_). The last toast component you'll ever need. Sonner is now availabe in shadcn/ui. +## 0.27.3 - +### Patch Changes -### CLI updates +- Removed padding when `cardless` is true for `ContactForm` and `FeedbackForm` +- Fixed label spacing in `FeedbackForm` +- Fixed textarea submission for `FeedbackForm` -This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components. +## 0.27.2 -This means you can now easily add shadcn/ui components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict. 🔥 +### Patch Changes -```tsx /tw-/ - -``` +- `Loading`: progress design now inherits the global `--radius` CSS variable -It works with `cn`, `cva` and CSS variables. +## 0.27.1 -The cli can now also detect `tailwind.config.ts` and add the TypeScript version of the config for you. +### Patch Changes -That's it. Happy Holidays. +- Fixed textarea height in `ContactForm` -## July 2023 - JavaScript +## 0.27.0 -This project and the components are written in TypeScript. **We recommend using TypeScript for your project as well**. +### Patch Changes -However we provide a JavaScript version of the components, available via the [cli](/docs/cli). +- Fixed max height UI issue in `CodeBlock` -```txt -Would you like to use TypeScript (recommended)? no -``` +## 0.26.41 -To opt-out of TypeScript, you can use the `tsx` flag in your `components.json` file. +### Patch Changes -```json {10} fileName="components.json" -{ - "style": "default", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app/globals.css", - "baseColor": "zinc", - "cssVariables": true - }, - "rsc": false, - "tsx": false, - "aliases": { - "utils": "~/lib/utils", - "components": "~/components" - } -} -``` +- Added `usernameOptions` in `RegisterForm` to allow consumer to customize the username field. -To configure import aliases, you can use the following `jsconfig.json`: +## 0.26.40 -```json {4} fileName="jsconfig.json" -{ - "compilerOptions": { - "paths": { - "@/*": ["./*"] - } - } -} -``` +### Patch Changes -## June 2023 - New CLI, Styles and more +- Fixed `DropdownMenu` height exceeding the screen. -I have a lot of updates to share with you today: +## 0.26.39 -- [**New CLI**](#new-cli) - Rewrote the CLI from scratch. You can now add components, dependencies and configure import paths. -- [**Theming**](#theming-with-css-variables-or-tailwind-colors) - Choose between using CSS variables or Tailwind CSS utility classes for theming. -- [**Base color**](#base-color) - Configure the base color for your project. This will be used to generate the default color palette for your components. -- [**React Server Components**](#react-server-components) - Opt out of using React Server Components. The CLI will automatically append or remove the `use client` directive. -- [**Styles**](#styles) - Introducing a new concept called _Style_. A style comes with its own set of components, animations, icons and more. -- [**Exit animations**](#exit-animations) - Added exit animations to all components. -- [**Other updates**](#other-updates) - New `icon` button size, updated `sheet` component and more. -- [**Updating your project**](#updating-your-project) - How to update your project to get the latest changes. +### Patch Changes ---- +- Exported `TextFieldTypes` +- `ContactForm` block now accepts `customFields` to allow consumer to add their own custom fields. -### New CLI +## 0.26.35 -I've been working on a new CLI for the past few weeks. It's a complete rewrite. It comes with a lot of new features and improvements. +### Patch Changes -### `init` +- `Loading`: added classnames for `container`, `track`, and `car` to customize loading designs -```bash -npx shadcn-ui@latest init -``` +## 0.26.22 -When you run the `init` command, you will be asked a few questions to configure `components.json`: +### Patch Changes -```txt showLineNumbers -Which style would you like to use? › Default -Which color would you like to use as base color? › Slate -Where is your global CSS file? › › app/globals.css -Do you want to use CSS variables for colors? › no / yes -Where is your tailwind.config.js located? › tailwind.config.js -Configure the import alias for components: › @/components -Configure the import alias for utils: › @/lib/utils -Are you using React Server Components? › no / yes -``` +- Fixed RTL width issue in `ColorPicker` +- Optimized internal import aliases -This file contains all the information about your components: where to install them, the import paths, how they are styled...etc. +## 0.26.20 -You can use this file to change the import path of a component, set a baseColor or change the styling method. +### Patch Changes -```json fileName="components.json" -{ - "style": "default", - "tailwind": { - "config": "tailwind.config.ts", - "css": "src/app/globals.css", - "baseColor": "zinc", - "cssVariables": true - }, - "rsc": false, - "aliases": { - "utils": "~/lib/utils", - "components": "~/components" - } -} -``` +- Added `embla-carousel` as a devDependency +- Fixed types for `useDialogCarousel` hook -This means you can now use the CLI with any directory structure including `src` and `app` directories. +## 0.26.19 -### `add` +### Patch Changes -```bash -npx shadcn-ui@latest add -``` +- General cleanup +- Created a `util` folder containing all the utility files -The `add` command is now much more capable. You can now add UI components but also import more complex components (coming soon). +## 0.26.19 -The CLI will automatically resolve all components and dependencies, format them based on your custom config and add them to your project. +### Patch Changes -### `diff` (experimental) +- Allowed hiding a column by default in `DataTable` using `meta: { hidden: true }` -```bash -npx shadcn-ui diff -``` +## 0.26.17 -We're also introducing a new `diff` command to help you keep track of upstream updates. +### Patch Changes -You can use this command to see what has changed in the upstream repository and update your project accordingly. +- Updated dependencies -Run the `diff` command to get a list of components that have updates available: +## 0.26.16 -```bash -npx shadcn-ui diff -``` +### Patch Changes -```txt -The following components have updates available: -- button - - /path/to/my-app/components/ui/button.tsx -- toast - - /path/to/my-app/components/ui/use-toast.ts - - /path/to/my-app/components/ui/toaster.tsx -``` +- Fixed `DropDownMenu` items array props -Then run `diff [component]` to see the changes: +## 0.26.5 -```bash -npx shadcn-ui diff alert -``` +### Patch Changes -```diff /pl-12/ -const alertVariants = cva( -- "relative w-full rounded-lg border", -+ "relative w-full pl-12 rounded-lg border" -) -``` +- Minor fixes & cleanup ---- +## 0.26.4 -### Theming with CSS Variables or Tailwind Colors +### Patch Changes -You can choose between using CSS variables or Tailwind CSS utility classes for theming. +- Updated `Textarea` classNames +- Fixed all className uses of `Textarea` in other components +- Fixed `Radio` label color in dark mode +- Fixed `helperText` in `Signature` -When you add new components, the CLI will automatically use the correct theming methods based on your `components.json` configuration. +## 0.26.2 -#### Utility classes +### Patch Changes -```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/ -
-``` +- Added `--constant-background` global variable +- Made `Signature` background color constant regardless of color mode +- Added `helperText` to `Signature` for validation -To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file. +## 0.26.1 -```json {6} title="components.json" -{ - "tailwind": { - "config": "tailwind.config.js", - "css": "app/globals.css", - "baseColor": "slate", - "cssVariables": false - } -} -``` +### Patch Changes -#### CSS Variables +- Added `Label` to `Signature` +- Added `texts` object prop to `Signature` to enable consumer based texts -```tsx /bg-background/ /text-foreground/ -
-``` +## 0.26.0 -To use CSS variables classes for theming set `tailwind.cssVariables` to `true` in your `components.json` file. +### Minor Changes -```json {6} title="components.json" -{ - "tailwind": { - "config": "tailwind.config.js", - "css": "app/globals.css", - "baseColor": "slate", - "cssVariables": true - } -} -``` +- Added `Signature` component for users to draw their signature. ---- +## 0.25.2 -### Base color +### Patch Changes -You can now configure the base color for your project. This will be used to generate the default color palette for your components. +- Updated packages +- Updated `Carousel` props +- General cleanup -```json {5} title="components.json" -{ - "tailwind": { - "config": "tailwind.config.js", - "css": "app/globals.css", - "baseColor": "zinc", - "cssVariables": false - } -} -``` +## 0.25.1 -Choose between `gray`, `neutral`, `slate`, `stone` or `zinc`. +### Patch Changes -If you have `cssVariables` set to `true`, we will set the base colors as CSS variables in your `globals.css` file. If you have `cssVariables` set to `false`, we will inline the Tailwind CSS utility classes in your components. +- `PinInput`: now shows numeric keyboard on phone +- Exported `Glow` to be built via `tsup` +- Replaced `tsup.config.ts` with `tsup.config.js` ---- +## 0.25.0 -### React Server Components +### Minor Changes -If you're using a framework that does not support React Server Components, you can now opt out by setting `rsc` to `false`. We will automatically append or remove the `use client` directive when adding components. +- Added `Glow` component that can be used to apply glow effect on it's children -```json title="components.json" -{ - "rsc": false -} -``` +## 0.24.15 ---- +### Patch Changes -### Styles +- `Label`: fixed clicking on the hint submits a form +- `Label`: fixed clicking tab to go to the next field in a form accidentally focuses on the hint icon -We are introducing a new concept called _Style_. +## 0.24.14 -_You can think of style as the visual foundation: shapes, icons, animations & typography._ A style comes with its own set of components, animations, icons and more. +### Patch Changes -We are shipping two styles: `default` and `new-york` (with more coming soon). +- Fixed `CommandInput` direction +- Fixed margins of check mark of `CommandItem` in `Combobox` -Default vs New York style +## 0.24.13 -The `default` style is the one you are used to. It's the one we've been using since the beginning of this project. It uses `lucide-react` for icons and `tailwindcss-animate` for animations. +### Patch Changes -The `new-york` style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from [Radix Icons](https://icons.radix-ui.com). +- `Combobox`: fixed text color from primary to pure white/black -When you run the `init` command, you will be asked which style you would like to use. This is saved in your `components.json` file. +## 0.24.12 -```json title="components.json" -{ - "style": "new-york" -} -``` +### Patch Changes -### Theming +- `Combobox`: added `RTL` support +- Fixed icon spacing in `CommandInput` -Start with a style as the base then theme using CSS variables or Tailwind CSS utility classes to completely change the look of your components. +## 0.24.11 -Style with theming +### Patch Changes ---- +- `Radio`: fixed full width when `bordered` design +- `Radio`: disabled selecting text when design is `bordered` +- `Checkbox`: fixed line height of `label` +- General cleanup -### Exit animations +## 0.24.10 -I added exit animations to all components. Click on the combobox below to see the subtle exit animation. +### Patch Changes - +- Replaced all references of `onChangeTab` to `onChange` -The animations can be customized using utility classes. +## 0.24.9 ---- +### Patch Changes -### Other updates +- Added `name` prop to `Radio` component +- Change `onChangeTab` to `onChange` +- Added handling change to all types of `Radio` -### Button +## 0.24.8 -- Added a new button size `icon`: +### Patch Changes - +- Fixed missing translation of soon `Chip` in `PricingCard` -### Sheet +## 0.24.7 -- Renamed `position` to `side` to match the other elements. +### Patch Changes - +- `AppTabs`: fixed horizontal align of icon and label in a single tab -- Removed the `size` props. Use `className="w-[200px] md:w-[450px]"` for responsive sizing. +## 0.24.6 ---- +### Patch Changes + +- `AppTabs`: fixed inactive tab hover color +- `ItemCard`: fixed spaceing when height is larger +- `ItemCard`: fixed UI when in RTL direction + +## 0.24.5 + +### Patch Changes + +- Fixed background color of `AppTabs` +- Codesplitting `Layout` components each component in it's own folder +- Updated the build process for `Layout` components to be grouped 3 at a time during build +- Updated story imports + +## 0.24.4 + +### Patch Changes + +- Added click handling to `AppTabs` + +## 0.24.3 + +### Patch Changes + +- Changed `content` type to `React.ReactNode` +- Tested nesting an `Accordion` inside an `Accordion` content field. + +## 0.24.2 + +### Patch Changes + +- Added `sm` and `default` sizes to `Toaster` +- Updated the way `Toast`, `ToastTitle`, `ToastDescription`, and `ToastClose` are styled and moved the conditional styling to `Toaster` + +## 0.24.1 + +### Patch Changes + +- Organized tsup configuration +- Added `clickable` prop to `Stats` +- Added `type='button'` to `Combobox` to fix submit behavior while in form +- Updated dependencies + +## 0.24.0 + +### Minor Changes + +- Improved imports in all stories +- Removed unused story docs +- `Elements` bundling code is now more readable +- Optimized imports within `Navbar`, `Sidebar`, `Stats`, `AppLayout`, `LandingCard`, `PricingCard`, `DestroyableCard`, and `AppTopbar` + +## 0.23.11 + +### Patch Changes + +- Code splitting the following components: `Carousel`, `CodeBlock`,`Collapsible`,`ColorPicker`,`DestroyableCard`,`FileUploader`,`InterfaceSettings`,`Pagination`,`PasswordInput`,`ProgressCircle`,`ScrollIndicator`,`Separator`,`SimpleTable`,`Slider`,`Toast`, `Toaster` + +## 0.23.10 + +### Patch Changes + +- Fixed clearing `dist` folder on each build + +## 0.23.9 + +### Patch Changes + +- Included `blocks` and `layout` to the build process + +## 0.23.7 + +### Patch Changes + +- Removed `--dts` flag from `build-lib` script +- Attempting to fix out-of-memory build issue + +## 0.23.6 + +### Patch Changes + +- Code splitting `ScrollArea` +- General cleanup + +## 0.23.5 + +### Patch Changes + +- Code splitting `PinInput`, `PhoneInput`, and `StopPropagationWrapper` + +## 0.23.4 + +### Patch Changes + +8ba2587: - Moved `Chip` to it's own folder + +- Moved `Breadcrumb` to it's own folder +- Moved `AppStores` to it's own folder +- Moved `Badge` to it's own folder + +## 0.23.3 + +### Patch Changes + +- Improved size of `NoPermission` and `ResetPassword` blocks + +## 0.23.2 + +### Patch Changes + +- Moved `Checkbox` to it's own folder +- Moved `Switch` to it's own folder + +## 0.23.1 + +### Patch Changes + +- Moved `Popover` to it's own folder +- Improved the imports within `Comobobox` + +## 0.23.0 + +### Minor Changes + +- Updated `tsup.config.ts` +- Splitting the bundling process by `tsup` to prevent no-memory breaking error + +## 0.22.8 + +### Patch Changes + +- Moved `Input` to it's own exported folder + +## 0.22.7 + +### Patch Changes + +- Moved `Tabs` to it's own folder +- Updated `tsup` configuration + +## 0.22.6 + +### Patch Changes + +- Moved `Combobox` to it's own folder +- Updated `hawa-beta.yml` github action file + +## 0.22.5 + +### Patch Changes + +- moved `Alert` to it's own folder +- moved `FileDropzone` to it's own folder +- moved `Table` to it's own folder +- moved `DataTable` to it's own folder +- moved `Label` to it's own folder +- moved `BackToTop` to it's own folder +- moved `Avatar` to it's own folder +- moved `Textarea` to it's own folder + +## 0.22.4 + +### Patch Changes + +- Updated packages + +## 0.22.3 + +### Patch Changes + +- Exporting `Radio` individually + +## 0.22.2 + +### Patch Changes + +- Fixed types in `PricingPlans` block +- Exporting `Alert` individually + +## 0.22.1 + +### Patch Changes + +- Exported `/types` to be imported by consumer via `@sikka/hawa/types` +- Organized types within `/blocks/pricing` + +## 0.22.0 + +### Minor Changes + +- `blocks` can now be imported via `@sikka/hawa/blocks` +- auth blocks can now be imported via `@sikka/hawa/blocks/auth` +- feedback blocks can now be imported via `@sikka/hawa/blocks/feedback` +- pricing blocks can now be imported via `@sikka/hawa/blocks/pricing` +- misc blocks can now be imported via `@sikka/hawa/blocks/misc` +- `elements` can now be imported via `@sikka/hawa/elements` +- `layout` can now be imported via `@sikka/hawa/layout` + +## 0.21.15 + +### Patch Changes + +- Moved `Logos` to it's own folder + +## 0.21.14 + +### Patch Changes + +- Moved `Card` to it's own folder + +## 0.21.13 + +### Patch Changes + +- Moved `Tooltip` to it's own folder +- Moved `hooks` to `/hooks` folder + +## 0.21.12 + +### Patch Changes + +- Moved `NavigationMenu` to it's own folder + +## 0.21.11 + +### Patch Changes + +- Split all `Accordion` subcomponents to seperate files +- Moved `DropdownMenu` to it's own folder +- Moved `Sheet` to it's own folder + +## 0.21.10 + +### Patch Changes + +- Moved `SplitButton` to its own directory +- Updated exports in `package.json` + +## 0.21.9 + +### Patch Changes + +- Moved `Skeleton` to a separate directory + +## 0.21.8 + +### Patch Changes + +- Added `/Button` export to `package.json` + +## 0.21.7 + +### Patch Changes + +- Fixing build issue + +## 0.21.6 + +### Patch Changes + +- Moved `Button` and `SplitButton` and `SortButton` to `/elements/Button` folder + +## 0.21.5 + +### Patch Changes + +- Added `DropdownMenuRadio` to a storybook +- Fixed cursor design in `DropdownMenuRadio` + +## 0.21.4 + +### Patch Changes + +- Added `unstyled` to `AccordionTrigger` and `AccordionContent` +- Added `hideArrow` to `AccordionTrigger` to hide arrow + +## 0.21.3 + +### Patch Changes + +- Fixed `ContactForm` width on mobile + +## 0.21.2 + +### Patch Changes + +- Added `chip` prop to `Accordion` item [#SIKKA-5849](https://app.clickup.com/t/613523/SIKKA-5849) + +## 0.21.1 + +### Patch Changes + +- Updated imports to use aliases +- General cleanup + +## 0.21.0 + +### Minor Changes + +- Added `prettier-plugin-tailwindcss` +- Added `@trivago/prettier-plugin-sort-imports` +- Cleaned up + +## 0.20.10 + +### Patch Changes + +- Added `actionFirst` prop to `NavigationMenu` for router usage in next.js apps + +## 0.20.8 + +### Patch Changes + +- `ContactForm` now resets on submision + +## 0.20.7 + +### Patch Changes + +- Updated dependencies +- Fixed the way IBM Plex Sans Arabic is applied + +## 0.20.6 + +### Patch Changes + +- Removing IBM font references + +## 0.20.5 + +### Patch Changes + +- Added `formId` to `ContactForm` +- Added `formAutoComplete` to `ContactForm` +- Added `disabled` to `AccordionTrigger` +- Exported `AccordionItemProps` type + +## 0.20.4 + +### Patch Changes + +- Exposed `triggerClassNames` in `NavigationMenu` + +## 0.20.3 + +### Patch Changes + +- Updated storybook +- Fixed default design of `Accordion` + +## 0.20.2 + +### Patch Changes + +- Added `Separated` variant to `Accordion` + +## 0.20.1 + +### Patch Changes + +- Fixed close button in `Sheet` + +## 0.20.0 + +### Minor Changes + +- Added `ContactForm` +- Fixed `Textarea` placeholder text color +- Removed all shadows of `FeedbackForm` and `ContactForm` when `cardless` prop is true +- exporting `TextInputType` +- General cleanup + +## 0.19.41 + +### Patch Changes + +- Minor cleanup + +## 0.19.40 + +### Patch Changes + +- Added sizes to `Radio` tabs + +## 0.19.39 + +### Patch Changes + +- Added background to `Radio` +- Fixed responsiveness of `PricingPlans` +- Added priceless option to `PricingCard` + +## 0.19.38 + +### Patch Changes -### Updating your project - -Since we follow a copy and paste approach, you will need to manually update your project to get the latest changes. - - - Note: we are working on a [`diff`](#diff-experimental) command to help you - keep track of upstream updates. - - - - -### Add `components.json` - -Creating a `components.json` file at the root: - -```json title="components.json" -{ - "style": "default", - "rsc": true, - "tailwind": { - "config": "tailwind.config.js", - "css": "app/globals.css", - "baseColor": "slate", - "cssVariables": true - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils" - } -} -``` - -Update the values for `tailwind.css` and `aliases` to match your project structure. - -### Button - -Add the `icon` size to the `buttonVariants`: - -```tsx {7} title="components/ui/button.tsx" -const buttonVariants = cva({ - variants: { - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, -}) -``` - -### Sheet - -1. Replace the content of `sheet.tsx` with the following: - -```tsx title="components/ui/sheet.tsx" -"use client" - -import * as React from "react" -import * as SheetPrimitive from "@radix-ui/react-dialog" -import { cva, type VariantProps } from "class-variance-authority" -import { X } from "lucide-react" - -import { cn } from "@/lib/utils" - -const Sheet = SheetPrimitive.Root - -const SheetTrigger = SheetPrimitive.Trigger - -const SheetClose = SheetPrimitive.Close - -const SheetPortal = ({ - className, - ...props -}: SheetPrimitive.DialogPortalProps) => ( - -) -SheetPortal.displayName = SheetPrimitive.Portal.displayName - -const SheetOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetOverlay.displayName = SheetPrimitive.Overlay.displayName - -const sheetVariants = cva( - "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", - { - variants: { - side: { - top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", - bottom: - "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", - left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", - right: - "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", - }, - }, - defaultVariants: { - side: "right", - }, - } -) - -interface SheetContentProps - extends React.ComponentPropsWithoutRef, - VariantProps {} - -const SheetContent = React.forwardRef< - React.ElementRef, - SheetContentProps ->(({ side = "right", className, children, ...props }, ref) => ( - - - - {children} - - - Close - - - -)) -SheetContent.displayName = SheetPrimitive.Content.displayName - -const SheetHeader = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-) -SheetHeader.displayName = "SheetHeader" - -const SheetFooter = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
-) -SheetFooter.displayName = "SheetFooter" - -const SheetTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetTitle.displayName = SheetPrimitive.Title.displayName - -const SheetDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetDescription.displayName = SheetPrimitive.Description.displayName - -export { - Sheet, - SheetTrigger, - SheetClose, - SheetContent, - SheetHeader, - SheetFooter, - SheetTitle, - SheetDescription, -} -``` - -2. Rename `position` to `side` - -```diff /position/ /side/ -- -+ -``` - - - -### Thank you - -I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏 +- ComparingPlans: added background to scroll area diff --git a/apps/docs/content/docs/elements/accordion.mdx b/apps/docs/content/docs/elements/accordion.mdx index 82e660c53..bb50e1e09 100644 --- a/apps/docs/content/docs/elements/accordion.mdx +++ b/apps/docs/content/docs/elements/accordion.mdx @@ -40,7 +40,10 @@ const items = [ trigger: "Can I pay with Bitcoin??", content: "You'll be able to send payments via a cryptocurrency soon.", disabled: false, - chip: "Soon" + chip: { + label: "Soon", + color: "green" + } } ]; ``` @@ -63,11 +66,11 @@ const items = [ ```tsx import { - Accordion, + AccordionRoot, AccordionContent, AccordionItem, AccordionTrigger -} from "@/components/ui/accordion"; +} from "@sikka/hawa/accordion"; ``` Update the import paths to match your project setup. @@ -77,14 +80,14 @@ import { Add the following animations to your `tailwind.config.js` file: ```tsx - + Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. - + ``` diff --git a/apps/docs/content/docs/elements/toast.mdx b/apps/docs/content/docs/elements/toaster.mdx similarity index 89% rename from apps/docs/content/docs/elements/toast.mdx rename to apps/docs/content/docs/elements/toaster.mdx index ecfb96992..9243c18bb 100644 --- a/apps/docs/content/docs/elements/toast.mdx +++ b/apps/docs/content/docs/elements/toaster.mdx @@ -1,5 +1,5 @@ --- -title: Toast +title: Toaster description: A succinct message that is displayed temporarily. component: true links: @@ -8,7 +8,7 @@ links: storybook: https://storybook.hawa.style/?path=/story/elements-toast--default --- - + ## Usage @@ -23,6 +23,8 @@ import { Toaster } from "@sikka/hawa/toaster"; Get the `toasts` array from `useToast` +You can learn more about the `useToast` hook [here](/docs/hooks/use-toast). + ```js const { toasts } = useToast(); ``` @@ -37,12 +39,13 @@ apps directory. import { Toaster } from "@sikka/hawa/toaster"; export default function MyApp({ children }) { + const { toasts } = useToast(); return (
{children}
- + ); diff --git a/apps/docs/content/docs/hooks/use-toast.mdx b/apps/docs/content/docs/hooks/use-toast.mdx index 8d77e454a..6922ec230 100644 --- a/apps/docs/content/docs/hooks/use-toast.mdx +++ b/apps/docs/content/docs/hooks/use-toast.mdx @@ -1,8 +1,30 @@ --- title: useToast -description: A modal dialog that interrupts the user with important content and expects a response. +description: A hook to show and control toast messages --- -# This is the useToast hook +The `useToast` hook is used to show and control toast messages. It returns an object with a `toast` function and a `toasts` state. The `toast` function is used to show a toast message. -COMING SOON INSHALLAH +The `toasts` state is an array of toast messages that are currently being shown. + +Each toast message can be dismissed by clicking the x button or by swiping it away. The `toasts` state is updated when a toast message is dismissed. + +```js +const { toast, toasts } = useToast(); +``` + +# toast (creator) + +The `toast` function is used to show a toast message. It accepts a `message` and an optional `options` object. + +```js +toast({ + title: "The title of the toast message, in bold.", + description: "The description of the toast message, in normal text.", + severity: "info", + size: "sm", + action: Try again +}); +``` + +# toasts (state) diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx index 281151e2f..ea8df0926 100644 --- a/apps/docs/content/docs/index.mdx +++ b/apps/docs/content/docs/index.mdx @@ -1,67 +1,10 @@ --- title: Introduction -description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. +description: Beautiful UI components made with Tailwind CSS and React. --- -This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps. +Welcome to Hawa, a meticulously crafted UI component library designed to accelerate your web application development process. This library is composed of a wide array of elements, blocks, and layouts, all created with the power of Tailwind CSS and React. -**What do you mean by not a component library?** +Hawa is designed with the developer in mind, aiming to make the process of creating web applications as seamless as possible. With our library, you can focus more on the logic and functionality of your application, while we take care of the aesthetics and user interface. -I mean you do not install it as a dependency. It is not available or distributed via npm. - -Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours. - -_Use this as a reference to build your own component libraries._ - -## FAQ - - - - - - Why copy/paste and not packaged as a dependency? - - -The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled. - -Start with some sensible defaults, then customize the components to your needs. - -One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._ - - - - - - - Do you plan to publish it as an npm package? - - - No. I have no plans to publish it as an npm package. - - - - - -Which frameworks are supported? - - - -You can use any framework that supports React. [Next.js](https://ui.shadcn.com/docs/installation/next), [Astro](https://ui.shadcn.com/docs/installation/astro), [Remix](https://ui.shadcn.com/docs/installation/remix), [Gatsby](https://ui.shadcn.com/docs/installation/gatsby) etc. - - - - - - - Can I use this in my project? - - -Yes. Free to use for personal and commercial projects. No attribution required. - -But hey, let me know if you do. I'd love to see what you build. - - - - - - +Whether you're building a simple website or a complex web application, Hawa provides you with the tools you need to create beautiful, responsive, and user-friendly interfaces. Dive in and explore the possibilities! diff --git a/apps/docs/content/docs/installation.mdx b/apps/docs/content/docs/installation.mdx index ad632304b..8c7723d92 100644 --- a/apps/docs/content/docs/installation.mdx +++ b/apps/docs/content/docs/installation.mdx @@ -7,34 +7,6 @@ description: How to install Hawa in your app ### Install @sikka/hawa -بسم الله ا لرحمن ا لرحيم - -Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project. - -[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation) - -### Add dependencies - -Add the following dependencies to your project: - -```bash -npm install tailwindcss-animate class-variance-authority clsx tailwind-merge -``` - -### Add icon library - -If you're using the `default` style, install `lucide-react`: - -```bash -npm install lucide-react -``` - -If you're using the `new-york` style, install `@radix-ui/react-icons`: - -```bash -npm install @radix-ui/react-icons -``` -
-### Configure path aliases +Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project. -I use the `@` alias. This is how I configure it in tsconfig.json: +[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation) -```json fileName="tsconfig.json" -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./*"] - } - } -} -``` +### Import hawa styles in your app + +In your main file (e.g. `pages/_app.tsx`), import the Hawa styles. -The `@` alias is a preference. You can use other aliases if you want. - -**If you use a different alias such as ~, you'll need to update import statements when adding components.** - -### Configure tailwind.config.js - -Here's what my `tailwind.config.js` file looks like: - -```js fileName="tailwind.config.js" -const { fontFamily } = require("tailwindcss/defaultTheme"); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ["class"], - content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px" - } - }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))" - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))" - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))" - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))" - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))" - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))" - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))" - } - }, - borderRadius: { - lg: `var(--radius)`, - md: `calc(var(--radius) - 2px)`, - sm: "calc(var(--radius) - 4px)" - }, - fontFamily: { - sans: ["var(--font-sans)", ...fontFamily.sans] - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" } - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" } - } - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out" - } - } - }, - plugins: [require("tailwindcss-animate")] -}; + + Note: Make sure `@sikka/hawa/dist/style.css` is the last import in the file. + + +```tsx fileName="_app.tsx" +import "@sikka/hawa/dist/style.css"; ``` -### Configure styles +### Overwrite global styles -Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming). +Add the following to your styles/globals.css file (for next.js apps). and change the colors to match your brand colors. ```css fileName="globals.css" @tailwind base; @@ -159,100 +45,94 @@ Add the following to your styles/globals.css file. You can learn more about usin @layer base { :root { + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; + --foreground: 240 10% 3.9%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --card: 210 50% 98%; + --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; + --popover-foreground: 240 10% 3.9%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --info: 209 62% 50%; + --info-foreground: 0 0% 98%; - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; + --success: 148 48% 43%; + --success-foreground: 0 0% 98%; - --ring: 215 20.2% 65.1%; + --warning: 24 75% 50%; + --warning-foreground: 0 0% 98%; + --error: 0 84.2% 60.2%; + --error-foreground: 0 0% 98%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --constant-background: 0 0% 100%; + --helper-text: 0 72% 51%; + --ring: 240 5% 64.9%; --radius: 0.5rem; + --radius-inner: calc(var(--radius) - calc(var(--radius) / 3)); } - .dark { - --background: 224 71% 4%; - --foreground: 213 31% 91%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; - --muted: 223 47% 11%; - --muted-foreground: 215.4 16.3% 56.9%; + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; + --card: 0 0% 2%; + --card-foreground: 0 0% 98%; - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; - --border: 216 34% 17%; - --input: 216 34% 17%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; - --card: 224 71% 4%; - --card-foreground: 213 31% 91%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 1.2%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; - --secondary: 222.2 47.4% 11.2%; - --secondary-foreground: 210 40% 98%; + --success: 106 70% 40%; + --success-foreground: 0 0% 100%; - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; + --info: 200 100% 30%; + --info-foreground: 0 0% 100%; - --ring: 216 34% 17%; + --warning: 45 100% 50%; + --warning-foreground: 0 0% 20%; - --radius: 0.5rem; - } -} + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - font-feature-settings: - "rlig" 1, - "calt" 1; + --helper-text: 0 84% 60%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; } } ``` -### Add a cn helper - -I use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in `lib/utils.ts`: - -```ts fileName="lib/utils.ts" -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} -``` - ### That's it -You can now start adding components to your project. +You can now start using Hawa components in your app. diff --git a/apps/docs/lib/sync-changelog.js b/apps/docs/lib/sync-changelog.js new file mode 100644 index 000000000..683776576 --- /dev/null +++ b/apps/docs/lib/sync-changelog.js @@ -0,0 +1,31 @@ +const fs = require("fs"); +const path = require("path"); + +const srcPath = path.resolve( + __dirname, + "../../../packages/components/changelog.md" +); +const destPath = path.join(__dirname, "../content/docs/changelog.mdx"); + +// Read the content from changelog.md +fs.readFile(srcPath, "utf8", (err, srcContent) => { + if (err) throw err; + + // Read the header from changelog.mdx + fs.readFile(destPath, "utf8", (err, destContent) => { + if (err) throw err; + + // Find the end of the header + const headerEndIndex = destContent.indexOf("---", 3) + 4; // 3 is the length of '---' + const header = destContent.substring(0, headerEndIndex); + + // Combine the header and the content + const combinedContent = header + "\n" + srcContent; + + // Write the combined content to changelog.mdx + fs.writeFile(destPath, combinedContent, (err) => { + if (err) throw err; + console.log("changelog.md was copied to changelog.mdx"); + }); + }); +}); diff --git a/apps/docs/package.json b/apps/docs/package.json index fc567f123..f984662c0 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -4,12 +4,13 @@ "private": true, "scripts": { "dev": "next dev -p 3001", - "build": "contentlayer build && next build", + "build": "npm run sync:changelog && contentlayer build && next build", "build:registry": "ts-node --esm --project ./tsconfig.scripts.json ./scripts/build-registry.ts", "seed:tasks": "ts-node --esm --project ./tsconfig.scripts.json ./app/examples/tasks/data/seed.ts", "start": "next start -p 3010", "lint": "next lint", "lint:fix": "next lint --fix", + "sync:changelog": "node ./lib/sync-changelog.js", "preview": "next build && next start -p 3010", "typecheck": "contentlayer build && tsc --noEmit", "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache", diff --git a/apps/docs/registry/default/example/accordion-demo.tsx b/apps/docs/registry/default/example/accordion-demo.tsx index f6f198af8..57e11d086 100644 --- a/apps/docs/registry/default/example/accordion-demo.tsx +++ b/apps/docs/registry/default/example/accordion-demo.tsx @@ -1,35 +1,35 @@ -import { - Accordion, - AccordionRoot, - AccordionContent, - AccordionItem, - AccordionTrigger -} from "@sikka/hawa/accordion"; +import { AccordionItemProps } from "@sikka/hawa"; +import { Accordion } from "@sikka/hawa/accordion"; export default function AccordionDemo() { + let accordionItems: AccordionItemProps[] = [ + { + trigger: "What is Sikka?", + content: "Sikka is a software company based in Saudi Arabia", + chip: { + label: "Saudi", + color: "green" + } + }, + { + trigger: "What is a design system?", + content: + "A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications." + }, + { + trigger: "What is a component?", + content: + "A component is a reusable element that can be composed together with other components to build an application." + }, + { + trigger: "This one is disabled", + content: "You'll never read this.", + disabled: true + } + ]; return ( - - // - // - // Is it accessible? - // - // Yes. It adheres to the WAI-ARIA design pattern. - // - // - // - // Is it styled? - // - // Yes. It comes with default styles that matches the other - // components' aesthetic. - // - // - // - // Is it animated? - // - // Yes. It's animated by default, but you can disable it if you - // prefer. - // - // - // +
+ +
); }