diff --git a/.env b/.env new file mode 100644 index 00000000..1c8315b3 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +APP_URL=http://127.0.0.1:8000 diff --git a/.github/workflows/demo.yaml b/.github/workflows/demo.yaml index 9ef21553..aea55b58 100644 --- a/.github/workflows/demo.yaml +++ b/.github/workflows/demo.yaml @@ -15,6 +15,10 @@ jobs: ref: ${{ github.event.release.target_commitish }} token: ${{ secrets.RAPIDEZ_ACTIONS_ACCOUNT_PAT }} + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Setup PHP uses: shivammathur/setup-php@v2 with: @@ -26,6 +30,15 @@ jobs: - name: Fix permissions run: sudo chmod -R 0777 vendor/orchestra/testbench-core/laravel/ + - name: Install Yarn dependencies + run: npm install -g yarn && yarn + + - name: Frontend Build + run: yarn build + + - name: Generate demo + run: composer symlink-public + - name: Generate demo run: composer generate-demo diff --git a/.gitignore b/.gitignore index 9759e265..2ed512a6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ /composer.lock +/public /node_modules /vendor +/yarn.lock diff --git a/README.md b/README.md index a15aa537..bf0e0157 100644 --- a/README.md +++ b/README.md @@ -42,75 +42,19 @@ The base button doesn't have any styling; here, we only use the `x-rapidez::tag` composer require rapidez/blade-components ``` -Make sure these colors and z-indexes are present in your `tailwind.config.js` file: -```js -colors: { - colors: { - primary: { - DEFAULT: color('--primary', '#2FBC85'), - text: color('--primary-text', colors.white), - }, - secondary: { - DEFAULT: color('--secondary', '#202F60'), - text: color('--secondary-text', colors.white), - }, - conversion: { - DEFAULT: color('--conversion', colors.green[700]), - text: color('--conversion-text', colors.white), - }, - foreground: { - emphasis: color('--foreground-emphasis', colors.slate[900]), - DEFAULT: color('--foreground', colors.slate[800]), - muted: color('--foreground-muted', colors.slate[600]), - }, - border: { - emphasis: color('--border-emphasis', colors.slate[400]), - DEFAULT: color('--border', colors.slate[300]), - muted: color('--border-muted', colors.slate[100]), - }, - background: { - emphasis: color('--background-emphasis', colors.slate[200]), - DEFAULT: color('--background', colors.slate[100]), - muted: color('--background-muted', colors.slate[50]), - }, - backdrop: color('--backdrop', 'rgba(0, 0, 0, 0.4)'), - }, - zIndex: { - 'slideover': '120', - 'slideover-overlay': '10', - 'slideover-sidebar': '20', - }, - textColor: (theme) => ({ - default: theme('colors.foreground'), - ...theme('colors.foreground'), - }), - borderColor: (theme) => ({ - default: theme('colors.border'), - ...theme('colors.border'), - }), - backgroundColor: (theme) => ({ - default: theme('colors.background'), - ...theme('colors.background'), - }), - ringColor: (theme) => ({ - default: theme('colors.border'), - ...theme('colors.border'), - }), - outlineColor: (theme) => ({ - default: theme('colors.border'), - ...theme('colors.border'), - }), -} -``` - -And make sure you add this in your `tailwind.config.js` file: -```js -import colors from 'tailwindcss/colors' - -function color(variable, fallback) { - return 'color-mix(in srgb, var(' + variable + ', ' + fallback + ') calc(100% * ), transparent)' -} +And include the CSS file in your `resources/css/app.css`: ``` +@import '../../vendor/rapidez/blade-components/resources/css/package.css'; +``` + +If you're not using Tailwind yet, you've to make sure you've setup Tailwind 4 with these plugins: + +- [Forms](https://github.com/tailwindlabs/tailwindcss-forms) +- [Typography](https://github.com/tailwindlabs/tailwindcss-typography) + +A minimal setup can be found in this repos `app.css`, `package.json` and `vite.config.js`. + +More information about the usage and variables can be found in the Rapidez docs: https://docs.rapidez.io/5.x/theming.html#css ### Views @@ -119,14 +63,6 @@ If you like to change the components you can publish the views with: php artisan vendor:publish --tag=rapidez-blade-components-views ``` -### Prose component - -If you're going to use the Prose component and you're not using Rapidez; you've to import the CSS file manually: -``` -@import '../../vendor/rapidez/blade-components/resources/css/package.css'; -``` -With Rapidez this is already imported from the [app.js](https://github.com/rapidez/rapidez/blob/master/resources/js/app.js). - ### Read more component The [readmore component](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php) includes some Javascript, we're using a [Blade Stack](https://laravel.com/docs/master/blade#stacks) named `foot` for that. Make sure you've an `@stack('foot')` before your closing `` tag. Within Rapidez this is already present within the [`layouts/app.blade.php`](https://github.com/rapidez/core/blob/master/resources/views/layouts/app.blade.php). @@ -225,7 +161,7 @@ Route::view('components', 'rapidez::components-preview'); ## Development -When you're working on this package you can use `composer preview-demo` to get a preview in the browser. There is also another script: `generate-demo` which runs automatically on push. +When you're working on this package you should first install the frontend dependencies with `yarn`, create an initial build with `yarn build`, symlink the public build with `yarn symlink-public` and to show a preview in the browser use `yarn preview`. ## License diff --git a/composer.json b/composer.json index e9675b4f..c9e9d2db 100644 --- a/composer.json +++ b/composer.json @@ -42,6 +42,7 @@ } }, "scripts": { + "symlink-public": "@php vendor/bin/testbench workbench:sync-skeleton --ansi", "preview-demo": ["Composer\\Config::disableProcessTimeout", "@php vendor/bin/testbench serve --ansi"], "generate-demo": "@php vendor/bin/testbench generate-demo --ansi" } diff --git a/demo/components.html b/demo/components.html index 963fa0f8..6ec261d1 100644 --- a/demo/components.html +++ b/demo/components.html @@ -3,125 +3,13 @@ - - Rapidez Blade Components Preview - -
@@ -140,15 +28,15 @@

