From e0de2cc57525418663be6b6a33c01be9ea3ca7f5 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Wed, 1 Feb 2023 10:38:11 +0800 Subject: [PATCH] feat: Storybook story improvements (#294) 1) Add SpaceFinder to Storybook ![SpaceFinder](https://user-images.githubusercontent.com/1113/214763164-4a58544d-19f9-47ba-9d33-c0ef7339dcd9.gif) 2) Add Authenticator to Storybook ![Authenticator](https://user-images.githubusercontent.com/1113/214966004-1a4eabf9-7cd3-47b0-8532-fe2c8f6e91f0.gif) 3) Break Tailwind classes in SpaceFinder, Authenticator and UploadsList down to their raw CSS so that the components work and look good in Storybook. ![UploadsList](https://user-images.githubusercontent.com/1113/214961123-e2083359-227a-466d-9d21-8a1b017e8643.gif) 4) Extract SpaceCreator to a new component ![SpaceCreator](https://user-images.githubusercontent.com/1113/214977038-f32c27e1-e280-44ce-af89-2d859237aab0.gif) --- .../playground/.storybook/preview-head.html | 8 +- .../react/playground/.storybook/preview.js | 3 + .../AuthenticationSubmitted.stories.tsx | 15 +++ .../src/stories/Authenticator.stories.tsx | 15 +++ .../src/stories/SpaceCreator.stories.tsx | 15 +++ .../stories/SpaceCreatorCreating.stories.tsx | 15 +++ .../src/stories/SpaceFinder.stories.tsx | 32 +++++ .../src/stories/SpaceList.stories.tsx | 38 ------ .../src/stories/Uploader.stories.tsx | 3 + .../src/stories/UploadsList.stories.tsx | 1 + examples/react/w3console/src/app.tsx | 73 +--------- examples/react/w3console/src/index.css | 64 --------- packages/react/src/Authenticator.tsx | 10 +- packages/react/src/SpaceCreator.tsx | 82 +++++++++++ packages/react/src/SpaceFinder.tsx | 32 ++--- packages/react/src/SpacePicker.tsx | 22 --- packages/react/src/UploadsList.tsx | 16 +-- packages/react/src/index.ts | 2 +- packages/react/src/styles/authenticator.css | 55 ++++++++ packages/react/src/styles/base.css | 27 ++++ packages/react/src/styles/space-creator.css | 58 ++++++++ packages/react/src/styles/space-finder.css | 127 ++++++++++++++++++ packages/react/src/styles/uploader.css | 27 +--- packages/react/src/styles/uploads-list.css | 64 +++++++++ 24 files changed, 554 insertions(+), 250 deletions(-) create mode 100644 examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx create mode 100644 examples/react/playground/src/stories/Authenticator.stories.tsx create mode 100644 examples/react/playground/src/stories/SpaceCreator.stories.tsx create mode 100644 examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx create mode 100644 examples/react/playground/src/stories/SpaceFinder.stories.tsx delete mode 100644 examples/react/playground/src/stories/SpaceList.stories.tsx create mode 100644 packages/react/src/SpaceCreator.tsx delete mode 100644 packages/react/src/SpacePicker.tsx create mode 100644 packages/react/src/styles/authenticator.css create mode 100644 packages/react/src/styles/base.css create mode 100644 packages/react/src/styles/space-creator.css create mode 100644 packages/react/src/styles/space-finder.css create mode 100644 packages/react/src/styles/uploads-list.css diff --git a/examples/react/playground/.storybook/preview-head.html b/examples/react/playground/.storybook/preview-head.html index 05da1e9df..22ec540a6 100644 --- a/examples/react/playground/.storybook/preview-head.html +++ b/examples/react/playground/.storybook/preview-head.html @@ -1,3 +1,9 @@ \ No newline at end of file + + \ No newline at end of file diff --git a/examples/react/playground/.storybook/preview.js b/examples/react/playground/.storybook/preview.js index 48afd568a..d6cfb683b 100644 --- a/examples/react/playground/.storybook/preview.js +++ b/examples/react/playground/.storybook/preview.js @@ -6,4 +6,7 @@ export const parameters = { date: /Date$/, }, }, + backgrounds: { + default: 'dark' + } } \ No newline at end of file diff --git a/examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx b/examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx new file mode 100644 index 000000000..2e2c1ed32 --- /dev/null +++ b/examples/react/playground/src/stories/AuthenticationSubmitted.stories.tsx @@ -0,0 +1,15 @@ +import { AuthenticationSubmitted } from '@w3ui/react' +import '@w3ui/react/src/styles/authenticator.css' + +export default { + title: 'w3ui/Authenticator', + component: AuthenticationSubmitted, + tags: ['autodocs'], + argTypes: { + } +} + +export const Submitted = { + args: { + } +} diff --git a/examples/react/playground/src/stories/Authenticator.stories.tsx b/examples/react/playground/src/stories/Authenticator.stories.tsx new file mode 100644 index 000000000..9f88e7d23 --- /dev/null +++ b/examples/react/playground/src/stories/Authenticator.stories.tsx @@ -0,0 +1,15 @@ +import { Authenticator } from '@w3ui/react' +import '@w3ui/react/src/styles/authenticator.css' + +export default { + title: 'w3ui/Authenticator', + component: Authenticator, + tags: ['autodocs'], + argTypes: { + } +} + +export const Primary = { + args: { + } +} diff --git a/examples/react/playground/src/stories/SpaceCreator.stories.tsx b/examples/react/playground/src/stories/SpaceCreator.stories.tsx new file mode 100644 index 000000000..25e55c856 --- /dev/null +++ b/examples/react/playground/src/stories/SpaceCreator.stories.tsx @@ -0,0 +1,15 @@ +import { SpaceCreator } from '@w3ui/react' +import '@w3ui/react/src/styles/space-creator.css' + +export default { + title: 'w3ui/SpaceCreator', + component: SpaceCreator, + tags: ['autodocs'], + argTypes: { + } +} + +export const Primary = { + args: { + } +} diff --git a/examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx b/examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx new file mode 100644 index 000000000..54ae90233 --- /dev/null +++ b/examples/react/playground/src/stories/SpaceCreatorCreating.stories.tsx @@ -0,0 +1,15 @@ +import { SpaceCreatorCreating } from '@w3ui/react' +import '@w3ui/react/src/styles/space-creator.css' + +export default { + title: 'w3ui/SpaceCreator', + component: SpaceCreatorCreating, + tags: ['autodocs'], + argTypes: { + } +} + +export const Creating = { + args: { + } +} diff --git a/examples/react/playground/src/stories/SpaceFinder.stories.tsx b/examples/react/playground/src/stories/SpaceFinder.stories.tsx new file mode 100644 index 000000000..c64102491 --- /dev/null +++ b/examples/react/playground/src/stories/SpaceFinder.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import type { DID } from '@ucanto/interface' +import { SpaceFinder } from '@w3ui/react' +import { Space } from '@w3ui/keyring-core' +import '@w3ui/react/src/styles/space-finder.css' + +export default { + title: 'w3ui/SpaceFinder', + component: SpaceFinder, + tags: ['autodocs'], + argTypes: { + setSelected: { action: 'set space' } + } +} + +const spaces = ['did:example:abc123', 'did:example:xyz789', 'did:example:lmn456'].map( + (did: string, i) => new Space(did as DID, { name: `Space ${i}` }) +) + +export const Primary = { + args: { + spaces, + selected: spaces[0] + }, + decorators: [ + (Story) => ( +
+ +
+ ) + ] +} diff --git a/examples/react/playground/src/stories/SpaceList.stories.tsx b/examples/react/playground/src/stories/SpaceList.stories.tsx deleted file mode 100644 index 620156b57..000000000 --- a/examples/react/playground/src/stories/SpaceList.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { DID } from '@ucanto/interface' -import type { KeyringContextValue } from '@w3ui/react-keyring' - -import React from 'react' -import { SpaceList } from '@w3ui/react' -import { Space } from '@w3ui/keyring-core' -import { KeyringContext, keyringContextDefaultValue } from '@w3ui/react-keyring' - -function contextValue (state = {}, actions = {}): KeyringContextValue { - return [ - { ...keyringContextDefaultValue[0], ...state }, - { ...keyringContextDefaultValue[1], ...actions } - ] -} - -function WrappedSpaceList ({ spaceDIDs = [], setCurrentSpace }: { spaceDIDs: DID[], setCurrentSpace: any }): JSX.Element { - const spaces = spaceDIDs.map(did => new Space(did, {})) - return ( - - - - ) -} - -export default { - title: 'w3ui/SpaceList', - component: WrappedSpaceList, - tags: ['autodocs'], - argTypes: { - setCurrentSpace: { action: 'set space' } - } -} - -export const Primary = { - args: { - spaceDIDs: ['did:example:abc123'] - } -} diff --git a/examples/react/playground/src/stories/Uploader.stories.tsx b/examples/react/playground/src/stories/Uploader.stories.tsx index 3c3089751..c0d6602f1 100644 --- a/examples/react/playground/src/stories/Uploader.stories.tsx +++ b/examples/react/playground/src/stories/Uploader.stories.tsx @@ -6,6 +6,9 @@ export default { component: Uploader, tags: ['autodocs'], argTypes: { + }, + parameters: { + } } diff --git a/examples/react/playground/src/stories/UploadsList.stories.tsx b/examples/react/playground/src/stories/UploadsList.stories.tsx index 00da2f17b..463d42db7 100644 --- a/examples/react/playground/src/stories/UploadsList.stories.tsx +++ b/examples/react/playground/src/stories/UploadsList.stories.tsx @@ -5,6 +5,7 @@ import { CID } from 'multiformats/cid' // import * as raw from 'multiformats/codecs/raw' import { UploadsList } from '@w3ui/react' import { UploadsListContext } from '@w3ui/react-uploads-list' +import '@w3ui/react/src/styles/uploads-list.css' // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction export default { diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx index 70d9e8151..c7c2074b9 100644 --- a/examples/react/w3console/src/app.tsx +++ b/examples/react/w3console/src/app.tsx @@ -2,12 +2,14 @@ import type { ChangeEvent } from 'react' import type { Space } from '@w3ui/keyring-core' import { useEffect, useState } from 'react' -import { Authenticator, Uploader, UploadsList, W3APIProvider, SpaceFinder } from '@w3ui/react' +import { Authenticator, Uploader, UploadsList, W3APIProvider, SpaceFinder, SpaceCreator } from '@w3ui/react' import { useKeyring } from '@w3ui/react-keyring' import { useUploadsList } from '@w3ui/react-uploads-list' -import { ArrowPathIcon, ShareIcon } from '@heroicons/react/20/solid' +import { ShareIcon } from '@heroicons/react/20/solid' import md5 from 'blueimp-md5' import '@w3ui/react/src/styles/uploader.css' +import '@w3ui/react/src/styles/space-finder.css' +import '@w3ui/react/src/styles/uploads-list.css' import { SpaceShare } from './share' function SpaceRegistrar (): JSX.Element { @@ -110,73 +112,6 @@ function SpaceSection (): JSX.Element { ) } -function SpaceCreator (props: any): JSX.Element { - const [, { createSpace, registerSpace }] = useKeyring() - const [creating, setCreating] = useState(false) - const [submitted, setSubmitted] = useState(false) - const [email, setEmail] = useState('') - const [name, setName] = useState('') - - function resetForm (): void { - setEmail('') - setName('') - } - - async function onSubmit (e: React.FormEvent): Promise { - e.preventDefault() - setSubmitted(true) - try { - await createSpace(name) - // ignore this because the UI knows how to help the user recover - // from space registration failure - void registerSpace(email) - } catch (err) { - console.log(err) - throw new Error('failed to register', { cause: err }) - } finally { - resetForm() - setSubmitted(false) - } - } - return ( -
- {(creating) - ? submitted - ? ( -
-
Creating Space...
- -
- ) - : ( -
) => { void onSubmit(e) }} - > - ) => { setEmail(e.target.value) }} - /> - ) => { setName(e.target.value) }} - /> - -
- ) - : ( - - )} -
- ) -} - function SpaceSelector (props: any): JSX.Element { const [{ space: currentSpace, spaces }, { setCurrentSpace }] = useKeyring() async function selectSpace (space: Space): Promise { diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css index 5a66a67b7..a90f0749c 100644 --- a/examples/react/w3console/src/index.css +++ b/examples/react/w3console/src/index.css @@ -2,67 +2,3 @@ @tailwind components; @tailwind utilities; -:root { - --w3ui-uploader-primary: theme(colors.slate.800); - --w3ui-uploader-primary-hover: theme(colors.blue.900); -} - -.w3-uploads-list { - @apply mb-5; -} - -.w3-uploads-list-data { - @apply overflow-auto rounded-md border border-gray-300 dark:border-gray-700; -} - -.w3-uploads-list table { - @apply w-full border-collapse divide-y dark:divide-gray-700; -} - -.w3-uploads-list thead { - @apply text-left bg-opacity-50 text-xs tracking-wide text-zinc-300; -} - -.w3-uploads-list th { - @apply p-3; -} - -.w3-uploads-list td { - @apply block w-64 p-2 pl-3 font-mono text-xs; -} - -.w3-uploads-list nav { - @apply flex flex-row space-x-4 my-4; -} - -.w3ui-simple-authenticator-verify-email { - @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md; -} - -.w3ui-simple-authenticator-verify-email .message { - @apply text-xl; -} - -.w3ui-simple-authenticator-verify-email .detail { - @apply pt-2 pb-4; -} - -.w3ui-simple-authenticator { - @apply w-full h-screen flex flex-col justify-center items-center; -} - -.w3ui-simple-authenticator-form { - @apply bg-gray-400 dark:bg-gray-800 px-24 py-16 rounded-md; -} - -.w3ui-simple-authenticator-form .email-field label { - @apply block mb-2; -} - -.w3ui-simple-authenticator-form .email-field input { - @apply rounded block p-2 w-72 bg-gray-300 dark:bg-gray-900; -} - -.w3ui-simple-authenticator-form .register { - @apply mt-2; -} diff --git a/packages/react/src/Authenticator.tsx b/packages/react/src/Authenticator.tsx index d0d495853..d5d86dfc8 100644 --- a/packages/react/src/Authenticator.tsx +++ b/packages/react/src/Authenticator.tsx @@ -5,10 +5,10 @@ export function AuthenticationForm (): JSX.Element { const [{ submitted }] = useAuthenticator() return ( - +
- - + +
@@ -19,7 +19,7 @@ export function AuthenticationSubmitted (): JSX.Element { const [{ email }] = useAuthenticator() return ( -
+

Verify your email address!

Click the link in the email we sent to {email} to sign in.

@@ -43,7 +43,7 @@ export function AuthenticationEnsurer ({ children }: { children: JSX.Element | J export function Authenticator ({ children }: { children: JSX.Element | JSX.Element[] }): JSX.Element { return ( - + {children} diff --git a/packages/react/src/SpaceCreator.tsx b/packages/react/src/SpaceCreator.tsx new file mode 100644 index 000000000..60e26f787 --- /dev/null +++ b/packages/react/src/SpaceCreator.tsx @@ -0,0 +1,82 @@ +import type { ChangeEvent } from 'react' + +import React, { useState } from 'react' +import { useKeyring } from '@w3ui/react-keyring' +import { ArrowPathIcon } from '@heroicons/react/20/solid' + +export function SpaceCreatorCreating (): JSX.Element { + return ( +
+
Creating Space...
+ +
+ ) +} + +interface SpaceCreatorProps { + className?: string +} + +export function SpaceCreator ({ className = '' }: SpaceCreatorProps): JSX.Element { + const [, { createSpace, registerSpace }] = useKeyring() + const [creating, setCreating] = useState(false) + const [submitted, setSubmitted] = useState(false) + const [email, setEmail] = useState('') + const [name, setName] = useState('') + + function resetForm (): void { + setEmail('') + setName('') + } + + async function onSubmit (e: React.FormEvent): Promise { + e.preventDefault() + setSubmitted(true) + try { + await createSpace(name) + // ignore this because the Space UI should handle helping the user recover + // from space registration failure + void registerSpace(email) + } catch (err) { + console.log(err) + throw new Error('failed to register', { cause: err }) + } finally { + resetForm() + setSubmitted(false) + } + } + return ( +
+ {(creating) + ? submitted + ? ( + + ) + : ( +
) => { void onSubmit(e) }} + > + ) => { setEmail(e.target.value) }} + /> + ) => { setName(e.target.value) }} + /> + +
+ ) + : ( + + )} +
+ ) +} diff --git a/packages/react/src/SpaceFinder.tsx b/packages/react/src/SpaceFinder.tsx index a0c00c40a..e20d7aff8 100644 --- a/packages/react/src/SpaceFinder.tsx +++ b/packages/react/src/SpaceFinder.tsx @@ -11,7 +11,7 @@ interface SpaceFinderProps { className?: string } -export function SpaceFinder ({ spaces, selected, setSelected, className }: SpaceFinderProps): JSX.Element { +export function SpaceFinder ({ spaces, selected, setSelected, className = '' }: SpaceFinderProps): JSX.Element { const [query, setQuery] = useState('') const filtered = query === '' @@ -24,18 +24,18 @@ export function SpaceFinder ({ spaces, selected, setSelected, className }: Space ) return ( -
+
a.sameAs(b)}> -
-
+
+
space.name() ?? space.did()} onChange={(event) => setQuery(event.target.value)} /> - + @@ -47,10 +47,10 @@ export function SpaceFinder ({ spaces, selected, setSelected, className }: Space leaveTo='opacity-0' afterLeave={() => setQuery('')} > - + {filtered.length === 0 && query !== '' ? ( -
+
(╯°□°)╯︵ ┻━┻
) @@ -59,16 +59,16 @@ export function SpaceFinder ({ spaces, selected, setSelected, className }: Space - `relative cursor-default select-none py-2 pl-10 pr-4 ${ - active ? 'bg-teal-600 text-white' : 'text-gray-900' + `w3ui-space-finder-combobox-option ${ + active ? 'active' : '' }`} value={space} > {({ selected, active }) => ( <> {space.name() ?? space.did()} @@ -76,11 +76,11 @@ export function SpaceFinder ({ spaces, selected, setSelected, className }: Space {selected ? ( - ) : null} diff --git a/packages/react/src/SpacePicker.tsx b/packages/react/src/SpacePicker.tsx deleted file mode 100644 index d128561f8..000000000 --- a/packages/react/src/SpacePicker.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Space } from '@w3ui/keyring-core' - -import React from 'react' -import { useKeyring } from '@w3ui/react-keyring' - -export function SpaceList (props: any): JSX.Element { - const [{ space: currentSpace, spaces }, { setCurrentSpace }] = useKeyring() - async function selectSpace (space: Space): Promise { - await setCurrentSpace(space.did()) - } - return ( -
    - {spaces.map((space, i) => ( -
  • - -
    • - ))} -
- ) -} diff --git a/packages/react/src/UploadsList.tsx b/packages/react/src/UploadsList.tsx index 3c0ad5832..5708f1cf6 100644 --- a/packages/react/src/UploadsList.tsx +++ b/packages/react/src/UploadsList.tsx @@ -6,16 +6,14 @@ function Uploads ({ uploads }: { uploads?: UploadListResult[] }): JSX.Element { if ((uploads === undefined) || (uploads.length === 0)) { return ( <> -
-
- No uploads -
- +
+ No uploads
+ ) } else { diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 1bfd0e786..57be2e86b 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -2,6 +2,6 @@ export * from './Uploader' export * from './UploadsList' export * from './Authenticator' export * from './W3Upload' -export * from './SpacePicker' export * from './SpaceFinder' +export * from './SpaceCreator' export * from './providers/W3API' diff --git a/packages/react/src/styles/authenticator.css b/packages/react/src/styles/authenticator.css new file mode 100644 index 000000000..ae8788dd9 --- /dev/null +++ b/packages/react/src/styles/authenticator.css @@ -0,0 +1,55 @@ +@import url(base.css); + +.w3ui-authenticator-verify-email { + background-color: rgb(156 163 175); + padding-left: 6rem; + padding-right: 6rem; + padding-top: 4rem; + padding-bottom: 4rem; + border-radius: 0.375rem; +} + +.w3ui-authenticator-verify-email .message { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.w3ui-authenticator-verify-email .detail { + padding-top: 0.5rem; + padding-bottom: 1rem; +} + +.w3ui-authenticator { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.w3ui-authenticator-form { + background-color: rgb(156 163 175); + padding-left: 6rem; + padding-right: 6rem; + padding-top: 4rem; + padding-bottom: 4rem; + border-radius: 0.375rem; +} + +.w3ui-authenticator-form .email-field label { + display: block; + margin-bottom: 0.5rem; +} + +.w3ui-authenticator-form .email-field input { + display: block; + border-radius: 0.25rem; + padding: 0.5rem; + width: 18rem; + background-color: rgb(209 213 219); +} + +.w3ui-authenticator-form .register { + margin-top: 0.5rem; +} \ No newline at end of file diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css new file mode 100644 index 000000000..c8f95c3cd --- /dev/null +++ b/packages/react/src/styles/base.css @@ -0,0 +1,27 @@ +:root { + --w3ui-button-text-color: white; + --w3ui-button-border-radius: 0.375rem; + --w3ui-button-primary: rgb(30 41 59); + --w3ui-button-primary-hover: rgb(30 58 138); +} + +.w3ui-button { + width: 100%; + color: var(--w3ui-button-text-color); + background-color: var(--w3ui-button-primary); + border-radius: var(--w3ui-button-border-radius); + outline: none; + border: 0; + padding: 8px 32px; + font-weight: 400; + font-size: 13px; + line-height: 24px; + letter-spacing: 0.4px; + font-weight: 500; + cursor: pointer; + transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.w3ui-button:hover { + background-color: var(--w3ui-button-primary-hover); +} \ No newline at end of file diff --git a/packages/react/src/styles/space-creator.css b/packages/react/src/styles/space-creator.css new file mode 100644 index 000000000..a2bd62fa5 --- /dev/null +++ b/packages/react/src/styles/space-creator.css @@ -0,0 +1,58 @@ +@import url(base.css); + +.w3ui-space-creator-creating { + display: flex; + flex-direction: column; + align-items: center; +} + +.w3ui-space-creator-creating>*+* { + margin-top: 1rem; +} + +.w3ui-space-creator-creating-icon { + animation: spin 1s linear infinite; + width: 1.5rem; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.w3ui-space-creator-form { + display: flex; + flex-direction: column; +} + +.w3ui-space-creator-form>*+* { + margin-top: 0.5rem; +} + +.w3ui-space-creator-email { + color: black; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.25rem; +} + +.w3ui-space-creator-name { + color: black; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.25rem; +} + +.w3ui-space-creator-add { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} \ No newline at end of file diff --git a/packages/react/src/styles/space-finder.css b/packages/react/src/styles/space-finder.css new file mode 100644 index 000000000..d33c2fc8b --- /dev/null +++ b/packages/react/src/styles/space-finder.css @@ -0,0 +1,127 @@ +@import url(base.css); + +.w3ui-space-finder-contents { + position: relative; + margin-top: 0.25rem; +} + +.w3ui-space-finder-closed { + position: relative; + width: 100%; + cursor: default; + overflow: hidden; + border-radius: 0.5rem; + background: white; + text-align: left; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); +} + +.w3ui-space-finder-closed:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.w3ui-space-finder-combobox-input { + width: 100%; + border-style: none; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 2.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: rgb(17 24 39); +} + +.w3ui-space-finder-combobox-button { + position: absolute; + top: 0px; + bottom: 0px; + right: 0px; + display: flex; + align-items: center; + padding-left: 0.5rem; +} + +.w3ui-space-finder-combobox-icon { + height: 1.25rem; + width: 1.25rem; + color: rgb(156 163 175); +} + +.w3ui-space-finder-combobox-options { + position: absolute; + margin-top: 0.25rem; + max-height: 11rem; + width: 100%; + background: white; + overflow: auto; + border-radius: 0.375rem; + padding-top: 0.25rem; + font-size: 1rem; + line-height: 1.5rem; + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + list-style-type: none; + padding-inline-start: 0px; +} + +.w3ui-space-finder-combobox-no-results { + position: relative; + cursor: default; + user-select: none; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.75rem; + line-height: 1rem; + color: rgb(239 68 68); +} + +.w3ui-space-finder-combobox-option { + position: relative; + cursor: default; + user-select: none; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 2.5rem; + padding-right: 1rem; + color: rgb(156 163 175); +} + +.w3ui-space-finder-combobox-option.active { + background-color: rgb(13 148 136); + color: white; +} + +.w3ui-space-finder-combobox-option-space-name { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.w3ui-space-finder-combobox-option-space-name.selected { + font-weight: 500; +} + +.w3ui-space-finder-combobox-option-selected-icon-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + padding-left: 0.75rem; + color: rgb(13 148 136); +} + +.w3ui-space-finder-combobox-option-selected-icon-wrapper.active { + color: white; +} + +.w3ui-space-finder-combobox-option-selected-icon { + height: 1.25rem; + width: 1.25rem; +} \ No newline at end of file diff --git a/packages/react/src/styles/uploader.css b/packages/react/src/styles/uploader.css index ee23a06e5..461aa1402 100644 --- a/packages/react/src/styles/uploader.css +++ b/packages/react/src/styles/uploader.css @@ -1,3 +1,5 @@ +@import url(base.css); + :root { --w3ui-uploader-padding: 2rem; --w3ui-uploader-background: rgba(255, 255, 255, 0.05); @@ -5,8 +7,6 @@ --w3ui-uploader-height: 200px; --w3ui-uploader-border-color: rgba(255, 255, 255, 0.25); --w3ui-uploader-border-radius: 8px; - --w3ui-uploader-primary: salmon; - --w3ui-uploader-primary-hover: rgb(250, 136, 124); } .w3ui-uploader { @@ -49,7 +49,6 @@ .w3ui-uploader.no-file:after { content: "Drag files or Click to Browse"; - /* color: var(--w3ui-uploader-primary); */ } .w3ui-uploader button { @@ -162,28 +161,6 @@ padding: 1rem; } - - -.w3ui-button { - width: 100%; - background-color: var(--w3ui-uploader-primary); - border-radius: var(--w3ui-uploader-border-radius); - outline: none; - border: 0; - padding: 8px 32px; - font-weight: 400; - font-size: 13px; - line-height: 24px; - letter-spacing: 0.4px; - font-weight: 500; - cursor: pointer; - transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -.w3ui-button:hover { - background-color: var(--w3ui-uploader-primary-hover); -} - .w3ui-uploader .w3ui-button { width: auto; } \ No newline at end of file diff --git a/packages/react/src/styles/uploads-list.css b/packages/react/src/styles/uploads-list.css new file mode 100644 index 000000000..4662e35fd --- /dev/null +++ b/packages/react/src/styles/uploads-list.css @@ -0,0 +1,64 @@ +.w3-uploads-list { + margin-bottom: 1.25rem; +} + +.w3-uploads-list-no-uploads { + color: rgb(212 212 216); +} + +.w3-uploads-list-data { + overflow: auto; + border-radius: 0.375rem; + border-width: 1px; + border-color: rgb(209 213 219); + border-style: solid; +} + +.w3-uploads-list table { + width: 100%; + border-collapse: collapse; +} + +.w3-uploads-list table>*+* { + border-top-width: 1px; + border-bottom-width: 0px; + border-color: rgb(209 213 219); +} + +.w3-uploads-list thead { + text-align: left; + font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.025em; + color: rgb(212 212 216); +} + +.w3-uploads-list th { + padding: 0.75rem; +} + +.w3-uploads-list td { + display: block; + width: 16rem; + padding: 0.5rem; + padding-left: 0.75rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.75rem; + line-height: 1rem; +} + +.w3-uploads-list td a { + text-decoration: none; + color: white; +} + +.w3-uploads-list nav { + display: flex; + flex-direction: row; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.w3-uploads-list nav>*+*{ + margin-left: 1rem; +}