From 4027f15bed3c89df60f150e191dc375dd60fe90d Mon Sep 17 00:00:00 2001 From: Powerplex Date: Thu, 16 Nov 2023 15:28:27 +0100 Subject: [PATCH] feat(dropdown): dropdown bootstrap package --- package-lock.json | 14 ++++++ packages/components/dropdown/.npmignore | 2 + packages/components/dropdown/LICENSE.md | 21 +++++++++ packages/components/dropdown/README.md | 13 ++++++ packages/components/dropdown/package.json | 44 +++++++++++++++++++ .../components/dropdown/src/Dropdown.doc.mdx | 32 ++++++++++++++ .../dropdown/src/Dropdown.stories.tsx | 12 +++++ .../dropdown/src/Dropdown.styles.ts | 0 .../components/dropdown/src/Dropdown.test.tsx | 12 +++++ packages/components/dropdown/src/Dropdown.tsx | 1 + packages/components/dropdown/src/index.ts | 1 + packages/components/dropdown/tsconfig.json | 4 ++ packages/components/dropdown/vite.config.ts | 6 +++ 13 files changed, 162 insertions(+) create mode 100644 packages/components/dropdown/.npmignore create mode 100644 packages/components/dropdown/LICENSE.md create mode 100644 packages/components/dropdown/README.md create mode 100644 packages/components/dropdown/package.json create mode 100644 packages/components/dropdown/src/Dropdown.doc.mdx create mode 100644 packages/components/dropdown/src/Dropdown.stories.tsx create mode 100644 packages/components/dropdown/src/Dropdown.styles.ts create mode 100644 packages/components/dropdown/src/Dropdown.test.tsx create mode 100644 packages/components/dropdown/src/Dropdown.tsx create mode 100644 packages/components/dropdown/src/index.ts create mode 100644 packages/components/dropdown/tsconfig.json create mode 100644 packages/components/dropdown/vite.config.ts diff --git a/package-lock.json b/package-lock.json index a15d06d03..adbd007b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2401,6 +2401,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -7744,6 +7745,10 @@ "resolved": "packages/components/drawer", "link": true }, + "node_modules/@spark-ui/dropdown": { + "resolved": "packages/components/dropdown", + "link": true + }, "node_modules/@spark-ui/form-field": { "resolved": "packages/components/form-field", "link": true @@ -34213,6 +34218,15 @@ "tailwindcss": "^3.0.0" } }, + "packages/components/dropdown": { + "version": "0.1.5", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "tailwindcss": "^3.0.0" + } + }, "packages/components/form-field": { "name": "@spark-ui/form-field", "version": "1.4.0", diff --git a/packages/components/dropdown/.npmignore b/packages/components/dropdown/.npmignore new file mode 100644 index 000000000..14144f5f7 --- /dev/null +++ b/packages/components/dropdown/.npmignore @@ -0,0 +1,2 @@ +src +**/*.stories.* diff --git a/packages/components/dropdown/LICENSE.md b/packages/components/dropdown/LICENSE.md new file mode 100644 index 000000000..62d374781 --- /dev/null +++ b/packages/components/dropdown/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) Adevinta ASA. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/components/dropdown/README.md b/packages/components/dropdown/README.md new file mode 100644 index 000000000..d6c3de03b --- /dev/null +++ b/packages/components/dropdown/README.md @@ -0,0 +1,13 @@ +# Dropdown +> @spark-ui/dropdown + +[![storybook](https://img.shields.io/badge/storybook-black?logo=storybook)](https://sparkui.vercel.app/?path=/docs/components-dropdown--docs) +[![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs)](https://sparkui-adv.vercel.app/docs/components/dropdown) +[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/adevinta/spark/issues/new?&projects=4&template=bug-report.yml&assignees=&labels=component,dropdown) +[![npm](https://img.shields.io/npm/dt/%40spark-ui/dropdown?logo=npm&labelColor=black)](https://www.npmjs.com/package/@spark-ui/dropdown) + + +This package is part of the [`@spark-ui`](https://github.com/adevinta/spark) react-js user interface component library project. + +[![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Aselect&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Acomponent+label%3Aselect) +[![NPM](https://img.shields.io/npm/l/%40spark-ui%2Fselect)](https://github.com/adevinta/spark/blob/main/packages/components/dropdown/LICENSE.md) diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json new file mode 100644 index 000000000..331bff1fa --- /dev/null +++ b/packages/components/dropdown/package.json @@ -0,0 +1,44 @@ +{ + "name": "@spark-ui/dropdown", + "version": "0.0.1", + "description": "Displays a list of options for the user to pick from—triggered by a button. Differs from Select in that it offers multiple select and its list is not native.", + "publishConfig": { + "access": "public" + }, + "keywords": [ + "@spark-ui", + "react", + "component", + "accessible", + "accessibility", + "wai-aria", + "aria", + "a11y", + "dropdown" + ], + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "scripts": { + "build": "vite build" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "tailwindcss": "^3.0.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/adevinta/spark.git", + "directory": "packages/components/dropdown" + }, + "config": { + "title": "dropdown", + "category": "components" + }, + "bugs": { + "url": "https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Autility+label%3Aselect" + }, + "homepage": "https://sparkui.vercel.app", + "license": "MIT" +} diff --git a/packages/components/dropdown/src/Dropdown.doc.mdx b/packages/components/dropdown/src/Dropdown.doc.mdx new file mode 100644 index 000000000..c9e84a443 --- /dev/null +++ b/packages/components/dropdown/src/Dropdown.doc.mdx @@ -0,0 +1,32 @@ +import { Meta, Canvas } from '@storybook/addon-docs' +import { ArgTypes } from '@storybook/blocks' + +import { Dropdown } from '.' + +import * as stories from './Dropdown.stories' + + + +# Dropdown + +Displays a list of options for the user to pick from—triggered by a button. + +## Install + +```sh +npm install @spark-ui/dropdown +``` + +## Import + +```tsx +import { Dropdown } from '@spark-ui/dropdown' +``` + +## Props + + + +## Variants + + diff --git a/packages/components/dropdown/src/Dropdown.stories.tsx b/packages/components/dropdown/src/Dropdown.stories.tsx new file mode 100644 index 000000000..418cbe8b4 --- /dev/null +++ b/packages/components/dropdown/src/Dropdown.stories.tsx @@ -0,0 +1,12 @@ +import { Meta, StoryFn } from '@storybook/react' + +import { Dropdown } from '.' + +const meta: Meta = { + title: 'Experimental/Dropdown', + component: Dropdown, +} + +export default meta + +export const Default: StoryFn = _args => diff --git a/packages/components/dropdown/src/Dropdown.styles.ts b/packages/components/dropdown/src/Dropdown.styles.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/dropdown/src/Dropdown.test.tsx b/packages/components/dropdown/src/Dropdown.test.tsx new file mode 100644 index 000000000..01bf970a2 --- /dev/null +++ b/packages/components/dropdown/src/Dropdown.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react' +import { describe, expect, it } from 'vitest' + +import { Dropdown } from './Dropdown' + +describe('Dropdown', () => { + it('should render', () => { + render() + + expect(screen.getByText(/dropdown/)).toBeInTheDocument() + }) +}) diff --git a/packages/components/dropdown/src/Dropdown.tsx b/packages/components/dropdown/src/Dropdown.tsx new file mode 100644 index 000000000..d92a9b492 --- /dev/null +++ b/packages/components/dropdown/src/Dropdown.tsx @@ -0,0 +1 @@ +export const Dropdown = () => <>dropdown diff --git a/packages/components/dropdown/src/index.ts b/packages/components/dropdown/src/index.ts new file mode 100644 index 000000000..b3f30975c --- /dev/null +++ b/packages/components/dropdown/src/index.ts @@ -0,0 +1 @@ +export { Dropdown } from './Dropdown' diff --git a/packages/components/dropdown/tsconfig.json b/packages/components/dropdown/tsconfig.json new file mode 100644 index 000000000..18f4c0e16 --- /dev/null +++ b/packages/components/dropdown/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.json", + "include": ["src/**/*", "../../../global.d.ts"] +} diff --git a/packages/components/dropdown/vite.config.ts b/packages/components/dropdown/vite.config.ts new file mode 100644 index 000000000..64973e5ac --- /dev/null +++ b/packages/components/dropdown/vite.config.ts @@ -0,0 +1,6 @@ +import path from 'path' +import { getComponentConfiguration } from '../../../config/index' + +const { name } = require(path.resolve(__dirname, 'package.json')) + +export default getComponentConfiguration(process.cwd(), name)