Primary & Secondary button

-
-
@@ -163,15 +51,15 @@

Default & Outline button

-
-
@@ -185,9 +73,9 @@

Conversion & Rounded button

-
@@ -297,32 +185,32 @@

Selectors

- +
- +
@@ -334,7 +222,7 @@

Slideover Component

Default

-
Question 2 @@ -593,7 +481,7 @@

Mobile only accordion

This is only an accordion on mobile devices. On desktop, it's always open.
-
+
Mobile only accordion Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
-
+
- - Rapidez Blade Components Preview - -
@@ -306,13 +236,13 @@ function color(variable, fallback) {
- + Question 1 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - + Question 2 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. @@ -320,13 +250,13 @@ function color(variable, fallback) {
- + Single open 1 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - + Single open 2 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. @@ -342,7 +272,7 @@ function color(variable, fallback) { You can also use this component with a custom icon if you prefer that.
- + Question 1 @@ -358,7 +288,7 @@ function color(variable, fallback) { Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - + Question 2 @@ -383,13 +313,13 @@ function color(variable, fallback) { You can also use this component without using an icon. - + Question 1 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - + Question 2 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. @@ -403,13 +333,13 @@ function color(variable, fallback) { This is only an accordion on mobile devices. On desktop, it's always open. - + Question 1 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. - + Question 2 Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus. diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php index 0ce52bdf..fa96e537 100644 --- a/resources/views/components/button/base.blade.php +++ b/resources/views/components/button/base.blade.php @@ -7,6 +7,6 @@ Something ``` --}} -twMerge('inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}> +twMerge('inline-flex items-center justify-center transition font-medium text-base rounded-sm min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}> {{ $slot }} diff --git a/resources/views/components/button/conversion.blade.php b/resources/views/components/button/conversion.blade.php index 0cd02299..92211db9 100644 --- a/resources/views/components/button/conversion.blade.php +++ b/resources/views/components/button/conversion.blade.php @@ -7,6 +7,6 @@ Something ``` --}} -twMerge('bg-conversion hover:bg-opacity-80 text-conversion-text border-b border-b-black/20') }}> +twMerge('bg-conversion hover:bg-conversion/80 text-conversion-text border-b border-b-black/20') }}> {{ $slot }} \ No newline at end of file diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php index 45550c4d..760e4197 100644 --- a/resources/views/components/button/primary.blade.php +++ b/resources/views/components/button/primary.blade.php @@ -3,6 +3,6 @@ Something ``` --}} -twMerge('bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80') }}> +twMerge('bg-primary text-primary-text border-b border-b-black/20 hover:bg-primary/80') }}> {{ $slot }} diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php index 87f2d2b6..43524f93 100644 --- a/resources/views/components/button/secondary.blade.php +++ b/resources/views/components/button/secondary.blade.php @@ -3,6 +3,6 @@ Something ``` --}} -twMerge('bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80') }}> +twMerge('bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-secondary/80') }}> {{ $slot }} \ No newline at end of file diff --git a/resources/views/components/input/checkbox/base.blade.php b/resources/views/components/input/checkbox/base.blade.php index 98e6918b..be5fc6f1 100644 --- a/resources/views/components/input/checkbox/base.blade.php +++ b/resources/views/components/input/checkbox/base.blade.php @@ -6,4 +6,4 @@ ``` --}} -twMerge('cursor-pointer border border-default rounded-md size-5 text focus:outline-none focus:ring-emphasis focus:ring-offset-0 disabled:cursor-not-allowed') }} /> +twMerge('cursor-pointer border border-default rounded-md size-5 text focus:outline-hidden focus:ring-emphasis focus:ring-offset-0 disabled:cursor-not-allowed') }} /> diff --git a/resources/views/components/input/radio/base.blade.php b/resources/views/components/input/radio/base.blade.php index dadd1111..872c5ebf 100644 --- a/resources/views/components/input/radio/base.blade.php +++ b/resources/views/components/input/radio/base.blade.php @@ -6,4 +6,4 @@ ``` --}} -twMerge('cursor-pointer border border-default size-5 text focus:outline-none focus:ring-emphasis focus:ring-offset-0 disabled:cursor-not-allowed') }} /> +twMerge('cursor-pointer border border-default size-5 text focus:outline-hidden focus:ring-emphasis focus:ring-offset-0 disabled:cursor-not-allowed') }} /> diff --git a/testbench.yaml b/testbench.yaml new file mode 100644 index 00000000..4982c11f --- /dev/null +++ b/testbench.yaml @@ -0,0 +1,4 @@ +workbench: + sync: + - from: public/build + to: public/build diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 00000000..194fda3b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,16 @@ +import { defineConfig } from 'vite' +import laravel from 'laravel-vite-plugin' +import tailwindcss from '@tailwindcss/vite' + +export default defineConfig({ + plugins: [ + laravel({ + input: ['resources/css/app.css'], + refresh: true, + }), + tailwindcss(), + ], + resolve: { + preserveSymlinks: true, + }, +})