refactor: use sprinkles

.github/workflows/main.yml

@@ -23,7 +23,7 @@ jobs:
           cache: pnpm
           node-version: lts/*
       - run: pnpm install
-      - run: pnpm ts:check
+      - run: pnpm typecheck
       - run: pnpm build
 
   lint:
@@ -78,7 +78,7 @@ jobs:
       - uses: cypress-io/github-action@v6
         with:
           build: pnpm workshop:build
-          start: pnpm workshop:start
+          start: pnpm workshop:preview
           wait-on: http://localhost:1337
         env:
           NODE_OPTIONS: "--no-experimental-require-module --no-experimental-detect-module"

.gitignore

@@ -1,3 +1,4 @@
+*.log
 *.tgz
 
 .DS_Store

.prettierignore

@@ -1,3 +1,5 @@
+.next
 .workshop
 dist
 pnpm-lock.yaml
+storybook-static

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -6,25 +6,23 @@ The Sanity UI components.
 npm install @sanity/ui
 
 # Install peer dependencies
-npm install react react-dom styled-components
+npm install react react-dom react-is
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)
 
 ## Usage
 
 ```jsx
-import {Button, ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {createRoot} from 'react-dom/client'
+import '@sanity/ui/css/index.css'
 
-const root = createRoot(document.getElementById('root'))
-const theme = buildTheme()
+import {Button, Root} from '@sanity/ui'
+import {createRoot} from 'react-dom/client'
 
-root.render(
-  <ThemeProvider theme={theme}>
+createRoot(document).render(
+  <Root lang="en">
     <Button text="Hello, world" />
-  </ThemeProvider>,
+  </Root>,
 )
 ```
 

cypress.config.ts

@@ -1,7 +1,9 @@
-import {defineConfig} from 'cypress'
+/// <reference types="cypress" />
 
-export default defineConfig({
+const config: Cypress.ConfigOptions = {
   e2e: {
     baseUrl: 'http://localhost:1337',
   },
-})
+}
+
+export default config

cypress/e2e/ui/autocomplete.cy.ts

@@ -175,8 +175,8 @@ context('Components/Autocomplete', () => {
     // Search for "nor"
     cy.get('#focus-and-blur').type('foo')
     cy.get('#focus-and-blur-listbox').realPress('ArrowDown')
-    cy.get('#focus-and-blur-option-foo > div').should('have.focus')
-    cy.get('#focus-and-blur-option-foo > div').click()
+    cy.get('#focus-and-blur-option-foo > button').should('have.focus')
+    cy.get('#focus-and-blur-option-foo > button').click()
 
     // Expect "foo" to be selected
     cy.get('#focus-and-blur[value="foo"]:focus').should('exist')