├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github
└── workflows
│ ├── ci.yml
│ └── static.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode
├── extensions.json
└── settings.json
├── README.md
├── apps
└── core
│ ├── .eslintrc.json
│ ├── index.html
│ ├── postcss.config.js
│ ├── project.json
│ ├── public
│ └── logo.svg
│ ├── src
│ ├── assets
│ │ └── .gitkeep
│ ├── components
│ │ ├── RangeenLogo.tsx
│ │ ├── color-picker
│ │ │ └── color-picker.tsx
│ │ ├── home
│ │ │ ├── cards
│ │ │ │ ├── activity-goal.tsx
│ │ │ │ ├── calendar.tsx
│ │ │ │ ├── chat.tsx
│ │ │ │ ├── cookie-settings.tsx
│ │ │ │ ├── create-account.tsx
│ │ │ │ ├── data-table.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ ├── metric.tsx
│ │ │ │ ├── payment-method.tsx
│ │ │ │ ├── report-issue.tsx
│ │ │ │ ├── share.tsx
│ │ │ │ ├── stats.tsx
│ │ │ │ └── team-members.tsx
│ │ │ ├── connect.tsx
│ │ │ ├── footer.tsx
│ │ │ ├── hero-header.tsx
│ │ │ ├── home-page.tsx
│ │ │ └── index.ts
│ │ ├── navigation
│ │ │ └── navigation.tsx
│ │ └── toolbar
│ │ │ ├── code.tsx
│ │ │ └── toolbar.tsx
│ ├── core
│ │ ├── app.tsx
│ │ ├── core-layout.tsx
│ │ ├── core-routes.tsx
│ │ └── theme
│ │ │ ├── context.ts
│ │ │ ├── theme-provider.tsx
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ ├── icons
│ │ ├── apple-icon.tsx
│ │ └── paypal-icon.tsx
│ ├── illustrations
│ │ ├── festivities.tsx
│ │ └── newspaper.tsx
│ ├── main.tsx
│ └── styles.css
│ ├── tailwind.config.js
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ └── vite.config.ts
├── components.json
├── libs
├── shadcn-ui
│ ├── .babelrc
│ ├── .eslintrc.json
│ ├── README.md
│ ├── project.json
│ ├── src
│ │ ├── index.ts
│ │ └── ui
│ │ │ ├── accordion.tsx
│ │ │ ├── alert-dialog.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── aspect-ratio.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── calendar.tsx
│ │ │ ├── card.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── collapsible.tsx
│ │ │ ├── command.tsx
│ │ │ ├── context-menu.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── form.tsx
│ │ │ ├── hover-card.tsx
│ │ │ ├── input.tsx
│ │ │ ├── label.tsx
│ │ │ ├── menubar.tsx
│ │ │ ├── navigation-menu.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── sheet.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── textarea.tsx
│ │ │ ├── toast.tsx
│ │ │ ├── toaster.tsx
│ │ │ ├── toggle-group.tsx
│ │ │ ├── toggle.tsx
│ │ │ ├── tooltip.tsx
│ │ │ ├── typography.tsx
│ │ │ └── use-toast.ts
│ ├── tsconfig.json
│ └── tsconfig.lib.json
└── shadcn-utils
│ ├── .babelrc
│ ├── .eslintrc.json
│ ├── README.md
│ ├── project.json
│ ├── src
│ ├── cn.ts
│ └── index.ts
│ ├── tsconfig.json
│ └── tsconfig.lib.json
├── nx.json
├── package.json
├── pnpm-lock.yaml
├── tsconfig.base.json
└── tsconfig.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "ignorePatterns": ["**/*"],
4 | "plugins": ["@nx"],
5 | "overrides": [
6 | {
7 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
8 | "rules": {
9 | "@nx/enforce-module-boundaries": [
10 | "error",
11 | {
12 | "enforceBuildableLibDependency": true,
13 | "allow": [],
14 | "depConstraints": [
15 | {
16 | "sourceTag": "*",
17 | "onlyDependOnLibsWithTags": ["*"]
18 | }
19 | ]
20 | }
21 | ]
22 | }
23 | },
24 | {
25 | "files": ["*.ts", "*.tsx"],
26 | "extends": ["plugin:@nx/typescript"],
27 | "rules": {}
28 | },
29 | {
30 | "files": ["*.js", "*.jsx"],
31 | "extends": ["plugin:@nx/javascript"],
32 | "rules": {}
33 | }
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | pull_request:
8 |
9 | permissions:
10 | actions: read
11 | contents: read
12 |
13 | jobs:
14 | main:
15 | runs-on: ubuntu-latest
16 | steps:
17 | - uses: actions/checkout@v4
18 | with:
19 | fetch-depth: 0
20 |
21 | # Connect your workspace on nx.app and uncomment this to enable task distribution.
22 | # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "build" targets have been requested
23 | # - run: pnpm exec nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
24 |
25 | - uses: pnpm/action-setup@v2
26 | with:
27 | version: 8
28 | # Cache node_modules
29 | - uses: actions/setup-node@v3
30 | with:
31 | node-version: 20
32 | cache: 'pnpm'
33 | - run: pnpm install --frozen-lockfile
34 | - uses: nrwl/nx-set-shas@v4
35 | - run: pnpm exec nx affected -t lint test build
36 |
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy static content to Pages
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ['main']
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 | group: 'pages'
22 | cancel-in-progress: false
23 |
24 | jobs:
25 | # Single deploy job since we're just deploying
26 | deploy:
27 | environment:
28 | name: github-pages
29 | url: ${{ steps.deployment.outputs.page_url }}
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v4
34 | - uses: pnpm/action-setup@v2
35 | with:
36 | version: 8
37 | # Cache node_modules
38 | - uses: actions/setup-node@v3
39 | with:
40 | node-version: 20
41 | cache: 'pnpm'
42 | - run: pnpm install --frozen-lockfile
43 | - name: Build core
44 | run: |
45 | pnpm exec nx run core:build --base=https://navnote.github.io/rangeen/
46 | - name: Setup Pages
47 | uses: actions/configure-pages@v4
48 | - name: Upload artifact
49 | uses: actions/upload-pages-artifact@v3
50 | with:
51 | path: 'dist/apps/core'
52 | - name: Deploy to GitHub Pages
53 | id: deployment
54 | uses: actions/deploy-pages@v4
55 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | dist
5 | tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | yarn-error.log
34 | testem.log
35 | /typings
36 |
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 |
41 | .nx/cache
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | strict-peer-dependencies=false
2 | auto-install-peers=true
3 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v20.11.1
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Add files here to ignore them from prettier formatting
2 | /dist
3 | /coverage
4 | /.nx/cache
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "plugins": [
4 | "prettier-plugin-organize-imports",
5 | "prettier-plugin-tailwindcss"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"]
3 | }
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "cSpell.words": ["rangeen", "shadcn", "tailwindcss"]
3 | }
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Rangeen
2 |
3 | Rangeen is a quick weekend/open-source project that lets you visualize colours with real websites and components. It is a tool that helps you to create a colour palette for your website.
4 | The project uses material design utilities to generate the colour palette and then uses the colours to generate a theme for the website.
5 |
6 | 
7 |
8 | ## Visualise Shadcn Components
9 |
10 | 
11 |
--------------------------------------------------------------------------------
/apps/core/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "rules": {}
8 | },
9 | {
10 | "files": ["*.ts", "*.tsx"],
11 | "rules": {}
12 | },
13 | {
14 | "files": ["*.js", "*.jsx"],
15 | "rules": {}
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/apps/core/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Rangeen - Color Picker
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/apps/core/postcss.config.js:
--------------------------------------------------------------------------------
1 | const { join } = require('path');
2 |
3 | // Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
4 | // option from your application's configuration (i.e. project.json).
5 | //
6 | // See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
7 |
8 | module.exports = {
9 | plugins: {
10 | tailwindcss: {
11 | config: join(__dirname, 'tailwind.config.js'),
12 | },
13 | autoprefixer: {},
14 | },
15 | };
16 |
--------------------------------------------------------------------------------
/apps/core/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "core",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "apps/core/src",
5 | "projectType": "application",
6 | "targets": {},
7 | "tags": []
8 | }
9 |
--------------------------------------------------------------------------------
/apps/core/public/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/apps/core/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/navnote/rangeen/7e89bf016f471512fc90a128395cab55730babdf/apps/core/src/assets/.gitkeep
--------------------------------------------------------------------------------
/apps/core/src/components/RangeenLogo.tsx:
--------------------------------------------------------------------------------
1 | export const RangeenLogo = (props: React.SVGProps) => {
2 | return (
3 |
4 |
8 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/apps/core/src/components/color-picker/color-picker.tsx:
--------------------------------------------------------------------------------
1 | type ColorPickerProps = {
2 | label: string;
3 | color: string;
4 | setColor: (color: string) => void;
5 | };
6 |
7 | export const ColorPicker = ({ label, color, setColor }: ColorPickerProps) => {
8 | return (
9 |
10 | setColor(value)}
14 | className="h-10 w-10 cursor-pointer rounded-md bg-transparent p-0 focus:outline-none focus:ring-0"
15 | />
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/activity-goal.tsx:
--------------------------------------------------------------------------------
1 | import { Minus, Plus } from 'lucide-react';
2 | import * as React from 'react';
3 | import { Bar, BarChart, ResponsiveContainer } from 'recharts';
4 |
5 | import {
6 | Button,
7 | Card,
8 | CardContent,
9 | CardDescription,
10 | CardFooter,
11 | CardHeader,
12 | CardTitle,
13 | } from '@rangeen/shadcn-ui';
14 |
15 | const data = [
16 | {
17 | goal: 400,
18 | },
19 | {
20 | goal: 300,
21 | },
22 | {
23 | goal: 200,
24 | },
25 | {
26 | goal: 300,
27 | },
28 | {
29 | goal: 200,
30 | },
31 | {
32 | goal: 278,
33 | },
34 | {
35 | goal: 189,
36 | },
37 | {
38 | goal: 239,
39 | },
40 | {
41 | goal: 300,
42 | },
43 | {
44 | goal: 200,
45 | },
46 | {
47 | goal: 278,
48 | },
49 | {
50 | goal: 189,
51 | },
52 | {
53 | goal: 349,
54 | },
55 | ];
56 |
57 | export function CardsActivityGoal() {
58 | const [goal, setGoal] = React.useState(350);
59 |
60 | function onClick(adjustment: number) {
61 | setGoal(Math.max(200, Math.min(400, goal + adjustment)));
62 | }
63 |
64 | return (
65 |
66 |
67 | Move Goal
68 | Set your daily activity goal.
69 |
70 |
71 |
72 |
onClick(-10)}
77 | disabled={goal <= 200}
78 | >
79 |
80 | Decrease
81 |
82 |
83 |
{goal}
84 |
85 | Calories/day
86 |
87 |
88 |
onClick(10)}
93 | disabled={goal >= 400}
94 | >
95 |
96 | Increase
97 |
98 |
99 |
100 |
101 |
102 |
110 |
111 |
112 |
113 |
114 |
115 | Set Goal
116 |
117 |
118 | );
119 | }
120 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/calendar.tsx:
--------------------------------------------------------------------------------
1 | import { addDays } from 'date-fns';
2 |
3 | import { Calendar, Card, CardContent } from '@rangeen/shadcn-ui';
4 |
5 | const start = new Date(2023, 5, 5);
6 |
7 | export function CardsCalendar() {
8 | return (
9 |
10 |
11 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/chat.tsx:
--------------------------------------------------------------------------------
1 | import { Check, Plus, Send } from 'lucide-react';
2 | import * as React from 'react';
3 |
4 | import {
5 | Avatar,
6 | AvatarFallback,
7 | AvatarImage,
8 | Button,
9 | Card,
10 | CardContent,
11 | CardFooter,
12 | CardHeader,
13 | Command,
14 | CommandEmpty,
15 | CommandGroup,
16 | CommandInput,
17 | CommandItem,
18 | CommandList,
19 | Dialog,
20 | DialogContent,
21 | DialogDescription,
22 | DialogFooter,
23 | DialogHeader,
24 | DialogTitle,
25 | Input,
26 | Tooltip,
27 | TooltipContent,
28 | TooltipProvider,
29 | TooltipTrigger,
30 | } from '@rangeen/shadcn-ui';
31 | import { cn } from '@rangeen/shadcn-utils';
32 |
33 | const users = [
34 | {
35 | name: 'Olivia Martin',
36 | email: 'm@example.com',
37 | avatar: '/avatars/01.png',
38 | },
39 | {
40 | name: 'Isabella Nguyen',
41 | email: 'isabella.nguyen@email.com',
42 | avatar: '/avatars/03.png',
43 | },
44 | {
45 | name: 'Emma Wilson',
46 | email: 'emma@example.com',
47 | avatar: '/avatars/05.png',
48 | },
49 | {
50 | name: 'Jackson Lee',
51 | email: 'lee@example.com',
52 | avatar: '/avatars/02.png',
53 | },
54 | {
55 | name: 'William Kim',
56 | email: 'will@email.com',
57 | avatar: '/avatars/04.png',
58 | },
59 | ] as const;
60 |
61 | type User = (typeof users)[number];
62 |
63 | export function CardsChat() {
64 | const [open, setOpen] = React.useState(false);
65 | const [selectedUsers, setSelectedUsers] = React.useState([]);
66 |
67 | const [messages, setMessages] = React.useState([
68 | {
69 | role: 'agent',
70 | content: 'Hi, how can I help you today?',
71 | },
72 | {
73 | role: 'user',
74 | content: "Hey, I'm having trouble with my account.",
75 | },
76 | {
77 | role: 'agent',
78 | content: 'What seems to be the problem?',
79 | },
80 | {
81 | role: 'user',
82 | content: "I can't log in.",
83 | },
84 | ]);
85 | const [input, setInput] = React.useState('');
86 | const inputLength = input.trim().length;
87 |
88 | return (
89 | <>
90 |
91 |
92 |
93 |
94 |
95 | OM
96 |
97 |
98 |
Sofia Davis
99 |
m@example.com
100 |
101 |
102 |
103 |
104 |
105 | setOpen(true)}
110 | >
111 |
112 | New message
113 |
114 |
115 | New message
116 |
117 |
118 |
119 |
120 |
121 | {messages.map((message, index) => (
122 |
131 | {message.content}
132 |
133 | ))}
134 |
135 |
136 |
137 |
165 |
166 |
167 |
168 |
169 |
170 | New message
171 |
172 | Invite a user to this thread. This will create a new group
173 | message.
174 |
175 |
176 |
177 |
178 |
179 | No users found.
180 |
181 | {users.map((user) => (
182 | {
186 | if (selectedUsers.includes(user)) {
187 | return setSelectedUsers(
188 | selectedUsers.filter(
189 | (selectedUser) => selectedUser !== user,
190 | ),
191 | );
192 | }
193 |
194 | return setSelectedUsers(
195 | [...users].filter((u) =>
196 | [...selectedUsers, user].includes(u),
197 | ),
198 | );
199 | }}
200 | >
201 |
202 |
203 | {user.name[0]}
204 |
205 |
206 |
207 | {user.name}
208 |
209 |
210 | {user.email}
211 |
212 |
213 | {selectedUsers.includes(user) ? (
214 |
215 | ) : null}
216 |
217 | ))}
218 |
219 |
220 |
221 |
222 | {selectedUsers.length > 0 ? (
223 |
224 | {selectedUsers.map((user) => (
225 |
229 |
230 | {user.name[0]}
231 |
232 | ))}
233 |
234 | ) : (
235 |
236 | Select users to add to this thread.
237 |
238 | )}
239 | {
242 | setOpen(false);
243 | }}
244 | >
245 | Continue
246 |
247 |
248 |
249 |
250 | >
251 | );
252 | }
253 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/cookie-settings.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardFooter,
7 | CardHeader,
8 | CardTitle,
9 | Label,
10 | Switch,
11 | } from '@rangeen/shadcn-ui';
12 |
13 | export function CardsCookieSettings() {
14 | return (
15 |
16 |
17 | Cookie Settings
18 | Manage your cookie settings here.
19 |
20 |
21 |
22 |
23 | Strictly Necessary
24 |
25 | These cookies are essential in order to use the website and use
26 | its features.
27 |
28 |
29 |
30 |
31 |
32 |
33 | Functional Cookies
34 |
35 | These cookies allow the website to provide personalized
36 | functionality.
37 |
38 |
39 |
40 |
41 |
42 |
43 | Performance Cookies
44 |
45 | These cookies help to improve the performance of the website.
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | Save preferences
54 |
55 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/create-account.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardFooter,
7 | CardHeader,
8 | CardTitle,
9 | Input,
10 | Label,
11 | } from '@rangeen/shadcn-ui';
12 | import { Chrome, Github } from 'lucide-react';
13 |
14 | export function CardsCreateAccount() {
15 | return (
16 |
17 |
18 | Create an account
19 |
20 | Enter your email below to create your account
21 |
22 |
23 |
24 |
25 |
26 |
27 | Github
28 |
29 |
30 |
31 | Google
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | Or continue with
41 |
42 |
43 |
44 |
45 | Email
46 |
47 |
48 |
49 | Password
50 |
51 |
52 |
53 |
54 | Create account
55 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/index.tsx:
--------------------------------------------------------------------------------
1 | import { CardsActivityGoal } from './activity-goal';
2 | import { CardsCalendar } from './calendar';
3 | import { CardsChat } from './chat';
4 | import { CardsCookieSettings } from './cookie-settings';
5 | import { CardsCreateAccount } from './create-account';
6 | import { CardsDataTable } from './data-table';
7 | import { CardsMetric } from './metric';
8 | import { CardsPaymentMethod } from './payment-method';
9 | import { CardsReportIssue } from './report-issue';
10 | import { CardsShare } from './share';
11 | import { CardsStats } from './stats';
12 | import { CardsTeamMembers } from './team-members';
13 |
14 | export default function CardsDemo() {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/metric.tsx:
--------------------------------------------------------------------------------
1 | import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardDescription,
7 | CardHeader,
8 | CardTitle,
9 | } from '@rangeen/shadcn-ui';
10 |
11 | const data = [
12 | {
13 | average: 400,
14 | today: 240,
15 | },
16 | {
17 | average: 300,
18 | today: 139,
19 | },
20 | {
21 | average: 200,
22 | today: 980,
23 | },
24 | {
25 | average: 278,
26 | today: 390,
27 | },
28 | {
29 | average: 189,
30 | today: 480,
31 | },
32 | {
33 | average: 239,
34 | today: 380,
35 | },
36 | {
37 | average: 349,
38 | today: 430,
39 | },
40 | ];
41 |
42 | export function CardsMetric() {
43 | return (
44 |
45 |
46 | Exercise Minutes
47 |
48 | Your exercise minutes are ahead of where you normally are.
49 |
50 |
51 |
52 |
53 |
54 |
63 | {
65 | if (active && payload && payload.length) {
66 | return (
67 |
68 |
69 |
70 |
71 | Average
72 |
73 |
74 | {payload[0].value}
75 |
76 |
77 |
78 |
79 | Today
80 |
81 |
82 | {payload[1].value}
83 |
84 |
85 |
86 |
87 | );
88 | }
89 |
90 | return null;
91 | }}
92 | />
93 |
108 |
122 |
123 |
124 |
125 |
126 |
127 | );
128 | }
129 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/payment-method.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardFooter,
7 | CardHeader,
8 | CardTitle,
9 | Input,
10 | Label,
11 | RadioGroup,
12 | RadioGroupItem,
13 | Select,
14 | SelectContent,
15 | SelectItem,
16 | SelectTrigger,
17 | SelectValue,
18 | } from '@rangeen/shadcn-ui';
19 | import { AppleIcon } from '../../../icons/apple-icon';
20 | import { PaypalIcon } from '../../../icons/paypal-icon';
21 |
22 | export function CardsPaymentMethod() {
23 | return (
24 |
25 |
26 | Payment Method
27 |
28 | Add a new payment method to your account.
29 |
30 |
31 |
32 |
33 |
34 |
40 |
44 |
54 |
55 |
56 |
57 | Card
58 |
59 |
60 |
61 |
62 |
68 |
72 |
73 | Paypal
74 |
75 |
76 |
77 |
78 |
84 |
88 |
89 | Apple
90 |
91 |
92 |
93 |
94 | Name
95 |
96 |
97 |
98 | City
99 |
100 |
101 |
102 | Card number
103 |
104 |
105 |
106 |
107 | Expires
108 |
109 |
110 |
111 |
112 |
113 | January
114 | February
115 | March
116 | April
117 | May
118 | June
119 | July
120 | August
121 | September
122 | October
123 | November
124 | December
125 |
126 |
127 |
128 |
129 | Year
130 |
131 |
132 |
133 |
134 |
135 | {Array.from({ length: 10 }, (_, i) => (
136 |
137 | {new Date().getFullYear() + i}
138 |
139 | ))}
140 |
141 |
142 |
143 |
144 | CVC
145 |
146 |
147 |
148 |
149 |
150 | Continue
151 |
152 |
153 | );
154 | }
155 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/report-issue.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {
4 | Button,
5 | Card,
6 | CardContent,
7 | CardDescription,
8 | CardFooter,
9 | CardHeader,
10 | CardTitle,
11 | Input,
12 | Label,
13 | Select,
14 | SelectContent,
15 | SelectItem,
16 | SelectTrigger,
17 | SelectValue,
18 | Textarea,
19 | } from '@rangeen/shadcn-ui';
20 |
21 | export function CardsReportIssue() {
22 | const id = React.useId();
23 |
24 | return (
25 |
26 |
27 | Report an issue
28 |
29 | What area are you having problems with?
30 |
31 |
32 |
33 |
34 |
35 | Area
36 |
37 |
38 |
39 |
40 |
41 | Team
42 | Billing
43 | Account
44 | Deployments
45 | Support
46 |
47 |
48 |
49 |
50 | Security Level
51 |
52 |
57 |
58 |
59 |
60 | Severity 1 (Highest)
61 | Severity 2
62 | Severity 3
63 | Severity 4 (Lowest)
64 |
65 |
66 |
67 |
68 |
69 | Subject
70 |
71 |
72 |
73 | Description
74 |
78 |
79 |
80 |
81 | Cancel
82 | Submit
83 |
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/share.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | Button,
6 | Card,
7 | CardContent,
8 | CardDescription,
9 | CardHeader,
10 | CardTitle,
11 | Input,
12 | Label,
13 | Select,
14 | SelectContent,
15 | SelectItem,
16 | SelectTrigger,
17 | SelectValue,
18 | Separator,
19 | } from '@rangeen/shadcn-ui';
20 |
21 | export function CardsShare() {
22 | return (
23 |
24 |
25 | Share this document
26 |
27 | Anyone with the link can view this document.
28 |
29 |
30 |
31 |
32 |
33 | Link
34 |
35 |
40 |
41 | Copy Link
42 |
43 |
44 |
45 |
46 |
People with access
47 |
48 |
49 |
50 |
51 |
52 | OM
53 |
54 |
55 |
56 | Olivia Martin
57 |
58 |
m@example.com
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | Can edit
67 | Can view
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | IN
76 |
77 |
78 |
79 | Isabella Nguyen
80 |
81 |
b@example.com
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 | Can edit
90 | Can view
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | SD
99 |
100 |
101 |
102 | Sofia Davis
103 |
104 |
p@example.com
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | Can edit
113 | Can view
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | );
122 | }
123 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/cards/stats.tsx:
--------------------------------------------------------------------------------
1 | import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from 'recharts';
2 |
3 | import { Card, CardContent, CardHeader, CardTitle } from '@rangeen/shadcn-ui';
4 |
5 | const data = [
6 | {
7 | revenue: 10400,
8 | subscription: 240,
9 | },
10 | {
11 | revenue: 14405,
12 | subscription: 300,
13 | },
14 | {
15 | revenue: 9400,
16 | subscription: 200,
17 | },
18 | {
19 | revenue: 8200,
20 | subscription: 278,
21 | },
22 | {
23 | revenue: 7000,
24 | subscription: 189,
25 | },
26 | {
27 | revenue: 9600,
28 | subscription: 239,
29 | },
30 | {
31 | revenue: 11244,
32 | subscription: 278,
33 | },
34 | {
35 | revenue: 26475,
36 | subscription: 189,
37 | },
38 | ];
39 |
40 | export function CardsStats() {
41 | return (
42 |
43 |
44 |
45 | Total Revenue
46 |
47 |
48 | $15,231.89
49 |
50 | +20.1% from last month
51 |
52 |
53 |
54 |
63 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | Subscriptions
85 |
86 |
87 | +2350
88 |
89 | +180.1% from last month
90 |
91 |
92 |
93 |
94 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/connect.tsx:
--------------------------------------------------------------------------------
1 | import { TypographyH3 } from '@rangeen/shadcn-ui';
2 | import { Newspaper } from '../../illustrations/newspaper';
3 |
4 | export const Connect = () => {
5 | return (
6 |
7 |
8 |
9 | Connect with world using colors
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/footer.tsx:
--------------------------------------------------------------------------------
1 | import { Button, buttonVariants } from '@rangeen/shadcn-ui';
2 | import { cn } from '@rangeen/shadcn-utils';
3 | import {
4 | GithubIcon,
5 | LinkedinIcon,
6 | TwitterIcon,
7 | YoutubeIcon,
8 | } from 'lucide-react';
9 |
10 | export const Footer = () => {
11 | return (
12 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/hero-header.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | AvatarFallback,
4 | AvatarImage,
5 | TypographyH1,
6 | TypographyLarge,
7 | TypographyMuted,
8 | TypographySmall,
9 | } from '@rangeen/shadcn-ui';
10 | import { Festivities } from '../../illustrations/festivities';
11 |
12 | export const HeroHeader = () => {
13 | return (
14 |
15 |
16 |
17 | Visualize the{' '}
18 |
19 | Rangs
20 |
21 |
22 |
23 | A place to celebrate the colors of life. Craft vibrant experiences,
24 | igniting inspiration with every button click.
25 |
26 |
27 | Rang (रंग) means color in Hindi.
28 |
29 |
30 |
31 |
32 |
33 |
37 | NA
38 |
39 |
40 | Infinite Inspiration!
41 |
42 | Explore a boundless spectrum of colors, sparking your imagination
43 | to new heights
44 |
45 |
46 |
47 |
48 |
49 |
50 |
54 |
55 | AB
56 |
57 |
58 |
59 | Expressive Creativity!
60 |
61 | Unleash your artistic vision with a diverse range of hues,
62 | allowing your designs to speak volumes
63 |
64 |
65 |
66 |
67 |
68 |
69 |
73 |
74 | NA
75 |
76 |
77 |
78 | Vibrant Compositions!
79 |
80 | Craft captivating visuals that resonate with energy and passion,
81 | infusing every project with dynamic flair
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/home-page.tsx:
--------------------------------------------------------------------------------
1 | import { Toolbar } from '../toolbar/toolbar';
2 | import CardsDemo from './cards';
3 | import { Connect } from './connect';
4 | import { Footer } from './footer';
5 | import { HeroHeader } from './hero-header';
6 |
7 | export const HomePage = () => {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | >
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/apps/core/src/components/home/index.ts:
--------------------------------------------------------------------------------
1 | export * from './home-page';
2 |
--------------------------------------------------------------------------------
/apps/core/src/components/navigation/navigation.tsx:
--------------------------------------------------------------------------------
1 | // import { buttonVariants } from '@rangeen/shadcn-ui';
2 |
3 | import { buttonVariants } from '@rangeen/shadcn-ui';
4 | import { Github, Globe } from 'lucide-react';
5 | import { RangeenLogo } from '../RangeenLogo';
6 |
7 | export const Navigation = () => {
8 | return (
9 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/apps/core/src/components/toolbar/code.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogHeader,
7 | DialogTitle,
8 | DialogTrigger,
9 | ScrollArea,
10 | buttonVariants,
11 | } from '@rangeen/shadcn-ui';
12 | import { cn } from '@rangeen/shadcn-utils';
13 | import { CheckIcon, CodeIcon, CopyIcon } from 'lucide-react';
14 | import { useState } from 'react';
15 | import { useThemeContext } from '../../core/theme/context';
16 | import { RangeenThemeSchema } from '../../core/theme/types';
17 | import { getCssVarName } from '../../core/theme/utils';
18 |
19 | export const Code = () => {
20 | const { rangeenTheme } = useThemeContext();
21 |
22 | const lightValues = Object.keys(rangeenTheme.light).map((key) => {
23 | const value = rangeenTheme.light[key as keyof RangeenThemeSchema];
24 | return [getCssVarName(key), value];
25 | });
26 |
27 | const darkValues = Object.keys(rangeenTheme.light).map((key) => {
28 | const value = rangeenTheme.light[key as keyof RangeenThemeSchema];
29 | return [`${getCssVarName(key)}-dark`, value];
30 | });
31 |
32 | const code = `
33 | :root {
34 | ${lightValues
35 | .map(([key, value]) => {
36 | return `\t\t${key}: ${value};`;
37 | })
38 | .join('\n')}
39 | }
40 |
41 | .dark {
42 | ${darkValues
43 | .map(([key, value]) => {
44 | return `\t\t${key}: ${value};`;
45 | })
46 | .join('\n')}
47 | }
48 | `;
49 |
50 | const [copied, setCopied] = useState(false);
51 |
52 | const handleCopy = () => {
53 | navigator.clipboard.writeText(code);
54 | setCopied(true);
55 | setTimeout(() => {
56 | setCopied(false);
57 | }, 2000);
58 | };
59 |
60 | return (
61 |
62 |
63 |
76 |
77 |
78 |
79 |
80 | Shadcn Theme
81 |
87 | Copy
88 | {copied ? (
89 |
90 | ) : (
91 |
92 | )}
93 |
94 |
95 |
96 |
97 | {code}
98 |
99 |
100 |
101 |
102 |
103 | );
104 | };
105 |
--------------------------------------------------------------------------------
/apps/core/src/components/toolbar/toolbar.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Separator } from '@rangeen/shadcn-ui';
2 | import { LightbulbIcon, MoonIcon } from 'lucide-react';
3 | import { useThemeContext } from '../../core/theme/context';
4 | import { ColorPicker } from '../color-picker/color-picker';
5 | import { Code } from './code';
6 |
7 | export const Toolbar = () => {
8 | const { primary, setPrimary, isDarkMode, setIsDarkMode } = useThemeContext();
9 |
10 | return (
11 |
12 |
13 |
14 |
15 | Toolbar
16 |
17 |
18 |
23 |
27 |
28 | setIsDarkMode(!isDarkMode)}
33 | >
34 | {isDarkMode && }
35 | {!isDarkMode && }
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/apps/core/src/core/app.tsx:
--------------------------------------------------------------------------------
1 | import { CoreRoutes } from './core-routes';
2 | import { ThemeProvider } from './theme/theme-provider';
3 |
4 | export function App() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/apps/core/src/core/core-layout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router-dom';
2 | import { Navigation } from '../components/navigation/navigation';
3 |
4 | export const CoreLayout = () => {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/apps/core/src/core/core-routes.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createBrowserRouter,
3 | RouteObject,
4 | RouterProvider,
5 | } from 'react-router-dom';
6 | import { HomePage } from '../components/home';
7 | import { CoreLayout } from './core-layout';
8 |
9 | const appRoutes: RouteObject[] = [
10 | {
11 | element: ,
12 | children: [{ path: '/', element: }],
13 | },
14 | ];
15 |
16 | const isGithubPages = import.meta.env.BASE_URL.includes(
17 | 'navnote.github.io/rangeen',
18 | );
19 |
20 | const router = createBrowserRouter([...appRoutes], {
21 | basename: isGithubPages ? '/rangeen/' : '/',
22 | });
23 |
24 | export function CoreRoutes() {
25 | return ;
26 | }
27 |
--------------------------------------------------------------------------------
/apps/core/src/core/theme/context.ts:
--------------------------------------------------------------------------------
1 | import React, { createContext } from 'react';
2 | import { RangeenTheme } from './types';
3 |
4 | export type ThemeContextType = {
5 | rangeenTheme: RangeenTheme;
6 | primary: string;
7 | setPrimary: (color: string) => void;
8 | isDarkMode: boolean;
9 | setIsDarkMode: (isDarkMode: boolean) => void;
10 | };
11 |
12 | export const ThemeContext = createContext({
13 | rangeenTheme: {} as RangeenTheme,
14 | primary: 'blue',
15 | // eslint-disable-next-line @typescript-eslint/no-empty-function
16 | setPrimary: (color: string) => {},
17 | isDarkMode: false,
18 | // eslint-disable-next-line @typescript-eslint/no-empty-function
19 | setIsDarkMode: (isDarkMode: boolean) => {},
20 | });
21 |
22 | export const useThemeContext = () => {
23 | const context = React.useContext(ThemeContext);
24 | if (context === undefined) {
25 | throw new Error('useThemeContext must be used within a ThemeProvider');
26 | }
27 | return context;
28 | };
29 |
--------------------------------------------------------------------------------
/apps/core/src/core/theme/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from 'react';
2 | import { ThemeContext, ThemeContextType } from './context';
3 |
4 | import {
5 | argbFromHex,
6 | themeFromSourceColor,
7 | } from '@material/material-color-utilities';
8 | import { RangeenThemeSchema } from './types';
9 | import { getCssVarName, transformMaterialThemeToRangeenTheme } from './utils';
10 |
11 | export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
12 | const [isDarkMode, setIsDarkMode] = useState(false);
13 | const [primary, setPrimary] = useState('#a66a54');
14 |
15 | const rangeenTheme = useMemo(() => {
16 | const materialTheme = themeFromSourceColor(argbFromHex(primary));
17 | return transformMaterialThemeToRangeenTheme(materialTheme);
18 | }, [primary]);
19 |
20 | useEffect(() => {
21 | // update css var --primary on :root
22 | Object.keys(rangeenTheme.light).forEach((key) => {
23 | const value = rangeenTheme.light[key as keyof RangeenThemeSchema];
24 | document.documentElement.style.setProperty(getCssVarName(key), value);
25 | });
26 |
27 | Object.keys(rangeenTheme.dark).forEach((key) => {
28 | const value = rangeenTheme.dark[key as keyof RangeenThemeSchema];
29 | document.documentElement.style.setProperty(
30 | `${getCssVarName(key)}-dark`,
31 | value,
32 | );
33 | });
34 |
35 | // add class dark to body based on isDarkMode
36 | if (isDarkMode) {
37 | document.body.classList.add('dark');
38 | } else {
39 | document.body.classList.remove('dark');
40 | }
41 | }, [rangeenTheme, isDarkMode]);
42 |
43 | const themeValue: ThemeContextType = {
44 | rangeenTheme,
45 | primary,
46 | setPrimary,
47 | isDarkMode,
48 | setIsDarkMode,
49 | };
50 |
51 | return (
52 | {children}
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/apps/core/src/core/theme/types.ts:
--------------------------------------------------------------------------------
1 | export type RangeenThemeSchema = {
2 | background: string;
3 | foreground: string;
4 | card: string;
5 | cardForeground: string;
6 | popover: string;
7 | popoverForeground: string;
8 | primary: string;
9 | primaryForeground: string;
10 | secondary: string;
11 | secondaryForeground: string;
12 | muted: string;
13 | mutedForeground: string;
14 | accent: string;
15 | accentForeground: string;
16 | destructive: string;
17 | destructiveForeground: string;
18 | border: string;
19 | input: string;
20 | ring: string;
21 | radius: string;
22 | };
23 |
24 | export type RangeenTheme = {
25 | light: RangeenThemeSchema;
26 | dark: RangeenThemeSchema;
27 | };
28 |
--------------------------------------------------------------------------------
/apps/core/src/core/theme/utils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Theme as MaterialTheme,
3 | hexFromArgb,
4 | } from '@material/material-color-utilities';
5 | import { RangeenTheme } from './types';
6 |
7 | export const getCssVarName = (str: string) => {
8 | return `--${str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
9 | };
10 |
11 | export const transformMaterialThemeToRangeenTheme = (
12 | materialTheme: MaterialTheme,
13 | ): RangeenTheme => {
14 | return {
15 | light: {
16 | background: `${hexFromArgb(materialTheme.schemes.light.background)}`,
17 | foreground: `${hexFromArgb(materialTheme.schemes.light.onBackground)}`,
18 | card: `${hexFromArgb(materialTheme.schemes.light.surface)}`,
19 | cardForeground: `${hexFromArgb(materialTheme.schemes.light.onSurface)}`,
20 | popover: `${hexFromArgb(materialTheme.schemes.light.surface)}`,
21 | popoverForeground: `${hexFromArgb(
22 | materialTheme.schemes.light.onSurface,
23 | )}`,
24 | primary: `${hexFromArgb(materialTheme.schemes.light.primary)}`,
25 | primaryForeground: `${hexFromArgb(
26 | materialTheme.schemes.light.onPrimary,
27 | )}`,
28 | secondary: `${hexFromArgb(materialTheme.schemes.light.secondary)}`,
29 | secondaryForeground: `${hexFromArgb(
30 | materialTheme.schemes.light.onSurface,
31 | )}`,
32 | muted: `${hexFromArgb(materialTheme.schemes.light.surfaceVariant)}`,
33 | mutedForeground: `${hexFromArgb(
34 | materialTheme.schemes.light.onSurfaceVariant,
35 | )}`,
36 | accent: `${hexFromArgb(materialTheme.schemes.light.inverseOnSurface)}`,
37 | accentForeground: `${hexFromArgb(
38 | materialTheme.schemes.light.inverseSurface,
39 | )}`,
40 | destructive: `${hexFromArgb(materialTheme.schemes.light.error)}`,
41 | destructiveForeground: `${hexFromArgb(
42 | materialTheme.schemes.light.onError,
43 | )}`,
44 | border: `${hexFromArgb(materialTheme.schemes.light.surfaceVariant)}`,
45 | input: `${hexFromArgb(materialTheme.schemes.light.surfaceVariant)}`,
46 | ring: `${hexFromArgb(materialTheme.schemes.light.primaryContainer)}`,
47 | radius: `0.5rem`,
48 | },
49 | dark: {
50 | background: `${hexFromArgb(materialTheme.schemes.dark.background)}`,
51 | foreground: `${hexFromArgb(materialTheme.schemes.dark.onBackground)}`,
52 | card: `${hexFromArgb(materialTheme.schemes.dark.surface)}`,
53 | cardForeground: `${hexFromArgb(materialTheme.schemes.dark.onSurface)}`,
54 | popover: `${hexFromArgb(materialTheme.schemes.dark.surface)}`,
55 | popoverForeground: `${hexFromArgb(materialTheme.schemes.dark.onSurface)}`,
56 | primary: `${hexFromArgb(materialTheme.schemes.dark.primary)}`,
57 | primaryForeground: `${hexFromArgb(materialTheme.schemes.dark.onPrimary)}`,
58 | secondary: `${hexFromArgb(materialTheme.schemes.dark.secondary)}`,
59 | secondaryForeground: `${hexFromArgb(
60 | materialTheme.schemes.dark.onSurface,
61 | )}`,
62 | muted: `${hexFromArgb(materialTheme.schemes.dark.surfaceVariant)}`,
63 | mutedForeground: `${hexFromArgb(
64 | materialTheme.schemes.dark.onSurfaceVariant,
65 | )}`,
66 | accent: `${hexFromArgb(materialTheme.schemes.dark.inverseOnSurface)}`,
67 | accentForeground: `${hexFromArgb(
68 | materialTheme.schemes.dark.inverseSurface,
69 | )}`,
70 | destructive: `${hexFromArgb(materialTheme.schemes.dark.error)}`,
71 | destructiveForeground: `${hexFromArgb(
72 | materialTheme.schemes.dark.onError,
73 | )}`,
74 | border: `${hexFromArgb(materialTheme.schemes.dark.surfaceVariant)}`,
75 | input: `${hexFromArgb(materialTheme.schemes.dark.surfaceVariant)}`,
76 | ring: `${hexFromArgb(materialTheme.schemes.dark.primaryContainer)}`,
77 | radius: `0.5rem`,
78 | },
79 | };
80 | };
81 |
--------------------------------------------------------------------------------
/apps/core/src/icons/apple-icon.tsx:
--------------------------------------------------------------------------------
1 | export const AppleIcon = (props: React.SVGProps) => (
2 |
3 |
7 |
8 | );
9 |
--------------------------------------------------------------------------------
/apps/core/src/icons/paypal-icon.tsx:
--------------------------------------------------------------------------------
1 | export const PaypalIcon = (props: React.SVGProps) => (
2 |
3 |
7 |
8 | );
9 |
--------------------------------------------------------------------------------
/apps/core/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react';
2 | import * as ReactDOM from 'react-dom/client';
3 |
4 | import App from './core/app';
5 |
6 | const root = ReactDOM.createRoot(
7 | document.getElementById('root') as HTMLElement,
8 | );
9 | root.render(
10 |
11 |
12 | ,
13 | );
14 |
--------------------------------------------------------------------------------
/apps/core/src/styles.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Don't forget to update your APPs global.css to include this file!
3 | */
4 | @import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
5 | @tailwind base;
6 | @tailwind components;
7 | @tailwind utilities;
8 |
9 | @layer base {
10 | :root {
11 | --background: hsl(240 20% 97%);
12 | --foreground: hsl(249 20% 7%);
13 | --card: hsl(240 20% 97%);
14 | --card-foreground: hsl(249 20% 7%);
15 | --popover: hsl(240 20% 97%);
16 | --popover-foreground: hsl(249 20% 7%);
17 | --primary: hsl(220 59% 54%);
18 | --primary-foreground: hsl(240 20% 97%);
19 | --secondary: hsl(202 29% 66%);
20 | --secondary-foreground: hsl(249 20% 7%);
21 | --muted: hsl(240 20% 20%);
22 | --muted-foreground: hsl(250 20% 70%);
23 | --accent: hsl(197 21% 46%);
24 | --accent-foreground: hsl(249 20% 7%);
25 | --destructive: hsl(0 85% 60%);
26 | --destructive-foreground: hsl(249 20% 7%);
27 | --border: hsl(240 20% 20%);
28 | --input: hsl(240 20% 20%);
29 | --ring: hsl(197 21% 40%);
30 | --radius: 0.5rem;
31 |
32 | --background-dark: hsl(240 20% 3%);
33 | --foreground-dark: hsl(249 20% 93%);
34 | --card-dark: hsl(240 20% 3%);
35 | --card-foreground-dark: hsl(249 20% 93%);
36 | --popover-dark: hsl(240 20% 3%);
37 | --popover-foreground-dark: hsl(249 20% 93%);
38 | --primary-dark: hsl(220 59% 46%);
39 | --primary-foreground-dark: hsl(249 20% 93%);
40 | --secondary-dark: hsl(203 29% 34%);
41 | --secondary-foreground-dark: hsl(249 20% 93%);
42 | --muted-dark: hsl(240 20% 80%);
43 | --muted-foreground-dark: hsl(249 20% 93%);
44 | --accent-dark: hsl(197 21% 54%);
45 | --accent-foreground-dark: hsl(240 20% 3%);
46 | --destructive-dark: hsl(0 62% 30%);
47 | --destructive-foreground-dark: hsl(251 22% 10%);
48 | --border-dark: hsl(240 20% 60%);
49 | --input-dark: hsl(240 20% 80%);
50 | --ring-dark: hsl(197 21% 60%);
51 | }
52 |
53 | .dark {
54 | --background: var(--background-dark);
55 | --foreground: var(--foreground-dark);
56 | --card: var(--card-dark);
57 | --card-foreground: var(--card-foreground-dark);
58 | --popover: var(--popover-dark);
59 | --popover-foreground: var(--popover-foreground-dark);
60 | --primary: var(--primary-dark);
61 | --primary-foreground: var(--primary-foreground-dark);
62 | --secondary: var(--secondary-dark);
63 | --secondary-foreground: var(--secondary-foreground-dark);
64 | --muted: var(--muted-dark);
65 | --muted-foreground: var(--muted-foreground-dark);
66 | --accent: var(--accent-dark);
67 | --accent-foreground: var(--accent-foreground-dark);
68 | --destructive: var(--destructive-dark);
69 | --destructive-foreground: var(--destructive-foreground-dark);
70 | --border: var(--border-dark);
71 | --input: var(--input-dark);
72 | --ring: var(--ring-dark);
73 | }
74 | }
75 |
76 | @layer base {
77 | html {
78 | font-family: 'Sen', system-ui, sans-serif;
79 | zoom: 0.9;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/apps/core/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
2 | const { join } = require('path');
3 | const colors = require('tailwindcss/colors');
4 |
5 | /** @type {import('tailwindcss').Config} */
6 | module.exports = {
7 | darkMode: ['class'],
8 | content: [
9 | join(
10 | __dirname,
11 | '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
12 | ),
13 | ...createGlobPatternsForDependencies(__dirname),
14 | ],
15 | theme: {
16 | container: {
17 | center: true,
18 | padding: '2rem',
19 | },
20 | colors: {
21 | transparent: 'transparent',
22 | current: 'currentColor',
23 | black: colors.black,
24 | white: colors.white,
25 | gray: colors.gray,
26 | border: 'var(--border)',
27 | input: 'var(--input)',
28 | ring: 'var(--ring)',
29 | background: 'var(--background)',
30 | foreground: 'var(--foreground)',
31 | primary: {
32 | DEFAULT: 'var(--primary)',
33 | foreground: 'var(--primary-foreground)',
34 | },
35 | secondary: {
36 | DEFAULT: 'var(--secondary)',
37 | foreground: 'var(--secondary-foreground)',
38 | },
39 | destructive: {
40 | DEFAULT: 'var(--destructive)',
41 | foreground: 'var(--destructive-foreground)',
42 | },
43 | muted: {
44 | DEFAULT: 'var(--muted)',
45 | foreground: 'var(--muted-foreground)',
46 | },
47 | accent: {
48 | DEFAULT: 'var(--accent)',
49 | foreground: 'var(--accent-foreground)',
50 | },
51 | popover: {
52 | DEFAULT: 'var(--popover)',
53 | foreground: 'var(--popover-foreground)',
54 | },
55 | card: {
56 | DEFAULT: 'var(--card)',
57 | foreground: 'var(--card-foreground)',
58 | },
59 | },
60 | extend: {
61 | borderRadius: {
62 | lg: `var(--radius)`,
63 | md: `calc(var(--radius) - 2px)`,
64 | sm: 'calc(var(--radius) - 4px)',
65 | },
66 | keyframes: {
67 | 'accordion-down': {
68 | from: { height: '0' },
69 | to: { height: 'var(--radix-accordion-content-height)' },
70 | },
71 | 'accordion-up': {
72 | from: { height: 'var(--radix-accordion-content-height)' },
73 | to: { height: '0' },
74 | },
75 | },
76 | animation: {
77 | 'accordion-down': 'accordion-down 0.2s ease-out',
78 | 'accordion-up': 'accordion-up 0.2s ease-out',
79 | },
80 | },
81 | },
82 | plugins: [require('tailwindcss-animate')],
83 | };
84 |
--------------------------------------------------------------------------------
/apps/core/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": [
6 | "node",
7 | "@nx/react/typings/cssmodule.d.ts",
8 | "@nx/react/typings/image.d.ts",
9 | "vite/client"
10 | ]
11 | },
12 | "exclude": [
13 | "src/**/*.spec.ts",
14 | "src/**/*.test.ts",
15 | "src/**/*.spec.tsx",
16 | "src/**/*.test.tsx",
17 | "src/**/*.spec.js",
18 | "src/**/*.test.js",
19 | "src/**/*.spec.jsx",
20 | "src/**/*.test.jsx"
21 | ],
22 | "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
23 | }
24 |
--------------------------------------------------------------------------------
/apps/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "allowJs": false,
5 | "esModuleInterop": false,
6 | "allowSyntheticDefaultImports": true,
7 | "strict": true,
8 | "types": ["vite/client"]
9 | },
10 | "files": [],
11 | "include": [],
12 | "references": [
13 | {
14 | "path": "./tsconfig.app.json"
15 | }
16 | ],
17 | "extends": "../../tsconfig.base.json"
18 | }
19 |
--------------------------------------------------------------------------------
/apps/core/vite.config.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
3 | import react from '@vitejs/plugin-react-swc';
4 | import { defineConfig } from 'vite';
5 |
6 | export default defineConfig({
7 | root: __dirname,
8 | cacheDir: '../../node_modules/.vite/apps/core',
9 |
10 | server: {
11 | port: 4200,
12 | host: 'localhost',
13 | },
14 |
15 | preview: {
16 | port: 4300,
17 | host: 'localhost',
18 | },
19 |
20 | plugins: [react(), nxViteTsPaths()],
21 |
22 | // Uncomment this if you are using workers.
23 | // worker: {
24 | // plugins: [ nxViteTsPaths() ],
25 | // },
26 |
27 | build: {
28 | outDir: '../../dist/apps/core',
29 | reportCompressedSize: true,
30 | commonjsOptions: {
31 | transformMixedEsModules: true,
32 | },
33 | },
34 |
35 | define: {
36 | 'import.meta.vitest': undefined,
37 | },
38 | });
39 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": false,
5 | "tailwind": {
6 | "config": "libs/shadcn-utils/tailwind.config.js",
7 | "css": "libs/shadcn-utils/global.css",
8 | "baseColor": "neutral",
9 | "cssVariables": true
10 | },
11 | "aliases": {
12 | "components": "@rangeen/shadcn-ui/",
13 | "utils": "@rangeen/shadcn-utils"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@nx/react/babel",
5 | {
6 | "runtime": "automatic",
7 | "useBuiltIns": "usage"
8 | }
9 | ]
10 | ],
11 | "plugins": []
12 | }
13 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "rules": {}
8 | },
9 | {
10 | "files": ["*.ts", "*.tsx"],
11 | "rules": {}
12 | },
13 | {
14 | "files": ["*.js", "*.jsx"],
15 | "rules": {}
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/README.md:
--------------------------------------------------------------------------------
1 | # shadcn-ui
2 |
3 | This library was generated with [Nx](https://nx.dev).
4 |
5 | ## Running unit tests
6 |
7 | Run `nx test shadcn-ui` to execute the unit tests via [Jest](https://jestjs.io).
8 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shadcn-ui",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "libs/shadcn-ui/src",
5 | "projectType": "library",
6 | "tags": [],
7 | "targets": {
8 | "add": {
9 | "executor": "@nx-extend/shadcn-ui:add"
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './ui/accordion';
2 | export * from './ui/alert';
3 | export * from './ui/alert-dialog';
4 | export * from './ui/aspect-ratio';
5 | export * from './ui/avatar';
6 | export * from './ui/badge';
7 | export * from './ui/button';
8 | export * from './ui/calendar';
9 | export * from './ui/card';
10 | export * from './ui/checkbox';
11 | export * from './ui/collapsible';
12 | export * from './ui/command';
13 | export * from './ui/context-menu';
14 | export * from './ui/dialog';
15 | export * from './ui/dropdown-menu';
16 | export * from './ui/form';
17 | export * from './ui/hover-card';
18 | export * from './ui/input';
19 | export * from './ui/label';
20 | export * from './ui/menubar';
21 | export * from './ui/navigation-menu';
22 | export * from './ui/pagination';
23 | export * from './ui/popover';
24 | export * from './ui/progress';
25 | export * from './ui/radio-group';
26 | export * from './ui/scroll-area';
27 | export * from './ui/select';
28 | export * from './ui/separator';
29 | export * from './ui/sheet';
30 | export * from './ui/skeleton';
31 | export * from './ui/slider';
32 | export * from './ui/switch';
33 | export * from './ui/table';
34 | export * from './ui/tabs';
35 | export * from './ui/textarea';
36 | export * from './ui/toast';
37 | export * from './ui/toggle';
38 | export * from './ui/toggle-group';
39 | export * from './ui/tooltip';
40 | export * from './ui/typography';
41 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | import * as AccordionPrimitive from '@radix-ui/react-accordion';
2 | import { ChevronDown } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const Accordion = AccordionPrimitive.Root;
8 |
9 | const AccordionItem = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
18 | ));
19 | AccordionItem.displayName = 'AccordionItem';
20 |
21 | const AccordionTrigger = React.forwardRef<
22 | React.ElementRef,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, children, ...props }, ref) => (
25 |
26 | svg]:rotate-180',
30 | className,
31 | )}
32 | {...props}
33 | >
34 | {children}
35 |
36 |
37 |
38 | ));
39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
40 |
41 | const AccordionContent = React.forwardRef<
42 | React.ElementRef,
43 | React.ComponentPropsWithoutRef
44 | >(({ className, children, ...props }, ref) => (
45 |
50 | {children}
51 |
52 | ));
53 |
54 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
55 |
56 | export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
57 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 | import { buttonVariants } from './button';
6 |
7 | const AlertDialog = AlertDialogPrimitive.Root;
8 |
9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
10 |
11 | const AlertDialogPortal = AlertDialogPrimitive.Portal;
12 |
13 | const AlertDialogOverlay = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef
16 | >(({ className, ...props }, ref) => (
17 |
25 | ));
26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
27 |
28 | const AlertDialogContent = React.forwardRef<
29 | React.ElementRef,
30 | React.ComponentPropsWithoutRef
31 | >(({ className, ...props }, ref) => (
32 |
33 |
34 |
42 |
43 | ));
44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
45 |
46 | const AlertDialogHeader = ({
47 | className,
48 | ...props
49 | }: React.HTMLAttributes) => (
50 |
57 | );
58 | AlertDialogHeader.displayName = 'AlertDialogHeader';
59 |
60 | const AlertDialogFooter = ({
61 | className,
62 | ...props
63 | }: React.HTMLAttributes) => (
64 |
71 | );
72 | AlertDialogFooter.displayName = 'AlertDialogFooter';
73 |
74 | const AlertDialogTitle = React.forwardRef<
75 | React.ElementRef,
76 | React.ComponentPropsWithoutRef
77 | >(({ className, ...props }, ref) => (
78 |
83 | ));
84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
85 |
86 | const AlertDialogDescription = React.forwardRef<
87 | React.ElementRef,
88 | React.ComponentPropsWithoutRef
89 | >(({ className, ...props }, ref) => (
90 |
95 | ));
96 | AlertDialogDescription.displayName =
97 | AlertDialogPrimitive.Description.displayName;
98 |
99 | const AlertDialogAction = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ));
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
110 |
111 | const AlertDialogCancel = React.forwardRef<
112 | React.ElementRef,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 |
124 | ));
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
126 |
127 | export {
128 | AlertDialog,
129 | AlertDialogAction,
130 | AlertDialogCancel,
131 | AlertDialogContent,
132 | AlertDialogDescription,
133 | AlertDialogFooter,
134 | AlertDialogHeader,
135 | AlertDialogOverlay,
136 | AlertDialogPortal,
137 | AlertDialogTitle,
138 | AlertDialogTrigger,
139 | };
140 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from 'class-variance-authority';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const alertVariants = cva(
7 | 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
8 | {
9 | variants: {
10 | variant: {
11 | default: 'bg-background text-foreground',
12 | destructive:
13 | 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
14 | },
15 | },
16 | defaultVariants: {
17 | variant: 'default',
18 | },
19 | },
20 | );
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes & VariantProps
25 | >(({ className, variant, ...props }, ref) => (
26 |
32 | ));
33 | Alert.displayName = 'Alert';
34 |
35 | const AlertTitle = React.forwardRef<
36 | HTMLParagraphElement,
37 | React.HTMLAttributes
38 | >(({ className, ...props }, ref) => (
39 |
44 | ));
45 | AlertTitle.displayName = 'AlertTitle';
46 |
47 | const AlertDescription = React.forwardRef<
48 | HTMLParagraphElement,
49 | React.HTMLAttributes
50 | >(({ className, ...props }, ref) => (
51 |
56 | ));
57 | AlertDescription.displayName = 'AlertDescription';
58 |
59 | export { Alert, AlertDescription, AlertTitle };
60 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
2 |
3 | const AspectRatio = AspectRatioPrimitive.Root;
4 |
5 | export { AspectRatio };
6 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | import * as AvatarPrimitive from '@radix-ui/react-avatar';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Avatar = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
18 | ));
19 | Avatar.displayName = AvatarPrimitive.Root.displayName;
20 |
21 | const AvatarImage = React.forwardRef<
22 | React.ElementRef,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, ...props }, ref) => (
25 |
30 | ));
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName;
32 |
33 | const AvatarFallback = React.forwardRef<
34 | React.ElementRef,
35 | React.ComponentPropsWithoutRef
36 | >(({ className, ...props }, ref) => (
37 |
45 | ));
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
47 |
48 | export { Avatar, AvatarFallback, AvatarImage };
49 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from 'class-variance-authority';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const badgeVariants = cva(
7 | 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
13 | secondary:
14 | 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
15 | destructive:
16 | 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
17 | outline: 'text-foreground',
18 | },
19 | },
20 | defaultVariants: {
21 | variant: 'default',
22 | },
23 | },
24 | );
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes,
28 | VariantProps {}
29 |
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 | return (
32 |
33 | );
34 | }
35 |
36 | export { Badge, badgeVariants };
37 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from '@radix-ui/react-slot';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const buttonVariants = cva(
8 | 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 | destructive:
14 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15 | outline:
16 | 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17 | secondary:
18 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 | ghost: 'hover:bg-accent hover:text-accent-foreground',
20 | link: 'text-primary underline-offset-4 hover:underline',
21 | },
22 | size: {
23 | default: 'h-10 px-4 py-2',
24 | sm: 'h-9 rounded-md px-3',
25 | lg: 'h-11 rounded-md px-8',
26 | icon: 'h-10 w-10',
27 | },
28 | },
29 | defaultVariants: {
30 | variant: 'default',
31 | size: 'default',
32 | },
33 | },
34 | );
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes,
38 | VariantProps {
39 | asChild?: boolean;
40 | }
41 |
42 | const Button = React.forwardRef(
43 | ({ className, variant, size, asChild = false, ...props }, ref) => {
44 | const Comp = asChild ? Slot : 'button';
45 | return (
46 |
51 | );
52 | },
53 | );
54 | Button.displayName = 'Button';
55 |
56 | export { Button, buttonVariants };
57 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronLeft, ChevronRight } from 'lucide-react';
2 | import * as React from 'react';
3 | import { DayPicker } from 'react-day-picker';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 | import { buttonVariants } from './button';
7 |
8 | export type CalendarProps = React.ComponentProps;
9 |
10 | function Calendar({
11 | className,
12 | classNames,
13 | showOutsideDays = true,
14 | ...props
15 | }: CalendarProps) {
16 | return (
17 | ,
56 | IconRight: ({ ...props }) => ,
57 | }}
58 | {...props}
59 | />
60 | );
61 | }
62 | Calendar.displayName = 'Calendar';
63 |
64 | export { Calendar };
65 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@rangeen/shadcn-utils';
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes
8 | >(({ className, ...props }, ref) => (
9 |
17 | ));
18 | Card.displayName = 'Card';
19 |
20 | const CardHeader = React.forwardRef<
21 | HTMLDivElement,
22 | React.HTMLAttributes
23 | >(({ className, ...props }, ref) => (
24 |
29 | ));
30 | CardHeader.displayName = 'CardHeader';
31 |
32 | const CardTitle = React.forwardRef<
33 | HTMLParagraphElement,
34 | React.HTMLAttributes
35 | >(({ className, ...props }, ref) => (
36 |
44 | ));
45 | CardTitle.displayName = 'CardTitle';
46 |
47 | const CardDescription = React.forwardRef<
48 | HTMLParagraphElement,
49 | React.HTMLAttributes
50 | >(({ className, ...props }, ref) => (
51 |
56 | ));
57 | CardDescription.displayName = 'CardDescription';
58 |
59 | const CardContent = React.forwardRef<
60 | HTMLDivElement,
61 | React.HTMLAttributes
62 | >(({ className, ...props }, ref) => (
63 |
64 | ));
65 | CardContent.displayName = 'CardContent';
66 |
67 | const CardFooter = React.forwardRef<
68 | HTMLDivElement,
69 | React.HTMLAttributes
70 | >(({ className, ...props }, ref) => (
71 |
76 | ));
77 | CardFooter.displayName = 'CardFooter';
78 |
79 | export {
80 | Card,
81 | CardContent,
82 | CardDescription,
83 | CardFooter,
84 | CardHeader,
85 | CardTitle,
86 | };
87 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
2 | import { Check } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const Checkbox = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, ...props }, ref) => (
11 |
19 |
22 |
23 |
24 |
25 | ));
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName;
27 |
28 | export { Checkbox };
29 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
2 |
3 | const Collapsible = CollapsiblePrimitive.Root;
4 |
5 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
6 |
7 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
8 |
9 | export { Collapsible, CollapsibleContent, CollapsibleTrigger };
10 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/command.tsx:
--------------------------------------------------------------------------------
1 | import { type DialogProps } from '@radix-ui/react-dialog';
2 | import { Command as CommandPrimitive } from 'cmdk';
3 | import { Search } from 'lucide-react';
4 | import * as React from 'react';
5 |
6 | import { cn } from '@rangeen/shadcn-utils';
7 | import { Dialog, DialogContent } from './dialog';
8 |
9 | const Command = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 | ));
22 | Command.displayName = CommandPrimitive.displayName;
23 |
24 | type CommandDialogProps = DialogProps;
25 |
26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
27 | return (
28 |
29 |
30 |
31 | {children}
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | const CommandInput = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
43 |
44 |
52 |
53 | ));
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName;
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
66 | ));
67 |
68 | CommandList.displayName = CommandPrimitive.List.displayName;
69 |
70 | const CommandEmpty = React.forwardRef<
71 | React.ElementRef,
72 | React.ComponentPropsWithoutRef
73 | >((props, ref) => (
74 |
79 | ));
80 |
81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
82 |
83 | const CommandGroup = React.forwardRef<
84 | React.ElementRef,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 |
95 | ));
96 |
97 | CommandGroup.displayName = CommandPrimitive.Group.displayName;
98 |
99 | const CommandSeparator = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ));
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
110 |
111 | const CommandItem = React.forwardRef<
112 | React.ElementRef,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 |
123 | ));
124 |
125 | CommandItem.displayName = CommandPrimitive.Item.displayName;
126 |
127 | const CommandShortcut = ({
128 | className,
129 | ...props
130 | }: React.HTMLAttributes) => {
131 | return (
132 |
139 | );
140 | };
141 | CommandShortcut.displayName = 'CommandShortcut';
142 |
143 | export {
144 | Command,
145 | CommandDialog,
146 | CommandEmpty,
147 | CommandGroup,
148 | CommandInput,
149 | CommandItem,
150 | CommandList,
151 | CommandSeparator,
152 | CommandShortcut,
153 | };
154 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/context-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
2 | import { Check, ChevronRight, Circle } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const ContextMenu = ContextMenuPrimitive.Root;
8 |
9 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
10 |
11 | const ContextMenuGroup = ContextMenuPrimitive.Group;
12 |
13 | const ContextMenuPortal = ContextMenuPrimitive.Portal;
14 |
15 | const ContextMenuSub = ContextMenuPrimitive.Sub;
16 |
17 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
18 |
19 | const ContextMenuSubTrigger = React.forwardRef<
20 | React.ElementRef,
21 | React.ComponentPropsWithoutRef & {
22 | inset?: boolean;
23 | }
24 | >(({ className, inset, children, ...props }, ref) => (
25 |
34 | {children}
35 |
36 |
37 | ));
38 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
39 |
40 | const ContextMenuSubContent = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 | ));
53 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
54 |
55 | const ContextMenuContent = React.forwardRef<
56 | React.ElementRef,
57 | React.ComponentPropsWithoutRef
58 | >(({ className, ...props }, ref) => (
59 |
60 |
68 |
69 | ));
70 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
71 |
72 | const ContextMenuItem = React.forwardRef<
73 | React.ElementRef,
74 | React.ComponentPropsWithoutRef & {
75 | inset?: boolean;
76 | }
77 | >(({ className, inset, ...props }, ref) => (
78 |
87 | ));
88 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
89 |
90 | const ContextMenuCheckboxItem = React.forwardRef<
91 | React.ElementRef,
92 | React.ComponentPropsWithoutRef
93 | >(({ className, children, checked, ...props }, ref) => (
94 |
103 |
104 |
105 |
106 |
107 |
108 | {children}
109 |
110 | ));
111 | ContextMenuCheckboxItem.displayName =
112 | ContextMenuPrimitive.CheckboxItem.displayName;
113 |
114 | const ContextMenuRadioItem = React.forwardRef<
115 | React.ElementRef,
116 | React.ComponentPropsWithoutRef
117 | >(({ className, children, ...props }, ref) => (
118 |
126 |
127 |
128 |
129 |
130 |
131 | {children}
132 |
133 | ));
134 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
135 |
136 | const ContextMenuLabel = React.forwardRef<
137 | React.ElementRef,
138 | React.ComponentPropsWithoutRef & {
139 | inset?: boolean;
140 | }
141 | >(({ className, inset, ...props }, ref) => (
142 |
151 | ));
152 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
153 |
154 | const ContextMenuSeparator = React.forwardRef<
155 | React.ElementRef,
156 | React.ComponentPropsWithoutRef
157 | >(({ className, ...props }, ref) => (
158 |
163 | ));
164 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
165 |
166 | const ContextMenuShortcut = ({
167 | className,
168 | ...props
169 | }: React.HTMLAttributes) => {
170 | return (
171 |
178 | );
179 | };
180 | ContextMenuShortcut.displayName = 'ContextMenuShortcut';
181 |
182 | export {
183 | ContextMenu,
184 | ContextMenuCheckboxItem,
185 | ContextMenuContent,
186 | ContextMenuGroup,
187 | ContextMenuItem,
188 | ContextMenuLabel,
189 | ContextMenuPortal,
190 | ContextMenuRadioGroup,
191 | ContextMenuRadioItem,
192 | ContextMenuSeparator,
193 | ContextMenuShortcut,
194 | ContextMenuSub,
195 | ContextMenuSubContent,
196 | ContextMenuSubTrigger,
197 | ContextMenuTrigger,
198 | };
199 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as DialogPrimitive from '@radix-ui/react-dialog';
2 | import { X } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const Dialog = DialogPrimitive.Root;
8 |
9 | const DialogTrigger = DialogPrimitive.Trigger;
10 |
11 | const DialogPortal = DialogPrimitive.Portal;
12 |
13 | const DialogClose = DialogPrimitive.Close;
14 |
15 | const DialogOverlay = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, ...props }, ref) => (
19 |
27 | ));
28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
29 |
30 | const DialogContent = React.forwardRef<
31 | React.ElementRef,
32 | React.ComponentPropsWithoutRef
33 | >(({ className, children, ...props }, ref) => (
34 |
35 |
36 |
44 | {children}
45 |
46 |
47 | Close
48 |
49 |
50 |
51 | ));
52 | DialogContent.displayName = DialogPrimitive.Content.displayName;
53 |
54 | const DialogHeader = ({
55 | className,
56 | ...props
57 | }: React.HTMLAttributes) => (
58 |
65 | );
66 | DialogHeader.displayName = 'DialogHeader';
67 |
68 | const DialogFooter = ({
69 | className,
70 | ...props
71 | }: React.HTMLAttributes) => (
72 |
79 | );
80 | DialogFooter.displayName = 'DialogFooter';
81 |
82 | const DialogTitle = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef
85 | >(({ className, ...props }, ref) => (
86 |
94 | ));
95 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
96 |
97 | const DialogDescription = React.forwardRef<
98 | React.ElementRef,
99 | React.ComponentPropsWithoutRef
100 | >(({ className, ...props }, ref) => (
101 |
106 | ));
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
108 |
109 | export {
110 | Dialog,
111 | DialogClose,
112 | DialogContent,
113 | DialogDescription,
114 | DialogFooter,
115 | DialogHeader,
116 | DialogOverlay,
117 | DialogPortal,
118 | DialogTitle,
119 | DialogTrigger,
120 | };
121 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
2 | import { Check, ChevronRight, Circle } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const DropdownMenu = DropdownMenuPrimitive.Root;
8 |
9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
10 |
11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
12 |
13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
14 |
15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
16 |
17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
18 |
19 | const DropdownMenuSubTrigger = React.forwardRef<
20 | React.ElementRef,
21 | React.ComponentPropsWithoutRef & {
22 | inset?: boolean;
23 | }
24 | >(({ className, inset, children, ...props }, ref) => (
25 |
34 | {children}
35 |
36 |
37 | ));
38 | DropdownMenuSubTrigger.displayName =
39 | DropdownMenuPrimitive.SubTrigger.displayName;
40 |
41 | const DropdownMenuSubContent = React.forwardRef<
42 | React.ElementRef,
43 | React.ComponentPropsWithoutRef
44 | >(({ className, ...props }, ref) => (
45 |
53 | ));
54 | DropdownMenuSubContent.displayName =
55 | DropdownMenuPrimitive.SubContent.displayName;
56 |
57 | const DropdownMenuContent = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, sideOffset = 4, ...props }, ref) => (
61 |
62 |
71 |
72 | ));
73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
74 |
75 | const DropdownMenuItem = React.forwardRef<
76 | React.ElementRef,
77 | React.ComponentPropsWithoutRef & {
78 | inset?: boolean;
79 | }
80 | >(({ className, inset, ...props }, ref) => (
81 |
90 | ));
91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
92 |
93 | const DropdownMenuCheckboxItem = React.forwardRef<
94 | React.ElementRef,
95 | React.ComponentPropsWithoutRef
96 | >(({ className, children, checked, ...props }, ref) => (
97 |
106 |
107 |
108 |
109 |
110 |
111 | {children}
112 |
113 | ));
114 | DropdownMenuCheckboxItem.displayName =
115 | DropdownMenuPrimitive.CheckboxItem.displayName;
116 |
117 | const DropdownMenuRadioItem = React.forwardRef<
118 | React.ElementRef,
119 | React.ComponentPropsWithoutRef
120 | >(({ className, children, ...props }, ref) => (
121 |
129 |
130 |
131 |
132 |
133 |
134 | {children}
135 |
136 | ));
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
138 |
139 | const DropdownMenuLabel = React.forwardRef<
140 | React.ElementRef,
141 | React.ComponentPropsWithoutRef & {
142 | inset?: boolean;
143 | }
144 | >(({ className, inset, ...props }, ref) => (
145 |
154 | ));
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
156 |
157 | const DropdownMenuSeparator = React.forwardRef<
158 | React.ElementRef,
159 | React.ComponentPropsWithoutRef
160 | >(({ className, ...props }, ref) => (
161 |
166 | ));
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
168 |
169 | const DropdownMenuShortcut = ({
170 | className,
171 | ...props
172 | }: React.HTMLAttributes) => {
173 | return (
174 |
178 | );
179 | };
180 | DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
181 |
182 | export {
183 | DropdownMenu,
184 | DropdownMenuCheckboxItem,
185 | DropdownMenuContent,
186 | DropdownMenuGroup,
187 | DropdownMenuItem,
188 | DropdownMenuLabel,
189 | DropdownMenuPortal,
190 | DropdownMenuRadioGroup,
191 | DropdownMenuRadioItem,
192 | DropdownMenuSeparator,
193 | DropdownMenuShortcut,
194 | DropdownMenuSub,
195 | DropdownMenuSubContent,
196 | DropdownMenuSubTrigger,
197 | DropdownMenuTrigger,
198 | };
199 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/form.tsx:
--------------------------------------------------------------------------------
1 | import * as LabelPrimitive from '@radix-ui/react-label';
2 | import { Slot } from '@radix-ui/react-slot';
3 | import * as React from 'react';
4 | import {
5 | Controller,
6 | ControllerProps,
7 | FieldPath,
8 | FieldValues,
9 | FormProvider,
10 | useFormContext,
11 | } from 'react-hook-form';
12 |
13 | import { cn } from '@rangeen/shadcn-utils';
14 | import { Label } from './label';
15 |
16 | const Form = FormProvider;
17 |
18 | type FormFieldContextValue<
19 | TFieldValues extends FieldValues = FieldValues,
20 | TName extends FieldPath = FieldPath,
21 | > = {
22 | name: TName;
23 | };
24 |
25 | const FormFieldContext = React.createContext(
26 | {} as FormFieldContextValue,
27 | );
28 |
29 | const FormField = <
30 | TFieldValues extends FieldValues = FieldValues,
31 | TName extends FieldPath = FieldPath,
32 | >({
33 | ...props
34 | }: ControllerProps) => {
35 | return (
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | const useFormField = () => {
43 | const fieldContext = React.useContext(FormFieldContext);
44 | const itemContext = React.useContext(FormItemContext);
45 | const { getFieldState, formState } = useFormContext();
46 |
47 | const fieldState = getFieldState(fieldContext.name, formState);
48 |
49 | if (!fieldContext) {
50 | throw new Error('useFormField should be used within ');
51 | }
52 |
53 | const { id } = itemContext;
54 |
55 | return {
56 | id,
57 | name: fieldContext.name,
58 | formItemId: `${id}-form-item`,
59 | formDescriptionId: `${id}-form-item-description`,
60 | formMessageId: `${id}-form-item-message`,
61 | ...fieldState,
62 | };
63 | };
64 |
65 | type FormItemContextValue = {
66 | id: string;
67 | };
68 |
69 | const FormItemContext = React.createContext(
70 | {} as FormItemContextValue,
71 | );
72 |
73 | const FormItem = React.forwardRef<
74 | HTMLDivElement,
75 | React.HTMLAttributes
76 | >(({ className, ...props }, ref) => {
77 | const id = React.useId();
78 |
79 | return (
80 |
81 |
82 |
83 | );
84 | });
85 | FormItem.displayName = 'FormItem';
86 |
87 | const FormLabel = React.forwardRef<
88 | React.ElementRef,
89 | React.ComponentPropsWithoutRef
90 | >(({ className, ...props }, ref) => {
91 | const { error, formItemId } = useFormField();
92 |
93 | return (
94 |
100 | );
101 | });
102 | FormLabel.displayName = 'FormLabel';
103 |
104 | const FormControl = React.forwardRef<
105 | React.ElementRef,
106 | React.ComponentPropsWithoutRef
107 | >(({ ...props }, ref) => {
108 | const { error, formItemId, formDescriptionId, formMessageId } =
109 | useFormField();
110 |
111 | return (
112 |
123 | );
124 | });
125 | FormControl.displayName = 'FormControl';
126 |
127 | const FormDescription = React.forwardRef<
128 | HTMLParagraphElement,
129 | React.HTMLAttributes
130 | >(({ className, ...props }, ref) => {
131 | const { formDescriptionId } = useFormField();
132 |
133 | return (
134 |
140 | );
141 | });
142 | FormDescription.displayName = 'FormDescription';
143 |
144 | const FormMessage = React.forwardRef<
145 | HTMLParagraphElement,
146 | React.HTMLAttributes
147 | >(({ className, children, ...props }, ref) => {
148 | const { error, formMessageId } = useFormField();
149 | const body = error ? String(error?.message) : children;
150 |
151 | if (!body) {
152 | return null;
153 | }
154 |
155 | return (
156 |
162 | {body}
163 |
164 | );
165 | });
166 | FormMessage.displayName = 'FormMessage';
167 |
168 | export {
169 | Form,
170 | FormControl,
171 | FormDescription,
172 | FormField,
173 | FormItem,
174 | FormLabel,
175 | FormMessage,
176 | useFormField,
177 | };
178 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const HoverCard = HoverCardPrimitive.Root;
7 |
8 | const HoverCardTrigger = HoverCardPrimitive.Trigger;
9 |
10 | const HoverCardContent = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
14 |
24 | ));
25 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
26 |
27 | export { HoverCard, HoverCardContent, HoverCardTrigger };
28 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@rangeen/shadcn-utils';
4 |
5 | export type InputProps = React.InputHTMLAttributes;
6 |
7 | const Input = React.forwardRef(
8 | ({ className, type, ...props }, ref) => {
9 | return (
10 |
19 | );
20 | },
21 | );
22 | Input.displayName = 'Input';
23 |
24 | export { Input };
25 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import * as LabelPrimitive from '@radix-ui/react-label';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const labelVariants = cva(
8 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
9 | );
10 |
11 | const Label = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef &
14 | VariantProps
15 | >(({ className, ...props }, ref) => (
16 |
21 | ));
22 | Label.displayName = LabelPrimitive.Root.displayName;
23 |
24 | export { Label };
25 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
2 | import { cva } from 'class-variance-authority';
3 | import { ChevronDown } from 'lucide-react';
4 | import * as React from 'react';
5 |
6 | import { cn } from '@rangeen/shadcn-utils';
7 |
8 | const NavigationMenu = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, children, ...props }, ref) => (
12 |
20 | {children}
21 |
22 |
23 | ));
24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
25 |
26 | const NavigationMenuList = React.forwardRef<
27 | React.ElementRef,
28 | React.ComponentPropsWithoutRef
29 | >(({ className, ...props }, ref) => (
30 |
38 | ));
39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
40 |
41 | const NavigationMenuItem = NavigationMenuPrimitive.Item;
42 |
43 | const navigationMenuTriggerStyle = cva(
44 | 'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
45 | );
46 |
47 | const NavigationMenuTrigger = React.forwardRef<
48 | React.ElementRef,
49 | React.ComponentPropsWithoutRef
50 | >(({ className, children, ...props }, ref) => (
51 |
56 | {children}{' '}
57 |
61 |
62 | ));
63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
64 |
65 | const NavigationMenuContent = React.forwardRef<
66 | React.ElementRef,
67 | React.ComponentPropsWithoutRef
68 | >(({ className, ...props }, ref) => (
69 |
77 | ));
78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
79 |
80 | const NavigationMenuLink = NavigationMenuPrimitive.Link;
81 |
82 | const NavigationMenuViewport = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef
85 | >(({ className, ...props }, ref) => (
86 |
87 |
95 |
96 | ));
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName;
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, ...props }, ref) => (
104 |
112 |
113 |
114 | ));
115 | NavigationMenuIndicator.displayName =
116 | NavigationMenuPrimitive.Indicator.displayName;
117 |
118 | export {
119 | NavigationMenu,
120 | NavigationMenuContent,
121 | NavigationMenuIndicator,
122 | NavigationMenuItem,
123 | NavigationMenuLink,
124 | NavigationMenuList,
125 | NavigationMenuTrigger,
126 | NavigationMenuViewport,
127 | navigationMenuTriggerStyle,
128 | };
129 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/pagination.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 | import { ButtonProps, buttonVariants } from './button';
6 |
7 | const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
8 |
14 | );
15 | Pagination.displayName = 'Pagination';
16 |
17 | const PaginationContent = React.forwardRef<
18 | HTMLUListElement,
19 | React.ComponentProps<'ul'>
20 | >(({ className, ...props }, ref) => (
21 |
26 | ));
27 | PaginationContent.displayName = 'PaginationContent';
28 |
29 | const PaginationItem = React.forwardRef<
30 | HTMLLIElement,
31 | React.ComponentProps<'li'>
32 | >(({ className, ...props }, ref) => (
33 |
34 | ));
35 | PaginationItem.displayName = 'PaginationItem';
36 |
37 | type PaginationLinkProps = {
38 | isActive?: boolean;
39 | } & Pick &
40 | React.ComponentProps<'a'>;
41 |
42 | const PaginationLink = ({
43 | className,
44 | isActive,
45 | size = 'icon',
46 | ...props
47 | }: PaginationLinkProps) => (
48 |
59 | );
60 | PaginationLink.displayName = 'PaginationLink';
61 |
62 | const PaginationPrevious = ({
63 | className,
64 | ...props
65 | }: React.ComponentProps) => (
66 |
72 |
73 | Previous
74 |
75 | );
76 | PaginationPrevious.displayName = 'PaginationPrevious';
77 |
78 | const PaginationNext = ({
79 | className,
80 | ...props
81 | }: React.ComponentProps) => (
82 |
88 | Next
89 |
90 |
91 | );
92 | PaginationNext.displayName = 'PaginationNext';
93 |
94 | const PaginationEllipsis = ({
95 | className,
96 | ...props
97 | }: React.ComponentProps<'span'>) => (
98 |
103 |
104 | More pages
105 |
106 | );
107 | PaginationEllipsis.displayName = 'PaginationEllipsis';
108 |
109 | export {
110 | Pagination,
111 | PaginationContent,
112 | PaginationEllipsis,
113 | PaginationItem,
114 | PaginationLink,
115 | PaginationNext,
116 | PaginationPrevious,
117 | };
118 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | import * as PopoverPrimitive from '@radix-ui/react-popover';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Popover = PopoverPrimitive.Root;
7 |
8 | const PopoverTrigger = PopoverPrimitive.Trigger;
9 |
10 | const PopoverContent = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
14 |
15 |
25 |
26 | ));
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
28 |
29 | export { Popover, PopoverContent, PopoverTrigger };
30 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | import * as ProgressPrimitive from '@radix-ui/react-progress';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Progress = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, value, ...props }, ref) => (
10 |
18 |
22 |
23 | ));
24 | Progress.displayName = ProgressPrimitive.Root.displayName;
25 |
26 | export { Progress };
27 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
2 | import { Circle } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const RadioGroup = React.forwardRef<
8 | React.ElementRef,
9 | React.ComponentPropsWithoutRef
10 | >(({ className, ...props }, ref) => {
11 | return (
12 |
17 | );
18 | });
19 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
20 |
21 | const RadioGroupItem = React.forwardRef<
22 | React.ElementRef,
23 | React.ComponentPropsWithoutRef
24 | >(({ className, ...props }, ref) => {
25 | return (
26 |
34 |
35 |
36 |
37 |
38 | );
39 | });
40 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
41 |
42 | export { RadioGroup, RadioGroupItem };
43 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const ScrollArea = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, children, ...props }, ref) => (
10 |
15 |
16 | {children}
17 |
18 |
19 |
20 |
21 | ));
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
23 |
24 | const ScrollBar = React.forwardRef<
25 | React.ElementRef,
26 | React.ComponentPropsWithoutRef
27 | >(({ className, orientation = 'vertical', ...props }, ref) => (
28 |
41 |
42 |
43 | ));
44 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
45 |
46 | export { ScrollArea, ScrollBar };
47 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/select.tsx:
--------------------------------------------------------------------------------
1 | import * as SelectPrimitive from '@radix-ui/react-select';
2 | import { Check, ChevronDown, ChevronUp } from 'lucide-react';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const Select = SelectPrimitive.Root;
8 |
9 | const SelectGroup = SelectPrimitive.Group;
10 |
11 | const SelectValue = SelectPrimitive.Value;
12 |
13 | const SelectTrigger = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef
16 | >(({ className, children, ...props }, ref) => (
17 | span]:line-clamp-1',
21 | className,
22 | )}
23 | {...props}
24 | >
25 | {children}
26 |
27 |
28 |
29 |
30 | ));
31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
32 |
33 | const SelectScrollUpButton = React.forwardRef<
34 | React.ElementRef,
35 | React.ComponentPropsWithoutRef
36 | >(({ className, ...props }, ref) => (
37 |
45 |
46 |
47 | ));
48 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
49 |
50 | const SelectScrollDownButton = React.forwardRef<
51 | React.ElementRef,
52 | React.ComponentPropsWithoutRef
53 | >(({ className, ...props }, ref) => (
54 |
62 |
63 |
64 | ));
65 | SelectScrollDownButton.displayName =
66 | SelectPrimitive.ScrollDownButton.displayName;
67 |
68 | const SelectContent = React.forwardRef<
69 | React.ElementRef,
70 | React.ComponentPropsWithoutRef
71 | >(({ className, children, position = 'popper', ...props }, ref) => (
72 |
73 |
84 |
85 |
92 | {children}
93 |
94 |
95 |
96 |
97 | ));
98 | SelectContent.displayName = SelectPrimitive.Content.displayName;
99 |
100 | const SelectLabel = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, ...props }, ref) => (
104 |
109 | ));
110 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
111 |
112 | const SelectItem = React.forwardRef<
113 | React.ElementRef,
114 | React.ComponentPropsWithoutRef
115 | >(({ className, children, ...props }, ref) => (
116 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | {children}
131 |
132 | ));
133 | SelectItem.displayName = SelectPrimitive.Item.displayName;
134 |
135 | const SelectSeparator = React.forwardRef<
136 | React.ElementRef,
137 | React.ComponentPropsWithoutRef
138 | >(({ className, ...props }, ref) => (
139 |
144 | ));
145 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
146 |
147 | export {
148 | Select,
149 | SelectContent,
150 | SelectGroup,
151 | SelectItem,
152 | SelectLabel,
153 | SelectScrollDownButton,
154 | SelectScrollUpButton,
155 | SelectSeparator,
156 | SelectTrigger,
157 | SelectValue,
158 | };
159 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | import * as SeparatorPrimitive from '@radix-ui/react-separator';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Separator = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(
10 | (
11 | { className, orientation = 'horizontal', decorative = true, ...props },
12 | ref,
13 | ) => (
14 |
25 | ),
26 | );
27 | Separator.displayName = SeparatorPrimitive.Root.displayName;
28 |
29 | export { Separator };
30 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | import * as SheetPrimitive from '@radix-ui/react-dialog';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import { X } from 'lucide-react';
4 | import * as React from 'react';
5 |
6 | import { cn } from '@rangeen/shadcn-utils';
7 |
8 | const Sheet = SheetPrimitive.Root;
9 |
10 | const SheetTrigger = SheetPrimitive.Trigger;
11 |
12 | const SheetClose = SheetPrimitive.Close;
13 |
14 | const SheetPortal = SheetPrimitive.Portal;
15 |
16 | const SheetOverlay = React.forwardRef<
17 | React.ElementRef,
18 | React.ComponentPropsWithoutRef
19 | >(({ className, ...props }, ref) => (
20 |
28 | ));
29 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
30 |
31 | const sheetVariants = cva(
32 | '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',
33 | {
34 | variants: {
35 | side: {
36 | top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
37 | bottom:
38 | 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
39 | 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',
40 | right:
41 | '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',
42 | },
43 | },
44 | defaultVariants: {
45 | side: 'right',
46 | },
47 | },
48 | );
49 |
50 | interface SheetContentProps
51 | extends React.ComponentPropsWithoutRef,
52 | VariantProps {}
53 |
54 | const SheetContent = React.forwardRef<
55 | React.ElementRef,
56 | SheetContentProps
57 | >(({ side = 'right', className, children, ...props }, ref) => (
58 |
59 |
60 |
65 | {children}
66 |
67 |
68 | Close
69 |
70 |
71 |
72 | ));
73 | SheetContent.displayName = SheetPrimitive.Content.displayName;
74 |
75 | const SheetHeader = ({
76 | className,
77 | ...props
78 | }: React.HTMLAttributes) => (
79 |
86 | );
87 | SheetHeader.displayName = 'SheetHeader';
88 |
89 | const SheetFooter = ({
90 | className,
91 | ...props
92 | }: React.HTMLAttributes) => (
93 |
100 | );
101 | SheetFooter.displayName = 'SheetFooter';
102 |
103 | const SheetTitle = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
112 | ));
113 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
114 |
115 | const SheetDescription = React.forwardRef<
116 | React.ElementRef,
117 | React.ComponentPropsWithoutRef
118 | >(({ className, ...props }, ref) => (
119 |
124 | ));
125 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
126 |
127 | export {
128 | Sheet,
129 | SheetClose,
130 | SheetContent,
131 | SheetDescription,
132 | SheetFooter,
133 | SheetHeader,
134 | SheetOverlay,
135 | SheetPortal,
136 | SheetTitle,
137 | SheetTrigger,
138 | };
139 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@rangeen/shadcn-utils';
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | );
13 | }
14 |
15 | export { Skeleton };
16 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | import * as SliderPrimitive from '@radix-ui/react-slider';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Slider = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
18 |
19 |
20 |
21 |
22 |
23 | ));
24 | Slider.displayName = SliderPrimitive.Root.displayName;
25 |
26 | export { Slider };
27 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as SwitchPrimitives from '@radix-ui/react-switch';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Switch = React.forwardRef<
7 | React.ElementRef,
8 | React.ComponentPropsWithoutRef
9 | >(({ className, ...props }, ref) => (
10 |
18 |
23 |
24 | ));
25 | Switch.displayName = SwitchPrimitives.Root.displayName;
26 |
27 | export { Switch };
28 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@rangeen/shadcn-utils';
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes
8 | >(({ className, ...props }, ref) => (
9 |
16 | ));
17 | Table.displayName = 'Table';
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
22 | >(({ className, ...props }, ref) => (
23 |
24 | ));
25 | TableHeader.displayName = 'TableHeader';
26 |
27 | const TableBody = React.forwardRef<
28 | HTMLTableSectionElement,
29 | React.HTMLAttributes
30 | >(({ className, ...props }, ref) => (
31 |
36 | ));
37 | TableBody.displayName = 'TableBody';
38 |
39 | const TableFooter = React.forwardRef<
40 | HTMLTableSectionElement,
41 | React.HTMLAttributes
42 | >(({ className, ...props }, ref) => (
43 | tr]:last:border-b-0',
47 | className,
48 | )}
49 | {...props}
50 | />
51 | ));
52 | TableFooter.displayName = 'TableFooter';
53 |
54 | const TableRow = React.forwardRef<
55 | HTMLTableRowElement,
56 | React.HTMLAttributes
57 | >(({ className, ...props }, ref) => (
58 |
66 | ));
67 | TableRow.displayName = 'TableRow';
68 |
69 | const TableHead = React.forwardRef<
70 | HTMLTableCellElement,
71 | React.ThHTMLAttributes
72 | >(({ className, ...props }, ref) => (
73 |
81 | ));
82 | TableHead.displayName = 'TableHead';
83 |
84 | const TableCell = React.forwardRef<
85 | HTMLTableCellElement,
86 | React.TdHTMLAttributes
87 | >(({ className, ...props }, ref) => (
88 |
93 | ));
94 | TableCell.displayName = 'TableCell';
95 |
96 | const TableCaption = React.forwardRef<
97 | HTMLTableCaptionElement,
98 | React.HTMLAttributes
99 | >(({ className, ...props }, ref) => (
100 |
105 | ));
106 | TableCaption.displayName = 'TableCaption';
107 |
108 | export {
109 | Table,
110 | TableBody,
111 | TableCaption,
112 | TableCell,
113 | TableFooter,
114 | TableHead,
115 | TableHeader,
116 | TableRow,
117 | };
118 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as TabsPrimitive from '@radix-ui/react-tabs';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const Tabs = TabsPrimitive.Root;
7 |
8 | const TabsList = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 | ));
21 | TabsList.displayName = TabsPrimitive.List.displayName;
22 |
23 | const TabsTrigger = React.forwardRef<
24 | React.ElementRef,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => (
27 |
35 | ));
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
37 |
38 | const TabsContent = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
50 | ));
51 | TabsContent.displayName = TabsPrimitive.Content.displayName;
52 |
53 | export { Tabs, TabsContent, TabsList, TabsTrigger };
54 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@rangeen/shadcn-utils';
4 |
5 | export type TextareaProps = React.TextareaHTMLAttributes;
6 |
7 | const Textarea = React.forwardRef(
8 | ({ className, ...props }, ref) => {
9 | return (
10 |
18 | );
19 | },
20 | );
21 | Textarea.displayName = 'Textarea';
22 |
23 | export { Textarea };
24 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as ToastPrimitives from '@radix-ui/react-toast';
4 | import { cva, type VariantProps } from 'class-variance-authority';
5 | import { X } from 'lucide-react';
6 | import * as React from 'react';
7 |
8 | import { cn } from '@rangeen/shadcn-utils';
9 |
10 | const ToastProvider = ToastPrimitives.Provider;
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 |
24 | ));
25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
26 |
27 | const toastVariants = cva(
28 | 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
29 | {
30 | variants: {
31 | variant: {
32 | default: 'border bg-background text-foreground',
33 | destructive:
34 | 'destructive group border-destructive bg-destructive text-destructive-foreground',
35 | },
36 | },
37 | defaultVariants: {
38 | variant: 'default',
39 | },
40 | },
41 | );
42 |
43 | const Toast = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 |
54 | );
55 | });
56 | Toast.displayName = ToastPrimitives.Root.displayName;
57 |
58 | const ToastAction = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
70 | ));
71 | ToastAction.displayName = ToastPrimitives.Action.displayName;
72 |
73 | const ToastClose = React.forwardRef<
74 | React.ElementRef,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
87 |
88 | ));
89 | ToastClose.displayName = ToastPrimitives.Close.displayName;
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 |
100 | ));
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName;
102 |
103 | const ToastDescription = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
112 | ));
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName;
114 |
115 | type ToastProps = React.ComponentPropsWithoutRef;
116 |
117 | type ToastActionElement = React.ReactElement;
118 |
119 | export {
120 | Toast,
121 | ToastAction,
122 | ToastClose,
123 | ToastDescription,
124 | ToastProvider,
125 | ToastTitle,
126 | ToastViewport,
127 | type ToastActionElement,
128 | type ToastProps,
129 | };
130 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Toast,
3 | ToastClose,
4 | ToastDescription,
5 | ToastProvider,
6 | ToastTitle,
7 | ToastViewport,
8 | } from './toast';
9 | import { useToast } from './use-toast';
10 |
11 | export function Toaster() {
12 | const { toasts } = useToast();
13 |
14 | return (
15 |
16 | {toasts.map(function ({ id, title, description, action, ...props }) {
17 | return (
18 |
19 |
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
27 |
28 | );
29 | })}
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
2 | import { VariantProps } from 'class-variance-authority';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 | import { toggleVariants } from './toggle';
7 |
8 | const ToggleGroupContext = React.createContext<
9 | VariantProps
10 | >({
11 | size: 'default',
12 | variant: 'default',
13 | });
14 |
15 | const ToggleGroup = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef &
18 | VariantProps
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |
25 |
26 | {children}
27 |
28 |
29 | ));
30 |
31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
32 |
33 | const ToggleGroupItem = React.forwardRef<
34 | React.ElementRef,
35 | React.ComponentPropsWithoutRef &
36 | VariantProps
37 | >(({ className, children, variant, size, ...props }, ref) => {
38 | const context = React.useContext(ToggleGroupContext);
39 |
40 | return (
41 |
52 | {children}
53 |
54 | );
55 | });
56 |
57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
58 |
59 | export { ToggleGroup, ToggleGroupItem };
60 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as TogglePrimitive from '@radix-ui/react-toggle';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import * as React from 'react';
4 |
5 | import { cn } from '@rangeen/shadcn-utils';
6 |
7 | const toggleVariants = cva(
8 | 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-transparent',
13 | outline:
14 | 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
15 | },
16 | size: {
17 | default: 'h-10 px-3',
18 | sm: 'h-9 px-2.5',
19 | lg: 'h-11 px-5',
20 | },
21 | },
22 | defaultVariants: {
23 | variant: 'default',
24 | size: 'default',
25 | },
26 | },
27 | );
28 |
29 | const Toggle = React.forwardRef<
30 | React.ElementRef,
31 | React.ComponentPropsWithoutRef &
32 | VariantProps
33 | >(({ className, variant, size, ...props }, ref) => (
34 |
39 | ));
40 |
41 | Toggle.displayName = TogglePrimitive.Root.displayName;
42 |
43 | export { Toggle, toggleVariants };
44 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as TooltipPrimitive from '@radix-ui/react-tooltip';
2 | import * as React from 'react';
3 |
4 | import { cn } from '@rangeen/shadcn-utils';
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider;
7 |
8 | const Tooltip = TooltipPrimitive.Root;
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger;
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |
25 | ));
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
27 |
28 | export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
29 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/typography.tsx:
--------------------------------------------------------------------------------
1 | export function TypographyH1({ children }: { children: React.ReactNode }) {
2 | return (
3 |
4 | {children}
5 |
6 | );
7 | }
8 |
9 | //{children} : {children: React.ReactNode}
10 |
11 | export function TypographyH2({ children }: { children: React.ReactNode }) {
12 | return (
13 |
14 | {children}
15 |
16 | );
17 | }
18 |
19 | export function TypographyH3({ children }: { children: React.ReactNode }) {
20 | return (
21 |
22 | {children}
23 |
24 | );
25 | }
26 |
27 | export function TypographyH4({ children }: { children: React.ReactNode }) {
28 | return (
29 |
30 | {children}
31 |
32 | );
33 | }
34 |
35 | export function TypographyParagraph({
36 | children,
37 | }: {
38 | children: React.ReactNode;
39 | }) {
40 | return {children}
;
41 | }
42 |
43 | export function TypographyBlockquote({
44 | children,
45 | }: {
46 | children: React.ReactNode;
47 | }) {
48 | return (
49 | {children}
50 | );
51 | }
52 |
53 | export function TypographyInlineCode({
54 | children,
55 | }: {
56 | children: React.ReactNode;
57 | }) {
58 | return (
59 |
60 | {children}
61 |
62 | );
63 | }
64 | export function TypographyLead({ children }: { children: React.ReactNode }) {
65 | return {children}
;
66 | }
67 |
68 | export function TypographyLarge({ children }: { children: React.ReactNode }) {
69 | return {children}
;
70 | }
71 |
72 | export function TypographySmall({ children }: { children: React.ReactNode }) {
73 | return {children} ;
74 | }
75 |
76 | export function TypographyMuted({ children }: { children: React.ReactNode }) {
77 | return {children}
;
78 | }
79 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/src/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | // Inspired by react-hot-toast library
2 | import * as React from 'react';
3 |
4 | import type { ToastActionElement, ToastProps } from './toast';
5 |
6 | const TOAST_LIMIT = 1;
7 | const TOAST_REMOVE_DELAY = 1000000;
8 |
9 | type ToasterToast = ToastProps & {
10 | id: string;
11 | title?: React.ReactNode;
12 | description?: React.ReactNode;
13 | action?: ToastActionElement;
14 | };
15 |
16 | const actionTypes = {
17 | ADD_TOAST: 'ADD_TOAST',
18 | UPDATE_TOAST: 'UPDATE_TOAST',
19 | DISMISS_TOAST: 'DISMISS_TOAST',
20 | REMOVE_TOAST: 'REMOVE_TOAST',
21 | } as const;
22 |
23 | let count = 0;
24 |
25 | function genId() {
26 | count = (count + 1) % Number.MAX_SAFE_INTEGER;
27 | return count.toString();
28 | }
29 |
30 | type ActionType = typeof actionTypes;
31 |
32 | type Action =
33 | | {
34 | type: ActionType['ADD_TOAST'];
35 | toast: ToasterToast;
36 | }
37 | | {
38 | type: ActionType['UPDATE_TOAST'];
39 | toast: Partial;
40 | }
41 | | {
42 | type: ActionType['DISMISS_TOAST'];
43 | toastId?: ToasterToast['id'];
44 | }
45 | | {
46 | type: ActionType['REMOVE_TOAST'];
47 | toastId?: ToasterToast['id'];
48 | };
49 |
50 | interface State {
51 | toasts: ToasterToast[];
52 | }
53 |
54 | const toastTimeouts = new Map>();
55 |
56 | const addToRemoveQueue = (toastId: string) => {
57 | if (toastTimeouts.has(toastId)) {
58 | return;
59 | }
60 |
61 | const timeout = setTimeout(() => {
62 | toastTimeouts.delete(toastId);
63 | dispatch({
64 | type: 'REMOVE_TOAST',
65 | toastId: toastId,
66 | });
67 | }, TOAST_REMOVE_DELAY);
68 |
69 | toastTimeouts.set(toastId, timeout);
70 | };
71 |
72 | export const reducer = (state: State, action: Action): State => {
73 | switch (action.type) {
74 | case 'ADD_TOAST':
75 | return {
76 | ...state,
77 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
78 | };
79 |
80 | case 'UPDATE_TOAST':
81 | return {
82 | ...state,
83 | toasts: state.toasts.map((t) =>
84 | t.id === action.toast.id ? { ...t, ...action.toast } : t,
85 | ),
86 | };
87 |
88 | case 'DISMISS_TOAST': {
89 | const { toastId } = action;
90 |
91 | // ! Side effects ! - This could be extracted into a dismissToast() action,
92 | // but I'll keep it here for simplicity
93 | if (toastId) {
94 | addToRemoveQueue(toastId);
95 | } else {
96 | state.toasts.forEach((toast) => {
97 | addToRemoveQueue(toast.id);
98 | });
99 | }
100 |
101 | return {
102 | ...state,
103 | toasts: state.toasts.map((t) =>
104 | t.id === toastId || toastId === undefined
105 | ? {
106 | ...t,
107 | open: false,
108 | }
109 | : t,
110 | ),
111 | };
112 | }
113 | case 'REMOVE_TOAST':
114 | if (action.toastId === undefined) {
115 | return {
116 | ...state,
117 | toasts: [],
118 | };
119 | }
120 | return {
121 | ...state,
122 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
123 | };
124 | }
125 | };
126 |
127 | const listeners: Array<(state: State) => void> = [];
128 |
129 | let memoryState: State = { toasts: [] };
130 |
131 | function dispatch(action: Action) {
132 | memoryState = reducer(memoryState, action);
133 | listeners.forEach((listener) => {
134 | listener(memoryState);
135 | });
136 | }
137 |
138 | type Toast = Omit;
139 |
140 | function toast({ ...props }: Toast) {
141 | const id = genId();
142 |
143 | const update = (props: ToasterToast) =>
144 | dispatch({
145 | type: 'UPDATE_TOAST',
146 | toast: { ...props, id },
147 | });
148 | const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
149 |
150 | dispatch({
151 | type: 'ADD_TOAST',
152 | toast: {
153 | ...props,
154 | id,
155 | open: true,
156 | onOpenChange: (open) => {
157 | if (!open) dismiss();
158 | },
159 | },
160 | });
161 |
162 | return {
163 | id: id,
164 | dismiss,
165 | update,
166 | };
167 | }
168 |
169 | function useToast() {
170 | const [state, setState] = React.useState(memoryState);
171 |
172 | React.useEffect(() => {
173 | listeners.push(setState);
174 | return () => {
175 | const index = listeners.indexOf(setState);
176 | if (index > -1) {
177 | listeners.splice(index, 1);
178 | }
179 | };
180 | }, [state]);
181 |
182 | return {
183 | ...state,
184 | toast,
185 | dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
186 | };
187 | }
188 |
189 | export { toast, useToast };
190 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "allowJs": false,
5 | "esModuleInterop": false,
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "files": [],
9 | "include": [],
10 | "references": [
11 | {
12 | "path": "./tsconfig.lib.json"
13 | }
14 | ],
15 | "extends": "../../tsconfig.base.json"
16 | }
17 |
--------------------------------------------------------------------------------
/libs/shadcn-ui/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": [
6 | "node",
7 |
8 | "@nx/react/typings/cssmodule.d.ts",
9 | "@nx/react/typings/image.d.ts"
10 | ]
11 | },
12 | "exclude": [
13 | "jest.config.ts",
14 | "src/**/*.spec.ts",
15 | "src/**/*.test.ts",
16 | "src/**/*.spec.tsx",
17 | "src/**/*.test.tsx",
18 | "src/**/*.spec.js",
19 | "src/**/*.test.js",
20 | "src/**/*.spec.jsx",
21 | "src/**/*.test.jsx"
22 | ],
23 | "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
24 | }
25 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@nx/react/babel",
5 | {
6 | "runtime": "automatic",
7 | "useBuiltIns": "usage"
8 | }
9 | ]
10 | ],
11 | "plugins": []
12 | }
13 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3 | "ignorePatterns": ["!**/*"],
4 | "overrides": [
5 | {
6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7 | "rules": {}
8 | },
9 | {
10 | "files": ["*.ts", "*.tsx"],
11 | "rules": {}
12 | },
13 | {
14 | "files": ["*.js", "*.jsx"],
15 | "rules": {}
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/README.md:
--------------------------------------------------------------------------------
1 | # shadcn-utils
2 |
3 | This library was generated with [Nx](https://nx.dev).
4 |
5 | ## Running unit tests
6 |
7 | Run `nx test shadcn-utils` to execute the unit tests via [Jest](https://jestjs.io).
8 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shadcn-utils",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "libs/shadcn-utils/src",
5 | "projectType": "library",
6 | "tags": [],
7 | "targets": {}
8 | }
9 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/src/cn.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 |
4 | export const cn = function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | };
7 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './cn';
2 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "allowJs": false,
5 | "esModuleInterop": false,
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "files": [],
9 | "include": [],
10 | "references": [
11 | {
12 | "path": "./tsconfig.lib.json"
13 | }
14 | ],
15 | "extends": "../../tsconfig.base.json"
16 | }
17 |
--------------------------------------------------------------------------------
/libs/shadcn-utils/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": [
6 | "node",
7 |
8 | "@nx/react/typings/cssmodule.d.ts",
9 | "@nx/react/typings/image.d.ts"
10 | ]
11 | },
12 | "exclude": [
13 | "jest.config.ts",
14 | "src/**/*.spec.ts",
15 | "src/**/*.test.ts",
16 | "src/**/*.spec.tsx",
17 | "src/**/*.test.tsx",
18 | "src/**/*.spec.js",
19 | "src/**/*.test.js",
20 | "src/**/*.spec.jsx",
21 | "src/**/*.test.jsx"
22 | ],
23 | "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
24 | }
25 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/nx/schemas/nx-schema.json",
3 | "namedInputs": {
4 | "default": ["{projectRoot}/**/*", "sharedGlobals"],
5 | "production": [
6 | "default",
7 | "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
8 | "!{projectRoot}/tsconfig.spec.json",
9 | "!{projectRoot}/.eslintrc.json",
10 | "!{projectRoot}/eslint.config.js"
11 | ],
12 | "sharedGlobals": []
13 | },
14 | "nxCloudAccessToken": "MzMxMzdjOGMtOWI4NC00M2RkLWFhY2QtZDFiNDVmYTRhYTRkfHJlYWQtd3JpdGU=",
15 | "plugins": [
16 | {
17 | "plugin": "@nx/vite/plugin",
18 | "options": {
19 | "buildTargetName": "build",
20 | "previewTargetName": "preview",
21 | "testTargetName": "test",
22 | "serveTargetName": "serve",
23 | "serveStaticTargetName": "serve-static"
24 | }
25 | },
26 | {
27 | "plugin": "@nx/eslint/plugin",
28 | "options": {
29 | "targetName": "lint"
30 | }
31 | }
32 | ],
33 | "generators": {
34 | "@nx/react": {
35 | "application": {
36 | "babel": true,
37 | "style": "css",
38 | "linter": "eslint",
39 | "bundler": "vite"
40 | },
41 | "component": {
42 | "style": "css"
43 | },
44 | "library": {
45 | "style": "css",
46 | "linter": "eslint"
47 | }
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@rangeen/source",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {},
6 | "private": true,
7 | "devDependencies": {
8 | "@babel/core": "^7.14.5",
9 | "@babel/preset-react": "^7.14.5",
10 | "@nx-extend/shadcn-ui": "1.0.0",
11 | "@nx/eslint": "18.0.6",
12 | "@nx/eslint-plugin": "18.0.6",
13 | "@nx/js": "18.0.6",
14 | "@nx/react": "18.0.6",
15 | "@nx/vite": "18.0.6",
16 | "@nx/web": "18.0.6",
17 | "@nx/workspace": "18.0.6",
18 | "@swc-node/register": "~1.8.0",
19 | "@swc/cli": "~0.1.62",
20 | "@swc/core": "~1.3.85",
21 | "@swc/helpers": "~0.5.2",
22 | "@types/node": "18.16.9",
23 | "@types/react": "18.2.33",
24 | "@types/react-dom": "18.2.14",
25 | "@typescript-eslint/eslint-plugin": "^6.13.2",
26 | "@typescript-eslint/parser": "^6.13.2",
27 | "@vitejs/plugin-react": "^4.2.0",
28 | "@vitejs/plugin-react-swc": "^3.5.0",
29 | "@vitest/ui": "^1.3.1",
30 | "autoprefixer": "10.4.13",
31 | "class-variance-authority": "^0.7.0",
32 | "clsx": "^2.1.0",
33 | "eslint": "~8.48.0",
34 | "eslint-config-prettier": "^9.0.0",
35 | "eslint-plugin-import": "2.27.5",
36 | "eslint-plugin-jsx-a11y": "6.7.1",
37 | "eslint-plugin-react": "7.32.2",
38 | "eslint-plugin-react-hooks": "4.6.0",
39 | "jsdom": "~22.1.0",
40 | "nx": "18.0.6",
41 | "postcss": "8.4.21",
42 | "prettier": "^3.2.5",
43 | "prettier-plugin-organize-imports": "^3.2.4",
44 | "prettier-plugin-tailwindcss": "^0.5.12",
45 | "tailwind-merge": "^2.2.1",
46 | "tailwindcss": "^3.4.1",
47 | "tailwindcss-animate": "^1.0.7",
48 | "typescript": "~5.3.2",
49 | "vite": "~5.0.0",
50 | "vite-plugin-dts": "~2.3.0",
51 | "vitest": "^1.3.1"
52 | },
53 | "dependencies": {
54 | "@material/material-color-utilities": "^0.2.7",
55 | "@radix-ui/react-accordion": "^1.1.2",
56 | "@radix-ui/react-alert-dialog": "^1.0.5",
57 | "@radix-ui/react-aspect-ratio": "^1.0.3",
58 | "@radix-ui/react-avatar": "^1.0.4",
59 | "@radix-ui/react-checkbox": "^1.0.4",
60 | "@radix-ui/react-collapsible": "^1.0.3",
61 | "@radix-ui/react-context-menu": "^2.1.5",
62 | "@radix-ui/react-dialog": "^1.0.5",
63 | "@radix-ui/react-dropdown-menu": "^2.0.6",
64 | "@radix-ui/react-hover-card": "^1.0.7",
65 | "@radix-ui/react-label": "^2.0.2",
66 | "@radix-ui/react-menubar": "^1.0.4",
67 | "@radix-ui/react-navigation-menu": "^1.1.4",
68 | "@radix-ui/react-popover": "^1.0.7",
69 | "@radix-ui/react-progress": "^1.0.3",
70 | "@radix-ui/react-radio-group": "^1.1.3",
71 | "@radix-ui/react-scroll-area": "^1.0.5",
72 | "@radix-ui/react-select": "^2.0.0",
73 | "@radix-ui/react-separator": "^1.0.3",
74 | "@radix-ui/react-slider": "^1.1.2",
75 | "@radix-ui/react-slot": "^1.0.2",
76 | "@radix-ui/react-switch": "^1.0.3",
77 | "@radix-ui/react-tabs": "^1.0.4",
78 | "@radix-ui/react-toast": "^1.1.5",
79 | "@radix-ui/react-toggle": "^1.0.3",
80 | "@radix-ui/react-toggle-group": "^1.0.4",
81 | "@radix-ui/react-tooltip": "^1.0.7",
82 | "@tanstack/react-table": "^8.13.2",
83 | "cmdk": "^1.0.0",
84 | "date-fns": "^3.3.1",
85 | "lucide-react": "^0.344.0",
86 | "react": "18.2.0",
87 | "react-day-picker": "^8.10.0",
88 | "react-dom": "18.2.0",
89 | "react-hook-form": "^7.51.0",
90 | "react-router-dom": "^6.22.2",
91 | "recharts": "^2.12.2",
92 | "tslib": "^2.3.0"
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "rootDir": ".",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "importHelpers": true,
11 | "target": "es2015",
12 | "module": "esnext",
13 | "lib": ["es2020", "dom"],
14 | "skipLibCheck": true,
15 | "skipDefaultLibCheck": true,
16 | "baseUrl": ".",
17 | "paths": {
18 | "@rangeen/shadcn-ui": ["libs/shadcn-ui/src/index.ts"],
19 | "@rangeen/shadcn-utils": ["libs/shadcn-utils/src/index.ts"]
20 | }
21 | },
22 | "exclude": ["node_modules", "tmp"]
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "_COMMENT": "This file is used to for shadcn",
3 | "extends": "./tsconfig.base.json"
4 | }
5 |
--------------------------------------------------------------------------------