Merge pull request #35 from BelkacemYerfa/dev

feat: add the RTL support

.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_POSTHOG_HOST=
+NEXT_PUBLIC_POSTHOG_KEY=

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

.vscode/settings.json

@@ -111,7 +111,7 @@
   },
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": true,
-  "window.zoomLevel": 0.75,
+  "window.zoomLevel": 0,
   "cSpell.languageSettings": [],
   "rust-analyzer.debug.engineSettings": {}
 }

CONTRIBUTING.md

@@ -7,39 +7,154 @@ Some thoughts to help you contribute to this project
 ## Recommended Communication Style
 
 1. Always leave screenshots for visuals changes
-1. Always leave a detailed description in the Pull Request. Leave nothing ambiguous for the reviewer.
-1. Always review your code first. Do this by leaving comments in your coding noting questions, or interesting things for the reviewer.
-1. Always communicate. Whether it is in the issue or the pull request, keeping the lines of communication helps everyone around you.
+2. Always leave a detailed description in the Pull Request. Leave nothing ambiguous for the reviewer.
+3. Always review your code first. Do this by leaving comments in your coding noting questions, or interesting things for the reviewer.
+4. Always communicate. Whether it is in the issue or the pull request, keeping the lines of communication helps everyone around you.
 
-## Setup (forks are preferred).
+## Development (forks are preferred)
 
-```sh
+To fork the repo click here: [**fork shadcn-extension**](https://github.com/BelkacemYerfa/shadcn-extension/fork)
+
+```shell
 $ git clone https://github.com/<your-name>/shadcn-extension.git
 $ cd shadcn-extension
 ```
 
-then choose one of the following:
+### Setup analytics
 
-1. `cd packages` and run `npm install`
-2. `cd docs` and run `npm install`
+1. Create a new project in posthog
 
-## Building
+2. Copy the env variables to the `.env.example` file
 
-```sh
-$ npm run build
-```
+   ```
+   POSTHOG_API_KEY=your-api-key
+   POSTHOG_HOST=your-host
+   ```
+
+3. Rename the `.env.example` file to `.env.local`
+
+### Adding New Components
+
+1. Create a new file with the components name in `src/registry/default/extension`
+
+   ```tsx
+   // src/registry/default/extension/sample-component.tsx
+
+   interface SampleComponentProps {
+     content: string;
+   }
+
+   const SampleComponent = ({ content }: SampleComponentProps) => {
+     return <div>{content ?? "Hello World!"}</div>;
+   };
+
+   export default SampleComponent;
+   ```
+
+   > Be sure to follow best practices and guidelines set forth in this document.
+
+2. Register the component in the `extension` array in `src/registry/default/components.ts`
+
+   ```ts
+   import { Registry } from "./schema";
+
+   const extension: Registry = [
+     {
+       name: "sample-component",
+       type: "components:extension",
+       dependencies: [], // include names of any packages this component depends on.
+       files: ["extension/sample-component.tsx"],
+     },
+   ];
+   ```
+
+3. Then run the **registry build** script
+
+   ```shell
+   npm run build:registry
+   ```
+
+   > This should generate a new version of the `src/__registry__/index.tsx` file.
+
+### Adding Demos
+
+Demos are used in the docs to show the base implementation of the component using our provided defaults.
+
+1. Create a new file for the demo in `src/registry/default/example/`
+
+   ```tsx
+   // src/registry/default/example/sample-component-demo.tsx
 
-## Pull Requests
+   import { SampleComponent } from "@/registry/default/extension/sample-component";
 
-### _We actively welcome your pull requests, however linking your work to an existing issue is preferred._
+   const SampleComponentTest = () => {
+     return <SampleComponent />;
+   };
 
-1. Fork the repo and create your branch
-2. Name your branch something that is descriptive to the work you are doing. i.e. adds-new-thing or fixes-issue-thing
-3. Make sure you address any lint warnings.
-4. If you make the existing code better, please let us know in your PR description.
-5. A PR description and title are required. The title is required to begin with: "fix:" or "feat:" or "refactor:" .
+   export default SampleComponentTest;
+   ```
+
+2. Then register the demo component in `demos` array in the component registry file: `src/registry/default/components.ts`
+
+   ```ts
+   // src/registry/default/components.ts
+
+   const demos: Registry = [
+     {
+       name: "sample-component-demo",
+       type: "components:demo",
+       registryDependencies: [], // include names of any packages this component depends on.
+       files: ["example/sample-component-demo.tsx"],
+     },
+   ];
+   ```
+
+### Adding Examples
+
+Examples are similar to demos, but used to individually demonstrate different variants, props or features of each component.
+
+1. Create a new folder for the examples as `src/registry/default/example/<component-name>.tsx`
+
+   ```tsx
+   // src/registry/default/example/sample-component/sample-component-content.tsx
+
+   import { SampleComponent } from "@/registry/default/extension/sample-component";
+
+   const SampleComponentContentTest = () => {
+     return <SampleComponent content="This is how we use the content prop" />;
+   };
+
+   export default SampleComponentContentTest;
+   ```
+
+2. Then register the example to the `examples` array in the component registry file: `src/registry/default/components.ts`
+
+   ```ts
+   // src/registry/default/components.ts
+
+   const examples: Registry = [
+     {
+       name: "sample-component-content",
+       type: "components:example",
+       registryDependencies: [], // include names of any packages this component depends on.
+       files: ["example/sample-component/sample-component-content.tsx"],
+     },
+   ];
+   ```
+
+### Adding New Docs
+
+```js
+// todo: add instructions for contributing to documentation
+```
+
+## Builds
+
+```shell
+npm run build
+```
 
-### PR Validation
+## PR Validation
 
 Examples for valid PR titles:
 
@@ -53,4 +168,4 @@ See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for m
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](/LICENSE.md) file for details.
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/BelkacemYerfa/shadcn-extension/blob/master/LICENSE.md) file for details.

content/docs/carousel.mdx

@@ -108,7 +108,7 @@ npm i embla-carousel embla-carousel-react
 
 The carousel is accessible by default. Where it follows the WAI-ARIA guidelines , also it fully supports keyboard navigation.
 
-### Keyboard Navigation
+## Keyboard Navigation
 
 <MDXTable
   data={[

content/docs/changelog.mdx

@@ -3,8 +3,34 @@ title : Changelog
 description : All last changes in the project with announcements
 ---
 
+## April 2024 - RTL support, new member
 
-## March 2024 - New docs
+### RTL support
+
+One of the most missing features is the RTL support for the components, so we provided the fix for that, so now every component in the registry gonna make the write adjusments for the ui and functionality based on the dir property.
+
+#### Example
+
+This example showcases the carousel component
+
+<ComponentPreview name="carousel-rtl-support"  />
+
+<Alert className="mt-4" variant="info">
+  <MdxIcons.AlertTriangle className="size-4" />
+  <AlertTitle>Good to know</AlertTitle>
+  <AlertDescription>
+    The carousel component has 2 ways for the direction one is using the `dir` prop , and the other one is to use `carouselOptions` as the embla carousel provides a <Link target="_blank"  href="https://www.embla-carousel.com/api/options/#direction" className="font-semibold" >
+    Direction prop</Link> that suport both
+  </AlertDescription>
+</Alert>
+
+### New team member
+
+This is project is growing up, and this is cool to see from the community, but a lot of parts are missing, so I want you all to welcome a new team member <Link target="_blank"  href="https://twitter.com/Soham_Asmi" className="font-semibold" >@Gaurang</Link>, together, we feel confident that we can deliver the tools you need to easily build accessible modern UIs faster than ever before.
+
+
+
+## March 2024 - New Docs
 
 We are happy to announce that we have updated our documentation. We have added new features. We hope you will find it useful. If you have any questions or suggestions, please let us know.
 

content/docs/file-upload.mdx

@@ -103,6 +103,16 @@ npm i sonner
         value: ["false"]
       }
     },
+    { prop : {
+        value: "orientation",
+        description: "The orientation of the file upload.",
+      } ,
+      type : {
+        value: ["horizantle" , "vertical"]
+      } ,
+      defaultValue : {
+        value: ["horizantle"]
+      }},
     {
       prop: {
         value: "dropzoneOptions",

content/docs/multi-select.mdx

@@ -67,7 +67,7 @@ npx shadcn-ui@latest add command
     },
     {
       prop: {
-        value: "value",
+        value: "values",
         description:
           "The value array that contains the values of the selected items.",
       },
@@ -80,7 +80,7 @@ npx shadcn-ui@latest add command
     },
     {
       prop: {
-        value: "onValueChange",
+        value: "onValuesChange",
         description: "The function that will be called when the value changes.",
       },
       type: {
@@ -179,7 +179,7 @@ import {
 ```
 
 ```tsx
-<MultiSelector value={value} onValueChange={setValue} loop className="max-w-xs">
+<MultiSelector values={value} onValuesChange={setValue} loop className="max-w-xs">
   <MultiSelectorTrigger>
     <MultiSelectorInput placeholder="Select your framework" />
   </MultiSelectorTrigger>
@@ -251,7 +251,7 @@ const MultiSelectForm = () => {
           render={({ field }) => (
             <FormItem>
               <FormLabel>Invite people</FormLabel>
-              <MultiSelector onValueChange={field.onChange} value={field.value}>
+              <MultiSelector onValuesChange={field.onChange} values={field.value}>
                {...}
                </MultiSelector>
             </FormItem>

content/docs/tree-view.mdx

@@ -520,7 +520,7 @@ return (
           {element.children && element.children?.length > 0 ? (
             <Folder
               element={element.name}
-              id={element.id}
+              value={element.id}
               isSelectable={element.isSelectable}
               className="px-px pr-1"
             >
@@ -533,7 +533,7 @@ return (
           ) : (
             <File
               key={element.id}
-              id={element.id}
+              value={element.id}
               element={element.name}
               isSelectable={element.isSelectable}
               className={"px-1"}
@@ -583,7 +583,7 @@ return (
 {element.children && element.children?.length > 0 ? (
   <Folder
     element={element.name}
-    id={element.id}
+    value={element.id}
     isSelectable={element.isSelectable}
     className="px-px pr-1"
   >
@@ -596,7 +596,7 @@ return (
 ) : (
   <File
     key={element.id}
-    id={element.id}
+    value={element.id}
     element={element.name}
     isSelectable={element.isSelectable}
     className={"px-1"}

contentlayer.config.js

@@ -2,7 +2,7 @@ import {
   defineDocumentType,
   defineNestedType,
   makeSource,
-} from "@contentlayer-temp/source-files";
+} from "@contentlayer2/source-files";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import { codeImport } from "remark-code-import";
@@ -11,7 +11,7 @@ import { visit } from "unist-util-visit";
 import { rehypeComponent } from "./src/lib/rehype-component";
 import { rehypeNpmCommand } from "./src/lib/rehype-installation-command";
 
-/** @type {import('@contentlayer-temp/source-files').ComputedFields} */
+/** @type {import('@contentlayer2/source-files').ComputedFields} */
 const computedFields = {
   slug: {
     type: "string",

next.config.mjs → next.config.cjs

@@ -1,4 +1,4 @@
-import { createContentlayerPlugin } from "next-contentlayer-temp";
+import { createContentlayerPlugin } from "next-contentlayer2";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {